mirror of
https://github.com/storybookjs/storybook.git
synced 2025-03-19 05:02:40 +08:00
Update /sharing docs
This commit is contained in:
domyen
parent
b565405dd6
commit
0f98d0c1a0
BIN
docs/sharing/build-publish-only.png
Normal file
BIN
docs/sharing/build-publish-only.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
BIN
docs/sharing/embed-ghost.png
Normal file
BIN
docs/sharing/embed-ghost.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
docs/sharing/embed-medium.gif
Normal file
BIN
docs/sharing/embed-medium.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
BIN
docs/sharing/embed-notion.png
Normal file
BIN
docs/sharing/embed-notion.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
97
docs/sharing/embed.md
Normal file
97
docs/sharing/embed.md
Normal file
@ -0,0 +1,97 @@
|
||||
---
|
||||
title: 'Embed stories'
|
||||
---
|
||||
|
||||
Embed stories to showcase your work to teammates and the developer community at large. In order to use embeds, your Storybook must be published and publicly accessible.
|
||||
|
||||
Storybook supports `<iframe>` embeds out of the box. If you use Chromatic to publish Storybook, you can embed stories in Notion, Medium, and countless other platforms that support the oEmbed standard.
|
||||
|
||||
## Embed a story with the toolbar
|
||||
|
||||
Embed a story with the toolbar, paste the published story URL. For example:
|
||||
|
||||
```js
|
||||
// oEmbed
|
||||
//5ccbc373887ca40020446347-bysekhynzd.chromatic.com/?path=/story/shadowboxcta--default
|
||||
|
||||
// iframe embed
|
||||
https: <iframe
|
||||
src="https://5ccbc373887ca40020446347-bysekhynzd.chromatic.com/?path=/story/shadowboxcta--default&full=1&shortcuts=false&singleStory=true"
|
||||
width="800"
|
||||
height="400"
|
||||
></iframe>;
|
||||
```
|
||||
|
||||
<iframe src="https://5ccbc373887ca40020446347-bysekhynzd.chromatic.com/?path=/story/shadowboxcta--default&full=1&shortcuts=false&singleStory=true" width="800" height="400"></iframe>
|
||||
|
||||
## Embed a story without the toolbar
|
||||
|
||||
To embed a plain story without Storybook's toolbar, click the "open canvas in new tab" icon in the top-right corner of Storybook to get the canvas URL. For example:
|
||||
|
||||
```js
|
||||
// oEmbed
|
||||
//5ccbc373887ca40020446347-bysekhynzd.chromatic.com/iframe.html?id=/story/shadowboxcta--default&viewMode=story
|
||||
|
||||
// iframe embed
|
||||
https: <iframe
|
||||
src="5ccbc373887ca40020446347-bysekhynzd.chromatic.com/?path=/story/shadowboxcta--default&viewMode=story&shortcuts=false&singleStory=true"
|
||||
width="800"
|
||||
height="400"
|
||||
></iframe>;
|
||||
```
|
||||
|
||||
<iframe src="5ccbc373887ca40020446347-bysekhynzd.chromatic.com/?path=/story/shadowboxcta--default&viewMode=story&shortcuts=false&singleStory=true" width="800" height="400"></iframe>
|
||||
|
||||
## Embed a docs page
|
||||
|
||||
Embed a component's docs page by replacing the viewMode=story with viewMode=docs in the story URL.
|
||||
|
||||
```js
|
||||
// oEmbed
|
||||
//5ccbc373887ca40020446347-bysekhynzd.chromatic.com/iframe.html?id=/story/shadowboxcta--default&viewMode=docs
|
||||
|
||||
// iframe embed
|
||||
https: <iframe
|
||||
src="https://5ccbc373887ca40020446347-bysekhynzd.chromatic.com/?path=/story/shadowboxcta--default&viewMode=docs&shortcuts=false&singleStory=true"
|
||||
width="800"
|
||||
height="400"
|
||||
></iframe>;
|
||||
```
|
||||
|
||||
<iframe src="https://5ccbc373887ca40020446347-bysekhynzd.chromatic.com/?path=/story/shadowboxcta--default&viewMode=docs&shortcuts=false&singleStory=true" width="800" height="400"></iframe>
|
||||
|
||||
## Embed stories on other platforms
|
||||
|
||||
Every platform has different levels of embed support. Check the documentation of your service to see how they recommend embedding external content.
|
||||
|
||||
<details>
|
||||
|
||||
<summary>How to embed in Medium</summary>
|
||||
|
||||
Paste the Storybook URL into your Medium article, then press Enter. The embed will automatically resize to fit the story's height.
|
||||
|
||||
While editing an article, Medium renders all embeds non-interactive. Once your article is published, it will become interactive. [Preview a demo on Medium](https://medium.com/@ghengeveld/embedding-storybook-on-medium-ce8a280c03ad).
|
||||
|
||||
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
|
||||
<summary>How to embed in Notion</summary>
|
||||
|
||||
In your Notion document, type /embed, press Enter, and paste the story URL as the embed link. You can resize the embed as necessary.
|
||||
|
||||
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
|
||||
<summary>How to embed in Ghost</summary>
|
||||
|
||||
Type /html in your Ghost post, press Enter and paste the iframe URL. You can resize the embed via the width and height properties as required.
|
||||
|
||||
|
||||
|
||||
</details
|
||||
@ -6,13 +6,19 @@ Storybook is widely used by component libraries and design systems. Design syste
|
||||
|
||||
For example, if you use a design system package, its stories can appear alongside your own. That makes it convenient to cross reference usage documentation without leaving Storybook.
|
||||
|
||||
## For package consumers
|
||||
<div class="aside">
|
||||
|
||||
Composition happens automatically if the package [supports](#for-package-authors) it. When you install the package, Storybook will load its stories alongside your own.
|
||||
Composition via a package requires a tight, secure integration between the service where you publish Storybook and Storybook’s own APIs. We recommend [publishing Storybook to Chromatic](./publish-storybook.md#publish-storybook-with-chromatic), by Storybook maintainers for full support of these features.
|
||||
|
||||
</div>
|
||||
|
||||
## For consumers
|
||||
|
||||
Composition happens automatically if the package [supports](#for-authors) it. When you install the package, Storybook will load its stories alongside your own.
|
||||
|
||||
|
||||
|
||||
### Configuring
|
||||
### Set up
|
||||
|
||||
If you want to configure how the composed Storybook behaves, you can disable the `ref` element in your [`.storybook/main.js`](../configure/overview.md#configure-story-rendering)
|
||||
|
||||
@ -26,13 +32,13 @@ If you want to configure how the composed Storybook behaves, you can disable the
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
### Changing versions
|
||||
### Switching versions
|
||||
|
||||
Change the version of the composed Storybook to see how the library evolves. This requires [configuration](#providing-a-version-section) from the package author.
|
||||
Change the version of the composed Storybook to see how the library evolves. This requires [configuration](#show-a-version-selector) from the package author.
|
||||
|
||||
|
||||
|
||||
## For package authors
|
||||
## For authors
|
||||
|
||||
Component library authors can expand adoption by composing their components in their consumer’s Storybooks.
|
||||
|
||||
@ -49,9 +55,7 @@ Add a `storybook` property in your published `package.json`that contains an obje
|
||||
|
||||
### Automatic version selection
|
||||
|
||||
If you are using a [CHP level 1 service](#chp-level-1) for hosting (such as [Chromatic.com](https://www.chromatic.com/)), you can provide a single URL for your Storybook in the `storybook.url` field. You do not need to change the URL each time you publish a new version. Storybook will automatically find the correct URL for your package.
|
||||
|
||||
For example, for Chromatic, you might do:
|
||||
If you're using [Chromatic](./publish-storybook.md#publish-storybook-with-chromatic), you can provide a single URL for your Storybook in the `storybook.url` field. You do not need to change the URL each time you publish a new version. Storybook will automatically find the correct URL for your package. For example:
|
||||
|
||||
```json
|
||||
{
|
||||
@ -61,28 +65,8 @@ For example, for Chromatic, you might do:
|
||||
}
|
||||
```
|
||||
|
||||
In this example `xyz123` is your project’s id. Storybook will automatically compose in the Storybook published to that project corresponding to the version the user has installed.
|
||||
In this example `xyz123` is your Chromatic project id. Storybook will automatically compose in the Storybook published to that project corresponding to the version the user has installed.
|
||||
|
||||
### Providing a version section
|
||||
### Show a version selector
|
||||
|
||||
Similarly, if you're using a [CHP level 1 service](#chp-level-1) (such as chromatic.com) for hosting, you can provide a list of versions for the user to [choose from](#changing-versions) to experiment with other versions of your package.
|
||||
|
||||
## Component Hosting Protocol (CHP)
|
||||
|
||||
Storybook can communicate with services that host built Storybooks online. This enables features such as [Composition](./storybook-composition). We categorize services via compliance with the "Component Hosting Protocol" (CHP) with various levels of support in Storybook.
|
||||
|
||||
### CHP level 1
|
||||
|
||||
The service serves uploaded Storybooks and makes the following available:
|
||||
|
||||
- Versioned endpoints, URLs that resolve to different published Storybooks depending on a `version=x.y.z` query parameter (where `x.y.z` is the released version of the package).
|
||||
- Support for `/stories.json`
|
||||
- Support for `/metadata.json` and the `releases` field.
|
||||
|
||||
Examples of such services: [chromatic.com](https://www.chromatic.com/).
|
||||
|
||||
### CHP level 0
|
||||
|
||||
The service can serve uploaded Storybooks. There is no special integration with Storybook APIs.
|
||||
|
||||
Examples of such services: [Netlify](https://www.netlify.com/) and [S3](https://aws.amazon.com/en/s3/).
|
||||
If you're using [Chromatic](./publish-storybook.md#publish-storybook-with-chromatic), you can provide a list of versions for the user to [choose from](#switching-versions) to experiment with other versions of your package.
|
||||
|
||||
BIN
docs/sharing/prbadge-publish.png
Normal file
BIN
docs/sharing/prbadge-publish.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
@ -2,45 +2,7 @@
|
||||
title: 'Publish Storybook'
|
||||
---
|
||||
|
||||
Storybook is more than a UI component development tool. Teams also publish Storybook online to review and collaborate on works in progress. That allows developers, designers, and PMs to check if UI looks right without touching code or needing a local dev environment.
|
||||
|
||||
## Build Storybook as a static web application
|
||||
|
||||
First, we’ll need to build Storybook as a static web application using `build-storybook`, a command that’s installed by default. If you're using Yarn run the following command:
|
||||
|
||||
<div class="aside">
|
||||
💡 <strong>Note</strong>: Be careful when running the <code>build-storybook</code> command with the <code>-o</code> flag as you might unknowingly overwrite essential files and folders. For instance <strong>avoid</strong> running <code>build-storybook -o ./</code> as this will replace the root project contents with the output of the command.
|
||||
</div>
|
||||
|
||||
```shell
|
||||
yarn build-storybook -o ./path/to/build
|
||||
```
|
||||
|
||||
If you're using npm run the following command:
|
||||
|
||||
```shell
|
||||
npm run build-storybook -- -o ./path/to/build
|
||||
```
|
||||
|
||||
Storybook will create a static web application at the path you specify. This can be served by any web server. Try it out locally by running:
|
||||
|
||||
```shell
|
||||
npx http-server ./path/to/build
|
||||
```
|
||||
|
||||
<div class="aside">
|
||||
|
||||
Asides from the `-o` flag, you can also include other flags to build Storybook, for instance if you're using [Docs](../writing-docs/introduction.md), you can append the `--docs` flag and Storybook will build your [MDX](../writing-docs/mdx.md) and [CSF](../writing-stories/introduction.md#component-story-format) stories into a rich and interactive documentation.
|
||||
|
||||
You can learn more about these flag options [here](../api/cli-options.md).
|
||||
|
||||
</div>
|
||||
|
||||
## Publish Storybook online
|
||||
|
||||
Once your Storybook is built as a static web app it can be deployed to any static site hosting services. The Storybook team uses [Chromatic](https://www.chromatic.com/), a free publishing service made by Storybook maintainers that documents, versions, and indexes your UI components securely in the cloud.
|
||||
|
||||
We also maintain [`storybook-deployer`](https://github.com/storybookjs/storybook-deployer) to deploy to GitHub pages or AWS S3.
|
||||
Teams publish Storybook online to review and collaborate on works in progress. That allows developers, designers, PMs, and other stakeholders to check if the UI looks right without touching code or requiring a local dev environment.
|
||||
|
||||
<video autoPlay muted playsInline loop>
|
||||
<source
|
||||
@ -49,7 +11,97 @@ We also maintain [`storybook-deployer`](https://github.com/storybookjs/storybook
|
||||
/>
|
||||
</video>
|
||||
|
||||
## Review with your team
|
||||
## Build Storybook as a static web application
|
||||
|
||||
First, we'll need to build Storybook as a static web application. The functionality is already built-in and pre-configured. Run the following command inside your project's root directory:
|
||||
|
||||
<div class="aside">
|
||||
|
||||
💡 <strong>Note</strong>: You can provide additional flags to customize the command. Read more about the flag options [here](../api/cli-options.md).
|
||||
|
||||
</div>
|
||||
|
||||
```shell
|
||||
# With yarn
|
||||
yarn build-storybook
|
||||
|
||||
# With npm
|
||||
npm run build-storybook
|
||||
```
|
||||
|
||||
Storybook will create a static web application capable of being served by any web server. Preview it locally by running the following command:
|
||||
|
||||
```shell
|
||||
npx http-server ./path/to/build
|
||||
```
|
||||
|
||||
|
||||
|
||||
## Publish Storybook with Chromatic
|
||||
|
||||
Once you've built your Storybook as a static web app, you can publish it to your web host. We recommend [Chromatic](https://www.chromatic.com/), a free publishing service made for Storybook that documents, versions, and indexes your UI components securely in the cloud.
|
||||
|
||||
To get started, sign up with your GitHub, GitLab, Bitbucket, or email and generate a unique _project-token_ for your project.
|
||||
|
||||
Next, install the [Chromatic CLI](https://www.npmjs.com/package/chromatic) package from npm:
|
||||
|
||||
```shell
|
||||
# With npm
|
||||
npm install --save-dev chromatic
|
||||
|
||||
# With yarn
|
||||
yarn add --dev chromatic
|
||||
```
|
||||
|
||||
Run the following command after the package finishes installing.
|
||||
|
||||
```shell
|
||||
npx chromatic --project-token=<your-project-token>
|
||||
```
|
||||
|
||||
<div class="aside">
|
||||
|
||||
💡 <strong>Note</strong>: Make sure that you replace `your-project-token` with your own project token.
|
||||
|
||||
</div>
|
||||
|
||||
When Chromatic finishes, you should have successfully deployed your Storybook. Preview it by clicking the link provided (i.e., https://random-uuid.chromatic.com).
|
||||
|
||||
```shell
|
||||
Build 1 published.
|
||||
|
||||
View it online at https://www.chromatic.com/build?appId=...&number=1.
|
||||
```
|
||||
|
||||
|
||||
|
||||
### Setup CI to publish automatically
|
||||
|
||||
Configure your CI environment to publish your Storybook and [run Chromatic](https://www.chromatic.com/docs/ci)) whenever you push code to a repository. Let's see how to set it up using GitHub Actions.
|
||||
|
||||
In your project's root directory, add a new file called `chromatic.yml` inside the `.github/workflows` directory:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/chromatic-github-action.js.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
<div class="aside">
|
||||
|
||||
💡 Secrets are secure environment variables provided by GitHub so that you don't need to hard code your `project-token`. Read the [official documentation](https://docs.github.com/en/actions/security-guides/encrypted-secrets#creating-encrypted-secrets-for-a-repository) to learn how to configure them.
|
||||
|
||||
</div>
|
||||
|
||||
Commit and push the file. Congratulations, you've successfully automated publishing your Storybook. Now whenever you open a PR you’ll get a handy link to your published Storybook in your PR checks.
|
||||
|
||||
|
||||
|
||||
### Review with your team
|
||||
|
||||
Publishing Storybook as part of the development process makes it quick and easy to [gather team feedback](https://storybook.js.org/tutorials/design-systems-for-developers/react/en/review/).
|
||||
|
||||
@ -57,18 +109,30 @@ A common method to ask for review is to paste a link to the published Storybook
|
||||
|
||||
If you publish your Storybook to Chromatic, you can use the [UI Review](https://www.chromatic.com/features/publish) feature to automatically scan your PRs for new and updated stories. That makes it easy to identify what changed and give feedback.
|
||||
|
||||
|
||||
|
||||
|
||||
## Reference external Storybooks
|
||||
## Publish Storybook to other services
|
||||
|
||||
Storybook allows you to browse components from any [Storybook published online](./storybook-composition.md) inside your local Storybook. It unlocks common workflows that teams often struggle with:
|
||||
You can publish the static Storybook web app to many hosts. We maintain [`storybook-deployer`](https://github.com/storybookjs/storybook-deployer), a handy tool to help you publish to AWS or GitHub pages.
|
||||
|
||||
- 👩💻 UI developers can quickly reference prior art without switching between Storybooks.
|
||||
- 🎨 Design systems can expand adoption by composing themselves into their users’ Storybooks.
|
||||
- 🛠 Frontend platform can audit how components are used across projects.
|
||||
But features like [Composition](./storybook-composition.md), [embed](./embed.md), history, and versioning require tighter integration with Storybook APIs and secure authentication. Your hosting provider may not be capable of supporting these features. Learn about the Component Publishing Protocol (CPP) to see what.
|
||||
|
||||
|
||||
## Component Publishing Protocol (CPP)
|
||||
|
||||
Toggle between multiple versions of Storybook to see how components change between versions. This is useful for design system package authors who maintain many versions at once.
|
||||
Storybook can communicate with services that host built Storybooks online. This enables features such as [Composition](./storybook-composition.md). We categorize services via compliance with the "Component Publishing Protocol" (CPP) with various levels of support in Storybook.
|
||||
|
||||
**Requires** a [CHP level 1](./package-composition.md#chp-level-1) server (such as [chromatic.com](https://www.chromatic.com/)),
|
||||
### CPP level 1
|
||||
|
||||
This level of service serves published Storybooks and makes the following available:
|
||||
|
||||
- Versioned endpoints, URLs that resolve to different published Storybooks depending on a `version=x.y.z` query parameter (where `x.y.z` is the released version of the package).
|
||||
- Support for `/stories.json`
|
||||
- Support for `/metadata.json` and the `releases` field.
|
||||
|
||||
Example: [Chromatic](https://www.chromatic.com/)
|
||||
|
||||
### CPP level 0
|
||||
|
||||
This level of service can serve published Storybooks but has no further integration with Storybook’s APIs.
|
||||
|
||||
Examples: [Netlify](https://www.netlify.com/), [S3](https://aws.amazon.com/en/s3/)
|
||||
|
||||
@ -2,9 +2,16 @@
|
||||
title: 'Storybook Composition'
|
||||
---
|
||||
|
||||
Composition allows you to embed components from any Storybook inside your local Storybook. It’s made for teams who adopt Storybook in multiple projects but can’t ensure that the projects have the same tech stack or share the same repo.
|
||||
Composition allows you to browse components from any Storybook accessible via URL inside your local Storybook. You can compose any [Storybook published online](./storybook-publish.md) or running locally no matter the view layer, tech stack, or dependencies.
|
||||
|
||||
You can compose any Storybook [published online](./publish-storybook.md) or running locally no matter the view layer, tech stack, or dependencies.
|
||||
|
||||
|
||||
You’ll see the composed Storybook’s stories in the sidebar alongside your own. This unlocks common workflows that teams often struggle with:
|
||||
|
||||
- 👩💻 UI developers can quickly reference prior art without switching between Storybooks.
|
||||
- 🎨 Design systems can expand adoption by composing themselves into their users’ Storybooks.
|
||||
- 🛠 Frontend platform can audit how components are used across projects.
|
||||
- 📚 View multiple Storybooks with different tech stacks in one place
|
||||
|
||||
|
||||
|
||||
@ -23,12 +30,12 @@ In your [`.storybook/main.js`](../configure/overview.md#configure-story-renderin
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
<div class="aside">
|
||||
We would like to point out that there's some limitations to composition. For now addons in composed Storybooks will not work as they do in non composed Storybooks.
|
||||
💡 Limitation: Addons in composed Storybooks will not work as they normally do in non-composed Storybook.
|
||||
</div>
|
||||
|
||||
## Compose local Storybooks
|
||||
|
||||
You can also compose Storybook that are running locally. For instance, if you have a React Storybook and a Angular Storybook running on different ports:
|
||||
You can also compose multiple Storybooks that are running locally. For instance, if you have a React Storybook and a Angular Storybook running on different ports you can update your configuration file (i.e., `.storybook/main.js`) and reference them;
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -40,11 +47,11 @@ You can also compose Storybook that are running locally. For instance, if you ha
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
This composes the React and Angular Storybooks into your current Storybook. When either code base changes, hot-module-reload will work perfectly. That enables you to develop both frameworks in sync.
|
||||
Adding this configuration will combine both the React and Angular Storybooks into your current one. When either of these changes, you’ll see the changes being applied automatically. Enabling you to develop both frameworks in sync.
|
||||
|
||||
## Compose Storybooks per environment
|
||||
|
||||
You can also compose Storybooks based on the current development environment. For instance if the project you're working has already a published Storybook, but also includes a version with cutting edge features not yet released you can adjust the composition based on that. For instance:
|
||||
You can also compose Storybooks based on the current development environment (e.g, development, staging, production). For instance if the project you're working on has already a published Storybook, but also includes a version with cutting edge features not yet released you can adjust the composition based on that. For example:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -58,13 +65,13 @@ You can also compose Storybooks based on the current development environment. Fo
|
||||
|
||||
<div class="aside">
|
||||
|
||||
💡 <strong>Note</strong>: Same as with the majority of fields available within <code>main.js</code>, the <code>refs</code> field can also be a function and accept a <code>config</code> parameter that contains Storybook's configuration object. See the related [webpack documentation](../configure/webpack.md#extending-storybooks-webpack-config).
|
||||
💡 <strong>Note</strong>: Similar to the other fields available in Storybook’s configuration file, the `refs` field can also be a function that accepts a config parameter containing Storybook’s configuration object. Check the [webpack documentation](../configure/webpack.md#extending-storybooks-webpack-config) to learn more about it.
|
||||
|
||||
</div>
|
||||
|
||||
### Improve your Storybook composition
|
||||
|
||||
So far we've covered how we can use composition with local or published Storybooks. One thing worth mentioning as your Storybook will grow in time with your own stories, or through composition with other Storybooks, is that you can optimize the deployment process by including the following command in your workflow, run from your project root:
|
||||
So far we've seen how we can use composition with local or published Storybooks. One thing worth mentioning as your Storybook will grow in time with your own stories, or through composition with other Storybooks, is that you can optimize the deployment process by including the following command in your workflow, run from your project root:
|
||||
|
||||
```shell
|
||||
npx sb extract
|
||||
@ -72,11 +79,11 @@ npx sb extract
|
||||
|
||||
<div class="aside">
|
||||
|
||||
`sb extract` uses [Puppeteer](https://www.npmjs.com/package/puppeteer), which downloads and installs Chromium. Specify your own locally-installed Chromium executable by setting the environment variable `SB_CHROMIUM_PATH`.
|
||||
`sb extract` uses [Puppeteer](https://www.npmjs.com/package/puppeteer), which downloads and installs Chromium. Set the environment `SB_CHROMIUM_PATH` to configure your local Chromium installation.
|
||||
|
||||
</div>
|
||||
|
||||
Using this command will generate a `stories.json` file in the default build directory (`storybook-static`) with information regarding your Storybook. Here's how it might look:
|
||||
Running this command will generate a `stories.json` file in the default build directory (`storybook-static`) with the information related to your Storybook. Here’s an example of the file contents:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -88,18 +95,18 @@ Using this command will generate a `stories.json` file in the default build dire
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
Once you add a reference to a Storybook deployed using this method, almost immediately you'll see all the stories and other relevant information displayed in the UI.
|
||||
Linking to a Storybook deployed using this approach will yield all the stories and other relevant information displayed in the UI.
|
||||
|
||||
If required, you can also add additional arguments to this command. You can use the following to generate the `stories.json` file to a custom directory:
|
||||
If you need, you can also add additional arguments to this command. For instance, if you want to generate the stories.json file into a custom directory you can use the following:
|
||||
|
||||
```shell
|
||||
npx sb extract my-built-storybook-directory my-other-directory/stories.json
|
||||
```
|
||||
|
||||
Once the command executes it will look for a built Storybook in the `my-built-storybook-directory` and create the `stories.json` file in `my-other-directory`.
|
||||
When executed it will lookup a built Storybook in the `my-built-storybook-directory` and create the `stories.json` file in the `my-other-directory` with all the necessary information.
|
||||
|
||||
<div class="aside">
|
||||
|
||||
If you need to use arguments, you'll need to use both of them, or the command will not be executed properly.
|
||||
💡 If you need to use the arguments, you’ll need to include both of them or the command will fail.
|
||||
|
||||
</div>
|
||||
|
||||
BIN
docs/sharing/workflow-uireview.png
Normal file
BIN
docs/sharing/workflow-uireview.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
26
docs/snippets/common/chromatic-github-action.mdx
Normal file
26
docs/snippets/common/chromatic-github-action.mdx
Normal file
@ -0,0 +1,26 @@
|
||||
```shell
|
||||
# .github/workflows/chromatic.yml
|
||||
|
||||
# Workflow name
|
||||
name: 'Chromatic Publish'
|
||||
|
||||
# Event for the workflow
|
||||
on: push
|
||||
|
||||
# List of jobs
|
||||
jobs:
|
||||
test:
|
||||
# Operating System
|
||||
runs-on: ubuntu-latest
|
||||
# Job steps
|
||||
steps:
|
||||
- uses: actions/checkout@v1
|
||||
- run: yarn
|
||||
#👇 Adds Chromatic as a step in the workflow
|
||||
- uses: chromaui/action@v1
|
||||
# Options required for Chromatic's GitHub Action
|
||||
with:
|
||||
#👇 Chromatic projectToken,
|
||||
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
|
||||
token: ${{ secrets.GITHUB_TOKEN }}
|
||||
```
|
||||
96
docs/toc.js
96
docs/toc.js
@ -196,53 +196,6 @@ module.exports = {
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '🧩 Essential addons',
|
||||
pathSegment: 'essentials',
|
||||
type: 'menu',
|
||||
children: [
|
||||
{
|
||||
pathSegment: 'introduction',
|
||||
title: 'Introduction',
|
||||
type: 'link',
|
||||
},
|
||||
{
|
||||
pathSegment: 'controls',
|
||||
title: 'Controls',
|
||||
type: 'link',
|
||||
},
|
||||
{
|
||||
pathSegment: 'actions',
|
||||
title: 'Actions',
|
||||
type: 'link',
|
||||
},
|
||||
{
|
||||
pathSegment: 'viewport',
|
||||
title: 'Viewport',
|
||||
type: 'link',
|
||||
},
|
||||
{
|
||||
pathSegment: 'backgrounds',
|
||||
title: 'Backgrounds',
|
||||
type: 'link',
|
||||
},
|
||||
{
|
||||
pathSegment: 'toolbars-and-globals',
|
||||
title: 'Toolbars & globals',
|
||||
type: 'link',
|
||||
},
|
||||
{
|
||||
pathSegment: 'measure-and-outline',
|
||||
title: 'Measure & Outline',
|
||||
type: 'link',
|
||||
},
|
||||
{
|
||||
pathSegment: 'interactions',
|
||||
title: 'Interactions',
|
||||
type: 'link',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '⚙️ Configure',
|
||||
pathSegment: 'configure',
|
||||
@ -386,6 +339,53 @@ module.exports = {
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '🧩 Essential addons',
|
||||
pathSegment: 'essentials',
|
||||
type: 'menu',
|
||||
children: [
|
||||
{
|
||||
pathSegment: 'introduction',
|
||||
title: 'Introduction',
|
||||
type: 'link',
|
||||
},
|
||||
{
|
||||
pathSegment: 'controls',
|
||||
title: 'Controls',
|
||||
type: 'link',
|
||||
},
|
||||
{
|
||||
pathSegment: 'actions',
|
||||
title: 'Actions',
|
||||
type: 'link',
|
||||
},
|
||||
{
|
||||
pathSegment: 'viewport',
|
||||
title: 'Viewport',
|
||||
type: 'link',
|
||||
},
|
||||
{
|
||||
pathSegment: 'backgrounds',
|
||||
title: 'Backgrounds',
|
||||
type: 'link',
|
||||
},
|
||||
{
|
||||
pathSegment: 'toolbars-and-globals',
|
||||
title: 'Toolbars & globals',
|
||||
type: 'link',
|
||||
},
|
||||
{
|
||||
pathSegment: 'measure-and-outline',
|
||||
title: 'Measure & Outline',
|
||||
type: 'link',
|
||||
},
|
||||
{
|
||||
pathSegment: 'interactions',
|
||||
title: 'Interactions',
|
||||
type: 'link',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '🔌 API',
|
||||
pathSegment: 'api',
|
||||
@ -470,7 +470,7 @@ module.exports = {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '❓ Frequently Asked Questions',
|
||||
title: '❓ FAQ',
|
||||
pathSegment: 'faq',
|
||||
type: 'link',
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user