mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-05 08:01:20 +08:00
Merge pull request #16621 from storybookjs/chore_configure_docs_6_4_port_CSF2
Chore: (Docs) Adjustments for the Configure Section for 6.4
This commit is contained in:
jonniebigodes
GitHub
commit
73a27af64a
@ -6,13 +6,13 @@ Storybook’s webpack config by [default](#default-configuration) sets up [Babel
|
||||
|
||||
It has three different modes:
|
||||
|
||||
- **CRA** - the mode for Create React App apps specifically
|
||||
- **V6** - the default mode for version 6.x and below
|
||||
- **V7** - a new mode slated to become the default in SB7.x
|
||||
- [**CRA**](#cra-mode) - the mode for Create React App apps specifically
|
||||
- [**V6**](#v6-mode) - the default mode for version 6.x and below
|
||||
- [**V7**](#v7-mode) - a new mode slated to become the default in SB7.x
|
||||
|
||||
## CRA mode
|
||||
|
||||
CRA apps configured with `@storybook/preset-create-react-app` use CRA's babel handling to behave as close as possible to your actual application. None of the other documentation on this page applies.
|
||||
[CRA](https://create-react-app.dev/) apps configured with `@storybook/preset-create-react-app` use CRA's babel handling to behave as close as possible to your actual application. None of the other documentation on this page applies.
|
||||
|
||||
## V6 mode
|
||||
|
||||
@ -26,7 +26,7 @@ Here are some key features of Storybook's Babel configurations.
|
||||
|
||||
We have added ES2016 support with Babel for transpiling your JS code.
|
||||
|
||||
In addition to that, we've added a few additional features, like object spreading and async await.
|
||||
In addition to that, we've added a few additional features, like [object spreading](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) and [`async` `await`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function).
|
||||
|
||||
Check out our [source](https://github.com/storybookjs/storybook/blob/next/lib/core-common/src/utils/babel.ts) to learn more about these plugins.
|
||||
|
||||
@ -34,71 +34,134 @@ Check out our [source](https://github.com/storybookjs/storybook/blob/next/lib/co
|
||||
|
||||
If your project has a `.babelrc` file, we'll use that instead of the default config file.
|
||||
|
||||
You can also place a `.storybook/.babelrc` file to use a special configuration for Storybook only.
|
||||
You can also place a `.storybook/.babelrc` file to use a unique configuration for Storybook only.
|
||||
|
||||
### Custom configuration
|
||||
|
||||
If you need to further configure/extend the babel config Storybook uses, you can use the `babel` field of [`.storybook/main.js`](./overview#configure-your-storybook-project):
|
||||
If you need, you can customize the default Babel configuration used by Storybook. Update your [`.storybook/main.js`](./overview#configure-your-storybook-project) and add the `babel` field with the options you want to use:
|
||||
|
||||
```js
|
||||
// .storybook/main.js
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
module.exports = {
|
||||
//...
|
||||
babel: async (options) => ({
|
||||
...options,
|
||||
// any extra options you want to set
|
||||
}),
|
||||
};
|
||||
```
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-main-custom-babel-config.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
## V7 Mode
|
||||
|
||||
V7 mode is a new option available in Storybook 6.4+ behind a feature flag.
|
||||
|
||||
Its goal is to make Babel configuration simpler, less buggy, easier to troubleshoot, and more consistent with the rest of the JS ecosystem.
|
||||
Its goal is to make the Babel configuration simpler, less buggy, easier to troubleshoot, and more consistent with the rest of the JS ecosystem.
|
||||
|
||||
In V7 mode, you are responsible for configuring Babel using your `.babelrc` file and Storybook does not provide any default. Storybook's frameworks and addons may provide small programmatic modifications to the babel configuration.
|
||||
In V7 mode, you are responsible for configuring Babel using your `.babelrc` file, and Storybook does not provide any default. Storybook's frameworks and addons may provide minor programmatic modifications to the babel configuration.
|
||||
|
||||
### Activating
|
||||
### How it works
|
||||
|
||||
To activate V7 mode, set the feature flag in your `.storybook/main.js` config:
|
||||
|
||||
```js
|
||||
module.exports = {
|
||||
// ... your existing config
|
||||
features: {
|
||||
babelModeV7: true,
|
||||
},
|
||||
};
|
||||
```
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-main-babel-mode-v7.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
### Migrating from V6
|
||||
|
||||
For detailed instructions on how to migrate from `V6` mode please see [MIGRATION.md](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#babel-mode-v7).
|
||||
For detailed instructions on migrating from `V6` mode, please see [MIGRATION.md](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#babel-mode-v7).
|
||||
|
||||
### Generate a babelrc
|
||||
|
||||
If your app does not use a babelrc and you need one, you can generate a babelrc file by running the following command in your project directory:
|
||||
If your app does not include a babelrc file, and you need one, you can create it by running the following command in your project directory:
|
||||
|
||||
```sh
|
||||
npx sb@next babelrc
|
||||
```
|
||||
|
||||
This will create a `.babelrc.json` file. You may need to add package dependencies.
|
||||
Once the command completes, you should have a `.babelrc.json` file created in the root directory of your project, similar to the following example:
|
||||
|
||||
```json
|
||||
{
|
||||
"sourceType": "unambiguous",
|
||||
"presets": [
|
||||
[
|
||||
"@babel/preset-env",
|
||||
{
|
||||
"shippedProposals": true,
|
||||
"loose": true
|
||||
}
|
||||
],
|
||||
"@babel/preset-typescript"
|
||||
],
|
||||
"plugins": [
|
||||
"@babel/plugin-transform-shorthand-properties",
|
||||
"@babel/plugin-transform-block-scoping",
|
||||
[
|
||||
"@babel/plugin-proposal-decorators",
|
||||
{
|
||||
"legacy": true
|
||||
}
|
||||
],
|
||||
[
|
||||
"@babel/plugin-proposal-class-properties",
|
||||
{
|
||||
"loose": true
|
||||
}
|
||||
],
|
||||
[
|
||||
"@babel/plugin-proposal-private-methods",
|
||||
{
|
||||
"loose": true
|
||||
}
|
||||
],
|
||||
"@babel/plugin-proposal-export-default-from",
|
||||
"@babel/plugin-syntax-dynamic-import",
|
||||
[
|
||||
"@babel/plugin-proposal-object-rest-spread",
|
||||
{
|
||||
"loose": true,
|
||||
"useBuiltIns": true
|
||||
}
|
||||
],
|
||||
"@babel/plugin-transform-classes",
|
||||
"@babel/plugin-transform-arrow-functions",
|
||||
"@babel/plugin-transform-parameters",
|
||||
"@babel/plugin-transform-destructuring",
|
||||
"@babel/plugin-transform-spread",
|
||||
"@babel/plugin-transform-for-of",
|
||||
"babel-plugin-macros",
|
||||
"@babel/plugin-proposal-optional-chaining",
|
||||
"@babel/plugin-proposal-nullish-coalescing-operator",
|
||||
[
|
||||
"babel-plugin-polyfill-corejs3",
|
||||
{
|
||||
"method": "usage-global",
|
||||
"absoluteImports": "core-js",
|
||||
"version": "3.18.3"
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
Depending on your environment, you may need to install additional package dependencies.
|
||||
|
||||
### Troubleshooting
|
||||
|
||||
To troubleshoot your babel configuration, set the `BABEL_SHOW_CONFIG_FOR` environment variable.
|
||||
|
||||
For example, to see how Storybook is transpiling your `.storybook/preview.js` config:
|
||||
To troubleshoot your babel configuration, set the `BABEL_SHOW_CONFIG_FOR` environment variable. For example, to see how Storybook is transpiling your `.storybook/preview.js` file, add the following environment variable:
|
||||
|
||||
```sh
|
||||
BABEL_SHOW_CONFIG_FOR=.storybook/preview.js yarn storybook
|
||||
```
|
||||
|
||||
This will print out the babel configuration for `.storybook/preview.js`, which can be used to debug when files fail to transpile or transpile incorrectly.
|
||||
When the command finishes running, it will display the available babel configuration for the `.storybook/preview.js` file. You can use this information to debug issues with transpilation.
|
||||
|
||||
> NOTE: Due to what appears to be a Babel bug, setting this flag causes Babel transpilation to fail on the file provided. Thus you cannot actually _RUN_ storybook using this command. However, it will print out the configuration information as advertised and thus you can use this to debug your Storybook. You'll need to remove the flag to actually run your Storybook.
|
||||
> NOTE: Due to what appears to be a Babel bug, setting this flag causes Babel transpilation to fail on the file provided. Thus you cannot actually _RUN_ Storybook using this command. However, it will print out the configuration information as advertised, and therefore you can use this to debug your Storybook. You'll need to remove the flag to actually run your Storybook.
|
||||
|
||||
For more info, please refer to the [Babel documentation](https://babeljs.io/docs/en/configuration#print-effective-configs).
|
||||
For more info, please refer to the [Babel documentation](https://babeljs.io/docs/en/configuration#print-effective-configs).
|
||||
@ -2,7 +2,7 @@
|
||||
title: 'Environment variables'
|
||||
---
|
||||
|
||||
You can use environment variables in Storybook to change its behaviour in different “modes”.
|
||||
You can use environment variables in Storybook to change its behavior in different “modes”.
|
||||
If you supply an environment variable prefixed with `STORYBOOK_`, it will be available in `process.env`:
|
||||
|
||||
```shell
|
||||
@ -25,7 +25,7 @@ You can also access these variables in your custom `<head>`/`<body>` using the s
|
||||
|
||||
<div class="aside">
|
||||
|
||||
If using the environment variables as attributes or values in JavaScript, you may need to add quotes, as the value will be inserted directly. e.g. `<link rel="stylesheet" href="%STORYBOOK_STYLE_URL%" />`
|
||||
💡 If using the environment variables as attributes or values in JavaScript, you may need to add quotes, as the value will be inserted directly. e.g. `<link rel="stylesheet" href="%STORYBOOK_STYLE_URL%" />`
|
||||
|
||||
</div>
|
||||
|
||||
@ -67,20 +67,20 @@ You can also use specific files for specific modes. Add a <code>.env.development
|
||||
|
||||
You can also pass these environment variables when you are [building your Storybook](../workflows/publish-storybook.md) with `build-storybook`.
|
||||
|
||||
Then they'll be hard coded to the static version of your Storybook.
|
||||
Then they'll be hardcoded to the static version of your Storybook.
|
||||
|
||||
### Using environment variables to choose the browser
|
||||
|
||||
Storybook allows you to choose the browser you want to preview your stories. Either through an `.env` file entry or directly in your `storybook` script.
|
||||
Storybook allows you to choose the browser you want to preview your stories. Either through a `.env` file entry or directly in your `storybook` script.
|
||||
|
||||
The table below lists the available options:
|
||||
|
||||
| Browser | Example |
|
||||
|----------|----------------------|
|
||||
| -------- | -------------------- |
|
||||
| Safari | `BROWSER="safari"` |
|
||||
| Firefox | `BROWSER="firefox"` |
|
||||
| Chromium | `BROWSER="chromium"` |
|
||||
|
||||
<div class="aside">
|
||||
Note: By default Storybook will open a new Chrome window as part of its startup process. If you don't have Chrome installed, make sure to include one of the following options, or set your default browser accordingly.
|
||||
</div>
|
||||
💡 <strong>Note</strong>: By default, Storybook will open a new Chrome window as part of its startup process. If you don't have Chrome installed, make sure to include one of the following options, or set your default browser accordingly.
|
||||
</div>
|
||||
@ -16,42 +16,42 @@ To control the layout of Storybook’s UI you can use `addons.setConfig` in your
|
||||
|
||||
The following table details how to use the API values:
|
||||
|
||||
| Name | Type | Description | Example Value |
|
||||
| ----------------------|:-------------:|:-------------------------------------------------------------:|:----------------------------------------------:|
|
||||
| **isFullscreen** | Boolean |Show story component as full screen |`false` |
|
||||
| **showNav** | Boolean |Display panel that shows a list of stories |`true` |
|
||||
| **showPanel** | Boolean |Display panel that shows addon configurations |`true` |
|
||||
| **panelPosition** | String/Object |Where to show the addon panel |`bottom` or `right` |
|
||||
| **enableShortcuts** | Boolean |Enable/disable shortcuts |`true` |
|
||||
| **isToolshown** | Boolean |Show/hide tool bar |`true` |
|
||||
| **theme** | Object |Storybook Theme, see next section |`undefined` |
|
||||
| **selectedPanel** | String |Id to select an addon panel |`storybook/actions/panel` |
|
||||
| **initialActive** | String |Select the default active tab on Mobile |`sidebar` or `canvas` or `addons` |
|
||||
| **sidebar** | Object |Sidebar options, see below |`{ showRoots: false }` |
|
||||
| **toolbar** | Object |Modify the tools in the toolbar using the addon id |`{ fullscreen: { hidden: false } } }` |
|
||||
| Name | Type | Description | Example Value |
|
||||
| ------------------- | :-----------: | :------------------------------------------------: | :-----------------------------------: |
|
||||
| **isFullscreen** | Boolean | Show story component as full screen | `false` |
|
||||
| **showNav** | Boolean | Display panel that shows a list of stories | `true` |
|
||||
| **showPanel** | Boolean | Display panel that shows addon configurations | `true` |
|
||||
| **panelPosition** | String/Object | Where to show the addon panel | `bottom` or `right` |
|
||||
| **enableShortcuts** | Boolean | Enable/disable shortcuts | `true` |
|
||||
| **isToolshown** | Boolean | Show/hide tool bar | `true` |
|
||||
| **theme** | Object | Storybook Theme, see next section | `undefined` |
|
||||
| **selectedPanel** | String | Id to select an addon panel | `storybook/actions/panel` |
|
||||
| **initialActive** | String | Select the default active tab on Mobile | `sidebar` or `canvas` or `addons` |
|
||||
| **sidebar** | Object | Sidebar options, see below | `{ showRoots: false }` |
|
||||
| **toolbar** | Object | Modify the tools in the toolbar using the addon id | `{ fullscreen: { hidden: false } } }` |
|
||||
|
||||
The following options are configurable under the `sidebar` namespace:
|
||||
|
||||
| Name | Type | Description | Example Value |
|
||||
| ----------------------|:-------------:|:-------------------------------------------------------------:|:----------------------------------------------:|
|
||||
| **showRoots** | Boolean |Display the top-level nodes as a "root" in the sidebar |`false` |
|
||||
| **collapsedRoots** | Array |Set of root node IDs to visually collapse by default |`['misc', 'other']` |
|
||||
| **renderLabel** | Function |Create a custom label for tree nodes; must return a ReactNode |`(item) => <abbr title="...">{item.name}</abbr>`|
|
||||
| Name | Type | Description | Example Value |
|
||||
| ------------------ | :------: | :-----------------------------------------------------------: | :----------------------------------------------: |
|
||||
| **showRoots** | Boolean | Display the top-level nodes as a "root" in the sidebar | `false` |
|
||||
| **collapsedRoots** | Array | Set of root node IDs to visually collapse by default | `['misc', 'other']` |
|
||||
| **renderLabel** | Function | Create a custom label for tree nodes; must return a ReactNode | `(item) => <abbr title="...">{item.name}</abbr>` |
|
||||
|
||||
The following options are configurable under the `toolbar` namespace:
|
||||
|
||||
| Name | Type | Description | Example Value |
|
||||
| ----------------------|:-------------:|:-------------------------------------------------------------:|:----------------------------------------------:|
|
||||
| **id** | String |Toggle visibility for toolbar item |`{ hidden: false }` |
|
||||
| Name | Type | Description | Example Value |
|
||||
| ------ | :----: | :--------------------------------: | :-----------------: |
|
||||
| **id** | String | Toggle visibility for toolbar item | `{ hidden: false }` |
|
||||
|
||||
## Configuring through URL parameters
|
||||
|
||||
Some features can be controlled through URL parameters:
|
||||
You can use URL parameters to configure some of the available features:
|
||||
|
||||
| Config option | Query param | Supported values |
|
||||
| ----------------------|:-------------:|:--------------------------:|
|
||||
| **enableShortcuts** | `shortcuts` | `false` |
|
||||
| **isFullscreen** | `full` | `true` |
|
||||
| **showNav** | `nav` | `false` |
|
||||
| **showPanel** | `panel` | `false`, `right`, `bottom` |
|
||||
| **selectedPanel** | `addonPanel` | Any panel ID |
|
||||
| Config option | Query param | Supported values |
|
||||
| ------------------- | :----------: | :------------------------: |
|
||||
| **enableShortcuts** | `shortcuts` | `false` |
|
||||
| **isFullscreen** | `full` | `true` |
|
||||
| **showNav** | `nav` | `false` |
|
||||
| **showPanel** | `panel` | `false`, `right`, `bottom` |
|
||||
| **selectedPanel** | `addonPanel` | Any panel ID |
|
||||
@ -6,15 +6,16 @@ Components often rely on images, videos, fonts, and other assets to render as th
|
||||
|
||||
### Import assets into stories
|
||||
|
||||
You can import any media assets by importing (or requiring) them. This works out of the box with our default config. But, if you are using a custom webpack config, you’ll need to add the file-loader to handle the required files.
|
||||
You can import any media assets by importing (or requiring) them. It works out of the box with our default config. But, if you are using a custom webpack config, you’ll need to add the [file loader](https://v4.webpack.js.org/loaders/) to handle the required files.
|
||||
|
||||
Afterwards you can use any asset in your stories:
|
||||
Afterward, you can use any asset in your stories:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'react/component-story-static-asset-with-import.js.mdx',
|
||||
'react/component-story-static-asset-with-import.ts.mdx',
|
||||
'react/component-story-static-asset-with-import.mdx.mdx',
|
||||
'vue/component-story-static-asset-with-import.2.js.mdx',
|
||||
'vue/component-story-static-asset-with-import.mdx-2.mdx.mdx',
|
||||
@ -32,35 +33,28 @@ Afterwards you can use any asset in your stories:
|
||||
|
||||
### Serving static files via Storybook
|
||||
|
||||
We recommend serving static files via Storybook to ensure that your components always have the assets they need to load. This technique is recommended for assets that your components often use like logos, fonts, and icons.
|
||||
We recommend serving static files via Storybook to ensure that your components always have the assets they need to load. We recommend this technique for assets that your components often use, like logos, fonts, and icons.
|
||||
|
||||
Configure a directory (or a list of directories) where your assets live when starting Storybook. Use the`-s` flag in your npm script like so:
|
||||
Configure a directory (or a list of directories) where your assets live when starting Storybook. Use the`staticDirs` configuration element in your main Storybook configuration file (i.e., `.storybook/main.js`) to specify the directories:
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"start-storybook": "start-storybook -s ./public -p 9001"
|
||||
}
|
||||
}
|
||||
```
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
Or when building your Storybook with `build-storybook`:
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-main-with-single-static-dir.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"build-storybook": "build-storybook -s public"
|
||||
}
|
||||
}
|
||||
```
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
Here `./public` is your static directory. Now use it in a component or story like this.
|
||||
Here `../public` is your static directory. Now use it in a component or story like this.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'react/component-story-static-asset-without-import.js.mdx',
|
||||
'react/component-story-static-asset-without-import.ts.mdx',
|
||||
'react/component-story-static-asset-without-import.mdx.mdx',
|
||||
'vue/component-story-static-asset-without-import.js.mdx',
|
||||
'vue/component-story-static-asset-without-import.mdx.mdx',
|
||||
@ -76,32 +70,38 @@ Here `./public` is your static directory. Now use it in a component or story lik
|
||||
|
||||
You can also pass a list of directories separated by commas without spaces instead of a single directory.
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"start-storybook": "start-storybook -s ./public,./static -p 9001"
|
||||
}
|
||||
}
|
||||
```
|
||||
The same can be applied when you're building your Storybook.
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"build-storybook": "build-storybook -s ./public,./static -p 9001"
|
||||
}
|
||||
}
|
||||
```
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-main-with-multiple-static-dir.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
Or even use a configuration object to define the directories:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-main-with-object-configuration-static-dir.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
### Reference assets from a CDN
|
||||
|
||||
Upload your files to an online CDN and reference them. In this example we’re using a placeholder image service.
|
||||
Upload your files to an online CDN and reference them. In this example, we’re using a placeholder image service.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'react/component-story-static-asset-cdn.js.mdx',
|
||||
'react/component-story-static-asset-cdn.ts.mdx',
|
||||
'react/component-story-static-asset-cdn.mdx.mdx',
|
||||
'vue/component-story-static-asset-cdn.js.mdx',
|
||||
'vue/component-story-static-asset-cdn.mdx.mdx',
|
||||
@ -117,10 +117,10 @@ Upload your files to an online CDN and reference them. In this example we’re u
|
||||
|
||||
### Absolute versus relative paths
|
||||
|
||||
Sometimes, you may want to deploy your storybook into a subpath, like `https://example.com/storybook`.
|
||||
Sometimes, you may want to deploy your Storybook into a subpath, like `https://example.com/storybook`.
|
||||
|
||||
In this case, you need to have all your images and media files with relative paths. Otherwise, the browser cannot locate those files.
|
||||
|
||||
If you load static content via importing, this is automatic and you do not have to do anything.
|
||||
If you load static content via importing, this is automatic, and you do not have to do anything.
|
||||
|
||||
If you are serving assets in a [static directory](#serving-static-files-via-storybook) along with your Storybook, then you need to use relative paths to load images or use the base element.
|
||||
Suppose you are serving assets in a [static directory](#serving-static-files-via-storybook) along with your Storybook. In that case, you need to use relative paths to load images or use the base element.
|
||||
@ -2,17 +2,17 @@
|
||||
title: 'Configure Storybook'
|
||||
---
|
||||
|
||||
Storybook is configured via a folder, called `.storybook` which contains various configuration files.
|
||||
Storybook is configured via a folder called `.storybook`, which contains various configuration files.
|
||||
|
||||
<div class="aside">
|
||||
|
||||
Note you can change the folder that Storybook uses by setting the `-c` flag to your `start-storybook` and `build-storybook` scripts.
|
||||
Note that you can change the folder that Storybook uses by setting the `-c` flag to your `start-storybook` and `build-storybook` scripts.
|
||||
|
||||
</div>
|
||||
|
||||
## Configure your Storybook project
|
||||
|
||||
The main configuration file is `main.js`. This file controls the behavior of the Storybook server, and so you must restart Storybook’s process when you change it. It contains the following:
|
||||
The main configuration file is `main.js`. This file controls the Storybook server's behavior, so you must restart Storybook’s process when you change it. It contains the following:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -24,7 +24,7 @@ The main configuration file is `main.js`. This file controls the behavior of the
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
The `main.js` configuration file is a [preset](../addons/addon-types.md) and as such has a powerful interface, but the key fields within it are:
|
||||
The `main.js` configuration file is a [preset](../addons/addon-types.md) and, as such, has a powerful interface, but the key fields within it are:
|
||||
|
||||
- `stories` - an array of globs that indicates the [location of your story files](#configure-story-loading), relative to `main.js`.
|
||||
- `addons` - a list of the [addons](/addons) you are using.
|
||||
@ -32,23 +32,23 @@ The `main.js` configuration file is a [preset](../addons/addon-types.md) and as
|
||||
- `babel` - custom [babel configuration](./babel.md).
|
||||
|
||||
<div class="aside">
|
||||
Tip: Customize your default story by referencing it first in the `stories` array.
|
||||
💡 Tip: Customize your default story by referencing it first in the `stories` array.
|
||||
</div>
|
||||
|
||||
## Configure story loading
|
||||
|
||||
By default, Storybook will load stories from your project based on a glob (pattern matching string) in `.storybook/main.js` that matches all files in your project with extension `.stories.js`. The intention is you colocate a story file with the component it documents.
|
||||
By default, Storybook will load stories from your project based on a glob (pattern matching string) in `.storybook/main.js` that matches all files in your project with extension `.stories.*`. The intention is you colocate a story file with the component it documents.
|
||||
|
||||
```
|
||||
•
|
||||
└── components
|
||||
├── Button.js
|
||||
└── Button.stories.js
|
||||
├── Button.js
|
||||
└── Button.stories.js
|
||||
```
|
||||
|
||||
If you want to use a different naming convention, you can alter the glob, using the syntax supported by [micromatch](https://github.com/micromatch/micromatch#extended-globbing).
|
||||
If you want to use a different naming convention, you can alter the glob, using the syntax supported by [picomatch](https://github.com/micromatch/picomatch#globbing-features).
|
||||
|
||||
For example if you wanted to pull both `.md` and `.js` files from the `my-project/src/components` directory, you could write:
|
||||
For example, if you wanted to pull both `.md` and `.js` files from the `my-project/src/components` directory, you could write:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -60,20 +60,77 @@ For example if you wanted to pull both `.md` and `.js` files from the `my-projec
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
If you want to use a custom logic for loading stories which is not supported by a glob pattern, you can supply the final list of stories files:
|
||||
### With a configuration object
|
||||
|
||||
```js
|
||||
// .storybook/main.js
|
||||
Additionally, you can also customize your Storybook configuration to load your stories based on a configuration object. For example, if you wanted to load your stories from a `packages` directory, you could adjust your `stories` configuration field into the following:
|
||||
|
||||
function findStories() {
|
||||
// your custom logic returns a list of files
|
||||
}
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
module.exports = {
|
||||
stories: async (list) => [...list, ...findStories()],
|
||||
};
|
||||
```
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-storyloading-with-custom-object.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
<div class="aside">
|
||||
💡 <strong>Note:</strong> If you've enabled <a href="#on-demand-story-loading">on-demand story loading</a>, this option will not work. You must define the story's titles manually.
|
||||
</div>
|
||||
|
||||
When Storybook starts, it will look for any file containing the `stories` extension inside the `packages/stories` directory and generate the titles for your stories.
|
||||
|
||||
### With a directory
|
||||
|
||||
You can also simplify your Storybook configuration and load the stories based on a directory. For example, if you want to load all the stories inside a `packages/MyStories`, you can adjust the configuration as such:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-storyloading-with-directory.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
### With a custom implementation
|
||||
|
||||
You can also adjust your Storybook configuration and implement your own custom logic for loading your stories. For example, suppose you were working on a project that includes a particular pattern that the conventional ways of loading stories could not solve, in that case, you could adjust your configuration as follows:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-storyloading-custom-logic.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
### On-demand story loading
|
||||
|
||||
As your Storybook grows in size, it gets challenging to load all of your stories in a performant way, slowing down the loading times and yielding a large bundle. Starting with Storybook 6.4, you can optimize your story loading by enabling the `storyStoreV7` feature flag in your configuration as follows:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-on-demand-story-loading.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
Once you've restarted your Storybook, you'll see an almost immediate performance gain in your loading times and also a decrease in the generated bundle.
|
||||
|
||||
#### Known limitations
|
||||
|
||||
This feature is experimental, and it has some limitations on what you can and cannot do in your stories files. If you plan to use it, you'll need to take into consideration the following limitations:
|
||||
|
||||
- [CSF formats](../api/csf.md) from version 1 to version 3 are supported. The `storiesOf` construct is not.
|
||||
- You must manually set the story's titles and names (e.g., `title: 'MyComponent`).
|
||||
- Custom`storySort` functions are allowed based on a restricted API.
|
||||
|
||||
## Configure story rendering
|
||||
|
||||
@ -85,10 +142,10 @@ The `preview.js` file can be an ES module and export the following keys:
|
||||
- `parameters` - an object of global [parameters](../writing-stories/parameters.md#global-parameters)
|
||||
- `globalTypes` - definition of [globalTypes](../essentials/toolbars-and-globals.md#global-types-and-the-toolbar-annotation)
|
||||
|
||||
If you’re looking to change how your stories are ordered, read about [sorting stories](../writing-stories/naming-components-and-hierarchy.md#sorting-stories).
|
||||
If you’re looking to change how to order your stories, read about [sorting stories](../writing-stories/naming-components-and-hierarchy.md#sorting-stories).
|
||||
|
||||
## Configure Storybook’s UI
|
||||
|
||||
To control the behaviour of Storybook’s UI (the **“manager”**), you can create a `.storybook/manager.js` file.
|
||||
To control the behavior of Storybook’s UI (the **“manager”**), you can create a `.storybook/manager.js` file.
|
||||
|
||||
This file does not have a specific API but is the place to set [UI options](./features-and-behavior.md) and to configure Storybook’s [theme](./theming.md).
|
||||
This file does not have a specific API but is the place to set [UI options](./features-and-behavior.md) and to configure Storybook’s [theme](./theming.md).
|
||||
@ -2,7 +2,7 @@
|
||||
title: 'Sidebar & URLS'
|
||||
---
|
||||
|
||||
Storybook’s sidebar lists all your stories grouped by component. When you have a lot of components you may wish to also group those components. To do so, you can add the `/` separator to the `title` of your CSF file and Storybook will group the stories into groups based on common prefixes:
|
||||
Storybook’s sidebar lists all your stories grouped by component. When you have many components, you may also wish to group those components. To do so, you can add the `/` separator to the `title` of your CSF file and Storybook will group the stories into groups based on common prefixes:
|
||||
|
||||
|
||||
|
||||
@ -10,7 +10,7 @@ We recommend using a nesting scheme that mirrors the filesystem path of the comp
|
||||
|
||||
## Roots
|
||||
|
||||
By default, Storybook will treat your top-level nodes as “roots”. Roots are displayed in the UI as “sections” of the hierarchy. Lower level groups are displayed as folders:
|
||||
By default, Storybook will treat your top-level nodes as “roots”. Roots are displayed in the UI as “sections” of the hierarchy. Lower level groups will show up as folders:
|
||||
|
||||
|
||||
|
||||
@ -28,7 +28,7 @@ If you’d prefer to show top-level nodes as folders rather than roots, you can
|
||||
|
||||
## Generating titles based on `__dirname`
|
||||
|
||||
As a CSF file is a JavaScript file, the exports (including the default export) can be generated dynamically. In particular you can use the `__dirname` variable to generate the title based on the path name (this example uses the paths.macro):
|
||||
As a CSF file is a JavaScript file, all exports (including the default export) can be generated dynamically. In particular you can use the `__dirname` variable to create the title based on the path name (this example uses the paths.macro):
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -40,9 +40,11 @@ As a CSF file is a JavaScript file, the exports (including the default export) c
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
If you need, you can also generate automatic titles for all your stories using a configuration object. See the [story loading](./overview.md#with-a-configuration-object) documentation to learn how you can use this feature.
|
||||
|
||||
## Permalinking to stories
|
||||
|
||||
By default, Storybook generates an `id` for each story based on the component title and the story name. This `id` in particular is used in the URL for each story and that URL can serve as a permalink (especially when you [publish](../workflows/publish-storybook.md) your Storybook).
|
||||
By default, Storybook generates an `id` for each story based on the component title and the story name. This `id` in particular is used in the URL for each story, and that URL can serve as a permalink (primarily when you [publish](../workflows/publish-storybook.md) your Storybook).
|
||||
|
||||
Consider the following story:
|
||||
|
||||
@ -58,7 +60,7 @@ Consider the following story:
|
||||
|
||||
Storybook's ID-generation logic will give this the `id` `foo-bar--baz`, so the link would be `?path=/story/foo-bar--baz`.
|
||||
|
||||
It is possible to manually set the id of a story, which in particular is useful if you want to rename stories without breaking permalinks. Suppose you want to change the position in the hierarchy to `OtherFoo/Bar` and the story name to `Moo`. Here's how to do that:
|
||||
It is possible to manually set the id of a story, which is helpful if you want to rename stories without breaking permalinks. Suppose you want to change the position in the hierarchy to `OtherFoo/Bar` and the story name to `Moo`. Here's how to do that:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -70,4 +72,4 @@ It is possible to manually set the id of a story, which in particular is useful
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
Storybook will prioritize the `id` over the title for ID generation, if provided, and will prioritize the `story.name` over the export key for display.
|
||||
Storybook will prioritize the `id` over the title for ID generation if provided and prioritize the `story.name` over the export key for display.
|
||||
@ -54,4 +54,4 @@ Or even apply it to specific stories like so:
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
<!-- prettier-ignore-end -->
|
||||
@ -2,11 +2,11 @@
|
||||
title: 'Story rendering'
|
||||
---
|
||||
|
||||
In Storybook, your stories render in a special “preview” iframe (Canvas tab) inside the larger Storybook web application. The JavaScript build configuration of the preview is controlled by a [webpack](./webpack.md) config, but you also may want to directly control the HTML that is rendered to help your stories render correctly.
|
||||
In Storybook, your stories render in a particular “preview” iframe (Canvas tab) inside the larger Storybook web application. The JavaScript build configuration of the preview is controlled by a [webpack](./webpack.md) config, but you also may want to directly control the rendered HTML to help your stories render correctly.
|
||||
|
||||
## Adding to <head>
|
||||
|
||||
If you need to add extra elements to the `head` of the preview iframe, for instance to load static stylesheets, font files, or similar, you can create a file called [`.storybook/preview-head.html`](./overview.md#configure-story-rendering) and add tags like this:
|
||||
If you need to add extra elements to the `head` of the preview iframe, for instance, to load static stylesheets, font files, or similar, you can create a file called [`.storybook/preview-head.html`](./overview.md#configure-story-rendering) and add tags like this:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -18,21 +18,19 @@ If you need to add extra elements to the `head` of the preview iframe, for insta
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
|
||||
<div class="aside">
|
||||
|
||||
Storybook will inject these tags into the _preview iframe_ where your components are rendered not the Storybook application UI.
|
||||
Storybook will inject these tags into the _preview iframe_ where your components render, not the Storybook application UI.
|
||||
|
||||
</div>
|
||||
|
||||
It's also possible to programmatically modify the preview head HTML using a preset defined in the `main.js` file. For more information see [Preview/Manager templates](../addons/writing-presets.md#previewmanager-templates).
|
||||
|
||||
It's also possible to modify the preview head HTML programmatically using a preset defined in the `main.js` file. For more information see [Preview/Manager templates](../addons/writing-presets.md#previewmanager-templates).
|
||||
|
||||
## Adding to <body>
|
||||
|
||||
Sometimes, you may need to add different tags to the `<body>`. This is useful for adding some custom content roots.
|
||||
Sometimes, you may need to add different tags to the `<body>`. Helpful for adding some custom content roots.
|
||||
|
||||
You can accomplish this by creating a file called `preview-body.html` inside your `.storybook` directory and add tags like this:
|
||||
You can accomplish this by creating a file called `preview-body.html` inside your `.storybook` directory and adding tags like this:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -58,8 +56,8 @@ If using relative sizing in your project (like `rem` or `em`), you may update th
|
||||
|
||||
<div class="aside">
|
||||
|
||||
Storybook will inject these tags into the _preview iframe_ where your components are rendered not the Storybook application UI.
|
||||
Storybook will inject these tags into the _preview iframe_ where your components render, not the Storybook application UI.
|
||||
|
||||
</div>
|
||||
|
||||
Similarly to the preview head HTML, preview body HTML can also be updated programmtically using a preset. See [Preview/Manager templates](../addons/writing-presets.md#previewmanager-templates) for more information.
|
||||
Similarly to the preview head HTML, preview body HTML can also be updated programmtically using a preset. See [Preview/Manager templates](../addons/writing-presets.md#previewmanager-templates) for more information.
|
||||
@ -22,4 +22,4 @@ There are many, many Storybook addons, but they can be roughly categorized into
|
||||
|
||||
- **Essential** addons are core-team developed addons that are considered a part of the out-of-the-box user experience. These ship by default with new Storybook installations.
|
||||
- **Core** addons are developed by the core team. They are kept in sync with the development of Storybook itself and written in idiomatic ways as templates for other addons. They can be found within the [Storybook monorepo](https://github.com/storybookjs/storybook/tree/next/addons).
|
||||
- **Community** addons are addons written by the massive Storybook community. They can be found on our [website](/addons), [GitHub](https://github.com/), and [npm](https://www.npmjs.com/).
|
||||
- **Community** addons are addons written by the massive Storybook community. They can be found on our [website](/addons), [GitHub](https://github.com/), and [npm](https://www.npmjs.com/).
|
||||
@ -2,18 +2,18 @@
|
||||
title: 'Styling and CSS'
|
||||
---
|
||||
|
||||
There are many ways to include CSS in a web application, and correspondingly there are many ways to include CSS in Storybook. Usually it is best to try and replicate what your application does with styling in Storybook’s configuration.
|
||||
There are many ways to include CSS in a web application, and correspondingly there are many ways to include CSS in Storybook. Usually, it is best to try and replicate what your application does with styling in Storybook’s configuration.
|
||||
|
||||
### CSS-in-JS
|
||||
|
||||
CSS-in-JS libraries are designed to use basic JavaScript. They often work in Storybook without any extra configuration. Some libraries expect components to be rendered in a specific rendering “context” (for example, to provide themes) and you may need to add a [global decorator](../writing-stories/decorators.md#global-decorators) to supply it.
|
||||
CSS-in-JS libraries are designed to use basic JavaScript, and they often work in Storybook without any extra configuration. Some libraries expect components to render in a specific rendering “context” (for example, to provide themes), and you may need to add a [global decorator](../writing-stories/decorators.md#global-decorators) to supply it.
|
||||
|
||||
### Importing CSS files
|
||||
|
||||
If your component files import their own CSS, Storybook’s webpack config will work unmodified with some exceptions:
|
||||
If your component files import their CSS, Storybook’s webpack config will work unmodified with some exceptions:
|
||||
|
||||
- If you are using a CSS precompiler, you may need to add a preset (such as the [SCSS preset](https://github.com/storybookjs/presets/tree/master/packages/preset-scss), or add a loader to Storybook’s webpack config).
|
||||
- In Angular, you'll need to take special care how you handle CSS:
|
||||
- In Angular, you'll need to take special care of how you handle CSS:
|
||||
|
||||
- Either [customize your webpack config](./webpack#extending-storybooks-webpack-config)
|
||||
- Or use syntax to use a inline loader:
|
||||
@ -28,8 +28,8 @@ If your component files import their own CSS, Storybook’s webpack config will
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
To use your CSS in all stories, you simply import it in [`.storybook/preview.js`](./overview.md#configure-story-rendering)
|
||||
To use your CSS in all stories, you import it in [`.storybook/preview.js`](./overview.md#configure-story-rendering)
|
||||
|
||||
### Adding webfonts
|
||||
|
||||
If you need webfonts to be available, you may need to add some code to the [`.storybook/preview-head.html`](./story-rendering.md#adding-to-head) file. We recommend including any assets with your Storybook if possible, in which case you likely want to configure the [static file location](./images-and-assets#serving-static-files-via-storybook).
|
||||
If you need webfonts to be available, you may need to add some code to the [`.storybook/preview-head.html`](./story-rendering.md#adding-to-head) file. We recommend including any assets with your Storybook if possible, in which case you likely want to configure the [static file location](./images-and-assets#serving-static-files-via-storybook).
|
||||
@ -82,9 +82,9 @@ Inside your `.storybook` directory, create a new file called `YourTheme.js` and
|
||||
|
||||
Above, we're creating a new theme that will:
|
||||
|
||||
- Use Storybook's `light` theme as a baseline.
|
||||
- Replace Storybook's logo in the sidebar with our own (defined in the brandImage variable).
|
||||
- Add custom branding information.
|
||||
- Use Storybook's `light` theme as a baseline.
|
||||
- Replace Storybook's logo in the sidebar with our own (defined in the brandImage variable).
|
||||
- Add custom branding information.
|
||||
|
||||
Finally, we'll need to import the theme into Storybook. Create a new file called `manager.js` in your `.storybook` directory and add the following:
|
||||
|
||||
@ -116,8 +116,8 @@ Let's take a look at a more complex example. Copy the code below and paste it in
|
||||
|
||||
Above, we're updating the theme with the following changes:
|
||||
|
||||
- A custom color palette (defined in the `app` and `color` variables).
|
||||
- Custom fonts (defined in the `font` and `text` variables).
|
||||
- A custom color palette (defined in the `app` and `color` variables).
|
||||
- Custom fonts (defined in the `font` and `text` variables).
|
||||
|
||||
With the new changes introduced, the custom theme should yield a similar result.
|
||||
|
||||
@ -131,7 +131,7 @@ The `@storybook/theming` package is built using TypeScript, which should help cr
|
||||
|
||||
## CSS escape hatches
|
||||
|
||||
The Storybook theme API is narrow by design. If you want to have fine-grained control over the CSS, all UI and Docs components are tagged with class names to make this possible. This is advanced usage: **use at your own risk**.
|
||||
The Storybook theme API is narrow by design. If you want to have fine-grained control over the CSS, all UI and Docs components are tagged with class names to make this possible. **Use at your own risk** as this is an advanced feature.
|
||||
|
||||
To style these elements, insert style tags into:
|
||||
|
||||
@ -146,7 +146,7 @@ To style these elements, insert style tags into:
|
||||
|
||||
## MDX component overrides
|
||||
|
||||
If you're using MDX for docs, there's one more level of "themability". MDX allows you to completely override the components that are rendered from Markdown using a components parameter. It's an advanced usage that we don't officially support in Storybook, but it's a powerful mechanism if you need it.
|
||||
If you're using MDX for docs, there's one more level of "themability". MDX allows you to completely override the rendered components from Markdown using a `components` parameter. It's an advanced usage that we don't officially support in Storybook, but it's a powerful construct if you need it.
|
||||
|
||||
Here's how you might insert a custom code renderer for `code` blocks on the page, in [`.storybook/preview.js`](./overview.md#configure-story-rendering):
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
title: 'TypeScript'
|
||||
---
|
||||
|
||||
Storybook has built-in Typescript support, so your Typescript project should work with zero configuration needed [unless you use the `paths` option in your TSConfig.](./webpack#typescript-module-resolution)
|
||||
Storybook has built-in Typescript support, so your Typescript project should work with zero configuration needed.
|
||||
|
||||
### Default configuration
|
||||
|
||||
@ -18,7 +18,7 @@ Each framework uses the base configuration unless otherwise specified:
|
||||
|
||||
To make it easier to configure Typescript handling, use the `typescript` field in your [`.storybook/main.js`](./overview.md#configure-story-rendering).
|
||||
|
||||
The following code snippets shows the fields for you to use with TypeScript:
|
||||
The following code snippets show the fields for you to use with TypeScript:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -37,15 +37,13 @@ The following code snippets shows the fields for you to use with TypeScript:
|
||||
| **reactDocgen** | React | Which react docgen processor to run: `"react-docgen-typescript"`, `"react-docgen"`, `false` | string or false |
|
||||
| **reactDocgenTypescriptOptions** | React | Options to pass to react-docgen-typescript-plugin if react-docgen-typescript is enabled. | [See docs](https://github.com/hipstersmoothie/react-docgen-typescript-plugin) |
|
||||
|
||||
See default values [here](https://github.com/storybookjs/storybook/blob/next/lib/core-server/src/presets/common-preset.ts#L51)
|
||||
|
||||
### Overriding the configuration to infer additional props
|
||||
|
||||
The configuration provided above will remove any props from any third party libraries.
|
||||
The configuration provided above will remove any props from any third-party libraries.
|
||||
|
||||
If it's required you can adjust the configuration and include the extra props.
|
||||
If required, you can adjust the configuration and include the extra props.
|
||||
|
||||
Adjust the configuration as shown below and any third party props will be displayed as soon as you restart your Storybook.
|
||||
Adjust the configuration as demonstrated below. And the next time you restart your Storybook, the extra props will also be in the UI.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -57,8 +55,6 @@ Adjust the configuration as shown below and any third party props will be displa
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
Next time you restart your Storybook the extra props will also be in the UI.
|
||||
|
||||
<div class="aside">
|
||||
If you run into an issue where the extra props aren't included, check how your component is being exported. If it's using a default export, change it to a named export and the extra props will be included as well.
|
||||
</div>
|
||||
If you run into an issue where any additional props don't show up, check your component's code. If you're using a default export, change it to a named export, and doing that will ensure that the additional props are included.
|
||||
</div>
|
||||
@ -2,11 +2,11 @@
|
||||
title: 'Upgrading Storybook'
|
||||
---
|
||||
|
||||
The frontend ecosystem is a fast-moving place. Regular dependency upgrades are a way of life, whether it's upgrading a framework, library, tooling, or all of the above! Storybook provides a few resources to help ease the pain of upgrading.
|
||||
The frontend ecosystem is a fast-moving place. Regular dependency upgrades are a way of life, whether upgrading a framework, library, tooling, or all of the above! Storybook provides a few resources to help ease the pain of upgrading.
|
||||
|
||||
## Upgrade script
|
||||
|
||||
The most common upgrade is Storybook itself. [Storybook releases](/releases) follow [Semantic Versioning](https://semver.org/). We publish patch releases with bugfixes continuously, minor versions of Storybook with new features every few months, and major versions of Storybook with breaking changes roughly once per year.
|
||||
The most common upgrade is Storybook itself. [Storybook releases](/releases) follow [Semantic Versioning](https://semver.org/). We publish patch releases with bug fixes continuously, minor versions of Storybook with new features every few months, and major versions of Storybook with breaking changes roughly once per year.
|
||||
|
||||
To help ease the pain of keeping Storybook up-to-date, we provide a command-line script:
|
||||
|
||||
@ -14,23 +14,23 @@ To help ease the pain of keeping Storybook up-to-date, we provide a command-line
|
||||
npx sb upgrade
|
||||
```
|
||||
|
||||
This upgrades all of the Storybook packages in your project to the latest stable version, performs confidence checks of your package versions, and checks for opportunities to run [automigrations](#automigrate) to automatically update your configuration.
|
||||
This upgrades all of the Storybook packages in your project to the latest stable version, perform confidence checks of your package versions, and checks for opportunities to run [automigrations](#automigrate) to update your configuration automatically.
|
||||
|
||||
<div class="aside">
|
||||
|
||||
In addition to running the command, we also recommend skimming [MIGRATION.md](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md), an exhaustive log of relevant changes and deprecations that might affect your upgrade.
|
||||
In addition to running the command, we also recommend checking the [MIGRATION.md file](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md), for the detailed log of relevant changes and deprecations that might affect your upgrade.
|
||||
|
||||
</div>
|
||||
|
||||
## Automigrate script
|
||||
|
||||
Storybook upgrades are not the only thing to consider: changes in the ecosystem also present challenges. For example, lots of frameworks ([Angular 12](https://angular.io/guide/updating-to-version-12#breaking-changes-in-angular-version-12), [Create React App v5](https://github.com/facebook/create-react-app/pull/11201), [NextJS](https://nextjs.org/docs/upgrading#webpack-5)) have recently migrated from [webpack 4 to webpack 5](https://webpack.js.org/migrate/5/), so even if you don't upgrade your Storybook version, you might need to update your configuration accordingly. That's what Automigrate is for:
|
||||
Storybook upgrades are not the only thing to consider: changes in the ecosystem also present challenges. For example, lots of frameworks ([Angular 12](https://angular.io/guide/updating-to-version-12#breaking-changes-in-angular-version-12), [Create React App v5](https://github.com/facebook/create-react-app/pull/11201), [NextJS](https://nextjs.org/docs/upgrading#webpack-5)) have recently migrated from [Webpack 4 to Webpack 5](https://webpack.js.org/migrate/5/), so even if you don't upgrade your Storybook version, you might need to update your configuration accordingly. That's what Automigrate is for:
|
||||
|
||||
```
|
||||
npx sb@next automigrate
|
||||
```
|
||||
|
||||
This runs a set of common configuration checks, explains what is potentially out-of-date, and offers to fix it for you automatically. It also points to the relevant documentation so you can learn more. This gets run automatically as part of [`sb upgrade`](#upgrade-script), but it's also available on its own in case you don't want to upgrade Storybook.
|
||||
It runs a set of standard configuration checks, explains what is potentially out-of-date, and offers to fix it for you automatically. It also points to the relevant documentation so you can learn more. It runs automatically as part of [`sb upgrade`](#upgrade-script) command, but it's also available on its own if you don't want to upgrade Storybook.
|
||||
|
||||
## Prereleases
|
||||
|
||||
@ -42,4 +42,4 @@ To upgrade to the latest pre-release:
|
||||
npx sb@next upgrade --prerelease
|
||||
```
|
||||
|
||||
If you'd like to downgrade to a stable version, manually edit the package version numbers in your `package.json` and re-install.
|
||||
If you'd like to downgrade to a stable version, manually edit the package version numbers in your `package.json` and re-install.
|
||||
@ -2,7 +2,7 @@
|
||||
title: 'Webpack'
|
||||
---
|
||||
|
||||
Storybook displays your components in a custom web application built using [Webpack](https://webpack.js.org/). Webpack is a complex tool, but our default configuration is intended to cover most use cases. [Addons](/addons) are also available that extend the configuration for other common use cases.
|
||||
Storybook displays your components in a custom web application built using [Webpack](https://webpack.js.org/). Webpack is a complex tool, but our default configuration is intended to cover most use cases. [Addons](/addons) are also available that extend the configuration for other everyday use cases.
|
||||
|
||||
You can customize Storybook's webpack setup by providing a `webpackFinal` field in [`.storybook/main.js`](./overview.md#configure-your-storybook-project) file.
|
||||
|
||||
@ -43,10 +43,11 @@ You can import `.json` files and have them expanded to a JavaScript object:
|
||||
If you want to know the exact details of the webpack config, the best way is to run either of the following:
|
||||
|
||||
```shell
|
||||
yarn start-storybook --debug-webpack
|
||||
```
|
||||
|
||||
```shell
|
||||
## Development mode
|
||||
yarn start-storybook --debug-webpack
|
||||
|
||||
## Production mode
|
||||
yarn build-storybook --debug-webpack
|
||||
```
|
||||
|
||||
@ -56,7 +57,7 @@ To extend the above configuration, use the `webpackFinal` field of [`.storybook/
|
||||
|
||||
The value should export a `function`, which will receive the default config as its first argument. The second argument is an options object from Storybook, and this will have information about where config came from, whether we're in production or development mode, etc.
|
||||
|
||||
For example, here's a `.storybook/main.js` to add [Sass](https://sass-lang.com/) support:
|
||||
For example, if you wanted to add [Sass](https://sass-lang.com/) support, you can adjust your configuration as such:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -111,9 +112,25 @@ The following code snippet shows how you can replace the loaders from Storybook
|
||||
💡 <strong>Note:</strong> Projects initialized via generators (e.g, Vue CLI) may require that you import their own webpack config file (i.e., <code>/projectRoot/node_modules/@vue/cli-service/webpack.config.js</code>) to use a certain feature with Storybook. For other generators, make sure to check the documentation for instructions.
|
||||
</div>
|
||||
|
||||
### Bundle splitting
|
||||
|
||||
Starting with Storybook 6.4, [bundle splitting](https://v4.webpack.js.org/guides/code-splitting/) is supported through a configuration flag. Update your Storybook configuration and add the `storyStoreV7` flag:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/storybook-on-demand-story-loading.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
When you start your Storybook, you'll see an improvement in loading times. Read more about it in the [announcement post](https://storybook.js.org/blog/storybook-on-demand-architecture/) and the [configuration documentation](./overview.md#on-demand-story-loading).
|
||||
|
||||
### TypeScript Module Resolution
|
||||
|
||||
When working with TypeScript projects the default Webpack configuration may fail to resolve module aliases defined in your [`tsconfig` file](https://www.typescriptlang.org/tsconfig). To work around this issue you may use [`tsconfig-paths-webpack-plugin`](https://github.com/dividab/tsconfig-paths-webpack-plugin#tsconfig-paths-webpack-plugin) while [extending Storybook's Webpack config](#extending-storybooks-webpack-config) like:
|
||||
When working with TypeScript projects, the default Webpack configuration may fail to resolve module aliases defined in your [`tsconfig` file](https://www.typescriptlang.org/tsconfig). To work around this issue you may use [`tsconfig-paths-webpack-plugin`](https://github.com/dividab/tsconfig-paths-webpack-plugin#tsconfig-paths-webpack-plugin) while [extending Storybook's Webpack config](#extending-storybooks-webpack-config) like:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -127,4 +144,4 @@ When working with TypeScript projects the default Webpack configuration may fail
|
||||
|
||||
<div class="aside">
|
||||
💡 Learn more about Storybook's <a href="./typescript">built-in TypeScript support</a> or see <a href="https://github.com/storybookjs/storybook/issues/14087">this issue</a> for more information.
|
||||
</div>
|
||||
</div>
|
||||
@ -8,11 +8,13 @@ import { MyComponent } from './MyComponent.component';
|
||||
|
||||
<Meta title="img" component={MyComponent}/>
|
||||
|
||||
<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
|
||||
|
||||
<Story
|
||||
name="withAnImage"
|
||||
render={() => ({
|
||||
template: `<img src="https://place-hold.it/350x150" alt="My CDN placeholder" />`,
|
||||
})} />
|
||||
name="WithAnImage">
|
||||
{{
|
||||
props: {
|
||||
src: 'https://place-hold.it/350x150',
|
||||
alt: 'My CDN placeholder',
|
||||
},
|
||||
}}
|
||||
</Story>
|
||||
```
|
||||
@ -1,18 +1,24 @@
|
||||
```ts
|
||||
// MyComponent.stories.ts
|
||||
|
||||
import { Meta, Story } from '@storybook/angular';
|
||||
|
||||
import { MyComponent } from './MyComponent.component';
|
||||
|
||||
export default {
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'img',
|
||||
component: MyComponent,
|
||||
};
|
||||
} as Meta;
|
||||
|
||||
export const WithAnImage = {
|
||||
render: () => ({
|
||||
props: {
|
||||
src: 'https://place-hold.it/350x150',
|
||||
alt: 'My CDN placeholder',
|
||||
},
|
||||
}),
|
||||
};
|
||||
```
|
||||
|
||||
export const WithAnImage: Story = () => ({
|
||||
props: {
|
||||
src: 'https://place-hold.it/350x150',
|
||||
alt: 'My CDN placeholder',
|
||||
},
|
||||
});
|
||||
```
|
||||
@ -14,15 +14,13 @@ export const image = {
|
||||
alt: 'my image',
|
||||
};
|
||||
|
||||
<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
|
||||
|
||||
<Story
|
||||
name="withAnImage"
|
||||
render={() => ({
|
||||
<Story name="WithAnImage">
|
||||
{{
|
||||
props: {
|
||||
src: image.src,
|
||||
alt: image.alt,
|
||||
},
|
||||
template: `<img src="{{src}}" alt="{{alt}}" />`,
|
||||
})} />
|
||||
}}
|
||||
</Story>
|
||||
```
|
||||
@ -1,25 +1,31 @@
|
||||
```ts
|
||||
// MyComponent.stories.ts
|
||||
|
||||
import { Meta, Story } from '@storybook/angular';
|
||||
|
||||
import { MyComponent } from './MyComponent.component';
|
||||
|
||||
import imageFile from './static/image.png';
|
||||
|
||||
export default {
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'img',
|
||||
component: MyComponent,
|
||||
};
|
||||
} as Meta;
|
||||
|
||||
const image = {
|
||||
src: imageFile,
|
||||
alt: 'my image',
|
||||
};
|
||||
|
||||
export const WithAnImage = {
|
||||
render: () => ({
|
||||
props: {
|
||||
src: image.src,
|
||||
alt: image.alt,
|
||||
},
|
||||
}),
|
||||
};
|
||||
```
|
||||
export const WithAnImage: Story () => ({
|
||||
template: `<img src="{{src}}" alt="{{alt}}" />`,
|
||||
props: {
|
||||
src: image.src,
|
||||
alt: image.alt,
|
||||
},
|
||||
});
|
||||
```
|
||||
@ -7,11 +7,14 @@ import { MyComponent } from './MyComponent.component';
|
||||
|
||||
<Meta title="img" component={MyComponent}/>
|
||||
|
||||
<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
|
||||
|
||||
<!-- Assume image.png is located in the "public" directory.-->
|
||||
<Story
|
||||
name="withAnImage"
|
||||
render={() => ({
|
||||
template: `<img src="/otherimage.jpg" alt="my image"/>`,
|
||||
})} />
|
||||
name="WithAnImage">
|
||||
{{
|
||||
props: {
|
||||
src: '/image.png',
|
||||
alt: 'my image',
|
||||
},
|
||||
}}
|
||||
</Story>
|
||||
```
|
||||
@ -1,18 +1,24 @@
|
||||
```ts
|
||||
// MyComponent.stories.ts
|
||||
|
||||
import { Meta, Story } from '@storybook/angular';
|
||||
|
||||
import { MyComponent } from './MyComponent.component';
|
||||
|
||||
export default {
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'img',
|
||||
component: MyComponent,
|
||||
};
|
||||
|
||||
export const WithAnImage = {
|
||||
render: () => ({
|
||||
props: {
|
||||
src: '/image.png',
|
||||
alt: 'my image',
|
||||
},
|
||||
}),
|
||||
};
|
||||
```
|
||||
// Assume image.png is located in the "public" directory.
|
||||
export const WithAnImage: Story = () => ({
|
||||
props: {
|
||||
src: '/image.png',
|
||||
alt: 'my image',
|
||||
},
|
||||
});
|
||||
```
|
||||
@ -1,23 +1,21 @@
|
||||
```md
|
||||
<!-- MyComponent.stories.mdx -->
|
||||
|
||||
import { Meta, Story, Canvas } from '@storybook/addon-docs';
|
||||
import { Canvas, Meta, Story } from '@storybook/addon-docs';
|
||||
|
||||
import { MyComponent } from './my-component.component';
|
||||
|
||||
<Meta title="A MDX story using environment variables inside a .env file" component={MyComponent}/>
|
||||
<Meta title="MyComponent" component={MyComponent}/>
|
||||
|
||||
<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
|
||||
|
||||
export const Template = (args) => ({ props: args });
|
||||
|
||||
<Canvas>
|
||||
<Story
|
||||
name="A MDX story using environment variables inside a .env file"
|
||||
name="ExampleStory"
|
||||
args={{
|
||||
propertyA: process.env.STORYBOOK_DATA_KEY,
|
||||
}}
|
||||
render={(args) => ({
|
||||
props: args,
|
||||
})} />
|
||||
}}>
|
||||
{Template.bind({})}
|
||||
</Canvas>
|
||||
```
|
||||
@ -1,15 +1,25 @@
|
||||
```ts
|
||||
// MyComponent.stories.ts
|
||||
|
||||
import { Meta, Story } from '@storybook/angular';
|
||||
|
||||
import { MyComponent } from './MyComponent.component';
|
||||
|
||||
export default {
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'MyComponent',
|
||||
component: MyComponent,
|
||||
};
|
||||
} as Meta;
|
||||
|
||||
export const ExampleStory = {
|
||||
args: {
|
||||
propertyA: process.env.STORYBOOK_DATA_KEY,
|
||||
},
|
||||
const Template: Story = (args) => ({
|
||||
props: args,
|
||||
});
|
||||
|
||||
export const ExampleStory = Template.bind({});
|
||||
ExampleStory.args = {
|
||||
propertyA: process.env.STORYBOOK_DATA_KEY
|
||||
};
|
||||
```
|
||||
```
|
||||
@ -1,5 +1,5 @@
|
||||
```js
|
||||
// MyComponent.stories.js | MyComponent.stories.jsx | MyComponent.stories.ts | MyComponent.stories.tsx
|
||||
// MyComponent.stories.js|jsx|ts|tsx
|
||||
|
||||
import base from 'paths.macro';
|
||||
|
||||
|
||||
@ -1,12 +1,20 @@
|
||||
```js
|
||||
// FooBar.stories.js | FooBar.stories.jsx | FooBar.stories.ts | FooBar.stories.tsx
|
||||
// FooBar.stories.js|jsx|ts|tsx
|
||||
|
||||
import { Foo } from './Foo';
|
||||
|
||||
export default {
|
||||
component: Foo,
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'Foo/Bar',
|
||||
component: Foo,
|
||||
};
|
||||
|
||||
export const Baz = {};
|
||||
```
|
||||
const BarStory = () => ({
|
||||
// Your template goes here
|
||||
});
|
||||
|
||||
export const Baz = BarStory.bind({})
|
||||
```
|
||||
@ -1,5 +1,5 @@
|
||||
```js
|
||||
// MyComponent.stories.js | MyComponent.stories.jsx | MyComponent.stories.ts | MyComponent.stories.tsx
|
||||
// MyComponent.stories.js|jsx|ts|tsx
|
||||
|
||||
// This will automatically be parsed to the contents of `data.json`
|
||||
import data from './data.json';
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
```js
|
||||
// MyComponent.stories.js | MyComponent.stories.jsx | MyComponent.stories.ts | MyComponent.stories.tsx
|
||||
// MyComponent.stories.js|jsx|ts|tsx
|
||||
|
||||
// This will include './static/image.png' in the bundle.
|
||||
// And return a path to be included in a src attribute
|
||||
|
||||
@ -1,15 +1,22 @@
|
||||
```js
|
||||
// FooBar.stories.js | FooBar.stories.jsx | FooBar.stories.ts | FooBar.stories.tsx
|
||||
// FooBar.stories.js|jsx|ts|tsx
|
||||
|
||||
import { Foo } from './Foo';
|
||||
|
||||
export default {
|
||||
component: Foo,
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'OtherFoo/Bar',
|
||||
component: Foo,
|
||||
id: 'Foo/Bar', // Or 'foo-bar' if you prefer
|
||||
};
|
||||
|
||||
export const Baz = {
|
||||
name: 'Moo',
|
||||
};
|
||||
```
|
||||
const BarStory = () => ({
|
||||
// Your template goes here
|
||||
});
|
||||
|
||||
export const Baz = () => BarStory.bind({});
|
||||
Baz.storyName = 'Moo';
|
||||
```
|
||||
@ -1,13 +1,18 @@
|
||||
```js
|
||||
// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
|
||||
// Button.stories.js|jsx|ts|tsx
|
||||
|
||||
import { Button } from './Button';
|
||||
|
||||
export default {
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'Button',
|
||||
component: Button,
|
||||
// Sets the layout parameter component wide.
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
},
|
||||
};
|
||||
```
|
||||
```
|
||||
@ -6,7 +6,7 @@ import { Meta } from '@storybook/addon-docs';
|
||||
import { Button } from './Button';
|
||||
|
||||
<Meta
|
||||
title="Components/Button"
|
||||
title="Button"
|
||||
parameters={{
|
||||
layout: 'centered',
|
||||
}}
|
||||
|
||||
11
docs/snippets/common/storybook-main-babel-mode-v7.js.mdx
Normal file
11
docs/snippets/common/storybook-main-babel-mode-v7.js.mdx
Normal file
@ -0,0 +1,11 @@
|
||||
```js
|
||||
// .storybook/main.js
|
||||
|
||||
module.exports = {
|
||||
stories: [],
|
||||
addons: [],
|
||||
features: {
|
||||
babelModeV7: true,
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -0,0 +1,12 @@
|
||||
```js
|
||||
// .storybook/main.js
|
||||
|
||||
module.exports = {
|
||||
stories: [],
|
||||
addons: [],
|
||||
babel: async (options) => ({
|
||||
...options,
|
||||
// any extra options you want to set
|
||||
}),
|
||||
};
|
||||
```
|
||||
@ -0,0 +1,9 @@
|
||||
```js
|
||||
// .storybook/main.js
|
||||
|
||||
module.exports = {
|
||||
stories: [],
|
||||
addons: [],
|
||||
staticDirs: ['../public', '../static'],
|
||||
};
|
||||
```
|
||||
@ -0,0 +1,7 @@
|
||||
```js
|
||||
// .storybook/main.js
|
||||
|
||||
module.exports = {
|
||||
staticDirs: [{ from: '../my-custom-assets/images', to: '/assets' }],
|
||||
};
|
||||
```
|
||||
@ -0,0 +1,8 @@
|
||||
```js
|
||||
// .storybook/main.js
|
||||
module.exports = {
|
||||
stories: [],
|
||||
addons: [],
|
||||
staticDirs: ['../public'],
|
||||
};
|
||||
```
|
||||
@ -0,0 +1,11 @@
|
||||
```js
|
||||
// .storybook/main.js
|
||||
|
||||
module.exports = {
|
||||
stories: [],
|
||||
addons: ['@storybook/addon-essentials'],
|
||||
features: {
|
||||
storyStoreV7: true,
|
||||
},
|
||||
};
|
||||
```
|
||||
@ -1,15 +1,23 @@
|
||||
```js
|
||||
// Button.stories.js | Button.stories.jsx | Button.stories.ts | Button.stories.tsx
|
||||
// Button.stories.js|jsx|ts|tsx
|
||||
|
||||
import { Button } from './Button':
|
||||
|
||||
export default {
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'Button',
|
||||
component: Button,
|
||||
}
|
||||
|
||||
export const WithLayout = {
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
},
|
||||
const Template = () => ({
|
||||
// Your template goes here
|
||||
});
|
||||
|
||||
export const WithLayout= Template.bind({});
|
||||
WithLayout.parameters = {
|
||||
layout: 'centered',
|
||||
};
|
||||
```
|
||||
```
|
||||
@ -7,13 +7,15 @@ import { Button } from './Button';
|
||||
|
||||
<Meta title="Button" component={Button}/>
|
||||
|
||||
<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
|
||||
export const Template = () => ({
|
||||
// Your template goes here
|
||||
});
|
||||
|
||||
<Story
|
||||
name="WithLayout"
|
||||
parameters={{
|
||||
layout: 'centered',
|
||||
}}
|
||||
render={() => ({ })}>
|
||||
}}>
|
||||
{Template.bind({})}
|
||||
</Story>
|
||||
```
|
||||
@ -0,0 +1,12 @@
|
||||
```js
|
||||
// .storybook/main.js
|
||||
|
||||
function findStories() {
|
||||
// your custom logic returns a list of files
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
stories: async (list) => [...list, ...findStories()],
|
||||
addons: ['@storybook/addon-essentials'],
|
||||
};
|
||||
```
|
||||
@ -0,0 +1,17 @@
|
||||
```js
|
||||
// .storybook/main.js
|
||||
|
||||
module.exports = {
|
||||
stories: [
|
||||
{
|
||||
// 👇 The directory field sets the directory your stories
|
||||
directory: '../packages/stories',
|
||||
// 👇 The titlePrefix field will generate automatic titles for your stories
|
||||
titlePrefix: 'MyComponents',
|
||||
// 👇 Storybook will load all files that contain the stories extensio
|
||||
files: '*.stories.*',
|
||||
},
|
||||
],
|
||||
addons: ['@storybook/addon-essentials'],
|
||||
};
|
||||
```
|
||||
@ -0,0 +1,9 @@
|
||||
```js
|
||||
// .storybook/main.js
|
||||
|
||||
module.exports = {
|
||||
// 👇 Storybook will load all existing stories within the MyStories folder
|
||||
stories: ['../packages/MyStories'],
|
||||
addons: ['@storybook/addon-essentials'],
|
||||
};
|
||||
```
|
||||
@ -1,13 +1,15 @@
|
||||
```js
|
||||
// MyComponent.stories.js | MyComponent.stories.jsx | MyComponent.stories.ts | MyComponent.stories.tsx
|
||||
// MyComponent.stories.js|jsx
|
||||
|
||||
import React from 'react';
|
||||
|
||||
export default {
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'img',
|
||||
};
|
||||
|
||||
export const WithAnImage = {
|
||||
render: () => <img src="https://place-hold.it/350x150" alt="My CDN placeholder" />,
|
||||
};
|
||||
```
|
||||
export const WithAnImage = () => <img src="https://place-hold.it/350x150" alt="My CDN placeholder" />;
|
||||
```
|
||||
@ -7,9 +7,8 @@ import { MyComponent } from './MyComponent';
|
||||
|
||||
<Meta title="img" component={MyComponent} />
|
||||
|
||||
<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
|
||||
|
||||
<Story
|
||||
name="withAnImage"
|
||||
render={() => <img src="https://place-hold.it/350x150" alt="My CDN placeholder" />} />
|
||||
name="WithAnImage">
|
||||
<img src="https://place-hold.it/350x150" alt="My CDN placeholder" />}
|
||||
</Story>
|
||||
```
|
||||
17
docs/snippets/react/component-story-static-asset-cdn.ts.mdx
Normal file
17
docs/snippets/react/component-story-static-asset-cdn.ts.mdx
Normal file
@ -0,0 +1,17 @@
|
||||
```ts
|
||||
// MyComponent.stories.ts|tsx
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import { Meta } from '@storybook/react';
|
||||
|
||||
export default {
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'img',
|
||||
} as Meta;
|
||||
|
||||
export const WithAnImage = () => <img src="https://place-hold.it/350x150" alt="My CDN placeholder" />;
|
||||
```
|
||||
@ -1,11 +1,15 @@
|
||||
```js
|
||||
// MyComponent.stories.js | MyComponent.stories.jsx | MyComponent.stories.ts | MyComponent.stories.tsx
|
||||
// MyComponent.stories.js|jsx
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import imageFile from './static/image.png';
|
||||
|
||||
export default {
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'img',
|
||||
};
|
||||
|
||||
@ -14,7 +18,5 @@ const image = {
|
||||
alt: 'my image',
|
||||
};
|
||||
|
||||
export const WithAnImage = {
|
||||
render: () => <img src={image.src} alt={image.alt} />,
|
||||
};
|
||||
```
|
||||
export const WithAnImage = () => <img src={image.src} alt={image.alt} />;
|
||||
```
|
||||
@ -3,20 +3,16 @@
|
||||
|
||||
import { Meta, Story } from '@storybook/addon-docs';
|
||||
|
||||
import { MyComponent } from './MyComponent';
|
||||
|
||||
import imageFile from './static/image.png';
|
||||
|
||||
<Meta title="img" component={MyComponent}/>
|
||||
<Meta title="img" />
|
||||
|
||||
export const image = {
|
||||
src: imageFile,
|
||||
alt: 'my image',
|
||||
};
|
||||
|
||||
<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
|
||||
|
||||
<Story
|
||||
name="withAnImage"
|
||||
render={() => <img src={image.src} alt={image.alt} />} />
|
||||
<Story name="WithAnImage">
|
||||
<img src={image.src} alt={image.alt} />;
|
||||
</Story>
|
||||
```
|
||||
@ -0,0 +1,24 @@
|
||||
```ts
|
||||
// MyComponent.stories.ts|tsx
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import imageFile from './static/image.png';
|
||||
|
||||
import { Meta } from '@storybook/react';
|
||||
|
||||
export default {
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'img',
|
||||
} as Meta;
|
||||
|
||||
const image = {
|
||||
src: imageFile,
|
||||
alt: 'my image',
|
||||
};
|
||||
|
||||
export const WithAnImage = () => <img src={image.src} alt={image.alt} />;
|
||||
```
|
||||
@ -1,14 +1,16 @@
|
||||
```js
|
||||
// MyComponent.stories.js | MyComponent.stories.jsx | MyComponent.stories.ts | MyComponent.stories.tsx
|
||||
// MyComponent.stories.js|jsx
|
||||
|
||||
import React from 'react';
|
||||
|
||||
export default {
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'img',
|
||||
};
|
||||
|
||||
// Assume image.png is located in the "public" directory.
|
||||
export const WithAnImage = {
|
||||
render: () => <img src="/image.png" alt="my image" />,
|
||||
};
|
||||
```
|
||||
export const WithAnImage = () => <img src="/image.png" alt="my image" />;
|
||||
```
|
||||
@ -9,7 +9,12 @@ import { MyComponent } from './MyComponent';
|
||||
|
||||
<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
|
||||
|
||||
<Story
|
||||
name="withAnImage"
|
||||
render={() => <img src="/image.png" alt="my image" />} />
|
||||
import { Meta, Story } from '@storybook/addon-docs';
|
||||
|
||||
<Meta title="img" />
|
||||
|
||||
<!-- Assume image.png is located in the "public" directory.-->
|
||||
<Story name="withAnImage">
|
||||
<img src="/image.png" alt="my image" />
|
||||
</Story>
|
||||
```
|
||||
@ -0,0 +1,24 @@
|
||||
```ts
|
||||
// MyComponent.stories.ts|tsx
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import imageFile from './static/image.png';
|
||||
|
||||
import { Meta } from '@storybook/react';
|
||||
|
||||
export default {
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'img',
|
||||
} as Meta;
|
||||
|
||||
const image = {
|
||||
src: imageFile,
|
||||
alt: 'my image',
|
||||
};
|
||||
// Assume image.png is located in the "public" directory.
|
||||
export const WithAnImage = () => <img src="/image.png" alt="my image" />;
|
||||
```
|
||||
@ -1,5 +1,5 @@
|
||||
```js
|
||||
// MyComponent.js | MyComponent.jsx
|
||||
// MyComponent.js|jsx
|
||||
|
||||
const Component = styled.div(({ theme }) => ({
|
||||
background: theme.background.app,
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
```js
|
||||
// MyComponent.js | MyComponent.jsx
|
||||
// MyComponent.js|jsx
|
||||
|
||||
const Component = styled.div`
|
||||
background: `${props => props.theme.background.app}`
|
||||
|
||||
@ -1,17 +1,23 @@
|
||||
```js
|
||||
// MyComponent.stories.js | MyComponent.stories.jsx
|
||||
// MyComponent.stories.js|jsx
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import { MyComponent } from './MyComponent';
|
||||
|
||||
export default {
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'MyComponent',
|
||||
component: MyComponent,
|
||||
};
|
||||
|
||||
export const ExampleStory = {
|
||||
args: {
|
||||
propertyA: process.env.STORYBOOK_DATA_KEY,
|
||||
},
|
||||
const Template = (args) => <MyComponent {...args} />;
|
||||
|
||||
export const ExampleStory = Template.bind({});
|
||||
ExampleStory.args = {
|
||||
propertyA: process.env.STORYBOOK_DATA_KEY,
|
||||
};
|
||||
```
|
||||
```
|
||||
@ -1,22 +1,20 @@
|
||||
```md
|
||||
<!-- MyComponent.stories.mdx -->
|
||||
|
||||
import { Meta, Story, Canvas } from '@storybook/addon-docs';
|
||||
import { Canvas, Meta, Story } from '@storybook/addon-docs';
|
||||
|
||||
import MyComponent from './MyComponent';
|
||||
|
||||
<Meta title="A MDX story using environment variables inside a .env file" />
|
||||
<Meta title="MyComponent" />
|
||||
|
||||
export const Template = (args) => <MyOtherComponent {...args} />
|
||||
|
||||
<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
|
||||
export const Template = (args) => <MyComponent {...args} />
|
||||
|
||||
<Canvas>
|
||||
<Story
|
||||
name="A MDX story using environment variables inside a .env file"
|
||||
name="ExampleStory"
|
||||
args={{
|
||||
propertyA: process.env.STORYBOOK_DATA_KEY,
|
||||
}}
|
||||
render={(args) => <MyOtherComponent {...args} />} />
|
||||
}}>
|
||||
{Template.bind({})}
|
||||
</Canvas>
|
||||
```
|
||||
@ -1,5 +1,5 @@
|
||||
```ts
|
||||
// MyComponent.stories.ts | MyComponent.stories.tsx
|
||||
// MyComponent.stories.ts| tsx
|
||||
|
||||
import React from 'react';
|
||||
|
||||
@ -8,14 +8,18 @@ import { Story, Meta } from '@storybook/react/types-6-0';
|
||||
import { MyComponent, MyComponentProps } from './MyComponent';
|
||||
|
||||
export default {
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'MyComponent',
|
||||
component: MyComponent,
|
||||
title: 'A story using environment variables inside a .env file',
|
||||
} as Meta;
|
||||
|
||||
const Template: Story<MyComponentProps> = (args) => <MyComponent {...args} />;
|
||||
|
||||
export const Default = Template.bind({});
|
||||
Default.args = {
|
||||
export const ExampleStory = Template.bind({});
|
||||
ExampleStory.args = {
|
||||
propertyA: process.env.STORYBOOK_DATA_KEY,
|
||||
};
|
||||
```
|
||||
@ -4,16 +4,19 @@
|
||||
import MyComponent from './MyComponent.svelte';
|
||||
|
||||
export default {
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'img',
|
||||
component: MyComponent,
|
||||
};
|
||||
|
||||
export const WithAnImage = {
|
||||
render: () => ({
|
||||
Component: MyComponent,
|
||||
props: {
|
||||
src: 'https://place-hold.it/350x150',
|
||||
alt: 'My CDN placeholder',
|
||||
},
|
||||
}),
|
||||
};
|
||||
```
|
||||
export const WithAnImage = () => ({
|
||||
Component: MyComponent,
|
||||
props: {
|
||||
src: 'https://place-hold.it/350x150',
|
||||
alt: 'My CDN placeholder',
|
||||
},
|
||||
});
|
||||
```
|
||||
@ -7,15 +7,16 @@ import MyComponent from './MyComponent.svelte';
|
||||
|
||||
<Meta title="img" component={MyComponent} />
|
||||
|
||||
<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
|
||||
|
||||
<Story
|
||||
name="withAnImage"
|
||||
render={() => ({
|
||||
Component: MyComponent,
|
||||
props: {
|
||||
src: 'https://place-hold.it/350x150',
|
||||
alt: 'my image',
|
||||
},
|
||||
})} />
|
||||
name="WithAnImage">
|
||||
{() => {
|
||||
return {
|
||||
Component: MyComponent,
|
||||
props: {
|
||||
src: 'https://place-hold.it/350x150',
|
||||
alt: 'my image',
|
||||
},
|
||||
};
|
||||
}}
|
||||
</Story>
|
||||
```
|
||||
@ -16,5 +16,5 @@
|
||||
<MyComponent src="https://place-hold.it/350x150" alt="My CDN placeholder" />
|
||||
</Template>
|
||||
|
||||
<Story name="withAnImage" />
|
||||
<Story name="WithAnImage" />
|
||||
```
|
||||
@ -6,6 +6,11 @@ import MyComponent from './MyComponent.svelte';
|
||||
import imageFile from './static/image.png';
|
||||
|
||||
export default {
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'img',
|
||||
component: MyComponent,
|
||||
};
|
||||
|
||||
@ -14,10 +19,10 @@ const image = {
|
||||
alt: 'my image',
|
||||
};
|
||||
|
||||
export const WithAnImage = {
|
||||
render: () => ({
|
||||
Component: MyComponent,
|
||||
props: image,
|
||||
}),
|
||||
};
|
||||
```
|
||||
export const WithAnImage = () => ({
|
||||
Component: MyComponent,
|
||||
props: {
|
||||
image: image
|
||||
},
|
||||
});
|
||||
```
|
||||
@ -1,5 +1,5 @@
|
||||
```md
|
||||
<!-- MyComponent.stories.js -->
|
||||
<!-- MyComponent.stories.mdx -->
|
||||
|
||||
import { Meta, Story } from '@storybook/addon-docs';
|
||||
|
||||
@ -14,14 +14,14 @@ export const image = {
|
||||
alt: 'my image',
|
||||
};
|
||||
|
||||
<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
|
||||
|
||||
<Story
|
||||
name="withAnImage"
|
||||
render={() => ({
|
||||
Component: MyComponent,
|
||||
props: {
|
||||
image: image,
|
||||
},
|
||||
})} />
|
||||
<Story name="WithAnImage">
|
||||
{() => {
|
||||
return {
|
||||
Component: MyComponent,
|
||||
props: {
|
||||
image: image,
|
||||
},
|
||||
};
|
||||
}}
|
||||
</Story>
|
||||
```
|
||||
@ -4,17 +4,20 @@
|
||||
import MyComponent from './MyComponent.svelte';
|
||||
|
||||
export default {
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'img',
|
||||
component: MyComponent,
|
||||
};
|
||||
|
||||
// Assume image.png is located in the "public" directory.
|
||||
export const WithAnImage = {
|
||||
render: () => ({
|
||||
Component: MyComponent,
|
||||
export const WithAnImage = () => ({
|
||||
Component: MyComponent,
|
||||
props: {
|
||||
src: '/image.png',
|
||||
alt: 'my image',
|
||||
},
|
||||
}),
|
||||
};
|
||||
```
|
||||
});
|
||||
```
|
||||
@ -1,5 +1,5 @@
|
||||
```md
|
||||
<!-- MyComponent.stories.js -->
|
||||
<!-- MyComponent.stories.mdx -->
|
||||
|
||||
import { Meta, Story } from '@storybook/addon-docs';
|
||||
|
||||
@ -7,15 +7,17 @@ import MyComponent from './MyComponent.svelte0;
|
||||
|
||||
<Meta title="img" component={MyComponent} />
|
||||
|
||||
<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
|
||||
<!-- Assume image.png is located in the "public" directory. -->
|
||||
|
||||
<Story
|
||||
name="withAnImage"
|
||||
render={() => ({
|
||||
Component: MyComponent,
|
||||
props: {
|
||||
src: '/image.png',
|
||||
alt: 'my image',
|
||||
},
|
||||
})} />
|
||||
<Story name="withAnImage">
|
||||
{() => {
|
||||
return {
|
||||
Component: MyComponent,
|
||||
props: {
|
||||
src: '/image.png',
|
||||
alt: 'my image',
|
||||
},
|
||||
};
|
||||
}}
|
||||
</Story>
|
||||
```
|
||||
@ -13,7 +13,7 @@
|
||||
/>
|
||||
|
||||
<Template>
|
||||
<MyComponent src="/image2.png" alt="my image" />
|
||||
<MyComponent src="/image.png" alt="my image" />
|
||||
</Template>
|
||||
|
||||
<Story name="WithAnImage" />
|
||||
|
||||
@ -4,16 +4,22 @@
|
||||
import MyComponent from './MyComponent.svelte';
|
||||
|
||||
export default {
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'MyComponent',
|
||||
component: MyComponent,
|
||||
};
|
||||
|
||||
const Template = {
|
||||
args: {
|
||||
propertyA: process.env.STORYBOOK_DATA_KEY,
|
||||
},
|
||||
render: (args) => ({
|
||||
Component: MyComponent,
|
||||
props: args,
|
||||
}),
|
||||
|
||||
const Template = (args) => ({
|
||||
Component: MyComponent,
|
||||
props: args,
|
||||
});
|
||||
|
||||
export const ExampleStory = Template.bind({});
|
||||
ExampleStory.args = {
|
||||
propertyA: process.env.STORYBOOK_DATA_KEY
|
||||
};
|
||||
```
|
||||
```
|
||||
@ -1,23 +1,23 @@
|
||||
```md
|
||||
<!-- MyComponent.stories.mdx -->
|
||||
|
||||
import { Meta, Story, Canvas } from '@storybook/addon-docs';
|
||||
import { Canvas, Meta, Story } from '@storybook/addon-docs';
|
||||
|
||||
import MyComponent from './MyComponent.svelte';
|
||||
|
||||
<Meta title="A MDX story using environment variables inside a .env file" component={MyComponent}/>
|
||||
<Meta title="MyComponent" component={MyComponent}/>
|
||||
|
||||
<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
|
||||
export const Template = (args) => ({
|
||||
Component: MyComponent,
|
||||
props: args,
|
||||
});
|
||||
|
||||
<Canvas>
|
||||
<Story
|
||||
name="A MDX story using environment variables inside a .env file"
|
||||
name="ExampleStory"
|
||||
args={{
|
||||
propertyA: process.env.STORYBOOK_DATA_KEY,
|
||||
}}
|
||||
render={(args) => ({
|
||||
Component: MyComponent,
|
||||
props: args,
|
||||
})} />
|
||||
}}>
|
||||
{Template.bind({})}
|
||||
</Canvas>
|
||||
```
|
||||
@ -8,7 +8,7 @@
|
||||
</script>
|
||||
|
||||
<Meta
|
||||
title="A story using environment variables inside a .env file"
|
||||
title="MyComponent"
|
||||
component={MyComponent}
|
||||
/>
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
</Template>
|
||||
|
||||
<Story
|
||||
name="Default"
|
||||
name="ExampleStory"
|
||||
args={{
|
||||
propertyA: process.env.STORYBOOK_DATA_KEY,
|
||||
}}
|
||||
|
||||
@ -2,12 +2,15 @@
|
||||
// MyComponent.stories.js
|
||||
|
||||
export default {
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'img',
|
||||
};
|
||||
|
||||
export const WithAnImage = {
|
||||
render: () => ({
|
||||
template: '<img src="https://place-hold.it/350x150" alt="My CDN placeholder"/>',
|
||||
}),
|
||||
};
|
||||
```
|
||||
|
||||
export const WithAnImage = () => ({
|
||||
template: '<img src="https://place-hold.it/350x150" alt="My CDN placeholder"/>',
|
||||
});
|
||||
```
|
||||
@ -7,11 +7,12 @@ import MyComponent from './MyComponent.vue';
|
||||
|
||||
<Meta title="img" component={MyComponent}/>
|
||||
|
||||
<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
|
||||
|
||||
<Story
|
||||
name="withAnImage"
|
||||
render={() => ({
|
||||
template: `<img src="https://place-hold.it/350x150" alt="My CDN placeholder"/>`,
|
||||
})} />
|
||||
name="withAnImage">
|
||||
{() => {
|
||||
return {
|
||||
template: `<img src="https://place-hold.it/350x150" alt="My CDN placeholder"/>`,
|
||||
};
|
||||
}}
|
||||
</Story>
|
||||
```
|
||||
@ -4,6 +4,10 @@
|
||||
import imageFile from './static/image.png';
|
||||
|
||||
export default {
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'img',
|
||||
};
|
||||
|
||||
@ -12,17 +16,15 @@ const image = {
|
||||
alt: 'my image',
|
||||
};
|
||||
|
||||
export const WithAnImage = {
|
||||
render: () => ({
|
||||
props: {
|
||||
src: {
|
||||
default: () => image.src,
|
||||
},
|
||||
alt: {
|
||||
default: () => image.alt,
|
||||
},
|
||||
export const WithAnImage = () => ({
|
||||
props: {
|
||||
src: {
|
||||
default: () => image.src,
|
||||
},
|
||||
template: `<img :src="src" :alt="alt"/>`,
|
||||
}),
|
||||
};
|
||||
```
|
||||
alt: {
|
||||
default: () => image.alt,
|
||||
},
|
||||
},
|
||||
template: `<img :src="src" :alt="alt"/>`,
|
||||
});
|
||||
```
|
||||
@ -4,6 +4,10 @@
|
||||
import imageFile from './static/image.png';
|
||||
|
||||
export default {
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'img',
|
||||
};
|
||||
|
||||
@ -12,13 +16,13 @@ const image = {
|
||||
alt: 'my image',
|
||||
};
|
||||
|
||||
export const WithAnImage = {
|
||||
render: () => ({
|
||||
export const WithAnImage = () => {
|
||||
return {
|
||||
setup() {
|
||||
//👇 Returns the content of the image object create above.
|
||||
//👇 Returns the content of the image object create above.
|
||||
return { image };
|
||||
},
|
||||
template: `<img v-bind="image"/>`,
|
||||
}),
|
||||
};
|
||||
};
|
||||
```
|
||||
```
|
||||
@ -9,22 +9,23 @@ import imageFile from './static/image.png'
|
||||
|
||||
export const image = {
|
||||
src: imageFile,
|
||||
alt: "my image",
|
||||
alt: 'my image',
|
||||
};
|
||||
|
||||
<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
|
||||
|
||||
<Story
|
||||
name="withAnImage"
|
||||
render={() => ({
|
||||
props: {
|
||||
src: {
|
||||
default: () => image.src,
|
||||
name="WithAnImage">
|
||||
{() => {
|
||||
return {
|
||||
props: {
|
||||
src: {
|
||||
default: () => image.src,
|
||||
},
|
||||
alt: {
|
||||
default: () => image.alt,
|
||||
},
|
||||
},
|
||||
alt: {
|
||||
default: () => image.alt,
|
||||
},
|
||||
},
|
||||
template: `<img :src="src" :alt="alt"/>`,
|
||||
})} />
|
||||
template: `<img :src="src" :alt="alt"/>`,
|
||||
};
|
||||
}}
|
||||
</Story>
|
||||
```
|
||||
@ -9,17 +9,19 @@ import imageFile from './static/image.png'
|
||||
|
||||
export const image = {
|
||||
src: imageFile,
|
||||
alt: "my image",
|
||||
alt: 'my image',
|
||||
};
|
||||
|
||||
<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
|
||||
|
||||
<Story
|
||||
name="withAnImage"
|
||||
render={() => ({
|
||||
setup() {
|
||||
return { image };
|
||||
},
|
||||
template: `<img v-bind="image"/>`,
|
||||
})} />
|
||||
name="WithAnImage">
|
||||
{() => {
|
||||
return {
|
||||
setup() {
|
||||
return { image };
|
||||
},
|
||||
template: `<img v-bind="image"/>`,
|
||||
};
|
||||
}}
|
||||
</Story>
|
||||
```
|
||||
@ -2,12 +2,15 @@
|
||||
// MyComponent.stories.js
|
||||
|
||||
export default {
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'img',
|
||||
};
|
||||
|
||||
export const WithAnImage = {
|
||||
render: () => ({
|
||||
template: '<img src="image.png" alt="my image" />',
|
||||
}),
|
||||
};
|
||||
```
|
||||
// Assume image.png is located in the "public" directory.
|
||||
export const WithAnImage = () => ({
|
||||
template: '<img src="image.png" alt="my image" />',
|
||||
});
|
||||
```
|
||||
@ -5,14 +5,16 @@ import { Meta, Story } from '@storybook/addon-docs';
|
||||
|
||||
<Meta title="img" component={MyComponent}/>
|
||||
|
||||
<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
|
||||
|
||||
<!-- Assume image.png is located in the "public" directory.-->
|
||||
<Story
|
||||
name="withAnImage"
|
||||
render={() => ({
|
||||
setup() {
|
||||
return { image };
|
||||
},
|
||||
template: `<img src="image.png" alt="my image" />`,
|
||||
})} />
|
||||
name="WithAnImage">
|
||||
{() => {
|
||||
return {
|
||||
setup() {
|
||||
return { image };
|
||||
},
|
||||
template: `<img src="image.png" alt="my image" />`,
|
||||
};
|
||||
}}
|
||||
</Story>
|
||||
```
|
||||
@ -4,17 +4,22 @@
|
||||
import MyComponent from './MyComponent.vue';
|
||||
|
||||
export default {
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'MyComponent',
|
||||
component: MyComponent,
|
||||
};
|
||||
|
||||
export const ExampleStory = {
|
||||
args: {
|
||||
propertyA: process.env.STORYBOOK_DATA_KEY,
|
||||
},
|
||||
render: (args, { argTypes }) => ({
|
||||
components: { MyComponent },
|
||||
props: Object.keys(argTypes),
|
||||
template: `<MyComponent v-bind="$props"/>`,
|
||||
}),
|
||||
const Template = (args, { argTypes }) => ({
|
||||
components: { MyComponent },
|
||||
props: Object.keys(argTypes),
|
||||
template: '<MyComponent v-bind="$props"/>',
|
||||
});
|
||||
|
||||
export const ExampleStory = Template.bind({});
|
||||
ExampleStory.args = {
|
||||
propertyA: process.env.STORYBOOK_DATA_KEY,
|
||||
};
|
||||
```
|
||||
```
|
||||
@ -4,19 +4,24 @@
|
||||
import MyComponent from './MyComponent.vue';
|
||||
|
||||
export default {
|
||||
/* 👇 The title prop is optional.
|
||||
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
|
||||
* to learn how to generate automatic titles
|
||||
*/
|
||||
title: 'MyComponent',
|
||||
component: MyComponent,
|
||||
};
|
||||
|
||||
export const ExampleStory = {
|
||||
args: {
|
||||
propertyA: process.env.STORYBOOK_DATA_KEY,
|
||||
const Template = (args) => ({
|
||||
components: { MyComponent },
|
||||
setup() {
|
||||
return { args };
|
||||
},
|
||||
render: (args) => ({
|
||||
components: { MyComponent },
|
||||
setup() {
|
||||
return { args };
|
||||
},
|
||||
template: `<MyComponent v-bind="args"/>`,
|
||||
}),
|
||||
template: '<MyComponent v-bind="args"/>',
|
||||
});
|
||||
|
||||
export const ExampleStory = Template.bind({});
|
||||
ExampleStory.args = {
|
||||
propertyA: process.env.STORYBOOK_DATA_KEY,
|
||||
};
|
||||
```
|
||||
```
|
||||
@ -1,24 +1,25 @@
|
||||
```md
|
||||
<!-- MyComponent.stories.mdx -->
|
||||
|
||||
import { Meta, Story, Canvas } from '@storybook/addon-docs';
|
||||
import { Canvas, Meta, Story } from '@storybook/addon-docs';
|
||||
|
||||
import MyComponent from './MyComponent.vue';
|
||||
|
||||
<Meta title="A MDX story using environment variables inside a .env file" component={MyComponent}/>
|
||||
<Meta title="MyComponent" component={MyComponent}/>
|
||||
|
||||
<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
|
||||
export const Template = (args, { argTypes }) => ({
|
||||
components: { MyComponent },
|
||||
props: Object.keys(argTypes),
|
||||
template: '<MyComponent v-bind="$props"/>',
|
||||
});
|
||||
|
||||
<Canvas>
|
||||
<Story
|
||||
name="A MDX story using environment variables inside a .env file"
|
||||
name="ExampleStory"
|
||||
args={{
|
||||
propertyA: process.env.STORYBOOK_DATA_KEY,
|
||||
}}
|
||||
render={(args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: { MyComponent },
|
||||
template: '<MyComponent v-bind="$props" />',
|
||||
})} />
|
||||
}}>
|
||||
{Template.bind({})}
|
||||
</Story>
|
||||
</Canvas>
|
||||
```
|
||||
@ -1,26 +1,27 @@
|
||||
```md
|
||||
<!-- MyComponent.stories.mdx -->
|
||||
|
||||
import { Meta, Story, Canvas } from '@storybook/addon-docs';
|
||||
import { Canvas, Meta, Story } from '@storybook/addon-docs';
|
||||
|
||||
import MyComponent from './MyComponent.vue';
|
||||
|
||||
<Meta title="A MDX story using environment variables inside a .env file" component={MyComponent}/>
|
||||
<Meta title="MyComponent" component={MyComponent}/>
|
||||
|
||||
<!-- Render functions are a framework specific feature to allow you control on how the component renders -->
|
||||
export const Template = (args) => ({
|
||||
components: { MyComponent },
|
||||
setup() {
|
||||
return { args };
|
||||
},
|
||||
template: '<MyComponent v-bind="args" />',
|
||||
});
|
||||
|
||||
<Canvas>
|
||||
<Story
|
||||
name="A MDX story using environment variables inside a .env file"
|
||||
name="ExampleStory"
|
||||
args={{
|
||||
propertyA: process.env.STORYBOOK_DATA_KEY,
|
||||
}}
|
||||
render={(args) => ({
|
||||
components: { MyComponent },
|
||||
setup() {
|
||||
return { args };
|
||||
},
|
||||
template: '<MyComponent v-bind="args" />',
|
||||
})} />
|
||||
}}>
|
||||
{Template.bind({})}
|
||||
</Story>
|
||||
</Canvas>
|
||||
```
|
||||
Loading…
x
Reference in New Issue
Block a user