diff --git a/.vscode/settings.json b/.vscode/settings.json index 153d5a3d72b..64101684328 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -18,8 +18,8 @@ "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" }, - "editor.tabSize": 2, "editor.formatOnSave": true, + "editor.tabSize": 2, "eslint.format.enable": true, "eslint.options": { "cache": true, @@ -49,7 +49,15 @@ "files.associations": { "*.js": "javascriptreact" }, + "javascript.preferences.importModuleSpecifier": "relative", + "javascript.preferences.quoteStyle": "single", + "js/ts.implicitProjectConfig.target": "ESNext", "prettier.ignorePath": "./code/.prettierignore", - "typescript.tsdk": "./code/node_modules/typescript/lib", - "storyExplorer.storybookConfigDir": "./code/ui/.storybook" + "storyExplorer.storybookConfigDir": "./code/.storybook", + "typescript.format.enable": false, + "typescript.preferences.importModuleSpecifier": "relative", + "typescript.preferences.preferTypeOnlyAutoImports": true, + "typescript.preferences.quoteStyle": "single", + "typescript.preferGoToSourceDefinition": true, + "typescript.tsdk": "./code/node_modules/typescript/lib" } \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md index c7e5c488874..f2a07504e27 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,91 @@ +## 8.2.1 + +- CPC: Fix type generation - [#28507](https://github.com/storybookjs/storybook/pull/28507), thanks @ndelangen! +- Types: Update type signatures of objects and functions - [#28503](https://github.com/storybookjs/storybook/pull/28503), thanks @valentinpalkovic! + +## 8.2.0 + +Hold onto your hats! Storybook 8.2 has dropped, packed with a treasure trove of new features and bug fixes: + +- 🪝 New test hook `beforeAll` +- 🕹️ Enhanced `play` function +- 📦 Portable stories that let you use your stories in other testing tools +- 🎁 Consolidated dependency to bring you better performance in a smaller package +- ✨ Brand new onboarding experience to get you up to speed quicker +- 💯 Hundreds more improvements + +
+List of all updates + +- Addon Controls: Fix saving on Windows - [#28485](https://github.com/storybookjs/storybook/pull/28485), thanks @ghengeveld! +- Addon Interactions: Use unique keys when rendering array nodes in panel - [#28423](https://github.com/storybookjs/storybook/pull/28423), thanks @yannbf! +- Addon Onboarding: Add icons for dev/test/doc to the splash screen - [#28389](https://github.com/storybookjs/storybook/pull/28389), thanks @ghengeveld! +- Addon Onboarding: New design and flow based on Save from Controls - [#28327](https://github.com/storybookjs/storybook/pull/28327), thanks @ghengeveld! +- Addon Onboarding: Trigger onboarding during init for Vue and Angular projects - [#28482](https://github.com/storybookjs/storybook/pull/28482), thanks @ghengeveld! +- Addon-A11y: Fix property default assignment - [#27224](https://github.com/storybookjs/storybook/pull/27224), thanks @valentinpalkovic! +- Angular: Allow format configuration of custom source preview - [#28305](https://github.com/storybookjs/storybook/pull/28305), thanks @64BitAsura! +- Angular: Allow outputPath object syntax - [#28144](https://github.com/storybookjs/storybook/pull/28144), thanks @valentinpalkovic! +- Angular: Cleanup types - [#27189](https://github.com/storybookjs/storybook/pull/27189), thanks @valentinpalkovic! +- Angular: Fix enableProdMode setting - [#28415](https://github.com/storybookjs/storybook/pull/28415), thanks @valentinpalkovic! +- Angular: Fix wrong detection of standalone components - [#27353](https://github.com/storybookjs/storybook/pull/27353), thanks @dario-baumberger! +- Angular: Introduce preserveSymlink builder option - [#28145](https://github.com/storybookjs/storybook/pull/28145), thanks @valentinpalkovic! +- Angular: Update outputPath default value in angular-cli-webpack.js - [#28418](https://github.com/storybookjs/storybook/pull/28418), thanks @valentinpalkovic! +- Babel: Ensure story files not transpiled earlier than ES2017 - [#28469](https://github.com/storybookjs/storybook/pull/28469), thanks @kasperpeulen! +- Blocks: Fix reference to storybook core - [#28422](https://github.com/storybookjs/storybook/pull/28422), thanks @yannbf! +- Blocks: Prebundle `tocbot` - [#28318](https://github.com/storybookjs/storybook/pull/28318), thanks @shilman! +- Build: Change require/import order, so that import has higher prio if both are specified - [#27730](https://github.com/storybookjs/storybook/pull/27730), thanks @kasperpeulen! +- Build: Ignore ts stories in cra/default-js sandbox - [#28354](https://github.com/storybookjs/storybook/pull/28354), thanks @valentinpalkovic! +- CLI: Add `--no-dev` option to `init` - [#26918](https://github.com/storybookjs/storybook/pull/26918), thanks @fastfrwrd! +- CLI: Add optional `--dev` and `--no-dev` options to `storybook init` CLI - [#26918](https://github.com/storybookjs/storybook/pull/26918), thanks @fastfrwrd! +- CLI: Add support for Nuxt to project init - [#26884](https://github.com/storybookjs/storybook/pull/26884), thanks @tobiasdiez! +- CLI: Fix CLI always asking all automigrations - [#28238](https://github.com/storybookjs/storybook/pull/28238), thanks @ndelangen! +- CLI: Improve error message when fetching CLI version - [#28289](https://github.com/storybookjs/storybook/pull/28289), thanks @yannbf! +- CLI: Include `@storybook/addon-svelte-csf` when initializing new projects - [#27070](https://github.com/storybookjs/storybook/pull/27070), thanks @benmccann! +- CLI: Prebundle get-npm-tarball-url and @ndelangen/get-tarball - [#28481](https://github.com/storybookjs/storybook/pull/28481), thanks @ndelangen! +- Config: Apply JavaScript-only story glob extensions for JavaScript projects - [#28338](https://github.com/storybookjs/storybook/pull/28338), thanks @valentinpalkovic! +- Controls: Fix date picker control validation and assignment - [#26695](https://github.com/storybookjs/storybook/pull/26695), thanks @leeovictor! +- Controls: Fix grouped Radio controls to have the same name - [#23374](https://github.com/storybookjs/storybook/pull/23374), thanks @srapilly! +- Controls: Throttling makes Color control lagging - [#22615](https://github.com/storybookjs/storybook/pull/22615), thanks @gitstart! +- Core: Add context as a property of the context (self-referencing) - [#28353](https://github.com/storybookjs/storybook/pull/28353), thanks @kasperpeulen! +- Core: Add support for `beforeAll` hook - [#28255](https://github.com/storybookjs/storybook/pull/28255), thanks @ghengeveld! +- Core: Fix startup hang caused by watchStorySpecifiers - [#27016](https://github.com/storybookjs/storybook/pull/27016), thanks @heyimalex! +- Core: Make sure StorybookError message shows up in browser console and interactions panel - [#28464](https://github.com/storybookjs/storybook/pull/28464), thanks @kasperpeulen! +- Core: Migrate from `pkg-dir` to `fd-package-json` - [#28270](https://github.com/storybookjs/storybook/pull/28270), thanks @43081j! +- Core: Refactor phases to run in order `loading` -> `rendering` -> `playing` - [#28431](https://github.com/storybookjs/storybook/pull/28431), thanks @kasperpeulen! +- Core: Remove more `.stories.mdx` handling - [#25973](https://github.com/storybookjs/storybook/pull/25973), thanks @JReinhold! +- Core: Remove util dependency - [#28191](https://github.com/storybookjs/storybook/pull/28191), thanks @43081j! +- CPC: Add `CJS` for `core/components` - [#28440](https://github.com/storybookjs/storybook/pull/28440), thanks @ndelangen! +- CPC: Core Package Consolidation - [#27039](https://github.com/storybookjs/storybook/pull/27039), thanks @ndelangen! +- CSF: Automatically extract componentPath - [#24396](https://github.com/storybookjs/storybook/pull/24396), thanks @shilman! +- CSF: Rename `preview.js` `globals` to `initialGlobals` - [#27517](https://github.com/storybookjs/storybook/pull/27517), thanks @shilman! +- Dependencies: Allow esbuild version 0.21.x - [#28245](https://github.com/storybookjs/storybook/pull/28245), thanks @edoardocavazza! +- Dependency: bump `markdown-to-jsx` to v7.4.5 - [#26694](https://github.com/storybookjs/storybook/pull/26694), thanks @xyy94813! +- Dependency: Bump Express.js - [#26680](https://github.com/storybookjs/storybook/pull/26680), thanks @valentinpalkovic! +- Dependency: Remove node-fetch - [#28160](https://github.com/storybookjs/storybook/pull/28160), thanks @yk-kd! +- Dependency: Upgrade `webpack-virtual-modules` to 0.6.0 - [#27102](https://github.com/storybookjs/storybook/pull/27102), thanks @fyodorovandrei! +- Deps: Migrate from `read-pkg-up` to `fd-package-json` - [#28272](https://github.com/storybookjs/storybook/pull/28272), thanks @43081j! +- Docs-tools: Replace `doctrine` with `jsdoc-type-pratt-parser` - [#26305](https://github.com/storybookjs/storybook/pull/26305), thanks @43081j! +- Docs: Filter mount stories from `Stories` block, error when referenced in MDX - [#28434](https://github.com/storybookjs/storybook/pull/28434), thanks @kasperpeulen! +- Docs: Fix `Typeset` Doc block `fontSizes` type - [#26475](https://github.com/storybookjs/storybook/pull/26475), thanks @noranda! +- Index: Fix MDX to override project-level autodocs - [#28461](https://github.com/storybookjs/storybook/pull/28461), thanks @shilman! +- Indexer: Improve locating stories with specials chars in path - [#22110](https://github.com/storybookjs/storybook/pull/22110), thanks @jankoritak! +- Next: Set default targets for next babel config - [#28443](https://github.com/storybookjs/storybook/pull/28443), thanks @kasperpeulen! +- Next.js: Set `env.bugfixes` in SWC so destructuring is never transpiled - [#28363](https://github.com/storybookjs/storybook/pull/28363), thanks @kasperpeulen! +- React: Export ButtonProps and HeaderProps in CLI templates - [#28487](https://github.com/storybookjs/storybook/pull/28487), thanks @valentinpalkovic! +- SWC: Set default targets for swc that align with our esbuild targets - [#28435](https://github.com/storybookjs/storybook/pull/28435), thanks @kasperpeulen! +- Telemetry: Stop prompting about crash reports in CI - [#28433](https://github.com/storybookjs/storybook/pull/28433), thanks @yannbf! +- Test: Add args to `mount` in react, svelte, and vue renderers - [#28385](https://github.com/storybookjs/storybook/pull/28385), thanks @kasperpeulen! +- Test: Add mount property to the story context - [#28383](https://github.com/storybookjs/storybook/pull/28383), thanks @kasperpeulen! +- Test: Enhance the context with canvas when the test package is used - [#28368](https://github.com/storybookjs/storybook/pull/28368), thanks @kasperpeulen! +- Test: Improve MountMustBeDestructuredError error message - [#28468](https://github.com/storybookjs/storybook/pull/28468), thanks @kasperpeulen! +- Test: Reactive spies preserve the this instance - [#28445](https://github.com/storybookjs/storybook/pull/28445), thanks @kasperpeulen! +- Types: Fix type implementation for `CompatibleString` - [#27180](https://github.com/storybookjs/storybook/pull/27180), thanks @sni-J! +- Vite: Fix asset warning by externalizing sb-common-assets font - [#27110](https://github.com/storybookjs/storybook/pull/27110), thanks @valentinpalkovic! +- Vue3: Enable new hydration mismatch compile time flag - [#27192](https://github.com/storybookjs/storybook/pull/27192), thanks @Cherry! +- Webpack5/Vite: Fix sourcemaps - [#27171](https://github.com/storybookjs/storybook/pull/27171), thanks @valentinpalkovic! + +
+ ## 8.1.11 - Telemetry: Detect Node version - [#28299](https://github.com/storybookjs/storybook/pull/28299), thanks @yannbf! @@ -80,102 +168,101 @@ Storybook 8.1 is here with a tone of new features and bug fixes:
List of all updates - - Addon-actions: Fix falsy args printing as object - 22163 - [#26917](https://github.com/storybookjs/storybook/pull/26917), thanks @Fatcat560! - - Addon-docs: Fix MDX compilation with `@vitejs/plugin-react-swc` and plugins - [#26837](https://github.com/storybookjs/storybook/pull/26837), thanks @JReinhold! - - Addon-docs: Fix `providerImportSource` extension - [#26868](https://github.com/storybookjs/storybook/pull/26868), thanks @bashmish! - - Addon-docs: Fix `react-dom/server` imports breaking stories and docs - [#26557](https://github.com/storybookjs/storybook/pull/26557), thanks @JReinhold! - - Addon-docs: Support Stencil based display names in source snippets - [#26592](https://github.com/storybookjs/storybook/pull/26592), thanks @yannbf! - - Addon-docs: Fix `[Object object]` displayName in some JSX components - [#26566](https://github.com/storybookjs/storybook/pull/26566), thanks @yannbf! - - Angular: Add type support for Angular\'s input signals - [#26413](https://github.com/storybookjs/storybook/pull/26413), thanks @valentinpalkovic! - - Angular: Add type support for Angular\'s output signals - [#26546](https://github.com/storybookjs/storybook/pull/26546), thanks @valentinpalkovic! - - API: Add API access to sidebar renderLabel - [#27099](https://github.com/storybookjs/storybook/pull/27099), thanks @shilman! - - Args: Add possibility to mark controls as read-only - [#26577](https://github.com/storybookjs/storybook/pull/26577), thanks @valentinpalkovic! - - Automigrations: Fix name of VTA addon - [#26816](https://github.com/storybookjs/storybook/pull/26816), thanks @valentinpalkovic! - - Automigrations: Add migration note about new react-docgen default - [#26620](https://github.com/storybookjs/storybook/pull/26620), thanks @valentinpalkovic! - - Automigrations: Fix missing support for mts vite config - [#26441](https://github.com/storybookjs/storybook/pull/26441), thanks @drik98! - - Automigrations: Improve react-docgen automigration prompt - [#27106](https://github.com/storybookjs/storybook/pull/27106), thanks @valentinpalkovic! - - Blocks: Add `of` prop to `Subtitle` - [#22552](https://github.com/storybookjs/storybook/pull/22552), thanks @joaonunomota! - - Blocks: Add `of` prop to `Title` - [#23728](https://github.com/storybookjs/storybook/pull/23728), thanks @Sidnioulz! - - CLI: Add --config-dir flag to add command - [#26771](https://github.com/storybookjs/storybook/pull/26771), thanks @eric-blue! - - CLI: Add --config-dir flag to migrate command - [#26721](https://github.com/storybookjs/storybook/pull/26721), thanks @yannbf! - - CLI: Add main.js `docs.autodocs` automigration - [#27089](https://github.com/storybookjs/storybook/pull/27089), thanks @shilman! - - CLI: Add Visual Tests addon install auto-migration when upgrading to 8.0.x - [#26766](https://github.com/storybookjs/storybook/pull/26766), thanks @ndelangen! - - CLI: Automigrate improve upgrade storybook related packages - [#26497](https://github.com/storybookjs/storybook/pull/26497), thanks @ndelangen! - - CLI: Automigrations copy edits - [#26342](https://github.com/storybookjs/storybook/pull/26342), thanks @joevaugh4n! - - CLI: Fix eslint configuration for string `extends` - [#27097](https://github.com/storybookjs/storybook/pull/27097), thanks @shilman! - - CLI: Improve Yarn berry error parsing - [#26616](https://github.com/storybookjs/storybook/pull/26616), thanks @yannbf! - - CLI: Improve `vite-config-file.ts` - [#26375](https://github.com/storybookjs/storybook/pull/26375), thanks @joevaugh4n! - - CLI: Instruct the correct auto-migration command - [#26515](https://github.com/storybookjs/storybook/pull/26515), thanks @ndelangen! - - CLI: Introduce package manager fallback for initializing Storybook in an empty directory with yarn1 - [#26500](https://github.com/storybookjs/storybook/pull/26500), thanks @valentinpalkovic! - - CLI: Throw an error when running upgrade command in incorrect cwd - [#26585](https://github.com/storybookjs/storybook/pull/26585), thanks @yannbf! - - Codemods: Escape filename given as argument - [#26430](https://github.com/storybookjs/storybook/pull/26430), thanks @YukiKitagata! - - Controls: Add Channels API to search for files in the project root - [#26726](https://github.com/storybookjs/storybook/pull/26726), thanks @valentinpalkovic! - - Controls: Added server channel to create a new story - [#26769](https://github.com/storybookjs/storybook/pull/26769), thanks @valentinpalkovic! - - Controls: Add UI to create new story files - [#26875](https://github.com/storybookjs/storybook/pull/26875), thanks @valentinpalkovic! - - Controls: Fix crashing when docgen extraction partially fails - [#26862](https://github.com/storybookjs/storybook/pull/26862), thanks @yannbf! - - Controls: Fix disable condition in ArgControl component - [#26567](https://github.com/storybookjs/storybook/pull/26567), thanks @valentinpalkovic! - - Controls: Fix number controls do not reset - [#26372](https://github.com/storybookjs/storybook/pull/26372), thanks @jiyiru! - - Core: Add `duration` and `onClick` support to Notification API and improve Notification UI - [#26696](https://github.com/storybookjs/storybook/pull/26696), thanks @ghengeveld! - - Core: Drop unneeded `UPDATE_STORY_ARGS` which was for SSv6 - [#25993](https://github.com/storybookjs/storybook/pull/25993), thanks @tmeasday! - - Core: Ensure that simultaneous onStoriesChanged don\'t clobber each other - [#26882](https://github.com/storybookjs/storybook/pull/26882), thanks @tmeasday! - - Core: Fix filters not being applied in WebKit - [#26949](https://github.com/storybookjs/storybook/pull/26949), thanks @JReinhold! - - Core: Fix preloading too early - [#26442](https://github.com/storybookjs/storybook/pull/26442), thanks @ndelangen! - - Core: Implement file formatter - [#26809](https://github.com/storybookjs/storybook/pull/26809), thanks @valentinpalkovic! - - Core: Optimize clearNotification - [#26415](https://github.com/storybookjs/storybook/pull/26415), thanks @ndelangen! - - Core: Save from controls - [#26827](https://github.com/storybookjs/storybook/pull/26827), thanks @ndelangen! - - CSF: Allow default export without title or component attributes - [#26516](https://github.com/storybookjs/storybook/pull/26516), thanks @kasperpeulen! - - CSF: Fix typings for control and other properties of argTypes - [#26824](https://github.com/storybookjs/storybook/pull/26824), thanks @kasperpeulen! - - CSF: Make sure loaders/decorators can be used as array - [#26514](https://github.com/storybookjs/storybook/pull/26514), thanks @kasperpeulen! - - Dependencies: Upgrade @storybook/csf to 0.1.5 - [#26958](https://github.com/storybookjs/storybook/pull/26958), thanks @Cherry! - - Dependencies: Upgrade `@joshwooding/vite-plugin-react-docgen-typescript` to `0.3.1` - [#26673](https://github.com/storybookjs/storybook/pull/26673), thanks @joshwooding! - - Dependencies: Upgrade `ejs` to `3.1.10` - [#27054](https://github.com/storybookjs/storybook/pull/27054), thanks @RiuSalvi! - - Dependencies: Bump es-module-lexer - [#26737](https://github.com/storybookjs/storybook/pull/26737), thanks @valentinpalkovic! - - Dependencies: Update globby dependency - [#26733](https://github.com/storybookjs/storybook/pull/26733), thanks @valentinpalkovic! - - Dependencies: Update postcss-loader in Next.js framework - [#26707](https://github.com/storybookjs/storybook/pull/26707), thanks @valentinpalkovic! - - Doc Tools: Signature Type Error Handling - [#26774](https://github.com/storybookjs/storybook/pull/26774), thanks @ethriel3695! - - Indexer: Escape special characters in storyImport regex - [#22545](https://github.com/storybookjs/storybook/pull/22545), thanks @VojGin! - - Maintenance: Fix performance regressions - [#26411](https://github.com/storybookjs/storybook/pull/26411), thanks @kasperpeulen! - - MDX: Do not transform `http://` links - [#26488](https://github.com/storybookjs/storybook/pull/26488), thanks @JReinhold! - - Next.js: Fix Compatibility with - ## 8.0.10 - MDX: Don't transform `http://` links - [#26488](https://github.com/storybookjs/storybook/pull/26488), thanks @JReinhold! @@ -245,7 +332,7 @@ Storybook 8.1 is here with a tone of new features and bug fixes: - Controls: Fix type summary when table.type unset - [#26283](https://github.com/storybookjs/storybook/pull/26283), thanks @shilman! - Core: Fix addon bundling script - [#26145](https://github.com/storybookjs/storybook/pull/26145), thanks @ndelangen! - Core: Fix fail to load `main.ts` error message - [#26035](https://github.com/storybookjs/storybook/pull/26035), thanks @ndelangen! -- Maintenance: Fix performance regressions - [#26411](https://github.com/storybookjs/storybook/pull/26411), thanks @kasperpeulen! +- Maintenance: Fix performance regressions - [#26411](https://github.com/storybookjs/storybook/pull/26411), thanks @kasperpeulen! ## 8.0.0 diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md index 9e1d00886d6..1fa61452d5e 100644 --- a/CHANGELOG.prerelease.md +++ b/CHANGELOG.prerelease.md @@ -1,3 +1,16 @@ +## 8.3.0-alpha.0 + + +## 8.2.0-beta.3 + +- Addon Controls: Fix saving on Windows - [#28485](https://github.com/storybookjs/storybook/pull/28485), thanks @ghengeveld! +- React: Export ButtonProps and HeaderProps in CLI templates - [#28487](https://github.com/storybookjs/storybook/pull/28487), thanks @valentinpalkovic! + +## 8.2.0-beta.2 + +- Addon Onboarding: Trigger onboarding during init for Vue and Angular projects - [#28482](https://github.com/storybookjs/storybook/pull/28482), thanks @ghengeveld! +- CLI: Prebundle get-npm-tarball-url and @ndelangen/get-tarball - [#28481](https://github.com/storybookjs/storybook/pull/28481), thanks @ndelangen! + ## 8.2.0-beta.1 - Babel: Ensure story files not transpiled earlier than ES2017 - [#28469](https://github.com/storybookjs/storybook/pull/28469), thanks @kasperpeulen! diff --git a/MAINTAINERS.md b/MAINTAINERS.md index e7640a31d10..650a3c0a17a 100644 --- a/MAINTAINERS.md +++ b/MAINTAINERS.md @@ -10,12 +10,12 @@ This document outlines some of the processes that the maintainers should adhere | label name | purpose | | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------- | | accessibility | Issue, bug, or pull request related to accessibility | -| addon:(name) | Issue, bug, or pull request related to Storybook addons (e.g., [Controls](/docs/essentials/controls.md)) | +| addon:(name) | Issue, bug, or pull request related to Storybook addons (e.g., [Controls](/docs/essentials/controls.mdx)) | | app:(name) | Issue, bug, or pull request related to Storybook's supported frameworks (e.g., React) | -| api:(name) | Issue, bug, or pull request related to Storybook's API (e.g.,[makeDecorator](/docs/addons/addons-api.md#makeDecorator-API)) | -| args | Issue, bug, or pull request related to Storybook's [args](/docs/writing-stories/args.md) | +| api:(name) | Issue, bug, or pull request related to Storybook's API (e.g.,[makeDecorator](/docs/addons/addons-api.mdx#makeDecorator-API)) | +| args | Issue, bug, or pull request related to Storybook's [args](/docs/writing-stories/args.mdx) | | babel/webpack | Issue, bug, or pull request related to Storybook's build system (e.g., Webpack or Babel), for Webpack 5 issues see below | -| block:(name) | Issue or bug within a certain surface are of Storybook (e.g., [argsTable](/docs/writing-docs/doc-block-argstable.md)) | +| block:(name) | Issue or bug within a certain surface are of Storybook (e.g., [argTypes](/docs/api/doc-blocks/doc-block-argtypes.mdx)) | | BREAKING CHANGE | Issue or pull request that introduces a breaking change within Storybook's ecosystem. | | BREAKING PRERELASE | Breaking, but only for prerelease users (not relative to the stable release) | | build-storybook | Issue, bug, or pull request related to Storybook's production build | @@ -24,12 +24,12 @@ This document outlines some of the processes that the maintainers should adhere | cli | Issue, bug, or pull request that affects the Storybook's CLI | | compatibility with other tools | Issue, bug, or pull request between Storybook and other tools (e.g., [Nuxt](https://nuxtjs.org/)) | | components | Issue, bug, or pull request related to Storybook's internal components | -| composition | Issue, bug, or pull request related to Storybook [Composition](/docs/sharing/storybook-composition.md) | -| configuration | Issue, bug, or pull request related to Storybook [configuration](/docs/configure/index.md) | +| composition | Issue, bug, or pull request related to Storybook [Composition](/docs/sharing/storybook-composition.mdx) | +| configuration | Issue, bug, or pull request related to Storybook [configuration](/docs/configure/index.mdx) | | core | Issue, bug, or pull request related to Storybook's Core | | cra | Issue, bug, or pull request that affects Storybook's compatibility with Create React APP ([CRA](https://create-react-app.dev/docs/getting-started/)) | -| CSF | Issue, bug, or pull request related to Storybook's [Component Story Format (CSF)](/docs/api/csf.md) | -| decorators | Issue, bug, or pull related to Storybook's [Decorators](/docs/writing-stories/decorators.md) | +| CSF | Issue, bug, or pull request related to Storybook's [Component Story Format (CSF)](/docs/api/csf.mdx) | +| decorators | Issue, bug, or pull related to Storybook's [Decorators](/docs/writing-stories/decorators.mdx) | | dependencies | Issue, bug, or pull request that related to upstream dependencies | | discussion | Issue currently being discussed between the maintainers and community | | do not merge | Pull request that will introduce regressions and will not be merged | @@ -68,7 +68,7 @@ This document outlines some of the processes that the maintainers should adhere | security | Issue, bug, or pull request that addresses security with Storybook | | small | Issue or pull request that requires a small amount of work to be done | | source-loader | Issue, bug, or pull request related to code display within Storybook's stories | -| theming | Issue, bug, or pull request related to Storybook customization (e.g., [theming](/docs/configure/theming.md)) | +| theming | Issue, bug, or pull request related to Storybook customization (e.g., [theming](/docs/configure/user-interface/theming.mdx)) | | todo | Issue or pull request currently being worked on | | typescript | Issue, bug, or pull request related to TypeScript | | ui | Issue, bug, or pull request related to Storybook's UI | diff --git a/code/.eslintrc.js b/code/.eslintrc.js index cb18114a6a9..efb47a4e193 100644 --- a/code/.eslintrc.js +++ b/code/.eslintrc.js @@ -208,6 +208,13 @@ module.exports = { 'local-rules/no-uncategorized-errors': 'warn', }, }, + { + files: ['**/*.ts', '!**/*.test.*', '!**/*.spec.*'], + excludedFiles: ['**/*.test.*'], + rules: { + 'local-rules/storybook-monorepo-imports': 'error', + }, + }, { files: ['./core/src/preview-errors.ts'], excludedFiles: ['**/*.test.*'], diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index 0c2b135f2fe..ebaea076514 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-a11y", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Test component compliance with web accessibility standards", "keywords": [ "a11y", diff --git a/code/addons/a11y/tsconfig.json b/code/addons/a11y/tsconfig.json index 1dc5a72190b..73a65ef2ef6 100644 --- a/code/addons/a11y/tsconfig.json +++ b/code/addons/a11y/tsconfig.json @@ -1,8 +1,5 @@ { "extends": "../../tsconfig.json", - "compilerOptions": { - "skipLibCheck": true, - "strict": true - }, + "compilerOptions": {}, "include": ["src/**/*"] } diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json index bb74b1261a4..dc1cc04c355 100644 --- a/code/addons/actions/package.json +++ b/code/addons/actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-actions", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Get UI feedback when an action is performed on an interactive element", "keywords": [ "storybook", diff --git a/code/addons/actions/src/containers/ActionLogger/index.tsx b/code/addons/actions/src/containers/ActionLogger/index.tsx index 3da9cbe52e7..ff9e5030263 100644 --- a/code/addons/actions/src/containers/ActionLogger/index.tsx +++ b/code/addons/actions/src/containers/ActionLogger/index.tsx @@ -26,7 +26,6 @@ const safeDeepEqual = (a: any, b: any): boolean => { }; export default class ActionLogger extends Component { - // @ts-expect-error Unused, possibly remove, leaving, because it could be accessed even though it is private private mounted: boolean; constructor(props: ActionLoggerProps) { diff --git a/code/addons/actions/tsconfig.json b/code/addons/actions/tsconfig.json index a4429176e35..73a65ef2ef6 100644 --- a/code/addons/actions/tsconfig.json +++ b/code/addons/actions/tsconfig.json @@ -1,7 +1,5 @@ { "extends": "../../tsconfig.json", - "compilerOptions": { - "strict": true - }, + "compilerOptions": {}, "include": ["src/**/*"] } diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json index 74767170716..7199d6d903c 100644 --- a/code/addons/backgrounds/package.json +++ b/code/addons/backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-backgrounds", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Switch backgrounds to view components in different settings", "keywords": [ "addon", diff --git a/code/addons/backgrounds/tsconfig.json b/code/addons/backgrounds/tsconfig.json index b5a2f9a7091..73a65ef2ef6 100644 --- a/code/addons/backgrounds/tsconfig.json +++ b/code/addons/backgrounds/tsconfig.json @@ -1,7 +1,5 @@ { "extends": "../../tsconfig.json", - "include": ["src/**/*"], - "compilerOptions": { - "strict": true - } + "compilerOptions": {}, + "include": ["src/**/*"] } diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json index 36fd6b6d21d..8d2460f22c6 100644 --- a/code/addons/controls/package.json +++ b/code/addons/controls/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-controls", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Interact with component inputs dynamically in the Storybook UI", "keywords": [ "addon", diff --git a/code/addons/controls/tsconfig.json b/code/addons/controls/tsconfig.json index a4429176e35..73a65ef2ef6 100644 --- a/code/addons/controls/tsconfig.json +++ b/code/addons/controls/tsconfig.json @@ -1,7 +1,5 @@ { "extends": "../../tsconfig.json", - "compilerOptions": { - "strict": true - }, + "compilerOptions": {}, "include": ["src/**/*"] } diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index b7b1688a099..8edc0d1a806 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-docs", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Document component usage and properties in Markdown", "keywords": [ "addon", diff --git a/code/addons/docs/tsconfig.json b/code/addons/docs/tsconfig.json index 1dc5a72190b..73a65ef2ef6 100644 --- a/code/addons/docs/tsconfig.json +++ b/code/addons/docs/tsconfig.json @@ -1,8 +1,5 @@ { "extends": "../../tsconfig.json", - "compilerOptions": { - "skipLibCheck": true, - "strict": true - }, + "compilerOptions": {}, "include": ["src/**/*"] } diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json index 855c692d634..d4ddbcff684 100644 --- a/code/addons/essentials/package.json +++ b/code/addons/essentials/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-essentials", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Curated addons to bring out the best of Storybook", "keywords": [ "addon", diff --git a/code/addons/essentials/tsconfig.json b/code/addons/essentials/tsconfig.json index a4429176e35..73a65ef2ef6 100644 --- a/code/addons/essentials/tsconfig.json +++ b/code/addons/essentials/tsconfig.json @@ -1,7 +1,5 @@ { "extends": "../../tsconfig.json", - "compilerOptions": { - "strict": true - }, + "compilerOptions": {}, "include": ["src/**/*"] } diff --git a/code/addons/gfm/package.json b/code/addons/gfm/package.json index a04b0c70c7d..dd4ff4c3d8e 100644 --- a/code/addons/gfm/package.json +++ b/code/addons/gfm/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-mdx-gfm", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "GitHub Flavored Markdown in Storybook", "keywords": [ "addon", diff --git a/code/addons/gfm/tsconfig.json b/code/addons/gfm/tsconfig.json index 1dc5a72190b..73a65ef2ef6 100644 --- a/code/addons/gfm/tsconfig.json +++ b/code/addons/gfm/tsconfig.json @@ -1,8 +1,5 @@ { "extends": "../../tsconfig.json", - "compilerOptions": { - "skipLibCheck": true, - "strict": true - }, + "compilerOptions": {}, "include": ["src/**/*"] } diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json index 7761ed7076d..39c938c555c 100644 --- a/code/addons/highlight/package.json +++ b/code/addons/highlight/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-highlight", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Highlight DOM nodes within your stories", "keywords": [ "storybook-addons", diff --git a/code/addons/highlight/tsconfig.json b/code/addons/highlight/tsconfig.json index e0354bb7bcc..73a65ef2ef6 100644 --- a/code/addons/highlight/tsconfig.json +++ b/code/addons/highlight/tsconfig.json @@ -1,8 +1,5 @@ { "extends": "../../tsconfig.json", - "compilerOptions": { - "types": ["webpack-env"], - "strict": true - }, + "compilerOptions": {}, "include": ["src/**/*"] } diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json index 9e53984a85f..6a9812ae79b 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-interactions", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Automate, test and debug user interactions", "keywords": [ "storybook-addons", diff --git a/code/addons/interactions/tsconfig.json b/code/addons/interactions/tsconfig.json index a6f65038a17..a7d41e8a79b 100644 --- a/code/addons/interactions/tsconfig.json +++ b/code/addons/interactions/tsconfig.json @@ -1,7 +1,6 @@ { "extends": "../../tsconfig.json", "compilerOptions": { - "skipLibCheck": true, "strict": false }, "include": ["src/**/*"] diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json index bb8a294ae71..ee2c153f25c 100644 --- a/code/addons/jest/package.json +++ b/code/addons/jest/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-jest", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "React storybook addon that show component jest report", "keywords": [ "addon", diff --git a/code/addons/jest/tsconfig.json b/code/addons/jest/tsconfig.json index a4429176e35..73a65ef2ef6 100644 --- a/code/addons/jest/tsconfig.json +++ b/code/addons/jest/tsconfig.json @@ -1,7 +1,5 @@ { "extends": "../../tsconfig.json", - "compilerOptions": { - "strict": true - }, + "compilerOptions": {}, "include": ["src/**/*"] } diff --git a/code/addons/links/package.json b/code/addons/links/package.json index baa7633a9b1..ffdc2edc3b0 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-links", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Link stories together to build demos and prototypes with your UI components", "keywords": [ "addon", diff --git a/code/addons/links/tsconfig.json b/code/addons/links/tsconfig.json index 5b3f3a56a68..73a65ef2ef6 100644 --- a/code/addons/links/tsconfig.json +++ b/code/addons/links/tsconfig.json @@ -1,8 +1,5 @@ { "extends": "../../tsconfig.json", - "compilerOptions": { - "strict": true, - "skipLibCheck": true - }, + "compilerOptions": {}, "include": ["src/**/*"] } diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json index 7ea6e636b90..b31b31e8b2e 100644 --- a/code/addons/measure/package.json +++ b/code/addons/measure/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-measure", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Inspect layouts by visualizing the box model", "keywords": [ "storybook-addons", diff --git a/code/addons/measure/tsconfig.json b/code/addons/measure/tsconfig.json index b5a2f9a7091..73a65ef2ef6 100644 --- a/code/addons/measure/tsconfig.json +++ b/code/addons/measure/tsconfig.json @@ -1,7 +1,5 @@ { "extends": "../../tsconfig.json", - "include": ["src/**/*"], - "compilerOptions": { - "strict": true - } + "compilerOptions": {}, + "include": ["src/**/*"] } diff --git a/code/addons/onboarding/package.json b/code/addons/onboarding/package.json index 5c0c207cca7..bb22179dbc1 100644 --- a/code/addons/onboarding/package.json +++ b/code/addons/onboarding/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-onboarding", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Storybook Addon Onboarding - Introduces a new onboarding experience", "keywords": [ "storybook-addons", diff --git a/code/addons/onboarding/tsconfig.json b/code/addons/onboarding/tsconfig.json index a4429176e35..73a65ef2ef6 100644 --- a/code/addons/onboarding/tsconfig.json +++ b/code/addons/onboarding/tsconfig.json @@ -1,7 +1,5 @@ { "extends": "../../tsconfig.json", - "compilerOptions": { - "strict": true - }, + "compilerOptions": {}, "include": ["src/**/*"] } diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json index 7876407e9b2..c5d87b4333c 100644 --- a/code/addons/outline/package.json +++ b/code/addons/outline/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-outline", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Outline all elements with CSS to help with layout placement and alignment", "keywords": [ "storybook-addons", diff --git a/code/addons/outline/tsconfig.json b/code/addons/outline/tsconfig.json index b5a2f9a7091..73a65ef2ef6 100644 --- a/code/addons/outline/tsconfig.json +++ b/code/addons/outline/tsconfig.json @@ -1,7 +1,5 @@ { "extends": "../../tsconfig.json", - "include": ["src/**/*"], - "compilerOptions": { - "strict": true - } + "compilerOptions": {}, + "include": ["src/**/*"] } diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json index cdc1b16d0cf..a5ad958fa00 100644 --- a/code/addons/storysource/package.json +++ b/code/addons/storysource/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storysource", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "View a story’s source code to see how it works and paste into your app", "keywords": [ "addon", diff --git a/code/addons/storysource/tsconfig.json b/code/addons/storysource/tsconfig.json index 1dc5a72190b..73a65ef2ef6 100644 --- a/code/addons/storysource/tsconfig.json +++ b/code/addons/storysource/tsconfig.json @@ -1,8 +1,5 @@ { "extends": "../../tsconfig.json", - "compilerOptions": { - "skipLibCheck": true, - "strict": true - }, + "compilerOptions": {}, "include": ["src/**/*"] } diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json index 63079373e3f..20776833b48 100644 --- a/code/addons/themes/package.json +++ b/code/addons/themes/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-themes", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Switch between multiple themes for you components in Storybook", "keywords": [ "css", diff --git a/code/addons/themes/tsconfig.json b/code/addons/themes/tsconfig.json index b5a2f9a7091..73a65ef2ef6 100644 --- a/code/addons/themes/tsconfig.json +++ b/code/addons/themes/tsconfig.json @@ -1,7 +1,5 @@ { "extends": "../../tsconfig.json", - "include": ["src/**/*"], - "compilerOptions": { - "strict": true - } + "compilerOptions": {}, + "include": ["src/**/*"] } diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json index 07fb88a9cf8..614745a5f46 100644 --- a/code/addons/toolbars/package.json +++ b/code/addons/toolbars/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-toolbars", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Create your own toolbar items that control story rendering", "keywords": [ "addon", diff --git a/code/addons/toolbars/tsconfig.json b/code/addons/toolbars/tsconfig.json index a4429176e35..73a65ef2ef6 100644 --- a/code/addons/toolbars/tsconfig.json +++ b/code/addons/toolbars/tsconfig.json @@ -1,7 +1,5 @@ { "extends": "../../tsconfig.json", - "compilerOptions": { - "strict": true - }, + "compilerOptions": {}, "include": ["src/**/*"] } diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json index c6021f97f40..32b29f79e6a 100644 --- a/code/addons/viewport/package.json +++ b/code/addons/viewport/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-viewport", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Build responsive components by adjusting Storybook’s viewport size and orientation", "keywords": [ "addon", diff --git a/code/addons/viewport/tsconfig.json b/code/addons/viewport/tsconfig.json index b5a2f9a7091..73a65ef2ef6 100644 --- a/code/addons/viewport/tsconfig.json +++ b/code/addons/viewport/tsconfig.json @@ -1,7 +1,5 @@ { "extends": "../../tsconfig.json", - "include": ["src/**/*"], - "compilerOptions": { - "strict": true - } + "compilerOptions": {}, + "include": ["src/**/*"] } diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json index 900b7cc0d56..9db90a1648a 100644 --- a/code/builders/builder-vite/package.json +++ b/code/builders/builder-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-vite", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "A plugin to run and build Storybooks with Vite", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme", "bugs": { diff --git a/code/builders/builder-vite/tsconfig.json b/code/builders/builder-vite/tsconfig.json index d3576aa8f72..73a65ef2ef6 100644 --- a/code/builders/builder-vite/tsconfig.json +++ b/code/builders/builder-vite/tsconfig.json @@ -1,9 +1,5 @@ { "extends": "../../tsconfig.json", - "compilerOptions": { - "strict": true, - "resolveJsonModule": true, - "skipLibCheck": true - }, + "compilerOptions": {}, "include": ["src/**/*"] } diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json index 66679e28019..f6c854d55ed 100644 --- a/code/builders/builder-webpack5/package.json +++ b/code/builders/builder-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-webpack5", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/builders/builder-webpack5/tsconfig.json b/code/builders/builder-webpack5/tsconfig.json index 5b3f3a56a68..73a65ef2ef6 100644 --- a/code/builders/builder-webpack5/tsconfig.json +++ b/code/builders/builder-webpack5/tsconfig.json @@ -1,8 +1,5 @@ { "extends": "../../tsconfig.json", - "compilerOptions": { - "strict": true, - "skipLibCheck": true - }, + "compilerOptions": {}, "include": ["src/**/*"] } diff --git a/code/core/README.md b/code/core/README.md index 431b588c5d0..52502f70be7 100644 --- a/code/core/README.md +++ b/code/core/README.md @@ -24,3 +24,28 @@ import { addons } from 'storybook/internal/manager-api'; ``` Importing from `@storybook/core` is explicitly NOT supported; it WILL break in a future version of storybook, very likely in a non-major version bump. + +# For maintainers + +## When to use `@storybook/core` + +In the following packages you should import from `@storybook/core` (and ONLY from `@storybook/core`): + +- `@storybook/core` +- `@storybook/codemod` + +To prevent cyclical dependencies, these packages cannot depend on the `storybook` package. + +## When to use `storybook/internal` + +In every other package you should import from `storybook/internal` (and ONLY from `storybook/internal`). + +The heuristic is simple: + +> If you see a peerDependency on `storybook` in the `package.json` of the package you are working on, you should import from `storybook/internal`. + +## The 1 exception: the `storybook` package itself + +The sole exception is the `storybook` package itself. + +Obviously, the `storybook` package cannot depend on itself, so it must import from `@storybook/core`. diff --git a/code/core/package.json b/code/core/package.json index 2c63706adc1..a9650bfa813 100644 --- a/code/core/package.json +++ b/code/core/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/core/scripts/check.ts b/code/core/scripts/check.ts index b44f2c4febf..ca51bcf847f 100644 --- a/code/core/scripts/check.ts +++ b/code/core/scripts/check.ts @@ -1,6 +1,6 @@ import { getTSFilesAndConfig, getTSProgramAndHost, getTSDiagnostics } from './helpers/typescript'; -const tsconfigPath = 'tsconfig.check.json'; +const tsconfigPath = 'tsconfig.json'; const { options, fileNames } = getTSFilesAndConfig(tsconfigPath); const { program, host } = getTSProgramAndHost(fileNames, options); diff --git a/code/core/scripts/dts.ts b/code/core/scripts/dts.ts index cd4848e0a0d..932a2ae228e 100644 --- a/code/core/scripts/dts.ts +++ b/code/core/scripts/dts.ts @@ -43,7 +43,7 @@ await Promise.all( await dts( i.file, [...external, ...i.externals], - join(import.meta.dirname, '..', 'tsconfig.build.json') + join(import.meta.dirname, '..', 'tsconfig.json') ); }) ); diff --git a/code/core/scripts/helpers/sourcefiles.ts b/code/core/scripts/helpers/sourcefiles.ts index df232a7a9ee..867f401ad15 100644 --- a/code/core/scripts/helpers/sourcefiles.ts +++ b/code/core/scripts/helpers/sourcefiles.ts @@ -54,7 +54,7 @@ async function generateVersionsFile(prettierConfig: prettier.Options | null): Pr } async function generateFrameworksFile(prettierConfig: prettier.Options | null): Promise { - const thirdPartyFrameworks = ['qwik', 'solid', 'nuxt']; + const thirdPartyFrameworks = ['qwik', 'solid']; const location = join( import.meta.dirname, '..', diff --git a/code/core/src/common/js-package-manager/Yarn2Proxy.ts b/code/core/src/common/js-package-manager/Yarn2Proxy.ts index acd1b9bbfcd..0f824262df2 100644 --- a/code/core/src/common/js-package-manager/Yarn2Proxy.ts +++ b/code/core/src/common/js-package-manager/Yarn2Proxy.ts @@ -38,7 +38,6 @@ const CRITICAL_YARN2_ERROR_CODES = { YN0083: 'AUTOMERGE_GIT_ERROR', }; -// @ts-expect-error If we want a code to be parsed, we move from the list below to the list above // Keep the codes here, they might be helpful in the future const YARN2_ERROR_CODES = { ...CRITICAL_YARN2_ERROR_CODES, diff --git a/code/core/src/common/utils/framework-to-renderer.ts b/code/core/src/common/utils/framework-to-renderer.ts index 8efc821a8e4..a34ac765c2c 100644 --- a/code/core/src/common/utils/framework-to-renderer.ts +++ b/code/core/src/common/utils/framework-to-renderer.ts @@ -23,7 +23,6 @@ export const frameworkToRenderer: Record< sveltekit: 'svelte', 'vue3-vite': 'vue3', 'vue3-webpack5': 'vue3', - nuxt: 'vue3', 'web-components-vite': 'web-components', 'web-components-webpack5': 'web-components', // renderers diff --git a/code/core/src/common/versions.ts b/code/core/src/common/versions.ts index 89d090bf9e6..44bb49ad6e5 100644 --- a/code/core/src/common/versions.ts +++ b/code/core/src/common/versions.ts @@ -1,84 +1,84 @@ // auto generated file, do not edit export default { - '@storybook/addon-a11y': '8.2.0-beta.1', - '@storybook/addon-actions': '8.2.0-beta.1', - '@storybook/addon-backgrounds': '8.2.0-beta.1', - '@storybook/addon-controls': '8.2.0-beta.1', - '@storybook/addon-docs': '8.2.0-beta.1', - '@storybook/addon-essentials': '8.2.0-beta.1', - '@storybook/addon-mdx-gfm': '8.2.0-beta.1', - '@storybook/addon-highlight': '8.2.0-beta.1', - '@storybook/addon-interactions': '8.2.0-beta.1', - '@storybook/addon-jest': '8.2.0-beta.1', - '@storybook/addon-links': '8.2.0-beta.1', - '@storybook/addon-measure': '8.2.0-beta.1', - '@storybook/addon-onboarding': '8.2.0-beta.1', - '@storybook/addon-outline': '8.2.0-beta.1', - '@storybook/addon-storysource': '8.2.0-beta.1', - '@storybook/addon-themes': '8.2.0-beta.1', - '@storybook/addon-toolbars': '8.2.0-beta.1', - '@storybook/addon-viewport': '8.2.0-beta.1', - '@storybook/builder-vite': '8.2.0-beta.1', - '@storybook/builder-webpack5': '8.2.0-beta.1', - '@storybook/core': '8.2.0-beta.1', - '@storybook/builder-manager': '8.2.0-beta.1', - '@storybook/channels': '8.2.0-beta.1', - '@storybook/client-logger': '8.2.0-beta.1', - '@storybook/components': '8.2.0-beta.1', - '@storybook/core-common': '8.2.0-beta.1', - '@storybook/core-events': '8.2.0-beta.1', - '@storybook/core-server': '8.2.0-beta.1', - '@storybook/csf-tools': '8.2.0-beta.1', - '@storybook/docs-tools': '8.2.0-beta.1', - '@storybook/manager': '8.2.0-beta.1', - '@storybook/manager-api': '8.2.0-beta.1', - '@storybook/node-logger': '8.2.0-beta.1', - '@storybook/preview': '8.2.0-beta.1', - '@storybook/preview-api': '8.2.0-beta.1', - '@storybook/router': '8.2.0-beta.1', - '@storybook/telemetry': '8.2.0-beta.1', - '@storybook/theming': '8.2.0-beta.1', - '@storybook/types': '8.2.0-beta.1', - '@storybook/angular': '8.2.0-beta.1', - '@storybook/ember': '8.2.0-beta.1', - '@storybook/html-vite': '8.2.0-beta.1', - '@storybook/html-webpack5': '8.2.0-beta.1', - '@storybook/nextjs': '8.2.0-beta.1', - '@storybook/preact-vite': '8.2.0-beta.1', - '@storybook/preact-webpack5': '8.2.0-beta.1', - '@storybook/react-vite': '8.2.0-beta.1', - '@storybook/react-webpack5': '8.2.0-beta.1', - '@storybook/server-webpack5': '8.2.0-beta.1', - '@storybook/svelte-vite': '8.2.0-beta.1', - '@storybook/svelte-webpack5': '8.2.0-beta.1', - '@storybook/sveltekit': '8.2.0-beta.1', - '@storybook/vue3-vite': '8.2.0-beta.1', - '@storybook/vue3-webpack5': '8.2.0-beta.1', - '@storybook/web-components-vite': '8.2.0-beta.1', - '@storybook/web-components-webpack5': '8.2.0-beta.1', - '@storybook/blocks': '8.2.0-beta.1', - storybook: '8.2.0-beta.1', - sb: '8.2.0-beta.1', - '@storybook/cli': '8.2.0-beta.1', - '@storybook/codemod': '8.2.0-beta.1', - '@storybook/core-webpack': '8.2.0-beta.1', - '@storybook/csf-plugin': '8.2.0-beta.1', - '@storybook/instrumenter': '8.2.0-beta.1', - '@storybook/react-dom-shim': '8.2.0-beta.1', - '@storybook/source-loader': '8.2.0-beta.1', - '@storybook/test': '8.2.0-beta.1', - '@storybook/preset-create-react-app': '8.2.0-beta.1', - '@storybook/preset-html-webpack': '8.2.0-beta.1', - '@storybook/preset-preact-webpack': '8.2.0-beta.1', - '@storybook/preset-react-webpack': '8.2.0-beta.1', - '@storybook/preset-server-webpack': '8.2.0-beta.1', - '@storybook/preset-svelte-webpack': '8.2.0-beta.1', - '@storybook/preset-vue3-webpack': '8.2.0-beta.1', - '@storybook/html': '8.2.0-beta.1', - '@storybook/preact': '8.2.0-beta.1', - '@storybook/react': '8.2.0-beta.1', - '@storybook/server': '8.2.0-beta.1', - '@storybook/svelte': '8.2.0-beta.1', - '@storybook/vue3': '8.2.0-beta.1', - '@storybook/web-components': '8.2.0-beta.1', + '@storybook/addon-a11y': '8.3.0-alpha.0', + '@storybook/addon-actions': '8.3.0-alpha.0', + '@storybook/addon-backgrounds': '8.3.0-alpha.0', + '@storybook/addon-controls': '8.3.0-alpha.0', + '@storybook/addon-docs': '8.3.0-alpha.0', + '@storybook/addon-essentials': '8.3.0-alpha.0', + '@storybook/addon-mdx-gfm': '8.3.0-alpha.0', + '@storybook/addon-highlight': '8.3.0-alpha.0', + '@storybook/addon-interactions': '8.3.0-alpha.0', + '@storybook/addon-jest': '8.3.0-alpha.0', + '@storybook/addon-links': '8.3.0-alpha.0', + '@storybook/addon-measure': '8.3.0-alpha.0', + '@storybook/addon-onboarding': '8.3.0-alpha.0', + '@storybook/addon-outline': '8.3.0-alpha.0', + '@storybook/addon-storysource': '8.3.0-alpha.0', + '@storybook/addon-themes': '8.3.0-alpha.0', + '@storybook/addon-toolbars': '8.3.0-alpha.0', + '@storybook/addon-viewport': '8.3.0-alpha.0', + '@storybook/builder-vite': '8.3.0-alpha.0', + '@storybook/builder-webpack5': '8.3.0-alpha.0', + '@storybook/core': '8.3.0-alpha.0', + '@storybook/builder-manager': '8.3.0-alpha.0', + '@storybook/channels': '8.3.0-alpha.0', + '@storybook/client-logger': '8.3.0-alpha.0', + '@storybook/components': '8.3.0-alpha.0', + '@storybook/core-common': '8.3.0-alpha.0', + '@storybook/core-events': '8.3.0-alpha.0', + '@storybook/core-server': '8.3.0-alpha.0', + '@storybook/csf-tools': '8.3.0-alpha.0', + '@storybook/docs-tools': '8.3.0-alpha.0', + '@storybook/manager': '8.3.0-alpha.0', + '@storybook/manager-api': '8.3.0-alpha.0', + '@storybook/node-logger': '8.3.0-alpha.0', + '@storybook/preview': '8.3.0-alpha.0', + '@storybook/preview-api': '8.3.0-alpha.0', + '@storybook/router': '8.3.0-alpha.0', + '@storybook/telemetry': '8.3.0-alpha.0', + '@storybook/theming': '8.3.0-alpha.0', + '@storybook/types': '8.3.0-alpha.0', + '@storybook/angular': '8.3.0-alpha.0', + '@storybook/ember': '8.3.0-alpha.0', + '@storybook/html-vite': '8.3.0-alpha.0', + '@storybook/html-webpack5': '8.3.0-alpha.0', + '@storybook/nextjs': '8.3.0-alpha.0', + '@storybook/preact-vite': '8.3.0-alpha.0', + '@storybook/preact-webpack5': '8.3.0-alpha.0', + '@storybook/react-vite': '8.3.0-alpha.0', + '@storybook/react-webpack5': '8.3.0-alpha.0', + '@storybook/server-webpack5': '8.3.0-alpha.0', + '@storybook/svelte-vite': '8.3.0-alpha.0', + '@storybook/svelte-webpack5': '8.3.0-alpha.0', + '@storybook/sveltekit': '8.3.0-alpha.0', + '@storybook/vue3-vite': '8.3.0-alpha.0', + '@storybook/vue3-webpack5': '8.3.0-alpha.0', + '@storybook/web-components-vite': '8.3.0-alpha.0', + '@storybook/web-components-webpack5': '8.3.0-alpha.0', + '@storybook/blocks': '8.3.0-alpha.0', + storybook: '8.3.0-alpha.0', + sb: '8.3.0-alpha.0', + '@storybook/cli': '8.3.0-alpha.0', + '@storybook/codemod': '8.3.0-alpha.0', + '@storybook/core-webpack': '8.3.0-alpha.0', + '@storybook/csf-plugin': '8.3.0-alpha.0', + '@storybook/instrumenter': '8.3.0-alpha.0', + '@storybook/react-dom-shim': '8.3.0-alpha.0', + '@storybook/source-loader': '8.3.0-alpha.0', + '@storybook/test': '8.3.0-alpha.0', + '@storybook/preset-create-react-app': '8.3.0-alpha.0', + '@storybook/preset-html-webpack': '8.3.0-alpha.0', + '@storybook/preset-preact-webpack': '8.3.0-alpha.0', + '@storybook/preset-react-webpack': '8.3.0-alpha.0', + '@storybook/preset-server-webpack': '8.3.0-alpha.0', + '@storybook/preset-svelte-webpack': '8.3.0-alpha.0', + '@storybook/preset-vue3-webpack': '8.3.0-alpha.0', + '@storybook/html': '8.3.0-alpha.0', + '@storybook/preact': '8.3.0-alpha.0', + '@storybook/react': '8.3.0-alpha.0', + '@storybook/server': '8.3.0-alpha.0', + '@storybook/svelte': '8.3.0-alpha.0', + '@storybook/vue3': '8.3.0-alpha.0', + '@storybook/web-components': '8.3.0-alpha.0', }; diff --git a/code/core/src/core-server/utils/save-story/save-story.ts b/code/core/src/core-server/utils/save-story/save-story.ts index 9d4c9df841b..8ad7ef738ff 100644 --- a/code/core/src/core-server/utils/save-story/save-story.ts +++ b/code/core/src/core-server/utils/save-story/save-story.ts @@ -35,8 +35,8 @@ const parseArgs = (args: string): Record => // Removes extra newlines between story properties. See https://github.com/benjamn/recast/issues/242 // Only updates the part of the code for the story with the given name. const removeExtraNewlines = (code: string, name: string) => { - const anything = '(.|\r\n|\r|\n)'; // Multiline match for any character. - const newline = '(\r\n|\r|\n)'; // Either newlines or carriage returns may be used in the file. + const anything = '([\\s\\S])'; // Multiline match for any character. + const newline = '(\\r\\n|\\r|\\n)'; // Either newlines or carriage returns may be used in the file. const closing = newline + '};' + newline; // Marks the end of the story definition. const regex = new RegExp( // Looks for an export by the given name, considers the first closing brace on its own line diff --git a/code/core/src/manager-api/version.ts b/code/core/src/manager-api/version.ts index a35aa0e1e31..2010c80e09e 100644 --- a/code/core/src/manager-api/version.ts +++ b/code/core/src/manager-api/version.ts @@ -1 +1 @@ -export const version = '8.2.0-beta.1'; +export const version = '8.3.0-alpha.0'; diff --git a/code/core/src/manager/components/notifications/NotificationItem.tsx b/code/core/src/manager/components/notifications/NotificationItem.tsx index b4450acafdc..f912828783a 100644 --- a/code/core/src/manager/components/notifications/NotificationItem.tsx +++ b/code/core/src/manager/components/notifications/NotificationItem.tsx @@ -59,7 +59,7 @@ const Notification = styled.div<{ duration?: number }>( } ); -const NotificationWithInteractiveStates = styled(Notification)(() => ({ +const NotificationWithInteractiveStates = styled(Notification)({ cursor: 'pointer', border: 'none', outline: 'none', @@ -80,7 +80,7 @@ const NotificationWithInteractiveStates = styled(Notification)(() => ({ boxShadow: 'rgba(2,156,253,1) 0 0 0 1px inset, 0 1px 3px 0 rgba(30,167,253,0.5), 0 2px 5px 0 rgba(0,0,0,0.05), 0 5px 15px 0 rgba(0,0,0,0.1)', }, -})); +}); const NotificationButton = NotificationWithInteractiveStates.withComponent('div'); const NotificationLink = NotificationWithInteractiveStates.withComponent(Link); diff --git a/code/core/src/manager/components/sidebar/SearchResults.tsx b/code/core/src/manager/components/sidebar/SearchResults.tsx index 80d5c43bba7..0259bd2a92e 100644 --- a/code/core/src/manager/components/sidebar/SearchResults.tsx +++ b/code/core/src/manager/components/sidebar/SearchResults.tsx @@ -53,10 +53,10 @@ const IconWrapper = styled.div({ marginTop: 2, }); -const ResultRowContent = styled.div(() => ({ +const ResultRowContent = styled.div({ display: 'flex', flexDirection: 'column', -})); +}); const NoResults = styled.div(({ theme }) => ({ marginTop: 20, diff --git a/code/core/src/manager/globals-runtime.ts b/code/core/src/manager/globals-runtime.ts index 8488b61d746..011cb0f60fd 100644 --- a/code/core/src/manager/globals-runtime.ts +++ b/code/core/src/manager/globals-runtime.ts @@ -20,9 +20,12 @@ global.sendTelemetryError = (error) => { // handle all uncaught errors at the root of the application and log to telemetry global.addEventListener('error', (args) => { + // @ts-expect-error (not Event) const error = args.error || args; global.sendTelemetryError(error); }); + +// @ts-expect-error (not Event) global.addEventListener('unhandledrejection', ({ reason }) => { global.sendTelemetryError(reason); }); diff --git a/code/core/src/types/modules/frameworks.ts b/code/core/src/types/modules/frameworks.ts index 9feef71ffdb..9ae2cc538b5 100644 --- a/code/core/src/types/modules/frameworks.ts +++ b/code/core/src/types/modules/frameworks.ts @@ -18,5 +18,4 @@ export type SupportedFrameworks = | 'web-components-vite' | 'web-components-webpack5' | 'qwik' - | 'solid' - | 'nuxt'; + | 'solid'; diff --git a/code/core/src/types/modules/renderers.ts b/code/core/src/types/modules/renderers.ts index e6fd0f650bf..4fcf0be99d8 100644 --- a/code/core/src/types/modules/renderers.ts +++ b/code/core/src/types/modules/renderers.ts @@ -11,5 +11,4 @@ export type SupportedRenderers = | 'html' | 'web-components' | 'server' - | 'solid' - | 'nuxt'; + | 'solid'; diff --git a/code/core/tsconfig.build.json b/code/core/tsconfig.build.json deleted file mode 100644 index 6ba36add812..00000000000 --- a/code/core/tsconfig.build.json +++ /dev/null @@ -1,14 +0,0 @@ -{ - "extends": "../tsconfig.json", - "compilerOptions": { - "skipLibCheck": true, - "strict": true, - "skipDefaultLibCheck": true, - "moduleResolution": "Bundler", - "resolveJsonModule": true, - "rootDir": ".", - "target": "ES2022", - "module": "ES2022" - }, - "include": ["src/**/*"] -} diff --git a/code/core/tsconfig.check.json b/code/core/tsconfig.check.json deleted file mode 100644 index 91a2ee6744b..00000000000 --- a/code/core/tsconfig.check.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "extends": "../tsconfig.json", - "compilerOptions": { - "skipLibCheck": true, - "strict": true, - "skipDefaultLibCheck": true, - "moduleResolution": "Bundler", - "resolveJsonModule": true, - "target": "ES2022", - "module": "ES2022" - }, - "include": ["src/**/*", "*.d.ts"] -} diff --git a/code/core/tsconfig.json b/code/core/tsconfig.json index abdc7834b51..2dcc611b29a 100644 --- a/code/core/tsconfig.json +++ b/code/core/tsconfig.json @@ -1,12 +1,7 @@ { "extends": "../tsconfig.json", "compilerOptions": { - "skipLibCheck": true, - "strict": true, - "skipDefaultLibCheck": true, - "moduleResolution": "Bundler", "resolveJsonModule": true, - "target": "ES2022", "module": "ES2022" }, "include": ["src/**/*", "scripts/**/*", "*.d.ts"] diff --git a/code/deprecated/builder-manager/package.json b/code/deprecated/builder-manager/package.json index 28ad2c57252..c23a94632c3 100644 --- a/code/deprecated/builder-manager/package.json +++ b/code/deprecated/builder-manager/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-manager", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Storybook manager builder", "keywords": [ "storybook" diff --git a/code/deprecated/channels/package.json b/code/deprecated/channels/package.json index be54147a577..5e355be150c 100644 --- a/code/deprecated/channels/package.json +++ b/code/deprecated/channels/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channels", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/client-logger/package.json b/code/deprecated/client-logger/package.json index beb03d36c3f..3ee33658fc7 100644 --- a/code/deprecated/client-logger/package.json +++ b/code/deprecated/client-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/client-logger", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/components/package.json b/code/deprecated/components/package.json index 3f79d7c40fa..b072d5bd995 100644 --- a/code/deprecated/components/package.json +++ b/code/deprecated/components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/components", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Core Storybook Components", "keywords": [ "storybook" diff --git a/code/deprecated/core-common/package.json b/code/deprecated/core-common/package.json index eb55e694d41..5da58e0d0c0 100644 --- a/code/deprecated/core-common/package.json +++ b/code/deprecated/core-common/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-common", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/deprecated/core-events/package.json b/code/deprecated/core-events/package.json index 008bd01d87b..b99a130b55d 100644 --- a/code/deprecated/core-events/package.json +++ b/code/deprecated/core-events/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-events", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Event names used in storybook core", "keywords": [ "storybook" diff --git a/code/deprecated/core-server/package.json b/code/deprecated/core-server/package.json index 9513e50ace9..5837d503486 100644 --- a/code/deprecated/core-server/package.json +++ b/code/deprecated/core-server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-server", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/deprecated/csf-tools/package.json b/code/deprecated/csf-tools/package.json index abb6b76b735..29bfaee4b14 100644 --- a/code/deprecated/csf-tools/package.json +++ b/code/deprecated/csf-tools/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/csf-tools", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Parse and manipulate CSF and Storybook config files", "keywords": [ "storybook" diff --git a/code/deprecated/docs-tools/package.json b/code/deprecated/docs-tools/package.json index cdb5cac72fe..ba08a4da8fa 100644 --- a/code/deprecated/docs-tools/package.json +++ b/code/deprecated/docs-tools/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/docs-tools", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Shared utility functions for frameworks to implement docs", "keywords": [ "storybook" diff --git a/code/deprecated/manager-api/package.json b/code/deprecated/manager-api/package.json index 3182c262610..028caf13d0b 100644 --- a/code/deprecated/manager-api/package.json +++ b/code/deprecated/manager-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/manager-api", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Core Storybook Manager API & Context", "keywords": [ "storybook" diff --git a/code/deprecated/manager/package.json b/code/deprecated/manager/package.json index e4d63f5fb81..a52d06df984 100644 --- a/code/deprecated/manager/package.json +++ b/code/deprecated/manager/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/manager", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Core Storybook UI", "keywords": [ "storybook" diff --git a/code/deprecated/node-logger/package.json b/code/deprecated/node-logger/package.json index d1821beb647..2258fe6b581 100644 --- a/code/deprecated/node-logger/package.json +++ b/code/deprecated/node-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/node-logger", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/preview-api/package.json b/code/deprecated/preview-api/package.json index b3d8c1271c1..f2744ff9215 100644 --- a/code/deprecated/preview-api/package.json +++ b/code/deprecated/preview-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview-api", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/preview/package.json b/code/deprecated/preview/package.json index 4150c694d07..b19e7fd1a36 100644 --- a/code/deprecated/preview/package.json +++ b/code/deprecated/preview/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/router/package.json b/code/deprecated/router/package.json index 2112a58e95f..c5569f52f46 100644 --- a/code/deprecated/router/package.json +++ b/code/deprecated/router/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/router", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Core Storybook Router", "keywords": [ "storybook" diff --git a/code/deprecated/telemetry/package.json b/code/deprecated/telemetry/package.json index f1f252a7849..b8552ca62b6 100644 --- a/code/deprecated/telemetry/package.json +++ b/code/deprecated/telemetry/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/telemetry", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Telemetry logging for crash reports and usage statistics", "keywords": [ "storybook" diff --git a/code/deprecated/theming/package.json b/code/deprecated/theming/package.json index 7adc475eb51..3d79a749fb7 100644 --- a/code/deprecated/theming/package.json +++ b/code/deprecated/theming/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/theming", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Core Storybook Components", "keywords": [ "storybook" diff --git a/code/deprecated/types/package.json b/code/deprecated/types/package.json index 8d231c35dfb..52b9096ee28 100644 --- a/code/deprecated/types/package.json +++ b/code/deprecated/types/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/types", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Core Storybook TS Types", "keywords": [ "storybook" diff --git a/code/frameworks/angular/README.md b/code/frameworks/angular/README.md index 4bfadb7f16f..34722f37bae 100644 --- a/code/frameworks/angular/README.md +++ b/code/frameworks/angular/README.md @@ -1,3 +1,3 @@ # Storybook for Angular -See [documentation](https://storybook.js.org/docs/8.0/get-started/angular?renderer=angular) for installation instructions, usage examples, APIs, and more. +See [documentation](https://storybook.js.org/docs/get-started/frameworks/angular?renderer=angular) for installation instructions, usage examples, APIs, and more. diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json index 2e714d349d5..120fa1d8bb2 100644 --- a/code/frameworks/angular/package.json +++ b/code/frameworks/angular/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/angular", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.", "keywords": [ "storybook", diff --git a/code/frameworks/angular/tsconfig.build.json b/code/frameworks/angular/tsconfig.build.json index 75efd9abab3..56df8695858 100644 --- a/code/frameworks/angular/tsconfig.build.json +++ b/code/frameworks/angular/tsconfig.build.json @@ -16,7 +16,11 @@ "pretty": true, "noErrorTruncation": true, "listEmittedFiles": false, - "noUnusedLocals": false + "noUnusedLocals": false, + "baseUrl": ".", + "paths": { + "storybook/internal/*": ["../../lib/cli/core/*"] + } }, "include": ["src/**/*", "src/**/*.json"] } diff --git a/code/frameworks/ember/README.md b/code/frameworks/ember/README.md index 774862f546e..7e0d7ac463b 100644 --- a/code/frameworks/ember/README.md +++ b/code/frameworks/ember/README.md @@ -20,13 +20,13 @@ For more information visit: [storybook.js.org](https://storybook.js.org) --- Storybook also comes with a lot of [addons](https://storybook.js.org/addons) and a great API to customize as you wish. -You can also build a [static version](https://storybook.js.org/docs/ember/sharing/publish-storybook) of your Storybook and deploy it anywhere you want. +You can also build a [static version](https://storybook.js.org/docs/sharing/publish-storybook?renderer=ember) of your Storybook and deploy it anywhere you want. ## Docs -- [Basics](https://storybook.js.org/docs/ember/get-started) -- [Configurations](https://storybook.js.org/docs/ember/configure) -- [Addons](https://storybook.js.org/docs/ember/configure/storybook-addons) +- [Basics](https://storybook.js.org/docs/get-started/install?renderer=ember) +- [Configurations](https://storybook.js.org/docs/configure?renderer=ember) +- [Addons](https://storybook.js.org/docs/configure/user-interface/storybook-addons?renderer=ember) ## Working with polyfills diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json index 67c9f8d8dc6..dde834c496d 100644 --- a/code/frameworks/ember/package.json +++ b/code/frameworks/ember/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/ember", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember", "bugs": { diff --git a/code/frameworks/ember/tsconfig.json b/code/frameworks/ember/tsconfig.json index 77832da6336..73a65ef2ef6 100644 --- a/code/frameworks/ember/tsconfig.json +++ b/code/frameworks/ember/tsconfig.json @@ -1,8 +1,5 @@ { "extends": "../../tsconfig.json", - "compilerOptions": { - "strict": true, - "resolveJsonModule": true - }, + "compilerOptions": {}, "include": ["src/**/*"] } diff --git a/code/frameworks/html-vite/README.md b/code/frameworks/html-vite/README.md index b1d04f7a5d6..1dc16f84b61 100644 --- a/code/frameworks/html-vite/README.md +++ b/code/frameworks/html-vite/README.md @@ -1 +1,3 @@ # Storybook for HTML + +See [documentation](https://storybook.js.org/docs) for installation instructions, usage examples, APIs, and more. diff --git a/code/frameworks/html-vite/package.json b/code/frameworks/html-vite/package.json index 96ffe8489dc..bbfe01fb992 100644 --- a/code/frameworks/html-vite/package.json +++ b/code/frameworks/html-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-vite", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Storybook for HTML and Vite: Develop HTML in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/html-vite/tsconfig.json b/code/frameworks/html-vite/tsconfig.json index 145cb732060..18f9fd1b95b 100644 --- a/code/frameworks/html-vite/tsconfig.json +++ b/code/frameworks/html-vite/tsconfig.json @@ -1,11 +1,12 @@ { - "extends": "../../tsconfig.json", "compilerOptions": { - "rootDir": "./src", - "types": ["node"], - "resolveJsonModule": true, - "strict": true + "baseUrl": ".", + "paths": { + "storybook/internal/*": ["../../lib/cli/core/*"] + }, + "rootDir": "./src" }, - "include": ["src/**/*"], - "exclude": ["src/**/*.test.*", "src/**/__testfixtures__/**"] + "exclude": ["src/**/*.test.*", "src/**/__testfixtures__/**"], + "extends": "../../tsconfig.json", + "include": ["src/**/*"] } diff --git a/code/frameworks/html-webpack5/README.md b/code/frameworks/html-webpack5/README.md index 5814bced713..17407c7c2c8 100644 --- a/code/frameworks/html-webpack5/README.md +++ b/code/frameworks/html-webpack5/README.md @@ -27,4 +27,4 @@ run `npm init` and `npm install typescript --save-dev` before initializing story --- Storybook also comes with a lot of [addons](https://storybook.js.org/addons) and a great API to customize as you wish. -You can also build a [static version](https://storybook.js.org/docs/html/sharing/publish-storybook) of your Storybook and deploy it anywhere you want. +You can also build a [static version](https://storybook.js.org/docs/sharing/publish-storybook?renderer=html) of your Storybook and deploy it anywhere you want. diff --git a/code/frameworks/html-webpack5/package.json b/code/frameworks/html-webpack5/package.json index a48f0483e0d..19433e8b8f0 100644 --- a/code/frameworks/html-webpack5/package.json +++ b/code/frameworks/html-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-webpack5", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/html-webpack5/tsconfig.json b/code/frameworks/html-webpack5/tsconfig.json index a4429176e35..73a65ef2ef6 100644 --- a/code/frameworks/html-webpack5/tsconfig.json +++ b/code/frameworks/html-webpack5/tsconfig.json @@ -1,7 +1,5 @@ { "extends": "../../tsconfig.json", - "compilerOptions": { - "strict": true - }, + "compilerOptions": {}, "include": ["src/**/*"] } diff --git a/code/frameworks/nextjs/README.md b/code/frameworks/nextjs/README.md index 87019027ca9..20f009670be 100644 --- a/code/frameworks/nextjs/README.md +++ b/code/frameworks/nextjs/README.md @@ -1,6 +1,6 @@ # Storybook for Next.js -See [documentation](https://storybook.js.org/docs/8.0/get-started/nextjs) for installation instructions, usage examples, APIs, and more. +See [documentation](https://storybook.js.org/docs/get-started/frameworks/nextjs?renderer=react) for installation instructions, usage examples, APIs, and more. ## Acknowledgements diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 9eef0517cf8..0818278761e 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/nextjs", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Storybook for Next.js", "keywords": [ "storybook", diff --git a/code/frameworks/nextjs/src/portable-stories.ts b/code/frameworks/nextjs/src/portable-stories.ts index 52aacbb592b..bc00b0ba9f1 100644 --- a/code/frameworks/nextjs/src/portable-stories.ts +++ b/code/frameworks/nextjs/src/portable-stories.ts @@ -11,6 +11,7 @@ import type { Store_CSFExports, StoriesWithPartialProps, NamedOrDefaultProjectAnnotations, + ComposedStoryFn, } from 'storybook/internal/types'; // ! ATTENTION: This needs to be a relative import so it gets prebundled. This is to avoid ESM issues in Nextjs + Jest setups @@ -80,7 +81,7 @@ export function composeStory( componentAnnotations: Meta, projectAnnotations?: ProjectAnnotations, exportsName?: string -) { +): ComposedStoryFn> { return originalComposeStory( story as StoryAnnotationsOrFn, componentAnnotations, diff --git a/code/frameworks/nextjs/template/cli/ts-3-8/Button.tsx b/code/frameworks/nextjs/template/cli/ts-3-8/Button.tsx index e3cb2f23114..30a6bcb96e4 100644 --- a/code/frameworks/nextjs/template/cli/ts-3-8/Button.tsx +++ b/code/frameworks/nextjs/template/cli/ts-3-8/Button.tsx @@ -1,7 +1,7 @@ import React from 'react'; import './button.css'; -interface ButtonProps { +export interface ButtonProps { /** * Is this the principal call to action on the page? */ diff --git a/code/frameworks/nextjs/template/cli/ts-3-8/Header.tsx b/code/frameworks/nextjs/template/cli/ts-3-8/Header.tsx index c806ddf023e..1bf981a4251 100644 --- a/code/frameworks/nextjs/template/cli/ts-3-8/Header.tsx +++ b/code/frameworks/nextjs/template/cli/ts-3-8/Header.tsx @@ -7,7 +7,7 @@ type User = { name: string; }; -interface HeaderProps { +export interface HeaderProps { user?: User; onLogin?: () => void; onLogout?: () => void; diff --git a/code/frameworks/nextjs/template/cli/ts-4-9/Button.tsx b/code/frameworks/nextjs/template/cli/ts-4-9/Button.tsx index e3cb2f23114..30a6bcb96e4 100644 --- a/code/frameworks/nextjs/template/cli/ts-4-9/Button.tsx +++ b/code/frameworks/nextjs/template/cli/ts-4-9/Button.tsx @@ -1,7 +1,7 @@ import React from 'react'; import './button.css'; -interface ButtonProps { +export interface ButtonProps { /** * Is this the principal call to action on the page? */ diff --git a/code/frameworks/nextjs/template/cli/ts-4-9/Header.tsx b/code/frameworks/nextjs/template/cli/ts-4-9/Header.tsx index c806ddf023e..1bf981a4251 100644 --- a/code/frameworks/nextjs/template/cli/ts-4-9/Header.tsx +++ b/code/frameworks/nextjs/template/cli/ts-4-9/Header.tsx @@ -7,7 +7,7 @@ type User = { name: string; }; -interface HeaderProps { +export interface HeaderProps { user?: User; onLogin?: () => void; onLogout?: () => void; diff --git a/code/frameworks/nextjs/tsconfig.json b/code/frameworks/nextjs/tsconfig.json index 26be65113f8..3b01f80f2c3 100644 --- a/code/frameworks/nextjs/tsconfig.json +++ b/code/frameworks/nextjs/tsconfig.json @@ -1,9 +1,5 @@ { "extends": "../../tsconfig.json", - "compilerOptions": { - "strict": true, - "resolveJsonModule": true, - "skipLibCheck": true - }, + "compilerOptions": {}, "include": ["src/**/*", "template/**/*"] } diff --git a/code/frameworks/preact-vite/README.md b/code/frameworks/preact-vite/README.md index 1e7d742e167..16451b320e0 100644 --- a/code/frameworks/preact-vite/README.md +++ b/code/frameworks/preact-vite/README.md @@ -15,7 +15,7 @@ Follow the prompts after running this command in your Preact project's root dire npx storybook@latest init ``` -[More on getting started with Storybook](https://storybook.js.org/docs/preact/get-started/install) +[More on getting started with Storybook](https://storybook.js.org/docs/get-started/install?renderer=preact) ### In a project with Storybook diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json index 7019609c056..d7344558a42 100644 --- a/code/frameworks/preact-vite/package.json +++ b/code/frameworks/preact-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact-vite", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Storybook for Preact and Vite: Develop Preact components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/preact-vite/tsconfig.json b/code/frameworks/preact-vite/tsconfig.json index 4f493067c0f..e342f997283 100644 --- a/code/frameworks/preact-vite/tsconfig.json +++ b/code/frameworks/preact-vite/tsconfig.json @@ -1,12 +1,13 @@ { - "extends": "../../tsconfig.json", "compilerOptions": { - "rootDir": "./src", - "types": ["node"], - "resolveJsonModule": true, + "baseUrl": ".", "jsx": "react-jsx", "jsxImportSource": "preact", - "strict": true + "paths": { + "storybook/internal/*": ["../../lib/cli/core/*"] + }, + "rootDir": "./src" }, + "extends": "../../tsconfig.json", "include": ["src/**/*"] } diff --git a/code/frameworks/preact-webpack5/README.md b/code/frameworks/preact-webpack5/README.md index eda406d5509..367015b9fc7 100644 --- a/code/frameworks/preact-webpack5/README.md +++ b/code/frameworks/preact-webpack5/README.md @@ -20,10 +20,10 @@ For more information visit: [storybook.js.org](https://storybook.js.org) --- Storybook also comes with a lot of [addons](https://storybook.js.org/addons) and a great API to customize as you wish. -You can also build a [static version](https://storybook.js.org/docs/preact/sharing/publish-storybook) of your Storybook and deploy it anywhere you want. +You can also build a [static version](https://storybook.js.org/docs/sharing/publish-storybook?renderer=preact) of your Storybook and deploy it anywhere you want. ## Docs -- [Basics](https://storybook.js.org/docs/preact/get-started) -- [Configurations](https://storybook.js.org/docs/preact/configure) -- [Addons](https://storybook.js.org/docs/preact/configure/storybook-addons) +- [Basics](https://storybook.js.org/docs/get-started/install?renderer=preact) +- [Configurations](https://storybook.js.org/docs/configure?renderer=preact) +- [Addons](https://storybook.js.org/docs/configure/user-interface/storybook-addons?renderer=preact) diff --git a/code/frameworks/preact-webpack5/package.json b/code/frameworks/preact-webpack5/package.json index f14539ca726..413179dc6fd 100644 --- a/code/frameworks/preact-webpack5/package.json +++ b/code/frameworks/preact-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact-webpack5", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" diff --git a/code/frameworks/preact-webpack5/tsconfig.json b/code/frameworks/preact-webpack5/tsconfig.json index 77832da6336..73a65ef2ef6 100644 --- a/code/frameworks/preact-webpack5/tsconfig.json +++ b/code/frameworks/preact-webpack5/tsconfig.json @@ -1,8 +1,5 @@ { "extends": "../../tsconfig.json", - "compilerOptions": { - "strict": true, - "resolveJsonModule": true - }, + "compilerOptions": {}, "include": ["src/**/*"] } diff --git a/code/frameworks/react-vite/README.md b/code/frameworks/react-vite/README.md index 847119afd03..c6b6e6abf0a 100644 --- a/code/frameworks/react-vite/README.md +++ b/code/frameworks/react-vite/README.md @@ -1,3 +1,3 @@ # Storybook for React & Vite -See [documentation](https://storybook.js.org/docs/8.0/get-started/react-vite?renderer=react) for installation instructions, usage examples, APIs, and more. +See [documentation](https://storybook.js.org/docs/get-started/frameworks/react-vite?renderer=react) for installation instructions, usage examples, APIs, and more. diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index 07deb947a90..320b99cb300 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-vite", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/react-vite/tsconfig.json b/code/frameworks/react-vite/tsconfig.json index 3bfb79fdded..c749496d9a6 100644 --- a/code/frameworks/react-vite/tsconfig.json +++ b/code/frameworks/react-vite/tsconfig.json @@ -1,10 +1,11 @@ { - "extends": "../../tsconfig.json", "compilerOptions": { - "rootDir": "./src", - "types": ["node"], - "resolveJsonModule": true, - "strict": true + "baseUrl": ".", + "paths": { + "storybook/internal/*": ["../../lib/cli/core/*"] + }, + "rootDir": "./src" }, + "extends": "../../tsconfig.json", "include": ["src/**/*"] } diff --git a/code/frameworks/react-webpack5/README.md b/code/frameworks/react-webpack5/README.md index d691444758e..2ff4ff2ebd7 100644 --- a/code/frameworks/react-webpack5/README.md +++ b/code/frameworks/react-webpack5/README.md @@ -1,3 +1,3 @@ # Storybook for React & Webpack -See [documentation](https://storybook.js.org/docs/8.0/get-started/react-webpack5?renderer=react) for installation instructions, usage examples, APIs, and more. +See [documentation](https://storybook.js.org/docs/get-started/frameworks/react-webpack5?renderer=react) for installation instructions, usage examples, APIs, and more. diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json index 24815045fa1..9be13bf40f8 100644 --- a/code/frameworks/react-webpack5/package.json +++ b/code/frameworks/react-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-webpack5", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/react-webpack5/tsconfig.json b/code/frameworks/react-webpack5/tsconfig.json index 77832da6336..73a65ef2ef6 100644 --- a/code/frameworks/react-webpack5/tsconfig.json +++ b/code/frameworks/react-webpack5/tsconfig.json @@ -1,8 +1,5 @@ { "extends": "../../tsconfig.json", - "compilerOptions": { - "strict": true, - "resolveJsonModule": true - }, + "compilerOptions": {}, "include": ["src/**/*"] } diff --git a/code/frameworks/server-webpack5/package.json b/code/frameworks/server-webpack5/package.json index bc0c0781771..20c7176ad11 100644 --- a/code/frameworks/server-webpack5/package.json +++ b/code/frameworks/server-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server-webpack5", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/server-webpack5/tsconfig.json b/code/frameworks/server-webpack5/tsconfig.json index a4429176e35..73a65ef2ef6 100644 --- a/code/frameworks/server-webpack5/tsconfig.json +++ b/code/frameworks/server-webpack5/tsconfig.json @@ -1,7 +1,5 @@ { "extends": "../../tsconfig.json", - "compilerOptions": { - "strict": true - }, + "compilerOptions": {}, "include": ["src/**/*"] } diff --git a/code/frameworks/svelte-vite/README.md b/code/frameworks/svelte-vite/README.md index 1f1dc740151..6aa6211fd44 100644 --- a/code/frameworks/svelte-vite/README.md +++ b/code/frameworks/svelte-vite/README.md @@ -1,3 +1,3 @@ # Storybook for Svelte & Vite -See [documentation](https://storybook.js.org/docs/8.0/get-started/svelte-vite?renderer=svelte) for installation instructions, usage examples, APIs, and more. +See [documentation](https://storybook.js.org/docs/get-started/frameworks/svelte-vite?renderer=svelte) for installation instructions, usage examples, APIs, and more. diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index de03fe559fa..7382460efc6 100644 --- a/code/frameworks/svelte-vite/package.json +++ b/code/frameworks/svelte-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte-vite", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/svelte-vite/tsconfig.json b/code/frameworks/svelte-vite/tsconfig.json index 3bfb79fdded..c749496d9a6 100644 --- a/code/frameworks/svelte-vite/tsconfig.json +++ b/code/frameworks/svelte-vite/tsconfig.json @@ -1,10 +1,11 @@ { - "extends": "../../tsconfig.json", "compilerOptions": { - "rootDir": "./src", - "types": ["node"], - "resolveJsonModule": true, - "strict": true + "baseUrl": ".", + "paths": { + "storybook/internal/*": ["../../lib/cli/core/*"] + }, + "rootDir": "./src" }, + "extends": "../../tsconfig.json", "include": ["src/**/*"] } diff --git a/code/frameworks/svelte-webpack5/README.md b/code/frameworks/svelte-webpack5/README.md index fa37e5b2e74..ab877567e71 100644 --- a/code/frameworks/svelte-webpack5/README.md +++ b/code/frameworks/svelte-webpack5/README.md @@ -1,3 +1,3 @@ # Storybook for Svelte & Webpack -See [documentation](https://storybook.js.org/docs/8.0/get-started/svelte-webpack5?renderer=svelte) for installation instructions, usage examples, APIs, and more. +See [documentation](https://storybook.js.org/docs/get-started/frameworks/svelte-webpack5?renderer=svelte) for installation instructions, usage examples, APIs, and more. diff --git a/code/frameworks/svelte-webpack5/package.json b/code/frameworks/svelte-webpack5/package.json index 4dc4abd6d93..a26b09f0e11 100644 --- a/code/frameworks/svelte-webpack5/package.json +++ b/code/frameworks/svelte-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte-webpack5", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/svelte-webpack5/tsconfig.json b/code/frameworks/svelte-webpack5/tsconfig.json index 77832da6336..73a65ef2ef6 100644 --- a/code/frameworks/svelte-webpack5/tsconfig.json +++ b/code/frameworks/svelte-webpack5/tsconfig.json @@ -1,8 +1,5 @@ { "extends": "../../tsconfig.json", - "compilerOptions": { - "strict": true, - "resolveJsonModule": true - }, + "compilerOptions": {}, "include": ["src/**/*"] } diff --git a/code/frameworks/sveltekit/README.md b/code/frameworks/sveltekit/README.md index 8bb8789a879..6b68bdff732 100644 --- a/code/frameworks/sveltekit/README.md +++ b/code/frameworks/sveltekit/README.md @@ -1,6 +1,6 @@ # Storybook for SvelteKit -See [documentation](https://storybook.js.org/docs/8.0/get-started/sveltekit?renderer=svelte) for installation instructions, usage examples, APIs, and more. +See [documentation](https://storybook.js.org/docs/get-started/frameworks/sveltekit?renderer=svelte) for installation instructions, usage examples, APIs, and more. ## Acknowledgements diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json index 1f05c1fd10d..07428f493a0 100644 --- a/code/frameworks/sveltekit/package.json +++ b/code/frameworks/sveltekit/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/sveltekit", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Storybook for SvelteKit", "keywords": [ "storybook", diff --git a/code/frameworks/sveltekit/tsconfig.json b/code/frameworks/sveltekit/tsconfig.json index 3bfb79fdded..c749496d9a6 100644 --- a/code/frameworks/sveltekit/tsconfig.json +++ b/code/frameworks/sveltekit/tsconfig.json @@ -1,10 +1,11 @@ { - "extends": "../../tsconfig.json", "compilerOptions": { - "rootDir": "./src", - "types": ["node"], - "resolveJsonModule": true, - "strict": true + "baseUrl": ".", + "paths": { + "storybook/internal/*": ["../../lib/cli/core/*"] + }, + "rootDir": "./src" }, + "extends": "../../tsconfig.json", "include": ["src/**/*"] } diff --git a/code/frameworks/vue3-vite/README.md b/code/frameworks/vue3-vite/README.md index 08eb5ae95c1..409d28b424c 100644 --- a/code/frameworks/vue3-vite/README.md +++ b/code/frameworks/vue3-vite/README.md @@ -1,3 +1,3 @@ # Storybook for Vue and Vite -See [documentation](https://storybook.js.org/docs/8.0/get-started/vue3-vite?renderer=vue) for installation instructions, usage examples, APIs, and more. +See [documentation](https://storybook.js.org/docs/get-started/frameworks/vue3-vite?renderer=vue) for installation instructions, usage examples, APIs, and more. diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json index c6a3224a341..f9361e7b775 100644 --- a/code/frameworks/vue3-vite/package.json +++ b/code/frameworks/vue3-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3-vite", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/vue3-vite/tsconfig.json b/code/frameworks/vue3-vite/tsconfig.json index bbd5d9a38f9..c749496d9a6 100644 --- a/code/frameworks/vue3-vite/tsconfig.json +++ b/code/frameworks/vue3-vite/tsconfig.json @@ -1,11 +1,11 @@ { - "extends": "../../tsconfig.json", "compilerOptions": { - "rootDir": "./src", - "types": ["node"], - "skipLibCheck": true, - "resolveJsonModule": true, - "strict": true + "baseUrl": ".", + "paths": { + "storybook/internal/*": ["../../lib/cli/core/*"] + }, + "rootDir": "./src" }, + "extends": "../../tsconfig.json", "include": ["src/**/*"] } diff --git a/code/frameworks/vue3-webpack5/README.md b/code/frameworks/vue3-webpack5/README.md index 79644c76e82..3cbd2a89406 100644 --- a/code/frameworks/vue3-webpack5/README.md +++ b/code/frameworks/vue3-webpack5/README.md @@ -1,3 +1,3 @@ # Storybook for Vue 3 and Webpack -See [documentation](https://storybook.js.org/docs/8.0/get-started/vue3-webpack5?renderer=vue) for installation instructions, usage examples, APIs, and more. +See [documentation](https://storybook.js.org/docs/get-started/frameworks/vue3-webpack5?renderer=vue) for installation instructions, usage examples, APIs, and more. diff --git a/code/frameworks/vue3-webpack5/package.json b/code/frameworks/vue3-webpack5/package.json index b28dcf8431c..41e17adba7a 100644 --- a/code/frameworks/vue3-webpack5/package.json +++ b/code/frameworks/vue3-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3-webpack5", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/vue3-webpack5/tsconfig.json b/code/frameworks/vue3-webpack5/tsconfig.json index a7475d986d4..73a65ef2ef6 100644 --- a/code/frameworks/vue3-webpack5/tsconfig.json +++ b/code/frameworks/vue3-webpack5/tsconfig.json @@ -1,9 +1,5 @@ { "extends": "../../tsconfig.json", - "compilerOptions": { - "resolveJsonModule": true, - "skipLibCheck": true, - "strict": true - }, + "compilerOptions": {}, "include": ["src/**/*"] } diff --git a/code/frameworks/web-components-vite/README.md b/code/frameworks/web-components-vite/README.md index af1a9ffaa85..516a8c1257c 100644 --- a/code/frameworks/web-components-vite/README.md +++ b/code/frameworks/web-components-vite/README.md @@ -1,3 +1,3 @@ # Storybook for Web components & Vite -See [documentation](https://storybook.js.org/docs/8.0/get-started/web-components-vite?renderer=web-components) for installation instructions, usage examples, APIs, and more. +See [documentation](https://storybook.js.org/docs/get-started/frameworks/web-components-vite?renderer=web-components) for installation instructions, usage examples, APIs, and more. diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json index 55a9434cf27..a18fc4d66d4 100644 --- a/code/frameworks/web-components-vite/package.json +++ b/code/frameworks/web-components-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components-vite", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Storybook for web-components and Vite: Develop Web Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/web-components-vite/tsconfig.json b/code/frameworks/web-components-vite/tsconfig.json index 3bfb79fdded..c749496d9a6 100644 --- a/code/frameworks/web-components-vite/tsconfig.json +++ b/code/frameworks/web-components-vite/tsconfig.json @@ -1,10 +1,11 @@ { - "extends": "../../tsconfig.json", "compilerOptions": { - "rootDir": "./src", - "types": ["node"], - "resolveJsonModule": true, - "strict": true + "baseUrl": ".", + "paths": { + "storybook/internal/*": ["../../lib/cli/core/*"] + }, + "rootDir": "./src" }, + "extends": "../../tsconfig.json", "include": ["src/**/*"] } diff --git a/code/frameworks/web-components-webpack5/README.md b/code/frameworks/web-components-webpack5/README.md index d9ee9b9fd38..4c2e0a83bce 100644 --- a/code/frameworks/web-components-webpack5/README.md +++ b/code/frameworks/web-components-webpack5/README.md @@ -1,3 +1,3 @@ # Storybook for Web components & Webpack -See [documentation](https://storybook.js.org/docs/8.0/get-started/web-components-webpack5?renderer=web-components) for installation instructions, usage examples, APIs, and more. +See [documentation](https://storybook.js.org/docs/get-started/frameworks/web-components-webpack5?renderer=web-components) for installation instructions, usage examples, APIs, and more. diff --git a/code/frameworks/web-components-webpack5/package.json b/code/frameworks/web-components-webpack5/package.json index e428e597a35..7a3d01a0901 100644 --- a/code/frameworks/web-components-webpack5/package.json +++ b/code/frameworks/web-components-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components-webpack5", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.", "keywords": [ "lit", diff --git a/code/frameworks/web-components-webpack5/tsconfig.json b/code/frameworks/web-components-webpack5/tsconfig.json index a4429176e35..73a65ef2ef6 100644 --- a/code/frameworks/web-components-webpack5/tsconfig.json +++ b/code/frameworks/web-components-webpack5/tsconfig.json @@ -1,7 +1,5 @@ { "extends": "../../tsconfig.json", - "compilerOptions": { - "strict": true - }, + "compilerOptions": {}, "include": ["src/**/*"] } diff --git a/code/lib/blocks/package.json b/code/lib/blocks/package.json index e558f1a079d..f6a998875be 100644 --- a/code/lib/blocks/package.json +++ b/code/lib/blocks/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/blocks", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Storybook Doc Blocks", "keywords": [ "storybook" @@ -61,6 +61,7 @@ }, "devDependencies": { "@storybook/addon-actions": "workspace:*", + "@storybook/react": "workspace:*", "@storybook/test": "workspace:*", "@types/color-convert": "^2.0.0", "tocbot": "^4.20.1" diff --git a/code/lib/blocks/src/controls/Number.tsx b/code/lib/blocks/src/controls/Number.tsx index fd330406e6e..9d75a80e828 100644 --- a/code/lib/blocks/src/controls/Number.tsx +++ b/code/lib/blocks/src/controls/Number.tsx @@ -62,7 +62,9 @@ export const NumberControl: FC = ({ const htmlElRef = useRef(null); useEffect(() => { - if (forceVisible && htmlElRef.current) htmlElRef.current.select(); + if (forceVisible && htmlElRef.current) { + htmlElRef.current.select(); + } }, [forceVisible]); useEffect(() => { diff --git a/code/lib/blocks/src/controls/Object.tsx b/code/lib/blocks/src/controls/Object.tsx index f6fda6ed8b4..1a1cc0a33c9 100644 --- a/code/lib/blocks/src/controls/Object.tsx +++ b/code/lib/blocks/src/controls/Object.tsx @@ -249,12 +249,15 @@ export const ObjectControl: FC = ({ name, value, onChange, argType const data = useMemo(() => value && cloneDeep(value), [value]); const hasData = data !== null && data !== undefined; const [showRaw, setShowRaw] = useState(!hasData); + const [parseError, setParseError] = useState(null); const readonly = !!argType?.table?.readonly; const updateRaw: (raw: string) => void = useCallback( (raw) => { try { - if (raw) onChange(JSON.parse(raw)); + if (raw) { + onChange(JSON.parse(raw)); + } setParseError(undefined); } catch (e) { setParseError(e); @@ -271,7 +274,9 @@ export const ObjectControl: FC = ({ name, value, onChange, argType const htmlElRef = useRef(null); useEffect(() => { - if (forceVisible && htmlElRef.current) htmlElRef.current.select(); + if (forceVisible && htmlElRef.current) { + htmlElRef.current.select(); + } }, [forceVisible]); if (!hasData) { diff --git a/code/lib/blocks/tsconfig.json b/code/lib/blocks/tsconfig.json index 061b6a53115..9dad87f67d8 100644 --- a/code/lib/blocks/tsconfig.json +++ b/code/lib/blocks/tsconfig.json @@ -1,10 +1,12 @@ { - "extends": "../../tsconfig.json", "compilerOptions": { + "baseUrl": ".", "module": "esnext", - "skipLibCheck": true, - "rootDir": "./src", + "paths": { + "storybook/internal/*": ["../../lib/cli/core/*"] + }, "strict": false }, + "extends": "../../tsconfig.json", "include": ["src/**/*"] } diff --git a/code/lib/cli-sb/package.json b/code/lib/cli-sb/package.json index cb3916aa146..1f8b0cda1a5 100644 --- a/code/lib/cli-sb/package.json +++ b/code/lib/cli-sb/package.json @@ -1,6 +1,6 @@ { "name": "sb", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Storybook CLI", "keywords": [ "storybook" diff --git a/code/lib/cli-storybook/package.json b/code/lib/cli-storybook/package.json index 30236c6e857..4f28285772e 100644 --- a/code/lib/cli-storybook/package.json +++ b/code/lib/cli-storybook/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/cli", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Storybook CLI", "keywords": [ "storybook" diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json index 1bb11955069..3b7f10bf083 100644 --- a/code/lib/cli/package.json +++ b/code/lib/cli/package.json @@ -1,6 +1,6 @@ { "name": "storybook", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Storybook's CLI - install, dev, build, upgrade, and more", "keywords": [ "cli", @@ -282,8 +282,7 @@ ], "scripts": { "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", - "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts", - "sb": "node ./bin/index.js" + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@babel/core": "^7.24.4", diff --git a/code/lib/cli/src/detect.test.ts b/code/lib/cli/src/detect.test.ts index 4ea3d075bab..cf21f8bc423 100644 --- a/code/lib/cli/src/detect.test.ts +++ b/code/lib/cli/src/detect.test.ts @@ -42,28 +42,6 @@ const MOCK_FRAMEWORK_FILES: { }, }, }, - { - name: ProjectType.NUXT, - files: { - 'package.json': { - dependencies: { - nuxt: '^3.11.2', - }, - }, - }, - }, - { - name: ProjectType.NUXT, - files: { - 'package.json': { - dependencies: { - // Nuxt projects may have Vue 3 as an explicit dependency - nuxt: '^3.11.2', - vue: '^3.0.0', - }, - }, - }, - }, { name: ProjectType.VUE3, files: { @@ -456,6 +434,16 @@ describe('Detect', () => { expect(result).toBe(ProjectType.UNDETECTED); }); + // TODO(blaine): Remove once Nuxt3 is supported + it(`UNSUPPORTED for Nuxt framework above version 3.0.0`, () => { + const result = detectFrameworkPreset({ + dependencies: { + nuxt: '3.0.0', + }, + }); + expect(result).toBe(ProjectType.UNSUPPORTED); + }); + // TODO: The mocking in this test causes tests after it to fail it('REACT_SCRIPTS for custom react scripts config', () => { const forkedReactScriptsConfig = { diff --git a/code/lib/cli/src/detect.ts b/code/lib/cli/src/detect.ts index 08489078342..440336f74bb 100644 --- a/code/lib/cli/src/detect.ts +++ b/code/lib/cli/src/detect.ts @@ -120,11 +120,7 @@ export async function detectBuilder(packageManager: JsPackageManager, projectTyp } // REWORK - if ( - webpackConfig || - ((dependencies.webpack || dependencies['@nuxt/webpack-builder']) && - dependencies.vite !== undefined) - ) { + if (webpackConfig || (dependencies.webpack && dependencies.vite !== undefined)) { commandLog('Detected webpack project. Setting builder to webpack')(); return CoreBuilder.Webpack5; } @@ -137,8 +133,6 @@ export async function detectBuilder(packageManager: JsPackageManager, projectTyp case ProjectType.NEXTJS: case ProjectType.EMBER: return CoreBuilder.Webpack5; - case ProjectType.NUXT: - return CoreBuilder.Vite; default: const { builder } = await prompts( { @@ -208,13 +202,6 @@ export async function detectLanguage(packageManager: JsPackageManager) { } else if (semver.lt(typescriptVersion, '3.8.0')) { logger.warn('Detected TypeScript < 3.8, populating with JavaScript examples'); } - } else { - // No direct dependency on TypeScript, but could be a transitive dependency - // This is eg the case for Nuxt projects, which support a recent version of TypeScript - // Check for tsconfig.json (https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) - if (fs.existsSync('tsconfig.json')) { - language = SupportedLanguage.TYPESCRIPT_4_9; - } } return language; diff --git a/code/lib/cli/src/generators/NUXT/index.ts b/code/lib/cli/src/generators/NUXT/index.ts deleted file mode 100644 index 3832f2d6551..00000000000 --- a/code/lib/cli/src/generators/NUXT/index.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { baseGenerator } from '../baseGenerator'; -import type { Generator } from '../types'; - -const generator: Generator = async (packageManager, npmOptions, options) => { - await baseGenerator( - packageManager, - npmOptions, - options, - 'nuxt', - { - extraPackages: async ({ builder }) => { - return ['@nuxtjs/storybook']; - }, - installFrameworkPackages: false, - componentsDestinationPath: './components', - extraMain: { - stories: ['../components/**/*.mdx', '../components/**/*.stories.@(js|jsx|ts|tsx|mdx)'], - }, - }, - 'nuxt' - ); - // Add nuxtjs/storybook to nuxt.config.js - await packageManager.runPackageCommand('nuxi', [ - 'module', - 'add', - '@nuxtjs/storybook', - '--skipInstall', - ]); -}; - -export default generator; diff --git a/code/lib/cli/src/generators/baseGenerator.ts b/code/lib/cli/src/generators/baseGenerator.ts index 2cd67d52d52..26af38afdbf 100644 --- a/code/lib/cli/src/generators/baseGenerator.ts +++ b/code/lib/cli/src/generators/baseGenerator.ts @@ -23,7 +23,6 @@ const defaultOptions: FrameworkOptions = { staticDir: undefined, addScripts: true, addMainFile: true, - addPreviewFile: true, addComponents: true, webpackCompiler: () => undefined, extraMain: undefined, @@ -31,7 +30,6 @@ const defaultOptions: FrameworkOptions = { extensions: undefined, componentsDestinationPath: undefined, storybookConfigFolder: '.storybook', - installFrameworkPackages: true, }; const getBuilderDetails = (builder: string) => { @@ -204,14 +202,12 @@ export async function baseGenerator( staticDir, addScripts, addMainFile, - addPreviewFile, addComponents, extraMain, extensions, storybookConfigFolder, componentsDestinationPath, webpackCompiler, - installFrameworkPackages, } = { ...defaultOptions, ...options, @@ -285,7 +281,7 @@ export async function baseGenerator( const allPackages = [ 'storybook', getExternalFramework(rendererId) ? undefined : `@storybook/${rendererId}`, - ...(installFrameworkPackages ? frameworkPackages : []), + ...frameworkPackages, ...addonPackages, ...(extraPackagesToInstall || []), ].filter(Boolean); @@ -327,9 +323,7 @@ export async function baseGenerator( addDependenciesSpinner.succeed(); } - if (addMainFile || addPreviewFile) { - await fse.ensureDir(`./${storybookConfigFolder}`); - } + await fse.ensureDir(`./${storybookConfigFolder}`); if (addMainFile) { const prefixes = shouldApplyRequireWrapperOnPackageNames @@ -377,14 +371,12 @@ export async function baseGenerator( }); } - if (addPreviewFile) { - await configurePreview({ - frameworkPreviewParts, - storybookConfigFolder: storybookConfigFolder as string, - language, - rendererId, - }); - } + await configurePreview({ + frameworkPreviewParts, + storybookConfigFolder: storybookConfigFolder as string, + language, + rendererId, + }); if (addScripts) { await packageManager.addStorybookCommandInScripts({ diff --git a/code/lib/cli/src/generators/types.ts b/code/lib/cli/src/generators/types.ts index 6040840a395..d1478019be0 100644 --- a/code/lib/cli/src/generators/types.ts +++ b/code/lib/cli/src/generators/types.ts @@ -22,7 +22,6 @@ export interface FrameworkOptions { staticDir?: string; addScripts?: boolean; addMainFile?: boolean; - addPreviewFile?: boolean; addComponents?: boolean; webpackCompiler?: ({ builder }: { builder: Builder }) => 'babel' | 'swc' | undefined; extraMain?: any; @@ -30,7 +29,6 @@ export interface FrameworkOptions { framework?: Record; storybookConfigFolder?: string; componentsDestinationPath?: string; - installFrameworkPackages?: boolean; } export type Generator = ( diff --git a/code/lib/cli/src/helpers.ts b/code/lib/cli/src/helpers.ts index 7507d97a9fb..cffea359a87 100644 --- a/code/lib/cli/src/helpers.ts +++ b/code/lib/cli/src/helpers.ts @@ -143,7 +143,6 @@ export const frameworkToDefaultBuilder: Record 'html-vite': CoreBuilder.Vite, 'html-webpack5': CoreBuilder.Webpack5, nextjs: CoreBuilder.Webpack5, - nuxt: CoreBuilder.Vite, 'preact-vite': CoreBuilder.Vite, 'preact-webpack5': CoreBuilder.Webpack5, qwik: CoreBuilder.Vite, diff --git a/code/lib/cli/src/initiate.ts b/code/lib/cli/src/initiate.ts index c595b524149..747e2c6f6ea 100644 --- a/code/lib/cli/src/initiate.ts +++ b/code/lib/cli/src/initiate.ts @@ -28,7 +28,6 @@ import reactNativeGenerator from './generators/REACT_NATIVE'; import reactScriptsGenerator from './generators/REACT_SCRIPTS'; import nextjsGenerator from './generators/NEXTJS'; import vue3Generator from './generators/VUE3'; -import nuxtGenerator from './generators/NUXT'; import webpackReactGenerator from './generators/WEBPACK_REACT'; import htmlGenerator from './generators/HTML'; import webComponentsGenerator from './generators/WEB-COMPONENTS'; @@ -110,11 +109,6 @@ const installStorybook = async ( commandLog('Adding Storybook support to your "Vue 3" app') ); - case ProjectType.NUXT: - return nuxtGenerator(packageManager, npmOptions, generatorOptions).then( - commandLog('Adding Storybook support to your "Nuxt" app') - ); - case ProjectType.ANGULAR: commandLog('Adding Storybook support to your "Angular" app'); return angularGenerator(packageManager, npmOptions, generatorOptions, options); @@ -427,12 +421,15 @@ export async function initiate(options: CommandOptions): Promise { logger.log('\nRunning Storybook'); try { - const isReactWebProject = - projectType === ProjectType.REACT_SCRIPTS || - projectType === ProjectType.REACT || - projectType === ProjectType.WEBPACK_REACT || - projectType === ProjectType.REACT_PROJECT || - projectType === ProjectType.NEXTJS; + const supportsOnboarding = [ + ProjectType.REACT_SCRIPTS, + ProjectType.REACT, + ProjectType.WEBPACK_REACT, + ProjectType.REACT_PROJECT, + ProjectType.NEXTJS, + ProjectType.VUE3, + ProjectType.ANGULAR, + ].includes(projectType); const flags = []; @@ -442,7 +439,7 @@ export async function initiate(options: CommandOptions): Promise { flags.push('--'); } - if (isReactWebProject) { + if (supportsOnboarding) { flags.push('--initial-path=/onboarding'); } diff --git a/code/lib/cli/src/project_types.ts b/code/lib/cli/src/project_types.ts index 404c8f01d9b..b0f6c889c7c 100644 --- a/code/lib/cli/src/project_types.ts +++ b/code/lib/cli/src/project_types.ts @@ -23,7 +23,6 @@ export type ExternalFramework = { export const externalFrameworks: ExternalFramework[] = [ { name: 'qwik', packageName: 'storybook-framework-qwik' }, { name: 'solid', frameworks: ['storybook-solidjs-vite'], renderer: 'storybook-solidjs' }, - { name: 'nuxt', packageName: '@storybook-vue/nuxt' }, ]; /** @@ -53,7 +52,6 @@ export enum ProjectType { WEBPACK_REACT = 'WEBPACK_REACT', NEXTJS = 'NEXTJS', VUE3 = 'VUE3', - NUXT = 'NUXT', ANGULAR = 'ANGULAR', EMBER = 'EMBER', WEB_COMPONENTS = 'WEB_COMPONENTS', @@ -119,13 +117,6 @@ export type TemplateConfiguration = { * therefore WEBPACK_REACT has to come first, as it's more specific. */ export const supportedTemplates: TemplateConfiguration[] = [ - { - preset: ProjectType.NUXT, - dependencies: ['nuxt'], - matcherFunction: ({ dependencies }) => { - return dependencies?.every(Boolean) ?? true; - }, - }, { preset: ProjectType.VUE3, dependencies: { @@ -247,7 +238,10 @@ export const supportedTemplates: TemplateConfiguration[] = [ // users an "Unsupported framework" message export const unsupportedTemplate: TemplateConfiguration = { preset: ProjectType.UNSUPPORTED, - dependencies: {}, + dependencies: { + // TODO(blaine): Remove when we support Nuxt 3 + nuxt: (versionRange) => eqMajor(versionRange, 3), + }, matcherFunction: ({ dependencies }) => { return dependencies?.some(Boolean) ?? false; }, diff --git a/code/lib/cli/tsconfig.json b/code/lib/cli/tsconfig.json index 9c5db279ca2..2831f7bb6d0 100644 --- a/code/lib/cli/tsconfig.json +++ b/code/lib/cli/tsconfig.json @@ -1,11 +1,5 @@ { + "compilerOptions": {}, "extends": "../../tsconfig.json", - "compilerOptions": { - "types": ["node"], - "strict": true, - "skipLibCheck": true, - "resolveJsonModule": true, - "noEmit": true - }, "include": ["src/**/*"] } diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index 5a94887660f..13928186b5f 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/codemod", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "A collection of codemod scripts written with JSCodeshift", "keywords": [ "storybook" diff --git a/code/lib/codemod/tsconfig.json b/code/lib/codemod/tsconfig.json index 77d9af2cd66..b2a5d2c2ee1 100644 --- a/code/lib/codemod/tsconfig.json +++ b/code/lib/codemod/tsconfig.json @@ -1,10 +1,9 @@ { "extends": "../../tsconfig.json", "compilerOptions": { - "skipLibCheck": true, "allowJs": true, - "strict": true + "strict": false }, - "include": ["src/**/*"], - "exclude": ["node_modules", "__testfixtures__", "__tests__"] + "exclude": ["node_modules", "__testfixtures__", "__tests__"], + "include": ["src/**/*"] } diff --git a/code/lib/core-webpack/package.json b/code/lib/core-webpack/package.json index 7537308be75..1e95304dbf0 100644 --- a/code/lib/core-webpack/package.json +++ b/code/lib/core-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-webpack", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/lib/core-webpack/tsconfig.json b/code/lib/core-webpack/tsconfig.json index a4429176e35..73a65ef2ef6 100644 --- a/code/lib/core-webpack/tsconfig.json +++ b/code/lib/core-webpack/tsconfig.json @@ -1,7 +1,5 @@ { "extends": "../../tsconfig.json", - "compilerOptions": { - "strict": true - }, + "compilerOptions": {}, "include": ["src/**/*"] } diff --git a/code/lib/csf-plugin/package.json b/code/lib/csf-plugin/package.json index 50480b809ee..447d677386e 100644 --- a/code/lib/csf-plugin/package.json +++ b/code/lib/csf-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/csf-plugin", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Enrich CSF files via static analysis", "keywords": [ "storybook" diff --git a/code/lib/csf-plugin/tsconfig.json b/code/lib/csf-plugin/tsconfig.json index 5b3f3a56a68..73a65ef2ef6 100644 --- a/code/lib/csf-plugin/tsconfig.json +++ b/code/lib/csf-plugin/tsconfig.json @@ -1,8 +1,5 @@ { "extends": "../../tsconfig.json", - "compilerOptions": { - "strict": true, - "skipLibCheck": true - }, + "compilerOptions": {}, "include": ["src/**/*"] } diff --git a/code/lib/instrumenter/package.json b/code/lib/instrumenter/package.json index 98c83d5f6db..ba29f5151f1 100644 --- a/code/lib/instrumenter/package.json +++ b/code/lib/instrumenter/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/instrumenter", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "", "keywords": [ "storybook" diff --git a/code/lib/instrumenter/tsconfig.json b/code/lib/instrumenter/tsconfig.json index b5a2f9a7091..73a65ef2ef6 100644 --- a/code/lib/instrumenter/tsconfig.json +++ b/code/lib/instrumenter/tsconfig.json @@ -1,7 +1,5 @@ { "extends": "../../tsconfig.json", - "include": ["src/**/*"], - "compilerOptions": { - "strict": true - } + "compilerOptions": {}, + "include": ["src/**/*"] } diff --git a/code/lib/react-dom-shim/package.json b/code/lib/react-dom-shim/package.json index 0d40a6cd2b7..29af1e282b9 100644 --- a/code/lib/react-dom-shim/package.json +++ b/code/lib/react-dom-shim/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-dom-shim", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "", "keywords": [ "storybook" diff --git a/code/lib/react-dom-shim/tsconfig.json b/code/lib/react-dom-shim/tsconfig.json index 7378641b0d3..73a65ef2ef6 100644 --- a/code/lib/react-dom-shim/tsconfig.json +++ b/code/lib/react-dom-shim/tsconfig.json @@ -1,8 +1,5 @@ { "extends": "../../tsconfig.json", - "compilerOptions": { - "strict": true, - "types": ["node"] - }, + "compilerOptions": {}, "include": ["src/**/*"] } diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index 34f39b398d2..3e052e22090 100644 --- a/code/lib/source-loader/package.json +++ b/code/lib/source-loader/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/source-loader", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Source loader", "keywords": [ "lib", diff --git a/code/lib/source-loader/tsconfig.json b/code/lib/source-loader/tsconfig.json index b5a2f9a7091..73a65ef2ef6 100644 --- a/code/lib/source-loader/tsconfig.json +++ b/code/lib/source-loader/tsconfig.json @@ -1,7 +1,5 @@ { "extends": "../../tsconfig.json", - "include": ["src/**/*"], - "compilerOptions": { - "strict": true - } + "compilerOptions": {}, + "include": ["src/**/*"] } diff --git a/code/lib/test/package.json b/code/lib/test/package.json index 4148c9a2851..ec3ed55f79c 100644 --- a/code/lib/test/package.json +++ b/code/lib/test/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/test", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "", "keywords": [ "storybook" diff --git a/code/lib/test/tsconfig.json b/code/lib/test/tsconfig.json index 52d43eaaa9b..73a65ef2ef6 100644 --- a/code/lib/test/tsconfig.json +++ b/code/lib/test/tsconfig.json @@ -1,4 +1,5 @@ { "extends": "../../tsconfig.json", + "compilerOptions": {}, "include": ["src/**/*"] } diff --git a/code/package.json b/code/package.json index 8c15a1a1784..26777fc91db 100644 --- a/code/package.json +++ b/code/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/root", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "private": true, "description": "Storybook root", "homepage": "https://storybook.js.org/", diff --git a/code/presets/create-react-app/package.json b/code/presets/create-react-app/package.json index 4bdd7554648..2241500c245 100644 --- a/code/presets/create-react-app/package.json +++ b/code/presets/create-react-app/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-create-react-app", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Storybook for Create React App preset", "keywords": [ "storybook" diff --git a/code/presets/create-react-app/tsconfig.json b/code/presets/create-react-app/tsconfig.json index a4429176e35..73a65ef2ef6 100644 --- a/code/presets/create-react-app/tsconfig.json +++ b/code/presets/create-react-app/tsconfig.json @@ -1,7 +1,5 @@ { "extends": "../../tsconfig.json", - "compilerOptions": { - "strict": true - }, + "compilerOptions": {}, "include": ["src/**/*"] } diff --git a/code/presets/html-webpack/package.json b/code/presets/html-webpack/package.json index 77f5685be40..704f6d59d30 100644 --- a/code/presets/html-webpack/package.json +++ b/code/presets/html-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-html-webpack", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/html-webpack/tsconfig.json b/code/presets/html-webpack/tsconfig.json index a4429176e35..73a65ef2ef6 100644 --- a/code/presets/html-webpack/tsconfig.json +++ b/code/presets/html-webpack/tsconfig.json @@ -1,7 +1,5 @@ { "extends": "../../tsconfig.json", - "compilerOptions": { - "strict": true - }, + "compilerOptions": {}, "include": ["src/**/*"] } diff --git a/code/presets/preact-webpack/package.json b/code/presets/preact-webpack/package.json index d43648c5667..6a1e0a280a1 100644 --- a/code/presets/preact-webpack/package.json +++ b/code/presets/preact-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-preact-webpack", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" diff --git a/code/presets/preact-webpack/tsconfig.json b/code/presets/preact-webpack/tsconfig.json index 77832da6336..73a65ef2ef6 100644 --- a/code/presets/preact-webpack/tsconfig.json +++ b/code/presets/preact-webpack/tsconfig.json @@ -1,8 +1,5 @@ { "extends": "../../tsconfig.json", - "compilerOptions": { - "strict": true, - "resolveJsonModule": true - }, + "compilerOptions": {}, "include": ["src/**/*"] } diff --git a/code/presets/react-webpack/package.json b/code/presets/react-webpack/package.json index 587f73980a2..771b67e795c 100644 --- a/code/presets/react-webpack/package.json +++ b/code/presets/react-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-react-webpack", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading", "keywords": [ "storybook" diff --git a/code/presets/react-webpack/tsconfig.json b/code/presets/react-webpack/tsconfig.json index 77832da6336..73a65ef2ef6 100644 --- a/code/presets/react-webpack/tsconfig.json +++ b/code/presets/react-webpack/tsconfig.json @@ -1,8 +1,5 @@ { "extends": "../../tsconfig.json", - "compilerOptions": { - "strict": true, - "resolveJsonModule": true - }, + "compilerOptions": {}, "include": ["src/**/*"] } diff --git a/code/presets/server-webpack/package.json b/code/presets/server-webpack/package.json index 584b6580b69..b516d0b928b 100644 --- a/code/presets/server-webpack/package.json +++ b/code/presets/server-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-server-webpack", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/server-webpack/tsconfig.json b/code/presets/server-webpack/tsconfig.json index a4429176e35..73a65ef2ef6 100644 --- a/code/presets/server-webpack/tsconfig.json +++ b/code/presets/server-webpack/tsconfig.json @@ -1,7 +1,5 @@ { "extends": "../../tsconfig.json", - "compilerOptions": { - "strict": true - }, + "compilerOptions": {}, "include": ["src/**/*"] } diff --git a/code/presets/svelte-webpack/package.json b/code/presets/svelte-webpack/package.json index b666008766a..a2e60dd2a77 100644 --- a/code/presets/svelte-webpack/package.json +++ b/code/presets/svelte-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-svelte-webpack", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/svelte-webpack/tsconfig.json b/code/presets/svelte-webpack/tsconfig.json index 77832da6336..73a65ef2ef6 100644 --- a/code/presets/svelte-webpack/tsconfig.json +++ b/code/presets/svelte-webpack/tsconfig.json @@ -1,8 +1,5 @@ { "extends": "../../tsconfig.json", - "compilerOptions": { - "strict": true, - "resolveJsonModule": true - }, + "compilerOptions": {}, "include": ["src/**/*"] } diff --git a/code/presets/vue3-webpack/package.json b/code/presets/vue3-webpack/package.json index e68a241cfda..603f0a0fc90 100644 --- a/code/presets/vue3-webpack/package.json +++ b/code/presets/vue3-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-vue3-webpack", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/vue3-webpack/tsconfig.json b/code/presets/vue3-webpack/tsconfig.json index a7475d986d4..73a65ef2ef6 100644 --- a/code/presets/vue3-webpack/tsconfig.json +++ b/code/presets/vue3-webpack/tsconfig.json @@ -1,9 +1,5 @@ { "extends": "../../tsconfig.json", - "compilerOptions": { - "resolveJsonModule": true, - "skipLibCheck": true, - "strict": true - }, + "compilerOptions": {}, "include": ["src/**/*"] } diff --git a/code/renderers/html/package.json b/code/renderers/html/package.json index 008a442f93f..c2d34315894 100644 --- a/code/renderers/html/package.json +++ b/code/renderers/html/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Storybook HTML renderer", "keywords": [ "storybook" diff --git a/code/renderers/html/tsconfig.json b/code/renderers/html/tsconfig.json index daa7b13b26b..3b01f80f2c3 100644 --- a/code/renderers/html/tsconfig.json +++ b/code/renderers/html/tsconfig.json @@ -1,7 +1,5 @@ { "extends": "../../tsconfig.json", - "compilerOptions": { - "strict": true - }, + "compilerOptions": {}, "include": ["src/**/*", "template/**/*"] } diff --git a/code/renderers/preact/package.json b/code/renderers/preact/package.json index 920a440a881..a0b2eaab393 100644 --- a/code/renderers/preact/package.json +++ b/code/renderers/preact/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Storybook Preact renderer", "keywords": [ "storybook" diff --git a/code/renderers/preact/tsconfig.json b/code/renderers/preact/tsconfig.json index bd6414b1a14..3b01f80f2c3 100644 --- a/code/renderers/preact/tsconfig.json +++ b/code/renderers/preact/tsconfig.json @@ -1,8 +1,5 @@ { "extends": "../../tsconfig.json", - "compilerOptions": { - "strict": true, - "resolveJsonModule": true - }, + "compilerOptions": {}, "include": ["src/**/*", "template/**/*"] } diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json index 68c3de409f7..a6d18e19fe7 100644 --- a/code/renderers/react/package.json +++ b/code/renderers/react/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Storybook React renderer", "keywords": [ "storybook" @@ -83,7 +83,6 @@ "util-deprecate": "^1.0.2" }, "devDependencies": { - "@storybook/blocks": "workspace:*", "@storybook/test": "workspace:*", "@types/babel-plugin-react-docgen": "^4", "@types/semver": "^7.3.4", diff --git a/code/renderers/react/src/docs/extractArgTypes.ts b/code/renderers/react/src/docs/extractArgTypes.ts index c7cac4c96a8..efa23a7df28 100644 --- a/code/renderers/react/src/docs/extractArgTypes.ts +++ b/code/renderers/react/src/docs/extractArgTypes.ts @@ -2,7 +2,7 @@ import type { StrictArgTypes } from 'storybook/internal/types'; import type { PropDef, ArgTypesExtractor } from 'storybook/internal/docs-tools'; import { extractProps } from './extractProps'; -export const extractArgTypes: ArgTypesExtractor = (component) => { +export const extractArgTypes: ArgTypesExtractor = (component): StrictArgTypes | null => { if (component) { const { rows } = extractProps(component); if (rows) { diff --git a/code/renderers/react/src/entry-preview-docs.ts b/code/renderers/react/src/entry-preview-docs.ts index 5bdcd7f2c40..ad3146a94fe 100644 --- a/code/renderers/react/src/entry-preview-docs.ts +++ b/code/renderers/react/src/entry-preview-docs.ts @@ -1,11 +1,20 @@ import type { ArgTypesEnhancer, DecoratorFunction } from 'storybook/internal/types'; +import type { ArgTypesExtractor } from 'storybook/internal/docs-tools'; import { extractComponentDescription, enhanceArgTypes } from 'storybook/internal/docs-tools'; import { extractArgTypes } from './docs/extractArgTypes'; import { jsxDecorator } from './docs/jsxDecorator'; import type { ReactRenderer } from './types'; -export const parameters = { +export const parameters: { + docs: { + story: { + inline: boolean; + }; + extractArgTypes: ArgTypesExtractor; + extractComponentDescription: (component?: any) => string; + }; +} = { docs: { story: { inline: true }, extractArgTypes, diff --git a/code/renderers/react/src/portable-stories.tsx b/code/renderers/react/src/portable-stories.tsx index e562d68963d..b8058deb457 100644 --- a/code/renderers/react/src/portable-stories.tsx +++ b/code/renderers/react/src/portable-stories.tsx @@ -10,6 +10,7 @@ import type { Store_CSFExports, StoriesWithPartialProps, ProjectAnnotations, + ComposedStoryFn, } from 'storybook/internal/types'; import * as reactProjectAnnotations from './entry-preview'; @@ -85,7 +86,7 @@ export function composeStory( componentAnnotations: Meta, projectAnnotations?: ProjectAnnotations, exportsName?: string -) { +): ComposedStoryFn> { return originalComposeStory( story as StoryAnnotationsOrFn, componentAnnotations, diff --git a/code/renderers/react/template/cli/ts-3-8/Button.tsx b/code/renderers/react/template/cli/ts-3-8/Button.tsx index c33be6ec52c..2b39d635537 100644 --- a/code/renderers/react/template/cli/ts-3-8/Button.tsx +++ b/code/renderers/react/template/cli/ts-3-8/Button.tsx @@ -1,7 +1,7 @@ import React from 'react'; import './button.css'; -interface ButtonProps { +export interface ButtonProps { /** * Is this the principal call to action on the page? */ diff --git a/code/renderers/react/template/cli/ts-3-8/Header.tsx b/code/renderers/react/template/cli/ts-3-8/Header.tsx index c806ddf023e..1bf981a4251 100644 --- a/code/renderers/react/template/cli/ts-3-8/Header.tsx +++ b/code/renderers/react/template/cli/ts-3-8/Header.tsx @@ -7,7 +7,7 @@ type User = { name: string; }; -interface HeaderProps { +export interface HeaderProps { user?: User; onLogin?: () => void; onLogout?: () => void; diff --git a/code/renderers/react/template/cli/ts-4-9/Button.tsx b/code/renderers/react/template/cli/ts-4-9/Button.tsx index c33be6ec52c..2b39d635537 100644 --- a/code/renderers/react/template/cli/ts-4-9/Button.tsx +++ b/code/renderers/react/template/cli/ts-4-9/Button.tsx @@ -1,7 +1,7 @@ import React from 'react'; import './button.css'; -interface ButtonProps { +export interface ButtonProps { /** * Is this the principal call to action on the page? */ diff --git a/code/renderers/react/template/cli/ts-4-9/Header.tsx b/code/renderers/react/template/cli/ts-4-9/Header.tsx index c806ddf023e..1bf981a4251 100644 --- a/code/renderers/react/template/cli/ts-4-9/Header.tsx +++ b/code/renderers/react/template/cli/ts-4-9/Header.tsx @@ -7,7 +7,7 @@ type User = { name: string; }; -interface HeaderProps { +export interface HeaderProps { user?: User; onLogin?: () => void; onLogout?: () => void; diff --git a/code/renderers/react/template/stories/docgen-components/ts-function-component-inline-defaults/input.tsx b/code/renderers/react/template/stories/docgen-components/ts-function-component-inline-defaults/input.tsx index 06b5b62edfd..c6a4855a20f 100644 --- a/code/renderers/react/template/stories/docgen-components/ts-function-component-inline-defaults/input.tsx +++ b/code/renderers/react/template/stories/docgen-components/ts-function-component-inline-defaults/input.tsx @@ -1,5 +1,7 @@ import React from 'react'; +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore-error (importing a js file) import { imported } from '../imported'; const local = 'local-value'; diff --git a/code/renderers/react/template/stories/docgen-components/ts-function-component/input.tsx b/code/renderers/react/template/stories/docgen-components/ts-function-component/input.tsx index 193c2e2c71a..8b983e7e37b 100644 --- a/code/renderers/react/template/stories/docgen-components/ts-function-component/input.tsx +++ b/code/renderers/react/template/stories/docgen-components/ts-function-component/input.tsx @@ -1,5 +1,7 @@ import React from 'react'; +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore (js import not supported in TS) import { imported } from '../imported'; // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore (css import not supported in TS) diff --git a/code/renderers/react/tsconfig.json b/code/renderers/react/tsconfig.json index 357b84b3ab2..4fca533dd5a 100644 --- a/code/renderers/react/tsconfig.json +++ b/code/renderers/react/tsconfig.json @@ -1,10 +1,11 @@ { "extends": "../../tsconfig.json", "compilerOptions": { - "strict": true, - "skipLibCheck": true, - "resolveJsonModule": true, - "allowJs": true + "baseUrl": ".", + "paths": { + "@storybook/react": ["./"], + "@storybook/blocks": ["../../lib/blocks"] + } }, "include": ["src/**/*", "template/**/*"] } diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json index bff16637831..6de70a27ee2 100644 --- a/code/renderers/server/package.json +++ b/code/renderers/server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Storybook Server renderer", "keywords": [ "storybook" diff --git a/code/renderers/server/tsconfig.json b/code/renderers/server/tsconfig.json index e5b6521be93..3b01f80f2c3 100644 --- a/code/renderers/server/tsconfig.json +++ b/code/renderers/server/tsconfig.json @@ -1,7 +1,5 @@ { "extends": "../../tsconfig.json", - "include": ["src/**/*", "template/**/*"], - "compilerOptions": { - "strict": false - } + "compilerOptions": {}, + "include": ["src/**/*", "template/**/*"] } diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json index 55afb79edab..259b7e982f9 100644 --- a/code/renderers/svelte/package.json +++ b/code/renderers/svelte/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Storybook Svelte renderer", "keywords": [ "storybook" diff --git a/code/renderers/svelte/src/docs/extractArgTypes.ts b/code/renderers/svelte/src/docs/extractArgTypes.ts index a81539bd1b4..aeb719884f9 100644 --- a/code/renderers/svelte/src/docs/extractArgTypes.ts +++ b/code/renderers/svelte/src/docs/extractArgTypes.ts @@ -17,7 +17,9 @@ function hasKeyword(keyword: string, keywords: JSDocKeyword[]): boolean { return keywords ? keywords.find((k) => k.name === keyword) != null : false; } -export const extractArgTypes: ArgTypesExtractor = (component: ComponentWithDocgen) => { +export const extractArgTypes: ArgTypesExtractor = ( + component: ComponentWithDocgen +): StrictArgTypes | null => { try { // eslint-disable-next-line no-underscore-dangle const docgen = component.__docgen; diff --git a/code/renderers/svelte/src/entry-preview-docs.ts b/code/renderers/svelte/src/entry-preview-docs.ts index fff20c3523f..a1abf3504a5 100644 --- a/code/renderers/svelte/src/entry-preview-docs.ts +++ b/code/renderers/svelte/src/entry-preview-docs.ts @@ -1,11 +1,20 @@ import type { ArgTypesEnhancer, DecoratorFunction } from 'storybook/internal/types'; +import type { ArgTypesExtractor } from 'storybook/internal/docs-tools'; import { enhanceArgTypes } from 'storybook/internal/docs-tools'; import { extractArgTypes } from './docs/extractArgTypes'; import { extractComponentDescription } from './docs/extractComponentDescription'; import { sourceDecorator } from './docs/sourceDecorator'; import type { SvelteRenderer } from './types'; -export const parameters = { +export const parameters: { + docs: { + story: { + inline: boolean; + }; + extractArgTypes: ArgTypesExtractor; + extractComponentDescription: (component?: any) => string; + }; +} = { docs: { story: { inline: true }, extractArgTypes, diff --git a/code/renderers/svelte/src/portable-stories.ts b/code/renderers/svelte/src/portable-stories.ts index 51c4ed0d6c8..a3c2e54336e 100644 --- a/code/renderers/svelte/src/portable-stories.ts +++ b/code/renderers/svelte/src/portable-stories.ts @@ -103,7 +103,7 @@ export function composeStory( componentAnnotations: Meta, projectAnnotations?: ProjectAnnotations, exportsName?: string -) { +): ComposedStory { const composedStory = originalComposeStory( story as StoryAnnotationsOrFn, // @ts-expect-error Fix this later: Type 'Partial<{ [x: string]: any; }>' is not assignable to type 'Partial>' diff --git a/code/renderers/svelte/tsconfig.json b/code/renderers/svelte/tsconfig.json index 95355eedfc5..ba474f5a2f5 100644 --- a/code/renderers/svelte/tsconfig.json +++ b/code/renderers/svelte/tsconfig.json @@ -1,10 +1,7 @@ { "extends": "../../tsconfig.json", "compilerOptions": { - "module": "ESNext", - "skipLibCheck": true, - "strict": true, - "resolveJsonModule": true + "module": "ESNext" }, "include": ["src/**/*", "src/**/*.svelte", "template/**/*", "template/**/*.svelte"] } diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json index 709b53286ee..4f3e08eacd5 100644 --- a/code/renderers/vue3/package.json +++ b/code/renderers/vue3/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Storybook Vue 3 renderer", "keywords": [ "storybook" diff --git a/code/renderers/vue3/src/docs/extractArgTypes.ts b/code/renderers/vue3/src/docs/extractArgTypes.ts index 30fda1267c4..76c52cc755a 100644 --- a/code/renderers/vue3/src/docs/extractArgTypes.ts +++ b/code/renderers/vue3/src/docs/extractArgTypes.ts @@ -13,7 +13,7 @@ type PropertyMetaSchema = VueDocgenInfoEntry<'vue-component-meta', 'props'>['sch // "exposed" is used by the vue-component-meta plugin while "expose" is used by vue-docgen-api const ARG_TYPE_SECTIONS = ['props', 'events', 'slots', 'exposed', 'expose'] as const; -export const extractArgTypes: ArgTypesExtractor = (component) => { +export const extractArgTypes: ArgTypesExtractor = (component): StrictArgTypes | null => { if (!hasDocgen>(component)) { return null; } diff --git a/code/renderers/vue3/src/docs/tests-meta-components/meta-components.ts b/code/renderers/vue3/src/docs/tests-meta-components/meta-components.ts index 9dc0f0d001c..57d62fa259c 100644 --- a/code/renderers/vue3/src/docs/tests-meta-components/meta-components.ts +++ b/code/renderers/vue3/src/docs/tests-meta-components/meta-components.ts @@ -1,5 +1,5 @@ import { TypeSystem } from 'storybook/internal/docs-tools'; -import type { VueDocgenInfo } from 'frameworks/vue3-vite/src'; +import type { VueDocgenInfo } from '../../../../../frameworks/vue3-vite/src'; type TestComponent = { __docgenInfo: VueDocgenInfo<'vue-component-meta'> }; diff --git a/code/renderers/vue3/src/entry-preview-docs.ts b/code/renderers/vue3/src/entry-preview-docs.ts index 4965fc9356b..66e848f2bc1 100644 --- a/code/renderers/vue3/src/entry-preview-docs.ts +++ b/code/renderers/vue3/src/entry-preview-docs.ts @@ -1,10 +1,19 @@ import type { ArgTypesEnhancer, DecoratorFunction } from 'storybook/internal/types'; +import type { ArgTypesExtractor } from 'storybook/internal/docs-tools'; import { extractComponentDescription, enhanceArgTypes } from 'storybook/internal/docs-tools'; import { extractArgTypes } from './docs/extractArgTypes'; import { sourceDecorator } from './docs/sourceDecorator'; import type { VueRenderer } from './types'; -export const parameters = { +export const parameters: { + docs: { + story: { + inline: boolean; + }; + extractArgTypes: ArgTypesExtractor; + extractComponentDescription: (component?: any) => string; + }; +} = { docs: { story: { inline: true }, extractArgTypes, diff --git a/code/renderers/vue3/src/portable-stories.ts b/code/renderers/vue3/src/portable-stories.ts index 5965da3dd63..7e1e64c6f45 100644 --- a/code/renderers/vue3/src/portable-stories.ts +++ b/code/renderers/vue3/src/portable-stories.ts @@ -10,6 +10,7 @@ import type { StoryAnnotationsOrFn, Store_CSFExports, StoriesWithPartialProps, + ComposedStoryFn, } from 'storybook/internal/types'; import { TestingLibraryMustBeConfiguredError } from 'storybook/internal/preview-errors'; import { h } from 'vue'; @@ -91,7 +92,7 @@ export function composeStory( componentAnnotations: Meta, projectAnnotations?: ProjectAnnotations, exportsName?: string -) { +): JSXAble>> { const composedStory = originalComposeStory( story as StoryAnnotationsOrFn, componentAnnotations, diff --git a/code/renderers/vue3/tsconfig.json b/code/renderers/vue3/tsconfig.json index d5b59e915ab..e54cc5da3fb 100644 --- a/code/renderers/vue3/tsconfig.json +++ b/code/renderers/vue3/tsconfig.json @@ -1,13 +1,10 @@ { "extends": "../../tsconfig.json", "compilerOptions": { - "strict": true, - "resolveJsonModule": true, - "skipLibCheck": true, "allowJs": true }, + "include": ["src/**/*", "src/**/*.vue", "template/**/*", "template/**/*.vue"], "vueCompilerOptions": { "target": 3 - }, - "include": ["src/**/*", "src/**/*.vue", "template/**/*", "template/**/*.vue"] + } } diff --git a/code/renderers/web-components/package.json b/code/renderers/web-components/package.json index 3889d0be4f3..d6815d095da 100644 --- a/code/renderers/web-components/package.json +++ b/code/renderers/web-components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components", - "version": "8.2.0-beta.1", + "version": "8.3.0-alpha.0", "description": "Storybook web-components renderer", "keywords": [ "lit", diff --git a/code/renderers/web-components/src/entry-preview-docs.ts b/code/renderers/web-components/src/entry-preview-docs.ts index 489c91bbd2d..c6c441644e4 100644 --- a/code/renderers/web-components/src/entry-preview-docs.ts +++ b/code/renderers/web-components/src/entry-preview-docs.ts @@ -1,4 +1,4 @@ -import type { ArgTypesEnhancer, DecoratorFunction } from 'storybook/internal/types'; +import type { ArgTypesEnhancer, DecoratorFunction, InputType } from 'storybook/internal/types'; import { SourceType, enhanceArgTypes } from 'storybook/internal/docs-tools'; import { extractArgTypes, extractComponentDescription } from './docs/custom-elements'; import { sourceDecorator } from './docs/sourceDecorator'; @@ -6,7 +6,24 @@ import type { WebComponentsRenderer } from './types'; export const decorators: DecoratorFunction[] = [sourceDecorator]; -export const parameters = { +export const parameters: { + docs: { + extractArgTypes: (tagName: string) => + | { + [x: string]: InputType; + } + | null + | undefined; + extractComponentDescription: (tagName: string) => string | null | undefined; + story: { + inline: true; + }; + source: { + type: SourceType; + language: string; + }; + }; +} = { docs: { extractArgTypes, extractComponentDescription, diff --git a/code/renderers/web-components/tsconfig.json b/code/renderers/web-components/tsconfig.json index d5dc307ae91..ca9fd89b580 100644 --- a/code/renderers/web-components/tsconfig.json +++ b/code/renderers/web-components/tsconfig.json @@ -1,8 +1,11 @@ { "extends": "../../tsconfig.json", "compilerOptions": { + "baseUrl": ".", "resolveJsonModule": true, - "strict": true + "paths": { + "storybook/internal/*": ["../../lib/cli/core/*"] + } }, "include": ["src/**/*", "template/**/*"] } diff --git a/code/tsconfig.json b/code/tsconfig.json index 800b83594d3..2b82117621e 100644 --- a/code/tsconfig.json +++ b/code/tsconfig.json @@ -1,23 +1,23 @@ { "compileOnSave": false, "compilerOptions": { - "ignoreDeprecations": "5.0", - "baseUrl": ".", - "incremental": false, - "noImplicitAny": true, - "forceConsistentCasingInFileNames": true, - "jsx": "react", - "moduleResolution": "Node", - "target": "ES2020", - "module": "CommonJS", - "skipLibCheck": true, "allowSyntheticDefaultImports": true, + "baseUrl": ".", "esModuleInterop": true, + "forceConsistentCasingInFileNames": true, + "ignoreDeprecations": "5.0", + "incremental": false, "isolatedModules": true, - "strictBindCallApply": true, + "jsx": "react", "lib": ["dom", "dom.iterable", "esnext"], - "noUnusedLocals": true, - "strict": true + "module": "CommonJS", + "moduleResolution": "Node", + "noImplicitAny": true, + "noUnusedLocals": false, + "skipLibCheck": true, + "strict": true, + "strictBindCallApply": true, + "target": "ES2020" }, "exclude": ["dist", "**/dist", "node_modules", "**/node_modules"] } diff --git a/code/yarn.lock b/code/yarn.lock index f22ee0dc024..2b4548e1aa7 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5496,6 +5496,7 @@ __metadata: "@storybook/csf": "npm:0.1.11" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" + "@storybook/react": "workspace:*" "@storybook/test": "workspace:*" "@types/color-convert": "npm:^2.0.0" "@types/lodash": "npm:^4.14.167" @@ -6400,7 +6401,6 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/react@workspace:renderers/react" dependencies: - "@storybook/blocks": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/react-dom-shim": "workspace:*" "@storybook/test": "workspace:*" diff --git a/docs/_snippets/decorator-parameterized-in-preview.md b/docs/_snippets/decorator-parameterized-in-preview.md index d637f7edfb2..f600132196b 100644 --- a/docs/_snippets/decorator-parameterized-in-preview.md +++ b/docs/_snippets/decorator-parameterized-in-preview.md @@ -14,7 +14,7 @@ const preview: Preview = { return `
${story}
`; case 'page-mobile': return `
${story}
`; - case default: + default: // In the default case, don't apply a layout return story; } @@ -44,7 +44,7 @@ export default { return (
); - case default: + default: // In the default case, don't apply a layout return ; } @@ -74,7 +74,7 @@ const preview: Preview = { return (
); - case default: + default: // In the default case, don't apply a layout return ; } @@ -102,7 +102,7 @@ export default { return (
); - case default: + default: // In the default case, don't apply a layout return ; } @@ -130,7 +130,7 @@ const preview: Preview = { return (
); - case default: + default: // In the default case, don't apply a layout return ; } @@ -154,7 +154,7 @@ export default { return { template: '
' }; case 'page-mobile': return { template: '
' }; - case default: + default: // In the default case, don't apply a layout return { template: '' }; } @@ -178,7 +178,7 @@ const preview: Preview = { return { template: '
' }; case 'page-mobile': return { template: '
' }; - case default: + default: // In the default case, don't apply a layout return { template: '' }; } diff --git a/docs/addons/addons-api.mdx b/docs/addons/addons-api.mdx index ee4f89a37a7..42cbb56c3a9 100644 --- a/docs/addons/addons-api.mdx +++ b/docs/addons/addons-api.mdx @@ -189,7 +189,7 @@ The following table details how to use the API values: | **selectedPanel** | String | Id to select an addon panel | `storybook/actions/panel` | | **initialActive** | String | Select the default active tab on Mobile | `sidebar` or `canvas` or `addons` | | **sidebar** | Object | Sidebar options, see below | `{ showRoots: false }` | -| **toolbar** | Object | Modify the tools in the toolbar using the addon id | `{ fullscreen: { hidden: false } } }` | +| **toolbar** | Object | Modify the tools in the toolbar using the addon id | `{ fullscreen: { hidden: false } }` | The following options are configurable under the `sidebar` namespace: diff --git a/docs/addons/integration-catalog.mdx b/docs/addons/integration-catalog.mdx index 791a46132f1..f1b6e63fe9d 100644 --- a/docs/addons/integration-catalog.mdx +++ b/docs/addons/integration-catalog.mdx @@ -13,7 +13,7 @@ Storybook addons are distributed via npm. The catalog is populated by querying n Add your addon to the catalog by publishing a npm package that follows these requirements: -* `package.json` with [module information](./writing-addons.mdx#get-started) and [addon metadata](#addon-metadata) +* `package.json` with [module information](./writing-addons.mdx#setup) and [addon metadata](#addon-metadata) * `README.md` file with installation and configuration instructions * `/dist` directory containing transpiled ES5 code * `preset.js` file written as an ES5 module at the root level diff --git a/docs/api/arg-types.mdx b/docs/api/arg-types.mdx index 8964e60040c..60cfa726ccc 100644 --- a/docs/api/arg-types.mdx +++ b/docs/api/arg-types.mdx @@ -124,8 +124,8 @@ Default: [Inferred](#automatic-argtype-inference); `'select'`, if [`options`](#o Specifies the type of control used to change the arg value with the [controls addon](../essentials/controls.mdx). Here are the available types, `ControlType`, grouped by the type of data they handle: -| Data type | ControlType | Description | -| -------------- | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Data type | ControlType | Description | +| -------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **array** | `'object'` | Provides a JSON-based editor to handle the values of the array. Also allows editing in raw mode.
`{ control: 'object' }` | | **boolean** | `'boolean'` | Provides a toggle for switching between possible states.
`{ control: 'boolean' }` | | **enum** | `'check'` | Provides a set of stacked checkboxes for selecting multiple options.
`{ control: 'check', options: ['email', 'phone', 'mail'] }` | @@ -139,7 +139,7 @@ Specifies the type of control used to change the arg value with the [controls ad | **object** | `'file'` | Provides a file input that returns an array of URLs. Can be further customized to accept specific file types.
`{ control: { type: 'file', accept: '.png' } }` | | | `'object'` | Provides a JSON-based editor to handle the object's values. Also allows editing in raw mode.
`{ control: 'object' }` | | **string** | `'color'` | Provides a color picker to choose color values. Can be additionally configured to include a set of color presets.
`{ control: { type: 'color', presetColors: ['red', 'green']} }` | -| | `'date'` | Provides a datepicker to choose a date.
`{ control: 'date' }` | +| | `'date'` | Provides a datepicker to choose a date.
`{ control: 'date' }` | | | `'text'` | Provides a freeform text input.
`{ control: 'text' }` | diff --git a/docs/api/cli-options.mdx b/docs/api/cli-options.mdx index 4e645f11108..b5b8a3fd9ed 100644 --- a/docs/api/cli-options.mdx +++ b/docs/api/cli-options.mdx @@ -30,30 +30,30 @@ storybook dev [options] Options include: -| Option | Description | -| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| `--help` | Output usage information
`storybook dev --help` | -| `-V`, `--version` | Output the version number
`storybook dev -V` | -| `-p`, `--port [number]` | Port to run Storybook
`storybook dev -p 9009` | +| Option | Description | +| ------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `--help` | Output usage information
`storybook dev --help` | +| `-V`, `--version` | Output the version number
`storybook dev -V` | +| `-p`, `--port [number]` | Port to run Storybook
`storybook dev -p 9009` | | `--exact-port [number]` | Attempts to run Storybook on the exact port number specified.
If the port is already in use, Storybook will exit with an error message
`storybook dev --exact-port 9009` | -| `-h`, `--host [string]` | Host to run Storybook
`storybook dev -h my-host.com` | -| `-c`, `--config-dir [dir-name]` | Directory where to load Storybook configurations from
`storybook dev -c .storybook` | +| `-h`, `--host [string]` | Host to run Storybook
`storybook dev -h my-host.com` | +| `-c`, `--config-dir [dir-name]` | Directory where to load Storybook configurations from
`storybook dev -c .storybook` | | `--loglevel [level]` | Controls level of logging during build.
Available options: `silly`, `verbose`, `info` (default), `warn`, `error`, `silent`
`storybook dev --loglevel warn` | -| `--https` | Serve Storybook over HTTPS. Note: You must provide your own certificate information
`storybook dev --https` | -| `--ssl-ca` | Provide an SSL certificate authority. (Optional with --https, required if using a self-signed certificate)
`storybook dev --ssl-ca my-certificate` | -| `--ssl-cert` | Provide an SSL certificate. (Required with --https)
`storybook dev --ssl-cert my-ssl-certificate` | -| `--ssl-key` | Provide an SSL key. (Required with --https)
`storybook dev --ssl-key my-ssl-key` | -| `--smoke-test` | Exit after successful start
`storybook dev --smoke-test` | -| `--ci` | CI mode (skip interactive prompts, don't open browser)
`storybook dev --ci` | -| `--no-open` | Do not open Storybook automatically in the browser
`storybook dev --no-open` | -| `--quiet` | Suppress verbose build output
`storybook dev --quiet` | -| `--debug` | Outputs more logs in the CLI to assist debugging
`storybook dev --debug` | -| `--debug-webpack` | Display final webpack configurations for debugging purposes
`storybook dev --debug-webpack` | +| `--https` | Serve Storybook over HTTPS. Note: You must provide your own certificate information
`storybook dev --https` | +| `--ssl-ca` | Provide an SSL certificate authority. (Optional with --https, required if using a self-signed certificate)
`storybook dev --ssl-ca my-certificate` | +| `--ssl-cert` | Provide an SSL certificate. (Required with --https)
`storybook dev --ssl-cert my-ssl-certificate` | +| `--ssl-key` | Provide an SSL key. (Required with --https)
`storybook dev --ssl-key my-ssl-key` | +| `--smoke-test` | Exit after successful start
`storybook dev --smoke-test` | +| `--ci` | CI mode (skip interactive prompts, don't open browser)
`storybook dev --ci` | +| `--no-open` | Do not open Storybook automatically in the browser
`storybook dev --no-open` | +| `--quiet` | Suppress verbose build output
`storybook dev --quiet` | +| `--debug` | Outputs more logs in the CLI to assist debugging
`storybook dev --debug` | +| `--debug-webpack` | Display final webpack configurations for debugging purposes
`storybook dev --debug-webpack` | | `--stats-json [dir-name]` | Write stats JSON to disk
Requires Webpack
`storybook dev --stats-json /tmp/stats` | -| `--no-version-updates` | Skips Storybook's update check
`storybook dev --no-version-updates` | +| `--no-version-updates` | Skips Storybook's update check
`storybook dev --no-version-updates` | | `--docs` | Starts Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.mdx#preview-storybooks-documentation)
`storybook dev --docs` | -| `--initial-path [path]` | Configures the URL Storybook should open when it opens the browser for the first time
`storybook dev --initial-path=/docs/getting-started--docs` | -| `--preview-url [path]` | Overrides the default Storybook preview with a custom built preview URL
`storybook dev --preview-url=http://localhost:1337/external-iframe.html` | +| `--initial-path [path]` | Configures the URL Storybook should open when it opens the browser for the first time
`storybook dev --initial-path=/docs/getting-started--docs` | +| `--preview-url [path]` | Overrides the default Storybook preview with a custom built preview URL
`storybook dev --preview-url=http://localhost:1337/external-iframe.html` | | `--force-build-preview` | Forcefully builds Storybook's preview iframe.
Useful if you're experiencing issues, or combined with `--preview-url` to ensure the preview is up-to-date
`storybook dev --force-build-preview` | | `--disable-telemetry` | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.mdx#how-to-opt-out)
`storybook dev --disable-telemetry` | | `--enable-crash-reports` | Enables sending crash reports to Storybook's telemetry. Learn more about it [here](../configure/telemetry.mdx#crash-reports-disabled-by-default)
`storybook dev --enable-crash-reports` | @@ -72,23 +72,23 @@ storybook build [options] Options include: -| Option | Description | -| ------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `-h`, `--help` | Output usage information
`storybook build --help` | -| `-V`, `--version` | Output the version number
`storybook build -V` | -| `-o`, `--output-dir [dir-name]` | Directory where to store built files
`storybook build -o /my-deployed-storybook` | -| `-c`, `--config-dir [dir-name]` | Directory where to load Storybook configurations from
`storybook build -c .storybook` | -| `--loglevel [level]` | Controls level of logging during build.
Available options: `silly`, `verbose`, `info` (default), `warn`, `error`, `silent`
`storybook build --loglevel warn` | -| `--quiet` | Suppress verbose build output
`storybook build --quiet` | -| `--debug` | Outputs more logs in the CLI to assist debugging
`storybook build --debug` | -| `--debug-webpack` | Display final webpack configurations for debugging purposes
`storybook build --debug-webpack` | -| `--stats-json [dir-name]` | Write stats JSON to disk
Requires Webpack
`storybook build --stats-json /tmp/stats` | -| `--docs` | Builds Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.mdx#publish-storybooks-documentation)
`storybook build --docs` | +| Option | Description | +| ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `-h`, `--help` | Output usage information
`storybook build --help` | +| `-V`, `--version` | Output the version number
`storybook build -V` | +| `-o`, `--output-dir [dir-name]` | Directory where to store built files
`storybook build -o /my-deployed-storybook` | +| `-c`, `--config-dir [dir-name]` | Directory where to load Storybook configurations from
`storybook build -c .storybook` | +| `--loglevel [level]` | Controls level of logging during build.
Available options: `silly`, `verbose`, `info` (default), `warn`, `error`, `silent`
`storybook build --loglevel warn` | +| `--quiet` | Suppress verbose build output
`storybook build --quiet` | +| `--debug` | Outputs more logs in the CLI to assist debugging
`storybook build --debug` | +| `--debug-webpack` | Display final webpack configurations for debugging purposes
`storybook build --debug-webpack` | +| `--stats-json [dir-name]` | Write stats JSON to disk
Requires Webpack
`storybook build --stats-json /tmp/stats` | +| `--docs` | Builds Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.mdx#publish-storybooks-documentation)
`storybook build --docs` | | `--test` | Optimize Storybook's production build for performance and tests by removing unnecessary features with the `test` option. Learn more [here](../api/main-config/main-config-build.mdx).
`storybook build --test` | -| `--preview-url [path]` | Overrides the default Storybook preview with a custom built preview URL
`storybook build --preview-url=http://localhost:1337/external-iframe.html` | -| `--force-build-preview` | Forcefully builds Storybook's preview iframe.
Useful if you're experiencing issues, or combined with `--preview-url` to ensure the preview is up-to-date
`storybook build --force-build-preview` | -| `--disable-telemetry` | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.mdx#how-to-opt-out)
`storybook build --disable-telemetry` | -| `--enable-crash-reports` | Enables sending crash reports to Storybook's telemetry. Learn more about it [here](../configure/telemetry.mdx#crash-reports-disabled-by-default)
`storybook build --enable-crash-reports` | +| `--preview-url [path]` | Overrides the default Storybook preview with a custom built preview URL
`storybook build --preview-url=http://localhost:1337/external-iframe.html` | +| `--force-build-preview` | Forcefully builds Storybook's preview iframe.
Useful if you're experiencing issues, or combined with `--preview-url` to ensure the preview is up-to-date
`storybook build --force-build-preview` | +| `--disable-telemetry` | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.mdx#how-to-opt-out)
`storybook build --disable-telemetry` | +| `--enable-crash-reports` | Enables sending crash reports to Storybook's telemetry. Learn more about it [here](../configure/telemetry.mdx#crash-reports-disabled-by-default)
`storybook build --enable-crash-reports` | ### `init` @@ -102,21 +102,21 @@ For example, `storybook@latest init` will install the latest version of Storyboo Options include: -| Option | Description | -| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `-h`, `--help` | Output usage information
`storybook init --help` | -| `-b`, `--builder` | Defines the [builder](../builders/index.mdx) to use for your Storybook instance
`storybook init --builder webpack5` | -| `-f`,`--force` | Forcefully installs Storybook into your project, prompting you to overwrite existing files
`storybook init --force` | -| `-s`, `--skip-install` | Skips the dependency installation step. Used only when you need to configure Storybook manually
`storybook init --skip-install` | -| `-t`, `--type` | Defines the [framework](../configure/integration/frameworks.mdx) to use for your Storybook instance
`storybook init --type solid` | -| `-y`, `--yes` | Skips interactive prompts and automatically installs Storybook per specified version
`storybook init --yes` | -| `--package-manager` | Sets the package manager to use when installing Storybook.
Available package managers include `npm`, `yarn`, and `pnpm`
`storybook init --package-manager pnpm` | -| `--use-pnp` | Enables [Plug'n'Play](https://yarnpkg.com/features/pnp) support for Yarn. This option is only available when using Yarn as your package manager
`storybook init --use-pnp` | -| `-p`, `--parser` | Sets the [jscodeshift parser](https://github.com/facebook/jscodeshift#parser).
Available parsers include `babel`, `babylon`, `flow`, `ts`, and `tsx`
`storybook init --parser tsx` | -| `--debug` | Outputs more logs in the CLI to assist debugging
`storybook init --debug` | -| `--disable-telemetry` | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.mdx#how-to-opt-out)
`storybook init --disable-telemetry` | -| `--enable-crash-reports` | Enables sending crash reports to Storybook's telemetry. Learn more about it [here](../configure/telemetry.mdx#crash-reports-disabled-by-default)
`storybook init --enable-crash-reports` | -| `--no-dev` | Complete the initialization of Storybook without running the Storybook dev server
`storybook init --no-dev` | +| Option | Description | +| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `-h`, `--help` | Output usage information
`storybook init --help` | +| `-b`, `--builder` | Defines the [builder](../builders/index.mdx) to use for your Storybook instance
`storybook init --builder webpack5` | +| `-f`,`--force` | Forcefully installs Storybook into your project, prompting you to overwrite existing files
`storybook init --force` | +| `-s`, `--skip-install` | Skips the dependency installation step. Used only when you need to configure Storybook manually
`storybook init --skip-install` | +| `-t`, `--type` | Defines the [framework](../configure/integration/frameworks.mdx) to use for your Storybook instance
`storybook init --type solid` | +| `-y`, `--yes` | Skips interactive prompts and automatically installs Storybook per specified version
`storybook init --yes` | +| `--package-manager` | Sets the package manager to use when installing Storybook.
Available package managers include `npm`, `yarn`, and `pnpm`
`storybook init --package-manager pnpm` | +| `--use-pnp` | Enables [Plug'n'Play](https://yarnpkg.com/features/pnp) support for Yarn. This option is only available when using Yarn as your package manager
`storybook init --use-pnp` | +| `-p`, `--parser` | Sets the [jscodeshift parser](https://github.com/facebook/jscodeshift#parser).
Available parsers include `babel`, `babylon`, `flow`, `ts`, and `tsx`
`storybook init --parser tsx` | +| `--debug` | Outputs more logs in the CLI to assist debugging
`storybook init --debug` | +| `--disable-telemetry` | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.mdx#how-to-opt-out)
`storybook init --disable-telemetry` | +| `--enable-crash-reports` | Enables sending crash reports to Storybook's telemetry. Learn more about it [here](../configure/telemetry.mdx#crash-reports-disabled-by-default)
`storybook init --enable-crash-reports` | +| `--no-dev` | Complete the initialization of Storybook without running the Storybook dev server
`storybook init --no-dev` | ### `add` @@ -128,13 +128,13 @@ storybook add [addon] [options] Options include: -| Option | Description | -| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `-h`, `--help` | Output usage information
`storybook add --help` | -| `-c`, `--config-dir` | Directory where to load Storybook configurations from
`storybook migrate --config-dir .storybook` | +| Option | Description | +| -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `-h`, `--help` | Output usage information
`storybook add --help` | +| `-c`, `--config-dir` | Directory where to load Storybook configurations from
`storybook migrate --config-dir .storybook` | | `--package-manager` | Sets the package manager to use when installing the addon.
Available package managers include `npm`, `yarn`, and `pnpm`
`storybook add [addon] --package-manager pnpm` | -| `-s`, `--skip-postinstall` | Skips post-install configuration. Used only when you need to configure the addon yourself
`storybook add [addon] --skip-postinstall` | -| `--debug` | Outputs more logs in the CLI to assist debugging
`storybook add --debug` | +| `-s`, `--skip-postinstall` | Skips post-install configuration. Used only when you need to configure the addon yourself
`storybook add [addon] --skip-postinstall` | +| `--debug` | Outputs more logs in the CLI to assist debugging
`storybook add --debug` | ### `remove` @@ -146,11 +146,11 @@ storybook remove [addon] [options] Options include: -| Option | Description | -| ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `-h`, `--help` | Output usage information
`storybook remove --help` | +| Option | Description | +| ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `-h`, `--help` | Output usage information
`storybook remove --help` | | `--package-manager` | Sets the package manager to use when removing the addon.
Available package managers include `npm`, `yarn`, and `pnpm`
`storybook remove [addon]--package-manager pnpm` | -| `--debug` | Outputs more logs in the CLI to assist debugging
`storybook remove --debug` | +| `--debug` | Outputs more logs in the CLI to assist debugging
`storybook remove --debug` | | `--disable-telemetry` | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.mdx#how-to-opt-out)
`storybook remove --disable-telemetry` | | `--enable-crash-reports` | Enables sending crash reports to Storybook's telemetry. Learn more about it [here](../configure/telemetry.mdx#crash-reports-disabled-by-default)
`storybook remove --enable-crash-reports` | @@ -166,16 +166,16 @@ For example, `storybook@latest upgrade --dry-run` will perform a dry run (no act Options include: -| Option | Description | -| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `-h`, `--help` | Output usage information
`storybook upgrade --help` | -| `-c`, `--config-dir` | Directory where to load Storybook configurations from
`storybook upgrade --config-dir .storybook` | -| `-n`, `--dry-run` | Checks for version upgrades without installing them
`storybook upgrade --dry-run` | -| `-s`, `--skip-check` | Skips the migration check step during the upgrade process
`storybook upgrade --skip-check` | -| `-y`, `--yes` | Skips interactive prompts and automatically upgrades Storybook to the latest version
`storybook upgrade --yes` | -| `-f`,`--force` | Force the upgrade, skipping autoblockers check
`storybook upgrade --force` | +| Option | Description | +| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `-h`, `--help` | Output usage information
`storybook upgrade --help` | +| `-c`, `--config-dir` | Directory where to load Storybook configurations from
`storybook upgrade --config-dir .storybook` | +| `-n`, `--dry-run` | Checks for version upgrades without installing them
`storybook upgrade --dry-run` | +| `-s`, `--skip-check` | Skips the migration check step during the upgrade process
`storybook upgrade --skip-check` | +| `-y`, `--yes` | Skips interactive prompts and automatically upgrades Storybook to the latest version
`storybook upgrade --yes` | +| `-f`,`--force` | Force the upgrade, skipping autoblockers check
`storybook upgrade --force` | | `--package-manager` | Sets the package manager to use when upgrading Storybook.
Available package managers include `npm`, `yarn`, and `pnpm`
`storybook upgrade --package-manager pnpm` | -| `--debug` | Outputs more logs in the CLI to assist debugging
`storybook upgrade --debug` | +| `--debug` | Outputs more logs in the CLI to assist debugging
`storybook upgrade --debug` | | `--disable-telemetry` | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.mdx#how-to-opt-out)
`storybook upgrade --disable-telemetry` | | `--enable-crash-reports` | Enables sending crash reports to Storybook's telemetry. Learn more about it [here](../configure/telemetry.mdx#crash-reports-disabled-by-default)
`storybook upgrade --enable-crash-reports` | @@ -195,16 +195,16 @@ For example, `storybook@latest migrate csf-2-to-3 --dry-run`, checks your projec Options include: -| Option | Description | -| -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `-h`, `--help` | Output usage information
`storybook migrate --help` | -| `-c`, `--config-dir` | Directory where to load Storybook configurations from
`storybook migrate --config-dir .storybook` | -| `-n`, `--dry-run` | Verify the migration exists and show the files to which it will be applied
`storybook migrate --dry-run` | -| `-l`, `--list` | Shows a list of available codemods
`storybook migrate --list` | -| `-g`, `--glob` | Glob for files upon which to apply the codemods
`storybook migrate --glob src/**/*.stories.tsx` | +| Option | Description | +| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `-h`, `--help` | Output usage information
`storybook migrate --help` | +| `-c`, `--config-dir` | Directory where to load Storybook configurations from
`storybook migrate --config-dir .storybook` | +| `-n`, `--dry-run` | Verify the migration exists and show the files to which it will be applied
`storybook migrate --dry-run` | +| `-l`, `--list` | Shows a list of available codemods
`storybook migrate --list` | +| `-g`, `--glob` | Glob for files upon which to apply the codemods
`storybook migrate --glob src/**/*.stories.tsx` | | `-p`, `--parser` | Sets the [jscodeshift parser](https://github.com/facebook/jscodeshift#parser).
Available parsers include `babel`, `babylon`, `flow`, `ts`, and `tsx`
`storybook migrate --parser tsx` | -| `-r`, `--rename [from-to]` | Renames the files affected by the codemod to include the provided suffix
`storybook migrate --rename ".js:.ts"` | -| `--debug` | Outputs more logs in the CLI to assist debugging
`storybook migrate --debug` | +| `-r`, `--rename [from-to]` | Renames the files affected by the codemod to include the provided suffix
`storybook migrate --rename ".js:.ts"` | +| `--debug` | Outputs more logs in the CLI to assist debugging
`storybook migrate --debug` | ### `automigrate` @@ -218,17 +218,17 @@ For example, `storybook@latest automigrate --dry-run` scans your project for pot Options include: -| Option | Description | -| ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `-h`, `--help` | Output usage information
`storybook automigrate --help` | -| `-c`, `--config-dir` | Directory where to load Storybook configurations from
`storybook automigrate --config-dir .storybook` | -| `-n`, `--dry-run` | Checks for available migrations without applying them
`storybook automigrate --dry-run` | -| `-s`, `--skip-install` | Skip installing dependencies whenever applicable
`storybook automigrate --skip-install` | -| `-y`, `--yes` | Applies available migrations automatically without prompting for confirmation
`storybook automigrate --yes` | -| `-l`, `--list` | Shows a list of available automigrations
`storybook automigrate --list` | +| Option | Description | +| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `-h`, `--help` | Output usage information
`storybook automigrate --help` | +| `-c`, `--config-dir` | Directory where to load Storybook configurations from
`storybook automigrate --config-dir .storybook` | +| `-n`, `--dry-run` | Checks for available migrations without applying them
`storybook automigrate --dry-run` | +| `-s`, `--skip-install` | Skip installing dependencies whenever applicable
`storybook automigrate --skip-install` | +| `-y`, `--yes` | Applies available migrations automatically without prompting for confirmation
`storybook automigrate --yes` | +| `-l`, `--list` | Shows a list of available automigrations
`storybook automigrate --list` | | `--package-manager` | Sets the package manager to use when running the auto migration.
Available package managers include `npm`, `yarn`, and `pnpm`
`storybook automigrate --package-manager pnpm` | | `--renderer` | Specifies Storybook's renderer to use when running the automigration.
Useful for monorepo environments where multiple Storybook instances can exist in the same project
`storybook automigrate --renderer vue` | -| `--debug` | Outputs more logs in the CLI to assist debugging
`storybook automigrate --debug` | +| `--debug` | Outputs more logs in the CLI to assist debugging
`storybook automigrate --debug` | | `--disable-telemetry` | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.mdx#how-to-opt-out)
`storybook automigrate --disable-telemetry` | | `--enable-crash-reports` | Enables sending crash reports to Storybook's telemetry. Learn more about it [here](../configure/telemetry.mdx#crash-reports-disabled-by-default)
`storybook automigrate --enable-crash-reports` | @@ -242,12 +242,12 @@ storybook doctor [options] Options include: -| Option | Description | -| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `-h`, `--help` | Output usage information
`storybook doctor --help` | -| `-c`, `--config-dir` | Directory where to load Storybook configurations from
`storybook doctor --config-dir .storybook` | +| Option | Description | +| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `-h`, `--help` | Output usage information
`storybook doctor --help` | +| `-c`, `--config-dir` | Directory where to load Storybook configurations from
`storybook doctor --config-dir .storybook` | | `--package-manager` | Sets the package manager to use when running the health check.
Available package managers include `npm`, `yarn`, and `pnpm`
`storybook doctor --package-manager pnpm` | -| `--debug` | Outputs more logs in the CLI to assist debugging
`storybook doctor --debug` | +| `--debug` | Outputs more logs in the CLI to assist debugging
`storybook doctor --debug` | ### `info` @@ -300,12 +300,12 @@ The `framework-filter` argument is optional and can filter the list of available Options include: -| Option | Description | -| --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `-h`, `--help` | Output usage information
`storybook sandbox --help` | -| `-o`, `--output [dir-name]` | Configures the location of the sandbox project
`storybook sandbox --output /my-sandbox-project` | -| `--no-init` | Generates a sandbox project without without initializing Storybook
`storybook sandbox --no-init` | -| `--debug` | Outputs more logs in the CLI to assist debugging
`storybook sandbox --debug` | +| Option | Description | +| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `-h`, `--help` | Output usage information
`storybook sandbox --help` | +| `-o`, `--output [dir-name]` | Configures the location of the sandbox project
`storybook sandbox --output /my-sandbox-project` | +| `--no-init` | Generates a sandbox project without without initializing Storybook
`storybook sandbox --no-init` | +| `--debug` | Outputs more logs in the CLI to assist debugging
`storybook sandbox --debug` | | `--disable-telemetry` | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.mdx#how-to-opt-out)
`storybook sandbox --disable-telemetry` | | `--enable-crash-reports` | Enables sending crash reports to Storybook's telemetry. Learn more about it [here](../configure/telemetry.mdx#crash-reports-disabled-by-default)
`storybook sandbox --enable-crash-reports` | diff --git a/docs/api/csf.mdx b/docs/api/csf.mdx index 2cab3e29c03..68f2d2f3726 100644 --- a/docs/api/csf.mdx +++ b/docs/api/csf.mdx @@ -41,13 +41,13 @@ With CSF, every named export in the file represents a story object by default. The exported identifiers will be converted to "start case" using Lodash's [startCase](https://lodash.com/docs/#startCase) function. For example: -| Identifier | Transformation | -| ---------------- | ----------------- | -| name | Name | -| someName | Some Name | -| someNAME | Some NAME | +| Identifier | Transformation | +| ---------------- | ------------------- | +| name | Name | +| someName | Some Name | +| someNAME | Some NAME | | some\_custom\_NAME | Some Custom NAME | -| someName1234 | Some Name 1 2 3 4 | +| someName1234 | Some Name 1 2 3 4 | We recommend that all export names to start with a capital letter. diff --git a/docs/api/doc-blocks/doc-block-controls.mdx b/docs/api/doc-blocks/doc-block-controls.mdx index be5a589ac98..5c11708a001 100644 --- a/docs/api/doc-blocks/doc-block-controls.mdx +++ b/docs/api/doc-blocks/doc-block-controls.mdx @@ -33,7 +33,9 @@ import * as ButtonStories from './Button.stories' {/* prettier-ignore-end */} + The Controls doc block will only have functioning UI controls if you have also installed and registered [`@storybook/addon-controls`](../../essentials/controls.mdx) (included in [`@storybook/addon-essentials`](../../essentials/index.mdx)) and haven't turned off inline stories with the [`inline`](./doc-block-story.mdx#inline) configuration option. + ## Controls @@ -69,7 +71,9 @@ import { Controls } from '@storybook/blocks';
+ This API configures Controls blocks used within docs pages. To configure the Controls addon panel, see the [Controls addon docs](../../essentials/controls.mdx). To configure individual controls, you can specify [argTypes](../arg-types.mdx#control) for each. + ### `exclude` diff --git a/docs/api/doc-blocks/doc-block-markdown.mdx b/docs/api/doc-blocks/doc-block-markdown.mdx index a1824ba6f79..ea807584bbe 100644 --- a/docs/api/doc-blocks/doc-block-markdown.mdx +++ b/docs/api/doc-blocks/doc-block-markdown.mdx @@ -62,7 +62,7 @@ Provides the markdown-formatted string to parse and display. ### `options` -Specifies the options passed to the underlying [`markdown-to-jsx` library](https://github.com/probablyup/markdown-to-jsx/blob/main/README.mdx). +Specifies the options passed to the underlying [`markdown-to-jsx` library](https://github.com/probablyup/markdown-to-jsx/blob/main/README.md). ## Why not import markdown directly? diff --git a/docs/api/doc-blocks/doc-block-meta.mdx b/docs/api/doc-blocks/doc-block-meta.mdx index 06d599adf53..f0121df062e 100644 --- a/docs/api/doc-blocks/doc-block-meta.mdx +++ b/docs/api/doc-blocks/doc-block-meta.mdx @@ -86,7 +86,9 @@ Attaching an MDX file to a component’s stories with the `of` prop serves two p 2. Attaches the component and its stories to the MDX file, allowing you to use other doc blocks in “attached” mode (for instance to use the `Stories` block). + The `of` prop is optional. If you don’t want to attach a specific CSF file to this MDX file, you can either use the `title` prop to control the location, or emit `Meta` entirely, and let [autotitle](../../configure/user-interface/sidebar-and-urls.mdx#csf-30-auto-titles) decide where it goes. + ### `title` @@ -109,7 +111,9 @@ import { Meta } from '@storybook/blocks'; {/* prettier-ignore-end */} + If you want to change the sorting of the docs entry with the component’s stories, use [Story Sorting](../../writing-stories/naming-components-and-hierarchy.mdx#sorting-stories), or add specific MDX files to your `stories` field in `main.js` in order. + ## Attached vs. unattached diff --git a/docs/api/doc-blocks/doc-block-source.mdx b/docs/api/doc-blocks/doc-block-source.mdx index a04933ba026..e2d5f94d598 100644 --- a/docs/api/doc-blocks/doc-block-source.mdx +++ b/docs/api/doc-blocks/doc-block-source.mdx @@ -93,7 +93,9 @@ Default: `parameters.docs.source.dark` Determines if the snippet is rendered in dark mode. + Light mode is only supported when the `Source` block is rendered independently. When rendered as part of a [`Canvas` block](./doc-block-canvas.mdx)—like it is in [autodocs](../../writing-docs/autodocs.mdx)—it will always use dark mode. + @@ -158,5 +160,7 @@ Specifies how the source code is rendered. * **dynamic**: Renders the story source with dynamically updated arg values + Note that dynamic snippets will only work if the story uses [`args`](../../writing-stories/args.mdx) and the [`Story` block](./doc-block-story.mdx) for that story is rendered along with the `Source` block. + diff --git a/docs/api/doc-blocks/doc-block-stories.mdx b/docs/api/doc-blocks/doc-block-stories.mdx index 6d219de49e0..42cd9fcc2c9 100644 --- a/docs/api/doc-blocks/doc-block-stories.mdx +++ b/docs/api/doc-blocks/doc-block-stories.mdx @@ -43,7 +43,9 @@ Default: `true` Determines if the collection of stories includes the primary (first) story. + If a stories file contains only one story and `includePrimary={true}`, the `Stories` block will render nothing to avoid a potentially confusing situation. + ### `title` diff --git a/docs/api/doc-blocks/doc-block-story.mdx b/docs/api/doc-blocks/doc-block-story.mdx index e59d9215465..19509b523a3 100644 --- a/docs/api/doc-blocks/doc-block-story.mdx +++ b/docs/api/doc-blocks/doc-block-story.mdx @@ -12,7 +12,9 @@ Stories (component tests) are Storybook's fundamental building blocks. In Storybook Docs, you can render any of your stories from your CSF files in the context of an MDX file with all annotations (parameters, args, loaders, decorators, play function) applied using the `Story` block. + Typically you want to use the [`Canvas` block](./doc-block-canvas.mdx) to render a story with a surrounding border and the source block, but you can use the `Story` block to render just the story. + ![Screenshot of Story block](../../_assets/api/doc-block-story.png) @@ -97,7 +99,9 @@ Default: `parameters.docs.story.inline` or `true` (for [supported frameworks](.. Determines whether the story is rendered `inline` (in the same browser frame as the other docs content) or in an iframe. + Setting the `inline` option to false will prevent the associated [controls](./doc-block-controls.mdx) from updating the story within the documentation page. This is a known limitation of the current implementation and will be addressed in a future release. + ### `meta` diff --git a/docs/api/doc-blocks/doc-block-unstyled.mdx b/docs/api/doc-blocks/doc-block-unstyled.mdx index c17a9e8376f..4e9e56a8ade 100644 --- a/docs/api/doc-blocks/doc-block-unstyled.mdx +++ b/docs/api/doc-blocks/doc-block-unstyled.mdx @@ -38,7 +38,9 @@ Yields: ![Screenshot of Unstyled Doc Block](../../_assets/api/doc-block-unstyled.png) + The other blocks like [`Story`](./doc-block-story.mdx) and [`Canvas`](./doc-block-canvas.mdx) are already unstyled, so there’s no need to wrap those in the `Unstyled` block to ensure that Storybook’s styles don’t bleed into the stories. However, if you import your components directly in the MDX, you most likely want to wrap them in the Unstyled block. + diff --git a/docs/api/main-config/main-config-babel-default.mdx b/docs/api/main-config/main-config-babel-default.mdx index b0ce4d41c17..25a763fe800 100644 --- a/docs/api/main-config/main-config-babel-default.mdx +++ b/docs/api/main-config/main-config-babel-default.mdx @@ -12,7 +12,9 @@ Type: `(config: Babel.Config, options: Options) => Babel.Config | Promise + To adjust your Storybook's Babel setup directly—not via an addon—use [`babel`](./main-config-babel.mdx) instead. + {/* prettier-ignore-start */} diff --git a/docs/api/main-config/main-config-babel.mdx b/docs/api/main-config/main-config-babel.mdx index 2aedba7b479..88203adceb0 100644 --- a/docs/api/main-config/main-config-babel.mdx +++ b/docs/api/main-config/main-config-babel.mdx @@ -12,7 +12,9 @@ Type: `(config: Babel.Config, options: Options) => Babel.Config | Promise + [Addon authors](../../addons/writing-presets.mdx#babel) should use [`babelDefault`](./main-config-babel-default.mdx) instead, which is applied to the preview config before any user presets have been applied. + {/* prettier-ignore-start */} @@ -26,7 +28,9 @@ Customize Storybook's [Babel](https://babeljs.io/) setup. The options provided by [Babel](https://babeljs.io/docs/options) are only applicable if you've enabled the [`@storybook/addon-webpack5-compiler-babel`](https://storybook.js.org/addons/@storybook/addon-webpack5-compiler-babel) addon. + If you have an existing Babel configuration file (e.g., `.babelrc`), it will be automatically detected and used by Storybook without any additional configuration required. + ## `Options` diff --git a/docs/api/main-config/main-config-indexers.mdx b/docs/api/main-config/main-config-indexers.mdx index 246ad79372c..9d31b0c169c 100644 --- a/docs/api/main-config/main-config-indexers.mdx +++ b/docs/api/main-config/main-config-indexers.mdx @@ -27,7 +27,7 @@ They are defined as a function that returns the full list of indexers, including {/* prettier-ignore-end */} -Unless your indexer is doing something relatively trivial (e.g. [indexing stories with a different naming convention](../../configure/sidebar-and-urls#story-indexers)), in addition to indexing the file, you will likely need to [transpile it to CSF](#transpiling-to-csf) so that Storybook can read them in the browser. +Unless your indexer is doing something relatively trivial (e.g. [indexing stories with a different naming convention](../../configure/user-interface/sidebar-and-urls.mdx#story-indexers)), in addition to indexing the file, you will likely need to [transpile it to CSF](#transpiling-to-csf) so that Storybook can read them in the browser. ## `Indexer` diff --git a/docs/api/main-config/main-config-manager-head.mdx b/docs/api/main-config/main-config-manager-head.mdx index bbf9e8e8cae..8af2641db0c 100644 --- a/docs/api/main-config/main-config-manager-head.mdx +++ b/docs/api/main-config/main-config-manager-head.mdx @@ -12,7 +12,9 @@ Type: `(head: string) => string` Programmatically adjust the manager's `` of your Storybook. For example, load a custom font or add a script. Most often used by [addon authors](../../addons/writing-presets.mdx#ui-configuration). + If you don't need to programmatically adjust the manager head, you can add scripts and styles to `manager-head.html` instead. + For example, you can conditionally add scripts or styles, depending on the environment: diff --git a/docs/api/main-config/main-config-preview-body.mdx b/docs/api/main-config/main-config-preview-body.mdx index 468913537ac..0777c1a3590 100644 --- a/docs/api/main-config/main-config-preview-body.mdx +++ b/docs/api/main-config/main-config-preview-body.mdx @@ -12,7 +12,9 @@ Type: `(body: string) => string` Programmatically adjust the [preview ``](../../configure/story-rendering.mdx#adding-to-body) of your Storybook. Most often used by [addon authors](../../addons/writing-presets.mdx#ui-configuration). + If you don't need to programmatically adjust the preview body, you can add scripts and styles to [`preview-body.html`](../../configure/story-rendering.mdx#adding-to-body) instead. + For example, you can conditionally add scripts or styles, depending on the environment: diff --git a/docs/builders/webpack.mdx b/docs/builders/webpack.mdx index f7406f8f916..8ad9321bfed 100644 --- a/docs/builders/webpack.mdx +++ b/docs/builders/webpack.mdx @@ -11,8 +11,8 @@ Storybook Webpack builder is the default builder for Storybook. This builder ena By default, Storybook provides zero-config support for Webpack and automatically sets up a baseline configuration created to work with the most common use cases. However, you can extend your Storybook configuration file (i.e., `.storybook/main.js|ts`) and provide additional options to improve your Storybook's performance or customize it to your needs. Listed below are the available options and examples of how to use them. -| Option | Description | -| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Option | Description | +| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `lazyCompilation` | Enables Webpack's experimental [`lazy compilation`](https://webpack.js.org/configuration/experiments/#experimentslazycompilation)
`core: { builder: { options: { lazyCompilation: true } } }` | | `fsCache` | Configures Webpack's filesystem [caching](https://webpack.js.org/configuration/cache/#cachetype) feature
`core: { builder: { options: { fsCache: true } } }` | diff --git a/docs/configure/index.mdx b/docs/configure/index.mdx index 27389bbefeb..f07fa5cb5ca 100644 --- a/docs/configure/index.mdx +++ b/docs/configure/index.mdx @@ -25,22 +25,22 @@ Storybook's main configuration (i.e., the `main.js|ts`) defines your Storybook p This configuration file is a [preset](../addons/addon-types.mdx) and, as such, has a powerful interface, which can be further customized. Read our documentation on writing [presets](../addons/writing-presets.mdx) to learn more. -| Configuration element | Description | -| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `stories` | The array of globs that indicates the [location of your story files](#configure-story-loading), relative to `main.js` | +| Configuration element | Description | +| --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `stories` | The array of globs that indicates the [location of your story files](#configure-story-loading), relative to `main.js` | | `staticDirs` | Sets a list of directories of [static files](./integration/images-and-assets.mdx#serving-static-files-via-storybook-configuration) to be loaded by Storybook
`staticDirs: ['../public']` | -| `addons` | Sets the list of [addons](https://storybook.js.org/integrations) loaded by Storybook
`addons: ['@storybook/addon-essentials']` | +| `addons` | Sets the list of [addons](https://storybook.js.org/integrations) loaded by Storybook
`addons: ['@storybook/addon-essentials']` | | `typescript` | Configures how Storybook handles [TypeScript files](./integration/typescript.mdx)
`typescript: { check: false, checkOptions: {} }` | | `framework` | Configures Storybook based on a set of [framework-specific](./integration/frameworks.mdx) settings
`framework: { name: '@storybook/svelte-vite', options:{} }` | | `core` | Configures Storybook's [internal features](../api/main-config/main-config-core.mdx)
`core: { disableTelemetry: true, }` | -| `docs` | Configures Storybook's [auto-generated documentation](../writing-docs/autodocs.mdx)
`docs: { autodocs: 'tag' }` | +| `docs` | Configures Storybook's [auto-generated documentation](../writing-docs/autodocs.mdx)
`docs: { autodocs: 'tag' }` | | `features` | Enables Storybook's [additional features](../api/main-config/main-config-features.mdx)
See table below for a list of available features | -| `refs` | Configures [Storybook composition](../sharing/storybook-composition.mdx)
`refs:{ example: { title: 'ExampleStorybook', url:'https://your-url.com' } }` | -| `logLevel` | Configures Storybook's logs in the browser terminal. Useful for debugging
`logLevel: 'debug'` | -| `webpackFinal` | Customize Storybook's [Webpack](../builders/webpack.mdx) setup
`webpackFinal: async (config:any) => { return config; }` | -| `viteFinal` | Customize Storybook's Vite setup when using the [vite builder](https://github.com/storybookjs/builder-vite)
`viteFinal: async (config: Vite.InlineConfig, options: Options) => { return config; }` | -| `env` | Defines custom Storybook [environment variables](./environment-variables.mdx#using-storybook-configuration).
`env: (config) => ({...config, EXAMPLE_VAR: 'Example var' }),` | -| `build` | Optimizes Storybook's production [build](../api/main-config/main-config-build.mdx) for performance by excluding specific features from the bundle. Useful when decreased build times are a priority.
`build: { test: {} }` | +| `refs` | Configures [Storybook composition](../sharing/storybook-composition.mdx)
`refs: { example: { title: 'ExampleStorybook', url:'https://your-url.com' } }` | +| `logLevel` | Configures Storybook's logs in the browser terminal. Useful for debugging
`logLevel: 'debug'` | +| `webpackFinal` | Customize Storybook's [Webpack](../builders/webpack.mdx) setup
`webpackFinal: async (config:any) => { return config; }` | +| `viteFinal` | Customize Storybook's Vite setup when using the [vite builder](https://github.com/storybookjs/builder-vite)
`viteFinal: async (config: Vite.InlineConfig, options: Options) => { return config; }` | +| `env` | Defines custom Storybook [environment variables](./environment-variables.mdx#using-storybook-configuration).
`env: (config) => ({...config, EXAMPLE_VAR: 'Example var' }),` | +| `build` | Optimizes Storybook's production [build](../api/main-config/main-config-build.mdx) for performance by excluding specific features from the bundle. Useful when decreased build times are a priority.
`build: { test: {} }` | ## Configure story loading diff --git a/docs/configure/integration/frameworks-feature-support.mdx b/docs/configure/integration/frameworks-feature-support.mdx index c310885dcde..b2f88c51d1c 100644 --- a/docs/configure/integration/frameworks-feature-support.mdx +++ b/docs/configure/integration/frameworks-feature-support.mdx @@ -13,9 +13,9 @@ Below is a comprehensive table of what’s supported in which framework integrat Core frameworks have dedicated maintainers or contributors who are responsible for maintaining the integration. As such, you can use most Storybook features in these frameworks. -| | React | Vue 3 | Angular | Web Components | -| ----------------------------------------------------------------------------------------- | ----- | ----- | ------- | -------------- | -| **Essentials** | | | | | +| | React | Vue 3 | Angular | Web Components | +| --------------------------------------------------------------------------------------------- | ----- | ----- | ------- | -------------- | +| **Essentials** | | | | | | [Actions](../../essentials/actions.mdx) | ✅ | ✅ | ✅ | ✅ | | [Backgrounds](../../essentials/backgrounds.mdx) | ✅ | ✅ | ✅ | ✅ | | [Docs](../../writing-docs/index.mdx) | ✅ | ✅ | ✅ | ✅ | @@ -23,49 +23,49 @@ Core frameworks have dedicated maintainers or contributors who are responsible f | [Controls](../../essentials/controls.mdx) | ✅ | ✅ | ✅ | ✅ | | [Measure](../../essentials/measure-and-outline.mdx#measure-addon) | ✅ | ✅ | ✅ | ✅ | | [Outline](../../essentials/measure-and-outline.mdx#outline-addon) | ✅ | ✅ | ✅ | ✅ | -| **Addons** | | | | | +| **Addons** | | | | | | [A11y](../../writing-tests/accessibility-testing.mdx) | ✅ | ✅ | ✅ | ✅ | | [Interactions](../../writing-tests/interaction-testing.mdx) | ✅ | ✅ | ✅ | ✅ | | [Test runner](../../writing-tests/test-runner.mdx) | ✅ | ✅ | ✅ | ✅ | | [Test coverage](../../writing-tests/test-coverage.mdx) | ✅ | ✅ | ✅ | ✅ | -| [CSS resources](https://github.com/storybookjs/addon-cssresources) | ✅ | ✅ | ✅ | ✅ | -| [Design assets](https://github.com/storybookjs/addon-design-assets) | ✅ | ✅ | ✅ | ✅ | -| [Events](https://github.com/storybookjs/addon-events) | ✅ | ✅ | ✅ | ✅ | -| [Google analytics](https://github.com/storybookjs/addon-google-analytics) | ✅ | ✅ | ✅ | ✅ | -| [GraphQL](https://github.com/storybookjs/addon-graphql) | ✅ | | ✅ | | -| [Jest](https://github.com/storybookjs/storybook/tree/next/code/addons/jest) | ✅ | ✅ | ✅ | ✅ | -| [Links](https://github.com/storybookjs/storybook/tree/next/code/addons/links) | ✅ | ✅ | ✅ | ✅ | -| [Queryparams](https://github.com/storybookjs/addon-queryparams) | ✅ | ✅ | ✅ | ✅ | -| [Storysource](https://github.com/storybookjs/storybook/tree/next/code/addons/storysource) | ✅ | ✅ | ✅ | ✅ | -| **Docs** | | | | | +| [CSS resources](https://github.com/storybookjs/addon-cssresources) | ✅ | ✅ | ✅ | ✅ | +| [Design assets](https://github.com/storybookjs/addon-design-assets) | ✅ | ✅ | ✅ | ✅ | +| [Events](https://github.com/storybookjs/addon-events) | ✅ | ✅ | ✅ | ✅ | +| [Google analytics](https://github.com/storybookjs/addon-google-analytics) | ✅ | ✅ | ✅ | ✅ | +| [GraphQL](https://github.com/storybookjs/addon-graphql) | ✅ | | ✅ | | +| [Jest](https://github.com/storybookjs/storybook/tree/next/code/addons/jest) | ✅ | ✅ | ✅ | ✅ | +| [Links](https://github.com/storybookjs/storybook/tree/next/code/addons/links) | ✅ | ✅ | ✅ | ✅ | +| [Queryparams](https://github.com/storybookjs/addon-queryparams) | ✅ | ✅ | ✅ | ✅ | +| [Storysource](https://github.com/storybookjs/storybook/tree/next/code/addons/storysource) | ✅ | ✅ | ✅ | ✅ | +| **Docs** | | | | | | [CSF Stories](../../api/csf.mdx) | ✅ | ✅ | ✅ | ✅ | | [Autodocs](../../writing-docs/autodocs.mdx) | ✅ | ✅ | ✅ | ✅ | -| [Doc Blocks - ArgTypes](../../api/doc-blocks/doc-block-argtypes.mdx) | ✅ | ✅ | ✅ | ✅ | -| [Doc Blocks - Canvas](../../api/doc-blocks/doc-block-canvas.mdx) | ✅ | ✅ | ✅ | ✅ | -| [Doc Blocks - ColorPalette](../../api/doc-blocks/doc-block-colorpalette.mdx) | ✅ | ✅ | ✅ | ✅ | -| [Doc Blocks - Controls](../../api/doc-blocks/doc-block-controls.mdx) | ✅ | ✅ | ✅ | ✅ | -| [Doc Blocks - Description](../../api/doc-blocks/doc-block-description.mdx) | ✅ | ✅ | ✅ | ✅ | -| [Doc Blocks - IconGallery](../../api/doc-blocks/doc-block-icongallery.mdx) | ✅ | ✅ | ✅ | ✅ | -| [Doc Blocks - Markdown](../../api/doc-blocks/doc-block-markdown.mdx) | ✅ | ✅ | ✅ | ✅ | -| [Doc Blocks - Meta](../../api/doc-blocks/doc-block-meta.mdx) | ✅ | ✅ | ✅ | ✅ | -| [Doc Blocks - Primary](../../api/doc-blocks/doc-block-primary.mdx) | ✅ | ✅ | ✅ | ✅ | -| [Doc Blocks - Source](../../api/doc-blocks/doc-block-source.mdx) | ✅ | ✅ | ✅ | ✅ | -| [Doc Blocks - Story](../../api/doc-blocks/doc-block-story.mdx) | ✅ | ✅ | ✅ | ✅ | -| [Doc Blocks - Stories](../../api/doc-blocks/doc-block-stories.mdx) | ✅ | ✅ | ✅ | ✅ | -| [Doc Blocks - Subtitle](../../api/doc-blocks/doc-block-subtitle.mdx) | ✅ | ✅ | ✅ | ✅ | -| [Doc Blocks - Title](../../api/doc-blocks/doc-block-title.mdx) | ✅ | ✅ | ✅ | ✅ | -| [Doc Blocks - Typeset](../../api/doc-blocks/doc-block-typeset.mdx) | ✅ | ✅ | ✅ | ✅ | -| [Doc Blocks - Unstyled](../../api/doc-blocks/doc-block-unstyled.mdx) | ✅ | ✅ | ✅ | ✅ | -| [Doc Blocks - UseOf](../../api/doc-blocks/doc-block-useof.mdx) | ✅ | ✅ | ✅ | ✅ | -| Inline stories | ✅ | ✅ | ✅ | ✅ | +| [Doc Blocks - ArgTypes](../../api/doc-blocks/doc-block-argtypes.mdx) | ✅ | ✅ | ✅ | ✅ | +| [Doc Blocks - Canvas](../../api/doc-blocks/doc-block-canvas.mdx) | ✅ | ✅ | ✅ | ✅ | +| [Doc Blocks - ColorPalette](../../api/doc-blocks/doc-block-colorpalette.mdx) | ✅ | ✅ | ✅ | ✅ | +| [Doc Blocks - Controls](../../api/doc-blocks/doc-block-controls.mdx) | ✅ | ✅ | ✅ | ✅ | +| [Doc Blocks - Description](../../api/doc-blocks/doc-block-description.mdx) | ✅ | ✅ | ✅ | ✅ | +| [Doc Blocks - IconGallery](../../api/doc-blocks/doc-block-icongallery.mdx) | ✅ | ✅ | ✅ | ✅ | +| [Doc Blocks - Markdown](../../api/doc-blocks/doc-block-markdown.mdx) | ✅ | ✅ | ✅ | ✅ | +| [Doc Blocks - Meta](../../api/doc-blocks/doc-block-meta.mdx) | ✅ | ✅ | ✅ | ✅ | +| [Doc Blocks - Primary](../../api/doc-blocks/doc-block-primary.mdx) | ✅ | ✅ | ✅ | ✅ | +| [Doc Blocks - Source](../../api/doc-blocks/doc-block-source.mdx) | ✅ | ✅ | ✅ | ✅ | +| [Doc Blocks - Story](../../api/doc-blocks/doc-block-story.mdx) | ✅ | ✅ | ✅ | ✅ | +| [Doc Blocks - Stories](../../api/doc-blocks/doc-block-stories.mdx) | ✅ | ✅ | ✅ | ✅ | +| [Doc Blocks - Subtitle](../../api/doc-blocks/doc-block-subtitle.mdx) | ✅ | ✅ | ✅ | ✅ | +| [Doc Blocks - Title](../../api/doc-blocks/doc-block-title.mdx) | ✅ | ✅ | ✅ | ✅ | +| [Doc Blocks - Typeset](../../api/doc-blocks/doc-block-typeset.mdx) | ✅ | ✅ | ✅ | ✅ | +| [Doc Blocks - Unstyled](../../api/doc-blocks/doc-block-unstyled.mdx) | ✅ | ✅ | ✅ | ✅ | +| [Doc Blocks - UseOf](../../api/doc-blocks/doc-block-useof.mdx) | ✅ | ✅ | ✅ | ✅ | +| Inline stories | ✅ | ✅ | ✅ | ✅ | ## Community frameworks Community frameworks have fewer contributors which means they may not be as up to date as core frameworks. If you use one of these frameworks for your job, please consider contributing to its integration with Storybook. -| | Ember | HTML | Svelte | Preact | Qwik | SolidJS | -| ----------------------------------------------------------------------------------------- | ----- | ---- | ------ | ------ | ---- | ------- | -| **Essentials** | | | | | | | +| | Ember | HTML | Svelte | Preact | Qwik | SolidJS | +| --------------------------------------------------------------------------------------------- | ----- | ---- | ------ | ------ | ---- | ------- | +| **Essentials** | | | | | | | | [Actions](../../essentials/actions.mdx) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | | [Backgrounds](../../essentials/backgrounds.mdx) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | | [Docs](../../writing-docs/index.mdx) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | @@ -73,48 +73,48 @@ Community frameworks have fewer contributors which means they may not be as up t | [Controls](../../essentials/controls.mdx) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | | [Measure](../../essentials/measure-and-outline.mdx#measure-addon) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | | [Outline](../../essentials/measure-and-outline.mdx#outline-addon) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | -| **Addons** | | | | | | | +| **Addons** | | | | | | | | [A11y](../../writing-tests/accessibility-testing.mdx) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | | [Interactions](../../writing-tests/interaction-testing.mdx) | | ✅ | ✅ | ✅ | ✅ | ✅ | | [Test runner](../../writing-tests/test-runner.mdx) | | ✅ | ✅ | ✅ | ✅ | ✅ | | [Test coverage](../../writing-tests/test-coverage.mdx) | | ✅ | ✅ | ✅ | ✅ | ✅ | -| [CSS resources](https://github.com/storybookjs/addon-cssresources) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | -| [Design assets](https://github.com/storybookjs/addon-design-assets) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | -| [Events](https://github.com/storybookjs/addon-events) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | -| [Google analytics](https://github.com/storybookjs/addon-google-analytics) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | -| [GraphQL](https://github.com/storybookjs/addon-graphql) | | | | | | | -| [Jest](https://github.com/storybookjs/storybook/tree/next/code/addons/jest) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | -| [Links](https://github.com/storybookjs/storybook/tree/next/code/addons/links) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | -| [Queryparams](https://github.com/storybookjs/addon-queryparams) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | -| [Storysource](https://github.com/storybookjs/storybook/tree/next/code/addons/storysource) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | -| **Docs** | | | | | | | +| [CSS resources](https://github.com/storybookjs/addon-cssresources) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | +| [Design assets](https://github.com/storybookjs/addon-design-assets) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | +| [Events](https://github.com/storybookjs/addon-events) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | +| [Google analytics](https://github.com/storybookjs/addon-google-analytics) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | +| [GraphQL](https://github.com/storybookjs/addon-graphql) | | | | | | | +| [Jest](https://github.com/storybookjs/storybook/tree/next/code/addons/jest) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | +| [Links](https://github.com/storybookjs/storybook/tree/next/code/addons/links) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | +| [Queryparams](https://github.com/storybookjs/addon-queryparams) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | +| [Storysource](https://github.com/storybookjs/storybook/tree/next/code/addons/storysource) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | +| **Docs** | | | | | | | | [CSF Stories](../../api/csf.mdx) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | | [Autodocs](../../writing-docs/autodocs.mdx) | | ✅ | ✅ | ✅ | ✅ | ✅ | -| [Doc Blocks - ArgTypes](../../api/doc-blocks/doc-block-argtypes.mdx) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | -| [Doc Blocks - Canvas](../../api/doc-blocks/doc-block-canvas.mdx) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | -| [Doc Blocks - ColorPalette](../../api/doc-blocks/doc-block-colorpalette.mdx) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | -| [Doc Blocks - Controls](../../api/doc-blocks/doc-block-controls.mdx) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | -| [Doc Blocks - Description](../../api/doc-blocks/doc-block-description.mdx) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | -| [Doc Blocks - IconGallery](../../api/doc-blocks/doc-block-icongallery.mdx) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | -| [Doc Blocks - Markdown](../../api/doc-blocks/doc-block-markdown.mdx) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | -| [Doc Blocks - Meta](../../api/doc-blocks/doc-block-meta.mdx) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | -| [Doc Blocks - Primary](../../api/doc-blocks/doc-block-primary.mdx) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | -| [Doc Blocks - Source](../../api/doc-blocks/doc-block-source.mdx) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | -| [Doc Blocks - Story](../../api/doc-blocks/doc-block-story.mdx) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | -| [Doc Blocks - Stories](../../api/doc-blocks/doc-block-stories.mdx) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | -| [Doc Blocks - Subtitle](../../api/doc-blocks/doc-block-subtitle.mdx) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | -| [Doc Blocks - Title](../../api/doc-blocks/doc-block-title.mdx) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | -| [Doc Blocks - Typeset](../../api/doc-blocks/doc-block-typeset.mdx) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | -| [Doc Blocks - Unstyled](../../api/doc-blocks/doc-block-unstyled.mdx) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | -| [Doc Blocks - UseOf](../../api/doc-blocks/doc-block-useof.mdx) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | -| Inline stories | | ✅ | ✅ | | | | +| [Doc Blocks - ArgTypes](../../api/doc-blocks/doc-block-argtypes.mdx) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | +| [Doc Blocks - Canvas](../../api/doc-blocks/doc-block-canvas.mdx) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | +| [Doc Blocks - ColorPalette](../../api/doc-blocks/doc-block-colorpalette.mdx) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | +| [Doc Blocks - Controls](../../api/doc-blocks/doc-block-controls.mdx) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | +| [Doc Blocks - Description](../../api/doc-blocks/doc-block-description.mdx) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | +| [Doc Blocks - IconGallery](../../api/doc-blocks/doc-block-icongallery.mdx) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | +| [Doc Blocks - Markdown](../../api/doc-blocks/doc-block-markdown.mdx) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | +| [Doc Blocks - Meta](../../api/doc-blocks/doc-block-meta.mdx) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | +| [Doc Blocks - Primary](../../api/doc-blocks/doc-block-primary.mdx) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | +| [Doc Blocks - Source](../../api/doc-blocks/doc-block-source.mdx) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | +| [Doc Blocks - Story](../../api/doc-blocks/doc-block-story.mdx) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | +| [Doc Blocks - Stories](../../api/doc-blocks/doc-block-stories.mdx) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | +| [Doc Blocks - Subtitle](../../api/doc-blocks/doc-block-subtitle.mdx) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | +| [Doc Blocks - Title](../../api/doc-blocks/doc-block-title.mdx) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | +| [Doc Blocks - Typeset](../../api/doc-blocks/doc-block-typeset.mdx) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | +| [Doc Blocks - Unstyled](../../api/doc-blocks/doc-block-unstyled.mdx) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | +| [Doc Blocks - UseOf](../../api/doc-blocks/doc-block-useof.mdx) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | +| Inline stories | | ✅ | ✅ | | | | ## Deprecated To align the Storybook ecosystem with the current state of frontend development, the following features and addons are now deprecated, no longer maintained, and will be removed in future versions of Storybook -| Feature | Status | -| --------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [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/index.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. | +| Feature | Status | +| ---------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [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. | diff --git a/docs/configure/integration/frameworks.mdx b/docs/configure/integration/frameworks.mdx index 305d1532355..665efee35e2 100644 --- a/docs/configure/integration/frameworks.mdx +++ b/docs/configure/integration/frameworks.mdx @@ -34,14 +34,14 @@ Every modern web application has unique requirements and relies on various tools {/* prettier-ignore-end */} -| Option | Description | Framework | -| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | -| `nextConfigPath` | Sets the default path for the NextJS configuration file
`framework: { name: '@storybook/nextjs', options: { nextConfigPath: '../next.config.js'} }` | NextJS | +| Option | Description | Framework | +| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | +| `nextConfigPath` | Sets the default path for the NextJS configuration file
`framework: { name: '@storybook/nextjs', options: { nextConfigPath: '../next.config.js'} }` | NextJS | | `builder` | Configures [Webpack 5](../../builders/webpack.mdx) builder options for NextJS
`core: { builder: { name:'webpack5', options: { lazyCompilation: true} }}` | NextJS | -| `strictMode` | Enables React's [strict mode](https://reactjs.org/docs/strict-mode.html)
`framework: { name: '@storybook/react-webpack5', options: { strictMode: false } }` | React | -| `legacyRootApi` | Requires React 18. Toggles support for React's [legacy root API](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis)
`framework: { name: '@storybook/react-webpack5', options: { legacyRootApi: true } }` | React | -| `enableIvy` | Enabled by default with Angular 9+. Replaces the default compiler with the [Ivy compiler](https://docs.angular.lat/guide/ivy)
`framework: { name: '@storybook/angular', options: { enableIvy: true } }` | Angular | -| `enableNgcc` | Enabled by default with Angular 9+. Adds support for ngcc for backwards compatibility
`framework: { name: '@storybook/angular', options: { enableNgcc: false } }` | Angular | +| `strictMode` | Enables React's [strict mode](https://reactjs.org/docs/strict-mode.html)
`framework: { name: '@storybook/react-webpack5', options: { strictMode: false } }` | React | +| `legacyRootApi` | Requires React 18. Toggles support for React's [legacy root API](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis)
`framework: { name: '@storybook/react-webpack5', options: { legacyRootApi: true } }` | React | +| `enableIvy` | Enabled by default with Angular 9+. Replaces the default compiler with the [Ivy compiler](https://docs.angular.lat/guide/ivy)
`framework: { name: '@storybook/angular', options: { enableIvy: true } }` | Angular | +| `enableNgcc` | Enabled by default with Angular 9+. Adds support for ngcc for backwards compatibility
`framework: { name: '@storybook/angular', options: { enableNgcc: false } }` | Angular | *** diff --git a/docs/configure/integration/typescript.mdx b/docs/configure/integration/typescript.mdx index da7dda98201..1583e0da75f 100644 --- a/docs/configure/integration/typescript.mdx +++ b/docs/configure/integration/typescript.mdx @@ -28,23 +28,23 @@ See the [main configuration API reference](../../api/main-config/main-config.mdx Out of the box, Storybook is built to work with a wide range of third-party libraries, enabling you to safely access and document metadata (e.g., props, inputs) from your components without any additional configuration. Since Storybook supports multiple frameworks, it also includes a set of third-party packages to support each framework (e.g., `ts-loader`, `vue-docgen-api` for Vue). If you need to customize the default configuration for a specific use case scenario, you can adjust your Storybook configuration file and provide the required options. Listed below are the available options and examples of how to use them. - | Option | Description | - | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | + | Option | Description | + | -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `check` | Available for Webpack-based projects.
Enables type checking within Storybook
`typescript: { check: true },` | | `checkOptions` | Requires the `check` option to be enabled.
Configures the [`fork-ts-checker-webpack-plugin`](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin) plugin
`typescript: { checkOptions:{},},` | - | `skipCompiler` | Disables parsing Typescript files through the compiler
`typescript: { skipCompiler:false,},` | + | `skipCompiler` | Disables parsing Typescript files through the compiler
`typescript: { skipCompiler:false,},` | Out of the box, Storybook is built to work with a wide range of third-party libraries, enabling you to safely access and document metadata (e.g., props) for your components without any additional configuration. It relies on [`react-docgen`](https://github.com/reactjs/react-docgen), a fast and highly customizable parser to process TypeScript files to infer the component's metadata and generate types automatically for improved performance and type safety. If you need to customize the default configuration for a specific use case scenario, you can adjust your Storybook configuration file and provide the required options. Listed below are the available options and examples of how to use them. - | Option | Description | - | ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | + | Option | Description | + | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `check` | Available for Webpack-based projects.
Enables type checking within Storybook
`typescript: { check: true },` | | `checkOptions` | Requires the `check` option to be enabled.
Configures the [`fork-ts-checker-webpack-plugin`](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin) plugin
`typescript: { checkOptions: {},},` | | `reactDocgen` | Configures the TypeScript parser used by Storybook.
Available options: `react-docgen` (default), `react-docgen-typescript`,` false`
`typescript: { reactDocgen: 'react-docgen'},` | | `reactDocgenTypescriptOptions` | Requires the `reactDocgen`option to be `react-docgen-typescript`.
Configures the `react-docgen-typescript-plugin` plugin per builder
`typescript: { reactDocgen: 'react-docgen-typescript', reactDocgenTypescriptOptions: {},},` | - | `skipCompiler` | Disables parsing Typescript files through the compiler
`typescript: { skipCompiler:false,},` | + | `skipCompiler` | Disables parsing Typescript files through the compiler
`typescript: { skipCompiler:false,},` | {/* prettier-ignore-start */} diff --git a/docs/configure/user-interface/features-and-behavior.mdx b/docs/configure/user-interface/features-and-behavior.mdx index b1dc402b030..9fac396de34 100644 --- a/docs/configure/user-interface/features-and-behavior.mdx +++ b/docs/configure/user-interface/features-and-behavior.mdx @@ -27,7 +27,7 @@ The following table details how to use the API values: | **selectedPanel** | String | Id to select an addon panel | `'storybook/actions/panel'` | | **initialActive** | String | Select the default active tab on Mobile | `'sidebar'` or `'canvas'` or `'addons'` | | **sidebar** | Object | Sidebar options, see below | `{ showRoots: false }` | -| **toolbar** | Object | Modify the tools in the toolbar using the addon id | `{ fullscreen: { hidden: false } } }` | +| **toolbar** | Object | Modify the tools in the toolbar using the addon id | `{ fullscreen: { hidden: false } } ` | The following options are configurable under the `sidebar` namespace: diff --git a/docs/configure/user-interface/theming.mdx b/docs/configure/user-interface/theming.mdx index 184cb631cb2..df532736a78 100644 --- a/docs/configure/user-interface/theming.mdx +++ b/docs/configure/user-interface/theming.mdx @@ -37,7 +37,7 @@ When setting a theme, set a complete theme object. The theme is replaced, not co [Storybook Docs](../../writing-docs/index.mdx) uses the same theme system as Storybook’s UI but is themed independently from the main UI. -Supposing you have a Storybook theme defined for the main UI in [`.storybook/manager.js`](../features-and-behavior.mdx): +Supposing you have a Storybook theme defined for the main UI in [`.storybook/manager.js`](./features-and-behavior.mdx): {/* prettier-ignore-start */} @@ -68,7 +68,9 @@ Inside your `.storybook` directory, create a new file called `YourTheme.js` and {/* prettier-ignore-end */} + If you're using `brandImage` to add your custom logo, you can use any of the most common image formats. + Above, we're creating a new theme that will: diff --git a/docs/contribute/code.mdx b/docs/contribute/code.mdx index 39d42d82a8d..e3b2e3bd0ce 100644 --- a/docs/contribute/code.mdx +++ b/docs/contribute/code.mdx @@ -54,7 +54,9 @@ yarn task When prompted, answer the questions as accurately as possible to allow Storybook to determine your goals. After answering these questions, you should see the entire command with the options you've selected should you require to re-run it. + The `yarn task` command takes a few development shortcuts that can catch you off guard when switching branches and may require you to re-run both the `install` and `compile` tasks. You can speed up the process by running the command with the `start-from=install` flag. + ## Running tests @@ -86,7 +88,9 @@ yarn build When prompted to start the build process in `watch` mode, answer **yes** to develop in interactive mode. Afterward, choose which packages you want to build. For example, if you're going to work on a feature for `@storybook/addon-docs`, you might want to select both `@storybook/addon-docs` and `@storybook/components`. + Build's `watch` mode is great for interactive development. However, for performance reasons, it only transpiles your code and doesn't execute the TypeScript compiler. If something isn't working as expected, try running the `build` command **WITHOUT** enabling watch mode: it will re-generate TypeScript types and perform automatic type checking for you. + ![Storybook package selector](../_assets/contribute/storybook-build-packages-selection-optimized.png) @@ -144,7 +148,9 @@ yarn test ``` + Storybook relies on [Vitest](https://vitest.dev/) as part of it's testing suite. During the test run, if you spot that snapshot tests are failing, re-run the command with the `-u` flag to update them. + Doing this prevents last-minute bugs and is a great way to merge your contribution faster once you submit your pull request. Failing to do so will lead to one of the maintainers mark the pull request with the **Work in Progress** label until all tests pass. diff --git a/docs/contribute/framework.mdx b/docs/contribute/framework.mdx index dae362ed9d3..71ef9f1328c 100644 --- a/docs/contribute/framework.mdx +++ b/docs/contribute/framework.mdx @@ -127,7 +127,7 @@ Because a framework is a node package, it must contain a `package.json` file. He #### `preset.js` ([example](https://github.com/storybookjs/storybook/blob/next/code/frameworks/nextjs/src/preset.ts)) -The [preset API](../addons/writing-presets) is where you will configure the Storybook core (which builder and renderer are used by your framework), the builder (via either the [`webpackFinal`](../builders/webpack#extending-storybooks-webpack-config) or [`viteFinal`](../builders/vite#configuration) export), babel (via the `babel` export), any necessary addons, and any available options for your framework. +The [preset API](../addons/writing-presets.mdx) is where you will configure the Storybook core (which builder and renderer are used by your framework), the builder (via either the [`webpackFinal`](../builders/webpack.mdx#override-the-default-configuration) or [`viteFinal`](../builders/vite.mdx#configuration) export), babel (via the `babel` export), any necessary addons, and any available options for your framework. #### `preview.js` ([example](https://github.com/storybookjs/storybook/blob/next/code/frameworks/nextjs/src/preview.tsx)) diff --git a/docs/essentials/actions.mdx b/docs/essentials/actions.mdx index 91bb1dcb240..7c4099c1836 100644 --- a/docs/essentials/actions.mdx +++ b/docs/essentials/actions.mdx @@ -115,4 +115,4 @@ Allows you to create an action that appears in the actions panel of the Storyboo ## Advanced / legacy usage -There are also some older ways to use actions as documented in the [advanced README](../../addons/actions/ADVANCED.mdx). +There are also some older ways to use actions as documented in the [advanced README](../../addons/actions/ADVANCED.md). diff --git a/docs/essentials/controls.mdx b/docs/essentials/controls.mdx index 3144b4e876a..3c249c058e0 100644 --- a/docs/essentials/controls.mdx +++ b/docs/essentials/controls.mdx @@ -271,23 +271,23 @@ The Controls addon can be configured in two ways: As shown above, you can configure individual controls with the “control" annotation in the [argTypes](../api/arg-types.mdx) field of either a component or story. Below is a condensed example and table featuring all available controls. -| Data Type | Control | Description | -| ----------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| **boolean** | `boolean` | Provides a toggle for switching between possible states.
`argTypes: { active: { control: 'boolean' }}` | -| **number** | `number` | Provides a numeric input to include the range of all possible values.
`argTypes: { even: { control: { type: 'number', min:1, max:30, step: 2 } }}` | -| | `range` | Provides a range slider component to include all possible values.
`argTypes: { odd: { control: { type: 'range', min: 1, max: 30, step: 3 } }}` | +| Data Type | Control | Description | +| ----------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **boolean** | `boolean` | Provides a toggle for switching between possible states.
`argTypes: { active: { control: 'boolean' }}` | +| **number** | `number` | Provides a numeric input to include the range of all possible values.
`argTypes: { even: { control: { type: 'number', min:1, max:30, step: 2 } }}` | +| | `range` | Provides a range slider component to include all possible values.
`argTypes: { odd: { control: { type: 'range', min: 1, max: 30, step: 3 } }}` | | **object** | `object` | Provides a JSON-based editor component to handle the object's values.
Also allows edition in raw mode.
`argTypes: { user: { control: 'object' }}` | | **array** | `object` | Provides a JSON-based editor component to handle the array's values.
Also allows edition in raw mode.
`argTypes: { odd: { control: 'object' }}` | | | `file` | Provides a file input component that returns an array of URLs.
Can be further customized to accept specific file types.
`argTypes: { avatar: { control: { type: 'file', accept: '.png' } }}` | -| **enum** | `radio` | Provides a set of radio buttons based on the available options.
`argTypes: { contact: { control: 'radio', options: ['email', 'phone', 'mail'] }}` | -| | `inline-radio` | Provides a set of inlined radio buttons based on the available options.
`argTypes: { contact: { control: 'inline-radio', options: ['email', 'phone', 'mail'] }}` | -| | `check` | Provides a set of checkbox components for selecting multiple options.
`argTypes: { contact: { control: 'check', options: ['email', 'phone', 'mail'] }}` | -| | `inline-check` | Provides a set of inlined checkbox components for selecting multiple options.
`argTypes: { contact: { control: 'inline-check', options: ['email', 'phone', 'mail'] }}` | -| | `select` | Provides a drop-down list component to handle single value selection. `argTypes: { age: { control: 'select', options: [20, 30, 40, 50] }}` | -| | `multi-select` | Provides a drop-down list that allows multiple selected values. `argTypes: { countries: { control: 'multi-select', options: ['USA', 'Canada', 'Mexico'] }}` | -| **string** | `text` | Provides a freeform text input.
`argTypes: { label: { control: 'text' }}` | +| **enum** | `radio` | Provides a set of radio buttons based on the available options.
`argTypes: { contact: { control: 'radio', options: ['email', 'phone', 'mail'] }}` | +| | `inline-radio` | Provides a set of inlined radio buttons based on the available options.
`argTypes: { contact: { control: 'inline-radio', options: ['email', 'phone', 'mail'] }}` | +| | `check` | Provides a set of checkbox components for selecting multiple options.
`argTypes: { contact: { control: 'check', options: ['email', 'phone', 'mail'] }}` | +| | `inline-check` | Provides a set of inlined checkbox components for selecting multiple options.
`argTypes: { contact: { control: 'inline-check', options: ['email', 'phone', 'mail'] }}` | +| | `select` | Provides a drop-down list component to handle single value selection. `argTypes: { age: { control: 'select', options: [20, 30, 40, 50] }}` | +| | `multi-select` | Provides a drop-down list that allows multiple selected values. `argTypes: { countries: { control: 'multi-select', options: ['USA', 'Canada', 'Mexico'] }}` | +| **string** | `text` | Provides a freeform text input.
`argTypes: { label: { control: 'text' }}` | | | `color` | Provides a color picker component to handle color values.
Can be additionally configured to include a set of color presets.
`argTypes: { color: { control: { type: 'color', presetColors: ['red', 'green']} }}` | -| | `date` | Provides a datepicker component to handle date selection. `argTypes: { startDate: { control: 'date' }}` | +| | `date` | Provides a datepicker component to handle date selection. `argTypes: { startDate: { control: 'date' }}` | The `date` control will convert the date into a UNIX timestamp when the value changes. It's a known limitation that will be fixed in a future release. If you need to represent the actual date, you'll need to update the story's implementation and convert the value into a date object. diff --git a/docs/essentials/index.mdx b/docs/essentials/index.mdx index ba59f40fca4..b144a91313d 100644 --- a/docs/essentials/index.mdx +++ b/docs/essentials/index.mdx @@ -63,16 +63,16 @@ Below is an abridged configuration and table with all the available options for {/* prettier-ignore-end */} -| Addon | Option | Description | -| ------------------------------ | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `@storybook/addon-actions` | N/A | N/A | -| `@storybook/addon-viewport` | N/A | N/A | -| `@storybook/addon-docs` | `csfPluginOptions` | Provides additional configuration for Storybook's CSF plugin. Can be disabled with `null`. | +| Addon | Option | Description | +| ------------------------------ | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `@storybook/addon-actions` | N/A | N/A | +| `@storybook/addon-viewport` | N/A | N/A | +| `@storybook/addon-docs` | `csfPluginOptions` | Provides additional configuration for Storybook's CSF plugin. Can be disabled with `null`. | | | `mdxPluginOptions` | Provides additional configuration options and plugin configuration for [MDX documentation](../writing-docs/mdx.mdx#markdown-tables-arent-rendering-correctly). | -| `@storybook/addon-controls` | N/A | N/A | -| `@storybook/addon-backgrounds` | N/A | N/A | -| `@storybook/addon-toolbars` | N/A | N/A | -| `@storybook/addon-measure` | N/A | N/A | +| `@storybook/addon-controls` | N/A | N/A | +| `@storybook/addon-backgrounds` | N/A | N/A | +| `@storybook/addon-toolbars` | N/A | N/A | +| `@storybook/addon-measure` | N/A | N/A | When you start Storybook, your custom configuration will override the default. diff --git a/docs/essentials/interactions.mdx b/docs/essentials/interactions.mdx index 2cb39d78453..432433d7bf9 100644 --- a/docs/essentials/interactions.mdx +++ b/docs/essentials/interactions.mdx @@ -38,7 +38,9 @@ Next, update [`.storybook/main.js|ts`](../configure/index.mdx#configure-story-re {/* prettier-ignore-end */} + Make sure to list `@storybook/addon-interactions` **after** the [`@storybook/addon-essentials`](./index.mdx) addon (or the [`@storybook/addon-actions`](./actions.mdx) if you've installed it individually). + Now when you run Storybook, the Interactions addon will be enabled. diff --git a/docs/essentials/toolbars-and-globals.mdx b/docs/essentials/toolbars-and-globals.mdx index 88f8cec99d4..82fb679d322 100644 --- a/docs/essentials/toolbars-and-globals.mdx +++ b/docs/essentials/toolbars-and-globals.mdx @@ -28,7 +28,9 @@ Storybook has a simple, declarative syntax for configuring toolbar menus. In you {/* prettier-ignore-end */} + As globals are *global* you can *only* set `globalTypes` in [`.storybook/preview.js|ts`](../configure/index.mdx#configure-story-rendering). + When you start your Storybook, you should see a new dropdown with the `light` and `dark` options in your toolbar. @@ -92,12 +94,15 @@ In your [`.storybook/preview.js|ts`](../configure/index.mdx#configure-story-rend {/* prettier-ignore-end */} + The `icon` element used in the examples 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 `@storybook/addon-toolbars` addon is required to use toolbars. The toolbars addon is included by default in - `@storybook/addon-essentials`. + + The `@storybook/addon-toolbars` addon is required to use toolbars. The toolbars addon is included by default in `@storybook/addon-essentials`. + By adding the configuration element `right`, the text will be displayed on the right side in the toolbar menu once you connect it to a decorator. diff --git a/docs/essentials/viewport.mdx b/docs/essentials/viewport.mdx index a644f06e1be..32b5378c6ab 100644 --- a/docs/essentials/viewport.mdx +++ b/docs/essentials/viewport.mdx @@ -42,38 +42,38 @@ The viewports object needs the following keys: The Viewport addon includes a selection of devices that you can use to test your components. Listed below are the available devices and examples of how to use them. -| Device | Description | Dimensions
(w×h, px) | -| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | -| iPhone 5 | Configures the iPhone 5 as a device for the Viewport addon.
`parameters: { viewport: { defaultViewport: 'iphone5', }},` | 320 × 568 | -| iPhone 6 | Enables the iPhone 6 to be used with the Viewport addon.
`parameters: { viewport: { defaultViewport: 'iphone6', }},` | 375 × 667 | -| iPhone 6 Plus | Includes the iPhone 6 Plus as a device for the Viewport addon.
`parameters: { viewport: { defaultViewport: 'iphone6p', }},` | 414 × 736 | -| iPhone 8 Plus | Sets the iPhone 8 Plus as a device to be used by the Viewport addon.
`parameters: { viewport: { defaultViewport: 'iphone8p', }},` | 414 × 736 | -| iPhone X | Configures the iPhone X as a device for the Viewport addon.
`parameters: { viewport: { defaultViewport: 'iphonex', }},` | 375 × 812 | -| iPhone XR | Includes the iPhone XR as a device for the Viewport addon.
`parameters: { viewport: { defaultViewport: 'iphonexr', }},` | 414 × 896 | -| iPhone XS Max | Sets the iPhone XS Max as a device to be used by the Viewport addon.
`parameters: { viewport: { defaultViewport: 'iphonexsmax', }},` | 414 × 896 | -| iPhone SE (2nd generation) | Configures the iPhone SE (2nd generation) as a device for the Viewport addon.
`parameters: { viewport: { defaultViewport: 'iphonese2', }},` | 375 × 667 | -| iPhone 12 mini | Enables the iPhone 12 Mini to be used with the Viewport addon.
`parameters: { viewport: { defaultViewport: 'iphone12mini', }},` | 375 × 812 | -| iPhone 12 | Includes the iPhone 12 as a device for the Viewport addon.
`parameters: { viewport: { defaultViewport: 'iphone12', }},` | 390 × 844 | -| iPhone 12 Pro Max | Configures the iPhone 12 Pro Max as a device for the Viewport addon.
`parameters: { viewport: { defaultViewport: 'iphone12promax', }},` | 428 × 926 | -| iPhone SE 3rd generation | Enables the iPhone SE (3rd generation) to be used with the Viewport addon.
`parameters: { viewport: { defaultViewport: 'iphoneSE3', }},` | 375 × 667 | -| iPhone 13 | Includes the iPhone 13 as a device for the Viewport addon.
`parameters: { viewport: { defaultViewport: 'iphone13', }},` | 390 × 844 | -| iPhone 13 Pro | Enables the iPhone 13 Pro to be used with the Viewport addon.
`parameters: { viewport: { defaultViewport: 'iphone13pro', }},` | 390 × 844 | -| iPhone 13 Pro Max | Configures the iPhone 13 Pro Max as a device to be used by the Viewport addon.
`parameters: { viewport: { defaultViewport: 'iphone13promax', }},` | 428 × 926 | -| iPhone 14 | Enables the iPhone 14 to be used with the Viewport addon.
`parameters: { viewport: { defaultViewport: 'iphone14', }},` | 390 × 844 | -| iPhone 14 Pro | Includes the iPhone 14 Pro as a device for the Viewport addon.
`parameters: { viewport: { defaultViewport: 'iphone14pro', }},` | 393 × 852 | -| iPhone 14 Pro Max | Sets the iPhone 14 Pro Max as a device to be used by the Viewport addon.
`parameters: { viewport: { defaultViewport: 'iphone14promax', }},` | 430 × 932 | -| Galaxy S5 | Configures the Galaxy S5 as a device for the Viewport addon.
`parameters: { viewport: { defaultViewport: 'galaxys5', }},` | 360 × 640 | -| Galaxy S9 | Enables the Galaxy S9 to be used with the Viewport addon.
`parameters: { viewport: { defaultViewport: 'galaxys9', }},` | 360 × 740 | -| Nexus 5X | Includes the Nexus 5x as a device for the Viewport addon.
`parameters: { viewport: { defaultViewport: 'nexus5x', }},` | 412 × 668 | -| Nexus 6P | Sets the Nexus 6P as a device to be used by the Viewport addon.
`parameters: { viewport: { defaultViewport: 'nexus6p', }},` | 412 × 732 | -| Pixel | Configures the Pixel as a device for the Viewport addon.
`parameters: { viewport: { defaultViewport: 'pixel', }},` | 540 × 960 | -| Pixel XL | Enables the Pixel XL to be used with the Viewport addon.
`parameters: { viewport: { defaultViewport: 'pixelxl', }},` | 720 × 1280 | +| Device | Description | Dimensions
(w×h, px) | +| -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | +| iPhone 5 | Configures the iPhone 5 as a device for the Viewport addon.
`parameters: { viewport: { defaultViewport: 'iphone5', }},` | 320 × 568 | +| iPhone 6 | Enables the iPhone 6 to be used with the Viewport addon.
`parameters: { viewport: { defaultViewport: 'iphone6', }},` | 375 × 667 | +| iPhone 6 Plus | Includes the iPhone 6 Plus as a device for the Viewport addon.
`parameters: { viewport: { defaultViewport: 'iphone6p', }},` | 414 × 736 | +| iPhone 8 Plus | Sets the iPhone 8 Plus as a device to be used by the Viewport addon.
`parameters: { viewport: { defaultViewport: 'iphone8p', }},` | 414 × 736 | +| iPhone X | Configures the iPhone X as a device for the Viewport addon.
`parameters: { viewport: { defaultViewport: 'iphonex', }},` | 375 × 812 | +| iPhone XR | Includes the iPhone XR as a device for the Viewport addon.
`parameters: { viewport: { defaultViewport: 'iphonexr', }},` | 414 × 896 | +| iPhone XS Max | Sets the iPhone XS Max as a device to be used by the Viewport addon.
`parameters: { viewport: { defaultViewport: 'iphonexsmax', }},` | 414 × 896 | +| iPhone SE (2nd generation) | Configures the iPhone SE (2nd generation) as a device for the Viewport addon.
`parameters: { viewport: { defaultViewport: 'iphonese2', }},` | 375 × 667 | +| iPhone 12 mini | Enables the iPhone 12 Mini to be used with the Viewport addon.
`parameters: { viewport: { defaultViewport: 'iphone12mini', }},` | 375 × 812 | +| iPhone 12 | Includes the iPhone 12 as a device for the Viewport addon.
`parameters: { viewport: { defaultViewport: 'iphone12', }},` | 390 × 844 | +| iPhone 12 Pro Max | Configures the iPhone 12 Pro Max as a device for the Viewport addon.
`parameters: { viewport: { defaultViewport: 'iphone12promax', }},` | 428 × 926 | +| iPhone SE 3rd generation | Enables the iPhone SE (3rd generation) to be used with the Viewport addon.
`parameters: { viewport: { defaultViewport: 'iphoneSE3', }},` | 375 × 667 | +| iPhone 13 | Includes the iPhone 13 as a device for the Viewport addon.
`parameters: { viewport: { defaultViewport: 'iphone13', }},` | 390 × 844 | +| iPhone 13 Pro | Enables the iPhone 13 Pro to be used with the Viewport addon.
`parameters: { viewport: { defaultViewport: 'iphone13pro', }},` | 390 × 844 | +| iPhone 13 Pro Max | Configures the iPhone 13 Pro Max as a device to be used by the Viewport addon.
`parameters: { viewport: { defaultViewport: 'iphone13promax', }},` | 428 × 926 | +| iPhone 14 | Enables the iPhone 14 to be used with the Viewport addon.
`parameters: { viewport: { defaultViewport: 'iphone14', }},` | 390 × 844 | +| iPhone 14 Pro | Includes the iPhone 14 Pro as a device for the Viewport addon.
`parameters: { viewport: { defaultViewport: 'iphone14pro', }},` | 393 × 852 | +| iPhone 14 Pro Max | Sets the iPhone 14 Pro Max as a device to be used by the Viewport addon.
`parameters: { viewport: { defaultViewport: 'iphone14promax', }},` | 430 × 932 | +| Galaxy S5 | Configures the Galaxy S5 as a device for the Viewport addon.
`parameters: { viewport: { defaultViewport: 'galaxys5', }},` | 360 × 640 | +| Galaxy S9 | Enables the Galaxy S9 to be used with the Viewport addon.
`parameters: { viewport: { defaultViewport: 'galaxys9', }},` | 360 × 740 | +| Nexus 5X | Includes the Nexus 5x as a device for the Viewport addon.
`parameters: { viewport: { defaultViewport: 'nexus5x', }},` | 412 × 668 | +| Nexus 6P | Sets the Nexus 6P as a device to be used by the Viewport addon.
`parameters: { viewport: { defaultViewport: 'nexus6p', }},` | 412 × 732 | +| Pixel | Configures the Pixel as a device for the Viewport addon.
`parameters: { viewport: { defaultViewport: 'pixel', }},` | 540 × 960 | +| Pixel XL | Enables the Pixel XL to be used with the Viewport addon.
`parameters: { viewport: { defaultViewport: 'pixelxl', }},` | 720 × 1280 | | Small mobile | Enabled by default.
Configures a small form factor generic mobile device to be used by the Viewport addon.
`parameters: { viewport: { defaultViewport: 'mobile1', }},` | 320 × 568 | | Large mobile | Enabled by default.
Configures a large form factor mobile device to be used by the Viewport addon.
`parameters: { viewport: { defaultViewport: 'mobile2', }},` | 414 × 896 | -| iPad | Includes the iPad as a device for the Viewport addon.
`parameters: { viewport: { defaultViewport: 'ipad', }},` | 768 × 1024 | -| iPad Pro 10.5-in | Enables the iPad Pro (10.5-inch) to be used with the Viewport addon.
`parameters: { viewport: { defaultViewport: 'ipad10p', }},` | 834 × 112 | -| iPad Pro 11-in | Configures the iPad Pro (11-inch) as a device for the Viewport addon.
`parameters: { viewport: { defaultViewport: 'ipad11p', }},` | 834 × 1194 | -| iPad Pro 12.9-in | Sets the iPad Pro (12.9-inch) as a device to be used by the Viewport addon.
`parameters: { viewport: { defaultViewport: 'ipad12p', }},` | 1024 × 1366 | +| iPad | Includes the iPad as a device for the Viewport addon.
`parameters: { viewport: { defaultViewport: 'ipad', }},` | 768 × 1024 | +| iPad Pro 10.5-in | Enables the iPad Pro (10.5-inch) to be used with the Viewport addon.
`parameters: { viewport: { defaultViewport: 'ipad10p', }},` | 834 × 112 | +| iPad Pro 11-in | Configures the iPad Pro (11-inch) as a device for the Viewport addon.
`parameters: { viewport: { defaultViewport: 'ipad11p', }},` | 834 × 1194 | +| iPad Pro 12.9-in | Sets the iPad Pro (12.9-inch) as a device to be used by the Viewport addon.
`parameters: { viewport: { defaultViewport: 'ipad12p', }},` | 1024 × 1366 | | Tablet | Enabled by default.
Configures a standard form factor tablet device to be used by the Viewport addon.
`parameters: { viewport: { defaultViewport: 'tablet', }},` | 834 × 1112 | {/* prettier-ignore-start */} @@ -202,8 +202,8 @@ Type: `object` A minimal set of viewports provided by the Viewport addon, listed below: -| Device | Description | Dimensions
(w×h, px) | -| ------------ | -------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | +| Device | Description | Dimensions
(w×h, px) | +| ------------ | --------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | | Small mobile | A small mobile device size
`parameters: { viewport: { defaultViewport: 'mobile1', }},` | 320 × 568 | | Large mobile | A large mobile device size
`parameters: { viewport: { defaultViewport: 'mobile2', }},` | 414 × 896 | | Tablet | A tablet device size
`parameters: { viewport: { defaultViewport: 'tablet', }},` | 834 × 1112 | diff --git a/docs/faq.mdx b/docs/faq.mdx index e732e5d3e34..220228ff3be 100644 --- a/docs/faq.mdx +++ b/docs/faq.mdx @@ -64,7 +64,9 @@ npm test -- --coverage --collectCoverageFrom='["src/**/*.{js,jsx}","!src/**/stor ``` + If you're using [`Yarn`](https://yarnpkg.com/) as a package manager, you'll need to adjust the command accordingly. + ## How do I setup Storybook to share Webpack configuration with Next.js? @@ -87,7 +89,7 @@ export default { In case you are using [Yarn Plug-n-Play](https://yarnpkg.com/features/pnp) or your project is set up within a mono repository environment, you might run into issues with module resolution similar to this when running Storybook: ```shell -WARN Failed to load preset: "@storybook/react-webpack5/preset"` +WARN Failed to load preset: "@storybook/react-webpack5/preset" Required package: @storybook/react-webpack5 (via "@storybook/react-webpack5/preset") ``` @@ -154,7 +156,7 @@ We're working on overcoming this limitation, and soon you'll be able to use them Storybook does not work unless you have at least one local story (or docs page) defined in your project. In this context, local means a `.stories.*` or `.mdx` file that is referenced in your project's `.storybook/main.js` config. -If you're in a [Storybook composition](https://storybook.js.org/docs/sharing/storybook-composition) scenario, where you have multiple Storybooks, and want to have an extra Storybook with no stories of its own, that serves as a "glue" for all the other Storybooks in a project for demo/documentation purposes, you can do the following steps: +If you're in a [Storybook composition](./sharing/storybook-composition.mdx) scenario, where you have multiple Storybooks, and want to have an extra Storybook with no stories of its own, that serves as a "glue" for all the other Storybooks in a project for demo/documentation purposes, you can do the following steps: Introduce a single `.mdx` docs page (addon-essentials or addon-docs required), that serves as an Introduction page, like so: @@ -197,106 +199,106 @@ With the release of version 6.0, we updated our documentation as well. That does We're only covering versions 5.3 and 5.0 as they were important milestones for Storybook. If you want to go back in time a little more, you'll have to check the specific release in the monorepo. -| Section | Page | Current Location | Version 5.3 location | Version 5.0 location | -| ---------------- | ----------------------------------------------- | --------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | -| N/A | Why Storybook | [See current documentation](./get-started/why-storybook.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| Get started | Install | [See current documentation](./get-started/install.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides/quick-start-guide) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides/quick-start-guide) | -| | What's a story | [See current documentation](./get-started/whats-a-story.mdx) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides) | -| | Browse Stories | [See current documentation](./get-started/browse-stories.mdx) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.0/docs/src/pages/guides) | -| | Setup | [See current documentation](./get-started/setup.mdx) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides) | -| Write stories | Introduction | [See current documentation](./writing-stories/index.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories) | -| | Parameters | [See current documentation](./writing-stories/parameters.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories/index.md#parameters) | Non existing feature or undocumented | -| | Decorators | [See current documentation](./writing-stories/decorators.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories/index.md#decorators) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories/index.md#using-decorators) | -| | Naming components and hierarchy | [See current documentation](./writing-stories/naming-components-and-hierarchy.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories) | -| | Build pages and screens | [See current documentation](./writing-stories/build-pages-with-storybook.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| | Stories for multiple components | [See current documentation](./writing-stories/stories-for-multiple-components.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| Write docs | Autodocs | [See current documentation](./writing-docs/autodocs.mdx) | See versioned addon documentation | Non existing feature or undocumented | -| | MDX | [See current documentation](./writing-docs/mdx.mdx) | See versioned addon documentation | Non existing feature or undocumented | -| | Doc Blocks | [See current documentation](./writing-docs/doc-blocks.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| | Preview and build docs | [See current documentation](./writing-docs/build-documentation.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| Testing | Visual tests | [See current documentation](./writing-tests/visual-testing.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/automated-visual-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/automated-visual-testing) | -| | Accessibility tests | [See current documentation](./writing-tests/accessibility-testing.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| | Interaction tests | [See current documentation](./writing-tests/interaction-testing.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/interaction-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/interaction-testing) | -| | Snapshot tests | [See current documentation](./writing-tests/snapshot-testing.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/structural-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/structural-testing) | -| | Import stories in tests/Unit tests | [See current documentation](./writing-tests/stories-in-unit-tests.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/react-ui-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/react-ui-testing) | -| | Import stories in tests/End-to-end testing | [See current documentation](./writing-tests/stories-in-end-to-end-tests.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/react-ui-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/react-ui-testing) | -| Sharing | Publish Storybook | [See current documentation](./sharing/publish-storybook.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/exporting-storybook) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/exporting-storybook) | -| | Embed | [See current documentation](./sharing/embed.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| | Composition | [See current documentation](./sharing/storybook-composition.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| | Package Composition | [See current documentation](./sharing/package-composition.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| Essential addons | Controls | [See current documentation](./essentials/controls.mdx) | Controls are specific to version 6.0 see [Knobs versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/knobs) | Controls are specific to version 6.0 see [Knobs versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/knobs) | -| | Actions | [See current documentation](./essentials/actions.mdx) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/actions) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/actions) | -| | Viewport | [See current documentation](./essentials/viewport.mdx) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/viewport) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/viewport) | -| | Backgrounds | [See current documentation](./essentials/backgrounds.mdx) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/backgrounds) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/backgrounds) | -| | Toolbars and globals | [See current documentation](./essentials/toolbars-and-globals.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/toolbar-guide) | Non existing feature or undocumented | -| Configure | Overview | [See current documentation](./configure/integration/index.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/overview) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories) | -| | Integration/Frameworks | [See current documentation](./configure/ingtegration/frameworks.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| | Integration/Framework support for frameworks | [See current documentation](./configure/integration/frameworks-feature-support.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| | Integration/Compilers | [See current documentation](./configure/integration/compilers.mdx) | See versioned documentation [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/custom-babel-config) | See versioned documentation [here](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/custom-babel-config) | -| | Integration/Typescript | [See current documentation](./configure/integration/typescript.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/typescript-config) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/typescript-config) | -| | Integration/Styling and CSS | [See current documentation](./configure/styling-and-css.mdx) | See versioned documentation | See versioned documentation | -| | Integration/Images and assets | [See current documentation](./configure/integration/images-and-assets.mdx) | See versioned documentation | See versioned documentation | -| | Story rendering | [See current documentation](./configure/story-rendering.mdx) | See versioned documentation [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/add-custom-head-tags) and [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/add-custom-body) | See versioned documentation [here](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/add-custom-head-tags) | -| | Story Layout | [See current documentation](./configure/story-layout.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| | User Interface/Features and behavior | [See current documentation](./configure/user-interface/features-and-behavior.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/options-parameter) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/options-parameter) | -| | User Interface/Theming | [See current documentation](./configure/user-interface/theming.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/theming) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/theming) | -| | User Interface/Sidebar & URLS | [See current documentation](./configure/user-interface/sidebar-and-urls.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/options-parameter) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/options-parameter) | -| | Environment variables | [See current documentation](./configure/environment-variables.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/env-vars) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/env-vars) | -| Builders | Introduction | [See current documentation](./builders/index.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| | Vite | [See current documentation](./builders/vite.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| | Webpack | [See current documentation](./builders/webpack.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/custom-webpack-config/index.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/custom-webpack-config/index.mdx) | -| | Builder API | [See current documentation](./builders/builder-api.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| Addons | Introduction | [See current documentation](./addons/index.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons) | -| | Install addons | [See current documentation](./addons/install-addons.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/using-addons/) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/using-addons/) | -| | Writing Addons | [See current documentation](./addons/writing-addons.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons) | -| | Writing Presets | [See current documentation](./addons/writing-presets.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/presets/writing-presets) | Non existing feature or undocumented | -| | Addons Knowledge Base | [See current documentation](./addons/addon-knowledge-base.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons) | -| | Types of addons | [See current documentation](./addons/addon-types.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| | Addons API | [See current documentation](./addons/addons-api.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/api) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/api) | -| API | @storybook/blocks/ArgTypes | [See current documentation](./api/doc-blocks/doc-block-argtypes.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| | @storybook/blocks/Canvas | [See current documentation](./api/doc-blocks/doc-block-canvas.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| | @storybook/blocks/ColorPalette | [See current documentation](./api/doc-blocks/doc-block-colorpalette.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| | @storybook/blocks/Controls | [See current documentation](./api/doc-blocks/doc-block-controls.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| | @storybook/blocks/Description | [See current documentation](./api/doc-blocks/doc-block-description.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| | @storybook/blocks/IconGallery | [See current documentation](./api/doc-blocks/doc-block-icongallery.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| | @storybook/blocks/Markdown | [See current documentation](./api/doc-blocks/doc-block-markdown.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| | @storybook/blocks/Meta | [See current documentation](./api/doc-blocks/doc-block-meta.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| | @storybook/blocks/Primary | [See current documentation](./api/doc-blocks/doc-block-primary.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| | @storybook/blocks/Source | [See current documentation](./api/doc-blocks/doc-block-source.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| | @storybook/blocks/Stories | [See current documentation](./api/doc-blocks/doc-block-stories.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| | @storybook/blocks/Story | [See current documentation](./api/doc-blocks/doc-block-story.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| | @storybook/blocks/Subtitle | [See current documentation](./api/doc-blocks/doc-block-subtitle.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| | @storybook/blocks/Title | [See current documentation](./api/doc-blocks/doc-block-title.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| | @storybook/blocks/Typeset | [See current documentation](./api/doc-blocks/doc-block-typeset.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| | @storybook/blocks/Unstyled | [See current documentation](./api/doc-blocks/doc-block-unstyled.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| | @storybook/blocks/useOf | [See current documentation](./api/doc-blocks/doc-block-useof.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| | Stories/Component Story Format (see note below) | [See current documentation](./api/csf.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/component-story-format) | Non existing feature or undocumented | -| | ArgTypes | [See current documentation](./api/arg-types.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| | `main.js` configuration/Overview | [See current documentation](./api/main-config/main-config.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| | `main.js` configuration/framework | [See current documentation](./api/main-config/main-config-framework.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| | `main.js` configuration/stories | [See current documentation](./api/main-config/main-config-stories.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| | `main.js` configuration/addons | [See current documentation](./api/main-config/main-config-addons.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| | `main.js` configuration/babel | [See current documentation](./api/main-config/main-config-babel.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| | `main.js` configuration/babelDefault | [See current documentation](./api/main-config/main-config-babel-default.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| | `main.js` configuration/build | [See current documentation](./api/main-config/main-config-build.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| | `main.js` configuration/core | [See current documentation](./api/main-config/main-config-core.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| | `main.js` configuration/docs | [See current documentation](./api/main-config/main-config-docs.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| | `main.js` configuration/env | [See current documentation](./api/main-config/main-config-env.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| | `main.js` configuration/features | [See current documentation](./api/main-config/main-config-features.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| | `main.js` configuration/indexers | [See current documentation](./api/main-config/main-config-indexers.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| | `main.js` configuration/logLevel | [See current documentation](./api/main-config/main-config-log-level.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| | `main.js` configuration/managerHead | [See current documentation](./api/main-config/main-config-manager-head.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| | `main.js` configuration/previewAnnotations | [See current documentation](./api/main-config/main-config-preview-annotations.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| | `main.js` configuration/previewBody | [See current documentation](./api/main-config/main-config-preview-body.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| | `main.js` configuration/previewHead | [See current documentation](./api/main-config/main-config-preview-head.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| | `main.js` configuration/refs | [See current documentation](./api/main-config/main-config-refs.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| | `main.js` configuration/staticDirs | [See current documentation](./api/main-config/main-config-static-dirs.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| | `main.js` configuration/swc | [See current documentation](./api/main-config/main-config-swc.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| | `main.js` configuration/typescript | [See current documentation](./api/main-config/main-config-typescript.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| | `main.js` configuration/viteFinal | [See current documentation](./api/main-config/main-config-vite-final.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| | `main.js` configuration/webpackFinal | [See current documentation](./api/main-config/main-config-webpack-final.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| | Frameworks | [See current documentation](./api/new-frameworks.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | -| | CLI options | [See current documentation](./api/cli-options.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/cli-options) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/cli-options) | +| Section | Page | Current Location | Version 5.3 location | Version 5.0 location | +| ---------------- | ----------------------------------------------- | ---------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | +| N/A | Why Storybook | [See current documentation](./get-started/why-storybook.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| Get started | Install | [See current documentation](./get-started/install.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides/quick-start-guide) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides/quick-start-guide) | +| | What's a story | [See current documentation](./get-started/whats-a-story.mdx) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides) | +| | Browse Stories | [See current documentation](./get-started/browse-stories.mdx) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.0/docs/src/pages/guides) | +| | Setup | [See current documentation](./get-started/setup.mdx) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides) | +| Write stories | Introduction | [See current documentation](./writing-stories/index.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories) | +| | Parameters | [See current documentation](./writing-stories/parameters.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories/index.md#parameters) | Non existing feature or undocumented | +| | Decorators | [See current documentation](./writing-stories/decorators.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories/index.md#decorators) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories/index.md#using-decorators) | +| | Naming components and hierarchy | [See current documentation](./writing-stories/naming-components-and-hierarchy.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/writing-stories) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories) | +| | Build pages and screens | [See current documentation](./writing-stories/build-pages-with-storybook.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| | Stories for multiple components | [See current documentation](./writing-stories/stories-for-multiple-components.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| Write docs | Autodocs | [See current documentation](./writing-docs/autodocs.mdx) | See versioned addon documentation | Non existing feature or undocumented | +| | MDX | [See current documentation](./writing-docs/mdx.mdx) | See versioned addon documentation | Non existing feature or undocumented | +| | Doc Blocks | [See current documentation](./writing-docs/doc-blocks.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| | Preview and build docs | [See current documentation](./writing-docs/build-documentation.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| Testing | Visual tests | [See current documentation](./writing-tests/visual-testing.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/automated-visual-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/automated-visual-testing) | +| | Accessibility tests | [See current documentation](./writing-tests/accessibility-testing.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| | Interaction tests | [See current documentation](./writing-tests/interaction-testing.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/interaction-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/interaction-testing) | +| | Snapshot tests | [See current documentation](./writing-tests/snapshot-testing/snapshot-testing.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/structural-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/structural-testing) | +| | Import stories in tests/Unit tests | [See current documentation](./writing-tests/import-stories-in-tests/stories-in-unit-tests.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/react-ui-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/react-ui-testing) | +| | Import stories in tests/End-to-end testing | [See current documentation](./writing-tests/import-stories-in-tests/stories-in-end-to-end-tests.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/testing/react-ui-testing) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/testing/react-ui-testing) | +| Sharing | Publish Storybook | [See current documentation](./sharing/publish-storybook.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/exporting-storybook) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/exporting-storybook) | +| | Embed | [See current documentation](./sharing/embed.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| | Composition | [See current documentation](./sharing/storybook-composition.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| | Package Composition | [See current documentation](./sharing/package-composition.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| Essential addons | Controls | [See current documentation](./essentials/controls.mdx) | Controls are specific to version 6.0 see [Knobs versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/knobs) | Controls are specific to version 6.0 see [Knobs versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/knobs) | +| | Actions | [See current documentation](./essentials/actions.mdx) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/actions) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/actions) | +| | Viewport | [See current documentation](./essentials/viewport.mdx) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/viewport) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/viewport) | +| | Backgrounds | [See current documentation](./essentials/backgrounds.mdx) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/addons/backgrounds) | [See addon versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/addons/backgrounds) | +| | Toolbars and globals | [See current documentation](./essentials/toolbars-and-globals.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/basics/toolbar-guide) | Non existing feature or undocumented | +| Configure | Overview | [See current documentation](./configure/index.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/overview) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/basics/writing-stories) | +| | Integration/Frameworks | [See current documentation](./configure/integration/frameworks.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| | Integration/Framework support for frameworks | [See current documentation](./configure/integration/frameworks-feature-support.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| | Integration/Compilers | [See current documentation](./configure/integration/compilers.mdx) | See versioned documentation [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/custom-babel-config) | See versioned documentation [here](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/custom-babel-config) | +| | Integration/Typescript | [See current documentation](./configure/integration/typescript.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/typescript-config) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/typescript-config) | +| | Integration/Styling and CSS | [See current documentation](./configure/styling-and-css.mdx) | See versioned documentation | See versioned documentation | +| | Integration/Images and assets | [See current documentation](./configure/integration/images-and-assets.mdx) | See versioned documentation | See versioned documentation | +| | Story rendering | [See current documentation](./configure/story-rendering.mdx) | See versioned documentation [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/add-custom-head-tags) and [here](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/add-custom-body) | See versioned documentation [here](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/add-custom-head-tags) | +| | Story Layout | [See current documentation](./configure/story-layout.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| | User Interface/Features and behavior | [See current documentation](./configure/user-interface/features-and-behavior.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/options-parameter) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/options-parameter) | +| | User Interface/Theming | [See current documentation](./configure/user-interface/theming.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/theming) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/theming) | +| | User Interface/Sidebar & URLS | [See current documentation](./configure/user-interface/sidebar-and-urls.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/options-parameter) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/options-parameter) | +| | Environment variables | [See current documentation](./configure/environment-variables.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/env-vars) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/env-vars) | +| Builders | Introduction | [See current documentation](./builders/index.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| | Vite | [See current documentation](./builders/vite.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| | Webpack | [See current documentation](./builders/webpack.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/custom-webpack-config/index.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/custom-webpack-config/index.mdx) | +| | Builder API | [See current documentation](./builders/builder-api.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| Addons | Introduction | [See current documentation](./addons/index.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons) | +| | Install addons | [See current documentation](./addons/install-addons.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/using-addons/) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/using-addons/) | +| | Writing Addons | [See current documentation](./addons/writing-addons.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons) | +| | Writing Presets | [See current documentation](./addons/writing-presets.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/presets/writing-presets) | Non existing feature or undocumented | +| | Addons Knowledge Base | [See current documentation](./addons/addon-knowledge-base.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/writing-addons) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/writing-addons) | +| | Types of addons | [See current documentation](./addons/addon-types.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| | Addons API | [See current documentation](./addons/addons-api.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/addons/api) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/addons/api) | +| API | @storybook/blocks/ArgTypes | [See current documentation](./api/doc-blocks/doc-block-argtypes.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| | @storybook/blocks/Canvas | [See current documentation](./api/doc-blocks/doc-block-canvas.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| | @storybook/blocks/ColorPalette | [See current documentation](./api/doc-blocks/doc-block-colorpalette.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| | @storybook/blocks/Controls | [See current documentation](./api/doc-blocks/doc-block-controls.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| | @storybook/blocks/Description | [See current documentation](./api/doc-blocks/doc-block-description.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| | @storybook/blocks/IconGallery | [See current documentation](./api/doc-blocks/doc-block-icongallery.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| | @storybook/blocks/Markdown | [See current documentation](./api/doc-blocks/doc-block-markdown.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| | @storybook/blocks/Meta | [See current documentation](./api/doc-blocks/doc-block-meta.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| | @storybook/blocks/Primary | [See current documentation](./api/doc-blocks/doc-block-primary.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| | @storybook/blocks/Source | [See current documentation](./api/doc-blocks/doc-block-source.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| | @storybook/blocks/Stories | [See current documentation](./api/doc-blocks/doc-block-stories.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| | @storybook/blocks/Story | [See current documentation](./api/doc-blocks/doc-block-story.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| | @storybook/blocks/Subtitle | [See current documentation](./api/doc-blocks/doc-block-subtitle.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| | @storybook/blocks/Title | [See current documentation](./api/doc-blocks/doc-block-title.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| | @storybook/blocks/Typeset | [See current documentation](./api/doc-blocks/doc-block-typeset.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| | @storybook/blocks/Unstyled | [See current documentation](./api/doc-blocks/doc-block-unstyled.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| | @storybook/blocks/useOf | [See current documentation](./api/doc-blocks/doc-block-useof.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| | Stories/Component Story Format (see note below) | [See current documentation](./api/csf.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/component-story-format) | Non existing feature or undocumented | +| | ArgTypes | [See current documentation](./api/arg-types.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/Overview | [See current documentation](./api/main-config/main-config.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/framework | [See current documentation](./api/main-config/main-config-framework.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/stories | [See current documentation](./api/main-config/main-config-stories.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/addons | [See current documentation](./api/main-config/main-config-addons.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/babel | [See current documentation](./api/main-config/main-config-babel.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/babelDefault | [See current documentation](./api/main-config/main-config-babel-default.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/build | [See current documentation](./api/main-config/main-config-build.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/core | [See current documentation](./api/main-config/main-config-core.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/docs | [See current documentation](./api/main-config/main-config-docs.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/env | [See current documentation](./api/main-config/main-config-env.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/features | [See current documentation](./api/main-config/main-config-features.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/indexers | [See current documentation](./api/main-config/main-config-indexers.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/logLevel | [See current documentation](./api/main-config/main-config-log-level.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/managerHead | [See current documentation](./api/main-config/main-config-manager-head.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/previewAnnotations | [See current documentation](./api/main-config/main-config-preview-annotations.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/previewBody | [See current documentation](./api/main-config/main-config-preview-body.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/previewHead | [See current documentation](./api/main-config/main-config-preview-head.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/refs | [See current documentation](./api/main-config/main-config-refs.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/staticDirs | [See current documentation](./api/main-config/main-config-static-dirs.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/swc | [See current documentation](./api/main-config/main-config-swc.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/typescript | [See current documentation](./api/main-config/main-config-typescript.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/viteFinal | [See current documentation](./api/main-config/main-config-vite-final.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/webpackFinal | [See current documentation](./api/main-config/main-config-webpack-final.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| | Frameworks | [See current documentation](./api/new-frameworks.mdx) | Non existing feature or undocumented | Non existing feature or undocumented | +| | CLI options | [See current documentation](./api/cli-options.mdx) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/cli-options) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/cli-options) | If you have stories written with the older `storiesOf` format, it was removed in Storybook 8.0 and is no longer maintained. We recommend that you migrate your stories to CSF. See the [migration guide](./migration-guide/index.mdx#storiesof-to-csf) for more information. However, if you need, you can still access the old `storiesOf` [documentation](https://github.com/storybookjs/storybook/blob/release/5.3/docs/src/pages/formats/storiesof-api/index.mdx) for reference. @@ -408,6 +410,7 @@ export default { replace({ 'process.env.NODE_ENV': JSON.stringify('development'), }), + ] }; ``` diff --git a/docs/get-started/frameworks/angular.mdx b/docs/get-started/frameworks/angular.mdx index ba755c40380..57d2408b6c2 100644 --- a/docs/get-started/frameworks/angular.mdx +++ b/docs/get-started/frameworks/angular.mdx @@ -361,23 +361,23 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make These are common options you may need for the Angular builder: - | Configuration element | Description | - | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | - | `"browserTarget"` | Build target to be served using the following format.
`"example-project:builder:config"` | - | `"tsConfig"` | Location of the TypeScript configuration file, relative to the current workspace.
`"tsConfig": "./tsconfig.json"`. | - | `"port"` | Port used by Storybook.
`"port": 6006` | - | `"host"` | Set up a custom host for Storybook.
`"host": "http://my-custom-host"` | - | `"configDir"` | Storybook configuration directory location.
`"configDir": ".storybook"` | - | `"https"` | Starts Storybook with HTTPS enabled.
`"https": true`
Requires custom certificate information. | - | `"sslCa"` | Provides an SSL certificate authority.
`"sslCa": "your-custom-certificate-authority"`
Optional usage with `"https"` | - | `"sslCert"` | Provides an SSL certificate.
`"sslCert": "your-custom-certificate"`
Required for `https` | - | `"sslKey"` | Provides an SSL key to serve Storybook.
`"sslKey": "your-ssl-key"` | - | `"smokeTest"` | Exit Storybook after successful start.
`"smokeTest": true` | - | `"ci"` | Starts Storybook in CI mode (skips interactive prompts and will not open browser window).
`"ci": true` | - | `"quiet"` | Filters Storybook verbose build output.
`"quiet": true` | - | `"docs"` | Starts Storybook in [documentation mode](../../writing-docs/build-documentation.mdx#preview-storybooks-documentation).
`"docs": true` | - | `"styles"` | Provide the location of the [application's styles](../../configure/styling-and-css.mdx#importing-css-files) to be used with Storybook.
`"styles": ["src/styles.css", "src/styles.scss"]`
| - | `"stylePreprocessorOptions"` | Provides further customization for style preprocessors resolved to the workspace root.
`"stylePreprocessorOptions": { "includePaths": ["src/styles"] }` | + | Configuration element | Description | + | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | + | `"browserTarget"` | Build target to be served using the following format.
`"example-project:builder:config"` | + | `"tsConfig"` | Location of the TypeScript configuration file, relative to the current workspace.
`"tsConfig": "./tsconfig.json"`. | + | `"port"` | Port used by Storybook.
`"port": 6006` | + | `"host"` | Set up a custom host for Storybook.
`"host": "http://my-custom-host"` | + | `"configDir"` | Storybook configuration directory location.
`"configDir": ".storybook"` | + | `"https"` | Starts Storybook with HTTPS enabled.
`"https": true`
Requires custom certificate information. | + | `"sslCa"` | Provides an SSL certificate authority.
`"sslCa": "your-custom-certificate-authority"`
Optional usage with `"https"` | + | `"sslCert"` | Provides an SSL certificate.
`"sslCert": "your-custom-certificate"`
Required for `https` | + | `"sslKey"` | Provides an SSL key to serve Storybook.
`"sslKey": "your-ssl-key"` | + | `"smokeTest"` | Exit Storybook after successful start.
`"smokeTest": true` | + | `"ci"` | Starts Storybook in CI mode (skips interactive prompts and will not open browser window).
`"ci": true` | + | `"quiet"` | Filters Storybook verbose build output.
`"quiet": true` | + | `"docs"` | Starts Storybook in [documentation mode](../../writing-docs/build-documentation.mdx#preview-storybooks-documentation).
`"docs": true` | + | `"styles"` | Provide the location of the [application's styles](../../configure/styling-and-css.mdx#importing-css-files) to be used with Storybook.
`"styles": ["src/styles.css", "src/styles.scss"]` | + | `"stylePreprocessorOptions"` | Provides further customization for style preprocessors resolved to the workspace root.
`"stylePreprocessorOptions": { "includePaths": ["src/styles"] }` | The full list of options can be found in the Angular builder schemas: diff --git a/docs/get-started/frameworks/nextjs.mdx b/docs/get-started/frameworks/nextjs.mdx index 1d749866d07..e6322452d6a 100644 --- a/docs/get-started/frameworks/nextjs.mdx +++ b/docs/get-started/frameworks/nextjs.mdx @@ -1001,7 +1001,7 @@ Storybook for Next.js is a [framework](../../contribute/framework.mdx) that make Type: `Record` - Configure options for the [framework's builder](../../api/main-config-framework.mdx#optionsbuilder). For Next.js, available options can be found in the [Webpack builder docs](../../builders/webpack.mdx). + Configure options for the [framework's builder](../../api/main-config/main-config-framework.mdx#optionsbuilder). For Next.js, available options can be found in the [Webpack builder docs](../../builders/webpack.mdx). #### `image` diff --git a/docs/get-started/frameworks/sveltekit.mdx b/docs/get-started/frameworks/sveltekit.mdx index 3d017d2957b..3480bdb4b8f 100644 --- a/docs/get-started/frameworks/sveltekit.mdx +++ b/docs/get-started/frameworks/sveltekit.mdx @@ -87,10 +87,10 @@ Storybook for SvelteKit is a [framework](../../contribute/framework.mdx) that ma | Module | Status | Note | | ---------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | | [`$app/environment`](https://kit.svelte.dev/docs/modules#$app-environment) | ✅ Supported | `version` is always empty in Storybook. | - | [`$app/forms`](https://kit.svelte.dev/docs/modules#$app-forms) | ⚠️ **Experimental** | See [How to mock](#how-to-mock). | - | [`$app/navigation`](https://kit.svelte.dev/docs/modules#$app-navigation) | ⚠️ **Experimental** | See [How to mock](#how-to-mock). | + | [`$app/forms`](https://kit.svelte.dev/docs/modules#$app-forms) | ⚠️ **Experimental** | See [How to mock](#how-to-mock). | + | [`$app/navigation`](https://kit.svelte.dev/docs/modules#$app-navigation) | ⚠️ **Experimental** | See [How to mock](#how-to-mock). | | [`$app/paths`](https://kit.svelte.dev/docs/modules#$app-paths) | ✅ Supported | Requires SvelteKit 1.4.0 or newer. | - | [`$app/stores`](https://kit.svelte.dev/docs/modules#$app-stores) | ⚠️ **Experimental** | See [How to mock](#how-to-mock). | + | [`$app/stores`](https://kit.svelte.dev/docs/modules#$app-stores) | ⚠️ **Experimental** | See [How to mock](#how-to-mock). | | [`$env/dynamic/public`](https://kit.svelte.dev/docs/modules#$env-dynamic-public) | 🚧 Partially supported | Only supported in development mode. Storybook is built as a static app with no server-side API, so it cannot dynamically serve content. | | [`$env/static/public`](https://kit.svelte.dev/docs/modules#$env-static-public) | ✅ Supported | | | [`$lib`](https://kit.svelte.dev/docs/modules#$lib) | ✅ Supported | | diff --git a/docs/get-started/frameworks/vue3-vite.mdx b/docs/get-started/frameworks/vue3-vite.mdx index f4ca66a4e05..5aa98fad96c 100644 --- a/docs/get-started/frameworks/vue3-vite.mdx +++ b/docs/get-started/frameworks/vue3-vite.mdx @@ -75,8 +75,7 @@ Storybook for Vue & Vite is a [framework](../../contribute/framework.mdx) that m ## Extending the Vue application - Storybook creates a [Vue 3 application](https://vuejs.org/api/application.html#application-api) for your component preview. - When using global custom components (`app.component`), directives (`app.directive`), extensions (`app.use`), or other application methods, you will need to configure those in the `./storybook/preview.js` file. + Storybook creates a [Vue 3 application](https://vuejs.org/api/application.html#application-api) for your component preview. When using global custom components (`app.component`), directives (`app.directive`), extensions (`app.use`), or other application methods, you will need to configure those in the `./storybook/preview.js` file. Therefore, Storybook provides you with a `setup` function exported from this package, which receives as a callback your Storybook instance, which you can interact with and add your custom configuration. diff --git a/docs/get-started/frameworks/vue3-webpack5.mdx b/docs/get-started/frameworks/vue3-webpack5.mdx index 3c5d579ef5f..a9f7f900720 100644 --- a/docs/get-started/frameworks/vue3-webpack5.mdx +++ b/docs/get-started/frameworks/vue3-webpack5.mdx @@ -88,8 +88,7 @@ Storybook for Vue & Webpack is a [framework](../../contribute/framework.mdx) tha ## Extending the Vue application - Storybook creates a [Vue 3 application](https://vuejs.org/api/application.html#application-api) for your component preview. - When using global custom components (`app.component`), directives (`app.directive`), extensions (`app.use`), or other application methods, you will need to configure those in the `./storybook/preview.js` file. + Storybook creates a [Vue 3 application](https://vuejs.org/api/application.html#application-api) for your component preview. When using global custom components (`app.component`), directives (`app.directive`), extensions (`app.use`), or other application methods, you will need to configure those in the `./storybook/preview.js` file. Therefore, Storybook provides you with a `setup` function exported from this package, which receives as a callback your Storybook instance, which you can interact with and add your custom configuration. diff --git a/docs/get-started/install.mdx b/docs/get-started/install.mdx index 4c9570c0c1a..3a01f4b7533 100644 --- a/docs/get-started/install.mdx +++ b/docs/get-started/install.mdx @@ -124,23 +124,23 @@ There are some noteworthy items here: Out of the box, adding Storybook to an Angular project using the Angular CLI requires you to run the installation command from the root of the project or, if you're working with a monorepo environment, from the directory where the Angular configuration file (i.e., `angular.json`) is located as it will be used to set up the builder configuration necessary to run Storybook. However, if you need, you can extend the builder configuration to customize Storybook's behavior. Listed below are the supported options: - | Configuration element | Description | - | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | - | `"browserTarget"` | Build target to be served using the following format.
`"example-project:builder:config"` | - | `"tsConfig"` | Location of the TypeScript configuration file, relative to the current workspace.
`"tsConfig": "./tsconfig.json"`. | - | `"port"` | Port used by Storybook.
`"port": 6006` | - | `"host"` | Set up a custom host for Storybook.
`"host": "http://my-custom-host"` | - | `"configDir"` | Storybook configuration directory location.
`"configDir": ".storybook"` | - | `"https"` | Starts Storybook with HTTPS enabled.
`"https": true`
Requires custom certificate information. | - | `"sslCa"` | Provides an SSL certificate authority.
`"sslCa": "your-custom-certificate-authority"`
Optional usage with `"https"` | - | `"sslCert"` | Provides an SSL certificate.
`"sslCert": "your-custom-certificate"`
Required for `https` | - | `"sslKey"` | Provides an SSL key to serve Storybook.
`"sslKey": "your-ssl-key"` | - | `"smokeTest"` | Exit Storybook after successful start.
`"smokeTest": true` | - | `"ci"` | Starts Storybook in CI mode (skips interactive prompts and will not open browser window).
`"ci": true` | - | `"quiet"` | Filters Storybook verbose build output.
`"quiet": true` | - | `"docs"` | Starts Storybook in [documentation mode](../writing-docs/build-documentation.mdx#preview-storybooks-documentation).
`"docs": true` | + | Configuration element | Description | + | ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | + | `"browserTarget"` | Build target to be served using the following format.
`"example-project:builder:config"` | + | `"tsConfig"` | Location of the TypeScript configuration file, relative to the current workspace.
`"tsConfig": "./tsconfig.json"`. | + | `"port"` | Port used by Storybook.
`"port": 6006` | + | `"host"` | Set up a custom host for Storybook.
`"host": "http://my-custom-host"` | + | `"configDir"` | Storybook configuration directory location.
`"configDir": ".storybook"` | + | `"https"` | Starts Storybook with HTTPS enabled.
`"https": true`
Requires custom certificate information. | + | `"sslCa"` | Provides an SSL certificate authority.
`"sslCa": "your-custom-certificate-authority"`
Optional usage with `"https"` | + | `"sslCert"` | Provides an SSL certificate.
`"sslCert": "your-custom-certificate"`
Required for `https` | + | `"sslKey"` | Provides an SSL key to serve Storybook.
`"sslKey": "your-ssl-key"` | + | `"smokeTest"` | Exit Storybook after successful start.
`"smokeTest": true` | + | `"ci"` | Starts Storybook in CI mode (skips interactive prompts and will not open browser window).
`"ci": true` | + | `"quiet"` | Filters Storybook verbose build output.
`"quiet": true` | + | `"docs"` | Starts Storybook in [documentation mode](../writing-docs/build-documentation.mdx#preview-storybooks-documentation).
`"docs": true` | | `"styles"` | Provide the location of the [application's styles](../configure/styling-and-css.mdx#importing-css-files) to be used with Storybook.
`"styles": ["src/styles.css", "src/styles.scss"]`
| - | `"stylePreprocessorOptions"` | Provides further customization for style preprocessors resolved to the workspace root.
`"stylePreprocessorOptions": { "includePaths": ["src/styles"] }` | + | `"stylePreprocessorOptions"` | Provides further customization for style preprocessors resolved to the workspace root.
`"stylePreprocessorOptions": { "includePaths": ["src/styles"] }` | @@ -249,7 +249,7 @@ There are some noteworthy items here: - * [Storybook's Web Components Webpack README](https://github.com/storybookjs/storybook/tree/next/code/frameworks/web-components-webpack55) for more information on how to set up Storybook in your Web Components project with Webpack 5. + * [Storybook's Web Components Webpack README](https://github.com/storybookjs/storybook/tree/next/code/frameworks/web-components-webpack5) for more information on how to set up Storybook in your Web Components project with Webpack 5. * [Storybook's Web Components Vite README](https://github.com/storybookjs/storybook/tree/next/code/frameworks/web-components-vite) for more information on how to set up Storybook in your Web Components project with Vite. * [Storybook's help documentation](https://storybook.js.org/community#support) to contact the community and ask for help. diff --git a/docs/sharing/index.mdx b/docs/sharing/index.mdx index ecf7f694eb3..f5038e03d64 100644 --- a/docs/sharing/index.mdx +++ b/docs/sharing/index.mdx @@ -11,5 +11,5 @@ You have your components ready and tested. That's great! Now you want to make yo * [Publish](./publish-storybook.mdx) * [Embed](./embed.mdx) * [Design integrations](./design-integrations.mdx) -* [Composition](./composition.mdx) +* [Composition](./storybook-composition.mdx) * [Package Composition](./package-composition.mdx) diff --git a/docs/sharing/storybook-composition.mdx b/docs/sharing/storybook-composition.mdx index fbe51d21ec0..c2e7d34ccc3 100644 --- a/docs/sharing/storybook-composition.mdx +++ b/docs/sharing/storybook-composition.mdx @@ -71,5 +71,5 @@ If you're working with an outdated Storybook version or have a project-specific {/* prettier-ignore-end */} - The usage of a specific version of the CLI is intended as the `extract` command is not available in Storybook 8.0 or higher. It also requires you to provide additional configuration to generate the `index.json` file accurately. See the [previous documentation](../../../release-7-5/docs/sharing/storybook-composition.mdx) for more information. + The usage of a specific version of the CLI is intended as the `extract` command is not available in Storybook 8.0 or higher. It also requires you to provide additional configuration to generate the `index.json` file accurately. See the [previous documentation](../../../release-7-6/docs/sharing/storybook-composition.mdx) for more information. diff --git a/docs/versions/latest.json b/docs/versions/latest.json index f2b7dba133d..bc9c7b4e27d 100644 --- a/docs/versions/latest.json +++ b/docs/versions/latest.json @@ -1 +1 @@ -{"version":"8.1.0","info":{"plain":"- Automigration: Improve react-docgen automigration prompt - [#27106](https://github.com/storybookjs/storybook/pull/27106), thanks @valentinpalkovic!\n- Typescript: Add types for `experimental-playwright` entries without `type:bundler` - [#27107](https://github.com/storybookjs/storybook/pull/27107), thanks @ndelangen!"}} +{"version":"8.2.0","info":{"plain":""}} diff --git a/docs/versions/next.json b/docs/versions/next.json index 7b105c36d35..5ca4ed6ffcb 100644 --- a/docs/versions/next.json +++ b/docs/versions/next.json @@ -1 +1 @@ -{"version":"8.2.0-beta.1","info":{"plain":"- Babel: Ensure story files not transpiled earlier than ES2017 - [#28469](https://github.com/storybookjs/storybook/pull/28469), thanks @kasperpeulen!\n- Blocks: Prebundle `tocbot` - [#28318](https://github.com/storybookjs/storybook/pull/28318), thanks @shilman!\n- Core: Make sure StorybookError message shows up in browser console and interactions panel - [#28464](https://github.com/storybookjs/storybook/pull/28464), thanks @kasperpeulen!\n- Index: Fix MDX to override project-level autodocs - [#28461](https://github.com/storybookjs/storybook/pull/28461), thanks @shilman!\n- Test: Improve MountMustBeDestructuredError error message - [#28468](https://github.com/storybookjs/storybook/pull/28468), thanks @kasperpeulen!"}} +{"version":"8.3.0-alpha.0","info":{"plain":""}} diff --git a/docs/writing-docs/autodocs.mdx b/docs/writing-docs/autodocs.mdx index b2e1590309c..b78935a1a2b 100644 --- a/docs/writing-docs/autodocs.mdx +++ b/docs/writing-docs/autodocs.mdx @@ -59,8 +59,8 @@ In addition to enabling the feature with `tags`, you can extend your Storybook c {/* prettier-ignore-end */} -| Option | Description | -| ------------- | ---------------------------------------------------------------------------------------------------- | +| Option | Description | +| ------------- | ----------------------------------------------------------------------------------------------------- | | `defaultName` | Renames the auto-generated documentation page
Default: `docs: { defaultName: 'Documentation' }` | ### Write a custom template @@ -105,7 +105,9 @@ Then you can use it in your `.storybook/preview.js` or an individual story file {/* prettier-ignore-end */} + If you only need to override the documentation page for a single component, we recommend creating an MDX file and referencing it directly via the `` Doc Block. + ### Generate a table of contents @@ -122,17 +124,19 @@ Storybook's auto-generated documentation pages can be quite long and difficult t By default, the table of contents on the documentation page will only show the `h3` headings that are automatically generated. However, if you want to customize the table of contents, you can add more parameters to the `toc` property. The following options and examples of how to use them are available. -| Option | Description | -| --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `contentsSelector` | Defines the container's CSS selector for search for the headings
`toc: { contentsSelector: '.sbdocs-content' }` | -| `disable` | Hides the table of contents for the documentation pages
`toc: { disable: true }` | -| `headingSelector` | Defines the list of headings to feature in the table of contents
`toc: { headingSelector: 'h1, h2, h3' }` | -| `ignoreSelector` | Configures the table of contents to ignore specific headings or stories. By default, the table of contents will ignore all content placed within Story blocks
`toc: { ignoreSelector: '.docs-story h2' }` | +| Option | Description | +| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `contentsSelector` | Defines the container's CSS selector for search for the headings
`toc: { contentsSelector: '.sbdocs-content' }` | +| `disable` | Hides the table of contents for the documentation pages
`toc: { disable: true }` | +| `headingSelector` | Defines the list of headings to feature in the table of contents
`toc: { headingSelector: 'h1, h2, h3' }` | +| `ignoreSelector` | Configures the table of contents to ignore specific headings or stories. By default, the table of contents will ignore all content placed within Story blocks
`toc: { ignoreSelector: '.docs-story h2' }` | | `title` | Defines a title caption for the table of contents.
Accepts one of: `string`, `null`, React element
`toc: { title: 'Table of Contents' }` | -| `unsafeTocbotOptions` | Provides additional [`TocBot`](https://tscanlin.github.io/tocbot/) configuration options
`toc: { unsafeTocbotOptions: { orderedList: true } }` | +| `unsafeTocbotOptions` | Provides additional [`TocBot`](https://tscanlin.github.io/tocbot/) configuration options
`toc: { unsafeTocbotOptions: { orderedList: true } }` | + The `contentsSelector`, `headingSelector`, and `ignoreSelector` properties allow additional customization. For more information on using them, see the [`Tocbot` documentation](https://tscanlin.github.io/tocbot/). + {/* prettier-ignore-start */} diff --git a/docs/writing-docs/doc-blocks.mdx b/docs/writing-docs/doc-blocks.mdx index 6460c9eb0c6..27bdda8217f 100644 --- a/docs/writing-docs/doc-blocks.mdx +++ b/docs/writing-docs/doc-blocks.mdx @@ -111,7 +111,9 @@ For example, you can filter out the `style` prop from all [`Controls`](../api/do {/* prettier-ignore-end */} + Parameters can also be defined at the [component](../writing-stories/parameters.mdx#component-parameters) (or meta) level or the [story](../writing-stories/parameters.mdx#story-parameters) level, allowing you to customize Doc Blocks exactly as you need, where you need. + The blocks that accept customization via parameters are marked in the list of available blocks below. @@ -133,7 +135,9 @@ Each block has a dedicated API reference page detailing usage, available options ### [ArgTypes](../api/doc-blocks/doc-block-argtypes.mdx) + Accepts parameters in the namespace `parameters.docs.argTypes`. + The `ArgTypes` block can be used to show a static table of [arg types](../api/arg-types.mdx) for a given component as a way to document its interface. @@ -143,7 +147,9 @@ The `ArgTypes` block can be used to show a static table of [arg types](../api/ar ### [Canvas](../api/doc-blocks/doc-block-canvas.mdx) + Accepts parameters in the namespace `parameters.docs.canvas`. + The `Canvas` block is a wrapper around a [`Story`](../api/doc-blocks/doc-block-story.mdx), featuring a toolbar that allows you to interact with its content while automatically providing the required [`Source`](../api/doc-blocks/doc-block-source.mdx) snippets. @@ -159,7 +165,9 @@ The `ColorPalette` block allows you to document all color-related items (e.g., s ### [Controls](../api/doc-blocks/doc-block-controls.mdx) + Accepts parameters in the namespace `parameters.docs.controls`. + The `Controls` block can be used to show a dynamic table of args for a given story, as a way to document its interface, and to allow you to change the args for a (separately) rendered story (via the [`Story`](../api/doc-blocks/doc-block-story.mdx) or [`Canvas`](../api/doc-blocks/doc-block-canvas.mdx) blocks). @@ -200,7 +208,9 @@ The `Primary` block displays the primary (first defined in the stories file) sto ### [Source](../api/doc-blocks/doc-block-source.mdx) + Accepts parameters in the namespace `parameters.docs.source`. + The `Source` block is used to render a snippet of source code directly. @@ -216,7 +226,9 @@ The `Stories` block renders the full collection of stories in a stories file. ### [Story](../api/doc-blocks/doc-block-story.mdx) + Accepts parameters in the namespace `parameters.docs.story`. + Stories (component tests) are Storybook's fundamental building blocks. diff --git a/docs/writing-docs/index.mdx b/docs/writing-docs/index.mdx index 5758a2c83a7..8764a25c56f 100644 --- a/docs/writing-docs/index.mdx +++ b/docs/writing-docs/index.mdx @@ -12,7 +12,7 @@ Storybook gives you tools to expand this essential documentation with prose and ![Docs page](../_assets/writing-docs/docs-completed.png) -If you're including Storybook in your project for the [first time](../get-started/index.mdx), we provide you with a [documentation page](./autodocs.mdx) ("Autodocs" for short), positioned near your stories. It's a baseline template automatically generated, listing your existing stories and relevant metadata. +If you're including Storybook in your project for the [first time](../get-started/install.mdx), we provide you with a [documentation page](./autodocs.mdx) ("Autodocs" for short), positioned near your stories. It's a baseline template automatically generated, listing your existing stories and relevant metadata. Additionally, you can customize this template if needed or create free-form pages for each component using [MDX](./mdx.mdx). In both cases, you’ll use Doc Blocks as the building blocks to create full-featured documentation. diff --git a/docs/writing-docs/mdx.mdx b/docs/writing-docs/mdx.mdx index 1810901e7c7..2f73ab8fb2d 100644 --- a/docs/writing-docs/mdx.mdx +++ b/docs/writing-docs/mdx.mdx @@ -14,7 +14,9 @@ In addition, you can write pure documentation pages in MDX and add them to Story ![MDX simple example result](../_assets/writing-docs/mdx-hero.png) - Writing stories directly in MDX was removed in Storybook 8, and we're no longer supporting it. Please reference the [previous documentation](../../../release-6-5/docs/writing-docs/mdx.mdx) for guidance on that feature or [migrate](../migration-guide.mdx#storiesmdx-to-mdxcsf) to the new format. + + Writing stories directly in MDX was removed in Storybook 8, and we're no longer supporting it. Please reference the [previous documentation](../../../release-6-5/docs/writing-docs/mdx.mdx) for guidance on that feature or [migrate](../migration-guide/index.mdx#storiesmdx-to-mdxcsf) to the new format. + ## Basic example @@ -163,7 +165,9 @@ However, providing the `Meta` Doc Block may not be required for certain use case {/* prettier-ignore-end */} + If you're overriding an existing auto-generated documentation page enabled via [`tags`](./autodocs.mdx#setup-automated-docs) configuration property, we recommend removing it to avoid errors. + Once the custom MDX documentation is loaded, Storybook will infer the title and location using the same heuristic rules to generate [auto-title stories](../configure/user-interface/sidebar-and-urls.mdx#csf-30-auto-titles) and render it in the sidebar as a `Docs` entry. diff --git a/docs/writing-stories/args.mdx b/docs/writing-stories/args.mdx index 253f5ea088d..94b12059142 100644 --- a/docs/writing-stories/args.mdx +++ b/docs/writing-stories/args.mdx @@ -11,7 +11,7 @@ A story is a component with a set of arguments that define how the component sho When an arg’s value changes, the component re-renders, allowing you to interact with components in Storybook’s UI via addons that affect args. -Learn how and why to write stories in [the introduction](./index.mdx#using-args). For details on how args work, read on. +Learn how and why to write stories in [the introduction](./index.mdx). For details on how args work, read on. ## Args object diff --git a/docs/writing-stories/decorators.mdx b/docs/writing-stories/decorators.mdx index 2fa694d114a..e155bcb3300 100644 --- a/docs/writing-stories/decorators.mdx +++ b/docs/writing-stories/decorators.mdx @@ -31,7 +31,7 @@ The second argument to a decorator function is the **story context** which conta * `args` - the story arguments. You can use some [`args`](./args.mdx) in your decorators and drop them in the story implementation itself. * `argTypes`- Storybook's [argTypes](../api/arg-types.mdx) allow you to customize and fine-tune your stories [`args`](./args.mdx). -* `globals` - Storybook-wide [globals](../essentials/toolbars-and-globals.mdx#globals). In particular you can use the [toolbars feature](../essentials/toolbars-and-globals.mdx#global-types-toolbar-annotations) to allow you to change these values using Storybook’s UI. +* `globals` - Storybook-wide [globals](../essentials/toolbars-and-globals.mdx#globals). In particular you can use the [toolbars feature](../essentials/toolbars-and-globals.mdx#global-types-and-the-toolbar-annotation) to allow you to change these values using Storybook’s UI. * `hooks` - Storybook's API hooks (e.g., useArgs). * `parameters`- the story's static metadata, most commonly used to control Storybook's behavior of features and addons. * `viewMode`- Storybook's current active window (e.g., canvas, docs). diff --git a/docs/writing-stories/index.mdx b/docs/writing-stories/index.mdx index ef1e0f88fd7..72ec0bf088d 100644 --- a/docs/writing-stories/index.mdx +++ b/docs/writing-stories/index.mdx @@ -39,7 +39,9 @@ The *default* export metadata controls how Storybook lists your stories and prov {/* prettier-ignore-end */} + Starting with Storybook version 7.0, story titles are analyzed statically as part of the build process. The *default* export must contain a `title` property that can be read statically or a `component` property from which an automatic title can be computed. Using the `id` property to customize your story URL must also be statically readable. + ### Defining stories diff --git a/docs/writing-stories/tags.mdx b/docs/writing-stories/tags.mdx index 7a1f7fe9da5..25459a84ba5 100644 --- a/docs/writing-stories/tags.mdx +++ b/docs/writing-stories/tags.mdx @@ -11,10 +11,10 @@ Tags allow you to control which stories are included in your Storybook, enabling The following tags are available in every Storybook project: -| Tag | Applied by default? | Description | -| ---------- | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| Tag | Applied by default? | Description | +| ---------- | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `autodocs` | No | Stories tagged with `autodocs` will be included in the [docs page](../writing-docs/autodocs.mdx). If a CSF file does not contain at least one story tagged with `autodocs`, that component will not generate a docs page. | -| `dev` | Yes | Stories tagged with `dev` are rendered in Storybook's sidebar. | +| `dev` | Yes | Stories tagged with `dev` are rendered in Storybook's sidebar. | | `test` | Yes | Stories tagged with `test` do not currently affect Storybook's UI, but can be used to filter the [test runner](../writing-tests/test-runner.mdx#run-tests-for-a-subset-of-stories). | The `dev` and `test` tags are automatically, implicitly applied to every story in your Storybook project. diff --git a/docs/writing-stories/typescript.mdx b/docs/writing-stories/typescript.mdx index 4340ffd8e27..e590b6d7ed3 100644 --- a/docs/writing-stories/typescript.mdx +++ b/docs/writing-stories/typescript.mdx @@ -90,7 +90,7 @@ Sometimes stories need to define args that aren’t included in the component's ### Svelte specific tips - Svelte offers excellent TypeScript support for .svelte files. For example, consider the following component. You can run type checks using svelte-check and add VSCode editor support with the [Svelte for VSCode extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode\&ssr=false#overview). + Svelte offers excellent TypeScript support for .svelte files. For example, consider the following component. You can run type checks using svelte-check and add VSCode editor support with the [Svelte for VSCode extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). ```html