# picto-graph-x
> Preview, develop and document StencilJS components
Latest version **0.0.28** (published 2018-12-05) · MIT license · 0 weekly downloads
## Install
```sh
npm install picto-graph-x
pnpm add picto-graph-x
yarn add picto-graph-x
bun add picto-graph-x
```
## Health
**Score 25/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities.
Warnings: low downloads; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.0.28 |
| Published | 2018-12-05 |
| First published | 2018-11-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 9.1 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | dohxis |
## Links
- npm: https://www.npmjs.com/package/picto-graph-x
- npm.io page: https://npm.io/package/picto-graph-x
## Dependencies (6)
- [lodash-es](https://npm.io/package/lodash-es.md) ^4.17.11
- [async-file](https://npm.io/package/async-file.md) ^2.0.2
- [highlight.js](https://npm.io/package/highlight.js.md) ^9.13.1
- [@stencil/router](https://npm.io/package/@stencil/router.md) ^0.3.1
- [@types/lodash-es](https://npm.io/package/@types/lodash-es.md) ^4.17.1
- [@types/highlight.js](https://npm.io/package/@types/highlight.js.md) ^9.12.3
## Recent versions
- 0.0.28 (latest) — 2018-12-05
- 0.0.27 — 2018-12-01
- 0.0.26 — 2018-11-28
- 0.0.25 — 2018-11-28
- 0.0.24 — 2018-11-26
## README
**Warning!** This is a modified fork, please don't use this version. Instead go to the [real project](https://github.com/snaptopixel/picto).
---
## Getting started
Stencil provides the tooling, picto brings the ui and conventions that allow you to rapidly and attractively document, display and develop your component libraries.
You'll only need to do a few things to get it up and running for local development:
- Create an index.html file
- Create an additional stencil config
- Add a script in package.json
Once you've got the basics up and running you can create preconfigured examples for your components using slots, props and custom markdown documentation (we'll get to that later.)
### src/index.html
```html
My Component Library
# Markdown to display as the home/index page
```
### stencil.dev.ts
This should be a duplicate of your `stencil.config.ts` replacing your `dist` outputTarget with the following:
```ts
outputTargets: [{
type: 'www',
dir: 'docs'
}],
```
### package.json
Add the following to the `scripts` portion (you can name it whatever you'd like):
```json
"picto": "stencil build --config stencil.dev.ts --dev --watch --serve --docs-json docs/components.json"
```
### Run it!
Use your preferred package manager to run the newly added script `yarn picto` or `npm run picto`. Your browser will launch once compiled and you'll be able to preview and play with your components with hot-reloading etc.
> ⚠️ After running, you'll notice a new `docs` directory, you can add this to `.gitignore` or even deploy it to your repo and host on github for an auto-updating docs site.
### Documenting components
After running for the first time you'll notice that `readme.md` files have been created next to your components (via Stencil). This is your entry point for documenting and configuring your example components.
Any markdown you add above the auto-generated content will be rendered below your component preview. You can use standard markdown and will also get syntax-highlighting with code blocks.
### Configuring component previews
You configure your previews using YAML "frontmatter" at the top of your markdown files. In its most basic form it looks like this:
```yaml
---
props:
propString: Hello World
propNumber: 123
propBoolean: true
propArray:
- Hello
- World
propObj:
message: Hi
name: Bob
---
Markdown here…
```
#### All supported options
- **props**
Optional hash containing prop name/value pairs that will be pre-populated
- **background**
css `background` value for the component preview, `dark` or `light` is also supported for predefined values
- **innerHTML**
HTML that will be inserted _inside_ the component, useful for testing slots etc.
- **title**
When creating multiple usage examples will be used as the title in the sub-navigation menu
- **controls**
Customize the ui control used in the prop inspector, current supported values are
- **string**: `input[type=text]`
- **boolean**: `checkbox`
- **number**: `input[type=number]`
- (any value): `textarea` _*parsed as javascript_
### Specifying additional configurations
There may be instances where you want to show additional or optional usages of a single-component.
picto also supports markdown files that are placed in a component's `usage` directory. Simply add a markdown file following the conventions already mentioned and it will appear in a sub-menu under the component's main navigation item.
---
_Source: https://npm.io/package/picto-graph-x · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
