GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-09 00:19:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'next' into feature/portable-stories-improvements

Browse Source
This commit is contained in:
Yann Braga 2024-03-14 11:30:09 +01:00
commit 109ff506c2
23 changed files with 450 additions and 355 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
code/addons/interactions/src/components/InteractionsPanel.stories.tsx
View File

@ -3,7 +3,7 @@ import type { StoryObj, Meta } from '@storybook/react';
import { CallStates } from '@storybook/instrumenter';
import { styled } from '@storybook/theming';
import { userEvent, within, waitFor, expect } from '@storybook/test';
import isChromatic from 'chromatic/isChromatic';
import { isChromatic } from '../../../../ui/.storybook/isChromatic';
import { getCalls, getInteractions } from '../mocks';
import { InteractionsPanel } from './InteractionsPanel';

5
code/chromatic.config.json
View File

@ -3,6 +3,7 @@
"projectToken": "80b312430ec4",
"buildScriptName": "storybook:ui:build",
"onlyChanged": true,
"storybookConfigDir": "./ui/.storybook",
"storybookBaseDir": "./code"
"storybookConfigDir": "ui/.storybook",
"storybookBaseDir": "./code",
"zip": true
}

7
code/lib/preview-api/src/modules/store/csf/__mocks__/defaultExportAnnotations.mockfile.ts Normal file
View File

@ -0,0 +1,7 @@
export default {
parameters: {
fromAnnotations: {
asDefaultImport: true,
},
},
};

5
code/lib/preview-api/src/modules/store/csf/__mocks__/namedExportAnnotations.mockfile.ts Normal file
View File

@ -0,0 +1,5 @@
export const parameters = {
fromAnnotations: {
asObjectImport: true,
},
};

14
code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts
View File

