diff --git a/.circleci/config.yml b/.circleci/config.yml index 617cdac42c28..ee9dee76c725 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -555,19 +555,19 @@ workflows: requires: - unit-tests - create-sandboxes: - parallelism: 21 + parallelism: 20 requires: - build - build-sandboxes: - parallelism: 21 + parallelism: 20 requires: - create-sandboxes - chromatic-sandboxes: - parallelism: 18 + parallelism: 17 requires: - build-sandboxes - e2e-production: - parallelism: 18 + parallelism: 17 requires: - build-sandboxes - e2e-dev: @@ -575,7 +575,7 @@ workflows: requires: - create-sandboxes - test-runner-production: - parallelism: 18 + parallelism: 17 requires: - build-sandboxes - bench: @@ -609,22 +609,22 @@ workflows: requires: - build - create-sandboxes: - parallelism: 34 + parallelism: 33 requires: - build # - smoke-test-sandboxes: # disabled for now # requires: # - create-sandboxes - build-sandboxes: - parallelism: 34 + parallelism: 33 requires: - create-sandboxes - chromatic-sandboxes: - parallelism: 31 + parallelism: 30 requires: - build-sandboxes - e2e-production: - parallelism: 31 + parallelism: 30 requires: - build-sandboxes - e2e-dev: @@ -632,7 +632,7 @@ workflows: requires: - create-sandboxes - test-runner-production: - parallelism: 31 + parallelism: 30 requires: - build-sandboxes # TODO: reenable once we find out the source of flakyness diff --git a/.github/workflows/generate-sandboxes-next.yml b/.github/workflows/generate-sandboxes-next.yml index f6ab2f7c822f..c20f5491ef30 100644 --- a/.github/workflows/generate-sandboxes-next.yml +++ b/.github/workflows/generate-sandboxes-next.yml @@ -43,7 +43,7 @@ jobs: run: yarn wait-on http://localhost:6001 working-directory: ./code - name: Generate - run: yarn generate-sandboxes --local-registry --exclude=angular-cli/prerelease + run: yarn generate-sandboxes --local-registry --exclude=angular-cli/prerelease --debug working-directory: ./code - name: Publish run: yarn publish-sandboxes --remote=https://storybook-bot:${{ secrets.PAT_STORYBOOK_BOT}}@github.com/storybookjs/sandboxes.git --push --branch=next diff --git a/CHANGELOG.md b/CHANGELOG.md index 966bf5ce9a52..65162adc174c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,12 @@ +## 7.4.5 + +- UI: Fix infinite hook call causing browsers to freeze - [#24291](https://github.com/storybookjs/storybook/pull/24291), thanks [@yannbf](https://github.com/yannbf)! + +## 7.4.4 + +- Core: Fix Promise cycle bug in useSharedState - [#24268](https://github.com/storybookjs/storybook/pull/24268), thanks [@ndelangen](https://github.com/ndelangen)! +- Manager: Fix useAddonState when using a setter function - [#24237](https://github.com/storybookjs/storybook/pull/24237), thanks [@ndelangen](https://github.com/ndelangen)! + ## 7.4.3 - CLI: Fix `sb add` adding duplicative entries - [#24229](https://github.com/storybookjs/storybook/pull/24229), thanks [@ndelangen](https://github.com/ndelangen)! diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md index b198f6cba525..cc8636b9d524 100644 --- a/CHANGELOG.prerelease.md +++ b/CHANGELOG.prerelease.md @@ -1,3 +1,15 @@ +## 7.5.0-alpha.4 + +- CLI: Fix Nextjs project detection - [#24346](https://github.com/storybookjs/storybook/pull/24346), thanks [@yannbf](https://github.com/yannbf)! +- Core: Deprecate `storyStoreV6` (including `storiesOf`) and `storyIndexers` - [#23938](https://github.com/storybookjs/storybook/pull/23938), thanks [@JReinhold](https://github.com/JReinhold)! +- Core: Fix Promise cycle bug in useSharedState - [#24268](https://github.com/storybookjs/storybook/pull/24268), thanks [@ndelangen](https://github.com/ndelangen)! +- Core: Fix missing favicon during dev - [#24356](https://github.com/storybookjs/storybook/pull/24356), thanks [@ndelangen](https://github.com/ndelangen)! +- NextJS: Change babel plugins from `proposal-...` to `transform-...` - [#24290](https://github.com/storybookjs/storybook/pull/24290), thanks [@roottool](https://github.com/roottool)! +- Nextjs: Improve support for Windows-style paths - [#23695](https://github.com/storybookjs/storybook/pull/23695), thanks [@T99](https://github.com/T99)! +- UI: Fix infinite hook call causing browsers to freeze - [#24291](https://github.com/storybookjs/storybook/pull/24291), thanks [@yannbf](https://github.com/yannbf)! +- UI: Improve contrast ratio between focus / hover - [#24205](https://github.com/storybookjs/storybook/pull/24205), thanks [@chocoscoding](https://github.com/chocoscoding)! +- Vite: Move mdx-plugin from @storybook/builder-vite to @storybook/addon-docs - [#24166](https://github.com/storybookjs/storybook/pull/24166), thanks [@bryanjtc](https://github.com/bryanjtc)! + ## 7.5.0-alpha.3 - Build: Filter some manager errors - [#24217](https://github.com/storybookjs/storybook/pull/24217), thanks [@yannbf](https://github.com/yannbf)! diff --git a/MIGRATION.md b/MIGRATION.md index d7c47af924b3..1708f26a3dbe 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -1,7 +1,10 @@

Migration

