diff --git a/docs/api/argtypes.md b/docs/api/argtypes.md index 8e08b55100a..942cd7d1495 100644 --- a/docs/api/argtypes.md +++ b/docs/api/argtypes.md @@ -6,8 +6,7 @@ title: 'ArgTypes' NOTE: This API is experimental and may change outside of the typical semver release cycle -
- +
ArgTypes are a first-class feature in Storybook for specifying the behaviour of [Args](../writing-stories/args.md). By specifying the type of an arg you constrain the values that it can take and can also provide information about args that are not explicitly set (i.e. not required). @@ -19,23 +18,21 @@ The most concrete realization of argTypes is the [Args Table](../writing-docs/do ## Automatic argType inference -If you are using the Storybook [docs](../writing-docs/introduction.md) addon (installed by default as part of [essentials](../essentials/introduction.md)), then Storybook will infer a set of argTypes for each story based on the `component` specified in the [default export](#default-export) of the CSF file. +If you are using the Storybook [docs](../writing-docs/introduction.md) addon (installed by default as part of [essentials](../essentials/introduction.md)), then Storybook will infer a set of argTypes for each story based on the `component` specified in the [default export](#default-export) of the CSF file. To do so, Storybook uses various static analysis tools depending on your framework. - - -- React - - [react-docgen](https://github.com/reactjs/react-docgen) - - [react-docgen-typescript](https://github.com/styleguidist/react-docgen-typescript) +- React + - [react-docgen](https://github.com/reactjs/react-docgen) + - [react-docgen-typescript](https://github.com/styleguidist/react-docgen-typescript) - Vue - - [vue-docgen-api](https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/packages/vue-docgen-api) + - [vue-docgen-api](https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/packages/vue-docgen-api) - Angular - - [compodoc](https://compodoc.app/) + - [compodoc](https://compodoc.app/) - WebComponents - - [custom-element.json](https://github.com/webcomponents/custom-elements-json) + - [custom-element.json](https://github.com/webcomponents/custom-elements-json) - Ember - - [YUI doc](https://github.com/ember-learn/ember-cli-addon-docs-yuidoc#documenting-components) + - [YUI doc](https://github.com/ember-learn/ember-cli-addon-docs-yuidoc#documenting-components) The format of the generated argType will look something like: @@ -61,18 +58,18 @@ In this ArgTypes data structure, name, type, defaultValue, and description are s
- `@storybook/addon-docs` provide shorthand for common tasks: +`@storybook/addon-docs` provide shorthand for common tasks: + - `type: 'number'` is shorthand for type: { name: 'number' } - `control: 'radio'` is shorthand for control: { type: 'radio' } -
+
#### Manual specification -If you want more control over the props table or any other aspect of using argTypes, you can overwrite the generated argTypes for you component on a per-arg basis. For instance, with the above inferred argTypes and the following default export: +If you want more control over the props table or any other aspect of using argTypes, you can overwrite the generated argTypes for you component on a per-arg basis. For instance, with the above inferred argTypes and the following default export: ```js - export default { title: 'Button', component: Button, diff --git a/docs/api/cli-options.md b/docs/api/cli-options.md index 51603e23dba..7ea2cf6a7ca 100644 --- a/docs/api/cli-options.md +++ b/docs/api/cli-options.md @@ -12,25 +12,24 @@ You can pass these commands the following options to alter Storybook's behavior. Usage: start-storybook [options] ``` -| Options |Description |Example | -|-----------------------------|:---------------------------------------------------------------------------------------------------------------------------------------------|:----------------------------------------------| -|--help |Output usage information |`start-storybook --help` | -|-V, --version |Output the version number |`start-storybook -V` | -|-p, --port [number] |Port to run Storybook |`start-storybook -p 9009` | -|-h, --host [string] |Host to run Storybook |`start-storybook -h http://my-host.com` | -|-s, --static-dir |Directory where to load static files from, comma-separated list |`start-storybook -s public` | -|-c, --config-dir [dir-name] |Directory where to load Storybook configurations from |`start-storybook -c .storybook` | -|--https |Serve Storybook over HTTPS. Note: You must provide your own certificate information. |`start-storybook --https` | -|--ssl-ca |Provide an SSL certificate authority. (Optional with --https, required if using a self-signed certificate) |`start-storybook --ssl-ca my-certificate` | -|--ssl-cert |Provide an SSL certificate. (Required with --https) |`start-storybook --ssl-cert my-ssl-certificate`| -|--ssl-key |Provide an SSL key. (Required with --https) |`start-storybook --ssl-key my-ssl-key` | -|--smoke-test |Exit after successful start |`start-storybook --smoke-test` | -|--ci |CI mode (skip interactive prompts, don't open browser) |`start-storybook --ci` | -|--quiet |Suppress verbose build output |`start-storybook --quiet` | -|--no-dll |Do not use dll reference |`start-storybook --no-dll` | -|--debug-webpack |Display final webpack configurations for debugging purposes |`start-storybook --debug-webpack` | -|--docs |Starts Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#preview-storybooks-documentation)|`start-storybook --docs` | - +| Options | Description | Example | +| ------------------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------- | +| --help | Output usage information | `start-storybook --help` | +| -V, --version | Output the version number | `start-storybook -V` | +| -p, --port [number] | Port to run Storybook | `start-storybook -p 9009` | +| -h, --host [string] | Host to run Storybook | `start-storybook -h http://my-host.com` | +| -s, --static-dir `` | Directory where to load static files from, comma-separated list | `start-storybook -s public` | +| -c, --config-dir [dir-name] | Directory where to load Storybook configurations from | `start-storybook -c .storybook` | +| --https | Serve Storybook over HTTPS. Note: You must provide your own certificate information. | `start-storybook --https` | +| --ssl-ca `` | Provide an SSL certificate authority. (Optional with --https, required if using a self-signed certificate) | `start-storybook --ssl-ca my-certificate` | +| --ssl-cert `` | Provide an SSL certificate. (Required with --https) | `start-storybook --ssl-cert my-ssl-certificate` | +| --ssl-key `` | Provide an SSL key. (Required with --https) | `start-storybook --ssl-key my-ssl-key` | +| --smoke-test | Exit after successful start | `start-storybook --smoke-test` | +| --ci | CI mode (skip interactive prompts, don't open browser) | `start-storybook --ci` | +| --quiet | Suppress verbose build output | `start-storybook --quiet` | +| --no-dll | Do not use dll reference | `start-storybook --no-dll` | +| --debug-webpack | Display final webpack configurations for debugging purposes | `start-storybook --debug-webpack` | +| --docs | Starts Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#preview-storybooks-documentation) | `start-storybook --docs` | ## For build-storybook @@ -38,16 +37,16 @@ Usage: start-storybook [options] Usage: build-storybook [options] ``` -| Options |Description |Example | -|-----------------------------|:----------------------------------------------------------------------------------------------------------------------------------------------|:-------------------------------------------| -|-h, --help |Output usage information |`build-storybook --help` | -|-V, --version |Output the version number |`build-storybook -V` | -|-s, --static-dir |Directory where to load static files from, comma-separated list |`build-storybook -s public` | -|-o, --output-dir [dir-name] |Directory where to store built files |`build-storybook -o /my-deployed-storybook` | -|-c, --config-dir [dir-name] |Directory where to load Storybook configurations from |`build-storybook -o .storybook` | -|-w, --watch |Enables watch mode |`build-storybook -w` | -|--loglevel [level] |Controls level of logging during build. Can be one of: [silly, verbose, info (default), warn, error, silent] |`build-storybook --loglevel warn` | -|--quiet |Suppress verbose build output |`build-storybook --quiet` | -|--no-dll |Do not use dll reference |`build-storybook --no-dll` | -|--debug-webpack |Display final webpack configurations for debugging purposes |`build-storybook --debug-webpack` | -|--docs |Builds Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#publish-storybooks-documentation))|`start-storybook --docs` | +| Options | Description | Example | +| ------------------------------ | :---------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------ | +| -h, --help | Output usage information | `build-storybook --help` | +| -V, --version | Output the version number | `build-storybook -V` | +| -s, --static-dir `` | Directory where to load static files from, comma-separated list | `build-storybook -s public` | +| -o, --output-dir [dir-name] | Directory where to store built files | `build-storybook -o /my-deployed-storybook` | +| -c, --config-dir [dir-name] | Directory where to load Storybook configurations from | `build-storybook -o .storybook` | +| -w, --watch | Enables watch mode | `build-storybook -w` | +| --loglevel [level] | Controls level of logging during build. Can be one of: [silly, verbose, info (default), warn, error, silent] | `build-storybook --loglevel warn` | +| --quiet | Suppress verbose build output | `build-storybook --quiet` | +| --no-dll | Do not use dll reference | `build-storybook --no-dll` | +| --debug-webpack | Display final webpack configurations for debugging purposes | `build-storybook --debug-webpack` | +| --docs | Builds Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#publish-storybooks-documentation)) | `start-storybook --docs` | diff --git a/docs/api/csf.md b/docs/api/csf.md index 032b67ee3c7..97cd5c299d0 100644 --- a/docs/api/csf.md +++ b/docs/api/csf.md @@ -10,7 +10,7 @@ Storybook's Component Story Format (CSF) is the recommended way to [write storie TODO: vet storiesOf links
-
If you are writing stories in the older `storiesOf()` syntax, you can find documentation in an [advanced README](../../lib/core/ADVANCED.md). @@ -22,7 +22,7 @@ CSF is supported in all frameworks except React Native, where you should use the #### Default export -The default export defines metadata about your component, including the `component` itself, its `title` (where it will show up in the [navigation UI story hierarchy](../writing-stories/docs/writing-stories/naming-components-and-hierarchy.md#sorting-stories)), [decorators](../writing-stories/decorators.md), and [parameters](../writing-stories/parameters.md). +The default export defines metadata about your component, including the `component` itself, its `title` (where it will show up in the [navigation UI story hierarchy](../writing-stories/docs/writing-stories/naming-components-and-hierarchy.md#sorting-stories)), [decorators](../writing-stories/decorators.md), and [parameters](../writing-stories/parameters.md). The `component` field is optional (but encouraged!), and is used by addons for automatic prop table generation and display of other component metadata. `title` should be unique, i.e. not re-used across files. @@ -49,9 +49,9 @@ With CSF, every named export in the file represents a story function by default. import MyComponent from './MyComponent'; export default { - title: 'Path/To/MyComponent', - component: MyComponent, -} + title: 'Path/To/MyComponent', + component: MyComponent, +}; export const Basic = () => ; export const WithProp = () => ; @@ -59,24 +59,20 @@ export const WithProp = () => ; The exported identifiers will be converted to "start case" using Lodash's [startCase](https://lodash.com/docs/#startCase) function. For example: -| Identifier | Transformation | -| ------------------------ |:--------------------:| -| **name** |**Name** | -| **someName** | **Some Name** | -| **someNAME** | **SSome NAME** | -| **some_custom_NAME** | **Some Custom NAME** | -| **someName1234** | **ome Name 1 2 3 4** | - - +| Identifier | Transformation | +| -------------------- | :------------------: | +| **name** | **Name** | +| **someName** | **Some Name** | +| **someNAME** | **SSome NAME** | +| **some_custom_NAME** | **Some Custom NAME** | +| **someName1234** | **ome Name 1 2 3 4** | It's recommended to start export names with a capital letter. - Story functions can be annotated with a few different fields to define story-level [decorators](../writing-stories/decorators.md) and [parameters](../writing-stories/parameters.md), and also to define the `storyName` of the story. The `storyName` is useful if you want to use names with special characters, names that correspond to restricted keywords in Javascript, or names that collide with other variables in the file. If it's not specified, the export name will be used instead. - ```jsx // MyComponent.story.js @@ -99,9 +95,9 @@ Consider Storybook’s ["Button" example](../writing-stories/introduction.md#def import { action } from '@storybook/addon-actions'; import { Button } from './Button'; -export default { - title: 'Button', - component: Button +export default { + title: 'Button', + component: Button }; export const Text = () => ; -``` + ![Initial button story](./example-button-noargs.png) @@ -58,7 +62,6 @@ Storybook makes it easy to work on one component in one state (aka a story) at a Update the `label` of the `Primary` story then see your change in Storybook. -