@ -7,6 +7,8 @@ import type {
} from '@storybook/types';
import { composeStory, composeStories, setProjectAnnotations } from './portable-stories';
import * as defaultExportAnnotations from './__mocks__/defaultExportAnnotations.mockfile';
import * as namedExportAnnotations from './__mocks__/namedExportAnnotations.mockfile';
type StoriesModule = Store_CSFExports & Record<string, any>;
@ -23,6 +25,18 @@ describe('composeStory', () => {
},
};
it('should compose project annotations in all module formats', () => {
setProjectAnnotations([defaultExportAnnotations, namedExportAnnotations]);
const Story: Story = {
render: () => {},
};
const composedStory = composeStory(Story, meta);
expect(composedStory.parameters.fromAnnotations.asObjectImport).toEqual(true);
expect(composedStory.parameters.fromAnnotations.asDefaultImport).toEqual(true);
});
it('should return story with composed annotations from story, meta and project', () => {
const decoratorFromProjectAnnotations = vi.fn((StoryFn) => StoryFn());
const decoratorFromStoryAnnotations = vi.fn((StoryFn) => StoryFn());

18
code/lib/preview-api/src/modules/store/csf/portable-stories.ts
View File

@ -6,7 +6,7 @@ import type {
Args,
ComponentAnnotations,
LegacyStoryAnnotationsOrFn,
ProjectAnnotations,
NamedOrDefaultProjectAnnotations,
ComposedStoryPlayFn,
ComposeStoryFn,
Store_CSFExports,
@ -15,6 +15,7 @@ import type {
ComposedStoryFn,
StrictArgTypes,
PlayFunctionContext,
ProjectAnnotations,
} from '@storybook/types';
import { HooksContext } from '../../../addons';
@ -27,11 +28,22 @@ import { normalizeProjectAnnotations } from './normalizeProjectAnnotations';
let globalProjectAnnotations: ProjectAnnotations<any> = {};
function extractAnnotation<TRenderer extends Renderer = Renderer>(
annotation: NamedOrDefaultProjectAnnotations<TRenderer>
) {
// support imports such as
// import * as annotations from '.storybook/preview'
// in both cases: 1 - the file has a default export; 2 - named exports only
return 'default' in annotation ? annotation.default : annotation;
}
export function setProjectAnnotations<TRenderer extends Renderer = Renderer>(
projectAnnotations: ProjectAnnotations<TRenderer> | ProjectAnnotations<TRenderer>[]
projectAnnotations:
| NamedOrDefaultProjectAnnotations<TRenderer>
| NamedOrDefaultProjectAnnotations<TRenderer>[]
) {
const annotations = Array.isArray(projectAnnotations) ? projectAnnotations : [projectAnnotations];
globalProjectAnnotations = composeConfigs(annotations);
globalProjectAnnotations = composeConfigs(annotations.map(extractAnnotation));
}
export function composeStory<TRenderer extends Renderer = Renderer, TArgs extends Args = Args>(

10
code/lib/types/src/modules/composedStory.ts
View File

@ -1,6 +1,12 @@
/* eslint-disable @typescript-eslint/naming-convention */
import type { PlayFunction, Renderer, StoryId, StrictArgTypes } from '@storybook/csf';
import type {
PlayFunction,
ProjectAnnotations,
Renderer,
StoryId,
StrictArgTypes,
} from '@storybook/csf';
import type {
AnnotatedStoryFn,
@ -11,8 +17,6 @@ import type {
StoryAnnotationsOrFn,
} from './csf';
import type { ProjectAnnotations } from './story';
// TODO -- I think the name "CSFExports" overlaps here a bit with the types in csfFile.ts
// we might want to reconcile @yannbf
export type Store_CSFExports<TRenderer extends Renderer = Renderer, TArgs extends Args = Args> = {

5
code/lib/types/src/modules/story.ts
View File

@ -47,6 +47,11 @@ export type ProjectAnnotations<TRenderer extends Renderer> = CsfProjectAnnotatio
renderToDOM?: RenderToCanvas<TRenderer>;
};
type NamedExportsOrDefault<TExport> = TExport | { default: TExport };
export type NamedOrDefaultProjectAnnotations<TRenderer extends Renderer = Renderer> =
NamedExportsOrDefault<ProjectAnnotations<TRenderer>>;
export type NormalizedProjectAnnotations<TRenderer extends Renderer = Renderer> = Omit<
ProjectAnnotations<TRenderer>,
'decorators' | 'loaders'

10
code/package.json
View File

@ -47,8 +47,8 @@
"storybook:blocks:build": "STORYBOOK_BLOCKS_ONLY=true yarn storybook:ui:build",
"storybook:blocks:chromatic": "STORYBOOK_BLOCKS_ONLY=true yarn storybook:ui:chromatic --project-token=${CHROMATIC_TOKEN_STORYBOOK_BLOCKS:-MISSING_PROJECT_TOKEN}",
"storybook:ui": "NODE_OPTIONS=\"--preserve-symlinks --preserve-symlinks-main\" ./lib/cli/bin/index.js dev --port 6006 --config-dir ./ui/.storybook",
"storybook:ui:build": "NODE_OPTIONS=\"--preserve-symlinks --preserve-symlinks-main\" ./lib/cli/bin/index.js build --config-dir ./ui/.storybook",
"storybook:ui:chromatic": "yarn chromatic --build-script-name storybook:ui:build --storybook-config-dir ./ui/.storybook --storybook-base-dir ./code --project-token=${CHROMATIC_TOKEN_STORYBOOK_UI:-MISSING_PROJECT_TOKEN} --only-changed --exit-zero-on-changes --exit-once-uploaded",
"storybook:ui:build": "NODE_OPTIONS=\"--preserve-symlinks --preserve-symlinks-main\" ./lib/cli/bin/index.js build --config-dir ./ui/.storybook --webpack-stats-json",
"storybook:ui:chromatic": "../scripts/node_modules/.bin/chromatic --build-script-name storybook:ui:build --storybook-base-dir ./ --project-token=${CHROMATIC_TOKEN_STORYBOOK_UI:-MISSING_PROJECT_TOKEN} --only-changed --exit-zero-on-changes --exit-once-uploaded",
"task": "yarn --cwd ../scripts task",
"test": "NODE_OPTIONS=--max_old_space_size=4096 vitest run",
"test:watch": "NODE_OPTIONS=--max_old_space_size=4096 vitest watch"
@ -88,6 +88,7 @@
"type-fest": "~2.19"
},
"dependencies": {
"@chromatic-com/storybook": "^1.2.18",
"@nx/workspace": "17.0.2",
"@playwright/test": "1.36.0",
"@storybook/addon-a11y": "workspace:*",
@ -187,7 +188,6 @@
"@typescript-eslint/parser": "^6.18.1",
"@vitejs/plugin-react": "^3.0.1",
"@vitest/coverage-v8": "^1.2.2",
"chromatic": "7.1.0",
"concurrently": "^5.3.0",
"cross-env": "^7.0.3",
"danger": "^11.2.6",
@ -222,13 +222,9 @@
"typescript": "^5.3.2",
"util": "^0.12.4",
"vite": "^4.0.0",
"vite-plugin-turbosnap": "^1.0.1",
"vitest": "^1.2.2",
"wait-on": "^7.0.1"
},
"devDependencies": {
"@chromaui/addon-visual-tests": "^0.0.124"
},
"dependenciesMeta": {
"ejs": {
"built": false

13
code/renderers/react/src/portable-stories.ts
View File

@ -5,10 +5,11 @@ import {
} from '@storybook/preview-api';
import type {
Args,
ProjectAnnotations,
NamedOrDefaultProjectAnnotations,
StoryAnnotationsOrFn,
Store_CSFExports,
StoriesWithPartialProps,
ProjectAnnotations,
} from '@storybook/types';
import * as reactProjectAnnotations from './entry-preview';
@ -28,10 +29,12 @@ import type { ReactRenderer } from './types';
* setProjectAnnotations(projectAnnotations);
*```
*
* @param projectAnnotations - e.g. (import projectAnnotations from '../.storybook/preview')
* @param projectAnnotations - e.g. (import * as projectAnnotations from '../.storybook/preview')
*/
export function setProjectAnnotations(
projectAnnotations: ProjectAnnotations<ReactRenderer> | ProjectAnnotations<ReactRenderer>[]
projectAnnotations:
| NamedOrDefaultProjectAnnotations<ReactRenderer>
| NamedOrDefaultProjectAnnotations<ReactRenderer>[]
) {
originalSetProjectAnnotations<ReactRenderer>(projectAnnotations);
}
@ -42,7 +45,7 @@ export const INTERNAL_DEFAULT_PROJECT_ANNOTATIONS: ProjectAnnotations<ReactRende
/**
* Function that will receive a story along with meta (e.g. a default export from a .stories file)
* and optionally projectAnnotations e.g. (import * from '../.storybook/preview)
* and optionally projectAnnotations e.g. (import * as projectAnnotations from '../.storybook/preview)
* and will return a composed component that has all args/parameters/decorators/etc combined and applied to it.
*
*
@ -84,7 +87,7 @@ export function composeStory<TArgs extends Args = Args>(
/**
* Function that will receive a stories import (e.g. `import * as stories from './Button.stories'`)
* and optionally projectAnnotations (e.g. `import * from '../.storybook/preview`)
* and optionally projectAnnotations (e.g. `import * as projectAnnotations from '../.storybook/preview`)
* and will return an object containing all the stories passed, but now as a composed component that has all args/parameters/decorators/etc combined and applied to it.
*
*

5
code/renderers/vue3/src/portable-stories.ts
View File

@ -5,6 +5,7 @@ import {
} from '@storybook/preview-api';
import type {
Args,
NamedOrDefaultProjectAnnotations,
ProjectAnnotations,
StoryAnnotationsOrFn,
Store_CSFExports,
@ -32,7 +33,9 @@ import type { VueRenderer } from './types';
* @param projectAnnotations - e.g. (import projectAnnotations from '../.storybook/preview')
*/
export function setProjectAnnotations(
projectAnnotations: ProjectAnnotations<VueRenderer> | ProjectAnnotations<VueRenderer>[]
projectAnnotations:
| NamedOrDefaultProjectAnnotations<VueRenderer>
| NamedOrDefaultProjectAnnotations<VueRenderer>[]
) {
originalSetProjectAnnotations<VueRenderer>(projectAnnotations);
}

8
code/ui/.storybook/isChromatic.ts Normal file
View File

@ -0,0 +1,8 @@
export function isChromatic(windowArg?: any) {
const windowToCheck = windowArg || (typeof window !== 'undefined' && window);
return !!(
windowToCheck &&
(windowToCheck.navigator.userAgent.match(/Chromatic/) ||
windowToCheck.location.href.match(/chromatic=true/))
);
}

8
code/ui/.storybook/main.ts
View File

@ -1,5 +1,4 @@
import path from 'path';
import pluginTurbosnap from 'vite-plugin-turbosnap';
// eslint-disable-next-line @typescript-eslint/no-restricted-imports
import { mergeConfig } from 'vite';
import type { StorybookConfig } from '../../frameworks/react-vite';
@ -53,7 +52,7 @@ const config: StorybookConfig = {
'@storybook/addon-interactions',
'@storybook/addon-storysource',
'@storybook/addon-designs',
'@chromaui/addon-visual-tests',
'@chromatic-com/storybook',
],
build: {
test: {
@ -79,11 +78,6 @@ const config: StorybookConfig = {
: {}),
},
},
plugins: [
configType === 'PRODUCTION'
? pluginTurbosnap({ rootDir: path.resolve(__dirname, '../..') })
: [],
],
optimizeDeps: { force: true },
build: {
// disable sourcemaps in CI to not run out of memory

2
code/ui/.storybook/preview.tsx
View File

@ -1,6 +1,6 @@
import { global } from '@storybook/global';
import React, { Fragment, useEffect } from 'react';
import isChromatic from 'chromatic/isChromatic';
import { isChromatic } from './isChromatic';
import {
Global,
ThemeProvider,

6
code/ui/manager/src/components/sidebar/SearchResults.tsx
View File

@ -111,10 +111,10 @@ const Highlight: FC<PropsWithChildren<{ match?: Match }>> = React.memo(function
const { value, indices } = match;
const { nodes: result } = indices.reduce<{ cursor: number; nodes: ReactNode[] }>(
({ cursor, nodes }, [start, end], index, { length }) => {
nodes.push(<span>{value.slice(cursor, start)}</span>);
nodes.push(<Mark>{value.slice(start, end + 1)}</Mark>);
nodes.push(<span key={`${index}-1`}>{value.slice(cursor, start)}</span>);
nodes.push(<Mark key={`${index}-2`}>{value.slice(start, end + 1)}</Mark>);
if (index === length - 1) {
nodes.push(<span>{value.slice(end + 1)}</span>);
nodes.push(<span key={`${index}-3`}>{value.slice(end + 1)}</span>);
}
return { cursor: end + 1, nodes };
},

1
code/ui/manager/src/typings.d.ts vendored
View File

@ -1,5 +1,4 @@
/* eslint-disable no-underscore-dangle, @typescript-eslint/naming-convention */
declare module 'chromatic/isChromatic';
declare var DOCS_OPTIONS: any;
declare var CONFIG_TYPE: 'DEVELOPMENT' | 'PRODUCTION';

347
code/yarn.lock
View File

@ -5,18 +5,6 @@ __metadata:
version: 8
cacheKey: 10c0
"@0no-co/graphql.web@npm:^1.0.1":
version: 1.0.4
resolution: "@0no-co/graphql.web@npm:1.0.4"
peerDependencies:
graphql: ^14.0.0 || ^15.0.0 || ^16.0.0
peerDependenciesMeta:
graphql:
optional: true
checksum: bf63cb5b017063363c9a9e06dc17532abc1c2da402c7ebcbc7b5ab2a0601ec93b02de93af9e50d9daffb3b747eddcf0b1e5418a46d1182c5b8087b7d7a1768ad
languageName: node
linkType: hard
"@aashutoshrathi/word-wrap@npm:^1.2.3":
version: 1.2.6
resolution: "@aashutoshrathi/word-wrap@npm:1.2.6"
@ -2191,7 +2179,7 @@ __metadata:
languageName: node
linkType: hard
"@babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.14.8, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
"@babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.14.8, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
version: 7.23.6
resolution: "@babel/runtime@npm:7.23.6"
dependencies:
@ -2263,38 +2251,16 @@ __metadata:
languageName: node
linkType: hard
"@chromaui/addon-visual-tests@npm:^0.0.124":
version: 0.0.124
resolution: "@chromaui/addon-visual-tests@npm:0.0.124"
"@chromatic-com/storybook@npm:^1.2.18":
version: 1.2.18
resolution: "@chromatic-com/storybook@npm:1.2.18"
dependencies:
"@storybook/design-system": "npm:^7.15.15"
"@urql/exchange-auth": "npm:^2.1.6"
chromatic: "npm:^9.0.0"
date-fns: "npm:^2.30.0"
chromatic: "npm:^11.0.0"
filesize: "npm:^10.0.12"
jsonfile: "npm:^6.1.0"
pluralize: "npm:^8.0.0"
ts-dedent: "npm:^2.2.0"
urql: "npm:^4.0.3"
uuid: "npm:^9.0.0"
zod: "npm:^3.22.2"
peerDependencies:
"@storybook/blocks": ^7.2.0
"@storybook/client-logger": ^7.2.0
"@storybook/components": ^7.2.0
"@storybook/core-events": ^7.2.0
"@storybook/manager-api": ^7.2.0
"@storybook/preview-api": ^7.2.0
"@storybook/theming": ^7.2.0
"@storybook/types": ^7.2.0
react: ^16.8.0 || ^17.0.0 || ^18.0.0
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
peerDependenciesMeta:
react:
optional: true
react-dom:
optional: true
checksum: d4ff22ca45c87f31e5799ed57e540c4669c917c099fe7284b945d2c49faccd4aec9c6d981dc33380c4c9b44e6e10942fdc0cdc29da63eb75346491da2ec346d8
react-confetti: "npm:^6.1.0"
strip-ansi: "npm:^7.1.0"
checksum: b0b4c48dba1d6cddcc2b2541ba970ac4be7861583387f9525d60797663459fdb8db25fe99759c7e51ebb256daf185116450f5f33a04e35e0a2aa458f0ab24541
languageName: node
linkType: hard
@ -2576,7 +2542,7 @@ __metadata:
languageName: node
linkType: hard
"@emotion/weak-memoize@npm:^0.3.0, @emotion/weak-memoize@npm:^0.3.1":
"@emotion/weak-memoize@npm:^0.3.1":
version: 0.3.1
resolution: "@emotion/weak-memoize@npm:0.3.1"
checksum: ed514b3cb94bbacece4ac2450d98898066c0a0698bdeda256e312405ca53634cb83c75889b25cd8bbbe185c80f4c05a1f0a0091e1875460ba6be61d0334f0b8a
@ -3358,19 +3324,6 @@ __metadata:
languageName: node
linkType: hard
"@hypnosphi/create-react-context@npm:^0.3.1":
version: 0.3.1
resolution: "@hypnosphi/create-react-context@npm:0.3.1"
dependencies:
gud: "npm:^1.0.0"
warning: "npm:^4.0.3"
peerDependencies:
prop-types: ^15.0.0
react: ">=0.14.0"
checksum: e8072221f9f9c2c47c3ebc5bc6079f9a71938e181d2b4aa3e1d3922707bc097336d5260dad088cf47c1d6e1ff34839fa21f2505a95bddda0d7548c5a955b5691
languageName: node
linkType: hard
"@isaacs/cliui@npm:^8.0.2":
version: 8.0.2
resolution: "@isaacs/cliui@npm:8.0.2"
@ -5775,32 +5728,6 @@ __metadata:
languageName: node
linkType: hard
"@storybook/design-system@npm:^7.15.15":
version: 7.15.15
resolution: "@storybook/design-system@npm:7.15.15"
dependencies:
"@emotion/weak-memoize": "npm:^0.3.0"
"@storybook/theming": "npm:^7.0.2"
"@types/pluralize": "npm:^0.0.29"
"@types/prismjs": "npm:^1.16.6"
"@types/react-modal": "npm:^3.12.1"
"@types/uuid": "npm:^8.3.1"
copy-to-clipboard: "npm:^3.3.1"
human-format: "npm:^0.11.0"
pluralize: "npm:^8.0.0"
polished: "npm:^3.6.4"
prismjs: "npm:1.25.0"
react-github-button: "npm:^0.1.11"
react-modal: "npm:^3.11.2"
react-popper-tooltip: "npm:^2.11.1"
uuid: "npm:^3.3.3"
peerDependencies:
react: ^15.0.0 || ^16.0.0 || ^17.0.0
react-dom: ^15.0.0 || ^16.0.0 || ^17.0.0
checksum: 3f2ea63556aed966e906b8e56fa0ef12fd67f919426a63350a7ecba5a6cff277b8e18362d680530f7fdfa7240c8ceb890984a0594f5129f2b9d972e991b297cf
languageName: node
linkType: hard
"@storybook/docs-mdx@npm:3.0.0":
version: 3.0.0
resolution: "@storybook/docs-mdx@npm:3.0.0"
@ -6447,7 +6374,7 @@ __metadata:
version: 0.0.0-use.local
resolution: "@storybook/root@workspace:."
dependencies:
"@chromaui/addon-visual-tests": "npm:^0.0.124"
"@chromatic-com/storybook": "npm:^1.2.18"
"@nx/workspace": "npm:17.0.2"
"@playwright/test": "npm:1.36.0"
"@storybook/addon-a11y": "workspace:*"
@ -6547,7 +6474,6 @@ __metadata:
"@typescript-eslint/parser": "npm:^6.18.1"
"@vitejs/plugin-react": "npm:^3.0.1"
"@vitest/coverage-v8": "npm:^1.2.2"
chromatic: "npm:7.1.0"
concurrently: "npm:^5.3.0"
cross-env: "npm:^7.0.3"
danger: "npm:^11.2.6"
@ -6582,7 +6508,6 @@ __metadata:
typescript: "npm:^5.3.2"
util: "npm:^0.12.4"
vite: "npm:^4.0.0"
vite-plugin-turbosnap: "npm:^1.0.1"
vitest: "npm:^1.2.2"
wait-on: "npm:^7.0.1"
dependenciesMeta:
@ -7876,13 +7801,6 @@ __metadata:
languageName: node
linkType: hard
"@types/pluralize@npm:^0.0.29":
version: 0.0.29
resolution: "@types/pluralize@npm:0.0.29"
checksum: 840796fa1db158eb4d9787758d134736e29d9a8035f5b0cbad06e3801fc64b79112ba944c83f9a1a5b94da08703f505b8315b7e0f28bfc0f8e9e1ccfead7b083
languageName: node
linkType: hard
"@types/prettier@npm:^3.0.0":
version: 3.0.0
resolution: "@types/prettier@npm:3.0.0"
@ -7899,13 +7817,6 @@ __metadata:
languageName: node
linkType: hard
"@types/prismjs@npm:^1.16.6":
version: 1.26.1
resolution: "@types/prismjs@npm:1.26.1"
checksum: 74b624bd0def16ba2fe4492ac74422ed9eaf5588814c14d8825c85dd4ef05b900a3685c5ec00bb13991e9f0cc4bbda196b9de3ba75cf7c00bc8ffd960c125124
languageName: node
linkType: hard
"@types/prompts@npm:^2.0.9":
version: 2.4.9
resolution: "@types/prompts@npm:2.4.9"
@ -7953,15 +7864,6 @@ __metadata:
languageName: node
linkType: hard
"@types/react-modal@npm:^3.12.1":
version: 3.16.1
resolution: "@types/react-modal@npm:3.16.1"
dependencies:
"@types/react": "npm:*"
checksum: 4f586bd00e4b15633ec6607cb3266183b81419a2c0931d40e6127427e944a986d3d9a9c8a23c86cb586b15e541a1c6682f6ab0d2561a3b81fcf857772727ff44
languageName: node
linkType: hard
"@types/react-refresh@npm:^0":
version: 0.14.5
resolution: "@types/react-refresh@npm:0.14.5"
@ -8175,13 +8077,6 @@ __metadata:
languageName: node
linkType: hard
"@types/uuid@npm:^8.3.1":
version: 8.3.4
resolution: "@types/uuid@npm:8.3.4"
checksum: b9ac98f82fcf35962317ef7dc44d9ac9e0f6fdb68121d384c88fe12ea318487d5585d3480fa003cf28be86a3bbe213ca688ba786601dce4a97724765eb5b1cf2
languageName: node
linkType: hard
"@types/uuid@npm:^9.0.1":
version: 9.0.7
resolution: "@types/uuid@npm:9.0.7"
@ -8516,26 +8411,6 @@ __metadata:
languageName: node
linkType: hard
"@urql/core@npm:>=4.1.0, @urql/core@npm:^4.1.0":
version: 4.2.0
resolution: "@urql/core@npm:4.2.0"
dependencies:
"@0no-co/graphql.web": "npm:^1.0.1"
wonka: "npm:^6.3.2"
checksum: dbbd500705c2bbf842674016aa69865a90c3d40c1e16034faf6423c9211c37540e975abbf448eae072b7dd38920ed517e8b34ba351f881da1764c22177ca12ed
languageName: node
linkType: hard
"@urql/exchange-auth@npm:^2.1.6":
version: 2.1.6
resolution: "@urql/exchange-auth@npm:2.1.6"
dependencies:
"@urql/core": "npm:>=4.1.0"
wonka: "npm:^6.3.2"
checksum: d4140ad0fba0b1beacefcfb7a520662d97429f70888c61191c94e8811ac2b0678a01127e97fa473918dbe34a3e6cf6eece52bf44f6943057232594fa0949d58a
languageName: node
linkType: hard
"@vitejs/plugin-basic-ssl@npm:1.0.1":
version: 1.0.1
resolution: "@vitejs/plugin-basic-ssl@npm:1.0.1"
@ -11473,25 +11348,22 @@ __metadata:
languageName: node
linkType: hard
"chromatic@npm:7.1.0":
version: 7.1.0
resolution: "chromatic@npm:7.1.0"
"chromatic@npm:^11.0.0":
version: 11.0.8
resolution: "chromatic@npm:11.0.8"
peerDependencies:
"@chromatic-com/cypress": ^0.*.* || ^1.0.0
"@chromatic-com/playwright": ^0.*.* || ^1.0.0
peerDependenciesMeta:
"@chromatic-com/cypress":
optional: true
"@chromatic-com/playwright":
optional: true
bin:
chroma: dist/bin.js
chromatic: dist/bin.js
chromatic-cli: dist/bin.js
checksum: d5bc18f97b7829799673018e8eaa0ef6537a47e3050208b791e083bef6753c44a2506f1fef2180b71fbf05c67bc80cdaf253ea599924dee82103e58ed344ef8a
languageName: node
linkType: hard
"chromatic@npm:^9.0.0":
version: 9.1.0
resolution: "chromatic@npm:9.1.0"
bin:
chroma: dist/bin.js
chromatic: dist/bin.js
chromatic-cli: dist/bin.js
checksum: 27d0ff5ef993024301f31d137e9774b051de908d48dcd461c33b51c92e5e7b57cd062eaddafcd02f1c2a98cfe5d5ef26b7fcdf77b76df94e357171074a23b950
checksum: 422ab9afd9667f94813b2355144092fe5abe6538394e308619411050fea8265b9531a88a13b8563bf40172bd99b47de3c89642f34ec2d1f1bc42c958568e2902
languageName: node
linkType: hard
@ -12595,7 +12467,7 @@ __metadata:
languageName: node
linkType: hard
"date-fns@npm:^2.0.1, date-fns@npm:^2.30.0":
"date-fns@npm:^2.0.1":
version: 2.30.0
resolution: "date-fns@npm:2.30.0"
dependencies:
@ -12722,20 +12594,6 @@ __metadata:
languageName: node
linkType: hard
"deep-equal@npm:^1.1.1":
version: 1.1.1
resolution: "deep-equal@npm:1.1.1"
dependencies:
is-arguments: "npm:^1.0.4"
is-date-object: "npm:^1.0.1"
is-regex: "npm:^1.0.4"
object-is: "npm:^1.0.1"
object-keys: "npm:^1.1.1"
regexp.prototype.flags: "npm:^1.2.0"
checksum: 473d5dd1d707afd5ad3068864765590591b049d0e0d9a01931599dbbd820e35f09d0a42faa6e4644deb7cf6b7dc90f7bfdf5559f42279d67f714209b62036212
languageName: node
linkType: hard
"deep-equal@npm:^2.0.5":
version: 2.2.2
resolution: "deep-equal@npm:2.2.2"
@ -14882,13 +14740,6 @@ __metadata:
languageName: node
linkType: hard
"exenv@npm:^1.2.0":
version: 1.2.2
resolution: "exenv@npm:1.2.2"
checksum: 4e96b355a6b9b9547237288ca779dd673b2e698458b409e88b50df09feb7c85ef94c07354b6b87bc3ed0193a94009a6f7a3c71956da12f45911c0d0f5aa3caa0
languageName: node
linkType: hard
"expand-brackets@npm:^2.1.4":
version: 2.1.4
resolution: "expand-brackets@npm:2.1.4"
@ -16443,13 +16294,6 @@ __metadata:
languageName: node
linkType: hard
"gud@npm:^1.0.0":
version: 1.0.0
resolution: "gud@npm:1.0.0"
checksum: a4db6edc18e2c4e3a22dc9e639e40a4e5650d53dae9cf384a96d5380dfa17ddda376cf6b7797a5c30d140d2532e5a69d167bdb70c2c151dd673253bac6b027f3
languageName: node
linkType: hard
"gunzip-maybe@npm:^1.4.2":
version: 1.4.2
resolution: "gunzip-maybe@npm:1.4.2"
@ -17157,13 +17001,6 @@ __metadata:
languageName: node
linkType: hard
"human-format@npm:^0.11.0":
version: 0.11.0
resolution: "human-format@npm:0.11.0"
checksum: 83cc87af67036b4abb6dc585533fcc232279373f8a3a7a4fc1f6d988f6aa35664f986adb818d04d9de3dee240648ec94a9944a8ab1852df21eb67c254e991ea7
languageName: node
linkType: hard
"human-signals@npm:^2.1.0":
version: 2.1.0
resolution: "human-signals@npm:2.1.0"
@ -18012,7 +17849,7 @@ __metadata:
languageName: node
linkType: hard
"is-regex@npm:^1.0.3, is-regex@npm:^1.0.4, is-regex@npm:^1.1.4":
"is-regex@npm:^1.0.3, is-regex@npm:^1.1.4":
version: 1.1.4
resolution: "is-regex@npm:1.1.4"
dependencies:
@ -22016,7 +21853,7 @@ __metadata:
languageName: node
linkType: hard
"object-is@npm:^1.0.1, object-is@npm:^1.1.5":
"object-is@npm:^1.1.5":
version: 1.1.5
resolution: "object-is@npm:1.1.5"
dependencies:
@ -23089,15 +22926,6 @@ __metadata:
languageName: node
linkType: hard
"polished@npm:^3.6.4":
version: 3.7.2
resolution: "polished@npm:3.7.2"
dependencies:
"@babel/runtime": "npm:^7.12.5"
checksum: c36439946b5bfbac16c06dd7b00a89f45e07410427344e909c540ce3ddeb9b44d2ae9cc035a9d77f4551e07b9803419ae77767aec85958a0978158a95c0115d8
languageName: node
linkType: hard
"polished@npm:^4.2.2":
version: 4.2.2
resolution: "polished@npm:4.2.2"
@ -23107,7 +22935,7 @@ __metadata:
languageName: node
linkType: hard
"popper.js@npm:^1.14.4, popper.js@npm:^1.16.0":
"popper.js@npm:^1.16.0":
version: 1.16.1
resolution: "popper.js@npm:1.16.1"
checksum: 1c1a826f757edb5b8c2049dfd7a9febf6ae1e9d0e51342fc715b49a0c1020fced250d26484619883651e097c5764bbcacd2f31496e3646027f079dd83e072681
@ -23452,13 +23280,6 @@ __metadata:
languageName: node
linkType: hard
"prismjs@npm:1.25.0":
version: 1.25.0
resolution: "prismjs@npm:1.25.0"
checksum: 0c3853a6c815b23a07bef77700f60a40b2a12018a383a75cd7d108718717b73927c809e7dd08ac0ae9f16fbe1e005b337262bc95952cf9cfc91914f986b07bd3
languageName: node
linkType: hard
"prismjs@npm:^1.27.0":
version: 1.29.0
resolution: "prismjs@npm:1.29.0"
@ -23560,7 +23381,7 @@ __metadata:
languageName: node
linkType: hard
"prop-types@npm:^15.5.10, prop-types@npm:^15.6.1, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
"prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
version: 15.8.1
resolution: "prop-types@npm:15.8.1"
dependencies:
@ -24120,15 +23941,6 @@ __metadata:
languageName: node
linkType: hard
"react-github-button@npm:^0.1.11":
version: 0.1.11
resolution: "react-github-button@npm:0.1.11"
dependencies:
prop-types: "npm:^15.5.10"
checksum: e00fa4f3b2dee74f45fff0c9d68d7d75eefa495d27a56ef2e2391f9600623d16b8a9f99c1d35a7b4f620dfb95dd8ed0b1a76fbbfece4be0843cd507c17a37dfa
languageName: node
linkType: hard
"react-helmet-async@npm:^1.3.0":
version: 1.3.0
resolution: "react-helmet-async@npm:1.3.0"
@ -24215,13 +24027,6 @@ __metadata:
languageName: node
linkType: hard
"react-lifecycles-compat@npm:^3.0.0":
version: 3.0.4
resolution: "react-lifecycles-compat@npm:3.0.4"
checksum: 1d0df3c85af79df720524780f00c064d53a9dd1899d785eddb7264b378026979acbddb58a4b7e06e7d0d12aa1494fd5754562ee55d32907b15601068dae82c27
languageName: node
linkType: hard
"react-merge-refs@npm:^1.0.0":
version: 1.1.0
resolution: "react-merge-refs@npm:1.1.0"
@ -24229,34 +24034,6 @@ __metadata:
languageName: node
linkType: hard
"react-modal@npm:^3.11.2":
version: 3.16.1
resolution: "react-modal@npm:3.16.1"
dependencies:
exenv: "npm:^1.2.0"
prop-types: "npm:^15.7.2"
react-lifecycles-compat: "npm:^3.0.0"
warning: "npm:^4.0.3"
peerDependencies:
react: ^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18
react-dom: ^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18
checksum: 7b56e2c505b2b924736c471a34754a4211df40ac2d6fb0949cf095aea5e65d3326bd9f111fa7898acf40afa54f526809ad8aa47e02b8328663d11422568dc7b1
languageName: node
linkType: hard
"react-popper-tooltip@npm:^2.11.1":
version: 2.11.1
resolution: "react-popper-tooltip@npm:2.11.1"
dependencies:
"@babel/runtime": "npm:^7.9.2"
react-popper: "npm:^1.3.7"
peerDependencies:
react: ^16.6.0
react-dom: ^16.6.0
checksum: f81278f1ea87899ffa57fed85c2531fa583ebca424ae5522e3a1b05c5635c014b3467391e77fb9c48bbc8e7b9f1050fa9302e8ee6134a9333858b5a6e0ae1b49
languageName: node
linkType: hard
"react-popper-tooltip@npm:^4.4.2":
version: 4.4.2
resolution: "react-popper-tooltip@npm:4.4.2"
@ -24271,23 +24048,6 @@ __metadata:
languageName: node
linkType: hard
"react-popper@npm:^1.3.7":
version: 1.3.11
resolution: "react-popper@npm:1.3.11"
dependencies:
"@babel/runtime": "npm:^7.1.2"
"@hypnosphi/create-react-context": "npm:^0.3.1"
deep-equal: "npm:^1.1.1"
popper.js: "npm:^1.14.4"
prop-types: "npm:^15.6.1"
typed-styles: "npm:^0.0.7"
warning: "npm:^4.0.2"
peerDependencies:
react: 0.14.x || ^15.0.0 || ^16.0.0 || ^17.0.0
checksum: d5dd1d0d4b5a3407134681b42a079fce525c94bce892ad177515d54a8cf64203eecbc30231476367e916aaff91221f5b6abd5afc207a86c698f35b7254178488
languageName: node
linkType: hard
"react-popper@npm:^2.3.0":
version: 2.3.0
resolution: "react-popper@npm:2.3.0"
@ -24730,7 +24490,7 @@ __metadata:
languageName: node
linkType: hard
"regexp.prototype.flags@npm:^1.2.0, regexp.prototype.flags@npm:^1.5.0, regexp.prototype.flags@npm:^1.5.2":
"regexp.prototype.flags@npm:^1.5.0, regexp.prototype.flags@npm:^1.5.2":
version: 1.5.2
resolution: "regexp.prototype.flags@npm:1.5.2"
dependencies:
@ -28170,13 +27930,6 @@ __metadata:
languageName: node
linkType: hard
"typed-styles@npm:^0.0.7":
version: 0.0.7
resolution: "typed-styles@npm:0.0.7"
checksum: ec159f0e538364750cf9b8f19136375df64ad364fda355e6f7a7216ebffc67f18b436722c5c6853c89f70e6507eb69e5061ceb9334fa1f54902c0f6be1b985fe
languageName: node
linkType: hard
"typedarray@npm:^0.0.6":
version: 0.0.6
resolution: "typedarray@npm:0.0.6"
@ -28786,18 +28539,6 @@ __metadata:
languageName: node
linkType: hard
"urql@npm:^4.0.3":
version: 4.0.5
resolution: "urql@npm:4.0.5"
dependencies:
"@urql/core": "npm:^4.1.0"
wonka: "npm:^6.3.2"
peerDependencies:
react: ">= 16.8.0"
checksum: 9560d04b3c2fe72c921bdb21e969039b776e07999704d23bce35f815eb537c9357b6c7322a1b8cd43957550798c30cd15f5130ddd054dfd8a890d17d2be85282
languageName: node
linkType: hard
"use-callback-ref@npm:^1.3.0":
version: 1.3.1
resolution: "use-callback-ref@npm:1.3.1"
@ -28933,15 +28674,6 @@ __metadata:
languageName: node
linkType: hard
"uuid@npm:^3.3.3":
version: 3.4.0
resolution: "uuid@npm:3.4.0"
bin:
uuid: ./bin/uuid
checksum: 1c13950df865c4f506ebfe0a24023571fa80edf2e62364297a537c80af09c618299797bbf2dbac6b1f8ae5ad182ba474b89db61e0e85839683991f7e08795347
languageName: node
linkType: hard
"uuid@npm:^8.0.0, uuid@npm:^8.3.2":
version: 8.3.2
resolution: "uuid@npm:8.3.2"
@ -29136,13 +28868,6 @@ __metadata:
languageName: node
linkType: hard
"vite-plugin-turbosnap@npm:^1.0.1":
version: 1.0.3
resolution: "vite-plugin-turbosnap@npm:1.0.3"
checksum: fd4a283708e24b54442b5db05461f8302bc57094234fd5b0dae1a6f76bb79078c68a729e516f352d04b89fea7c459f8272921f788bd3cd20d1488c7e73d7238e
languageName: node
linkType: hard
"vite@npm:4.5.0":
version: 4.5.0
resolution: "vite@npm:4.5.0"
@ -29595,7 +29320,7 @@ __metadata:
languageName: node
linkType: hard
"warning@npm:^4.0.2, warning@npm:^4.0.3":
"warning@npm:^4.0.2":
version: 4.0.3
resolution: "warning@npm:4.0.3"
dependencies:
@ -30079,13 +29804,6 @@ __metadata:
languageName: node
linkType: hard
"wonka@npm:^6.3.2":
version: 6.3.4
resolution: "wonka@npm:6.3.4"
checksum: 77329eea673da07717476e1b8f1a22f1e1a4f261bb9a58fa446c03d3da13dbd5b254664f8aded5928d953f33ee5b399a17a4f70336e8b236e478209c0e78cda4
languageName: node
linkType: hard
"wordwrap@npm:^1.0.0":
version: 1.0.0
resolution: "wordwrap@npm:1.0.0"
@ -30454,13 +30172,6 @@ __metadata:
languageName: node
linkType: hard
"zod@npm:^3.22.2":
version: 3.22.4
resolution: "zod@npm:3.22.4"
checksum: 7578ab283dac0eee66a0ad0fc4a7f28c43e6745aadb3a529f59a4b851aa10872b3890398b3160f257f4b6817b4ce643debdda4fb21a2c040adda7862cab0a587
languageName: node
linkType: hard
"zone.js@npm:^0.14.2":
version: 0.14.2
resolution: "zone.js@npm:0.14.2"

313
docs/get-started/index.md Normal file
View File

@ -0,0 +1,313 @@
---
title: Get started with Storybook
hideRendererSelector: true
---
<!-- prettier-ignore-start -->
export const RightArrow = () => (
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.896 10.146a.5.5 0 00.708.708l3.5-3.5a.5.5 0 000-.708l-3.5-3.5a.5.5 0 10-.708.708L8.043 7l-3.147 3.146z" fill="currentColor"></path></svg>
);
<!-- prettier-ignore-end -->
Welcome to Storybook's documentation ✦ Learn how to get started with Storybook in your project. Then, explore Storybook's main concepts and discover additional resources to help you grow and maintain your Storybook.
## What is Storybook?
Storybook is a frontend workshop for building UI components and pages in isolation. It helps you develop and share hard-to-reach states and edge cases without needing to run your whole app. Thousands of teams use it for UI development, testing, and documentation. It's open source and free.
## Install Storybook
Storybook is a standalone tool that runs alongside your app. It's a zero-config environment that works with any modern frontend framework. You can install Storybook into an existing project or create a new one from scratch.
<!-- prettier-ignore-start -->
<CodeSnippets
paths={[
'common/init-command.npx.js.mdx',
'common/init-command.yarn.js.mdx',
'common/init-command.pnpm.js.mdx',
]}
/>
<!-- prettier-ignore-end -->
<div class="sb-grid three-up">
<a href="./nextjs/?renderer=react" class="framework card">
<img src="/images/logos/renderers/logo-nextjs.svg" width="28" height="28" alt="" class="img" />
<h3>Next.js</h3>
</a>
<a href="./react-vite/?renderer=react" class="framework card">
<img src="/images/logos/renderers/logo-react.svg" width="28" height="28" alt="" class="img" />
<div>
<h3>React</h3>
<p>with Vite</p>
</div>
</a>
<a href="./react-webpack5/?renderer=react" class="framework card">
<img src="/images/logos/renderers/logo-react.svg" width="28" height="28" alt="" class="img" />
<div>
<h3>React</h3>
<p>with Webpack</p>
</div>
</a>
<a href="https://github.com/storybookjs/react-native" target="_blank" class="framework card">
<img src="/images/logos/renderers/logo-react.svg" width="28" height="28" alt="" class="img" />
<h3>React Native</h3>
</a>
<a href="./vue3-vite/?renderer=vue" class="framework card">
<img src="/images/logos/renderers/logo-vue.svg" width="28" height="28" alt="" class="img" />
<div>
<h3>Vue</h3>
<p>with Vite</p>
</div>
</a>
<a href="./vue3-webpack5/?renderer=vue" class="framework card">
<img src="/images/logos/renderers/logo-vue.svg" width="28" height="28" alt="" class="img" />
<div>
<h3>Vue</h3>
<p>with Webpack</p>
</div>
</a>
<a href="./angular/?renderer=angular" class="framework card">
<img src="/images/logos/renderers/logo-angular.svg" width="28" height="28" alt="" class="img" />
<h3>Angular</h3>
</a>
<a href="./sveltekit/?renderer=svelte" class="framework card">
<img src="/images/logos/renderers/logo-svelte.svg" width="28" height="28" alt="" class="img" />
<h3>SvelteKit</h3>
</a>
<a href="./svelte-vite/?renderer=svelte" class="framework card">
<img src="/images/logos/renderers/logo-svelte.svg" width="28" height="28" alt="" class="img" />
<div>
<h3>Svelte</h3>
<p>with Vite</p>
</div>
</a>
<a href="./svelte-webpack5/?renderer=svelte" class="framework card">
<img src="/images/logos/renderers/logo-svelte.svg" width="28" height="28" alt="" class="img" />
<div>
<h3>Svelte</h3>
<p>with Webpack</p>
</div>
</a>
<a href="./web-components-vite/?renderer=web-components" class="framework card">
<img src="/images/logos/renderers/logo-web-components.svg" width="28" height="28" alt="" class="img" />
<div>
<h3>Web Components</h3>
<p>with Vite</p>
</div>
</a>
<a href="./web-components-webpack5/?renderer=web-components" class="framework card">
<img src="/images/logos/renderers/logo-web-components.svg" width="28" height="28" alt="" class="img" />
<div>
<h3>Web Components</h3>
<p>with Webpack</p>
</div>
</a>
</div>
Want to know more about installing Storybook? Check out the [installation guide](./install.md).
## Main concepts
Storybook is a powerful tool that can help you with many aspects of your UI development workflow. Here are some of the main concepts to get you started.
<div class="sb-grid two-up">
<a href="../writing-stories/" class="card card-large concept">
<img src="/images/icons/icon-story.svg" alt="" width="20" height="20" class="img" />
<h3>Stories</h3>
<p>A story captures the rendered state of a UI component. Each component can have multiple stories, where each story describes a different component state.</p>
</a>
<a href="../writing-docs/" class="card card-large concept">
<img src="/images/icons/icon-docs.svg" alt="" width="20" height="20" class="img" />
<h3>Docs</h3>
<p>Storybook can analyze your components to automatically create documentation alongside your stories. This automatic documentation makes it easier for you to create UI library usage guidelines, design system sites, and more.</p>
</a>
<a href="../writing-tests/" class="card card-large concept">
<img src="/images/icons/icon-testing.svg" alt="" width="20" height="20" class="img" />
<h3>Testing</h3>
<p>Stories are a pragmatic starting point for your UI testing strategy. You already write stories as a natural part of UI development, so testing those stories is a low-effort way to prevent UI bugs over time.</p>
</a>
<a href="../sharing/" class="card card-large concept">
<img src="/images/icons/icon-sharing.svg" alt="" width="20" height="20" class="img" />
<h3>Sharing</h3>
<p>Publishing your Storybook allows you to share your work with others. You can also embed your stories in places like Notion or Figma.</p>
</a>
</div>
## Additional resources
Once you've learned the basics, explore these other ways to get the most out of Storybook.
<div class="sb-grid three-up">
<a href="../essentials/" class="resource">
<img src="/images/icons/icon-more.svg" width="28" height="28" alt="" class="img" />
Essential addons
</a>
<a href="https://storybook.js.org/integrations/" class="resource">
<img src="/images/icons/icon-more.svg" width="28" height="28" alt="" class="img" />
Addon catalog
</a>
<a href="https://storybook.js.org/integrations/" class="resource">
<img src="/images/icons/icon-more.svg" width="28" height="28" alt="" class="img" />
Recipes
</a>
<a href="../builders/" class="resource">
<img src="/images/icons/icon-more.svg" width="28" height="28" alt="" class="img" />
Builders
</a>
<a href="../contribute/" class="resource">
<img src="/images/icons/icon-more.svg" width="28" height="28" alt="" class="img" />
How to contribute
</a>
<a href="../migration-guide/" class="resource">
<img src="/images/icons/icon-more.svg" width="28" height="28" alt="" class="img" />
Migrate to 8.0
</a>
<a href="../faq" class="resource">
<img src="/images/icons/icon-more.svg" width="28" height="28" alt="" class="img" />
FAQ
</a>
</div>
---
<div class="sb-grid two-up">
<div class="help">
<h3>Need some help?</h3>
<a href="https://github.com/storybookjs/storybook/discussions/categories/help">Join a discussion on GitHub<RightArrow /></a>
</div>
<div class="help">
<h3>Latest product updates</h3>
<a href="https://storybook.js.org/releases/">See changelog<RightArrow /></a>
</div>
</div>
<style>
{`
.sb-grid {
display: grid;
gap: 16px;
}
.sb-grid.two-up {
grid-template-columns: repeat(1, 1fr);
}
.sb-grid.three-up {
grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 440px) {
.sb-grid.two-up {
grid-template-columns: repeat(2, 1fr);
}
.sb-grid.three-up {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1280px) {
.sb-grid.three-up {
grid-template-columns: repeat(3, 1fr);
}
}
a.sb-grid-item.sb-grid-item.sb-grid-item {
color: inherit;
text-decoration: none;
}
.card {
border-radius: 6px;
border: 1px solid #D9E8F2;
padding: 12px;
transition: border-color 0.2s ease;
color: inherit;
text-decoration: none;
}
.card:hover {
border-color: #B2C3CD;
}
.card h3 {
font-size: 16px;
font-weight: 600;
line-height: 28px;
margin: 0;
color: #000;
text-decoration: none;
}
.card p {
font-size: 14px;
line-height: 24px;
margin: 0;
color: #454E54;
text-decoration: none;
}
.card.card-large {
padding: 24px 28px;
}
.card.card-large h3 {
font-size: 18px;
font-weight: 700;
}
.framework {
display: flex !important;
flex-direction: row;
align-items: center;
height: 80px;
gap: 12px;
padding-left: 20px;
}
.framework h3 {
line-height: 18px;
}
.concept {
display: grid !important;
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr;
gap: 12px;
row-gap: 12px;
}
.concept .img {
align-self: baseline;
margin-top: 4px;
}
.concept p {
grid-column: span 2;
}
.resource {
display: flex !important;
align-items: center;
gap: 8px;
}
.help {
margin-bottom: 24px;
}
.help h3 {
margin-top: 0;
}
.help a {
display: flex !important;
align-items: center;
gap: 4px;
}
`}
</style>

2
docs/snippets/angular/build-storybook-production-mode.with-builder.js.mdx
View File

@ -1,6 +1,6 @@
```shell
# Builds Storybook with Angular's custom builder
# See https://storybook.js.org/docs/get-started/install
# See https://storybook.js.org/docs/get-started/angular
# to learn how to create the custom builder
ng run my-project:build-storybook
```

1
docs/toc.js
View File

@ -2,7 +2,6 @@ module.exports = {
toc: [
{
pathSegment: 'get-started',
redirectPath: 'get-started/install',
title: 'Get started',
type: 'heading',
children: [

2
docs/writing-docs/index.md
View File

@ -9,7 +9,7 @@ Storybook gives you tools to expand this essential documentation with prose and
![Docs page](./docs-completed.png)
If you're including Storybook in your project for the [first time](../get-started/install.md), we provide you with a [documentation page](./autodocs.md) ("Autodocs" for short), positioned near your stories. It's a baseline template automatically generated, listing your existing stories and relevant metadata.
If you're including Storybook in your project for the [first time](../get-started/index.md), we provide you with a [documentation page](./autodocs.md) ("Autodocs" for short), positioned near your stories. It's a baseline template automatically generated, listing your existing stories and relevant metadata.
Additionally, you can customize this template if needed or create free-form pages for each component using [MDX](./mdx.md). In both cases, you’ll use Doc Blocks as the building blocks to create full-featured documentation.

1
scripts/package.json
View File

@ -113,6 +113,7 @@
"boxen": "^7.1.1",
"browser-assert": "^1.2.1",
"chalk": "^4.1.0",
"chromatic": "^11.0.0",
"codecov": "^3.8.1",
"commander": "^6.2.1",
"cross-env": "^7.0.3",

20
scripts/yarn.lock
View File

@ -2760,6 +2760,7 @@ __metadata:
boxen: "npm:^7.1.1"
browser-assert: "npm:^1.2.1"
chalk: "npm:^4.1.0"
chromatic: "npm:^11.0.0"
codecov: "npm:^3.8.1"
commander: "npm:^6.2.1"
cross-env: "npm:^7.0.3"
@ -5206,6 +5207,25 @@ __metadata:
languageName: node
linkType: hard
"chromatic@npm:^11.0.0":
version: 11.0.0
resolution: "chromatic@npm:11.0.0"
peerDependencies:
"@chromatic-com/cypress": ^0.5.2 || ^1.0.0
"@chromatic-com/playwright": ^0.5.2 || ^1.0.0
peerDependenciesMeta:
"@chromatic-com/cypress":
optional: true
"@chromatic-com/playwright":
optional: true
bin:
chroma: dist/bin.js
chromatic: dist/bin.js
chromatic-cli: dist/bin.js
checksum: edd92b3fb370c8d358cd587392686e83af34aec0e5d6592bfc637d6b6c1f670f3910ff572182192dcf1adf8e34384f785597dcdcb89196482f0c6fa55547d1bf
languageName: node
linkType: hard
"ci-info@npm:^2.0.0":
version: 2.0.0
resolution: "ci-info@npm:2.0.0"