diff --git a/.circleci/config.yml b/.circleci/config.yml index 617cdac42c2..ee9dee76c72 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 f6ab2f7c822..c20f5491ef3 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 966bf5ce9a5..65162adc174 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 b198f6cba52..cc8636b9d52 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 d7c47af924b..1708f26a3db 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 c00661fe967..02cd1a5a525 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 8e4b51f16d6..82f754fd3cd 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 2adfe2e0e2b..22b5834c9e9 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 ce558232654..ad90bd41016 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 bccebbdb483..68e540908dc 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 a832f2e92a9..75778971b26 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 a9142100cf8..394a6fbb502 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 08a6c18e431..46dddd1d165 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 20e1df8deeb..006c7f126f5 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 25c058dee81..05c64b40242 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 69e858f1d14..799de8e593e 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 8c10b00e73e..c249bc634c3 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 8782337a6db..55dc59fbaac 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 4619caf29e7..1e8de546880 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 7b03427729d..0f847b8917a 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 b2d5a5e3cbc..19d569cfcc0 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 5b7b15ec6c6..51ad2048247 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 bb7fe0e5ec6..951dc494a93 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 03157875c85..5f60c0e812d 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 45d94e585eb..0f2a9f54c27 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 8ee01b07e83..4f0838bba05 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 386254893d9..807ed23fcac 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 31ea19fd754..f96a8722e9d 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 c347c91c99c..af6301afc76 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 b328359af00..92ac363e6b4 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 5650ddc9899..15828905eaa 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 707e8bb199a..f097d264461 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 0d66a595535..dd6d238d1c4 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 835b3a41372..499b7f22a57 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 00000000000..282e81f79cf --- /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 00000000000..5a23cb8f523 --- /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 00000000000..137e37cbf3d --- /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 2995041f2b7..e6e5140c407 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 807797e5675..26a61edfb32 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 906bb2b9592..8a1ace601a4 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 0e477b1a622..22a4eccf4d1 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 ee273eaf2d4..ee865b1b5b6 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