GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-03-28 05:10:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

vue 3 starting fixes and FAQ updates

Browse Source
This commit is contained in:
jonniebigodes 2021-04-29 22:15:48 +01:00
parent fefe4b7381
commit 6adf6ce9eb
5 changed files with 32 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/vue/README.md
View File

@ -28,11 +28,11 @@ You can also build a [static version](https://storybook.js.org/docs/vue/workflow
## Vue Notes
- When using global custom components or extension (e.g `Vue.use`). You will need to declare those in the `./storybook/preview.js`.
- When using global custom components or extensions (e.g., `Vue.use`). You will need to declare those in the `./storybook/preview.js`.
## Known Limitations
In Storybook story and decorator components you can not access the Vue instance
In Storybook story and decorator components, you can not access the Vue instance
in factory functions for default prop values:
```js

2
app/vue3/README.md
View File

@ -24,7 +24,7 @@ You can also build a [static version](https://storybook.js.org/docs/vue3/workflo
## Extending the Vue application
Storybook creates a [Vue 3 application](https://v3.vuejs.org/api/application-api.html#application-api) for your component preview, which can be imported as `import { app } from '@storybook/vue3'`.
Storybook creates a [Vue 3 application](https://v3.vuejs.org/api/application-api.html#application-api) for your component preview which can be imported as `import { app } from '@storybook/vue3'`.
When using global custom components (`app.component`), directives (`app.directive`), extensions (`app.use`), or other application methods, you will need to configure those in the `./storybook/preview.js` file.

14
docs/get-started/installation-command-section/vue.mdx
View File

@ -1,18 +1,8 @@
Use the Storybook CLI to install it in a single command. Run this inside your existing Vue 2 project’s root directory:
Use the Storybook CLI to install it in a single command. Run this inside your existing project’s root directory:
```shell
# Add Storybook:
npx sb init
```
For Vue 3 projects, run this inside your project’s root directory:
```shell
# Add Storybook 🔥 pre-release 🔥 version:
npx sb@next init
```
This command installs the latest pre-release version of Storybook with a new package (📦 [`@storybook/vue3`](https://www.npmjs.com/package/@storybook/vue3)), created specifically for Vue 3.
If you run into issues with the installation, check the troubleshooting section below for guidance on how to solve it.
If you run into issues with the installation, check the troubleshooting section below for guidance on how to solve it.

6
docs/get-started/installation-problems/vue.mdx
View File

@ -1,3 +1,3 @@
- You can also setup Storybook manually through the Storybook CLI. Add the `--type vue` flag when you initialize Storybook in your Vue 2 project.
- If you run into a installation problem, check the [README for the Vue 2 framework](../../app/vue/README.md) or [Readme for the Vue 3](../../app/vue/README.md) for additional instructions.
- Vue 3 support is still under active development and we encourage feedback and improvements. Check the [contribution guidelines to help us improve it](../../CONTRIBUTING.md).
- You can also set up Storybook manually through the Storybook CLI. Add the `--type vue` flag when you initialize Storybook in your Vue 2 project, or `--type vue3` for Vue 3 based projects.
- If you run into a installation problem, check the [README for the Vue 2 framework](../../app/vue/README.md) or [Readme for the Vue 3](../../app/vue3/README.md) for additional instructions.
- Vue 3 support is under active development, and we encourage feedback and improvements. Check the [contribution guidelines to help us improve it](../../CONTRIBUTING.md).

53
docs/workflows/faq.md
View File

@ -18,7 +18,7 @@ npm test -- --coverage --collectCoverageFrom='["src/**/*.{js,jsx}","!src/**/stor
### I see `ReferenceError: React is not defined` when using storybooks with Next.js
Next automatically defines `React` for all of your files via a babel plugin. You must define `React` for JSX to work. You can solve this either by:
Next automatically defines `React` for all of your files via a babel plugin. In Storybook, you can solve this either by:
1. Adding `import React from 'react'` to your component files.
2. Adding a `.babelrc` that includes [`babel-plugin-react-require`](https://www.npmjs.com/package/babel-plugin-react-require)
@ -56,21 +56,22 @@ module.exports = {
}
};
```
**Note: Fast Refresh requires React 16.10 or higher and is only enabled in development mode.**
<div class="aside">
💡 <strong>Note:</strong> Fast Refresh only works in development mode with React 16.10 or higher.
<div>
### Why is there no addons channel?
A common error is that an addon tries to access the "channel", but the channel is not set. This can happen in a few different cases:
A common error is that an addon tries to access the "channel", but the channel is not set. It can happen in a few different cases:
1. You're trying to access addon channel (e.g. by calling `setOptions`) in a non-browser environment like Jest. You may need to add a channel mock:
1. You're trying to access addon channel (e.g., by calling `setOptions`) in a non-browser environment like Jest. You may need to add a channel mock:
```js
import addons, { mockChannel } from '@storybook/addons';
addons.setChannel(mockChannel());
```
2. In React Native, it's a special case that's documented in [#1192](https://github.com/storybookjs/storybook/issues/1192)
2. In React Native, it's a special case documented in [#1192](https://github.com/storybookjs/storybook/issues/1192)
### Can I modify React component state in stories?
@ -101,7 +102,7 @@ export const defaultView = () => <MyComponent initialState={} />;
### Why aren't Controls visible in the Canvas panel but visible in the Docs panel?
If you're adding Storybook's dependencies manually, make sure you to include the [`@storybook/addon-controls`](https://www.npmjs.com/package/@storybook/addon-controls) dependency in your project and reference it in your `.storybook/main.js` as follows:
If you're adding Storybook's dependencies manually, make sure you include the [`@storybook/addon-controls`](https://www.npmjs.com/package/@storybook/addon-controls) dependency in your project and reference it in your `.storybook/main.js` as follows:
```js
// .storybook/main.js
@ -113,25 +114,25 @@ module.exports = {
### Why aren't the addons working in a composed Storybook?
Composition is a new feature that we released with version 6.0 and there's still some limitations to it.
Composition is a new feature that we released with version 6.0, and there are still some limitations to it.
For now the addons you're using in a composed Storybook will not work.
For now, the addons you're using in a composed Storybook will not work.
We're working on overcoming this limitation, soon you'll be able to use them as if you working with a non composed Storybook.
We're working on overcoming this limitation, and soon you'll be able to use them as if you are working with a non-composed Storybook.
### Which community addons are compatible with the latest version of Storybook?
Starting with Storybook version 6.0 we've introduced some great features aimed at streamlining your development workflow.
Starting with Storybook version 6.0, we've introduced some great features aimed at streamlining your development workflow.
With this we would like to point out that if you plan on using addons created by our fantastic community, you need to take in consideration that some of those addons might be working with a outdated version of Storybook.
With this, we would like to point out that if you plan on using addons created by our fantastic community, you need to consider that some of those addons might be working with an outdated version of Storybook.
We're actively working in providing a better way to address this situation, but in the meantime we would ask a bit of caution on your end so that you don't run into unexpected problems. Let us know by creating a issue in the [Storybook repo](https://github.com/storybookjs/storybook/issues) so that we can gather information and create a curated list with those addons to help not only you but the rest of the community.
We're actively working in providing a better way to address this situation, but in the meantime, we would ask a bit of caution on your end so that you don't run into unexpected problems. Let us know by creating an issue in the [Storybook repo](https://github.com/storybookjs/storybook/issues) so that we can gather information and create a curated list with those addons to help not only you but the rest of the community.
### Is it possible to browse the documentation for past versions of Storybook?
With the release of version 6.0, we also updated our documentation as well. That doesn't mean that the old documentation was removed, we kept it to help you with your Storybook migration process. Use the content from the table below in conjunction with our <a href="https://github.com/storybookjs/storybook/blob/next/MIGRATION.md">migration guide</a> .
With the release of version 6.0, we updated our documentation as well. That doesn't mean that the old documentation was removed. We kept it to help you with your Storybook migration process. Use the content from the table below in conjunction with our <a href="https://github.com/storybookjs/storybook/blob/next/MIGRATION.md">migration guide</a> .
We're only covering version 5.3 and 5.0 as they were important milestones for Storybook. If you want to go back in time a little more you'll have to check the specific release in the monorepo.
We're only covering version 5.3 and 5.0 as they were important milestones for Storybook. If you want to go back in time a little more, you'll have to check the specific release in the monorepo.
| Section | Page | Current Location | Version 5.3 location | Version 5.0 location |
|------------------|--------------------------------------------|------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------|
@ -186,12 +187,12 @@ We're only covering version 5.3 and 5.0 as they were important milestones for St
<div class="aside">
With the release of version 5.3 we've updated how you can write your stories to a more compact and easier way. It doesn't mean that the <code>storiesOf</code> format has been removed. For the time being we're still supporting it and we have documentation for it. But be advised that this is bound to change in the future.
With the release of version 5.3, we've updated how you can write your stories more compactly and easily. It doesn't mean that the <code>storiesOf</code> format has been removed. For the time being, we're still supporting it, and we have documentation for it. But be advised that this is bound to change in the future.
</div>
### What icons are available for my toolbar or my addon?
With the [`@storybook/components`](https://www.npmjs.com/package/@storybook/components) package you get a set of icons that you can use to customize your own UI. Use the table below as a reference while writing your own addon or defining your own Storybook global types.
With the [`@storybook/components`](https://www.npmjs.com/package/@storybook/components) package, you get a set of icons that you can use to customize your own UI. Use the table below as a reference while writing your addon or defining your Storybook global types.
Go through this [story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-icon--labels) to see how the icons look.
| accessibility | accessibilityalt | add | admin | alert |
@ -231,7 +232,7 @@ Go through this [story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.co
### I see a "No Preview" error with a Storybook production build
If you're using the `serve` package to verify your production build of Storybook you'll get that error. It relates how `serve` handles rewrites. For instance `/iframe.html` is rewritten into `/iframe` and you'll get that error.
If you're using the `serve` package to verify your production build of Storybook, you'll get that error. It relates how `serve` handles rewrites. For instance, `/iframe.html` is rewritten into `/iframe`, and you'll get that error.
We recommend that you use [http-server](https://www.npmjs.com/package/http-server) instead and use the following command to preview Storybook:
@ -240,27 +241,21 @@ npx http-server storybook-static
```
<div class="aside">
If you don't want to run the command above frequently. Add <code>http-server</code> as a development dependency and create a new script to preview your production build of Storybook.
Suppose you don't want to run the command above frequently. Add <code>http-server</code> as a development dependency and create a new script to preview your production build of Storybook.
</div>
### Can I use Storybook with Vue 3?
Yes, Storybook support for Vue 3 is currently being finalized and will be released in version 6.2. See the [install page](../get-started/install.md) for instructions.
Yes, with the release of version 6.2, Storybook now includes support for Vue 3. See the [install page](../get-started/install.md) for instructions.
### Is snapshot testing with Storyshots supported for Vue 3?
Yes, if you're using Vue 3 in your project you can use the [`Storyshots addon`](https://www.npmjs.com/package/@storybook/addon-storyshots). You'll need to adjust your `config` object and manually specify the framework.
Yes, with the release of version 6.2, the [`Storyshots addon`](https://www.npmjs.com/package/@storybook/addon-storyshots) will automatically detect Vue 3 projects.
<!-- prettier-ignore-start -->
If you run into a situation where this is not the case, you can adjust the `config` object and manually specify the framework (e.g., `vue3`).
<CodeSnippets
paths={[
'common/storybook-storyshots-custom-framework.js.mdx',
]}
/>
See our documentation on how to customize the [Storyshots configuration](./snapshot-testing.md).
<!-- prettier-ignore-end -->
### Why are my MDX stories not working in IE11?