mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-02 05:03:44 +08:00
Merge branch 'next' into future/base
# Conflicts: # docs/faq.md # lib/cli/src/repro-generators/configs.ts # lib/cli/src/repro-generators/scripts.ts
This commit is contained in:
Norbert de Langen
commit
9c596c87ae
30
README.md
30
README.md
@ -51,8 +51,8 @@ It allows you to browse a component library, view the different states of each c
|
||||
|
||||
<p align="center">
|
||||
View README for:<br/>
|
||||
<a href="https://github.com/storybookjs/storybook/blob/main/README.md" title="latest"><img alt="latest" src="https://img.shields.io/npm/v/@storybook/core/latest.svg" /></a>
|
||||
<a href="https://github.com/storybookjs/storybook/blob/next/README.md" title="next"><img alt="next" src="https://img.shields.io/npm/v/@storybook/core/next.svg" /></a>
|
||||
<a href="https://github.com/storybookjs/storybook/blob/main/README.md" title="latest"><img alt="latest" src="https://img.shields.io/npm/v/@storybook/core/latest?style=for-the-badge&logo=storybook&logoColor=ffffff&color=ff4785" /></a>
|
||||
<a href="https://github.com/storybookjs/storybook/blob/next/README.md" title="next"><img alt="next" src="https://img.shields.io/npm/v/@storybook/core/next?style=for-the-badge&logo=storybook&logoColor=ffffff&color=purple" /></a>
|
||||
</p>
|
||||
|
||||
## Table of contents
|
||||
@ -92,19 +92,19 @@ For additional help, join us in the [Storybook Discord](https://discord.gg/story
|
||||
|
||||
### Supported Frameworks
|
||||
|
||||
| Framework | Demo | |
|
||||
| -------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
|
||||
| [React](app/react) | [v6.4.x](https://storybookjs.netlify.com/official-storybook/?path=/story/*) | [](app/react) |
|
||||
| [Vue](app/vue) | [v6.4.x](https://storybookjs.netlify.com/vue-kitchen-sink/) | [](app/vue) |
|
||||
| [Angular](app/angular) | [v6.4.x](https://storybookjs.netlify.com/angular-cli/) | [](app/angular) |
|
||||
| [Web components](app/web-components) | [v6.4.x](https://storybookjs.netlify.com/web-components-kitchen-sink/) | [](app/web-components) |
|
||||
| [React Native](https://github.com/storybookjs/react-native) | - | [](https://github.com/storybookjs/react-native) |
|
||||
| [HTML](app/html) | [v6.4.x](https://storybookjs.netlify.com/html-kitchen-sink/) | [](app/html) |
|
||||
| [Ember](app/ember) | [v6.4.x](https://storybookjs.netlify.com/ember-cli/) | [](app/ember) |
|
||||
| [Svelte](app/svelte) | [v6.4.x](https://storybookjs.netlify.com/svelte-kitchen-sink/) | [](app/svelte) |
|
||||
| [Preact](app/preact) | [v6.4.x](https://storybookjs.netlify.com/preact-kitchen-sink/) | [](app/preact) |
|
||||
| [Marionette.js](https://github.com/storybookjs/marionette) | - | [](https://github.com/storybookjs/marionette) |
|
||||
| [Android, iOS, Flutter](https://github.com/storybookjs/native) | [v6.4.x](https://storybookjs.github.io/native/@storybook/native-flutter-example/index.html) | [](https://github.com/storybookjs/native) |
|
||||
| Framework | Demo | |
|
||||
| -------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| [React](app/react) | [](https://storybookjs.netlify.com/official-storybook/?path=/story/*) | [](app/react) |
|
||||
| [Vue](app/vue) | [](https://storybookjs.netlify.com/vue-kitchen-sink/) | [](app/vue) |
|
||||
| [Angular](app/angular) | [](https://storybookjs.netlify.com/angular-cli/) | [](app/angular) |
|
||||
| [Web components](app/web-components) | [](https://storybookjs.netlify.com/web-components-kitchen-sink/) | [](app/web-components) |
|
||||
| [React Native](https://github.com/storybookjs/react-native) | - | [](https://github.com/storybookjs/react-native) |
|
||||
| [HTML](app/html) | [](https://storybookjs.netlify.com/html-kitchen-sink/) | [](app/html) |
|
||||
| [Ember](app/ember) | [](https://storybookjs.netlify.com/ember-cli/) | [](app/ember) |
|
||||
| [Svelte](app/svelte) | [](https://storybookjs.netlify.com/svelte-kitchen-sink/) | [](app/svelte) |
|
||||
| [Preact](app/preact) | [](https://storybookjs.netlify.com/preact-kitchen-sink/) | [](app/preact) |
|
||||
| [Marionette.js](https://github.com/storybookjs/marionette) | - | [](https://github.com/storybookjs/marionette) |
|
||||
| [Android, iOS, Flutter](https://github.com/storybookjs/native) | [](https://storybookjs.github.io/native/@storybook/native-flutter-example/index.html) | [](https://github.com/storybookjs/native) |
|
||||
|
||||
### Sub Projects
|
||||
|
||||
|
||||
@ -9,6 +9,12 @@ If you supply an environment variable prefixed with `STORYBOOK_`, it will be ava
|
||||
STORYBOOK_THEME=red STORYBOOK_DATA_KEY=12345 npm run storybook
|
||||
```
|
||||
|
||||
<div class="aside">
|
||||
|
||||
💡 Do not store any secrets (e.g., private API keys) or other types of sensitive information in your Storybook. Environment variables are embedded into the build, meaning anyone can view them by inspecting your files.
|
||||
|
||||
</div>
|
||||
|
||||
Then we can access these environment variables anywhere inside our preview JavaScript code like below:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -178,7 +178,7 @@ You can also use Storybook's API to configure your project with TypeScript. Unde
|
||||
| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `stories` | The array of globs that indicates the [location of your story files](#configure-story-loading), relative to `main.ts` |
|
||||
| `staticDirs` | Sets a list of directories of [static files](./images-and-assets.md#serving-static-files-via-storybook-configuration) to be loaded by Storybook <br/> `staticDirs:['../public']` |
|
||||
| `addons` | Sets the list of [addons](https://storybook.js.org/addons/) loaded by Storybook <br/> `addons:['@storybook/addon-essentials']` |
|
||||
| `addons` | Sets the list of [addons](https://storybook.js.org/addons/) loaded by Storybook <br/> `addons:['@storybook/addon-essentials']` |
|
||||
| `typescript` | Configures how Storybook handles [TypeScript files](./typescript.md) <br/> `typescript: { check: false, checkOptions: {} }` |
|
||||
| `framework` | Configures Storybook based on a set of framework-specific settings <br/> `framework:'@storybook/svelte'` |
|
||||
| `core` | Configures Storybook's internal features.<br/> `core: { builder: 'webpack5' }` |
|
||||
@ -186,6 +186,7 @@ You can also use Storybook's API to configure your project with TypeScript. Unde
|
||||
| `refs` | Configures [Storybook composition](../sharing/storybook-composition.md) <br/> `refs:{ example: { title: 'ExampleStorybook', url:'https://your-url.com' } }` |
|
||||
| `logLevel` | Configures Storybook's logs in the browser terminal. Useful for debugging <br/> `logLevel: 'debug'` |
|
||||
| `webpackFinal` | Customize Storybook's [Webpack](./webpack.md) setup <br/> `webpackFinal: async (config:any) => { return config; }` |
|
||||
| `env` | Defines custom Storybook [environment variables](./environment-variables.md#using-storybook-configuration). <br/> `env: (config) => ({...config, EXAMPLE_VAR: 'Example var' }),` |
|
||||
|
||||
## Configure story rendering
|
||||
|
||||
|
||||
@ -20,7 +20,7 @@ yarn && yarn bootstrap --core
|
||||
|
||||
## Run tests & examples
|
||||
|
||||
Once you've completed the [initial setup](#run-tests-&-examples), you should have a fully functional version of Storybook built on your local machine. Before making any code changes, it's helpful to verify that everything is working as it should. More specifically, the test suite and examples.
|
||||
Once you've completed the [initial setup](#initial-setup), you should have a fully functional version of Storybook built on your local machine. Before making any code changes, it's helpful to verify that everything is working as it should. More specifically, the test suite and examples.
|
||||
|
||||
Run the following command to execute the tests:
|
||||
|
||||
|
||||
20
docs/faq.md
20
docs/faq.md
@ -145,8 +145,9 @@ With the release of version 6.0, we updated our documentation as well. That does
|
||||
|
||||
We're only covering versions 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 |
|
||||
| ---------------- | ----------------------------------------- | --------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
|------------------|-------------------------------------------|-----------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------|
|
||||
| Get started | Install | [See current documentation](./get-started/install.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides/quick-start-guide) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides/quick-start-guide) |
|
||||
| | What's a story | [See current documentation](./get-started/whats-a-story.md) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides) |
|
||||
| | Browse Stories | [See current documentation](./get-started/browse-stories.md) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.0/docs/src/pages/guides) |
|
||||
@ -210,6 +211,7 @@ We're only covering versions 5.3 and 5.0 as they were important milestones for S
|
||||
| | Frameworks | [See current documentation](./api/new-frameworks.md) | Non existing feature or undocumented | Non existing feature or undocumented |
|
||||
| | CLI options | [See current documentation](./api/cli-options.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/cli-options) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/cli-options) |
|
||||
|
||||
|
||||
<div class="aside">
|
||||
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>
|
||||
@ -283,6 +285,7 @@ See our documentation on how to customize the [Storyshots configuration](./writi
|
||||
|
||||
Currently there's an issue when using MDX stories with IE11. This issue does <strong>not</strong> apply to [DocsPage](./writing-docs/docs-page.md). If you're interested in helping us fix this issue, read our <a href="https://github.com/storybookjs/storybook/blob/next/CONTRIBUTING.md">Contribution guidelines</a> and submit a pull request.
|
||||
|
||||
|
||||
### Why aren't my code blocks highlighted with Storybook MDX
|
||||
|
||||
Out of the box, Storybook provides syntax highlighting for a set of languages (e.g., Javascript, Markdown, CSS, HTML, Typescript, GraphQL) that you can use with your code blocks. If you're writing your custom code blocks with MDX, you'll need to import the syntax highlighter manually. For example, if you're adding a code block for SCSS, adjust your story to the following:
|
||||
@ -338,6 +341,7 @@ You'll need to update it to make it compatible with MDX 2.
|
||||
|
||||
See the following [issue](https://github.com/mdx-js/mdx/issues/1945) for more information.
|
||||
|
||||
|
||||
### Why can't I import my own stories into MDX 2?
|
||||
|
||||
This is a known issue with MDX 2. We're working to fix it. For now you can apply the following workaround:
|
||||
@ -347,11 +351,12 @@ This is a known issue with MDX 2. We're working to fix it. For now you can apply
|
||||
|
||||
import { Story } from '@storybook/addon-docs';
|
||||
|
||||
import \* as stories from './Button.stories.jsx';
|
||||
import * as stories from './Button.stories.jsx';
|
||||
|
||||
<Story name="Basic" story={stories.Basic} />
|
||||
```
|
||||
|
||||
|
||||
### Why are my mocked GraphQL queries failing with Storybook's MSW addon?
|
||||
|
||||
If you're working with Vue 3, you'll need to install [`@vue/apollo-composable`](https://www.npmjs.com/package/@vue/apollo-composable). With Svelte, you'll need to install [`@rollup/plugin-replace`](https://www.npmjs.com/package/@rollup/plugin-replace) and update your `rollup.config` file to the following:
|
||||
@ -394,6 +399,8 @@ Yes, check the [addon's examples](https://github.com/mswjs/msw-storybook-addon/t
|
||||
|
||||
No, currently, the MSW addon only has support for GraphQL queries. If you're interested in including this feature, open an issue in the [MSW addon repository](https://github.com/mswjs/msw-storybook-addon) and follow up with the maintainer.
|
||||
|
||||
|
||||
|
||||
### How can my code detect if it is running in Storybook?
|
||||
|
||||
You can do this by checking for the `IS_STORYBOOK` global variable, which will equal `true` when running in Storybook. The environment variable `process.env.STORYBOOK` is also set to `true`.
|
||||
@ -469,3 +476,12 @@ export default {
|
||||
### Why isn't Storybook's test runner working?
|
||||
|
||||
There's an issue with Storybook's test runner and the latest version of Jest (i.e., version 28), which prevents it from running effectively. As a workaround, you can downgrade Jest to the previous stable version (i.e., version 27), and you'll be able to run it. See the following [issue](https://github.com/storybookjs/test-runner/issues/99) for more information.
|
||||
|
||||
|
||||
### How does Storybook handles enviroment variables?
|
||||
|
||||
Storybook has built-in support for [environment variables](./configure/environment-variables.md). By default, environment variables are only available in Node.js code and are not available in the browser as some variables should be kept secret (e.g., API keys) and **not** exposed to anyone visiting the published Storybook.
|
||||
|
||||
To expose a variable, you must preface its name with `STORYBOOK_`. So `STORYBOOK_API_URL` will be available in browser code but `API_KEY` will not. Additionally you can also customize which variables are exposed by setting the [`env`](./configure/environment-variables.md#using-storybook-configuration) field in the `.storybook/main.js` file.
|
||||
|
||||
Variables are set when JavaScript is compiled so when the development server is started or you build your Storybook. Environment variable files should not be committed to Git as they often contain secrets which are not safe to add to Git. Instead, add `.env.*` to your `.gitignore` file and set up the environment variables manually on your hosting provider (e.g., [GitHub](https://docs.github.com/en/actions/security-guides/encrypted-secrets#creating-encrypted-secrets-for-a-repository)).
|
||||
@ -14,7 +14,7 @@ export interface Parameters {
|
||||
autoDetect?: boolean;
|
||||
/** Dependencies to add before building Storybook */
|
||||
additionalDeps?: string[];
|
||||
/** Files to add before building Storybook */
|
||||
/** Files to add before installing Storybook */
|
||||
additionalFiles?: {
|
||||
path: string;
|
||||
contents: string;
|
||||
@ -127,7 +127,7 @@ const baseAngular: Parameters = {
|
||||
renderer: 'angular',
|
||||
name: 'angular',
|
||||
version: 'latest',
|
||||
generator: `npx -p @angular/cli@{{version}} ng new {{appName}} --routing=true --minimal=true --style=scss --skipInstall=true --strict`,
|
||||
generator: `npx -p @angular/cli@{{version}} ng new {{appName}} --routing=true --minimal=true --style=scss --skip-install=true --strict`,
|
||||
};
|
||||
|
||||
export const angular12: Parameters = {
|
||||
|
||||
@ -24,7 +24,7 @@ export interface Parameters {
|
||||
ensureDir?: boolean;
|
||||
/** Dependencies to add before building Storybook */
|
||||
additionalDeps?: string[];
|
||||
/** Files to add before building Storybook */
|
||||
/** Files to add before installing Storybook */
|
||||
additionalFiles?: {
|
||||
path: string;
|
||||
contents: string;
|
||||
@ -165,15 +165,13 @@ const generate = async ({ cwd, name, appName, version, generator }: Options) =>
|
||||
};
|
||||
|
||||
const addAdditionalFiles = async ({ additionalFiles, cwd }: Options) => {
|
||||
if (!additionalFiles || additionalFiles.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
logger.info(`⤵️ Adding required files`);
|
||||
|
||||
additionalFiles.forEach(async (file) => {
|
||||
await outputFile(path.resolve(cwd, file.path), file.contents, { encoding: 'UTF-8' });
|
||||
});
|
||||
await Promise.all(
|
||||
additionalFiles.map(async (file) => {
|
||||
await outputFile(path.resolve(cwd, file.path), file.contents, { encoding: 'UTF-8' });
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
const initStorybook = async ({ cwd, autoDetect = true, name, e2e }: Options) => {
|
||||
@ -268,7 +266,7 @@ export const createAndInit = async (
|
||||
logger.log();
|
||||
|
||||
await doTask(generate, { ...options, cwd: options.creationPath });
|
||||
await doTask(addAdditionalFiles, { ...options, cwd });
|
||||
await doTask(addAdditionalFiles, { ...options, cwd }, !!options.additionalFiles);
|
||||
if (e2e) {
|
||||
await doTask(addPackageResolutions, options);
|
||||
}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { exec } from 'child_process';
|
||||
import { remove, pathExists } from 'fs-extra';
|
||||
import chalk from 'chalk';
|
||||
import path from 'path';
|
||||
import program from 'commander';
|
||||
@ -176,6 +177,16 @@ const run = async () => {
|
||||
|
||||
logger.log(`📐 reading version of storybook`);
|
||||
logger.log(`🚛 listing storybook packages`);
|
||||
|
||||
if (!process.env.CI) {
|
||||
// when running e2e locally, clear cache to avoid EPUBLISHCONFLICT errors
|
||||
const verdaccioCache = path.resolve(__dirname, '..', '.verdaccio-cache');
|
||||
if (await pathExists(verdaccioCache)) {
|
||||
logger.log(`🗑 cleaning up cache`);
|
||||
await remove(verdaccioCache);
|
||||
}
|
||||
}
|
||||
|
||||
logger.log(`🎬 starting verdaccio (this takes ±5 seconds, so be patient)`);
|
||||
|
||||
const [verdaccioServer, packages, version] = await Promise.all<any, Package[], string>([
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user