From 22164c1ad49780ac73dac62d30da211d27c326dd Mon Sep 17 00:00:00 2001 From: Ryan DeBeasi Date: Fri, 18 Oct 2024 10:25:04 -0400 Subject: [PATCH 01/12] Update docs to cover changes discussed in #22674 --- MIGRATION.md | 38 ++++++++++++++++++++++++-------------- 1 file changed, 24 insertions(+), 14 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index d63cd568816f..1aa43e260542 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -105,17 +105,17 @@ - [Tab addons cannot manually route, Tool addons can filter their visibility via tabId](#tab-addons-cannot-manually-route-tool-addons-can-filter-their-visibility-via-tabid) - [Removed `config` preset](#removed-config-preset-1) - [From version 7.5.0 to 7.6.0](#from-version-750-to-760) - - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated) - - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated) - - [typescript.skipBabel deprecated](#typescriptskipbabel-deprecated) - - [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop) - - [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react) + - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated) + - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated) + - [typescript.skipBabel deprecated](#typescriptskipbabel-deprecated) + - [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop) + - [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react) - [From version 7.4.0 to 7.5.0](#from-version-740-to-750) - - [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated) - - [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers) + - [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated) + - [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers) - [From version 7.0.0 to 7.2.0](#from-version-700-to-720) - - [Addon API is more type-strict](#addon-api-is-more-type-strict) - - [Addon-controls hideNoControlsWarning parameter is deprecated](#addon-controls-hidenocontrolswarning-parameter-is-deprecated) + - [Addon API is more type-strict](#addon-api-is-more-type-strict) + - [Addon-controls hideNoControlsWarning parameter is deprecated](#addon-controls-hidenocontrolswarning-parameter-is-deprecated) - [From version 6.5.x to 7.0.0](#from-version-65x-to-700) - [7.0 breaking changes](#70-breaking-changes) - [Dropped support for Node 15 and below](#dropped-support-for-node-15-and-below) @@ -141,7 +141,7 @@ - [Deploying build artifacts](#deploying-build-artifacts) - [Dropped support for file URLs](#dropped-support-for-file-urls) - [Serving with nginx](#serving-with-nginx) - - [Ignore story files from node\_modules](#ignore-story-files-from-node_modules) + - [Ignore story files from node_modules](#ignore-story-files-from-node_modules) - [7.0 Core changes](#70-core-changes) - [7.0 feature flags removed](#70-feature-flags-removed) - [Story context is prepared before for supporting fine grained updates](#story-context-is-prepared-before-for-supporting-fine-grained-updates) @@ -155,7 +155,7 @@ - [Addon-interactions: Interactions debugger is now default](#addon-interactions-interactions-debugger-is-now-default) - [7.0 Vite changes](#70-vite-changes) - [Vite builder uses Vite config automatically](#vite-builder-uses-vite-config-automatically) - - [Vite cache moved to node\_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook) + - [Vite cache moved to node_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook) - [7.0 Webpack changes](#70-webpack-changes) - [Webpack4 support discontinued](#webpack4-support-discontinued) - [Babel mode v7 exclusively](#babel-mode-v7-exclusively) @@ -167,6 +167,7 @@ - [Angular: Drop support for calling Storybook directly](#angular-drop-support-for-calling-storybook-directly) - [Angular: Application providers and ModuleWithProviders](#angular-application-providers-and-modulewithproviders) - [Angular: Removed legacy renderer](#angular-removed-legacy-renderer) + - [Angular: initializer functions](#angular-initializer-functions) - [Next.js: use the `@storybook/nextjs` framework](#nextjs-use-the-storybooknextjs-framework) - [SvelteKit: needs the `@storybook/sveltekit` framework](#sveltekit-needs-the-storybooksveltekit-framework) - [Vue3: replaced app export with setup](#vue3-replaced-app-export-with-setup) @@ -205,7 +206,7 @@ - [Dropped addon-docs manual babel configuration](#dropped-addon-docs-manual-babel-configuration) - [Dropped addon-docs manual configuration](#dropped-addon-docs-manual-configuration) - [Autoplay in docs](#autoplay-in-docs) - - [Removed STORYBOOK\_REACT\_CLASSES global](#removed-storybook_react_classes-global) + - [Removed STORYBOOK_REACT_CLASSES global](#removed-storybook_react_classes-global) - [7.0 Deprecations and default changes](#70-deprecations-and-default-changes) - [storyStoreV7 enabled by default](#storystorev7-enabled-by-default) - [`Story` type deprecated](#story-type-deprecated) @@ -430,7 +431,7 @@ These APIs allowed addons to render arbitrary content in the Storybook sidebar. > [!NOTE] > You need to set the feature flag `backgroundsStoryGlobals` to `true` in your `.storybook/main.ts` to use the new format and set the value with `globals`. -> +> > See here how to set feature flags: https://storybook.js.org/docs/api/main-config/main-config-features The `addon-backgrounds` addon now uses a new format for configuring its list of selectable backgrounds. @@ -476,7 +477,7 @@ This locks that story to the `twitter` background, it cannot be changed by the a > [!NOTE] > You need to set the feature flag `viewportStoryGlobals` to `true` in your `.storybook/main.ts` to use the new format and set the value with `globals`. -> +> > See here how to set feature flags: https://storybook.js.org/docs/api/main-config/main-config-features The `addon-viewport` addon now uses a new format for configuring its list of selectable viewports. @@ -2579,6 +2580,15 @@ Please visit https://angular.io/guide/standalone-components#configuring-dependen The `parameters.angularLegacyRendering` option is removed. You cannot use the old legacy renderer anymore. +#### Angular: initializer functions + +Initializer functions that use the `APP_INITIALIZER` token only run when Angular components are rendered. To ensure that an initailizer runs whether or not Angular components are rendered, call the function inside `preview.js`: + +```js +myCustomInitializer(); +export default preview; +``` + #### Next.js: use the `@storybook/nextjs` framework In Storybook 7.0 we introduced a convenient package that provides an out of the box experience for Next.js projects: `@storybook/nextjs`. Please see the [following resource](./code/frameworks/nextjs/README.md#getting-started) to get started with it. From 5667488ef3f7ebbfa12392b54f34ef89d66913d5 Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Sun, 17 Nov 2024 16:46:37 +0000 Subject: [PATCH 02/12] Starter documentation and snippet fixes --- code/addons/docs/docs/theming.md | 2 +- ...l-storybook-website-dropdown-optimized.mp4 | Bin 0 -> 2214330 bytes ...l-storybook-website-dropdown-optimized.png | Bin 189411 -> 0 bytes .../add-localize-package-to-polyfills.md | 4 - .../addon-actions-action-function.md | 1 - docs/_snippets/addon-backgrounds-grid.md | 1 - .../addon-consume-and-update-globaltype.md | 1 - docs/_snippets/addon-consume-globaltype.md | 1 - docs/_snippets/addon-highlight-reset.md | 1 - docs/_snippets/addon-test-install.md | 2 +- docs/_snippets/angular-install.md | 1 - .../angular-project-compodoc-config.md | 1 - .../api-doc-block-argtypes-parameter.md | 1 - .../api-doc-block-canvas-parameter.md | 1 - .../api-doc-block-controls-parameter.md | 1 - .../api-doc-block-description-example.md | 25 +- .../api-doc-block-source-parameter.md | 1 - .../api-doc-block-story-parameter.md | 1 - docs/_snippets/apollo-module.md | 38 --- docs/_snippets/apollo-wrapper-component.md | 98 ------ docs/_snippets/arg-types-control.md | 1 - docs/_snippets/arg-types-default-value.md | 1 - docs/_snippets/arg-types-description.md | 1 - docs/_snippets/arg-types-if.md | 1 - docs/_snippets/arg-types-in-meta.md | 1 - docs/_snippets/arg-types-in-preview.md | 1 - docs/_snippets/arg-types-mapping.md | 1 - docs/_snippets/arg-types-name.md | 1 - docs/_snippets/arg-types-options.md | 1 - docs/_snippets/arg-types-table.md | 1 - docs/_snippets/arg-types-type.md | 1 - docs/_snippets/args-in-preview.md | 1 - docs/_snippets/args-usage-with-addons.md | 1 - docs/_snippets/before-each-in-preview.md | 9 +- .../build-storybook-production-mode.md | 1 - .../button-component-with-proptypes.md | 11 +- docs/_snippets/button-group-story.md | 6 +- docs/_snippets/button-implementation.md | 21 +- .../button-story-action-event-handle.md | 1 - .../button-story-argtypes-with-categories.md | 1 - ...ory-baseline-with-satisfies-story-level.md | 1 - .../button-story-baseline-with-satisfies.md | 1 - .../button-story-click-handler-args.md | 7 +- .../button-story-click-handler-simple-docs.md | 14 - docs/_snippets/button-story-click-handler.md | 6 +- docs/_snippets/button-story-default-export.md | 1 - docs/_snippets/button-story-disable-addon.md | 1 - docs/_snippets/button-story-grouped.md | 1 - docs/_snippets/button-story-hoisted.md | 1 - .../button-story-hypothetical-example.md | 1 - .../button-story-matching-argtypes.md | 1 - .../button-story-onclick-action-spy.md | 1 - docs/_snippets/button-story-using-args.md | 6 +- docs/_snippets/button-story-with-args.md | 6 +- .../_snippets/button-story-with-parameters.md | 1 - docs/_snippets/button-story-with-sample.md | 1 - docs/_snippets/chromatic-github-action.md | 9 +- docs/_snippets/chromatic-storybook-add.md | 1 - docs/_snippets/compodoc-install.md | 1 - docs/_snippets/component-cypress-test.md | 1 - docs/_snippets/component-playwright-test.md | 1 - docs/_snippets/component-story-auto-title.md | 1 - .../component-story-figma-integration.md | 1 - .../component-story-highlight-addon.md | 1 - ...omponent-story-static-asset-with-import.md | 6 +- .../component-story-with-accessibility.md | 6 +- ...onent-story-with-custom-render-function.md | 1 - ...ponent-styled-variables-object-notation.md | 1 - ...nent-styled-variables-template-literals.md | 1 - .../component-test-with-testing-library.md | 4 +- ...gure-mock-provider-with-story-parameter.md | 1 - .../csf-2-example-primary-dark-story.md | 3 +- docs/_snippets/csf-2-example-starter.md | 23 +- docs/_snippets/csf-2-example-story.md | 23 +- docs/_snippets/csf-2-example-title.md | 3 +- docs/_snippets/csf-3-example-auto-title.md | 3 +- .../_snippets/csf-3-example-default-render.md | 3 +- .../csf-3-example-primary-dark-story.md | 5 +- docs/_snippets/csf-3-example-render.md | 23 +- docs/_snippets/csf-3-example-starter.md | 57 +++- docs/_snippets/csf-3-example-title.md | 38 ++- docs/_snippets/document-screen-fetch.md | 21 +- .../_snippets/document-screen-with-graphql.md | 105 ++++++- .../_snippets/document-screen-with-grapqhl.md | 94 ------ docs/_snippets/foo-bar-baz-story.md | 1 - docs/_snippets/ghp-github-action.md | 11 +- .../_snippets/highlight-addon-custom-style.md | 1 - docs/_snippets/histogram-story.md | 6 +- .../init-command-custom-package-manager.md | 3 +- .../init-command-manual-framework.md | 3 +- docs/_snippets/init-command.md | 3 +- docs/_snippets/list-story-reuse-data.md | 7 +- docs/_snippets/list-story-template.md | 7 +- docs/_snippets/list-story-unchecked.md | 7 +- .../list-story-with-sub-components.md | 91 ------ .../list-story-with-subcomponents.md | 90 ++++++ .../list-story-with-unchecked-children.md | 1 - docs/_snippets/loader-story.md | 1 - docs/_snippets/main-config-addons.md | 1 - docs/_snippets/main-config-babel.md | 1 - .../main-config-builder-custom-config.md | 1 - docs/_snippets/main-config-core-builder.md | 1 - .../main-config-core-cross-origin-isolated.md | 1 - .../main-config-core-disable-project-json.md | 1 - .../main-config-core-disable-telemetry.md | 1 - ...onfig-core-disable-update-notifications.md | 1 - ...in-config-core-disable-webpack-defaults.md | 1 - .../main-config-core-enable-crash-reports.md | 1 - docs/_snippets/main-config-docs-autodocs.md | 1 - .../main-config-docs-default-name.md | 1 - docs/_snippets/main-config-docs-docs-mode.md | 1 - docs/_snippets/main-config-env.md | 1 - ...ain-config-features-arg-type-targets-v7.md | 1 - ...ig-features-legacy-decorator-file-order.md | 1 - docs/_snippets/main-config-framework.md | 1 - .../main-config-indexers-jsonstories.md | 1 - docs/_snippets/main-config-indexers-title.md | 1 - docs/_snippets/main-config-indexers.md | 1 - docs/_snippets/main-config-log-level.md | 1 - docs/_snippets/main-config-manager-head.md | 1 - docs/_snippets/main-config-preview-body.md | 1 - docs/_snippets/main-config-preview-head.md | 1 - docs/_snippets/main-config-preview.md | 1 - docs/_snippets/main-config-refs-disable.md | 1 - .../main-config-refs-with-function.md | 1 - .../main-config-static-dirs-with-object.md | 1 - docs/_snippets/main-config-static-dirs.md | 1 - docs/_snippets/main-config-stories-ordered.md | 1 - .../main-config-stories-with-logic.md | 1 - .../main-config-stories-with-object.md | 1 - docs/_snippets/main-config-stories.md | 1 - .../main-config-swc-jsx-transform.md | 1 - docs/_snippets/main-config-swc.md | 1 - .../main-config-test-disable-autodocs.md | 1 - .../main-config-test-disable-blocks.md | 1 - .../main-config-test-disable-docgen.md | 1 - .../_snippets/main-config-test-disable-mdx.md | 1 - .../main-config-test-disable-sourcemaps.md | 1 - .../main-config-test-disable-treeshaking.md | 1 - .../main-config-typescript-check-options.md | 1 - .../_snippets/main-config-typescript-check.md | 1 - ...escript-react-docgen-typescript-options.md | 1 - .../main-config-typescript-react-docgen.md | 1 - .../main-config-typescript-skip-compiler.md | 1 - docs/_snippets/main-config-typical.md | 1 - docs/_snippets/main-config-vite-final-env.md | 1 - docs/_snippets/main-config-vite-final.md | 1 - docs/_snippets/main-config-webpack-final.md | 1 - .../mock-context-container-global.md | 5 +- .../mock-context-container-provider.md | 1 - docs/_snippets/mock-context-container.md | 1 - docs/_snippets/mock-context-create.md | 1 - docs/_snippets/mock-context-in-use.md | 1 - docs/_snippets/mock-provider-in-preview.md | 1 - docs/_snippets/module-aliases-config.md | 1 - .../msw-addon-configure-handlers-graphql.md | 254 ++++++++++++++- docs/_snippets/msw-addon-initialize.md | 1 - docs/_snippets/msw-addon-install.md | 1 - docs/_snippets/msw-generate-service-worker.md | 7 +- docs/_snippets/multiple-stories-test.md | 4 +- docs/_snippets/my-component-env-var-config.md | 1 - docs/_snippets/my-component-exclude-tags.md | 1 - docs/_snippets/my-component-include-tags.md | 1 - docs/_snippets/my-component-skip-tags.md | 1 - .../my-component-story-import-json.md | 1 - .../my-component-story-mandatory-export.md | 1 - .../my-component-story-use-globaltype.md | 1 - .../my-component-story-with-nonstory.md | 1 - .../my-component-story-with-storyname.md | 1 - .../_snippets/nextjs-app-directory-in-meta.md | 1 - .../nextjs-app-directory-in-preview.md | 1 - docs/_snippets/nextjs-cache-mock.md | 1 - docs/_snippets/nextjs-configure-svgr.md | 1 - docs/_snippets/nextjs-headers-mock.md | 1 - docs/_snippets/nextjs-image-static-dirs.md | 1 - docs/_snippets/nextjs-install.md | 1 - docs/_snippets/nextjs-navigation-mock.md | 1 - ...egments-for-use-params-override-in-meta.md | 1 - ...js-navigation-segments-override-in-meta.md | 1 - docs/_snippets/nextjs-remove-addons.md | 1 - docs/_snippets/nextjs-router-mock.md | 1 - docs/_snippets/other-foo-bar-story.md | 1 - .../_snippets/page-story-args-within-story.md | 1 - docs/_snippets/page-story-slots.md | 6 +- .../page-story-with-args-composition.md | 1 - docs/_snippets/page-story.md | 6 +- docs/_snippets/parameters-in-preview.md | 1 - .../portable-stories-jest-compose-stories.md | 1 - ...le-stories-jest-set-project-annotations.md | 10 +- .../portable-stories-playwright-ct.md | 1 - ...ct-test-scripts-optional-config-scripts.md | 8 - docs/_snippets/react-vite-add-framework.md | 1 - docs/_snippets/react-vite-install.md | 1 - .../_snippets/react-webpack5-add-framework.md | 1 - docs/_snippets/react-webpack5-install.md | 1 - docs/_snippets/reuse-args-test.md | 5 +- docs/_snippets/rsc-feature-flag.md | 1 - docs/_snippets/rsc-parameter-in-meta.md | 1 - docs/_snippets/seo-description.md | 5 +- docs/_snippets/seo-noindex.md | 5 +- docs/_snippets/simple-page-implementation.md | 13 +- docs/_snippets/single-story-test.md | 4 +- docs/_snippets/storybook-add-command.md | 1 - .../storybook-addon-a11y-global-config.md | 1 - .../storybook-addon-actions-install.md | 1 - ...ybook-addon-compiler-babel-auto-install.md | 1 - ...orybook-addon-compiler-swc-auto-install.md | 1 - ...torybook-addon-controls-custom-matchers.md | 1 - docs/_snippets/storybook-addon-css-example.md | 1 - docs/_snippets/storybook-addon-css-helpers.md | 1 - .../storybook-addon-disable-addon.md | 1 - .../storybook-addon-essentials-install.md | 1 - ...k-addon-interactions-addon-full-install.md | 1 - ...ybook-addon-load-external-addons-preset.md | 1 - .../storybook-addon-manager-initial-state.md | 1 - .../storybook-addon-panel-example.md | 1 - .../storybook-addon-panel-initial.md | 1 - .../storybook-addon-preset-example.md | 1 - docs/_snippets/storybook-addon-release.md | 1 - .../_snippets/storybook-addon-run-dev-mode.md | 1 - docs/_snippets/storybook-addon-tab-example.md | 1 - ...rybook-addon-themes-classname-decorator.md | 1 - ...k-addon-themes-data-attribute-decorator.md | 1 - ...ook-addon-themes-jsx-provider-decorator.md | 1 - .../storybook-addon-tool-initial-setup.md | 1 - .../storybook-addon-toolbar-example.md | 1 - .../storybook-addon-toolkit-panel-example.md | 42 --- .../storybook-addon-toolkit-tab-example.md | 21 -- ...storybook-addon-toolkit-toolbar-example.md | 39 --- .../storybook-addon-toolkit-types.md | 103 +++++++ docs/_snippets/storybook-addon-use-global.md | 1 - ...storybook-addons-api-disablequeryparams.md | 1 - .../storybook-addons-api-getchannel.md | 1 - .../storybook-addons-api-getqueryparam.md | 1 - .../storybook-addons-api-geturlstate.md | 1 - .../_snippets/storybook-addons-api-imports.md | 1 - .../storybook-addons-api-makedecorator.md | 1 - docs/_snippets/storybook-addons-api-on.md | 1 - .../storybook-addons-api-register.md | 1 - ...torybook-addons-api-selectincurrentkind.md | 1 - .../storybook-addons-api-selectstory.md | 1 - .../storybook-addons-api-setqueryparams.md | 1 - .../storybook-addons-api-useaddonstate.md | 1 - docs/_snippets/storybook-addons-api-useapi.md | 1 - .../storybook-addons-api-usechannel.md | 1 - .../storybook-addons-api-useglobal.md | 1 - .../storybook-addons-api-useparameter.md | 1 - .../storybook-addons-api-usestorybookstate.md | 1 - .../storybook-addons-local-preset.md | 1 - .../storybook-addons-preset-babelDefault.md | 1 - .../storybook-addons-preset-preview.md | 1 - .../storybook-addons-preset-viteFinal.md | 5 +- .../storybook-addons-preset-webpackFinal.md | 1 - docs/_snippets/storybook-addons-preset.md | 1 - ...book-addons-root-preset-manager-entries.md | 5 +- ...-addons-root-preset-preview-annotations.md | 1 - .../_snippets/storybook-addons-root-preset.md | 1 - .../storybook-args-url-params-converted.md | 1 - .../storybook-argtypes-with-addon.md | 1 - .../storybook-auto-docs-full-config.md | 1 - .../storybook-auto-docs-main-mdx-config.md | 1 - docs/_snippets/storybook-automigrate.md | 1 - .../storybook-babel-configuration-example.md | 1 - ...rybook-backgrounds-addon-default-params.md | 1 - .../storybook-backgrounds-preset-config.md | 1 - docs/_snippets/storybook-build-test-flag.md | 1 - .../storybook-builder-api-build-server.md | 1 - ...ybook-builder-api-configuration-options.md | 1 - .../storybook-builder-api-dev-server.md | 1 - .../storybook-builder-api-interface.md | 1 - docs/_snippets/storybook-builder-api-mdx.md | 1 - .../storybook-builder-api-preview-exports.md | 1 - .../storybook-builder-api-shutdown-server.md | 1 - .../storybook-canvas-doc-block-story.md | 1 - .../storybook-client-globals-example-file.md | 1 - docs/_snippets/storybook-client-preview.md | 1 - .../storybook-component-layout-param.md | 1 - docs/_snippets/storybook-config-layout.md | 1 - ...storybook-coverage-addon-config-options.md | 1 - .../storybook-coverage-addon-install.md | 7 +- .../storybook-coverage-addon-registration.md | 25 -- .../storybook-coverage-report-lcov.md | 1 - .../storybook-coverage-report-vue.md | 5 +- .../storybook-csf-3-auto-title-redundant.md | 1 - .../storybook-custom-manager-head.md | 1 - docs/_snippets/storybook-debug-webpack-dev.md | 1 - .../_snippets/storybook-debug-webpack-prod.md | 1 - .../storybook-disable-telemetry-env.md | 3 +- .../storybook-disable-telemetry-flag.md | 1 - docs/_snippets/storybook-doctor.md | 1 - docs/_snippets/storybook-ember-cli-build.md | 1 - .../storybook-extract-specific-version.md | 3 +- .../storybook-figma-addon-install.md | 7 +- ...storybook-fix-imports-autodocs-monorepo.md | 1 - .../storybook-framework-render-function.md | 1 - .../_snippets/storybook-generated-argtypes.md | 1 - docs/_snippets/storybook-init-v7.md | 3 +- ...orybook-interactions-addon-registration.md | 1 - .../storybook-interactions-play-function.md | 1 - .../storybook-interactions-step-function.md | 1 - .../storybook-main-advanced-config-example.md | 1 - .../storybook-main-auto-title-custom.md | 1 - .../storybook-main-config-remark-options.md | 1 - .../storybook-main-configuration-src-dir.md | 5 +- .../_snippets/storybook-main-disable-addon.md | 1 - .../storybook-main-disable-telemetry.md | 5 +- .../storybook-main-extend-ts-config.md | 1 - .../storybook-main-figma-addon-register.md | 26 -- ...book-main-fix-imports-autodocs-monorepo.md | 1 - ...-main-full-individual-essentials-config.md | 1 - docs/_snippets/storybook-main-js-md-files.md | 1 - ...rybook-main-pnpm-with-module-resolution.md | 1 - docs/_snippets/storybook-main-preview-head.md | 1 - docs/_snippets/storybook-main-prop-filter.md | 1 - .../storybook-main-react-docgen-typescript.md | 1 - docs/_snippets/storybook-main-ref-local.md | 1 - .../storybook-main-register-addon.md | 1 - ...torybook-main-register-essentials-addon.md | 1 - .../storybook-main-register-example-addon.md | 1 - ...-main-register-individual-actions-addon.md | 1 - ...book-main-register-presets-managerentry.md | 1 - .../storybook-main-simplified-config.md | 1 - ...main-ts-module-resolution-atsign-import.md | 1 - .../storybook-main-ts-module-resolution.md | 1 - .../storybook-main-use-manager-entries.md | 1 - .../storybook-main-using-existing-config.md | 1 - .../storybook-main-versioned-webpack.md | 1 - .../storybook-main-webpack-options.md | 1 - .../storybook-main-webpack-preset-config.md | 1 - .../storybook-main-webpack5-fsCache.md | 1 - ...storybook-main-webpack5-lazyCompilation.md | 1 - docs/_snippets/storybook-main-webpack5.md | 1 - .../storybook-main-webpackfinal-example.md | 1 - .../storybook-manager-custom-theme.md | 1 - .../_snippets/storybook-manager-dark-theme.md | 1 - .../storybook-manager-disable-roots.md | 1 - .../storybook-manager-render-label-stories.md | 1 - .../storybook-mdx-template-with-prop.md | 7 +- docs/_snippets/storybook-merged-argtypes.md | 1 - .../_snippets/storybook-migrate-csf-2-to-3.md | 1 - .../_snippets/storybook-migrate-mdx-to-csf.md | 1 - .../storybook-migrate-stories-of-to-csf.md | 1 - .../storybook-preset-full-config-object.md | 1 - ...preview-auto-docs-custom-docs-container.md | 1 - ...k-preview-auto-docs-custom-mdx-template.md | 1 - ...view-auto-docs-custom-template-function.md | 1 - ...review-auto-docs-override-mdx-container.md | 1 - ...rybook-preview-auto-docs-override-theme.md | 1 - .../storybook-preview-body-example.md | 5 +- .../storybook-preview-body-font-size.md | 5 +- .../storybook-preview-compodoc-config.md | 1 - ...storybook-preview-configure-globaltypes.md | 1 - .../storybook-preview-custom-canvas.md | 1 - .../storybook-preview-custom-code-renderer.md | 1 - ...torybook-preview-custom-elements-config.md | 1 - .../storybook-preview-custom-metadata.md | 1 - .../storybook-preview-custom-params.md | 1 - .../_snippets/storybook-preview-custom-toc.md | 1 - ...review-doc-blocks-controls-exclude-prop.md | 1 - .../storybook-preview-docs-dark-theme.md | 1 - .../storybook-preview-empty-sort-object.md | 1 - .../_snippets/storybook-preview-enable-toc.md | 1 - .../storybook-preview-expanded-controls.md | 1 - ...rybook-preview-extended-theme-variables.md | 1 - .../storybook-preview-global-decorator.md | 1 - .../storybook-preview-global-loader.md | 1 - .../storybook-preview-global-parameters.md | 1 - .../storybook-preview-head-example.md | 16 +- ...ybook-preview-head-import-global-styles.md | 9 +- .../storybook-preview-import-global-styles.md | 1 - .../storybook-preview-layout-param.md | 1 - .../storybook-preview-locales-globaltype.md | 1 - .../storybook-preview-matching-argtypes.md | 1 - .../storybook-preview-optout-inline.md | 1 - ...ybook-preview-parameters-color-swatches.md | 1 - .../storybook-preview-prepareforinline.md | 1 - ...book-preview-register-language-globally.md | 1 - .../storybook-preview-sort-function.md | 1 - .../storybook-preview-use-global-type.md | 7 +- ...torybook-preview-with-angular-polyfills.md | 21 -- ...ok-preview-with-hoc-component-decorator.md | 50 --- ...torybook-preview-with-library-decorator.md | 82 ++++- ...preview-with-ordered-pages-and-wildcard.md | 1 - .../storybook-preview-with-ordered-pages.md | 1 - .../storybook-read-environment-variables.md | 1 - docs/_snippets/storybook-remove-command.md | 1 - docs/_snippets/storybook-run-dev.md | 1 - .../storybook-server-framework-options.md | 1 - docs/_snippets/storybook-server-options.md | 1 - docs/_snippets/storybook-start-dev-server.md | 1 - .../_snippets/storybook-story-layout-param.md | 1 - .../storybook-storyloading-with-directory.md | 1 - .../storybook-storysource-manager-entries.md | 1 - .../storybook-telemetry-crash-report-event.md | 1 - ...ook-telemetry-main-enable-crash-reports.md | 5 +- .../storybook-telemetry-preview-event.md | 1 - ...etry-storybook-enable-crash-reports-env.md | 3 + ...ry-storybook-enable-crash-reports-flag.md} | 5 - docs/_snippets/storybook-test-fn-mock-spy.md | 4 +- .../storybook-test-mock-file-example.md | 1 - .../storybook-test-mock-return-value.md | 5 +- .../storybook-test-with-storyname.md | 1 - .../storybook-theme-example-variables.md | 1 - .../storybook-theming-packages-install.md | 1 - .../storybook-theming-styled-import.md | 1 - .../_snippets/storybook-upgrade-prerelease.md | 1 - .../storybook-upgrade-to-prior-major.md | 1 - docs/_snippets/storybook-upgrade.md | 1 - .../storybook-vite-builder-install.md | 1 - .../storybook-vite-builder-jest-mock.md | 5 +- .../storybook-vite-builder-ts-configure.md | 1 - docs/_snippets/subpath-imports-config.md | 1 - docs/_snippets/svelte-csf-addon-install.md | 1 - docs/_snippets/svelte-vite-add-framework.md | 1 - docs/_snippets/svelte-vite-install.md | 1 - .../svelte-webpack5-add-framework.md | 1 - docs/_snippets/svelte-webpack5-install.md | 1 - docs/_snippets/sveltekit-add-framework.md | 1 - docs/_snippets/sveltekit-install.md | 1 - docs/_snippets/tags-autodocs-in-preview.md | 1 - docs/_snippets/test-runner-a11y-config.md | 1 - docs/_snippets/test-runner-a11y-disable.md | 1 - docs/_snippets/test-runner-auth.md | 1 - docs/_snippets/test-runner-axe-playwright.md | 1 - .../test-runner-config-serializer.md | 1 - .../test-runner-config-snapshot-resolver.md | 1 - docs/_snippets/test-runner-coverage.md | 1 - .../test-runner-custom-page-viewport.md | 5 +- .../test-runner-custom-snapshot-resolver.md | 1 - .../test-runner-custom-snapshot-serializer.md | 1 - .../test-runner-dom-snapshot-testing.md | 1 - docs/_snippets/test-runner-eject-config.md | 1 - .../test-runner-execute-with-flags.md | 1 - docs/_snippets/test-runner-execute.md | 1 - docs/_snippets/test-runner-helper-function.md | 1 - docs/_snippets/test-runner-hooks-example.md | 1 - .../test-runner-image-snapshot-testing.md | 1 - docs/_snippets/test-runner-install.md | 1 - .../test-runner-local-build-workflow.md | 7 +- docs/_snippets/test-runner-no-index-json.md | 1 - ...nner-snapshot-resolver-custom-directory.md | 1 - docs/_snippets/test-runner-tags-include.md | 1 - docs/_snippets/test-runner-waitpageready.md | 1 - .../test-runner-with-deploy-event-workflow.md | 7 +- docs/_snippets/test-runner-with-index-json.md | 1 - docs/_snippets/typed-csf-file.md | 1 - .../upgrade-command-specific-version.md | 3 +- .../vue-jest-optional-config-scripts.md | 16 - docs/_snippets/vue3-vite-add-framework.md | 1 - docs/_snippets/vue3-vite-install.md | 1 - docs/_snippets/vue3-webpack5-add-framework.md | 1 - docs/_snippets/vue3-webpack5-install.md | 1 - .../web-components-vite-add-framework.md | 1 - docs/_snippets/web-components-vite-install.md | 1 - .../web-components-webpack5-add-framework.md | 1 - .../web-components-webpack5-install.md | 1 - docs/_snippets/your-component.md | 8 +- docs/_snippets/your-theme.md | 1 - docs/addons/addon-knowledge-base.mdx | 4 +- docs/addons/addon-migration-guide.mdx | 2 +- docs/addons/addon-types.mdx | 6 +- docs/addons/addons-api.mdx | 2 +- docs/addons/integration-catalog.mdx | 4 +- docs/addons/writing-addons.mdx | 14 +- docs/api/csf.mdx | 18 +- docs/api/doc-blocks/doc-block-argtypes.mdx | 8 +- docs/api/doc-blocks/doc-block-canvas.mdx | 18 +- .../api/doc-blocks/doc-block-colorpalette.mdx | 4 +- docs/api/doc-blocks/doc-block-controls.mdx | 8 +- docs/api/doc-blocks/doc-block-description.mdx | 15 +- docs/api/doc-blocks/doc-block-icongallery.mdx | 35 ++- docs/api/doc-blocks/doc-block-markdown.mdx | 8 +- docs/api/doc-blocks/doc-block-meta.mdx | 12 +- docs/api/doc-blocks/doc-block-primary.mdx | 4 +- docs/api/doc-blocks/doc-block-source.mdx | 12 +- docs/api/doc-blocks/doc-block-stories.mdx | 4 +- docs/api/doc-blocks/doc-block-story.mdx | 12 +- docs/api/doc-blocks/doc-block-subtitle.mdx | 4 +- docs/api/doc-blocks/doc-block-title.mdx | 4 +- docs/api/doc-blocks/doc-block-typeset.mdx | 4 +- docs/api/doc-blocks/doc-block-unstyled.mdx | 2 +- docs/api/doc-blocks/doc-block-useof.mdx | 14 +- docs/api/new-frameworks.mdx | 6 +- docs/api/parameters.mdx | 31 +- docs/configure/environment-variables.mdx | 2 +- .../frameworks-feature-support.mdx | 3 +- .../integration/images-and-assets.mdx | 6 +- docs/configure/story-layout.mdx | 2 +- docs/configure/story-rendering.mdx | 3 +- docs/configure/styling-and-css.mdx | 52 ++-- docs/configure/telemetry.mdx | 39 ++- .../user-interface/sidebar-and-urls.mdx | 4 +- docs/contribute/RFC.mdx | 3 +- docs/contribute/code.mdx | 3 +- .../documentation/documentation-updates.mdx | 3 +- .../contribute/documentation/new-snippets.mdx | 290 ++++++++++++++---- docs/contribute/framework.mdx | 5 +- docs/contribute/how-to-reproduce.mdx | 1 + docs/essentials/actions.mdx | 2 +- docs/essentials/interactions.mdx | 16 +- docs/essentials/toolbars-and-globals.mdx | 2 +- docs/faq.mdx | 49 +-- docs/get-started/frameworks/angular.mdx | 35 +-- docs/get-started/frameworks/vue3-vite.mdx | 24 +- docs/get-started/whats-a-story.mdx | 2 +- docs/get-started/why-storybook.mdx | 2 +- docs/sharing/design-integrations.mdx | 10 +- docs/writing-docs/build-documentation.mdx | 4 +- docs/writing-stories/args.mdx | 2 +- .../build-pages-with-storybook.mdx | 4 +- docs/writing-stories/loaders.mdx | 2 +- .../mocking-network-requests.mdx | 4 +- .../naming-components-and-hierarchy.mdx | 8 +- .../stories-for-multiple-components.mdx | 8 +- docs/writing-tests/component-testing.mdx | 6 +- .../stories-in-end-to-end-tests.mdx | 4 +- docs/writing-tests/test-coverage.mdx | 10 +- docs/writing-tests/test-runner.mdx | 4 +- docs/writing-tests/visual-testing.mdx | 3 +- 519 files changed, 1367 insertions(+), 1689 deletions(-) create mode 100644 docs/_assets/contribute/local-storybook-website-dropdown-optimized.mp4 delete mode 100644 docs/_assets/contribute/local-storybook-website-dropdown-optimized.png delete mode 100644 docs/_snippets/add-localize-package-to-polyfills.md delete mode 100644 docs/_snippets/apollo-module.md delete mode 100644 docs/_snippets/apollo-wrapper-component.md delete mode 100644 docs/_snippets/button-story-click-handler-simple-docs.md delete mode 100644 docs/_snippets/document-screen-with-grapqhl.md delete mode 100644 docs/_snippets/list-story-with-sub-components.md delete mode 100644 docs/_snippets/react-test-scripts-optional-config-scripts.md delete mode 100644 docs/_snippets/storybook-addon-toolkit-panel-example.md delete mode 100644 docs/_snippets/storybook-addon-toolkit-tab-example.md delete mode 100644 docs/_snippets/storybook-addon-toolkit-toolbar-example.md create mode 100644 docs/_snippets/storybook-addon-toolkit-types.md delete mode 100644 docs/_snippets/storybook-coverage-addon-registration.md delete mode 100644 docs/_snippets/storybook-main-figma-addon-register.md delete mode 100644 docs/_snippets/storybook-preview-with-angular-polyfills.md delete mode 100644 docs/_snippets/storybook-preview-with-hoc-component-decorator.md create mode 100644 docs/_snippets/storybook-telemetry-storybook-enable-crash-reports-env.md rename docs/_snippets/{storybook-telemetry-storybook-enable-crash-reports.md => storybook-telemetry-storybook-enable-crash-reports-flag.md} (74%) delete mode 100644 docs/_snippets/vue-jest-optional-config-scripts.md diff --git a/code/addons/docs/docs/theming.md b/code/addons/docs/docs/theming.md index f68f55c67c9e..de289ece6137 100644 --- a/code/addons/docs/docs/theming.md +++ b/code/addons/docs/docs/theming.md @@ -44,7 +44,7 @@ The classes correspond to markdown elements (e.g. `sbdocs-title`, `sbdocs-subtit You can style these classes in `.storybook/preview-head.html`. For example, here's how to make the content wider for UHD displays: -```html +```html title=".storybook/preview-head.html" ``` - diff --git a/docs/_snippets/storybook-preview-compodoc-config.md b/docs/_snippets/storybook-preview-compodoc-config.md index 776249642ba2..17d7af9cf4e8 100644 --- a/docs/_snippets/storybook-preview-compodoc-config.md +++ b/docs/_snippets/storybook-preview-compodoc-config.md @@ -20,4 +20,3 @@ const preview: Preview = { export default preview; ``` - diff --git a/docs/_snippets/storybook-preview-configure-globaltypes.md b/docs/_snippets/storybook-preview-configure-globaltypes.md index a5504e518507..bbf1c6dd7af8 100644 --- a/docs/_snippets/storybook-preview-configure-globaltypes.md +++ b/docs/_snippets/storybook-preview-configure-globaltypes.md @@ -75,4 +75,3 @@ const preview: Preview = { export default preview; ``` - diff --git a/docs/_snippets/storybook-preview-custom-canvas.md b/docs/_snippets/storybook-preview-custom-canvas.md index 4f5f90024f3b..05fccc7d5366 100644 --- a/docs/_snippets/storybook-preview-custom-canvas.md +++ b/docs/_snippets/storybook-preview-custom-canvas.md @@ -30,4 +30,3 @@ const preview: Preview = { export default preview; ``` - diff --git a/docs/_snippets/storybook-preview-custom-code-renderer.md b/docs/_snippets/storybook-preview-custom-code-renderer.md index d32357ab45a6..a70653aee1cb 100644 --- a/docs/_snippets/storybook-preview-custom-code-renderer.md +++ b/docs/_snippets/storybook-preview-custom-code-renderer.md @@ -30,4 +30,3 @@ const preview: Preview = { export default preview; ``` - diff --git a/docs/_snippets/storybook-preview-custom-elements-config.md b/docs/_snippets/storybook-preview-custom-elements-config.md index 7d0db859cb9c..8ba526e80655 100644 --- a/docs/_snippets/storybook-preview-custom-elements-config.md +++ b/docs/_snippets/storybook-preview-custom-elements-config.md @@ -38,4 +38,3 @@ const preview: Preview = { export default preview; ``` - diff --git a/docs/_snippets/storybook-preview-custom-metadata.md b/docs/_snippets/storybook-preview-custom-metadata.md index 50e6530eb191..17334b597d4b 100644 --- a/docs/_snippets/storybook-preview-custom-metadata.md +++ b/docs/_snippets/storybook-preview-custom-metadata.md @@ -15,4 +15,3 @@ export default { }, }; ``` - diff --git a/docs/_snippets/storybook-preview-custom-params.md b/docs/_snippets/storybook-preview-custom-params.md index b9c1908beb62..862749b58ccc 100644 --- a/docs/_snippets/storybook-preview-custom-params.md +++ b/docs/_snippets/storybook-preview-custom-params.md @@ -28,4 +28,3 @@ const preview: Preview = { export default preview; ``` - diff --git a/docs/_snippets/storybook-preview-custom-toc.md b/docs/_snippets/storybook-preview-custom-toc.md index c3846775abf1..25ea41c85db4 100644 --- a/docs/_snippets/storybook-preview-custom-toc.md +++ b/docs/_snippets/storybook-preview-custom-toc.md @@ -40,4 +40,3 @@ const preview: Preview = { export default preview; ``` - diff --git a/docs/_snippets/storybook-preview-doc-blocks-controls-exclude-prop.md b/docs/_snippets/storybook-preview-doc-blocks-controls-exclude-prop.md index 08ac32cb8132..5a7a9535a138 100644 --- a/docs/_snippets/storybook-preview-doc-blocks-controls-exclude-prop.md +++ b/docs/_snippets/storybook-preview-doc-blocks-controls-exclude-prop.md @@ -22,4 +22,3 @@ const preview: Preview = { export default preview; ``` - diff --git a/docs/_snippets/storybook-preview-docs-dark-theme.md b/docs/_snippets/storybook-preview-docs-dark-theme.md index 423d1c9cb4d1..a356b6176019 100644 --- a/docs/_snippets/storybook-preview-docs-dark-theme.md +++ b/docs/_snippets/storybook-preview-docs-dark-theme.md @@ -26,4 +26,3 @@ const preview: Preview = { export default preview; ``` - diff --git a/docs/_snippets/storybook-preview-empty-sort-object.md b/docs/_snippets/storybook-preview-empty-sort-object.md index dc73686f2f7a..669f71ed8cef 100644 --- a/docs/_snippets/storybook-preview-empty-sort-object.md +++ b/docs/_snippets/storybook-preview-empty-sort-object.md @@ -30,4 +30,3 @@ const preview: Preview = { export default preview; ``` - diff --git a/docs/_snippets/storybook-preview-enable-toc.md b/docs/_snippets/storybook-preview-enable-toc.md index 0f131ecbab23..a4d0c95e3203 100644 --- a/docs/_snippets/storybook-preview-enable-toc.md +++ b/docs/_snippets/storybook-preview-enable-toc.md @@ -22,4 +22,3 @@ const preview: Preview = { export default preview; ``` - diff --git a/docs/_snippets/storybook-preview-expanded-controls.md b/docs/_snippets/storybook-preview-expanded-controls.md index 522860eda7ed..e168a359868a 100644 --- a/docs/_snippets/storybook-preview-expanded-controls.md +++ b/docs/_snippets/storybook-preview-expanded-controls.md @@ -18,4 +18,3 @@ const preview: Preview = { export default preview; ``` - diff --git a/docs/_snippets/storybook-preview-extended-theme-variables.md b/docs/_snippets/storybook-preview-extended-theme-variables.md index d1ca5e3db5cf..e6df84d48ec4 100644 --- a/docs/_snippets/storybook-preview-extended-theme-variables.md +++ b/docs/_snippets/storybook-preview-extended-theme-variables.md @@ -5,4 +5,3 @@ addonActionsTheme: { BASE_BACKGROUND_COLOR: 'transparent', } ``` - diff --git a/docs/_snippets/storybook-preview-global-decorator.md b/docs/_snippets/storybook-preview-global-decorator.md index 492cb13867d6..041dd4dfd4d7 100644 --- a/docs/_snippets/storybook-preview-global-decorator.md +++ b/docs/_snippets/storybook-preview-global-decorator.md @@ -121,4 +121,3 @@ export default { decorators: [(story) => html`
${story()}
`], }; ``` - diff --git a/docs/_snippets/storybook-preview-global-loader.md b/docs/_snippets/storybook-preview-global-loader.md index 3c84596ad58d..d63d87dc76e7 100644 --- a/docs/_snippets/storybook-preview-global-loader.md +++ b/docs/_snippets/storybook-preview-global-loader.md @@ -22,4 +22,3 @@ const preview: Preview = { export default preview; ``` - diff --git a/docs/_snippets/storybook-preview-global-parameters.md b/docs/_snippets/storybook-preview-global-parameters.md index b9c1908beb62..862749b58ccc 100644 --- a/docs/_snippets/storybook-preview-global-parameters.md +++ b/docs/_snippets/storybook-preview-global-parameters.md @@ -28,4 +28,3 @@ const preview: Preview = { export default preview; ``` - diff --git a/docs/_snippets/storybook-preview-head-example.md b/docs/_snippets/storybook-preview-head-example.md index 3afab4ac7d2d..8b744dd19bdc 100644 --- a/docs/_snippets/storybook-preview-head-example.md +++ b/docs/_snippets/storybook-preview-head-example.md @@ -1,12 +1,13 @@ -```html renderer="common" language="ts" tabTitle="html" -{/* .storybook/preview-head.html */} - -{/* Pull in static files served from your Static directory or the internet */} -{/* Example: `main.js|ts` is configured with staticDirs: ['../public'] and your font is located in the `fonts` directory inside your `public` directory */} +```html filename=".storybook/preview-head.html" renderer="common" language="js" + -{/* Or you can load custom head-tag JavaScript: */} - + ``` - diff --git a/docs/_snippets/storybook-preview-head-import-global-styles.md b/docs/_snippets/storybook-preview-head-import-global-styles.md index aab04dfd4795..c83a7445a864 100644 --- a/docs/_snippets/storybook-preview-head-import-global-styles.md +++ b/docs/_snippets/storybook-preview-head-import-global-styles.md @@ -1,14 +1,11 @@ -```html renderer="common" language="ts" tabTitle="html" -{/* .storybook/preview-head.html */} - -{/* Loads a font from a CDN */} +```html filename=".storybook/preview-head.html" renderer="common" language="ts" tabTitle="html" + -{/* Load your CSS file */} + ``` - diff --git a/docs/_snippets/storybook-preview-import-global-styles.md b/docs/_snippets/storybook-preview-import-global-styles.md index d73c34e4776b..17219d409cda 100644 --- a/docs/_snippets/storybook-preview-import-global-styles.md +++ b/docs/_snippets/storybook-preview-import-global-styles.md @@ -18,4 +18,3 @@ const preview: Preview = { export default preview; ``` - diff --git a/docs/_snippets/storybook-preview-layout-param.md b/docs/_snippets/storybook-preview-layout-param.md index 3e2d7fd520d0..4b6c649d9a83 100644 --- a/docs/_snippets/storybook-preview-layout-param.md +++ b/docs/_snippets/storybook-preview-layout-param.md @@ -18,4 +18,3 @@ const preview: Preview = { export default preview; ``` - diff --git a/docs/_snippets/storybook-preview-locales-globaltype.md b/docs/_snippets/storybook-preview-locales-globaltype.md index d96bf310cc3a..c0928d584a98 100644 --- a/docs/_snippets/storybook-preview-locales-globaltype.md +++ b/docs/_snippets/storybook-preview-locales-globaltype.md @@ -78,4 +78,3 @@ const preview: Preview = { export default preview; ``` - diff --git a/docs/_snippets/storybook-preview-matching-argtypes.md b/docs/_snippets/storybook-preview-matching-argtypes.md index 6d2f2212593e..61e2beae5c28 100644 --- a/docs/_snippets/storybook-preview-matching-argtypes.md +++ b/docs/_snippets/storybook-preview-matching-argtypes.md @@ -18,4 +18,3 @@ const preview: Preview = { export default preview; ``` - diff --git a/docs/_snippets/storybook-preview-optout-inline.md b/docs/_snippets/storybook-preview-optout-inline.md index 81e32f4b4399..60991af50570 100644 --- a/docs/_snippets/storybook-preview-optout-inline.md +++ b/docs/_snippets/storybook-preview-optout-inline.md @@ -24,4 +24,3 @@ const preview: Preview = { export default preview; ``` - diff --git a/docs/_snippets/storybook-preview-parameters-color-swatches.md b/docs/_snippets/storybook-preview-parameters-color-swatches.md index 5029cb279168..a018de4b7a09 100644 --- a/docs/_snippets/storybook-preview-parameters-color-swatches.md +++ b/docs/_snippets/storybook-preview-parameters-color-swatches.md @@ -22,4 +22,3 @@ const preview: Preview = { export default preview; ``` - diff --git a/docs/_snippets/storybook-preview-prepareforinline.md b/docs/_snippets/storybook-preview-prepareforinline.md index e0940ccf9819..443f62a6b1de 100644 --- a/docs/_snippets/storybook-preview-prepareforinline.md +++ b/docs/_snippets/storybook-preview-prepareforinline.md @@ -11,4 +11,3 @@ export default { }, }; ``` - diff --git a/docs/_snippets/storybook-preview-register-language-globally.md b/docs/_snippets/storybook-preview-register-language-globally.md index 4d798c0e46d0..6fb0772bb4a3 100644 --- a/docs/_snippets/storybook-preview-register-language-globally.md +++ b/docs/_snippets/storybook-preview-register-language-globally.md @@ -40,4 +40,3 @@ const preview: Preview = { export default preview; ``` - diff --git a/docs/_snippets/storybook-preview-sort-function.md b/docs/_snippets/storybook-preview-sort-function.md index 6c0d87e7a88a..d55ba7643036 100644 --- a/docs/_snippets/storybook-preview-sort-function.md +++ b/docs/_snippets/storybook-preview-sort-function.md @@ -25,4 +25,3 @@ const preview: Preview = { export default preview; ``` - diff --git a/docs/_snippets/storybook-preview-use-global-type.md b/docs/_snippets/storybook-preview-use-global-type.md index 0f9a8737f699..994fb264a6e4 100644 --- a/docs/_snippets/storybook-preview-use-global-type.md +++ b/docs/_snippets/storybook-preview-use-global-type.md @@ -8,7 +8,7 @@ const preview: Preview = { (story) => `
${story}
`, ({ globals }) => { return { myTheme: globals['theme'] }; - }, + } ), ], }; @@ -143,7 +143,7 @@ const preview: Preview = { export default preview; ``` -```js filename=".storybook/preview.js" renderer="vue" language="js" tabTitle="3" +```js filename=".storybook/preview.js" renderer="vue" language="js" import { setup } from '@storybook/vue3'; import { VApp } from 'vuetify/components'; @@ -176,7 +176,7 @@ const preview = { export default preview; ``` -```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="3" +```ts filename=".storybook/preview.ts" renderer="vue" language="ts" import type { Preview } from '@storybook/vue3'; import { setup } from '@storybook/vue3'; @@ -243,4 +243,3 @@ const preview: Preview = { export default preview; ``` - diff --git a/docs/_snippets/storybook-preview-with-angular-polyfills.md b/docs/_snippets/storybook-preview-with-angular-polyfills.md deleted file mode 100644 index 26dc3eb44ddb..000000000000 --- a/docs/_snippets/storybook-preview-with-angular-polyfills.md +++ /dev/null @@ -1,21 +0,0 @@ -```js filename=".storybook/preview.js" renderer="angular" language="js" -import { setCompodocJson } from '@storybook/addon-docs/angular'; -import docJson from '../documentation.json'; - -import '../src/polyfills'; - -setCompodocJson(docJson); - -export default { - parameters: { - controls: { - matchers: { - color: /(background|color)$/i, - date: /Date$/, - }, - }, - docs: { story: { inline: true } }, - }, -}; -``` - diff --git a/docs/_snippets/storybook-preview-with-hoc-component-decorator.md b/docs/_snippets/storybook-preview-with-hoc-component-decorator.md deleted file mode 100644 index 2b8a1d70b738..000000000000 --- a/docs/_snippets/storybook-preview-with-hoc-component-decorator.md +++ /dev/null @@ -1,50 +0,0 @@ -```js filename=".storybook/preview.js" renderer="vue" language="js" tabTitle="component-3" -import { setup } from '@storybook/vue3'; - -import { library } from '@fortawesome/fontawesome-svg-core'; -import { faPlusSquare as fasPlusSquare } from '@fortawesome/free-solid-svg-icons'; - -import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'; - -setup((app) => { - //👇 Adds the icon to the library so you can use it in your story. - library.add(fasPlusSquare); - app.component('font-awesome-icon', FontAwesomeIcon); -}); - -export default { - decorators: [ - (story) => ({ - components: { story }, - template: '
', - }), - ], -}; -``` - -```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="component-3" -import { setup, Preview } from '@storybook/vue3'; - -import { library } from '@fortawesome/fontawesome-svg-core'; -import { faPlusSquare as fasPlusSquare } from '@fortawesome/free-solid-svg-icons'; - -import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'; - -setup((app) => { - //👇 Adds the icon to the library so you can use it in your story. - library.add(fasPlusSquare); - app.component('font-awesome-icon', FontAwesomeIcon); -}); - -const preview: Preview = { - decorators: [ - (story) => ({ - components: { story }, - template: '
', - }), - ], -}; - -export default preview; -``` - diff --git a/docs/_snippets/storybook-preview-with-library-decorator.md b/docs/_snippets/storybook-preview-with-library-decorator.md index 8e90b2747784..6c9b9219bf3e 100644 --- a/docs/_snippets/storybook-preview-with-library-decorator.md +++ b/docs/_snippets/storybook-preview-with-library-decorator.md @@ -1,4 +1,33 @@ -```js filename=".storybook/preview.js" renderer="vue" language="js" tabTitle="library-3" +```js filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="preview" +import type { Preview } from '@storybook/angular'; + +import { setCompodocJson } from '@storybook/addon-docs/angular'; + +import docJson from '../documentation.json'; + +import '../src/polyfills'; + +setCompodocJson(docJson); + +const preview: Preview = { + parameters: { + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/, + }, + }, + }, +}; + +export default preview; +``` + +```ts filename="src/polyfills.ts" renderer="angular" language="ts" tabTitle="polyfills" +import '@angular/localize/init'; +``` + +```js filename=".storybook/preview.js" renderer="vue" language="js" tabTitle="library" import { setup } from '@storybook/vue3'; import { createPinia } from 'pinia'; @@ -18,7 +47,31 @@ export default { }; ``` -```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="library-3" +```js filename=".storybook/preview.js" renderer="vue" language="js" tabTitle="component" +import { setup } from '@storybook/vue3'; + +import { library } from '@fortawesome/fontawesome-svg-core'; +import { faPlusSquare as fasPlusSquare } from '@fortawesome/free-solid-svg-icons'; + +import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'; + +setup((app) => { + //👇 Adds the icon to the library so you can use it in your story. + library.add(fasPlusSquare); + app.component('font-awesome-icon', FontAwesomeIcon); +}); + +export default { + decorators: [ + (story) => ({ + components: { story }, + template: '
', + }), + ], +}; +``` + +```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="library" import { setup, Preview } from '@storybook/vue3'; import { createPinia } from 'pinia'; @@ -40,3 +93,28 @@ const preview: Preview = { export default preview; ``` +```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="component" +import { setup, Preview } from '@storybook/vue3'; + +import { library } from '@fortawesome/fontawesome-svg-core'; +import { faPlusSquare as fasPlusSquare } from '@fortawesome/free-solid-svg-icons'; + +import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'; + +setup((app) => { + //👇 Adds the icon to the library so you can use it in your story. + library.add(fasPlusSquare); + app.component('font-awesome-icon', FontAwesomeIcon); +}); + +const preview: Preview = { + decorators: [ + (story) => ({ + components: { story }, + template: '
', + }), + ], +}; + +export default preview; +``` diff --git a/docs/_snippets/storybook-preview-with-ordered-pages-and-wildcard.md b/docs/_snippets/storybook-preview-with-ordered-pages-and-wildcard.md index b1b61605b116..04bf16d2d20e 100644 --- a/docs/_snippets/storybook-preview-with-ordered-pages-and-wildcard.md +++ b/docs/_snippets/storybook-preview-with-ordered-pages-and-wildcard.md @@ -26,4 +26,3 @@ const preview: Preview = { export default preview; ``` - diff --git a/docs/_snippets/storybook-preview-with-ordered-pages.md b/docs/_snippets/storybook-preview-with-ordered-pages.md index 1bf1a7ec0a4c..72b79e145c55 100644 --- a/docs/_snippets/storybook-preview-with-ordered-pages.md +++ b/docs/_snippets/storybook-preview-with-ordered-pages.md @@ -26,4 +26,3 @@ const preview: Preview = { export default preview; ``` - diff --git a/docs/_snippets/storybook-read-environment-variables.md b/docs/_snippets/storybook-read-environment-variables.md index 7c8f1c8a6c4c..608b90bbc845 100644 --- a/docs/_snippets/storybook-read-environment-variables.md +++ b/docs/_snippets/storybook-read-environment-variables.md @@ -7,4 +7,3 @@ console.log(process.env.STORYBOOK_DATA_KEY); console.log(import.meta.env.STORYBOOK_THEME); console.log(import.meta.env.STORYBOOK_DATA_KEY); ``` - diff --git a/docs/_snippets/storybook-remove-command.md b/docs/_snippets/storybook-remove-command.md index ba8c815f8f48..43f8d804617a 100644 --- a/docs/_snippets/storybook-remove-command.md +++ b/docs/_snippets/storybook-remove-command.md @@ -9,4 +9,3 @@ pnpm dlx storybook@latest remove @storybook/addon-a11y ```shell renderer="common" language="js" packageManager="yarn" yarn dlx storybook@latest remove @storybook/addon-a11y ``` - diff --git a/docs/_snippets/storybook-run-dev.md b/docs/_snippets/storybook-run-dev.md index d1b093f92486..4c562b86bf86 100644 --- a/docs/_snippets/storybook-run-dev.md +++ b/docs/_snippets/storybook-run-dev.md @@ -13,4 +13,3 @@ pnpm run storybook ```shell renderer="common" language="js" packageManager="yarn" yarn storybook ``` - diff --git a/docs/_snippets/storybook-server-framework-options.md b/docs/_snippets/storybook-server-framework-options.md index b16de7b63cc8..56916a549d33 100644 --- a/docs/_snippets/storybook-server-framework-options.md +++ b/docs/_snippets/storybook-server-framework-options.md @@ -8,4 +8,3 @@ export default { frameworkPresets: [require.resolve('./framework-preset-my-framework.js')], }; ``` - diff --git a/docs/_snippets/storybook-server-options.md b/docs/_snippets/storybook-server-options.md index 5af66e203bb7..ce8b458fc199 100644 --- a/docs/_snippets/storybook-server-options.md +++ b/docs/_snippets/storybook-server-options.md @@ -7,4 +7,3 @@ export default { frameworkPresets: [require.resolve('./framework-preset-vue.js')], }; ``` - diff --git a/docs/_snippets/storybook-start-dev-server.md b/docs/_snippets/storybook-start-dev-server.md index b8cb5ef811b0..62b5e0df161b 100644 --- a/docs/_snippets/storybook-start-dev-server.md +++ b/docs/_snippets/storybook-start-dev-server.md @@ -5,4 +5,3 @@ import options from './options'; buildDev(options); ``` - diff --git a/docs/_snippets/storybook-story-layout-param.md b/docs/_snippets/storybook-story-layout-param.md index 8594ccdda3a5..f0403f7993e4 100644 --- a/docs/_snippets/storybook-story-layout-param.md +++ b/docs/_snippets/storybook-story-layout-param.md @@ -99,4 +99,3 @@ export const WithLayout: Story = { }, }; ``` - diff --git a/docs/_snippets/storybook-storyloading-with-directory.md b/docs/_snippets/storybook-storyloading-with-directory.md index efd3ad885d4f..1f9f22e37611 100644 --- a/docs/_snippets/storybook-storyloading-with-directory.md +++ b/docs/_snippets/storybook-storyloading-with-directory.md @@ -19,4 +19,3 @@ const config: StorybookConfig = { export default config; ``` - diff --git a/docs/_snippets/storybook-storysource-manager-entries.md b/docs/_snippets/storybook-storysource-manager-entries.md index 1eac3840ec4b..7f2a65c8cf15 100644 --- a/docs/_snippets/storybook-storysource-manager-entries.md +++ b/docs/_snippets/storybook-storysource-manager-entries.md @@ -1,4 +1,3 @@ ```js filename="storysource/preset.js" renderer="common" language="js" /* nothing needed */ ``` - diff --git a/docs/_snippets/storybook-telemetry-crash-report-event.md b/docs/_snippets/storybook-telemetry-crash-report-event.md index 5b307df850b6..118bd8b6c179 100644 --- a/docs/_snippets/storybook-telemetry-crash-report-event.md +++ b/docs/_snippets/storybook-telemetry-crash-report-event.md @@ -11,4 +11,3 @@ message: 'Your button is not working' } ``` - diff --git a/docs/_snippets/storybook-telemetry-main-enable-crash-reports.md b/docs/_snippets/storybook-telemetry-main-enable-crash-reports.md index aa80c4375fe0..32f436b273ae 100644 --- a/docs/_snippets/storybook-telemetry-main-enable-crash-reports.md +++ b/docs/_snippets/storybook-telemetry-main-enable-crash-reports.md @@ -1,4 +1,4 @@ -```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="main-js" +```js filename=".storybook/main.js" renderer="common" language="js" export default { // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) framework: '@storybook/your-framework', @@ -9,7 +9,7 @@ export default { }; ``` -```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="main-ts" +```ts filename=".storybook/main.ts" renderer="common" language="ts" // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) import type { StorybookConfig } from '@storybook/your-framework'; @@ -23,4 +23,3 @@ const config: StorybookConfig = { export default config; ``` - diff --git a/docs/_snippets/storybook-telemetry-preview-event.md b/docs/_snippets/storybook-telemetry-preview-event.md index 8cc060bbafd6..275db577eef9 100644 --- a/docs/_snippets/storybook-telemetry-preview-event.md +++ b/docs/_snippets/storybook-telemetry-preview-event.md @@ -5,4 +5,3 @@ STORYBOOK_TELEMETRY_DEBUG=1 npm run storybook ```shell renderer="common" language="js" packageManager="yarn" STORYBOOK_TELEMETRY_DEBUG=1 yarn storybook ``` - diff --git a/docs/_snippets/storybook-telemetry-storybook-enable-crash-reports-env.md b/docs/_snippets/storybook-telemetry-storybook-enable-crash-reports-env.md new file mode 100644 index 000000000000..cc5eb3bd9da9 --- /dev/null +++ b/docs/_snippets/storybook-telemetry-storybook-enable-crash-reports-env.md @@ -0,0 +1,3 @@ +```shell renderer="common" language="js" +STORYBOOK_ENABLE_CRASH_REPORTS=1 yarn storybook +``` diff --git a/docs/_snippets/storybook-telemetry-storybook-enable-crash-reports.md b/docs/_snippets/storybook-telemetry-storybook-enable-crash-reports-flag.md similarity index 74% rename from docs/_snippets/storybook-telemetry-storybook-enable-crash-reports.md rename to docs/_snippets/storybook-telemetry-storybook-enable-crash-reports-flag.md index 4eebe6003d03..5724a59ee45e 100644 --- a/docs/_snippets/storybook-telemetry-storybook-enable-crash-reports.md +++ b/docs/_snippets/storybook-telemetry-storybook-enable-crash-reports-flag.md @@ -1,7 +1,3 @@ -```shell renderer="common" language="js" tabTitle="env-var" -STORYBOOK_ENABLE_CRASH_REPORTS=1 yarn storybook -``` - ```shell renderer="common" language="js" packageManager="npm" npm run storybook -- --enable-crash-reports ``` @@ -13,4 +9,3 @@ pnpm run storybook --enable-crash-reports ```shell renderer="common" language="js" packageManager="yarn" yarn storybook --enable-crash-reports ``` - diff --git a/docs/_snippets/storybook-test-fn-mock-spy.md b/docs/_snippets/storybook-test-fn-mock-spy.md index 62760213efbb..d371d0abb66f 100644 --- a/docs/_snippets/storybook-test-fn-mock-spy.md +++ b/docs/_snippets/storybook-test-fn-mock-spy.md @@ -5,6 +5,7 @@ import { expect, userEvent, within } from '@storybook/test'; // 👇 Must include the `.mock` portion of filename to have mocks typed correctly import { saveNote } from '#app/actions.mock'; import { createNotes } from '#mocks/notes'; + import NoteUI from './note-ui'; const meta: Meta = { @@ -39,6 +40,7 @@ import { expect, userEvent, within } from '@storybook/test'; import { saveNote } from '#app/actions.mock'; import { createNotes } from '#mocks/notes'; + import NoteUI from './note-ui'; export default { @@ -73,6 +75,7 @@ import { expect, userEvent, within } from '@storybook/test'; // 👇 Must include the `.mock` portion of filename to have mocks typed correctly import { saveNote } from '#app/actions.mock'; import { createNotes } from '#mocks/notes'; + import NoteUI from './note-ui'; const meta = { @@ -203,4 +206,3 @@ export const SaveFlow: Story = { }, }; ``` - diff --git a/docs/_snippets/storybook-test-mock-file-example.md b/docs/_snippets/storybook-test-mock-file-example.md index 594f84887875..6313dcf2147c 100644 --- a/docs/_snippets/storybook-test-mock-file-example.md +++ b/docs/_snippets/storybook-test-mock-file-example.md @@ -5,4 +5,3 @@ import * as actual from './session'; export * from './session'; export const getUserFromSession = fn(actual.getUserFromSession).mockName('getUserFromSession'); ``` - diff --git a/docs/_snippets/storybook-test-mock-return-value.md b/docs/_snippets/storybook-test-mock-return-value.md index e552bc061e06..4017f205a00b 100644 --- a/docs/_snippets/storybook-test-mock-return-value.md +++ b/docs/_snippets/storybook-test-mock-return-value.md @@ -3,6 +3,7 @@ import type { Meta, StoryObj } from '@storybook/angular'; // 👇 Must include the `.mock` portion of filename to have mocks typed correctly import { getUserFromSession } from '#api/session.mock'; + import { Page } from './Page'; const meta: Meta = { @@ -22,6 +23,7 @@ export const Default: Story = { ```js filename="Page.stories.js" renderer="common" language="js" import { getUserFromSession } from '#api/session.mock'; + import { Page } from './Page'; export default { @@ -42,6 +44,7 @@ import type { Meta, StoryObj } from '@storybook/your-renderer'; // 👇 Must include the `.mock` portion of filename to have mocks typed correctly import { getUserFromSession } from '#api/session.mock'; + import { Page } from './Page'; const meta = { @@ -66,6 +69,7 @@ import type { Meta, StoryObj } from '@storybook/your-renderer'; // 👇 Must include the `.mock` portion of filename to have mocks typed correctly import { getUserFromSession } from '#api/session.mock'; + import { Page } from './Page'; const meta: Meta = { @@ -118,4 +122,3 @@ export const Default: Story = { }, }; ``` - diff --git a/docs/_snippets/storybook-test-with-storyname.md b/docs/_snippets/storybook-test-with-storyname.md index e09ae2cec29b..8cabc5577c1b 100644 --- a/docs/_snippets/storybook-test-with-storyname.md +++ b/docs/_snippets/storybook-test-with-storyname.md @@ -13,4 +13,3 @@ it('should format CSF exports with sensible defaults', () => { }); }); ``` - diff --git a/docs/_snippets/storybook-theme-example-variables.md b/docs/_snippets/storybook-theme-example-variables.md index 0f045dc6c52e..aca575cad984 100644 --- a/docs/_snippets/storybook-theme-example-variables.md +++ b/docs/_snippets/storybook-theme-example-variables.md @@ -9,4 +9,3 @@ export default create({ brandTarget: '_self', }); ``` - diff --git a/docs/_snippets/storybook-theming-packages-install.md b/docs/_snippets/storybook-theming-packages-install.md index a4e031c514d8..36a076f0b8f3 100644 --- a/docs/_snippets/storybook-theming-packages-install.md +++ b/docs/_snippets/storybook-theming-packages-install.md @@ -9,4 +9,3 @@ pnpm add --save-dev @storybook/manager-api @storybook/theming ```shell renderer="common" language="js" packageManager="yarn" yarn add --dev @storybook/manager-api @storybook/theming ``` - diff --git a/docs/_snippets/storybook-theming-styled-import.md b/docs/_snippets/storybook-theming-styled-import.md index 112d6d7497d2..5c1f84ea8b6c 100644 --- a/docs/_snippets/storybook-theming-styled-import.md +++ b/docs/_snippets/storybook-theming-styled-import.md @@ -1,4 +1,3 @@ ```js filename="YourTheme.js" renderer="common" language="js" import { styled } from '@storybook/theming'; ``` - diff --git a/docs/_snippets/storybook-upgrade-prerelease.md b/docs/_snippets/storybook-upgrade-prerelease.md index 882153c1a175..3b71ef4c4d98 100644 --- a/docs/_snippets/storybook-upgrade-prerelease.md +++ b/docs/_snippets/storybook-upgrade-prerelease.md @@ -9,4 +9,3 @@ pnpm dlx storybook@next upgrade ```shell renderer="common" language="js" packageManager="yarn" yarn dlx storybook@next upgrade ``` - diff --git a/docs/_snippets/storybook-upgrade-to-prior-major.md b/docs/_snippets/storybook-upgrade-to-prior-major.md index 58295bb021e3..a8a0de4ad9ba 100644 --- a/docs/_snippets/storybook-upgrade-to-prior-major.md +++ b/docs/_snippets/storybook-upgrade-to-prior-major.md @@ -9,4 +9,3 @@ pnpm dlx storybook@^7 upgrade ```shell renderer="common" language="js" packageManager="yarn" yarn dlx storybook@^7 upgrade ``` - diff --git a/docs/_snippets/storybook-upgrade.md b/docs/_snippets/storybook-upgrade.md index ddc92f704cb2..7d1921e6bd44 100644 --- a/docs/_snippets/storybook-upgrade.md +++ b/docs/_snippets/storybook-upgrade.md @@ -9,4 +9,3 @@ pnpm dlx storybook@latest upgrade ```shell renderer="common" language="js" packageManager="yarn" yarn dlx storybook@latest upgrade ``` - diff --git a/docs/_snippets/storybook-vite-builder-install.md b/docs/_snippets/storybook-vite-builder-install.md index 0de50e2116b3..9bc49e64fbf8 100644 --- a/docs/_snippets/storybook-vite-builder-install.md +++ b/docs/_snippets/storybook-vite-builder-install.md @@ -9,4 +9,3 @@ pnpm add --save-dev @storybook/builder-vite ```shell renderer="common" language="js" packageManager="yarn" yarn add --dev @storybook/builder-vite ``` - diff --git a/docs/_snippets/storybook-vite-builder-jest-mock.md b/docs/_snippets/storybook-vite-builder-jest-mock.md index 1a864be1d6e2..5c8e49f97091 100644 --- a/docs/_snippets/storybook-vite-builder-jest-mock.md +++ b/docs/_snippets/storybook-vite-builder-jest-mock.md @@ -1,8 +1,5 @@ -```html renderer="common" language="ts" tabTitle="html" -{/* .storybook/preview-head.html */} - +```html filename=".storybook/preview-head.html" renderer="common" language="ts" tabTitle="html" ``` - diff --git a/docs/_snippets/storybook-vite-builder-ts-configure.md b/docs/_snippets/storybook-vite-builder-ts-configure.md index f9fb98a7e6a6..61ec1ecce1ea 100644 --- a/docs/_snippets/storybook-vite-builder-ts-configure.md +++ b/docs/_snippets/storybook-vite-builder-ts-configure.md @@ -29,4 +29,3 @@ const config: StorybookConfig = { export default config; ``` - diff --git a/docs/_snippets/subpath-imports-config.md b/docs/_snippets/subpath-imports-config.md index 676b3e461631..9d61b031d0f9 100644 --- a/docs/_snippets/subpath-imports-config.md +++ b/docs/_snippets/subpath-imports-config.md @@ -23,4 +23,3 @@ } } ``` - diff --git a/docs/_snippets/svelte-csf-addon-install.md b/docs/_snippets/svelte-csf-addon-install.md index 3b036e9fecf0..45120afac465 100644 --- a/docs/_snippets/svelte-csf-addon-install.md +++ b/docs/_snippets/svelte-csf-addon-install.md @@ -9,4 +9,3 @@ pnpm dlx storybook@latest add @storybook/addon-svelte-csf ```shell renderer="svelte" language="js" packageManager="yarn" yarn storybook@latest add @storybook/addon-svelte-csf ``` - diff --git a/docs/_snippets/svelte-vite-add-framework.md b/docs/_snippets/svelte-vite-add-framework.md index 13b0ad47f572..200d3fefe6cc 100644 --- a/docs/_snippets/svelte-vite-add-framework.md +++ b/docs/_snippets/svelte-vite-add-framework.md @@ -15,4 +15,3 @@ const config: StorybookConfig = { export default config; ``` - diff --git a/docs/_snippets/svelte-vite-install.md b/docs/_snippets/svelte-vite-install.md index 3285ba245fd1..aae2ef5541bb 100644 --- a/docs/_snippets/svelte-vite-install.md +++ b/docs/_snippets/svelte-vite-install.md @@ -9,4 +9,3 @@ pnpm add --save-dev @storybook/svelte-vite ```shell renderer="svelte" language="js" packageManager="yarn" yarn add --dev @storybook/svelte-vite ``` - diff --git a/docs/_snippets/svelte-webpack5-add-framework.md b/docs/_snippets/svelte-webpack5-add-framework.md index e93100f0043e..2ababfd97736 100644 --- a/docs/_snippets/svelte-webpack5-add-framework.md +++ b/docs/_snippets/svelte-webpack5-add-framework.md @@ -15,4 +15,3 @@ const config: StorybookConfig = { export default config; ``` - diff --git a/docs/_snippets/svelte-webpack5-install.md b/docs/_snippets/svelte-webpack5-install.md index a8d7089adfa1..85d5fd91e779 100644 --- a/docs/_snippets/svelte-webpack5-install.md +++ b/docs/_snippets/svelte-webpack5-install.md @@ -9,4 +9,3 @@ pnpm add --save-dev @storybook/svelte-webpack5 ```shell renderer="svelte" language="js" packageManager="yarn" yarn add --dev @storybook/svelte-webpack5 ``` - diff --git a/docs/_snippets/sveltekit-add-framework.md b/docs/_snippets/sveltekit-add-framework.md index b712a957b5f5..7481cab10cb8 100644 --- a/docs/_snippets/sveltekit-add-framework.md +++ b/docs/_snippets/sveltekit-add-framework.md @@ -17,4 +17,3 @@ const config: StorybookConfig = { export default config; ``` - diff --git a/docs/_snippets/sveltekit-install.md b/docs/_snippets/sveltekit-install.md index e7010dd695a8..0ffa2c676836 100644 --- a/docs/_snippets/sveltekit-install.md +++ b/docs/_snippets/sveltekit-install.md @@ -9,4 +9,3 @@ pnpm add --save-dev @storybook/sveltekit ```shell renderer="svelte" language="js" packageManager="yarn" yarn add --dev @storybook/sveltekit ``` - diff --git a/docs/_snippets/tags-autodocs-in-preview.md b/docs/_snippets/tags-autodocs-in-preview.md index 9f3f8c030498..7d96acbe053d 100644 --- a/docs/_snippets/tags-autodocs-in-preview.md +++ b/docs/_snippets/tags-autodocs-in-preview.md @@ -18,4 +18,3 @@ const preview: Preview = { export default preview; ``` - diff --git a/docs/_snippets/test-runner-a11y-config.md b/docs/_snippets/test-runner-a11y-config.md index de01dce91393..14824205701b 100644 --- a/docs/_snippets/test-runner-a11y-config.md +++ b/docs/_snippets/test-runner-a11y-config.md @@ -44,4 +44,3 @@ const config: TestRunnerConfig = { export default config; ``` - diff --git a/docs/_snippets/test-runner-a11y-disable.md b/docs/_snippets/test-runner-a11y-disable.md index 4acc306f653c..e1b176bc4a0f 100644 --- a/docs/_snippets/test-runner-a11y-disable.md +++ b/docs/_snippets/test-runner-a11y-disable.md @@ -61,4 +61,3 @@ const config: TestRunnerConfig = { export default config; ``` - diff --git a/docs/_snippets/test-runner-auth.md b/docs/_snippets/test-runner-auth.md index 7712fc4b47bf..3733b0a8ca52 100644 --- a/docs/_snippets/test-runner-auth.md +++ b/docs/_snippets/test-runner-auth.md @@ -23,4 +23,3 @@ const config: TestRunnerConfig = { export default config; ``` - diff --git a/docs/_snippets/test-runner-axe-playwright.md b/docs/_snippets/test-runner-axe-playwright.md index b9eb9e8f7162..2f09c11027a1 100644 --- a/docs/_snippets/test-runner-axe-playwright.md +++ b/docs/_snippets/test-runner-axe-playwright.md @@ -9,4 +9,3 @@ pnpm add --save-dev axe-playwright ```shell renderer="common" language="js" packageManager="yarn" yarn add --dev axe-playwright ``` - diff --git a/docs/_snippets/test-runner-config-serializer.md b/docs/_snippets/test-runner-config-serializer.md index 460b1da8c524..ea1110eecef0 100644 --- a/docs/_snippets/test-runner-config-serializer.md +++ b/docs/_snippets/test-runner-config-serializer.md @@ -14,4 +14,3 @@ const config = { export default config; ``` - diff --git a/docs/_snippets/test-runner-config-snapshot-resolver.md b/docs/_snippets/test-runner-config-snapshot-resolver.md index e4bf8639d2d8..634d9303c607 100644 --- a/docs/_snippets/test-runner-config-snapshot-resolver.md +++ b/docs/_snippets/test-runner-config-snapshot-resolver.md @@ -11,4 +11,3 @@ const config = { export default config; ``` - diff --git a/docs/_snippets/test-runner-coverage.md b/docs/_snippets/test-runner-coverage.md index 06200c3930fe..42c44817f6f9 100644 --- a/docs/_snippets/test-runner-coverage.md +++ b/docs/_snippets/test-runner-coverage.md @@ -9,4 +9,3 @@ pnpm run test-storybook --coverage ```shell renderer="common" language="js" packageManager="yarn" yarn test-storybook --coverage ``` - diff --git a/docs/_snippets/test-runner-custom-page-viewport.md b/docs/_snippets/test-runner-custom-page-viewport.md index d15eaa4d0da3..bc6342e0d86c 100644 --- a/docs/_snippets/test-runner-custom-page-viewport.md +++ b/docs/_snippets/test-runner-custom-page-viewport.md @@ -18,7 +18,7 @@ module.exports = { // Converts the viewport size from percentages to numbers [screen]: parseInt(size), }), - {}, + {} ); // Configures the Playwright page to use the viewport size page.setViewportSize(viewportSize); @@ -51,7 +51,7 @@ const config: TestRunnerConfig = { // Converts the viewport size from percentages to numbers [screen]: parseInt(size), }), - {}, + {} ); // Configures the Playwright page to use the viewport size page.setViewportSize(viewportSize); @@ -63,4 +63,3 @@ const config: TestRunnerConfig = { export default config; ``` - diff --git a/docs/_snippets/test-runner-custom-snapshot-resolver.md b/docs/_snippets/test-runner-custom-snapshot-resolver.md index 0fd336b41b18..dba1c8c745fd 100644 --- a/docs/_snippets/test-runner-custom-snapshot-resolver.md +++ b/docs/_snippets/test-runner-custom-snapshot-resolver.md @@ -15,4 +15,3 @@ export default { testPathForConsistencyCheck: 'example.storyshot', }; ``` - diff --git a/docs/_snippets/test-runner-custom-snapshot-serializer.md b/docs/_snippets/test-runner-custom-snapshot-serializer.md index dc544953701f..ced9e33f3731 100644 --- a/docs/_snippets/test-runner-custom-snapshot-serializer.md +++ b/docs/_snippets/test-runner-custom-snapshot-serializer.md @@ -19,4 +19,3 @@ module.exports = { }, }; ``` - diff --git a/docs/_snippets/test-runner-dom-snapshot-testing.md b/docs/_snippets/test-runner-dom-snapshot-testing.md index 6fb40633207b..f17021eeedb3 100644 --- a/docs/_snippets/test-runner-dom-snapshot-testing.md +++ b/docs/_snippets/test-runner-dom-snapshot-testing.md @@ -23,4 +23,3 @@ const config: TestRunnerConfig = { export default config; ``` - diff --git a/docs/_snippets/test-runner-eject-config.md b/docs/_snippets/test-runner-eject-config.md index cd5e7cf708a6..133a87c294df 100644 --- a/docs/_snippets/test-runner-eject-config.md +++ b/docs/_snippets/test-runner-eject-config.md @@ -9,4 +9,3 @@ pnpm run test-storybook --eject ```sh renderer="common" language="js" packageManager="yarn" yarn test-storybook --eject ``` - diff --git a/docs/_snippets/test-runner-execute-with-flags.md b/docs/_snippets/test-runner-execute-with-flags.md index 922856044f9c..a4f710f89612 100644 --- a/docs/_snippets/test-runner-execute-with-flags.md +++ b/docs/_snippets/test-runner-execute-with-flags.md @@ -9,4 +9,3 @@ pnpm run test-storybook --watch ```shell renderer="common" language="js" packageManager="yarn" yarn test-storybook --watch ``` - diff --git a/docs/_snippets/test-runner-execute.md b/docs/_snippets/test-runner-execute.md index a99bf77236b6..af9470fd2999 100644 --- a/docs/_snippets/test-runner-execute.md +++ b/docs/_snippets/test-runner-execute.md @@ -9,4 +9,3 @@ pnpm run test-storybook ```shell renderer="common" language="js" packageManager="yarn" yarn test-storybook ``` - diff --git a/docs/_snippets/test-runner-helper-function.md b/docs/_snippets/test-runner-helper-function.md index c88743d7b1f4..8d600e464560 100644 --- a/docs/_snippets/test-runner-helper-function.md +++ b/docs/_snippets/test-runner-helper-function.md @@ -62,4 +62,3 @@ const config: TestRunnerConfig = { export default config; ``` - diff --git a/docs/_snippets/test-runner-hooks-example.md b/docs/_snippets/test-runner-hooks-example.md index 77caddb91dd6..a055ab35f9b5 100644 --- a/docs/_snippets/test-runner-hooks-example.md +++ b/docs/_snippets/test-runner-hooks-example.md @@ -47,4 +47,3 @@ const config: TestRunnerConfig = { export default config; ``` - diff --git a/docs/_snippets/test-runner-image-snapshot-testing.md b/docs/_snippets/test-runner-image-snapshot-testing.md index 1f19377922a4..03d1a0c1faa8 100644 --- a/docs/_snippets/test-runner-image-snapshot-testing.md +++ b/docs/_snippets/test-runner-image-snapshot-testing.md @@ -49,4 +49,3 @@ const config: TestRunnerConfig = { }; export default config; ``` - diff --git a/docs/_snippets/test-runner-install.md b/docs/_snippets/test-runner-install.md index 3fe38c3dd3f8..aa64481319fb 100644 --- a/docs/_snippets/test-runner-install.md +++ b/docs/_snippets/test-runner-install.md @@ -9,4 +9,3 @@ pnpm add --save-dev @storybook/test-runner ```shell renderer="common" language="js" packageManager="yarn" yarn add --dev @storybook/test-runner ``` - diff --git a/docs/_snippets/test-runner-local-build-workflow.md b/docs/_snippets/test-runner-local-build-workflow.md index b429c34cfaeb..c5e72c546b82 100644 --- a/docs/_snippets/test-runner-local-build-workflow.md +++ b/docs/_snippets/test-runner-local-build-workflow.md @@ -1,8 +1,8 @@ -```yml renderer="common" language="ts" tabTitle="yml" -# .github/workflows/storybook-tests.yml - +```yml filename=".github/workflows/storybook-tests.yml" renderer="common" language="ts" tabTitle="yml" name: 'Storybook Tests' + on: push + jobs: test: timeout-minutes: 60 @@ -24,4 +24,3 @@ jobs: "npx http-server storybook-static --port 6006 --silent" \ "npx wait-on tcp:127.0.0.1:6006 && yarn test-storybook" ``` - diff --git a/docs/_snippets/test-runner-no-index-json.md b/docs/_snippets/test-runner-no-index-json.md index c84436d8ee80..6f576c6494c8 100644 --- a/docs/_snippets/test-runner-no-index-json.md +++ b/docs/_snippets/test-runner-no-index-json.md @@ -9,4 +9,3 @@ pnpm run test-storybook --no-index-json ```shell renderer="common" language="js" packageManager="yarn" yarn test-storybook --no-index-json ``` - diff --git a/docs/_snippets/test-runner-snapshot-resolver-custom-directory.md b/docs/_snippets/test-runner-snapshot-resolver-custom-directory.md index b76fb087f375..023ec13fb63d 100644 --- a/docs/_snippets/test-runner-snapshot-resolver-custom-directory.md +++ b/docs/_snippets/test-runner-snapshot-resolver-custom-directory.md @@ -16,4 +16,3 @@ export default { testPathForConsistencyCheck: 'example', }; ``` - diff --git a/docs/_snippets/test-runner-tags-include.md b/docs/_snippets/test-runner-tags-include.md index 60be0f9361c7..4000cde41e51 100644 --- a/docs/_snippets/test-runner-tags-include.md +++ b/docs/_snippets/test-runner-tags-include.md @@ -17,4 +17,3 @@ const config: TestRunnerConfig = { export default config; ``` - diff --git a/docs/_snippets/test-runner-waitpageready.md b/docs/_snippets/test-runner-waitpageready.md index 0601ff1aed77..b608c4180388 100644 --- a/docs/_snippets/test-runner-waitpageready.md +++ b/docs/_snippets/test-runner-waitpageready.md @@ -51,4 +51,3 @@ const config: TestRunnerConfig = { export default config; ``` - diff --git a/docs/_snippets/test-runner-with-deploy-event-workflow.md b/docs/_snippets/test-runner-with-deploy-event-workflow.md index 61ece061f2a6..201aa115692b 100644 --- a/docs/_snippets/test-runner-with-deploy-event-workflow.md +++ b/docs/_snippets/test-runner-with-deploy-event-workflow.md @@ -1,8 +1,8 @@ -```yml renderer="common" language="ts" tabTitle="yml" -# .github/workflows/storybook-tests.yml - +```yml filename=".github/workflows/storybook-tests.yml" renderer="common" language="ts" tabTitle="yml" name: Storybook Tests + on: deployment_status + jobs: test: timeout-minutes: 60 @@ -22,4 +22,3 @@ jobs: env: TARGET_URL: '${{ github.event.deployment_status.target_url }}' ``` - diff --git a/docs/_snippets/test-runner-with-index-json.md b/docs/_snippets/test-runner-with-index-json.md index 578e05423cf9..c364b50f6c25 100644 --- a/docs/_snippets/test-runner-with-index-json.md +++ b/docs/_snippets/test-runner-with-index-json.md @@ -9,4 +9,3 @@ pnpm run test-storybook --index-json ```shell renderer="common" language="js" packageManager="yarn" yarn test-storybook --index-json ``` - diff --git a/docs/_snippets/typed-csf-file.md b/docs/_snippets/typed-csf-file.md index 41bac1d67f61..02e76c156f89 100644 --- a/docs/_snippets/typed-csf-file.md +++ b/docs/_snippets/typed-csf-file.md @@ -81,4 +81,3 @@ export const Primary: StoryObj = { }, }; ``` - diff --git a/docs/_snippets/upgrade-command-specific-version.md b/docs/_snippets/upgrade-command-specific-version.md index edd9ce329bc4..606cd1d64610 100644 --- a/docs/_snippets/upgrade-command-specific-version.md +++ b/docs/_snippets/upgrade-command-specific-version.md @@ -1,4 +1,4 @@ -```shell renderer="common" language="js" packageManager="npx" +```shell renderer="common" language="js" packageManager="npm" npx storybook@7.6.6 upgrade ``` @@ -9,4 +9,3 @@ pnpm dlx storybook@7.6.6 upgrade ```shell renderer="common" language="js" packageManager="yarn" yarn dlx storybook@7.6.6 upgrade ``` - diff --git a/docs/_snippets/vue-jest-optional-config-scripts.md b/docs/_snippets/vue-jest-optional-config-scripts.md deleted file mode 100644 index 16e373f80638..000000000000 --- a/docs/_snippets/vue-jest-optional-config-scripts.md +++ /dev/null @@ -1,16 +0,0 @@ -```json renderer="vue" language="js" tabTitle="jest" -{ - "scripts": { - "test": "jest --setupFiles ./setupFile.js" - } -} -``` - -```json renderer="vue" language="ts" tabTitle="jest" -{ - "scripts": { - "test": "jest --setupFiles ./setupFile.js" - } -} -``` - diff --git a/docs/_snippets/vue3-vite-add-framework.md b/docs/_snippets/vue3-vite-add-framework.md index 2d4e13180f0a..5c617faae463 100644 --- a/docs/_snippets/vue3-vite-add-framework.md +++ b/docs/_snippets/vue3-vite-add-framework.md @@ -15,4 +15,3 @@ const config: StorybookConfig = { export default config; ``` - diff --git a/docs/_snippets/vue3-vite-install.md b/docs/_snippets/vue3-vite-install.md index f2ea6a46843c..45a4b77c3dcd 100644 --- a/docs/_snippets/vue3-vite-install.md +++ b/docs/_snippets/vue3-vite-install.md @@ -9,4 +9,3 @@ pnpm add --save-dev @storybook/vue3-vite ```shell renderer="vue" language="js" packageManager="yarn" yarn add --dev @storybook/vue3-vite ``` - diff --git a/docs/_snippets/vue3-webpack5-add-framework.md b/docs/_snippets/vue3-webpack5-add-framework.md index 02c792ac8262..7c83b82bd090 100644 --- a/docs/_snippets/vue3-webpack5-add-framework.md +++ b/docs/_snippets/vue3-webpack5-add-framework.md @@ -15,4 +15,3 @@ const config: StorybookConfig = { export default config; ``` - diff --git a/docs/_snippets/vue3-webpack5-install.md b/docs/_snippets/vue3-webpack5-install.md index b77fa45d7b3e..55eb9006b2ca 100644 --- a/docs/_snippets/vue3-webpack5-install.md +++ b/docs/_snippets/vue3-webpack5-install.md @@ -9,4 +9,3 @@ pnpm add --save-dev @storybook/vue3-webpack5 ```shell renderer="vue" language="js" packageManager="yarn" yarn add --dev @storybook/vue3-webpack5 ``` - diff --git a/docs/_snippets/web-components-vite-add-framework.md b/docs/_snippets/web-components-vite-add-framework.md index f9a5c03598a0..140ad899ff0a 100644 --- a/docs/_snippets/web-components-vite-add-framework.md +++ b/docs/_snippets/web-components-vite-add-framework.md @@ -15,4 +15,3 @@ const config: StorybookConfig = { export default config; ``` - diff --git a/docs/_snippets/web-components-vite-install.md b/docs/_snippets/web-components-vite-install.md index 2bb35f1e280a..c1bb0f6f47d9 100644 --- a/docs/_snippets/web-components-vite-install.md +++ b/docs/_snippets/web-components-vite-install.md @@ -9,4 +9,3 @@ pnpm add --save-dev @storybook/web-components-vite ```shell renderer="web-components" language="js" packageManager="yarn" yarn add --dev @storybook/web-components-vite ``` - diff --git a/docs/_snippets/web-components-webpack5-add-framework.md b/docs/_snippets/web-components-webpack5-add-framework.md index 7df40eb92288..c69ca65de878 100644 --- a/docs/_snippets/web-components-webpack5-add-framework.md +++ b/docs/_snippets/web-components-webpack5-add-framework.md @@ -16,4 +16,3 @@ const config: StorybookConfig = { export default config; ``` - diff --git a/docs/_snippets/web-components-webpack5-install.md b/docs/_snippets/web-components-webpack5-install.md index 23529f1184c4..633c15e1777c 100644 --- a/docs/_snippets/web-components-webpack5-install.md +++ b/docs/_snippets/web-components-webpack5-install.md @@ -9,4 +9,3 @@ pnpm add --save-dev @storybook/web-components-webpack5 ```shell renderer="web-components" language="js" packageManager="yarn" yarn add --dev @storybook/web-components-webpack5 ``` - diff --git a/docs/_snippets/your-component.md b/docs/_snippets/your-component.md index 34d5c4f5a7d2..689566b0323d 100644 --- a/docs/_snippets/your-component.md +++ b/docs/_snippets/your-component.md @@ -322,7 +322,7 @@ export const FirstStory: Story = { }; ``` -```js filename="YourComponent.stories.js" renderer="vue" language="js" tabTitle="3" +```js filename="YourComponent.stories.js" renderer="vue" language="js" import YourComponent from './YourComponent.vue'; //👇 This default export determines where your story goes in the story list @@ -349,9 +349,7 @@ export const FirstStory = { }; ``` -```ts filename="YourComponent.stories.js" renderer="vue" language="ts-4-9" tabTitle="3" -import type { Meta, StoryObj } from '@storybook/vue3'; - +```ts filename="YourComponent.stories.js" renderer="vue" language="ts-4-9" import YourComponent from './YourComponent.vue'; const meta = { @@ -381,7 +379,7 @@ export const Primary: Story = { }; ``` -```ts filename="YourComponent.stories.ts" renderer="vue" language="ts" tabTitle="3" +```ts filename="YourComponent.stories.ts" renderer="vue" language="ts" import type { Meta, StoryObj } from '@storybook/vue3'; import YourComponent from './YourComponent.vue'; diff --git a/docs/_snippets/your-theme.md b/docs/_snippets/your-theme.md index b491ad8b608f..85b8021fd87c 100644 --- a/docs/_snippets/your-theme.md +++ b/docs/_snippets/your-theme.md @@ -40,4 +40,3 @@ export default create({ inputBorderRadius: 2, }); ``` - diff --git a/docs/addons/addon-knowledge-base.mdx b/docs/addons/addon-knowledge-base.mdx index c2dbdb497d30..ab0ef1268d52 100644 --- a/docs/addons/addon-knowledge-base.mdx +++ b/docs/addons/addon-knowledge-base.mdx @@ -79,7 +79,7 @@ Complementing the components, also included is a set of UI primitives. Use the c When you're developing your addon as a package, you can’t use `npm link` to add it to your project. List your addon as a local dependency into your package.json: -```json +```json title="package.json" { "dependencies": { "@storybook/addon-controls": "file:///home/username/myrepo" @@ -99,7 +99,7 @@ While developing your addon, you can configure HMR (hot module replacement) to r If you're developing a standalone addon, add a new script to `package.json` with the following: -```json +```json title="package.json" { "scripts": { "start": "npm run build -- --watch" diff --git a/docs/addons/addon-migration-guide.mdx b/docs/addons/addon-migration-guide.mdx index bf1c26309f04..cc032f6f24c1 100644 --- a/docs/addons/addon-migration-guide.mdx +++ b/docs/addons/addon-migration-guide.mdx @@ -15,7 +15,7 @@ We sincerely appreciate the dedication and effort addon creators put into keepin Begin by updating your Storybook dependencies. Use the `next` tag for pre-release versions, `latest` for the most recent stable release, or specify the version directly. -```jsonc +```jsonc title="package.json" { "dependencies": { "@storybook/client-logger": "next" // or "latest", or "^8.0.0" diff --git a/docs/addons/addon-types.mdx b/docs/addons/addon-types.mdx index 8b2aef939ff8..5c540cd0bdb0 100644 --- a/docs/addons/addon-types.mdx +++ b/docs/addons/addon-types.mdx @@ -40,11 +40,7 @@ Use this boilerplate code to add a new `button` to Storybook's Toolbar: {/* prettier-ignore-end */} - The `match` property allows you to conditionally render your toolbar addon, [based on the current view](./writing-addons.mdx#conditionally-render-the-addon). - -
- - The `icon` element used in the example loads the icons from the `@storybook/components` package. See [here](../faq.mdx#what-icons-are-available-for-my-toolbar-or-my-addon) for the list of available icons that you can use. + The `match` property allows you to conditionally render your toolbar addon, [based on the current view](./writing-addons.mdx#conditionally-render-the-addon). The `icon` element used in the example loads the icons from the `@storybook/components` package. See [here](../faq.mdx#what-icons-are-available-for-my-toolbar-or-my-addon) for the list of available icons that you can use. ### Tabs diff --git a/docs/addons/addons-api.mdx b/docs/addons/addons-api.mdx index 42cbb56c3a90..e5b580597b4f 100644 --- a/docs/addons/addons-api.mdx +++ b/docs/addons/addons-api.mdx @@ -95,7 +95,7 @@ The `selectStory` API method allows you to select a single story. It accepts the {/* prettier-ignore-start */} - + {/* prettier-ignore-end */} diff --git a/docs/addons/integration-catalog.mdx b/docs/addons/integration-catalog.mdx index f1b6e63fe9da..8439c033f847 100644 --- a/docs/addons/integration-catalog.mdx +++ b/docs/addons/integration-catalog.mdx @@ -59,10 +59,8 @@ Use the list below as a reference when filling in the values for both the `suppo Make sure to copy each item **exactly** as listed so that we can properly index your addon in our catalog. -```json +```json title="package.json" { - // package.json - "name": "storybook-addon-outline", "version": "1.0.0", "description": "Outline all elements with CSS to help with layout placement and alignment", diff --git a/docs/addons/writing-addons.mdx b/docs/addons/writing-addons.mdx index fe3cb45ffd1b..b31aec29f869 100644 --- a/docs/addons/writing-addons.mdx +++ b/docs/addons/writing-addons.mdx @@ -26,7 +26,7 @@ The addon built in this guide is a UI-based addon, specifically a [toolbar](./ad {/* prettier-ignore-start */} - + {/* prettier-ignore-end */} @@ -68,9 +68,7 @@ By default, code for the UI-based addons is located in one of the following file Going through the code blocks in sequence: -```ts -// src/Tool.tsx - +```ts title="src/Tool.tsx" import { useGlobals, useStorybookApi } from '@storybook/manager-api'; import { IconButton } from '@storybook/components'; import { LightningIcon } from '@storybook/icons'; @@ -80,9 +78,7 @@ The [`useGlobals`](./addons-api.mdx#useglobals) and [`useStorybookApi`](./addons The `IconButton` or `Button` component from the [`@storybook/components`](https://www.npmjs.com/package/@storybook/components) package can be used to render the buttons in the toolbar. The [`@storybook/icons`](https://github.com/storybookjs/icons) package provides a large set of appropriately sized and styled icons to choose from. -```ts -// src/Tool.tsx - +```ts title="src/Tool.tsx" export const Tool = memo(function MyAddonSelector() { const [globals, updateGlobals] = useGlobals(); const api = useStorybookApi(); @@ -175,7 +171,7 @@ Storybook addons, similar to most packages in the JavaScript ecosystem, are dist The first category of metadata is related to the addon itself. This includes the entry for the module, which files to include when the addon is published. And the required configuration to integrate the addon with Storybook, allowing it to be used by its consumers. -```json +```json title="package.json" { "exports": { ".": { @@ -213,7 +209,7 @@ The first category of metadata is related to the addon itself. This includes the The second metadata category is related to the [integration catalog](https://storybook.js.org/integrations). Most of this information is already pre-configured by the Addon Kit. However, items like the display name, icon, and frameworks must be configured via the `storybook` property to be displayed in the catalog. -```json +```json title="package.json" { "name": "my-storybook-addon", "version": "1.0.0", diff --git a/docs/api/csf.mdx b/docs/api/csf.mdx index 68f2d2f37266..efe4c1394d6a 100644 --- a/docs/api/csf.mdx +++ b/docs/api/csf.mdx @@ -10,7 +10,7 @@ sidebar: Component Story Format (CSF) is the recommended way to [write stories](../writing-stories/index.mdx). It's an [open standard](https://github.com/ComponentDriven/csf) based on ES6 modules that is portable beyond Storybook. - If you have stories written in the older `storiesOf()` syntax, it was removed in Storybook 8.0 and is no longer maintained. We recommend migrating your stories to CSF. See the [migration guide](../migration-guide/index.mdx#storiesof-to-csf) for more information. + If you have stories written in the older `storiesOf()` syntax, it was removed in Storybook 8.0 and is no longer maintained. We recommend migrating your stories to CSF. See the [migration guide](../migration-guide/index.mdx#major-breaking-changes) for more information. In CSF, stories and component metadata are defined as ES Modules. Every component story file consists of a required [default export](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export#Using_the_default_export) and one or more [named exports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export). @@ -35,7 +35,7 @@ With CSF, every named export in the file represents a story object by default. {/* prettier-ignore-start */} - + {/* prettier-ignore-end */} @@ -57,7 +57,7 @@ Storybook's `name` configuration element is helpful in specific circumstances. C {/* prettier-ignore-start */} - + {/* prettier-ignore-end */} @@ -69,7 +69,7 @@ Consider Storybook’s ["Button" example](../writing-stories/index.mdx#defining- {/* prettier-ignore-start */} - + {/* prettier-ignore-end */} @@ -77,7 +77,7 @@ Now consider the same example, re-written with args: {/* prettier-ignore-start */} - + {/* prettier-ignore-end */} @@ -85,7 +85,7 @@ Or even more simply: {/* prettier-ignore-start */} - + {/* prettier-ignore-end */} @@ -101,7 +101,7 @@ A good use case for the `play` function is a form component. With previous Story {/* prettier-ignore-start */} - + {/* prettier-ignore-end */} @@ -114,7 +114,7 @@ When the story renders in the UI, Storybook executes each step defined in the `p {/* prettier-ignore-start */} - + {/* prettier-ignore-end */} @@ -152,7 +152,7 @@ Consider the following story file: {/* prettier-ignore-start */} - + {/* prettier-ignore-end */} diff --git a/docs/api/doc-blocks/doc-block-argtypes.mdx b/docs/api/doc-blocks/doc-block-argtypes.mdx index f7009dd1ee32..62223e753138 100644 --- a/docs/api/doc-blocks/doc-block-argtypes.mdx +++ b/docs/api/doc-blocks/doc-block-argtypes.mdx @@ -17,9 +17,7 @@ The `ArgTypes` block can be used to show a static table of [arg types](../arg-ty {/* prettier-ignore-start */} -```md -{/* ButtonDocs.mdx */} - +```md title="ButtonDocs.mdx" import { Meta, ArgTypes } from '@storybook/blocks'; import * as ButtonStories from './Button.stories'; @@ -51,9 +49,7 @@ import { ArgTypes } from '@storybook/blocks'; {/* prettier-ignore-start */} - ```md - {/* ButtonDocs.mdx */} - + ```md title="ButtonDocs.mdx" ``` diff --git a/docs/api/doc-blocks/doc-block-canvas.mdx b/docs/api/doc-blocks/doc-block-canvas.mdx index bee523de54be..1202bdd25abd 100644 --- a/docs/api/doc-blocks/doc-block-canvas.mdx +++ b/docs/api/doc-blocks/doc-block-canvas.mdx @@ -15,9 +15,7 @@ When using the Canvas block in MDX, it references a story with the `of` prop: {/* prettier-ignore-start */} -```md -{/* ButtonDocs.mdx */} - +```md title="ButtonDocs.mdx" import { Meta, Canvas } from '@storybook/blocks'; import * as ButtonStories from './Button.stories'; @@ -53,9 +51,7 @@ import { Canvas } from '@storybook/blocks'; {/* prettier-ignore-start */} - ```md - {/* ButtonDocs.mdx */} - + ```md title="ButtonDocs.mdx" ``` @@ -87,15 +83,13 @@ Provides any additional custom actions to show in the bottom right corner. These {/* prettier-ignore-start */} -```md -{/* ButtonDocs.mdx */} - +```md title="ButtonDocs.mdx" import { Meta, Story, Canvas, SourceState } from '@storybook/blocks'; import * as ButtonStories from './Button.stories'; -{/* with an additional action */} +{/* With an additional action */} diff --git a/docs/api/doc-blocks/doc-block-controls.mdx b/docs/api/doc-blocks/doc-block-controls.mdx index 5c11708a0019..32bce38ca5ec 100644 --- a/docs/api/doc-blocks/doc-block-controls.mdx +++ b/docs/api/doc-blocks/doc-block-controls.mdx @@ -17,9 +17,7 @@ The `Controls` block can be used to show a dynamic table of args for a given sto {/* prettier-ignore-start */} -```md -{/* ButtonDocs.mdx */} - +```md title="ButtonDocs.mdx" import { Meta, Canvas, Controls } from '@storybook/blocks'; import * as ButtonStories from './Button.stories' @@ -59,9 +57,7 @@ import { Controls } from '@storybook/blocks'; {/* prettier-ignore-start */} - ```md - {/* ButtonDocs.mdx */} - + ```md title="ButtonDocs.mdx" ``` diff --git a/docs/api/doc-blocks/doc-block-description.mdx b/docs/api/doc-blocks/doc-block-description.mdx index 15cbf9843764..538306e76a75 100644 --- a/docs/api/doc-blocks/doc-block-description.mdx +++ b/docs/api/doc-blocks/doc-block-description.mdx @@ -13,9 +13,7 @@ The `Description` block displays the description for a component, story, or meta {/* prettier-ignore-start */} -```md -{/* ButtonDocs.mdx */} - +```md title="ButtonDocs.mdx" import { Meta, Description } from '@storybook/blocks'; import * as ButtonStories from './Button.stories'; @@ -63,12 +61,9 @@ When documenting a component, reference a meta export in the `of` prop (see belo This flow gives you powerful ways to override the description for each scenario. Take the following example: -```jsx -// Button.jsx - +```jsx title="Button.jsx" /** - * # The Button component - * Shows a button + * The Button component shows a button */ export const Button = () => ; ``` @@ -81,9 +76,7 @@ export const Button = () => ; {/* prettier-ignore-start */} -```md -{/* ButtonDocs.mdx */} - +```md title="ButtonDocs.mdx" import { Meta, Description } from '@storybook/blocks'; import * as ButtonStories from './Button.stories'; diff --git a/docs/api/doc-blocks/doc-block-icongallery.mdx b/docs/api/doc-blocks/doc-block-icongallery.mdx index 7da3d7960cc2..be79b79e9213 100644 --- a/docs/api/doc-blocks/doc-block-icongallery.mdx +++ b/docs/api/doc-blocks/doc-block-icongallery.mdx @@ -11,12 +11,14 @@ The `IconGallery` block enables you to easily document React icon components ass ![Screenshot of IconGallery and IconItem blocks](../../_assets/api/doc-block-icongallery.png) -{/* prettier-ignore-start */} +## Documenting icons + +To document a set of icons, use the `IconGallery` block to display them in a grid. Each icon is wrapped in an `IconItem` block, enabling you to specify its properties, such as the name and the icon itself. -```md -{/* Iconography.mdx */} +{/* prettier-ignore-start */} -import { Meta, Title, IconGallery, IconItem } from '@storybook/blocks'; +```md title="Iconography.mdx" +import { Meta, IconGallery, IconItem } from '@storybook/blocks'; import { Icon as IconExample } from './Icon'; @@ -60,6 +62,31 @@ import { Icon as IconExample } from './Icon'; {/* prettier-ignore-end */} +### Automate icon documentation + +If you're working on a project that contains a large number of icons that you want to document, you can extend the `IconGallery` block, wrap `IconItem` in a loop, and iterate over the icons you want to document, including their properties. For example: + +{/* prettier-ignore-start */} + +```md title="Iconography.mdx" +import { Meta, IconGallery, IconItem } from '@storybook/blocks'; + +import { Icon as IconExample } from './Icon'; +import * as icons from './icons'; + +# Iconography + + + {Object.keys(icons).map((icon) => ( + + + + ))} + +``` + +{/* prettier-ignore-end */} + ## IconGallery ```js diff --git a/docs/api/doc-blocks/doc-block-markdown.mdx b/docs/api/doc-blocks/doc-block-markdown.mdx index ea807584bbe2..2732cd9b2cb5 100644 --- a/docs/api/doc-blocks/doc-block-markdown.mdx +++ b/docs/api/doc-blocks/doc-block-markdown.mdx @@ -13,9 +13,7 @@ When importing markdown files, it’s important to use the `?raw` suffix on the {/* prettier-ignore-start */} -````md -{/* README.md */} - +````md title="README.md" # Button Primary UI component for user interaction @@ -29,9 +27,7 @@ import { Button } from "@storybook/design-system"; {/* prettier-ignore-start */} -```md -{/* Header.mdx */} - +```md title="Header.mdx" // DON'T do this, will error import ReadMe from './README.md'; // DO this, will work diff --git a/docs/api/doc-blocks/doc-block-meta.mdx b/docs/api/doc-blocks/doc-block-meta.mdx index f0121df062e1..7d7cc0f724fa 100644 --- a/docs/api/doc-blocks/doc-block-meta.mdx +++ b/docs/api/doc-blocks/doc-block-meta.mdx @@ -12,9 +12,7 @@ The `Meta` block is used to [attach](#attached-vs-unattached) a custom MDX docs {/* prettier-ignore-start */} -```md -{/* ButtonDocs.mdx */} - +```md title="ButtonDocs.mdx" import { Meta } from '@storybook/blocks'; import * as ButtonStories from './Button.stories'; @@ -49,9 +47,7 @@ Sets the name of the [attached](#attached-vs-unattached) doc entry. You can atta {/* prettier-ignore-start */} -```md -{/* Component.mdx */} - +```md title="Component.mdx" import { Meta } from '@storybook/blocks'; import * as ComponentStories from './component.stories'; @@ -69,9 +65,7 @@ Specifies which CSF file is [attached](#attached-vs-unattached) to this MDX file {/* prettier-ignore-start */} -```md -{/* ButtonDocs.mdx */} - +```md title="ButtonDocs.mdx" import { Meta, Story } from '@storybook/blocks'; import * as ButtonStories from './Button.stories'; diff --git a/docs/api/doc-blocks/doc-block-primary.mdx b/docs/api/doc-blocks/doc-block-primary.mdx index 62882f3a1d88..28dd3d678fd2 100644 --- a/docs/api/doc-blocks/doc-block-primary.mdx +++ b/docs/api/doc-blocks/doc-block-primary.mdx @@ -13,9 +13,7 @@ The `Primary` block displays the primary (first defined in the stories file) sto {/* prettier-ignore-start */} -```md -{/* ButtonDocs.mdx */} - +```md title="ButtonDocs.mdx" import { Meta, Primary } from '@storybook/blocks'; import * as ButtonStories from './Button.stories'; diff --git a/docs/api/doc-blocks/doc-block-source.mdx b/docs/api/doc-blocks/doc-block-source.mdx index e2d5f94d5985..f3edb6d6df9d 100644 --- a/docs/api/doc-blocks/doc-block-source.mdx +++ b/docs/api/doc-blocks/doc-block-source.mdx @@ -13,9 +13,7 @@ The `Source` block is used to render a snippet of source code directly. {/* prettier-ignore-start */} -```md -{/* ButtonDocs.mdx */} - +```md title="ButtonDocs.mdx" import { Meta, Source } from '@storybook/blocks'; import * as ButtonStories from './Button.stories'; @@ -47,9 +45,7 @@ import { Source } from '@storybook/blocks'; {/* prettier-ignore-start */} - ```md - {/* ButtonDocs.mdx */} - + ```md title="ButtonDocs.mdx" ``` @@ -68,9 +64,7 @@ Provides the source code to be rendered. {/* prettier-ignore-start */} -```md -{/* ButtonDocs.mdx */} - +```md title="ButtonDocs.mdx" import { Meta, Source } from '@storybook/blocks'; import * as ButtonStories from './Button.stories'; diff --git a/docs/api/doc-blocks/doc-block-stories.mdx b/docs/api/doc-blocks/doc-block-stories.mdx index 42cd9fcc2c95..6dcd5e0bff59 100644 --- a/docs/api/doc-blocks/doc-block-stories.mdx +++ b/docs/api/doc-blocks/doc-block-stories.mdx @@ -13,9 +13,7 @@ The `Stories` block renders the full collection of stories in a stories file. {/* prettier-ignore-start */} -```md -{/* ButtonDocs.mdx */} - +```md title="ButtonDocs.mdx" import { Meta, Stories } from '@storybook/blocks'; import * as ButtonStories from './Button.stories'; diff --git a/docs/api/doc-blocks/doc-block-story.mdx b/docs/api/doc-blocks/doc-block-story.mdx index c5a8828f421f..df1446ecb550 100644 --- a/docs/api/doc-blocks/doc-block-story.mdx +++ b/docs/api/doc-blocks/doc-block-story.mdx @@ -21,9 +21,7 @@ In Storybook Docs, you can render any of your stories from your CSF files in the {/* prettier-ignore-start */} -```md -{/* ButtonDocs.mdx */} - +```md title="ButtonDocs.mdx"+ import { Meta, Story } from '@storybook/blocks'; import * as ButtonStories from './Button.stories'; @@ -55,9 +53,7 @@ import { Story } from '@storybook/blocks'; {/* prettier-ignore-start */} - ```md - {/* ButtonDocs.mdx */} - + ```md title="ButtonDocs.mdx" ``` @@ -114,9 +110,7 @@ You can render a story from a CSF file that you haven’t attached to the MDX fi {/* prettier-ignore-start */} -```md -{/* ButtonDocs.mdx */} - +```md title="ButtonDocs.mdx" import { Meta, Story } from '@storybook/blocks'; import * as ButtonStories from './Button.stories'; import * as HeaderStories from './Header.stories'; diff --git a/docs/api/doc-blocks/doc-block-subtitle.mdx b/docs/api/doc-blocks/doc-block-subtitle.mdx index a04da42c328d..dee2b243f534 100644 --- a/docs/api/doc-blocks/doc-block-subtitle.mdx +++ b/docs/api/doc-blocks/doc-block-subtitle.mdx @@ -13,9 +13,7 @@ The `Subtitle` block can serve as a secondary heading for your docs entry. {/* prettier-ignore-start */} -```md -{/* ButtonDocs.mdx */} - +```md title="ButtonDocs.mdx" import { Subtitle } from '@storybook/blocks'; This is the subtitle diff --git a/docs/api/doc-blocks/doc-block-title.mdx b/docs/api/doc-blocks/doc-block-title.mdx index 3d8c74c25949..54a474b738f7 100644 --- a/docs/api/doc-blocks/doc-block-title.mdx +++ b/docs/api/doc-blocks/doc-block-title.mdx @@ -13,9 +13,7 @@ The `Title` block serves as the primary heading for your docs entry. It is typic {/* prettier-ignore-start */} -```md -{/* ButtonDocs.mdx */} - +```md title="ButtonDocs.mdx" import { Title } from '@storybook/blocks'; This is the title diff --git a/docs/api/doc-blocks/doc-block-typeset.mdx b/docs/api/doc-blocks/doc-block-typeset.mdx index 8ceb2ab7b67d..5cedbf8ab772 100644 --- a/docs/api/doc-blocks/doc-block-typeset.mdx +++ b/docs/api/doc-blocks/doc-block-typeset.mdx @@ -13,9 +13,7 @@ The `Typeset` block helps document the fonts used throughout your project. {/* prettier-ignore-start */} -```md -{/* Typography.mdx */} - +```md title="Typography.mdx" import { Meta, Typeset } from '@storybook/blocks'; diff --git a/docs/api/doc-blocks/doc-block-unstyled.mdx b/docs/api/doc-blocks/doc-block-unstyled.mdx index 4e9e56a8ade3..dce273c69d0b 100644 --- a/docs/api/doc-blocks/doc-block-unstyled.mdx +++ b/docs/api/doc-blocks/doc-block-unstyled.mdx @@ -11,7 +11,7 @@ By default, most elements (like `h1`, `p`, etc.) in docs have a few default styl {/* prettier-ignore-start */} -```md +```md title="ButtonDocs.mdx" import { Meta, Unstyled } from "@storybook/blocks"; import { Header } from "./Header.tsx"; diff --git a/docs/api/doc-blocks/doc-block-useof.mdx b/docs/api/doc-blocks/doc-block-useof.mdx index 7e5944c07869..89a7fb7c7d05 100644 --- a/docs/api/doc-blocks/doc-block-useof.mdx +++ b/docs/api/doc-blocks/doc-block-useof.mdx @@ -11,9 +11,7 @@ If your own doc blocks need to interface with annotations from Storybook—that Here’s an example of how the`useOf` hook could be used to create a custom block that displays the name of the story: -```jsx -// .storybook/blocks/StoryName.jsx - +```jsx title=".storybook/blocks/StoryName.jsx" import { useOf } from '@storybook/blocks'; /** @@ -38,22 +36,20 @@ export const StoryName = ({ of }) => { {/* prettier-ignore-start */} -```md -{/* ButtonDocs.mdx */} - +```md title="ButtonDocs.mdx" import { Meta } from '@storybook/blocks'; import { StoryName } from '../.storybook/blocks/StoryName'; import * as ButtonStories from './Button.stories'; -{/* renders "Secondary" */} +{/* Renders "Secondary" */} -{/* renders "Primary" */} +{/* Renders "Primary" */} -{/* renders "Button" */} +{/* Renders "Button" */} ``` diff --git a/docs/api/new-frameworks.mdx b/docs/api/new-frameworks.mdx index edd780db1191..11d8b8407f13 100644 --- a/docs/api/new-frameworks.mdx +++ b/docs/api/new-frameworks.mdx @@ -33,7 +33,7 @@ Storybook has the concept of [presets](../addons/writing-presets.mdx), which are It's helpful to understand Storybook's package structure before adding a framework preset. Each framework typically exposes two executables in its `package.json`: -```json +```json title="package.json" { "bin": { "storybook": "./bin/index.js", @@ -94,7 +94,7 @@ Consider the following React story: {/* prettier-ignore-start */} - + {/* prettier-ignore-end */} @@ -106,7 +106,7 @@ Consider the following hypothetical example: {/* prettier-ignore-start */} - + {/* prettier-ignore-end */} diff --git a/docs/api/parameters.mdx b/docs/api/parameters.mdx index 8f1313203871..28362afe6a5a 100644 --- a/docs/api/parameters.mdx +++ b/docs/api/parameters.mdx @@ -9,10 +9,6 @@ Parameters are static metadata used to configure your [stories](../get-started/w ## Story parameters -
- ℹ️ Parameters specified at the story level will [override](#parameter-inheritance) those specified at the project level and meta (component) level. -
- Parameters specified at the story level apply to that story only. They are defined in the `parameters` property of the story (named export): {/* prettier-ignore-start */} @@ -21,11 +17,11 @@ Parameters specified at the story level apply to that story only. They are defin {/* prettier-ignore-end */} -## Meta parameters + + Parameters specified at the story level will [override](#parameter-inheritance) those specified at the project level and meta (component) level. + -
- ℹ️ Parameters specified at the meta (component) level will [override](#parameter-inheritance) those specified at the project level. -
+## Meta parameters Parameter's specified in a [CSF](../writing-stories/index.mdx#component-story-format-csf) file's meta configuration apply to all stories in that file. They are defined in the `parameters` property of the `meta` (default export): @@ -35,6 +31,10 @@ Parameter's specified in a [CSF](../writing-stories/index.mdx#component-story-fo {/* prettier-ignore-end */} + + Parameters specified at the meta (component) level will [override](#parameter-inheritance) those specified at the project level. + + ## Project parameters Parameters specified at the project (global) level apply to **all stories** in your Storybook. They are defined in the `parameters` property of the default export in your `.storybook/preview.js|ts` file: @@ -172,7 +172,6 @@ All other parameters are contributed by addons. The [essential addon's](../essen * [Backgrounds](../essentials/backgrounds.mdx#parameters) * [Controls](../essentials/controls.mdx#parameters) * [Highlight](../essentials/highlight.mdx#parameters) -* [Interactions](../essentials/interactions.mdx#parameters) * [Measure & Outline](../essentials/measure-and-outline.mdx#parameters) * [Viewport](../essentials/viewport.mdx#parameters) @@ -186,15 +185,13 @@ When specifying parameters, they are merged together in order of increasing spec 2. Meta (component) parameters 3. Story parameters -
- ℹ️ Parameters are **merged**, so objects are deep-merged, but arrays and other properties are overwritten. -
+ + Parameters are **merged**, so objects are deep-merged, but arrays and other properties are overwritten. + In other words, the following specifications of parameters: -```js -// .storybook/preview.js|ts - +```js title=".storybook/preview.js|ts" const preview = { // 👇 Project-level parameters parameters: { @@ -209,9 +206,7 @@ const preview = { export default preview; ``` -```js -// Dialog.stories.js|ts - +```js title="Dialog.stories.js|ts" const meta = { component: Dialog, // 👇 Meta-level parameters diff --git a/docs/configure/environment-variables.mdx b/docs/configure/environment-variables.mdx index 1403cc371c69..f1b14c9a4c5c 100644 --- a/docs/configure/environment-variables.mdx +++ b/docs/configure/environment-variables.mdx @@ -90,7 +90,7 @@ When Storybook loads, it will enable you to access them in your stories similar {/* prettier-ignore-start */} - + {/* prettier-ignore-end */} diff --git a/docs/configure/integration/frameworks-feature-support.mdx b/docs/configure/integration/frameworks-feature-support.mdx index aead9b265217..006673db19f1 100644 --- a/docs/configure/integration/frameworks-feature-support.mdx +++ b/docs/configure/integration/frameworks-feature-support.mdx @@ -1,5 +1,6 @@ --- title: 'Feature support for frameworks' +hideRendererSelector: true sidebar: order: 2 title: Feature support for frameworks @@ -117,4 +118,4 @@ To align the Storybook ecosystem with the current state of frontend development, | ---------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [Knobs](https://github.com/storybookjs/addon-knobs) | The Knobs addon was officially deprecated with the release of Storybook 6.3 and is no longer actively maintained. We recommend using the [controls](../../essentials/controls.mdx) instead. | | [Storyshots](../../writing-tests/snapshot-testing/storyshots-migration-guide.mdx) | The Storyshots addon was officially deprecated with the release of Storybook 7.6, is no longer actively maintained and was removed in Storybook 8. See the [migration guide](../../writing-tests/snapshot-testing/storyshots-migration-guide.mdx) for the available alternatives. | -| StoriesOf | The `storiesOf` API was officially removed with the release of Storybook 8 and is no longer maintained. We recommend using the [CSF API](../../api/csf.mdx) instead for writing stories.
See the [migration guide](../../migration-guide/index.mdx#storiesof-to-csf) for more information. | +| StoriesOf | The `storiesOf` API was officially removed with the release of Storybook 8 and is no longer maintained. We recommend using the [CSF API](../../api/csf.mdx) instead for writing stories.
See the [migration guide](../../migration-guide/index.mdx#major-breaking-changes) for more information. | diff --git a/docs/configure/integration/images-and-assets.mdx b/docs/configure/integration/images-and-assets.mdx index c500de8d210c..5d125c16d41a 100644 --- a/docs/configure/integration/images-and-assets.mdx +++ b/docs/configure/integration/images-and-assets.mdx @@ -15,7 +15,7 @@ Afterward, you can use any asset in your stories: {/* prettier-ignore-start */} - + {/* prettier-ignore-end */} @@ -35,7 +35,7 @@ Here `../public` is your static directory. Now use it in a component or story li {/* prettier-ignore-start */} - + {/* prettier-ignore-end */} @@ -61,7 +61,7 @@ Upload your files to an online CDN and reference them. In this example, we’re {/* prettier-ignore-start */} - + {/* prettier-ignore-end */} diff --git a/docs/configure/story-layout.mdx b/docs/configure/story-layout.mdx index c17f520d3579..deac6de3b8e7 100644 --- a/docs/configure/story-layout.mdx +++ b/docs/configure/story-layout.mdx @@ -41,6 +41,6 @@ Or even apply it to specific stories like so: {/* prettier-ignore-start */} - + {/* prettier-ignore-end */} diff --git a/docs/configure/story-rendering.mdx b/docs/configure/story-rendering.mdx index dccc3e518d1e..3749a925e9c8 100644 --- a/docs/configure/story-rendering.mdx +++ b/docs/configure/story-rendering.mdx @@ -14,8 +14,7 @@ Code executed in the preview file (`.storybook/preview.js|ts`) runs for every st Here's an example of how you might use the preview file to initialize a library that must run before your components render: - ```ts - // .storybook/preview.ts + ```ts title=".storybook/preview.ts" // Replace your-renderer with the renderer you are using (e.g., react, vue3) import { Preview } from '@storybook/your-renderer'; diff --git a/docs/configure/styling-and-css.mdx b/docs/configure/styling-and-css.mdx index ceebd2bb6957..70c0b4303c3f 100644 --- a/docs/configure/styling-and-css.mdx +++ b/docs/configure/styling-and-css.mdx @@ -111,7 +111,7 @@ sidebar: Don't forget to also add your global styles to your `build-storybook` target in your `angular.json` file. This will ensure that your global styles are included in the static build of your Storybook as well. - ```json + ```json title="angular.json" { "storybook": { "builder": "@storybook/angular:start-storybook", @@ -162,8 +162,9 @@ sidebar: For earlier Nx versions (before 14.1.8), your configuration would look like this: - ```json - "build-storybook": { + ```json title="project.json" + { + "build-storybook": { "executor": "@nrwl/storybook:build", "outputs": ["{options.outputPath}"], "options": { @@ -175,34 +176,37 @@ sidebar: "projectBuildConfig": "example-lib:build-storybook", "styles": ["apps/example-app/src/styles.scss"] } - } + }, + } ``` Starting with version 14.1.8, Nx uses the Storybook builder directly, which means any configuration supplied to the builder also applies to the NX setup. If you're working with a library, you'll need to configure the styling options ( e.g., preprocessors) inside the `build-storybook` options configuration object. For example: - ```json - "storybook": { - "executor": "@storybook/angular:start-storybook", - "options": { - "configDir": "apps/example-lib/.storybook", - "browserTarget": "example-lib:build-storybook", - }, + ```json title="workspace.json" + { + "storybook": { + "executor": "@storybook/angular:start-storybook", + "options": { + "configDir": "apps/example-lib/.storybook", + "browserTarget": "example-lib:build-storybook", }, - "build-storybook": { - "executor": "@storybook/angular:build-storybook", - "outputs": ["{options.outputPath}"], - "options": { - "outputDir": "dist/storybook/example-lib", - "configDir": "apps/example-lib/.storybook", - "browserTarget": "example-lib:build-storybook", - "styles": [".storybook/custom-styles.scss"], - "stylePreprocessorOptions": { - "includePaths": [ - "libs/design-system/src/lib" - ] - } + }, + "build-storybook": { + "executor": "@storybook/angular:build-storybook", + "outputs": ["{options.outputPath}"], + "options": { + "outputDir": "dist/storybook/example-lib", + "configDir": "apps/example-lib/.storybook", + "browserTarget": "example-lib:build-storybook", + "styles": [".storybook/custom-styles.scss"], + "stylePreprocessorOptions": { + "includePaths": [ + "libs/design-system/src/lib" + ] } } + }, + } ``` When Nx runs, it will load Storybook's configuration and styling based on [`storybook.browserTarget`](https://nx.dev/storybook/extra-topics-for-angular-projects#setting-up-browsertarget). diff --git a/docs/configure/telemetry.mdx b/docs/configure/telemetry.mdx index d4c3af5804da..56a6ef8cc707 100644 --- a/docs/configure/telemetry.mdx +++ b/docs/configure/telemetry.mdx @@ -1,5 +1,6 @@ --- title: 'Telemetry' +hideRendererSelector: true sidebar: order: 3 title: Telemetry @@ -163,7 +164,7 @@ In the future, we plan to share relevant data with the community through public ## How to opt-out -You may opt-out of the telemetry by setting Storybook's configuration element `disableTelemetry` to `true`, using the `--disable-telemetry` flag, or setting the environment variable`STORYBOOK_DISABLE_TELEMETRY` to `1`. For example: +You may opt out of the telemetry within your Storybook configuration by setting the `disableTelemetry` configuration element to `true`. {/* prettier-ignore-start */} @@ -171,13 +172,29 @@ You may opt-out of the telemetry by setting Storybook's configuration element `d {/* prettier-ignore-end */} +If necessary, you can also turn off telemetry via the command line with the `--disable-telemetry` flag. + +{/* prettier-ignore-start */} + + + +{/* prettier-ignore-end */} + +Or via the `STORYBOOK_DISABLE_TELEMETRY` environment variable. + +{/* prettier-ignore-start */} + + + +{/* prettier-ignore-end */} + There is a `boot` event containing no metadata (used to ensure the telemetry is working). It is sent prior to evaluating your [Storybook configuration file](../api/main-config/main-config.mdx) (i.e., `main.js|ts`), so it is unaffected by the `disableTelemetry` option. If you want to ensure that the event is not sent, use the `STORYBOOK_DISABLE_TELEMETRY` environment variable. ## Crash reports (disabled by default) -In addition to general usage telemetry, you may also choose to share crash reports. Storybook will then sanitize the error object (removing all user paths) and append it to the telemetry event. To enable crash reporting, you can set the `enableCrashReports` configuration element to `true`, using the `--enable-crash-reports` flag, or set the `STORYBOOK_ENABLE_CRASH_REPORTS` environment variable to `1`. For example: +In addition to general usage telemetry, you may also choose to share crash reports. Storybook will then sanitize the error object (removing all user paths) and append it to the telemetry event. To enable crash reporting, you can set the `enableCrashReports` configuration element to `true`. {/* prettier-ignore-start */} @@ -185,7 +202,23 @@ In addition to general usage telemetry, you may also choose to share crash repor {/* prettier-ignore-end */} -Generates the following item in the telemetry event: +You can also enable crash reporting via the command line with the `--enable-crash-reports` flag. + +{/* prettier-ignore-start */} + + + +{/* prettier-ignore-end */} + +Or by setting the `STORYBOOK_ENABLE_CRASH_REPORTS` environment variable to `1`. + +{/* prettier-ignore-start */} + + + +{/* prettier-ignore-end */} + +Enabling any of the options will generate the following item in the telemetry event: {/* prettier-ignore-start */} diff --git a/docs/configure/user-interface/sidebar-and-urls.mdx b/docs/configure/user-interface/sidebar-and-urls.mdx index 55537246e214..8ee6ecd62f3d 100644 --- a/docs/configure/user-interface/sidebar-and-urls.mdx +++ b/docs/configure/user-interface/sidebar-and-urls.mdx @@ -35,7 +35,7 @@ Consider the following story: {/* prettier-ignore-start */} - + {/* prettier-ignore-end */} @@ -45,7 +45,7 @@ It is possible to manually set the story's id, which is helpful if you want to r {/* prettier-ignore-start */} - + {/* prettier-ignore-end */} diff --git a/docs/contribute/RFC.mdx b/docs/contribute/RFC.mdx index 32f1aae9b636..d67f71e9a179 100644 --- a/docs/contribute/RFC.mdx +++ b/docs/contribute/RFC.mdx @@ -1,5 +1,6 @@ --- title: 'RFC process' +hideRendererSelector: true sidebar: order: 1 title: RFC process @@ -55,4 +56,4 @@ This RFC process took heavy inspiration from the RFC processes from [Rust](https * [Code](./code.mdx) for features and bug fixes * [Frameworks](./framework.mdx) to get started with a new framework * [Documentation](./documentation/documentation-updates.mdx) for documentation improvements, typos, and clarifications -* [Examples](./documentation/new-snippets.mdx) for new snippets and examples +* [Examples](./documentation/new-snippets.mdx) for new snippets diff --git a/docs/contribute/code.mdx b/docs/contribute/code.mdx index 6621bfcea257..51a74533afde 100644 --- a/docs/contribute/code.mdx +++ b/docs/contribute/code.mdx @@ -1,5 +1,6 @@ --- title: 'Code contributions' +hideRendererSelector: true sidebar: order: 2 title: Code @@ -264,4 +265,4 @@ Once the PR is merged, the template will be generated on a nightly cadence and y * Code for features and bug fixes * [Frameworks](./framework.mdx) to get started with a new framework * [Documentation](./documentation/documentation-updates.mdx) for documentation improvements, typos, and clarifications -* [Examples](./documentation/new-snippets.mdx) for new snippets and examples +* [Examples](./documentation/new-snippets.mdx) for new snippets diff --git a/docs/contribute/documentation/documentation-updates.mdx b/docs/contribute/documentation/documentation-updates.mdx index 3e62a5a4d225..51e38f8a523a 100644 --- a/docs/contribute/documentation/documentation-updates.mdx +++ b/docs/contribute/documentation/documentation-updates.mdx @@ -1,5 +1,6 @@ --- title: 'Documentation updates' +hideRendererSelector: true sidebar: order: 1 title: Content @@ -31,4 +32,4 @@ In the Storybook repository, create a pull request that describes changes and in * [Code](../code.mdx) for features and bug fixes * [Frameworks](../framework.mdx) to get started with a new framework * Documentation for documentation improvements, typos, and clarifications -* [Examples](./new-snippets.mdx) for new snippets and examples +* [Examples](./new-snippets.mdx) for new snippets diff --git a/docs/contribute/documentation/new-snippets.mdx b/docs/contribute/documentation/new-snippets.mdx index 1a7cf0c0b601..f70d15f633eb 100644 --- a/docs/contribute/documentation/new-snippets.mdx +++ b/docs/contribute/documentation/new-snippets.mdx @@ -1,5 +1,6 @@ --- title: 'Code snippets contributions' +hideRendererSelector: true sidebar: order: 2 title: Code snippets @@ -9,129 +10,288 @@ Add or update the code snippets in the documentation. This page outlines how the ## Documented frameworks -Storybook maintains code snippets for a [variety of frameworks](../../configure/integration/frameworks-feature-support.mdx). We try to keep them up to date as framework APIs evolve. But it's tricky to keep track of every API change in every framework. +Storybook maintains code snippets for a [variety of frameworks](../../configure/integration/frameworks-feature-support.mdx). We try to keep them up to date as framework APIs evolve. But keeping track of every API change in every framework is tricky. -We welcome community contributions to the code snippets. Here's a matrix of the frameworks we have snippets for. Help us add snippets for your favorite framework. +We welcome community contributions to the code snippets. Here's a matrix of the frameworks for which we have snippets. Help us add snippets for your favorite framework. -| React | Vue 3 | Angular | Web Components | Svelte | Solid | Ember | HTML | Preact | -| ---------------------------------------------------------------------------- | -------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | ----- | ---- | ------ | -| [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/react) | [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/vue) | [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/angular) | [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/web-components) | [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/svelte) | [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/solid) | ❌ | ❌ | ❌ | -## Setup +| React | Vue 3 | Angular | Web Components | Svelte | Solid | Ember | HTML | Preact | Qwik | +| ------ | ----- | --------- | ---------------|--------|--------|-------|------| -------|------| +| ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | -Assuming you've already followed the [local environment guide](../code.mdx#initial-setup), the first thing you need to do is create a branch on your local Storybook monorepo by running the following command: -```shell -git checkout -b code-snippets-for-framework +## Snippet syntax + +The code snippets referenced throughout the Storybook documentation are located in the [`docs/_snippets`](https://github.com/storybookjs/storybook/tree/next/docs/_snippets) directory inside individual Markdown files, containing the [supported frameworks](../../configure/integration/frameworks-feature-support.mdx), features and languages (i.e., JavaScript, MDX, TypeScript). + +### Example + +The following code block demonstrates how to structure a code snippet in the Storybook documentation and the attributes you can use to provide additional context to the code snippet. + +{/* prettier-ignore-start */} + +````md title="docs/_snippets/button-group-story.md" +```ts filename="ButtonGroup.stories.ts" renderer="vue" language="ts" tabTitle="3" +import type { Meta, StoryObj } from '@storybook/vue3'; + +import ButtonGroup from './ButtonGroup.vue'; + +//👇 Imports the Button stories +import * as ButtonStories from './Button.stories'; + +const meta: Meta = { + component: ButtonGroup, +}; + +export default meta; +type Story = StoryObj; + +export const Pair: Story = { + render: (args) => ({ + components: { ButtonGroup }, + setup() { + return { args }; + }, + template: '', + }), + args: { + buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }], + orientation: 'horizontal', + }, +}; +``` +```` + +{/* prettier-ignore-end */} + + +## Common attributes for code snippets + +Following are the attributes you'll use most often in the Storybook documentation code snippets, as well as a brief explanation of each to help you understand the context in which they are used. + +### File name as title + +Most code examples should include a file name so readers can understand which file they relate to and where to paste it into their project. For code examples, include the `filename` attribute wrapped with quotation marks to indicate the file name. This is not required if the example relates to a terminal command. + +{/* prettier-ignore-start */} + +````md title="docs/_snippets/button-stories.md" +```ts filename="Button.stories.ts" ``` +```` -Before adding your snippets, open the `docs` folder with your editor of choice. Get familiarized with the documentation, including how the snippets are organized and their contents. +{/* prettier-ignore-end */} -Then inside the root folder of the Storybook monorepo, run the following command: +### Language configuration -```shell -yarn task +Use the `language` attribute to define the language to which the code snippet applies. The documentation uses this attribute to determine which variant to display (e.g., JavaScript, TypeScript, TypeScript 4.9, MDX). + +{/* prettier-ignore-start */} + +````md title="docs/_snippets/button-stories.md" +```ts filename="Button.stories.ts" language="js|ts|ts-4-9|mdx" ``` +```` -Select the option `Synchronize documentation (sync-docs)` and type the path of your `frontpage` project folder. Now every file change inside the monorepo `docs` folder will be reflected in the frontpage repo at `src/content/docs`. +{/* prettier-ignore-end */} -### Add your first snippet +### Framework-specific code -Now that you're familiar with how the documentation is structured, it's time to add the code snippets. First, go to the `docs/snippets/` folder and create a new directory for your framework of choice (e.g., `ember`). +Use the `renderer` attribute to indicate which of the [supported frameworks](../../configure/integration/frameworks-feature-support.mdx) the code snippet belongs to. -Browse the documentation and look for the code snippets you're willing to contribute. For example, on the [setup page](https://github.com/storybookjs/storybook/blob/next/docs/get-started/setup.mdx), you should see something similar to: +{/* prettier-ignore-start */} -```jsx -// /docs/get-started/setup.md +````md title="docs/_snippets/button-stories.md" +```ts filename="Button.stories.ts" language="ts" renderer="react|vue|angular|web-components|ember|html|svelte|preact|qwik|solid" +``` +```` + +{/* prettier-ignore-end */} + +Alternatively, if you're documenting examples that apply to multiple frameworks, use the `renderer` attribute with the `common` value to indicate that the code snippet is framework-agnostic. {/* prettier-ignore-start */} - +````md title="docs/_snippets/button-stories.md" +```ts filename="Button.stories.ts" language="ts" renderer="common" +``` +```` {/* prettier-ignore-end */} + +### Package manager configuration + +Use the `packageManager` attribute to configure the package manager used in the example from the following options: `npm`, `yarn`, or `pnpm`. + + +{/* prettier-ignore-start */} + +````md title="docs/_snippets/storybook-run-dev.md" +```shell renderer="common" language="js" packageManager="npm|yarn|pnpm" ``` +```` -Create the file `ember/your-component.js.mdx`, similar to the other frameworks, and reference it. +{/* prettier-ignore-end */} -```jsx -// /docs/get-started/setup.md +### Working with multiple snippets +Use the `tabTitle` attribute to indicate the tab title in which the code snippet will be displayed. This attribute should only be used when multiple examples are in a single code snippet file. + {/* prettier-ignore-start */} - +````md title="docs/_snippets/component-decorator.md" +```ts filename="YourConponent.stories.ts" language="ts" renderer="common" tabTitle="Story" +``` +```ts filename=".storybook/preview.ts" language="ts" renderer="common" tabTitle="Storybook configuration" +``` +```` {/* prettier-ignore-end */} + +## Contributing code snippets + +You can start contributing to the Storybook documentation by now that you're familiar with how the documentation is organized, the code snippet's structure, and available options. Assuming that you have already set up your [local development environment](../code.mdx#initial-setup) and are ready to contribute, the following steps will guide you through contributing code snippets to the Storybook documentation. + +Start by creating a new branch on your local Storybook monorepo with the following command: + +{/* prettier-ignore-start */} + +```shell +git checkout -b code-snippets-for-framework ``` + +{/* prettier-ignore-end */} - - Code snippets are divided into various file extensions, if you're contributing a TypeScript file use `.ts.mdx`, or if you're adding JavaScript files use `.js.mdx`. - +Browse the documentation and look for the code snippets you want to contribute. For example, on the [setup page](https://github.com/storybookjs/storybook/blob/next/docs/get-started/setup.mdx) you should see the following: + +{/* prettier-ignore-start */} + + ```jsx title="docs/get-started/setup.mdx" +{/* prettier-ignore-start */} + + + +{/* prettier-ignore-end */} +``` + +{/* prettier-ignore-end */} + + +Open the file inside the `docs/_snippets` directory and adjust the content to match the code snippet you're willing to contribute. For example: + +{/* prettier-ignore-start */} + +````md title="docs/_snippets/your-component.md" +```ts filename="YourComponent.stories.ts" renderer="qwik" language="ts-4-9" +import type { Meta, StoryObj } from 'storybook-framework-qwik'; + +import type { YourComponentProps } from './YourComponent'; + +import { YourComponent } from './YourComponent'; + +//👇 This default export determines where your story goes in the story list +const meta = { + component: YourComponent, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const FirstStory: Story = { + args: { + //👇 The args you need here will depend on your component + }, +}; +``` +```` + +{/* prettier-ignore-end */} Go through the rest of the documentation and repeat the process. -### Preview your work +## Preview your work + +Before submitting your contribution, we encourage you to check your work against the Storybook website. Doing this prevents last-minute issues with the documentation and is also an excellent way for the maintainers to merge faster once you submit the pull request. However, failing to do so will lead one of the maintainers to notify you that your contribution has an issue. -Before submitting your contribution, we advise you to check your work against the Storybook website. Doing this prevents last-minute issues with the documentation and is also an excellent way for the maintainers to merge faster once you submit the pull request. However, failing to do so will lead one of the maintainers to notify you that your contribution has an issue. +Start by forking the Storybook [website repository](https://github.com/storybookjs/web) and cloning it locally. -Start by forking [frontpage repo](https://github.com/storybookjs/frontpage) and cloning it locally. +{/* prettier-ignore-start */} ```shell -git clone https://github.com/your-username/frontpage.git +git clone https://github.com/your-username/web.git ``` + +{/* prettier-ignore-end */} + +Navigate to the `web` directory and install the required dependencies. -Navigate to the `frontpage` directory and install the required dependencies with the following command: +{/* prettier-ignore-start */} ```shell -yarn +npm install ``` -Next, make sure that you have running the `Synchronize documentation (sync-docs)` task from Storybook monorepo. Then, execute the following command to launch the Storybook website. +{/* prettier-ignore-end */} + +We recommend that you generate a website build first to ensure you can preview your changes locally and verify that everything is working as expected. To do so, run the following command: + +{/* prettier-ignore-start */} ```shell -yarn start:docs-only +npm run build:frontpage ``` - - During the start process if there's an issue with the documentation, the process will stop and you'll get a notification. +{/* prettier-ignore-end */} + + + +When executed, this command will retrieve the required files needed to successfully build the Storybook website, including current documentation versions (e.g., `6.5`, `7.6`, `8.x`), and copy them to the `apps/frontpage/docs/` directory, organized by version number. + -Open a browser window to `http://localhost:8000`, click the Docs link, and select your framework from the dropdown. +Run the `sync-docs` command to connect the documentation from the Storybook monorepo to the Storybook website. When prompted, provide the path to your local fork of the Storybook monorepo and the documentation version you're working on. + +{/* prettier-ignore-start */} + +```shell +npm run sync-docs +``` + +{/* prettier-ignore-end */} + +Finally, open a new terminal window and run the `dev` command to start the Storybook website. -![Storybook docs with dropdown](../../_assets/contribute/local-storybook-website-dropdown-optimized.png) +{/* prettier-ignore-start */} + +```shell +npm run dev +``` + +{/* prettier-ignore-end */} + +If all goes well, you should see the Storybook website running. Open a browser window to `http://localhost:3000`, click the Docs link to open the documentation, and select your framework from the dropdown. + +{/* TODO: Record video */} + +