+- [From version 7.4.0 to 7.5.0](#from-version-740-to-750) + - [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated) + - [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers) - [From version 7.0.0 to 7.2.0](#from-version-700-to-720) - - [Addon API is more type-strict](#addon-api-is-more-type-strict) + - [Addon API is more type-strict](#addon-api-is-more-type-strict) - [From version 6.5.x to 7.0.0](#from-version-65x-to-700) - [7.0 breaking changes](#70-breaking-changes) - [Dropped support for Node 15 and below](#dropped-support-for-node-15-and-below) @@ -27,7 +30,7 @@ - [Deploying build artifacts](#deploying-build-artifacts) - [Dropped support for file URLs](#dropped-support-for-file-urls) - [Serving with nginx](#serving-with-nginx) - - [Ignore story files from node\_modules](#ignore-story-files-from-node_modules) + - [Ignore story files from node_modules](#ignore-story-files-from-node_modules) - [7.0 Core changes](#70-core-changes) - [7.0 feature flags removed](#70-feature-flags-removed) - [Story context is prepared before for supporting fine grained updates](#story-context-is-prepared-before-for-supporting-fine-grained-updates) @@ -39,7 +42,7 @@ - [Addon-interactions: Interactions debugger is now default](#addon-interactions-interactions-debugger-is-now-default) - [7.0 Vite changes](#70-vite-changes) - [Vite builder uses Vite config automatically](#vite-builder-uses-vite-config-automatically) - - [Vite cache moved to node\_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook) + - [Vite cache moved to node_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook) - [7.0 Webpack changes](#70-webpack-changes) - [Webpack4 support discontinued](#webpack4-support-discontinued) - [Babel mode v7 exclusively](#babel-mode-v7-exclusively) @@ -89,7 +92,7 @@ - [Dropped addon-docs manual babel configuration](#dropped-addon-docs-manual-babel-configuration) - [Dropped addon-docs manual configuration](#dropped-addon-docs-manual-configuration) - [Autoplay in docs](#autoplay-in-docs) - - [Removed STORYBOOK\_REACT\_CLASSES global](#removed-storybook_react_classes-global) + - [Removed STORYBOOK_REACT_CLASSES global](#removed-storybook_react_classes-global) - [7.0 Deprecations and default changes](#70-deprecations-and-default-changes) - [storyStoreV7 enabled by default](#storystorev7-enabled-by-default) - [`Story` type deprecated](#story-type-deprecated) @@ -302,6 +305,72 @@ - [Packages renaming](#packages-renaming) - [Deprecated embedded addons](#deprecated-embedded-addons) +## From version 7.4.0 to 7.5.0 + +#### `storyStoreV6` and `storiesOf` is deprecated + +`storyStoreV6` and `storiesOf` is deprecated and will be completely removed in Storybook 8.0.0. + +If you're using `storiesOf` we recommend you migrate your stories to CSF3 for a better story writing experience. +In many cases you can get started with the migration by using two migration scripts: + +```bash + +# 1. convert storiesOf to CSF +npx storybook@latest migrate storiesof-to-csf --glob="**/*.stories.tsx" --parser=tsx + +# 2. Convert CSF 2 to CSF 3 +npx storybook@latest migrate csf-2-to-3 --glob="**/*.stories.tsx" --parser=tsx +``` + +They won't do a perfect migration so we recommend that you manually go through each file afterwards. + +Alternatively you can build your own `storiesOf` implementation by leveraging the new (experimental) indexer API ([documentation](https://storybook.js.org/docs/react/api/main-config-indexers), [migration](#storyindexers-is-replaced-with-experimental_indexers)). A proof of concept of such an implementation can be seen in [this StackBlitz demo](https://stackblitz.com/edit/github-h2rgfk?file=README.md). See the demo's `README.md` for a deeper explanation of the implementation. + +#### `storyIndexers` is replaced with `experimental_indexers` + +Defining custom indexers for stories has become a more official - yet still experimental - API which is now configured at `experimental_indexers` instead of `storyIndexers` in `main.ts`. `storyIndexers` has been deprecated and will be fully removed in version 8.0.0. + +The new experimental indexers are documented [here](https://storybook.js.org/docs/react/api/main-config-indexers). The most notable change from `storyIndexers` is that the indexer must now return a list of [`IndexInput`](https://github.com/storybookjs/storybook/blob/next/code/lib/types/src/modules/indexer.ts#L104-L148) instead of `CsfFile`. It's possible to construct an `IndexInput` from a `CsfFile` using the `CsfFile.indexInputs` getter. + +That means you can convert an existing story indexer like this: + +```diff +// .storybook/main.ts + +import { readFileSync } from 'fs'; +import { loadCsf } from '@storybook/csf-tools'; + +export default { +- storyIndexers = (indexers) => { +- const indexer = async (fileName, opts) => { ++ experimental_indexers = (indexers) => { ++ const createIndex = async (fileName, opts) => { + const code = readFileSync(fileName, { encoding: 'utf-8' }); + const makeTitle = (userTitle) => { + // Do something with the auto title retrieved by Storybook + return userTitle; + }; + + // Parse the CSF file with makeTitle as a custom context +- return loadCsf(code, { ...compilationOptions, makeTitle, fileName }).parse(); ++ return loadCsf(code, { ...compilationOptions, makeTitle, fileName }).parse().indexInputs; + }; + + return [ + { + test: /(stories|story)\.[tj]sx?$/, +- indexer, ++ createIndex, + }, + ...(indexers || []), + ]; + }, +}; +``` + +As an addon author you can support previous versions of Storybook by setting both `storyIndexers` and `indexers_experimental`, without triggering the deprecation warning. + ## From version 7.0.0 to 7.2.0 #### Addon API is more type-strict @@ -311,6 +380,7 @@ When registering an addon using `@storybook/manager-api`, the addon API is now m The `type` property is now a required field, and the `id` property should not be set anymore. Here's a correct example: + ```tsx import { addons, types } from '@storybook/manager-api'; @@ -318,7 +388,7 @@ addons.register('my-addon', () => { addons.add('my-addon/panel', { type: types.PANEL, title: 'My Addon', - render: ({ active }) => active ?
Hello World
: null, + render: ({ active }) => (active ?
Hello World
: null), }); }); ``` @@ -869,16 +939,16 @@ Given the following `main.js`: ```js export default { - stories: ['../**/*.stories.*'] -} + stories: ['../**/*.stories.*'], +}; ``` If you want to restore the previous behavior to include `node_modules`, you can update it to: ```js export default { - stories: ['../**/*.stories.*', '../**/node_modules/**/*.stories.*'] -} + stories: ['../**/*.stories.*', '../**/node_modules/**/*.stories.*'], +}; ``` The first glob would have node_modules automatically excluded by Storybook, and the second glob would include all stories that are under a nested `node_modules` directory. @@ -1046,7 +1116,7 @@ Starting in 7.0, we drop support for Angular < 14 _Has automigration_ -In Storybook 6.4 we deprecated calling Storybook directly (e.g. `npm run storybook`) for Angular. In Storybook 7.0, we've removed it entirely. Instead, you have to set up the Storybook builder in your `angular.json` and execute `ng run :storybook` to start Storybook. +In Storybook 6.4 we deprecated calling Storybook directly (e.g. `npm run storybook`) for Angular. In Storybook 7.0, we've removed it entirely. Instead, you have to set up the Storybook builder in your `angular.json` and execute `ng run :storybook` to start Storybook. You can run `npx storybook@next automigrate` to automatically fix your configuration, or visit https://github.com/storybookjs/storybook/tree/next/code/frameworks/angular/README.md#how-do-i-migrate-to-an-angular-storybook-builder for instructions on how to set up Storybook for Angular manually. diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index c00661fe9677..02cd1a5a5254 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -119,9 +119,11 @@ "ts-dedent": "^2.0.0" }, "devDependencies": { + "@rollup/pluginutils": "^5.0.2", "react": "^16.14.0", "react-dom": "^16.8.0", - "typescript": "~4.9.3" + "typescript": "~4.9.3", + "vite": "^4.0.4" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", diff --git a/code/builders/builder-vite/src/plugins/mdx-plugin.ts b/code/addons/docs/src/plugins/mdx-plugin.ts similarity index 97% rename from code/builders/builder-vite/src/plugins/mdx-plugin.ts rename to code/addons/docs/src/plugins/mdx-plugin.ts index 8e4b51f16d6e..82f754fd3cd8 100644 --- a/code/builders/builder-vite/src/plugins/mdx-plugin.ts +++ b/code/addons/docs/src/plugins/mdx-plugin.ts @@ -2,7 +2,7 @@ import type { Options } from '@storybook/types'; import type { Plugin } from 'vite'; import remarkSlug from 'remark-slug'; import remarkExternalLinks from 'remark-external-links'; -import { createFilter } from 'vite'; +import { createFilter } from '@rollup/pluginutils'; import { dirname, join } from 'path'; const isStorybookMdx = (id: string) => id.endsWith('stories.mdx') || id.endsWith('story.mdx'); diff --git a/code/builders/builder-vite/src/plugins/mdx-plugin.types.d.ts b/code/addons/docs/src/plugins/mdx-plugin.types.d.ts similarity index 100% rename from code/builders/builder-vite/src/plugins/mdx-plugin.types.d.ts rename to code/addons/docs/src/plugins/mdx-plugin.types.d.ts diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts index 2adfe2e0e2b5..22b5834c9e9a 100644 --- a/code/addons/docs/src/preset.ts +++ b/code/addons/docs/src/preset.ts @@ -175,6 +175,15 @@ export const addons: StorybookConfig['addons'] = [ require.resolve('@storybook/react-dom-shim/dist/preset'), ]; +export const viteFinal = async (config: any, options: Options) => { + const { plugins = [] } = config; + const { mdxPlugin } = await import('./plugins/mdx-plugin'); + + plugins.push(mdxPlugin(options)); + + return config; +}; + /* * This is a workaround for https://github.com/Swatinem/rollup-plugin-dts/issues/162 * something down the dependency chain is using typescript namespaces, which are not supported by rollup-plugin-dts diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json index ce5582326547..ad90bd41016e 100644 --- a/code/builders/builder-vite/package.json +++ b/code/builders/builder-vite/package.json @@ -47,7 +47,6 @@ "@storybook/client-logger": "workspace:*", "@storybook/core-common": "workspace:*", "@storybook/csf-plugin": "workspace:*", - "@storybook/mdx2-csf": "^1.0.0", "@storybook/node-logger": "workspace:*", "@storybook/preview": "workspace:*", "@storybook/preview-api": "workspace:*", @@ -59,8 +58,6 @@ "find-cache-dir": "^3.0.0", "fs-extra": "^11.1.0", "magic-string": "^0.30.0", - "remark-external-links": "^8.0.0", - "remark-slug": "^6.0.0", "rollup": "^2.25.0 || ^3.3.0" }, "devDependencies": { @@ -96,9 +93,6 @@ "entries": [ "./src/index.ts" ], - "externals": [ - "@storybook/mdx1-csf" - ], "platform": "node" }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17" diff --git a/code/builders/builder-vite/src/plugins/index.ts b/code/builders/builder-vite/src/plugins/index.ts index bccebbdb4833..68e540908dc6 100644 --- a/code/builders/builder-vite/src/plugins/index.ts +++ b/code/builders/builder-vite/src/plugins/index.ts @@ -1,5 +1,4 @@ export * from './inject-export-order-plugin'; -export * from './mdx-plugin'; export * from './strip-story-hmr-boundaries'; export * from './code-generator-plugin'; export * from './csf-plugin'; diff --git a/code/builders/builder-vite/src/vite-config.ts b/code/builders/builder-vite/src/vite-config.ts index a832f2e92a96..75778971b26a 100644 --- a/code/builders/builder-vite/src/vite-config.ts +++ b/code/builders/builder-vite/src/vite-config.ts @@ -15,7 +15,6 @@ import { codeGeneratorPlugin, csfPlugin, injectExportOrderPlugin, - mdxPlugin, stripStoryHMRBoundary, externalGlobalsPlugin, } from './plugins'; @@ -81,7 +80,6 @@ export async function pluginConfig(options: Options) { const plugins = [ codeGeneratorPlugin(options), await csfPlugin(options), - await mdxPlugin(options), injectExportOrderPlugin, stripStoryHMRBoundary(), { diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index a9142100cf8d..394a6fbb502f 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -80,13 +80,13 @@ }, "dependencies": { "@babel/core": "^7.22.9", - "@babel/plugin-proposal-class-properties": "^7.18.6", - "@babel/plugin-proposal-export-namespace-from": "^7.18.9", - "@babel/plugin-proposal-numeric-separator": "^7.18.6", - "@babel/plugin-proposal-object-rest-spread": "^7.20.7", "@babel/plugin-syntax-bigint": "^7.8.3", "@babel/plugin-syntax-dynamic-import": "^7.8.3", "@babel/plugin-syntax-import-assertions": "^7.22.5", + "@babel/plugin-transform-class-properties": "^7.22.5", + "@babel/plugin-transform-export-namespace-from": "^7.22.11", + "@babel/plugin-transform-numeric-separator": "^7.22.11", + "@babel/plugin-transform-object-rest-spread": "^7.22.15", "@babel/plugin-transform-runtime": "^7.22.9", "@babel/preset-env": "^7.22.9", "@babel/preset-react": "^7.22.5", diff --git a/code/frameworks/nextjs/src/babel/preset.ts b/code/frameworks/nextjs/src/babel/preset.ts index 08a6c18e4312..46dddd1d1659 100644 --- a/code/frameworks/nextjs/src/babel/preset.ts +++ b/code/frameworks/nextjs/src/babel/preset.ts @@ -142,9 +142,9 @@ export default (api: any, options: NextBabelPresetOptions = {}): BabelPreset => require('@babel/plugin-syntax-dynamic-import'), require('@babel/plugin-syntax-import-assertions'), require('./plugins/react-loadable-plugin'), - [require('@babel/plugin-proposal-class-properties'), options['class-properties'] || {}], + [require('@babel/plugin-transform-class-properties'), options['class-properties'] || {}], [ - require('@babel/plugin-proposal-object-rest-spread'), + require('@babel/plugin-transform-object-rest-spread'), { useBuiltIns: true, }, @@ -172,8 +172,8 @@ export default (api: any, options: NextBabelPresetOptions = {}): BabelPreset => isServer && require('@babel/plugin-syntax-bigint'), // Always compile numeric separator because the resulting number is // smaller. - require('@babel/plugin-proposal-numeric-separator'), - require('@babel/plugin-proposal-export-namespace-from'), + require('@babel/plugin-transform-numeric-separator'), + require('@babel/plugin-transform-export-namespace-from'), ].filter(Boolean), }; }; diff --git a/code/frameworks/nextjs/src/font/webpack/loader/local/get-font-face-declarations.ts b/code/frameworks/nextjs/src/font/webpack/loader/local/get-font-face-declarations.ts index 20e1df8deeb2..006c7f126f5b 100644 --- a/code/frameworks/nextjs/src/font/webpack/loader/local/get-font-face-declarations.ts +++ b/code/frameworks/nextjs/src/font/webpack/loader/local/get-font-face-declarations.ts @@ -11,7 +11,7 @@ export async function getFontFaceDeclarations(options: LoaderOptions, rootContex const localFontSrc = options.props.src as LocalFontSrc; // Parent folder relative to the root context - const parentFolder = options.filename.split('/').slice(0, -1).join('/').replace(rootContext, ''); + const parentFolder = path.dirname(options.filename).replace(rootContext, ''); const { validateData } = require('../utils/local-font-utils'); const { weight, style, variable } = validateData('', options.props); @@ -23,9 +23,13 @@ export async function getFontFaceDeclarations(options: LoaderOptions, rootContex 6 )}`; + const arePathsWin32Format = /^[a-z]:\\/iu.test(options.filename); + const cleanWin32Path = (pathString: string): string => + arePathsWin32Format ? pathString.replace(/\\/gu, '/') : pathString; + const getFontFaceCSS = () => { if (typeof localFontSrc === 'string') { - const localFontPath = path.join(parentFolder, localFontSrc); + const localFontPath = cleanWin32Path(path.join(parentFolder, localFontSrc)); return `@font-face { font-family: ${id}; @@ -34,7 +38,7 @@ export async function getFontFaceDeclarations(options: LoaderOptions, rootContex } return localFontSrc .map((font) => { - const localFontPath = path.join(parentFolder, font.path); + const localFontPath = cleanWin32Path(path.join(parentFolder, font.path)); return `@font-face { font-family: ${id}; diff --git a/code/lib/cli/src/project_types.ts b/code/lib/cli/src/project_types.ts index 25c058dee818..05c64b402423 100644 --- a/code/lib/cli/src/project_types.ts +++ b/code/lib/cli/src/project_types.ts @@ -5,11 +5,6 @@ function ltMajor(versionRange: string, major: number) { return validRange(versionRange) && minVersion(versionRange).major < major; } -function gtMajor(versionRange: string, major: number) { - // Uses validRange to avoid a throw from minVersion if an invalid range gets passed - return validRange(versionRange) && minVersion(versionRange).major > major; -} - function eqMajor(versionRange: string, major: number) { // Uses validRange to avoid a throw from minVersion if an invalid range gets passed return validRange(versionRange) && minVersion(versionRange).major === major; @@ -162,9 +157,7 @@ export const supportedTemplates: TemplateConfiguration[] = [ }, { preset: ProjectType.NEXTJS, - dependencies: { - next: (versionRange) => eqMajor(versionRange, 9) || gtMajor(versionRange, 9), - }, + dependencies: ['next'], matcherFunction: ({ dependencies }) => { return dependencies.every(Boolean); }, diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts index 69e858f1d14f..799de8e593ee 100644 --- a/code/lib/cli/src/sandbox-templates.ts +++ b/code/lib/cli/src/sandbox-templates.ts @@ -576,7 +576,7 @@ export const merged: TemplateKey[] = [ ...normal, 'react-webpack/18-ts', 'react-webpack/17-ts', - 'angular-cli/15-ts', + // 'angular-cli/15-ts', // TODO: re-enable when building the storybook works again 'preact-webpack5/default-ts', 'preact-vite/default-ts', 'html-webpack/default', diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index 8c10b00e73ed..c249bc634c35 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -94,7 +94,6 @@ "prompts": "^2.4.0", "read-pkg-up": "^7.0.1", "semver": "^7.3.7", - "serve-favicon": "^2.5.0", "telejson": "^7.2.0", "tiny-invariant": "^1.3.1", "ts-dedent": "^2.0.0", @@ -108,7 +107,6 @@ "@types/compression": "^1.7.0", "@types/ip": "^1.1.0", "@types/node-fetch": "^2.5.7", - "@types/serve-favicon": "^2.5.2", "@types/ws": "^8", "boxen": "^5.1.2", "jest-os-detection": "^1.3.1", diff --git a/code/lib/core-server/src/build-static.ts b/code/lib/core-server/src/build-static.ts index 8782337a6db0..55dc59fbaac1 100644 --- a/code/lib/core-server/src/build-static.ts +++ b/code/lib/core-server/src/build-static.ts @@ -2,7 +2,7 @@ import chalk from 'chalk'; import { copy, emptyDir, ensureDir } from 'fs-extra'; import { dirname, isAbsolute, join, resolve } from 'path'; import { global } from '@storybook/global'; -import { logger } from '@storybook/node-logger'; +import { deprecate, logger } from '@storybook/node-logger'; import { telemetry, getPrecedingUpgrade } from '@storybook/telemetry'; import type { BuilderOptions, @@ -23,6 +23,7 @@ import { import { ConflictingStaticDirConfigError } from '@storybook/core-events/server-errors'; import isEqual from 'lodash/isEqual.js'; +import dedent from 'ts-dedent'; import { outputStats } from './utils/output-stats'; import { copyAllStaticFiles, @@ -123,6 +124,13 @@ export async function buildStaticStandalone(options: BuildStaticStandaloneOption presets.apply('docs', {}), ]); + if (features?.storyStoreV7 === false) { + deprecate( + dedent`storyStoreV6 is deprecated, please migrate to storyStoreV7 instead. + - Refer to the migration guide at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#storystorev6-and-storiesof-is-deprecated` + ); + } + const fullOptions: Options = { ...options, presets, diff --git a/code/lib/core-server/src/dev-server.ts b/code/lib/core-server/src/dev-server.ts index 4619caf29e72..1e8de546880e 100644 --- a/code/lib/core-server/src/dev-server.ts +++ b/code/lib/core-server/src/dev-server.ts @@ -5,8 +5,9 @@ import invariant from 'tiny-invariant'; import type { CoreConfig, Options, StorybookConfig } from '@storybook/types'; import { logConfig } from '@storybook/core-common'; +import { deprecate, logger } from '@storybook/node-logger'; -import { logger } from '@storybook/node-logger'; +import dedent from 'ts-dedent'; import { MissingBuilderError } from '@storybook/core-events/server-errors'; import { getMiddleware } from './utils/middleware'; import { getServerAddresses } from './utils/server-address'; @@ -37,6 +38,13 @@ export async function storybookDevServer(options: Options) { getServerChannel(server) ); + if (features?.storyStoreV7 === false) { + deprecate( + dedent`storyStoreV6 is deprecated, please migrate to storyStoreV7 instead. + - Refer to the migration guide at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#storystorev6-and-storiesof-is-deprecated` + ); + } + let indexError: Error | undefined; // try get index generator, if failed, send telemetry without storyCount, then rethrow the error const initializedStoryIndexGenerator: Promise = diff --git a/code/lib/core-server/src/utils/StoryIndexGenerator.ts b/code/lib/core-server/src/utils/StoryIndexGenerator.ts index 7b03427729d2..0f847b8917a1 100644 --- a/code/lib/core-server/src/utils/StoryIndexGenerator.ts +++ b/code/lib/core-server/src/utils/StoryIndexGenerator.ts @@ -25,7 +25,7 @@ import type { } from '@storybook/types'; import { userOrAutoTitleFromSpecifier, sortStoriesV7 } from '@storybook/preview-api'; import { commonGlobOptions, normalizeStoryPath } from '@storybook/core-common'; -import { logger, once } from '@storybook/node-logger'; +import { deprecate, logger, once } from '@storybook/node-logger'; import { getStorySortParameter } from '@storybook/csf-tools'; import { storyNameFromExport, toId } from '@storybook/csf'; import { analyze } from '@storybook/docs-mdx'; @@ -119,12 +119,6 @@ export class StoryIndexGenerator { public readonly options: StoryIndexGeneratorOptions ) { this.specifierToCache = new Map(); - if (options.storyIndexers.length > 1) { - // TODO: write migration notes before enabling this warning - // deprecate( - // "'storyIndexers' is deprecated, please use 'indexers' instead. See migration notes at XXX" - // ); - } } async initialize() { @@ -298,6 +292,10 @@ export class StoryIndexGenerator { invariant(indexer, `No matching indexer found for ${absolutePath}`); if (indexer.indexer) { + deprecate( + dedent`'storyIndexers' is deprecated, please use 'experimental_indexers' instead. Found a deprecated indexer with matcher: ${indexer.test} + - Refer to the migration guide at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#storyindexers-is-replaced-with-experimental_indexers` + ); return this.extractStoriesFromDeprecatedIndexer({ indexer: indexer.indexer, indexerOptions: { makeTitle: defaultMakeTitle }, diff --git a/code/lib/core-server/src/utils/server-statics.ts b/code/lib/core-server/src/utils/server-statics.ts index b2d5a5e3cbce..19d569cfcc06 100644 --- a/code/lib/core-server/src/utils/server-statics.ts +++ b/code/lib/core-server/src/utils/server-statics.ts @@ -3,16 +3,16 @@ import type { Options, StorybookConfig } from '@storybook/types'; import { getDirectoryFromWorkingDir } from '@storybook/core-common'; import { ConflictingStaticDirConfigError } from '@storybook/core-events/server-errors'; import chalk from 'chalk'; +import type { Router } from 'express'; import express from 'express'; import { pathExists } from 'fs-extra'; -import path from 'path'; -import favicon from 'serve-favicon'; +import path, { basename } from 'path'; import isEqual from 'lodash/isEqual.js'; import { dedent } from 'ts-dedent'; import { defaultStaticDirs } from './constants'; -export async function useStatics(router: any, options: Options) { +export async function useStatics(router: Router, options: Options) { const staticDirs = (await options.presets.apply('staticDirs')) ?? []; const faviconPath = await options.presets.apply('favicon'); @@ -54,7 +54,7 @@ export async function useStatics(router: any, options: Options) { ); } - router.use(favicon(faviconPath)); + router.get(`/${basename(faviconPath)}`, (req, res) => res.sendFile(faviconPath)); } export const parseStaticDir = async (arg: string) => { diff --git a/code/lib/docs-tools/src/argTypes/convert/convert.test.ts b/code/lib/docs-tools/src/argTypes/convert/convert.test.ts index 5b7b15ec6c63..51ad20482478 100644 --- a/code/lib/docs-tools/src/argTypes/convert/convert.test.ts +++ b/code/lib/docs-tools/src/argTypes/convert/convert.test.ts @@ -812,7 +812,7 @@ const transformToModule = (inputCode: string) => { const annotateWithDocgen = (inputCode: string, filename: string) => { const options = { presets: ['@babel/typescript', '@babel/react'], - plugins: ['babel-plugin-react-docgen', '@babel/plugin-proposal-class-properties'], + plugins: ['babel-plugin-react-docgen', '@babel/plugin-transform-class-properties'], babelrc: false, filename, }; diff --git a/code/lib/manager-api/src/index.tsx b/code/lib/manager-api/src/index.tsx index bb7fe0e5ec6c..951dc494a93a 100644 --- a/code/lib/manager-api/src/index.tsx +++ b/code/lib/manager-api/src/index.tsx @@ -397,7 +397,6 @@ export function useSharedState(stateId: string, defaultState?: S) { existingState, STORYBOOK_ADDON_STATE[stateId] ? STORYBOOK_ADDON_STATE[stateId] : defaultState ); - let quicksync = false; if (state === defaultState && defaultState !== undefined) { @@ -409,10 +408,10 @@ export function useSharedState(stateId: string, defaultState?: S) { if (quicksync) { api.setAddonState(stateId, defaultState); } - }); + }, [quicksync]); - const setState = (s: S | API_StateMerger, options?: Options) => { - const result = api.setAddonState(stateId, s, options); + const setState = async (s: S | API_StateMerger, options?: Options) => { + const result = await api.setAddonState(stateId, s, options); STORYBOOK_ADDON_STATE[stateId] = result; return result; }; diff --git a/code/lib/theming/src/base.ts b/code/lib/theming/src/base.ts index 03157875c857..5f60c0e812df 100644 --- a/code/lib/theming/src/base.ts +++ b/code/lib/theming/src/base.ts @@ -48,7 +48,7 @@ export const background = { bar: color.lightest, content: color.lightest, gridCellSize: 10, - hoverable: transparentize(0.93, color.secondary), // hover state for items in a list + hoverable: transparentize(0.9, color.secondary), // hover state for items in a list // Notification, error, and warning backgrounds positive: '#E1FFD4', diff --git a/code/lib/types/src/modules/core-common.ts b/code/lib/types/src/modules/core-common.ts index 45d94e585eb3..0f2a9f54c271 100644 --- a/code/lib/types/src/modules/core-common.ts +++ b/code/lib/types/src/modules/core-common.ts @@ -369,7 +369,7 @@ export interface StorybookConfig { /** * Process CSF files for the story index. - * @soonDeprecated use {@link experimental_indexers} instead + * @deprecated use {@link experimental_indexers} instead */ storyIndexers?: PresetValue; diff --git a/code/lib/types/src/modules/indexer.ts b/code/lib/types/src/modules/indexer.ts index 8ee01b07e83f..4f0838bba05e 100644 --- a/code/lib/types/src/modules/indexer.ts +++ b/code/lib/types/src/modules/indexer.ts @@ -68,7 +68,7 @@ export type Indexer = BaseIndexer & { */ createIndex: (fileName: string, options: IndexerOptions) => Promise; /** - * @soonDeprecated Use {@link index} instead + * @deprecated Use {@link index} instead */ indexer?: never; }; @@ -79,7 +79,7 @@ export type DeprecatedIndexer = BaseIndexer & { }; /** - * @soonDeprecated Use {@link Indexer} instead + * @deprecated Use {@link Indexer} instead */ export type StoryIndexer = Indexer | DeprecatedIndexer; diff --git a/code/package.json b/code/package.json index 386254893d93..807ed23fcac5 100644 --- a/code/package.json +++ b/code/package.json @@ -328,5 +328,6 @@ "Dependency Upgrades" ] ] - } + }, + "deferredNextVersion": "7.5.0-alpha.4" } diff --git a/code/renderers/react/src/docs/extractArgTypes.test.ts b/code/renderers/react/src/docs/extractArgTypes.test.ts index 31ea19fd754c..f96a8722e9d9 100644 --- a/code/renderers/react/src/docs/extractArgTypes.test.ts +++ b/code/renderers/react/src/docs/extractArgTypes.test.ts @@ -37,7 +37,7 @@ const transformToModule = (inputCode: string) => { const annotateWithDocgen = (inputPath: string) => { const options = { presets: ['@babel/typescript', '@babel/react'], - plugins: ['babel-plugin-react-docgen', '@babel/plugin-proposal-class-properties'], + plugins: ['babel-plugin-react-docgen', '@babel/plugin-transform-class-properties'], babelrc: false, }; const { code } = transformFileSync(inputPath, options) || {}; diff --git a/code/yarn.lock b/code/yarn.lock index c347c91c99c8..af6301afc76b 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -414,7 +414,7 @@ __metadata: languageName: node linkType: hard -"@babel/compat-data@npm:^7.20.5, @babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.22.9": +"@babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.22.9": version: 7.22.9 resolution: "@babel/compat-data@npm:7.22.9" checksum: 1334264b041f8ad4e33036326970c9c26754eb5c04b3af6c223fe6da988cbb8a8542b5526f49ec1ac488210d2f710484a0e4bcd30256294ae3f261d0141febad @@ -555,7 +555,7 @@ __metadata: languageName: node linkType: hard -"@babel/helper-compilation-targets@npm:^7.12.0, @babel/helper-compilation-targets@npm:^7.20.7, @babel/helper-compilation-targets@npm:^7.22.15, @babel/helper-compilation-targets@npm:^7.22.5, @babel/helper-compilation-targets@npm:^7.22.6, @babel/helper-compilation-targets@npm:^7.22.9": +"@babel/helper-compilation-targets@npm:^7.12.0, @babel/helper-compilation-targets@npm:^7.22.15, @babel/helper-compilation-targets@npm:^7.22.5, @babel/helper-compilation-targets@npm:^7.22.6, @babel/helper-compilation-targets@npm:^7.22.9": version: 7.22.15 resolution: "@babel/helper-compilation-targets@npm:7.22.15" dependencies: @@ -683,7 +683,7 @@ __metadata: languageName: node linkType: hard -"@babel/helper-plugin-utils@npm:^7.0.0, @babel/helper-plugin-utils@npm:^7.10.4, @babel/helper-plugin-utils@npm:^7.12.13, @babel/helper-plugin-utils@npm:^7.14.5, @babel/helper-plugin-utils@npm:^7.18.6, @babel/helper-plugin-utils@npm:^7.18.9, @babel/helper-plugin-utils@npm:^7.20.2, @babel/helper-plugin-utils@npm:^7.22.5, @babel/helper-plugin-utils@npm:^7.8.0, @babel/helper-plugin-utils@npm:^7.8.3": +"@babel/helper-plugin-utils@npm:^7.0.0, @babel/helper-plugin-utils@npm:^7.10.4, @babel/helper-plugin-utils@npm:^7.12.13, @babel/helper-plugin-utils@npm:^7.14.5, @babel/helper-plugin-utils@npm:^7.18.6, @babel/helper-plugin-utils@npm:^7.20.2, @babel/helper-plugin-utils@npm:^7.22.5, @babel/helper-plugin-utils@npm:^7.8.0, @babel/helper-plugin-utils@npm:^7.8.3": version: 7.22.5 resolution: "@babel/helper-plugin-utils@npm:7.22.5" checksum: d2c4bfe2fa91058bcdee4f4e57a3f4933aed7af843acfd169cd6179fab8d13c1d636474ecabb2af107dc77462c7e893199aa26632bac1c6d7e025a17cbb9d20d @@ -844,7 +844,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-proposal-class-properties@npm:^7.13.0, @babel/plugin-proposal-class-properties@npm:^7.16.5, @babel/plugin-proposal-class-properties@npm:^7.18.6": +"@babel/plugin-proposal-class-properties@npm:^7.13.0, @babel/plugin-proposal-class-properties@npm:^7.16.5": version: 7.18.6 resolution: "@babel/plugin-proposal-class-properties@npm:7.18.6" dependencies: @@ -871,18 +871,6 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-proposal-export-namespace-from@npm:^7.18.9": - version: 7.18.9 - resolution: "@babel/plugin-proposal-export-namespace-from@npm:7.18.9" - dependencies: - "@babel/helper-plugin-utils": ^7.18.9 - "@babel/plugin-syntax-export-namespace-from": ^7.8.3 - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: b90346bd3628ebd44138d0628a5aba1e6b11748893fb48e87008cac30f3bc7cd3161362e49433156737350318174164436357a66fbbfdbe952606b460bd8a0e4 - languageName: node - linkType: hard - "@babel/plugin-proposal-nullish-coalescing-operator@npm:^7.13.8": version: 7.18.6 resolution: "@babel/plugin-proposal-nullish-coalescing-operator@npm:7.18.6" @@ -895,33 +883,6 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-proposal-numeric-separator@npm:^7.18.6": - version: 7.18.6 - resolution: "@babel/plugin-proposal-numeric-separator@npm:7.18.6" - dependencies: - "@babel/helper-plugin-utils": ^7.18.6 - "@babel/plugin-syntax-numeric-separator": ^7.10.4 - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: a83a65c6ec0d2293d830e9db61406d246f22d8ea03583d68460cb1b6330c6699320acce1b45f66ba3c357830720e49267e3d99f95088be457c66e6450fbfe3fa - languageName: node - linkType: hard - -"@babel/plugin-proposal-object-rest-spread@npm:^7.20.7": - version: 7.20.7 - resolution: "@babel/plugin-proposal-object-rest-spread@npm:7.20.7" - dependencies: - "@babel/compat-data": ^7.20.5 - "@babel/helper-compilation-targets": ^7.20.7 - "@babel/helper-plugin-utils": ^7.20.2 - "@babel/plugin-syntax-object-rest-spread": ^7.8.3 - "@babel/plugin-transform-parameters": ^7.20.7 - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: b9818749bb49d8095df64c45db682448d04743d96722984cbfd375733b2585c26d807f84b4fdb28474f2d614be6a6ffe3d96ffb121840e9e5345b2ccc0438bd8 - languageName: node - linkType: hard - "@babel/plugin-proposal-optional-chaining@npm:^7.13.12": version: 7.21.0 resolution: "@babel/plugin-proposal-optional-chaining@npm:7.21.0" @@ -1665,7 +1626,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-parameters@npm:^7.20.7, @babel/plugin-transform-parameters@npm:^7.22.15, @babel/plugin-transform-parameters@npm:^7.22.5": +"@babel/plugin-transform-parameters@npm:^7.22.15, @babel/plugin-transform-parameters@npm:^7.22.5": version: 7.22.15 resolution: "@babel/plugin-transform-parameters@npm:7.22.15" dependencies: @@ -5906,6 +5867,7 @@ __metadata: dependencies: "@jest/transform": ^29.3.1 "@mdx-js/react": ^2.1.5 + "@rollup/pluginutils": ^5.0.2 "@storybook/blocks": "workspace:*" "@storybook/client-logger": "workspace:*" "@storybook/components": "workspace:*" @@ -5926,6 +5888,7 @@ __metadata: remark-slug: ^6.0.0 ts-dedent: ^2.0.0 typescript: ~4.9.3 + vite: ^4.0.4 peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 @@ -6531,7 +6494,6 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/csf-plugin": "workspace:*" - "@storybook/mdx2-csf": ^1.0.0 "@storybook/node-logger": "workspace:*" "@storybook/preview": "workspace:*" "@storybook/preview-api": "workspace:*" @@ -6546,8 +6508,6 @@ __metadata: fs-extra: ^11.1.0 glob: ^10.0.0 magic-string: ^0.30.0 - remark-external-links: ^8.0.0 - remark-slug: ^6.0.0 rollup: ^3.20.1 slash: ^5.0.0 typescript: ~4.9.3 @@ -6893,7 +6853,6 @@ __metadata: "@types/node-fetch": ^2.5.7 "@types/pretty-hrtime": ^1.0.0 "@types/semver": ^7.3.4 - "@types/serve-favicon": ^2.5.2 "@types/ws": ^8 better-opn: ^3.0.2 boxen: ^5.1.2 @@ -6914,7 +6873,6 @@ __metadata: prompts: ^2.4.0 read-pkg-up: ^7.0.1 semver: ^7.3.7 - serve-favicon: ^2.5.0 slash: ^5.0.0 telejson: ^7.2.0 tiny-invariant: ^1.3.1 @@ -7284,13 +7242,13 @@ __metadata: resolution: "@storybook/nextjs@workspace:frameworks/nextjs" dependencies: "@babel/core": ^7.22.9 - "@babel/plugin-proposal-class-properties": ^7.18.6 - "@babel/plugin-proposal-export-namespace-from": ^7.18.9 - "@babel/plugin-proposal-numeric-separator": ^7.18.6 - "@babel/plugin-proposal-object-rest-spread": ^7.20.7 "@babel/plugin-syntax-bigint": ^7.8.3 "@babel/plugin-syntax-dynamic-import": ^7.8.3 "@babel/plugin-syntax-import-assertions": ^7.22.5 + "@babel/plugin-transform-class-properties": ^7.22.5 + "@babel/plugin-transform-export-namespace-from": ^7.22.11 + "@babel/plugin-transform-numeric-separator": ^7.22.11 + "@babel/plugin-transform-object-rest-spread": ^7.22.15 "@babel/plugin-transform-runtime": ^7.22.9 "@babel/preset-env": ^7.22.9 "@babel/preset-react": ^7.22.5 @@ -9685,15 +9643,6 @@ __metadata: languageName: node linkType: hard -"@types/serve-favicon@npm:^2.5.2": - version: 2.5.4 - resolution: "@types/serve-favicon@npm:2.5.4" - dependencies: - "@types/express": "*" - checksum: 60bb648eff8bba7f589e9a2027879c39c137c96e1afafb6a09cb220477c1ebe74c3ce4293c52724592f04e3278950b82741f449c8517a432c163107333a0d6b8 - languageName: node - linkType: hard - "@types/serve-index@npm:^1.9.1": version: 1.9.1 resolution: "@types/serve-index@npm:1.9.1" @@ -23711,13 +23660,6 @@ __metadata: languageName: node linkType: hard -"ms@npm:2.1.1": - version: 2.1.1 - resolution: "ms@npm:2.1.1" - checksum: 056140c631e740369fa21142417aba1bd629ab912334715216c666eb681c8f015c622dd4e38bc1d836b30852b05641331661703af13a0397eb0ca420fc1e75d9 - languageName: node - linkType: hard - "ms@npm:2.1.2": version: 2.1.2 resolution: "ms@npm:2.1.2" @@ -28515,13 +28457,6 @@ __metadata: languageName: node linkType: hard -"safe-buffer@npm:5.1.1": - version: 5.1.1 - resolution: "safe-buffer@npm:5.1.1" - checksum: 1c233bd105deeba3c9a8911ed4ec24ba45adbb51fec02f7944a10a202c38e3df4ef2b524bdeb55f2e4f8c77c13b2959e2e2e6022e5d99acdd70633b5f7e138cf - languageName: node - linkType: hard - "safe-buffer@npm:5.1.2, safe-buffer@npm:~5.1.0, safe-buffer@npm:~5.1.1": version: 5.1.2 resolution: "safe-buffer@npm:5.1.2" @@ -28830,19 +28765,6 @@ __metadata: languageName: node linkType: hard -"serve-favicon@npm:^2.5.0": - version: 2.5.0 - resolution: "serve-favicon@npm:2.5.0" - dependencies: - etag: ~1.8.1 - fresh: 0.5.2 - ms: 2.1.1 - parseurl: ~1.3.2 - safe-buffer: 5.1.1 - checksum: 7244ced3c46f8dfde591dc801f1e21ebc8fa07c4870cbbaee3ce37104b3aad32858e674e251a8ed4837867ea0dd67cb734b485ae5a7b0895cb6022f8b8c79303 - languageName: node - linkType: hard - "serve-index@npm:^1.9.1": version: 1.9.1 resolution: "serve-index@npm:1.9.1" diff --git a/docs/configure/styling-and-css.md b/docs/configure/styling-and-css.md index b328359af00f..92ac363e6b47 100644 --- a/docs/configure/styling-and-css.md +++ b/docs/configure/styling-and-css.md @@ -35,6 +35,8 @@ CSS-in-JS libraries are designed to use basic JavaScript, and they often work in If you need webfonts to be available, you may need to add some code to the [`.storybook/preview-head.html`](./story-rendering.md#adding-to-head) file. We recommend including any assets with your Storybook if possible, in which case you likely want to configure the [static file location](./images-and-assets.md#serving-static-files-via-storybook-configuration). + + ## Troubleshooting ### Styles aren't being applied with Angular @@ -56,7 +58,7 @@ The latest Angular releases introduced significant changes in configuring and st } ``` -Additionally, if you need Storybook-specific styles that are separate from your application, you can configure the styles with [Storybook's custom builder](../get-started/install.md), which will override the application's styles: +Additionally, if you need Storybook-specific styles that are separate from your application, you can configure the styles with [Storybook's custom builder](../get-started/install.md#troubleshooting), which will override the application's styles: ```json { @@ -121,3 +123,5 @@ Starting with version `14.1.8`, Nx uses the Storybook builder directly, which me ``` When Nx runs, it will load Storybook's configuration and styling based on [`storybook`'s `browserTarget`](https://nx.dev/storybook/extra-topics-for-angular-projects#setting-up-browsertarget). + + diff --git a/docs/configure/theming.md b/docs/configure/theming.md index 5650ddc9899a..15828905eaab 100644 --- a/docs/configure/theming.md +++ b/docs/configure/theming.md @@ -2,6 +2,8 @@ title: 'Theming' --- + + Storybook is theme-able using a lightweight theming API. ## Global theming diff --git a/docs/snippets/common/storybook-addon-panel-initial.js.mdx b/docs/snippets/common/storybook-addon-panel-initial.js.mdx index 707e8bb199a7..f097d264461a 100644 --- a/docs/snippets/common/storybook-addon-panel-initial.js.mdx +++ b/docs/snippets/common/storybook-addon-panel-initial.js.mdx @@ -3,7 +3,7 @@ import React from 'react'; -import { addons, types } from '@storybook/preview-api'; +import { addons, types } from '@storybook/manager-api'; import { AddonPanel } from '@storybook/components'; diff --git a/docs/snippets/common/storybook-addons-api-usechannel.js.mdx b/docs/snippets/common/storybook-addons-api-usechannel.js.mdx index 0d66a5955350..dd6d238d1c48 100644 --- a/docs/snippets/common/storybook-addons-api-usechannel.js.mdx +++ b/docs/snippets/common/storybook-addons-api-usechannel.js.mdx @@ -7,6 +7,8 @@ import { AddonPanel, Button } from '@storybook/components'; import { STORY_CHANGED } from '@storybook/core-events'; +import { useChannel } from '@storybook/manager-api'; + export const Panel = () => { // Creates a Storybook API channel and subscribes to the STORY_CHANGED event const emit = useChannel({ diff --git a/docs/snippets/common/storybook-auto-docs-mdx-file.mdx.mdx b/docs/snippets/common/storybook-auto-docs-mdx-file.mdx.mdx index 835b3a41372e..499b7f22a570 100644 --- a/docs/snippets/common/storybook-auto-docs-mdx-file.mdx.mdx +++ b/docs/snippets/common/storybook-auto-docs-mdx-file.mdx.mdx @@ -19,7 +19,7 @@ It's often used to apply consistent positioning for content across pages in an a ## Usage - + # List diff --git a/docs/snippets/react/page-story-args-within-story.js.mdx b/docs/snippets/react/page-story-args-within-story.js.mdx new file mode 100644 index 000000000000..282e81f79cf7 --- /dev/null +++ b/docs/snippets/react/page-story-args-within-story.js.mdx @@ -0,0 +1,31 @@ +```js +// my-component/component.stories.js|jsx + +import { useArgs } from '@storybook/preview-api'; +import { Checkbox } from './checkbox'; + +export default { + title: 'Inputs/Checkbox', + component: Checkbox, +}; + +export const Example = { + args: { + isChecked: false, + label: 'Try Me!', + }, + /** + * ๐Ÿ‘‡ To avoid linting issues, it is recommended to use a function with a capitalized name. + * If you are not concerned with linting, you may use an arrow function. + */ + render: function Render(args) { + const [{ isChecked }, updateArgs] = useArgs(); + + function onChange() { + updateArgs({ isChecked: !isChecked }); + } + + return ; + }, +}; +``` diff --git a/docs/snippets/react/page-story-args-within-story.ts-4-9.mdx b/docs/snippets/react/page-story-args-within-story.ts-4-9.mdx new file mode 100644 index 000000000000..5a23cb8f523e --- /dev/null +++ b/docs/snippets/react/page-story-args-within-story.ts-4-9.mdx @@ -0,0 +1,35 @@ +```ts +// my-component/component.stories.ts|tsx + +import { StoryObj, Meta } from '@storybook/react'; +import { useArgs } from '@storybook/preview-api'; +import { Checkbox } from './checkbox'; + +const meta = { + title: 'Inputs/Checkbox', + component: Checkbox, +} satisfies Meta; +export default meta; + +type Story = StoryObj; + +export const Example = { + args: { + isChecked: false, + label: 'Try Me!', + }, + /** + * ๐Ÿ‘‡ To avoid linting issues, it is recommended to use a function with a capitalized name. + * If you are not concerned with linting, you may use an arrow function. + */ + render: function Render(args) { + const [{ isChecked }, updateArgs] = useArgs(); + + function onChange() { + updateArgs({ isChecked: !isChecked }); + } + + return ; + }, +} satisfies Story; +``` diff --git a/docs/snippets/react/page-story-args-within-story.ts.mdx b/docs/snippets/react/page-story-args-within-story.ts.mdx new file mode 100644 index 000000000000..137e37cbf3d6 --- /dev/null +++ b/docs/snippets/react/page-story-args-within-story.ts.mdx @@ -0,0 +1,35 @@ +```ts +// my-component/component.stories.ts|tsx + +import { StoryObj, Meta } from '@storybook/react'; +import { useArgs } from '@storybook/preview-api'; +import { Checkbox } from './checkbox'; + +const meta: Meta = { + title: 'Inputs/Checkbox', + component: Checkbox, +}; +export default meta; + +type Story = StoryObj; + +export const Example: Story = { + args: { + isChecked: false, + label: 'Try Me!', + }, + /** + * ๐Ÿ‘‡ To avoid linting issues, it is recommended to use a function with a capitalized name. + * If you are not concerned with linting, you may use an arrow function. + */ + render: function Render(args) { + const [{ isChecked }, updateArgs] = useArgs(); + + function onChange() { + updateArgs({ isChecked: !isChecked }); + } + + return ; + }, +}; +``` diff --git a/docs/versions/next.json b/docs/versions/next.json index 2995041f2b7a..e6e5140c4079 100644 --- a/docs/versions/next.json +++ b/docs/versions/next.json @@ -1 +1 @@ -{"version":"7.5.0-alpha.3","info":{"plain":"- Build: Filter some manager errors - [#24217](https://github.com/storybookjs/storybook/pull/24217), thanks [@yannbf](https://github.com/yannbf)!\n- Build: Migrate @storybook/addon-backgrounds to strict-ts - [#22178](https://github.com/storybookjs/storybook/pull/22178), thanks [@kasperpeulen](https://github.com/kasperpeulen)!\n- Build: Upgrade chromatic bin package - [#24133](https://github.com/storybookjs/storybook/pull/24133), thanks [@ndelangen](https://github.com/ndelangen)!\n- CLI: Change `/Date$/` to `/Dates$/i` - [#24195](https://github.com/storybookjs/storybook/pull/24195), thanks [@arup1221](https://github.com/arup1221)!\n- CLI: Fix `sb add` adding duplicative entries - [#24229](https://github.com/storybookjs/storybook/pull/24229), thanks [@ndelangen](https://github.com/ndelangen)!\n- Core: Throw an error when critical presets fail to load - [#24176](https://github.com/storybookjs/storybook/pull/24176), thanks [@yannbf](https://github.com/yannbf)!\n- Core: Unify error when builder is missing - [#24177](https://github.com/storybookjs/storybook/pull/24177), thanks [@yannbf](https://github.com/yannbf)!\n- Core: Upgrade `esbuild-register` to `3.5.0` - [#24175](https://github.com/storybookjs/storybook/pull/24175), thanks [@anneau](https://github.com/anneau)!\n- Dependencies: Upgrade `file-system-cache` - [#24232](https://github.com/storybookjs/storybook/pull/24232), thanks [@seriouz](https://github.com/seriouz)!\n- Indexer: Rename `index` to `createIndex` - [#24075](https://github.com/storybookjs/storybook/pull/24075), thanks [@JReinhold](https://github.com/JReinhold)!\n- Maintenance: Regen lockfiles - [#24152](https://github.com/storybookjs/storybook/pull/24152), thanks [@ndelangen](https://github.com/ndelangen)!\n- Manager: Fix useAddonState when using a setter function - [#24237](https://github.com/storybookjs/storybook/pull/24237), thanks [@ndelangen](https://github.com/ndelangen)!\n- NextJS: Add compatibility with nextjs `13.5` - [#24239](https://github.com/storybookjs/storybook/pull/24239), thanks [@ndelangen](https://github.com/ndelangen)!\n- NextJS: Aliases `react` and `react-dom` like `next.js` does - [#23671](https://github.com/storybookjs/storybook/pull/23671), thanks [@sookmax](https://github.com/sookmax)!\n- Nextjs: Improve Google Fonts failure error messages and documentation - [#23891](https://github.com/storybookjs/storybook/pull/23891), thanks [@nsheaps](https://github.com/nsheaps)!\n- Nextjs: Migrate from config to previewAnnotations - [#24178](https://github.com/storybookjs/storybook/pull/24178), thanks [@yannbf](https://github.com/yannbf)!\n- Theming: Add `barHoverColor` - [#20169](https://github.com/storybookjs/storybook/pull/20169), thanks [@julien-deramond](https://github.com/julien-deramond)!\n- Types: Allow `null` in value of `experimental_updateStatus` to clear status - [#24206](https://github.com/storybookjs/storybook/pull/24206), thanks [@ndelangen](https://github.com/ndelangen)!\n- Types: Don't distribute generic type of Meta and Story - [#24110](https://github.com/storybookjs/storybook/pull/24110), thanks [@kasperpeulen](https://github.com/kasperpeulen)!\n- UI: Expand sidebar for selected story when using composition - [#23781](https://github.com/storybookjs/storybook/pull/23781), thanks [@joaonunomota](https://github.com/joaonunomota)!\n- UI: Fix SVG override fill when path has a fill attribute - [#24156](https://github.com/storybookjs/storybook/pull/24156), thanks [@ndelangen](https://github.com/ndelangen)!\n- UI: Fix TreeNode alignment when using a different font - [#22221](https://github.com/storybookjs/storybook/pull/22221), thanks [@bdriguesdev](https://github.com/bdriguesdev)!\n- UI: Fix custom theme hover-color inconsistency - [#22262](https://github.com/storybookjs/storybook/pull/22262), thanks [@yoshi2no](https://github.com/yoshi2no)!\n- UI: Fix keydown shortcut within shadow tree - [#24179](https://github.com/storybookjs/storybook/pull/24179), thanks [@stropitek](https://github.com/stropitek)!\n- UI: Improve look and feel of status UI in sidebar - [#24099](https://github.com/storybookjs/storybook/pull/24099), thanks [@ndelangen](https://github.com/ndelangen)!"}} +{"version":"7.5.0-alpha.4","info":{"plain":"- CLI: Fix Nextjs project detection - [#24346](https://github.com/storybookjs/storybook/pull/24346), thanks [@yannbf](https://github.com/yannbf)!\n- Core: Deprecate `storyStoreV6` (including `storiesOf`) and `storyIndexers` - [#23938](https://github.com/storybookjs/storybook/pull/23938), thanks [@JReinhold](https://github.com/JReinhold)!\n- Core: Fix Promise cycle bug in useSharedState - [#24268](https://github.com/storybookjs/storybook/pull/24268), thanks [@ndelangen](https://github.com/ndelangen)!\n- Core: Fix missing favicon during dev - [#24356](https://github.com/storybookjs/storybook/pull/24356), thanks [@ndelangen](https://github.com/ndelangen)!\n- NextJS: Change babel plugins from `proposal-...` to `transform-...` - [#24290](https://github.com/storybookjs/storybook/pull/24290), thanks [@roottool](https://github.com/roottool)!\n- Nextjs: Improve support for Windows-style paths - [#23695](https://github.com/storybookjs/storybook/pull/23695), thanks [@T99](https://github.com/T99)!\n- UI: Fix infinite hook call causing browsers to freeze - [#24291](https://github.com/storybookjs/storybook/pull/24291), thanks [@yannbf](https://github.com/yannbf)!\n- UI: Improve contrast ratio between focus / hover - [#24205](https://github.com/storybookjs/storybook/pull/24205), thanks [@chocoscoding](https://github.com/chocoscoding)!\n- Vite: Move mdx-plugin from @storybook/builder-vite to @storybook/addon-docs - [#24166](https://github.com/storybookjs/storybook/pull/24166), thanks [@bryanjtc](https://github.com/bryanjtc)!"}} diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md index 807797e5675f..26a61edfb322 100644 --- a/docs/writing-stories/args.md +++ b/docs/writing-stories/args.md @@ -213,6 +213,25 @@ Similarly, special formats are available for dates and colors. Date objects will Args specified through the URL will extend and override any default values of args set on the story. + + +## Setting args from within a story + +Interactive components often need to be controlled by their containing component or page to respond to events, modify their state and reflect those changes in the UI. For example, when a user toggles a switch component, the switch should be checked, and the arg shown in Storybook should reflect the change. To enable this, you can use the `useArgs` API exported by `@storybook/preview-api`: + + + + + + + + + ## Mapping to complex arg values Complex values such as JSX elements cannot be serialized to the manager (e.g., the Controls addon) or synced with the URL. Arg values can be "mapped" from a simple string to a complex type using the `mapping` property in `argTypes` to work around this limitation. It works in any arg but makes the most sense when used with the `select` control type. diff --git a/scripts/package.json b/scripts/package.json index 906bb2b95926..8a1ace601a4d 100644 --- a/scripts/package.json +++ b/scripts/package.json @@ -58,12 +58,12 @@ "dependencies": { "@actions/core": "^1.10.0", "@babel/core": "^7.22.0", - "@babel/plugin-proposal-class-properties": "^7.18.6", "@babel/plugin-proposal-decorators": "^7.22.0", "@babel/plugin-syntax-class-properties": "^7.12.13", "@babel/plugin-syntax-decorators": "^7.22.0", "@babel/plugin-syntax-jsx": "^7.21.0", "@babel/plugin-syntax-typescript": "^7.21.0", + "@babel/plugin-transform-class-properties": "^7.22.5", "@babel/preset-env": "^7.22.0", "@babel/preset-react": "^7.22.0", "@babel/preset-typescript": "^7.21.0", diff --git a/scripts/sandbox/generate.ts b/scripts/sandbox/generate.ts index 0e477b1a6220..22a4eccf4d14 100755 --- a/scripts/sandbox/generate.ts +++ b/scripts/sandbox/generate.ts @@ -125,6 +125,10 @@ const runGenerators = async ( localRegistry = true, debug = false ) => { + if (debug) { + console.log('Debug mode enabled. Verbose logs will be printed to the console.'); + } + console.log(`๐Ÿคนโ€โ™‚๏ธ Generating sandboxes with a concurrency of ${maxConcurrentTasks}`); const limit = pLimit(maxConcurrentTasks); diff --git a/scripts/yarn.lock b/scripts/yarn.lock index ee273eaf2d45..ee865b1b5b66 100644 --- a/scripts/yarn.lock +++ b/scripts/yarn.lock @@ -131,7 +131,7 @@ __metadata: languageName: node linkType: hard -"@babel/helper-create-class-features-plugin@npm:^7.18.6, @babel/helper-create-class-features-plugin@npm:^7.22.11, @babel/helper-create-class-features-plugin@npm:^7.22.15, @babel/helper-create-class-features-plugin@npm:^7.22.5": +"@babel/helper-create-class-features-plugin@npm:^7.22.11, @babel/helper-create-class-features-plugin@npm:^7.22.15, @babel/helper-create-class-features-plugin@npm:^7.22.5": version: 7.22.15 resolution: "@babel/helper-create-class-features-plugin@npm:7.22.15" dependencies: @@ -393,18 +393,6 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-proposal-class-properties@npm:^7.18.6": - version: 7.18.6 - resolution: "@babel/plugin-proposal-class-properties@npm:7.18.6" - dependencies: - "@babel/helper-create-class-features-plugin": ^7.18.6 - "@babel/helper-plugin-utils": ^7.18.6 - peerDependencies: - "@babel/core": ^7.0.0-0 - checksum: d5172ac6c9948cdfc387e94f3493ad86cb04035cf7433f86b5d358270b1b9752dc25e176db0c5d65892a246aca7bdb4636672e15626d7a7de4bc0bd0040168d9 - languageName: node - linkType: hard - "@babel/plugin-proposal-decorators@npm:^7.22.0": version: 7.22.15 resolution: "@babel/plugin-proposal-decorators@npm:7.22.15" @@ -2891,12 +2879,12 @@ __metadata: dependencies: "@actions/core": ^1.10.0 "@babel/core": ^7.22.0 - "@babel/plugin-proposal-class-properties": ^7.18.6 "@babel/plugin-proposal-decorators": ^7.22.0 "@babel/plugin-syntax-class-properties": ^7.12.13 "@babel/plugin-syntax-decorators": ^7.22.0 "@babel/plugin-syntax-jsx": ^7.21.0 "@babel/plugin-syntax-typescript": ^7.21.0 + "@babel/plugin-transform-class-properties": ^7.22.5 "@babel/preset-env": ^7.22.0 "@babel/preset-react": ^7.22.0 "@babel/preset-typescript": ^7.21.0