diff --git a/.circleci/config.yml b/.circleci/config.yml index b212c825ddc2..c1871d2eba22 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -410,7 +410,7 @@ jobs: parallelism: type: integer executor: - class: medium + class: large name: sb_playwright parallelism: << parameters.parallelism >> steps: @@ -433,7 +433,7 @@ jobs: parallelism: type: integer executor: - class: medium + class: large name: sb_playwright parallelism: << parameters.parallelism >> steps: diff --git a/CHANGELOG.md b/CHANGELOG.md index ee61820d6939..8a70cafb01a6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,8 @@ +## 7.6.11 + +- CLI: Update init for react native v7 - [#25780](https://github.com/storybookjs/storybook/pull/25780), thanks [@dannyhw](https://github.com/dannyhw)! +- Codemods: Add support for multiple file extensions in runCodemod function - [#25708](https://github.com/storybookjs/storybook/pull/25708), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! + ## 7.6.10 - CLI: Fix existing version detection in `upgrade` - [#25642](https://github.com/storybookjs/storybook/pull/25642), thanks [@JReinhold](https://github.com/JReinhold)! diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md index a8b97f0cc0eb..0ee045065da6 100644 --- a/CHANGELOG.prerelease.md +++ b/CHANGELOG.prerelease.md @@ -1,3 +1,17 @@ +## 8.0.0-alpha.16 + +- CLI: Fix `upgrade` detecting the wrong version of existing Storybooks - [#25752](https://github.com/storybookjs/storybook/pull/25752), thanks [@JReinhold](https://github.com/JReinhold)! +- CLI: Update init for react native v7 - [#25780](https://github.com/storybookjs/storybook/pull/25780), thanks [@dannyhw](https://github.com/dannyhw)! +- UI: Improve how the addon panel work on mobile - [#25787](https://github.com/storybookjs/storybook/pull/25787), thanks [@cdedreuille](https://github.com/cdedreuille)! + +## 8.0.0-alpha.15 + +- Next.js: Add logger statements for compiler selection - [#25755](https://github.com/storybookjs/storybook/pull/25755), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! +- React-Native: Fixes for v8 compatibility - [#25678](https://github.com/storybookjs/storybook/pull/25678), thanks [@shilman](https://github.com/shilman)! +- UI: Remove use of React.FC in components - [#25588](https://github.com/storybookjs/storybook/pull/25588), thanks [@ShaunEvening](https://github.com/ShaunEvening)! +- Vue3: Fix support for `onX` and empty attributes in Show Code - [#25219](https://github.com/storybookjs/storybook/pull/25219), thanks [@Tap-Kim](https://github.com/Tap-Kim)! +- Vue3: Introduce portable stories API - [#25443](https://github.com/storybookjs/storybook/pull/25443), thanks [@yannbf](https://github.com/yannbf)! + ## 8.0.0-alpha.14 - Addons: Remove Node.js internal aliasing for Node builds - [#25712](https://github.com/storybookjs/storybook/pull/25712), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! diff --git a/CODEOWNERS b/CODEOWNERS index 2e23565e1f5a..9d8ca4f6c5b9 100644 --- a/CODEOWNERS +++ b/CODEOWNERS @@ -1,97 +1,97 @@ # Code Owners # Root -.github/ @JReinhold @yannbf @vanessayuenn -.circleci/ @yannbf @kasperpeulen -.yarnrc.yml @ndelangen @JReinhold +# .github/ @JReinhold @yannbf @vanessayuenn +# .circleci/ @yannbf @kasperpeulen +# .yarnrc.yml @ndelangen @JReinhold # Docs -/docs/ @kylegach @jonniebigodes +# /docs/ @kylegach @jonniebigodes # Scripts -/scripts/ @ndelangen @kasperpeulen -/scripts/release/ @jreinhold @ndelangen @kasperpeulen +# /scripts/ @ndelangen @kasperpeulen +# /scripts/release/ @jreinhold @ndelangen @kasperpeulen # Addons -/code/addons/a11y/ @ndelangen @yannbf -/code/addons/actions/ @ndelangen @yannbf -/code/addons/backgrounds/ @yannbf @ndelangen -/code/addons/controls/ @kasperpeulen @ndelangen -/code/addons/docs/ @JReinhold @kasperpeulen -/code/addons/essentials/ @valentinpalkovic @ndelangen -/code/addons/gfm/ @ndelangen @valentinpalkovic -/code/addons/highlight/ @yannbf @valentinpalkovic -/code/addons/interactions/ @yannbf @ndelangen -/code/addons/jest/ @ndelangen -/code/addons/links/ @yannbf @JReinhold -/code/addons/measure/ @yannbf @valentinpalkovic -/code/addons/outline/ @yannbf @valentinpalkovic -/code/addons/storysource/ @ndelangen -/code/addons/themes/ @JReinhold @Integrayshaun -/code/addons/toolbars/ @ndelangen @JReinhold -/code/addons/viewport/ @yannbf @ndelangen +# /code/addons/a11y/ @ndelangen @yannbf +# /code/addons/actions/ @ndelangen @yannbf +# /code/addons/backgrounds/ @yannbf @ndelangen +# /code/addons/controls/ @kasperpeulen @ndelangen +# /code/addons/docs/ @JReinhold @kasperpeulen +# /code/addons/essentials/ @valentinpalkovic @ndelangen +# /code/addons/gfm/ @ndelangen @valentinpalkovic +# /code/addons/highlight/ @yannbf @valentinpalkovic +# /code/addons/interactions/ @yannbf @ndelangen +# /code/addons/jest/ @ndelangen +# /code/addons/links/ @yannbf @JReinhold +# /code/addons/measure/ @yannbf @valentinpalkovic +# /code/addons/outline/ @yannbf @valentinpalkovic +# /code/addons/storysource/ @ndelangen +# /code/addons/themes/ @JReinhold @yannbf +# /code/addons/toolbars/ @ndelangen @JReinhold +# /code/addons/viewport/ @yannbf @ndelangen # Builder -/code/builders/builder-manager/ @ndelangen @valentinpalkovic -/code/builders/builder-vite/ @JReinhold @valentinpalkovic @IanVS -/code/builders/builder-webpack5/ @ndelangen @valentinpalkovic +# /code/builders/builder-manager/ @ndelangen @valentinpalkovic +# /code/builders/builder-vite/ @JReinhold @valentinpalkovic @IanVS +# /code/builders/builder-webpack5/ @ndelangen @valentinpalkovic # Frameworks -/code/frameworks/angular/ @valentinpalkovic @yannbf -/code/frameworks/html-vite/ @kasperpeulen @JReinhold -/code/frameworks/html-webpack5/ @kasperpeulen @JReinhold -/code/frameworks/nextjs/ @valentinpalkovic @kasperpeulen @yannbf -/code/frameworks/react-vite/ @valentinpalkovic @kasperpeulen -/code/frameworks/react-webpack5/ @valentinpalkovic @kasperpeulen -/code/frameworks/svelte-vite/ @kasperpeulen @JReinhold -/code/frameworks/svelte-webpack5/ @kasperpeulen @JReinhold -/code/frameworks/sveltekit/ @kasperpeulen @JReinhold -/code/frameworks/vue3-vite/ @kasperpeulen @yannbf @JReinhold -/code/frameworks/vue3-webpack5/ @kasperpeulen @yannbf @JReinhold -/code/frameworks/web-components-vite/ @kasperpeulen @JReinhold -/code/frameworks/web-components-webpack5/ @kasperpeulen @JReinhold +# /code/frameworks/angular/ @valentinpalkovic @yannbf +# /code/frameworks/html-vite/ @kasperpeulen @JReinhold +# /code/frameworks/html-webpack5/ @kasperpeulen @JReinhold +# /code/frameworks/nextjs/ @valentinpalkovic @kasperpeulen @yannbf +# /code/frameworks/react-vite/ @valentinpalkovic @kasperpeulen +# /code/frameworks/react-webpack5/ @valentinpalkovic @kasperpeulen +# /code/frameworks/svelte-vite/ @kasperpeulen @JReinhold +# /code/frameworks/svelte-webpack5/ @kasperpeulen @JReinhold +# /code/frameworks/sveltekit/ @kasperpeulen @JReinhold +# /code/frameworks/vue3-vite/ @kasperpeulen @yannbf @JReinhold +# /code/frameworks/vue3-webpack5/ @kasperpeulen @yannbf @JReinhold +# /code/frameworks/web-components-vite/ @kasperpeulen @JReinhold +# /code/frameworks/web-components-webpack5/ @kasperpeulen @JReinhold # Lib -/code/lib/channels/ @ndelangen @kasperpeulen -/code/lib/cli/ @yannbf @valentinpalkovic @ndelangen -/code/lib/cli-sb/ @yannbf @valentinpalkovic @ndelangen -/code/lib/cli-storybook/ @yannbf @valentinpalkovic @ndelangen -/code/lib/client-logger/ @ndelangen @yannbf -/code/lib/codemod/ @kasperpeulen @ndelangen -/code/lib/core-common/ @ndelangen @yannbf -/code/lib/core-events/ @ndelangen @kasperpeulen -/code/lib/core-server/ @ndelangen @JReinhold @tmeasday @shilman -/code/lib/core-webpack/ @valentinpalkovic @ndelangen -/code/lib/csf-plugin/ @ndelangen @valentinpalkovic -/code/lib/csf-tools/ @kasperpeulen @shilman -/code/lib/docs-tools/ @JReinhold @shilman -/code/lib/instrumenter/ @yannbf @kasperpeulen -/code/lib/manager-api/ @ndelangen @valentinpalkovic @kasperpeulen -/code/lib/node-logger/ @yannbf @ndelangen -/code/lib/preview/ @ndelangen @kasperpeulen -/code/lib/preview-api/ @yannbf @ndelangen @tmeasday -/code/lib/react-dom-shim/ @ndelangen @valentinpalkovic @tmeasday -/code/lib/router/ @ndelangen @JReinhold -/code/lib/telemetry/ @shilman @yannbf @ndelangen -/code/lib/theming/ @cdedreuille @ndelangen @JReinhold -/code/lib/types/ @kasperpeulen @ndelangen +# /code/lib/channels/ @ndelangen @kasperpeulen +# /code/lib/cli/ @yannbf @valentinpalkovic @ndelangen +# /code/lib/cli-sb/ @yannbf @valentinpalkovic @ndelangen +# /code/lib/cli-storybook/ @yannbf @valentinpalkovic @ndelangen +# /code/lib/client-logger/ @ndelangen @yannbf +# /code/lib/codemod/ @kasperpeulen @ndelangen +# /code/lib/core-common/ @ndelangen @yannbf +# /code/lib/core-events/ @ndelangen @kasperpeulen +# /code/lib/core-server/ @ndelangen @JReinhold @tmeasday @shilman +# /code/lib/core-webpack/ @valentinpalkovic @ndelangen +# /code/lib/csf-plugin/ @ndelangen @valentinpalkovic +# /code/lib/csf-tools/ @kasperpeulen @shilman +# /code/lib/docs-tools/ @JReinhold @shilman +# /code/lib/instrumenter/ @yannbf @kasperpeulen +# /code/lib/manager-api/ @ndelangen @valentinpalkovic @kasperpeulen +# /code/lib/node-logger/ @yannbf @ndelangen +# /code/lib/preview/ @ndelangen @kasperpeulen +# /code/lib/preview-api/ @yannbf @ndelangen @tmeasday +# /code/lib/react-dom-shim/ @ndelangen @valentinpalkovic @tmeasday +# /code/lib/router/ @ndelangen @JReinhold +# /code/lib/telemetry/ @shilman @yannbf @ndelangen +# /code/lib/theming/ @cdedreuille @ndelangen @JReinhold +# /code/lib/types/ @kasperpeulen @ndelangen # Presets -/code/presets/create-react-app/ @valentinpalkovic @ndelangen +# /code/presets/create-react-app/ @valentinpalkovic @ndelangen # Renderers -/code/renderers/html/ @kasperpeulen @JReinhold -/code/renderers/react/ @valentinpalkovic @kasperpeulen -/code/renderers/server/ @shilman @valentinpalkovic -/code/renderers/svelte/ @JReinhold @kasperpeulen -/code/renderers/vue3/ @kasperpeulen @JReinhold -/code/renderers/web-components/ @kasperpeulen @JReinhold +# /code/renderers/html/ @kasperpeulen @JReinhold +# /code/renderers/react/ @valentinpalkovic @kasperpeulen +# /code/renderers/server/ @shilman @valentinpalkovic +# /code/renderers/svelte/ @JReinhold @kasperpeulen +# /code/renderers/vue3/ @kasperpeulen @JReinhold +# /code/renderers/web-components/ @kasperpeulen @JReinhold # UI -/code/ui/.storybook/ @JReinhold @cdedreuille -/code/ui/blocks/ @JReinhold @cdedreuille -/code/ui/components/ @cdedreuille @JReinhold -/code/ui/manager/ @ndelangen @JReinhold @cdedreuille @tmeasday +# /code/ui/.storybook/ @JReinhold @cdedreuille +# /code/ui/blocks/ @JReinhold @cdedreuille +# /code/ui/components/ @cdedreuille @JReinhold +# /code/ui/manager/ @ndelangen @JReinhold @cdedreuille @tmeasday # E2E -/code/e2e-tests/ @yannbf @valentinpalkovic +# /code/e2e-tests/ @yannbf @valentinpalkovic diff --git a/LICENSE b/LICENSE index c9c6515841ac..c471193f579c 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ The MIT License (MIT) -Copyright (c) 2017 Kadira Inc. +Copyright (c) 2024 Storybook Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/MIGRATION.md b/MIGRATION.md index 80bf3ba15556..6cc5bb0377fb 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -20,7 +20,6 @@ - [Dropping support for Yarn 1](#dropping-support-for-yarn-1) - [Dropping support for Node.js 16](#dropping-support-for-nodejs-16) - [Autotitle breaking fixes](#autotitle-breaking-fixes) - - [React v18 in the manager UI (including addons)](#react-v18-in-the-manager-ui-including-addons) - [Storyshots has been removed](#storyshots-has-been-removed) - [UI layout state has changed shape](#ui-layout-state-has-changed-shape) - [New UI and props for Button and IconButton components](#new-ui-and-props-for-button-and-iconbutton-components) @@ -28,6 +27,7 @@ - [Removed postinstall](#removed-postinstall) - [Removed stories.json](#removed-storiesjson) - [Removed `sb babelrc` command](#removed-sb-babelrc-command) + - [Changed interfaces for `@storybook/router` components](#changed-interfaces-for-storybookrouter-components) - [Framework-specific changes](#framework-specific-changes) - [React](#react) - [`react-docgen` component analysis by default](#react-docgen-component-analysis-by-default) @@ -670,13 +670,6 @@ export default { Alternatively, if you need to achieve a different behavior for a large number of files, you can provide a [custom indexer](https://storybook.js.org/docs/7.0/vue/configure/sidebar-and-urls#processing-custom-titles) to generate the titles dynamically. -#### React v18 in the manager UI (including addons) - -Storybook 7 used React 16 in the manager. In Storybook 8 this is upgraded to react v18. -Addons that inject UI into panels, tools, etc. are possibly affected by this. - -Addon authors are advised to upgrade to react v18. - #### Storyshots has been removed Storyshots was an addon for Storybook which allowed users to turn their stories into automated snapshot tests. @@ -746,6 +739,10 @@ From version 8.0 onwards, Storybook is compiler-agnostic and does not depend on The reasoning behind is to condense and provide some clarity to what's happened to both the command and what's shifted with the upcoming release. +#### Changed interfaces for `@storybook/router` components + +The `hideOnly` prop has been removed from the `` component in `@storybook/router`. If needed this can be implemented manually with the `` component. + ### Framework-specific changes #### React diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index d7b62b1a5453..a8ad72034ac0 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-a11y", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Test component compliance with web accessibility standards", "keywords": [ "a11y", diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json index 270f6fc98b75..38f7850bdb59 100644 --- a/code/addons/actions/package.json +++ b/code/addons/actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-actions", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Get UI feedback when an action is performed on an interactive element", "keywords": [ "storybook", diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json index f0fc060dafee..fe96ed8b3ccf 100644 --- a/code/addons/backgrounds/package.json +++ b/code/addons/backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-backgrounds", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Switch backgrounds to view components in different settings", "keywords": [ "addon", diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json index 597ad2d024b9..7a1fe211bc28 100644 --- a/code/addons/controls/package.json +++ b/code/addons/controls/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-controls", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Interact with component inputs dynamically in the Storybook UI", "keywords": [ "addon", diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index b4761cd9c3fa..29138ca6ee78 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-docs", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Document component usage and properties in Markdown", "keywords": [ "addon", diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json index 96d8a6f957d3..643fea2719a0 100644 --- a/code/addons/essentials/package.json +++ b/code/addons/essentials/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-essentials", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Curated addons to bring out the best of Storybook", "keywords": [ "addon", diff --git a/code/addons/gfm/package.json b/code/addons/gfm/package.json index 29ee26d1bf1c..ee3dc9798c2a 100644 --- a/code/addons/gfm/package.json +++ b/code/addons/gfm/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-mdx-gfm", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "GitHub Flavored Markdown in Storybook", "keywords": [ "addon", diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json index 99b810ef63f6..c59398357215 100644 --- a/code/addons/highlight/package.json +++ b/code/addons/highlight/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-highlight", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Highlight DOM nodes within your stories", "keywords": [ "storybook-addons", diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json index baee8fe137ec..0d4de3d9b837 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-interactions", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Automate, test and debug user interactions", "keywords": [ "storybook-addons", diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json index d8dec2b2247e..3ebea532c4cd 100644 --- a/code/addons/jest/package.json +++ b/code/addons/jest/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-jest", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "React storybook addon that show component jest report", "keywords": [ "addon", diff --git a/code/addons/links/package.json b/code/addons/links/package.json index e29e3c6240ac..71f1fee7f669 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-links", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Link stories together to build demos and prototypes with your UI components", "keywords": [ "addon", diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json index d14b89648347..14853aac95e3 100644 --- a/code/addons/measure/package.json +++ b/code/addons/measure/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-measure", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Inspect layouts by visualizing the box model", "keywords": [ "storybook-addons", diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json index 7fea734388a8..fcd19d3cf76b 100644 --- a/code/addons/outline/package.json +++ b/code/addons/outline/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-outline", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Outline all elements with CSS to help with layout placement and alignment", "keywords": [ "storybook-addons", diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json index db977540dd91..d102b96b4ba1 100644 --- a/code/addons/storysource/package.json +++ b/code/addons/storysource/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storysource", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "View a story’s source code to see how it works and paste into your app", "keywords": [ "addon", diff --git a/code/addons/themes/README.md b/code/addons/themes/README.md index 55bc748fd48f..c529f8a60258 100644 --- a/code/addons/themes/README.md +++ b/code/addons/themes/README.md @@ -27,6 +27,7 @@ For tool-specific setup, check out the recipes below - [`@emotion/styled`](https://github.com/storybookjs/storybook/tree/next/code/addons/themes/docs/getting-started/emotion.md) - [`@mui/material`](https://github.com/storybookjs/storybook/tree/next/code/addons/themes/docs/getting-started/material-ui.md) - [`bootstrap`](https://github.com/storybookjs/storybook/tree/next/code/addons/themes/docs/getting-started/bootstrap.md) +- [`postcss`](https://github.com/storybookjs/storybook/tree/next/code/addons/themes/docs/getting-started/postcss.md) - [`styled-components`](https://github.com/storybookjs/storybook/tree/next/code/addons/themes/docs/getting-started/styled-components.md) - [`tailwind`](https://github.com/storybookjs/storybook/tree/next/code/addons/themes/docs/getting-started/tailwind.md) - [`vuetify@3.x`](https://github.com/storybookjs/storybook/blob/next/code/addons/themes/docs/api.md#writing-a-custom-decorator) diff --git a/code/addons/themes/docs/getting-started/postcss.md b/code/addons/themes/docs/getting-started/postcss.md new file mode 100644 index 000000000000..d6ce1c8f02b1 --- /dev/null +++ b/code/addons/themes/docs/getting-started/postcss.md @@ -0,0 +1,114 @@ +# 🏁 Getting started with `postcss` + +## 📦 Install addon + +To get started, **install the package** as a dev dependency + +yarn: + +```zsh +yarn add -D @storybook/addon-themes postcss-dark-theme-class +``` + +npm: + +```zsh +npm install -D @storybook/addon-themes postcss-dark-theme-class +``` + +pnpm: + +```zsh +pnpm add -D @storybook/addon-themes postcss-dark-theme-class +``` + +## 🧩 Register Addon + +Now, **include the addon** in your `.storybook/main.js` file. + +```diff +module.exports = { + stories: [ + "../stories/**/*.stories.mdx", + "../stories/**/*.stories.@(js|jsx|ts|tsx)", + ], + addons: [ + "@storybook/addon-essentials", ++ "@storybook/addon-themes" + ], +}; +``` + +## 🏷️ Add class to `prefers-color-scheme` media + +CSS has special media at-rule for dark theme: `@media (prefers-color-scheme: dark)`. [`postcss-dark-theme-class`](https://github.com/postcss/postcss-dark-theme-class) can copy content of those at-rules to `.is-dark` selector. + +Check your project for existing PostCSS config: `postcss.config.js` in the project root, `"postcss"` section in `package.json` or postcss in bundle config. + +Add plugin to the list. + +```diff +module.exports = { + plugins: [ ++ require('postcss-dark-theme-class'), + require('autoprefixer') + ] +} +``` + +Use `prefers-color-scheme` media in your CSS: + +```css +:root { + --text-color: black; +} +@media (prefers-color-scheme: dark) { + html { + --text-color: white; + } +} +``` + +## 🥾 Import your CSS + +To give your stories access to styles, import them into your `.storybook/preview.js` file. + +```diff +import { Preview } from "@storybook/your-renderer"; + ++import "../src/index.css"; + +const preview: Preview = { + parameters: { /* ... */ }, +}; + +export default preview; +``` + +## 🎨 Provide your theme(s) + +To enable switching between these modes in a click for your stories, use our `withThemeByClassName` decorator by adding the following code to your `.storybook/preview.js` file. + +```diff +-import { Preview } from "@storybook/your-renderer"; ++import { Preview, Renderer } from "@storybook/your-renderer"; ++import { withThemeByClassName } from "@storybook/addon-themes"; + +import "../src/index.css"; + + +const preview: Preview = { + parameters: { /* ... */ }, ++ decorators: [ ++ withThemeByClassName({ ++ themes: { ++ light: "is-light", ++ dark: "is-dark", ++ }, ++ defaultTheme: "light", ++ }), ++ ] +}; + +export default preview; +``` diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json index d4144403b3d7..6b8a24779504 100644 --- a/code/addons/themes/package.json +++ b/code/addons/themes/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-themes", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Switch between multiple themes for you components in Storybook", "keywords": [ "css", diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json index 984be3601c09..d71c88ede0a6 100644 --- a/code/addons/toolbars/package.json +++ b/code/addons/toolbars/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-toolbars", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Create your own toolbar items that control story rendering", "keywords": [ "addon", diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json index 183ecc333360..4e78026fa82c 100644 --- a/code/addons/viewport/package.json +++ b/code/addons/viewport/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-viewport", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Build responsive components by adjusting Storybook’s viewport size and orientation", "keywords": [ "addon", diff --git a/code/builders/builder-manager/package.json b/code/builders/builder-manager/package.json index 9305f386d391..2e50b786aa1c 100644 --- a/code/builders/builder-manager/package.json +++ b/code/builders/builder-manager/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-manager", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Storybook manager builder", "keywords": [ "storybook" diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json index 9bc5d4e39117..bb1ea32784bb 100644 --- a/code/builders/builder-vite/package.json +++ b/code/builders/builder-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-vite", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "A plugin to run and build Storybooks with Vite", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme", "bugs": { diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json index 0c66f57f9d2f..9c3c8711668c 100644 --- a/code/builders/builder-webpack5/package.json +++ b/code/builders/builder-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-webpack5", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json index b0f5b21b06a4..207a09c65148 100644 --- a/code/frameworks/angular/package.json +++ b/code/frameworks/angular/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/angular", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.", "keywords": [ "storybook", diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json index 124ec124dacf..5449419c825a 100644 --- a/code/frameworks/ember/package.json +++ b/code/frameworks/ember/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/ember", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember", "bugs": { diff --git a/code/frameworks/html-vite/package.json b/code/frameworks/html-vite/package.json index c3c7a63d22df..8b1b9c301888 100644 --- a/code/frameworks/html-vite/package.json +++ b/code/frameworks/html-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-vite", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Storybook for HTML and Vite: Develop HTML in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/html-webpack5/package.json b/code/frameworks/html-webpack5/package.json index f8fe53d77324..cc95b762b34b 100644 --- a/code/frameworks/html-webpack5/package.json +++ b/code/frameworks/html-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-webpack5", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 9e6b47510a25..7922773e700a 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/nextjs", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Storybook for Next.js", "keywords": [ "storybook", diff --git a/code/frameworks/nextjs/src/preset.ts b/code/frameworks/nextjs/src/preset.ts index 95f4cc062702..e9b503e35422 100644 --- a/code/frameworks/nextjs/src/preset.ts +++ b/code/frameworks/nextjs/src/preset.ts @@ -22,6 +22,7 @@ import { configureSWCLoader } from './swc/loader'; import { configureBabelLoader } from './babel/loader'; import { configureFastRefresh } from './fastRefresh/webpack'; import { configureAliases } from './aliases/webpack'; +import { logger } from '@storybook/node-logger'; export const addons: PresetProperty<'addons'> = [ dirname(require.resolve(join('@storybook/preset-react-webpack', 'package.json'))), @@ -173,8 +174,10 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig, } if (useSWC) { + logger.info('=> Using SWC as compiler'); await configureSWCLoader(baseConfig, options, nextConfig); } else { + logger.info('=> Using Babel as compiler'); await configureBabelLoader(baseConfig, options); } diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json index 8605bc189eba..4980a400f1c7 100644 --- a/code/frameworks/preact-vite/package.json +++ b/code/frameworks/preact-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact-vite", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Storybook for Preact and Vite: Develop Preact components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/preact-webpack5/package.json b/code/frameworks/preact-webpack5/package.json index 0d8e9d2f2a5c..c59ac6f666b6 100644 --- a/code/frameworks/preact-webpack5/package.json +++ b/code/frameworks/preact-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact-webpack5", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index 9ae743be5470..942e049fbc91 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-vite", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json index 3a8d9b09aec5..21e3da26a23e 100644 --- a/code/frameworks/react-webpack5/package.json +++ b/code/frameworks/react-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-webpack5", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/server-webpack5/package.json b/code/frameworks/server-webpack5/package.json index 0e5561ab04bf..7ea776d3a43f 100644 --- a/code/frameworks/server-webpack5/package.json +++ b/code/frameworks/server-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server-webpack5", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index d1391358bc56..016711055012 100644 --- a/code/frameworks/svelte-vite/package.json +++ b/code/frameworks/svelte-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte-vite", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/svelte-webpack5/package.json b/code/frameworks/svelte-webpack5/package.json index 1e32afae93d3..1b847b1871fa 100644 --- a/code/frameworks/svelte-webpack5/package.json +++ b/code/frameworks/svelte-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte-webpack5", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json index 1ba8bcff5e98..99b52eee278d 100644 --- a/code/frameworks/sveltekit/package.json +++ b/code/frameworks/sveltekit/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/sveltekit", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Storybook for SvelteKit", "keywords": [ "storybook", diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json index e5922548a23b..b482e6734cd5 100644 --- a/code/frameworks/vue3-vite/package.json +++ b/code/frameworks/vue3-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3-vite", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/vue3-webpack5/package.json b/code/frameworks/vue3-webpack5/package.json index 8a9d0375799a..0f4a2790ac62 100644 --- a/code/frameworks/vue3-webpack5/package.json +++ b/code/frameworks/vue3-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3-webpack5", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json index f91bf52c9946..dce19399ba37 100644 --- a/code/frameworks/web-components-vite/package.json +++ b/code/frameworks/web-components-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components-vite", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Storybook for web-components and Vite: Develop Web Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/web-components-webpack5/package.json b/code/frameworks/web-components-webpack5/package.json index 802a1039fc92..75ca0b042ee1 100644 --- a/code/frameworks/web-components-webpack5/package.json +++ b/code/frameworks/web-components-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components-webpack5", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.", "keywords": [ "lit", diff --git a/code/lib/channels/package.json b/code/lib/channels/package.json index a56012a8a4e9..c64fbe3487d2 100644 --- a/code/lib/channels/package.json +++ b/code/lib/channels/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channels", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "", "keywords": [ "storybook" diff --git a/code/lib/cli-sb/package.json b/code/lib/cli-sb/package.json index 15a4797705b6..5650a9bdd0ff 100644 --- a/code/lib/cli-sb/package.json +++ b/code/lib/cli-sb/package.json @@ -1,6 +1,6 @@ { "name": "sb", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Storybook CLI", "keywords": [ "storybook" diff --git a/code/lib/cli-storybook/package.json b/code/lib/cli-storybook/package.json index 72c6b5dfc0d7..e7dd270aa25d 100644 --- a/code/lib/cli-storybook/package.json +++ b/code/lib/cli-storybook/package.json @@ -1,6 +1,6 @@ { "name": "storybook", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Storybook CLI", "keywords": [ "storybook" diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json index 33291279a2b7..b1e10914494f 100644 --- a/code/lib/cli/package.json +++ b/code/lib/cli/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/cli", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Storybook's CLI - install, dev, build, upgrade, and more", "keywords": [ "cli", diff --git a/code/lib/cli/src/generators/REACT_NATIVE/index.ts b/code/lib/cli/src/generators/REACT_NATIVE/index.ts index a77878dcc191..94724ba1af59 100644 --- a/code/lib/cli/src/generators/REACT_NATIVE/index.ts +++ b/code/lib/cli/src/generators/REACT_NATIVE/index.ts @@ -11,6 +11,7 @@ const generator = async ( const missingReactDom = !packageJson.dependencies['react-dom'] && !packageJson.devDependencies['react-dom']; + const reactVersion = packageJson.dependencies.react; const packagesToResolve = [ @@ -24,25 +25,26 @@ const generator = async ( '@storybook/react-native', ]; - // change these to latest version once v6 stable is released - const packagesWithFixedVersion = [ - '@storybook/addon-actions@^6.5.16', - '@storybook/addon-controls@^6.5.16', - ]; + const packagesWithFixedVersion: string[] = []; const versionedPackages = await packageManager.getVersionedPackages(packagesToResolve); const babelDependencies = await getBabelDependencies(packageManager, packageJson); const packages: string[] = []; + packages.push(...babelDependencies); + packages.push(...packagesWithFixedVersion); + packages.push(...versionedPackages); + if (missingReactDom && reactVersion) { packages.push(`react-dom@${reactVersion}`); } await packageManager.addDependencies({ ...npmOptions, packageJson }, packages); + packageManager.addScripts({ 'storybook-generate': 'sb-rn-get-stories', 'storybook-watch': 'sb-rn-watcher', @@ -53,7 +55,7 @@ const generator = async ( await copyTemplateFiles({ packageManager, renderer: 'react-native', - language: SupportedLanguage.JAVASCRIPT, + language: SupportedLanguage.TYPESCRIPT_3_8, destination: storybookConfigFolder, includeCommonAssets: false, }); diff --git a/code/lib/cli/src/initiate.ts b/code/lib/cli/src/initiate.ts index 54321ccb96a9..703002ec7cca 100644 --- a/code/lib/cli/src/initiate.ts +++ b/code/lib/cli/src/initiate.ts @@ -9,7 +9,6 @@ import { HandledError, JsPackageManagerFactory, commandLog, - codeLog, paddedLog, } from '@storybook/core-common'; import type { JsPackageManager } from '@storybook/core-common'; @@ -347,15 +346,25 @@ export async function doInitiate( } if (projectType === ProjectType.REACT_NATIVE) { - logger.log(); - logger.log(chalk.yellow('NOTE: installation is not 100% automated.\n')); - logger.log(`To quickly run Storybook, replace contents of your app entry with:\n`); - codeLog(["export {default} from './.storybook';"]); - logger.log('\n Then to run your Storybook, type:\n'); - codeLog([packageManager.getRunCommand('start')]); - logger.log('\n For more in information, see the github readme:\n'); - logger.log(chalk.cyan('https://github.com/storybookjs/react-native')); - logger.log(); + logger.log(dedent` + ${chalk.yellow('NOTE: installation is not 100% automated.')} + + To run Storybook, you will need to: + + 1. Replace the contents of your app entry with the following + + ${chalk.inverse(' ' + "export {default} from './.storybook';" + ' ')} + + 2. Enable transformer.unstable_allowRequireContext in your metro config + + For a more detailed guide go to: + ${chalk.cyan('https://github.com/storybookjs/react-native#existing-project')} + + Then to run your Storybook, type: + + ${chalk.inverse(' ' + packageManager.getRunCommand('start') + ' ')} + + `); return { shouldRunDev: false }; } diff --git a/code/lib/cli/src/upgrade.test.ts b/code/lib/cli/src/upgrade.test.ts index 3987b9b35789..149951460724 100644 --- a/code/lib/cli/src/upgrade.test.ts +++ b/code/lib/cli/src/upgrade.test.ts @@ -1,5 +1,4 @@ import { describe, it, expect, vi } from 'vitest'; -import { getStorybookCoreVersion } from '@storybook/telemetry'; import { UpgradeStorybookToLowerVersionError, UpgradeStorybookToSameVersionError, @@ -8,11 +7,18 @@ import { doUpgrade, getStorybookVersion } from './upgrade'; import type * as sbcc from '@storybook/core-common'; +const findInstallationsMock = vi.fn>(); + vi.mock('@storybook/telemetry'); vi.mock('@storybook/core-common', async (importOriginal) => { const originalModule = (await importOriginal()) as typeof sbcc; return { ...originalModule, + JsPackageManagerFactory: { + getPackageManager: () => ({ + findInstallations: findInstallationsMock, + }), + }, versions: Object.keys(originalModule.versions).reduce( (acc, key) => { acc[key] = '8.0.0'; @@ -46,13 +52,37 @@ describe.each([ describe('Upgrade errors', () => { it('should throw an error when upgrading to a lower version number', async () => { - vi.mocked(getStorybookCoreVersion).mockResolvedValue('8.1.0'); + findInstallationsMock.mockResolvedValue({ + dependencies: { + '@storybook/cli': [ + { + version: '8.1.0', + }, + ], + }, + duplicatedDependencies: {}, + infoCommand: '', + dedupeCommand: '', + }); await expect(doUpgrade({} as any)).rejects.toThrowError(UpgradeStorybookToLowerVersionError); + expect(findInstallationsMock).toHaveBeenCalledWith(['storybook', '@storybook/cli']); }); it('should throw an error when upgrading to the same version number', async () => { - vi.mocked(getStorybookCoreVersion).mockResolvedValue('8.0.0'); + findInstallationsMock.mockResolvedValue({ + dependencies: { + '@storybook/cli': [ + { + version: '8.0.0', + }, + ], + }, + duplicatedDependencies: {}, + infoCommand: '', + dedupeCommand: '', + }); await expect(doUpgrade({} as any)).rejects.toThrowError(UpgradeStorybookToSameVersionError); + expect(findInstallationsMock).toHaveBeenCalledWith(['storybook', '@storybook/cli']); }); }); diff --git a/code/lib/cli/src/upgrade.ts b/code/lib/cli/src/upgrade.ts index 14135e44b2e7..1d13c5a7f0c2 100644 --- a/code/lib/cli/src/upgrade.ts +++ b/code/lib/cli/src/upgrade.ts @@ -1,5 +1,5 @@ import { sync as spawnSync } from 'cross-spawn'; -import { telemetry, getStorybookCoreVersion } from '@storybook/telemetry'; +import { telemetry } from '@storybook/telemetry'; import semver, { eq, lt, prerelease } from 'semver'; import { logger } from '@storybook/node-logger'; import { withTelemetry } from '@storybook/core-server'; @@ -11,7 +11,7 @@ import { import chalk from 'chalk'; import dedent from 'ts-dedent'; import boxen from 'boxen'; -import type { PackageManagerName } from '@storybook/core-common'; +import type { JsPackageManager, PackageManagerName } from '@storybook/core-common'; import { JsPackageManagerFactory, isCorePackage, @@ -37,6 +37,18 @@ export const getStorybookVersion = (line: string) => { }; }; +const getInstalledStorybookVersion = async (packageManager: JsPackageManager) => { + const installations = await packageManager.findInstallations(['storybook', '@storybook/cli']); + if (!installations) { + return; + } + const cliVersion = installations.dependencies['@storybook/cli']?.[0].version; + if (cliVersion) { + return cliVersion; + } + return installations.dependencies['storybook']?.[0].version; +}; + const deprecatedPackages = [ { minVersion: '6.0.0-alpha.0', @@ -113,8 +125,9 @@ export const doUpgrade = async ({ }: UpgradeOptions) => { const packageManager = JsPackageManagerFactory.getPackageManager({ force: pkgMgr }); - // If we can't determine the existing version (Yarn PnP), fallback to v0.0.0 to not block the upgrade - const beforeVersion = (await getStorybookCoreVersion()) ?? '0.0.0'; + // If we can't determine the existing version fallback to v0.0.0 to not block the upgrade + const beforeVersion = (await getInstalledStorybookVersion(packageManager)) ?? '0.0.0'; + const currentVersion = versions['@storybook/cli']; const isCanary = currentVersion.startsWith('0.0.0'); @@ -206,7 +219,7 @@ export const doUpgrade = async ({ automigrationResults = await automigrate({ dryRun, yes, packageManager: pkgMgr, configDir }); } if (!options.disableTelemetry) { - const afterVersion = await getStorybookCoreVersion(); + const afterVersion = await getInstalledStorybookVersion(packageManager); const { preCheckFailure, fixResults } = automigrationResults || {}; const automigrationTelemetry = { automigrationResults: preCheckFailure ? null : fixResults, diff --git a/code/lib/client-logger/package.json b/code/lib/client-logger/package.json index 055f22afba3d..2db66694ef67 100644 --- a/code/lib/client-logger/package.json +++ b/code/lib/client-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/client-logger", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "", "keywords": [ "storybook" diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index 58565fbcc2e8..ecfa8ea7d9b8 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/codemod", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "A collection of codemod scripts written with JSCodeshift", "keywords": [ "storybook" diff --git a/code/lib/core-common/package.json b/code/lib/core-common/package.json index 60db71b2aa03..b1f5c3becf55 100644 --- a/code/lib/core-common/package.json +++ b/code/lib/core-common/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-common", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/lib/core-common/src/versions.ts b/code/lib/core-common/src/versions.ts index a2acd8db2035..9dc1fd0230e0 100644 --- a/code/lib/core-common/src/versions.ts +++ b/code/lib/core-common/src/versions.ts @@ -1,82 +1,82 @@ // auto generated file, do not edit export default { - '@storybook/addon-a11y': '8.0.0-alpha.14', - '@storybook/addon-actions': '8.0.0-alpha.14', - '@storybook/addon-backgrounds': '8.0.0-alpha.14', - '@storybook/addon-controls': '8.0.0-alpha.14', - '@storybook/addon-docs': '8.0.0-alpha.14', - '@storybook/addon-essentials': '8.0.0-alpha.14', - '@storybook/addon-highlight': '8.0.0-alpha.14', - '@storybook/addon-interactions': '8.0.0-alpha.14', - '@storybook/addon-jest': '8.0.0-alpha.14', - '@storybook/addon-links': '8.0.0-alpha.14', - '@storybook/addon-mdx-gfm': '8.0.0-alpha.14', - '@storybook/addon-measure': '8.0.0-alpha.14', - '@storybook/addon-outline': '8.0.0-alpha.14', - '@storybook/addon-storysource': '8.0.0-alpha.14', - '@storybook/addon-themes': '8.0.0-alpha.14', - '@storybook/addon-toolbars': '8.0.0-alpha.14', - '@storybook/addon-viewport': '8.0.0-alpha.14', - '@storybook/angular': '8.0.0-alpha.14', - '@storybook/blocks': '8.0.0-alpha.14', - '@storybook/builder-manager': '8.0.0-alpha.14', - '@storybook/builder-vite': '8.0.0-alpha.14', - '@storybook/builder-webpack5': '8.0.0-alpha.14', - '@storybook/channels': '8.0.0-alpha.14', - '@storybook/cli': '8.0.0-alpha.14', - '@storybook/client-logger': '8.0.0-alpha.14', - '@storybook/codemod': '8.0.0-alpha.14', - '@storybook/components': '8.0.0-alpha.14', - '@storybook/core-common': '8.0.0-alpha.14', - '@storybook/core-events': '8.0.0-alpha.14', - '@storybook/core-server': '8.0.0-alpha.14', - '@storybook/core-webpack': '8.0.0-alpha.14', - '@storybook/csf-plugin': '8.0.0-alpha.14', - '@storybook/csf-tools': '8.0.0-alpha.14', - '@storybook/docs-tools': '8.0.0-alpha.14', - '@storybook/ember': '8.0.0-alpha.14', - '@storybook/html': '8.0.0-alpha.14', - '@storybook/html-vite': '8.0.0-alpha.14', - '@storybook/html-webpack5': '8.0.0-alpha.14', - '@storybook/instrumenter': '8.0.0-alpha.14', - '@storybook/manager': '8.0.0-alpha.14', - '@storybook/manager-api': '8.0.0-alpha.14', - '@storybook/nextjs': '8.0.0-alpha.14', - '@storybook/node-logger': '8.0.0-alpha.14', - '@storybook/preact': '8.0.0-alpha.14', - '@storybook/preact-vite': '8.0.0-alpha.14', - '@storybook/preact-webpack5': '8.0.0-alpha.14', - '@storybook/preset-create-react-app': '8.0.0-alpha.14', - '@storybook/preset-html-webpack': '8.0.0-alpha.14', - '@storybook/preset-preact-webpack': '8.0.0-alpha.14', - '@storybook/preset-react-webpack': '8.0.0-alpha.14', - '@storybook/preset-server-webpack': '8.0.0-alpha.14', - '@storybook/preset-svelte-webpack': '8.0.0-alpha.14', - '@storybook/preset-vue3-webpack': '8.0.0-alpha.14', - '@storybook/preview': '8.0.0-alpha.14', - '@storybook/preview-api': '8.0.0-alpha.14', - '@storybook/react': '8.0.0-alpha.14', - '@storybook/react-dom-shim': '8.0.0-alpha.14', - '@storybook/react-vite': '8.0.0-alpha.14', - '@storybook/react-webpack5': '8.0.0-alpha.14', - '@storybook/router': '8.0.0-alpha.14', - '@storybook/server': '8.0.0-alpha.14', - '@storybook/server-webpack5': '8.0.0-alpha.14', - '@storybook/source-loader': '8.0.0-alpha.14', - '@storybook/svelte': '8.0.0-alpha.14', - '@storybook/svelte-vite': '8.0.0-alpha.14', - '@storybook/svelte-webpack5': '8.0.0-alpha.14', - '@storybook/sveltekit': '8.0.0-alpha.14', - '@storybook/telemetry': '8.0.0-alpha.14', - '@storybook/test': '8.0.0-alpha.14', - '@storybook/theming': '8.0.0-alpha.14', - '@storybook/types': '8.0.0-alpha.14', - '@storybook/vue3': '8.0.0-alpha.14', - '@storybook/vue3-vite': '8.0.0-alpha.14', - '@storybook/vue3-webpack5': '8.0.0-alpha.14', - '@storybook/web-components': '8.0.0-alpha.14', - '@storybook/web-components-vite': '8.0.0-alpha.14', - '@storybook/web-components-webpack5': '8.0.0-alpha.14', - sb: '8.0.0-alpha.14', - storybook: '8.0.0-alpha.14', + '@storybook/addon-a11y': '8.0.0-alpha.16', + '@storybook/addon-actions': '8.0.0-alpha.16', + '@storybook/addon-backgrounds': '8.0.0-alpha.16', + '@storybook/addon-controls': '8.0.0-alpha.16', + '@storybook/addon-docs': '8.0.0-alpha.16', + '@storybook/addon-essentials': '8.0.0-alpha.16', + '@storybook/addon-highlight': '8.0.0-alpha.16', + '@storybook/addon-interactions': '8.0.0-alpha.16', + '@storybook/addon-jest': '8.0.0-alpha.16', + '@storybook/addon-links': '8.0.0-alpha.16', + '@storybook/addon-mdx-gfm': '8.0.0-alpha.16', + '@storybook/addon-measure': '8.0.0-alpha.16', + '@storybook/addon-outline': '8.0.0-alpha.16', + '@storybook/addon-storysource': '8.0.0-alpha.16', + '@storybook/addon-themes': '8.0.0-alpha.16', + '@storybook/addon-toolbars': '8.0.0-alpha.16', + '@storybook/addon-viewport': '8.0.0-alpha.16', + '@storybook/angular': '8.0.0-alpha.16', + '@storybook/blocks': '8.0.0-alpha.16', + '@storybook/builder-manager': '8.0.0-alpha.16', + '@storybook/builder-vite': '8.0.0-alpha.16', + '@storybook/builder-webpack5': '8.0.0-alpha.16', + '@storybook/channels': '8.0.0-alpha.16', + '@storybook/cli': '8.0.0-alpha.16', + '@storybook/client-logger': '8.0.0-alpha.16', + '@storybook/codemod': '8.0.0-alpha.16', + '@storybook/components': '8.0.0-alpha.16', + '@storybook/core-common': '8.0.0-alpha.16', + '@storybook/core-events': '8.0.0-alpha.16', + '@storybook/core-server': '8.0.0-alpha.16', + '@storybook/core-webpack': '8.0.0-alpha.16', + '@storybook/csf-plugin': '8.0.0-alpha.16', + '@storybook/csf-tools': '8.0.0-alpha.16', + '@storybook/docs-tools': '8.0.0-alpha.16', + '@storybook/ember': '8.0.0-alpha.16', + '@storybook/html': '8.0.0-alpha.16', + '@storybook/html-vite': '8.0.0-alpha.16', + '@storybook/html-webpack5': '8.0.0-alpha.16', + '@storybook/instrumenter': '8.0.0-alpha.16', + '@storybook/manager': '8.0.0-alpha.16', + '@storybook/manager-api': '8.0.0-alpha.16', + '@storybook/nextjs': '8.0.0-alpha.16', + '@storybook/node-logger': '8.0.0-alpha.16', + '@storybook/preact': '8.0.0-alpha.16', + '@storybook/preact-vite': '8.0.0-alpha.16', + '@storybook/preact-webpack5': '8.0.0-alpha.16', + '@storybook/preset-create-react-app': '8.0.0-alpha.16', + '@storybook/preset-html-webpack': '8.0.0-alpha.16', + '@storybook/preset-preact-webpack': '8.0.0-alpha.16', + '@storybook/preset-react-webpack': '8.0.0-alpha.16', + '@storybook/preset-server-webpack': '8.0.0-alpha.16', + '@storybook/preset-svelte-webpack': '8.0.0-alpha.16', + '@storybook/preset-vue3-webpack': '8.0.0-alpha.16', + '@storybook/preview': '8.0.0-alpha.16', + '@storybook/preview-api': '8.0.0-alpha.16', + '@storybook/react': '8.0.0-alpha.16', + '@storybook/react-dom-shim': '8.0.0-alpha.16', + '@storybook/react-vite': '8.0.0-alpha.16', + '@storybook/react-webpack5': '8.0.0-alpha.16', + '@storybook/router': '8.0.0-alpha.16', + '@storybook/server': '8.0.0-alpha.16', + '@storybook/server-webpack5': '8.0.0-alpha.16', + '@storybook/source-loader': '8.0.0-alpha.16', + '@storybook/svelte': '8.0.0-alpha.16', + '@storybook/svelte-vite': '8.0.0-alpha.16', + '@storybook/svelte-webpack5': '8.0.0-alpha.16', + '@storybook/sveltekit': '8.0.0-alpha.16', + '@storybook/telemetry': '8.0.0-alpha.16', + '@storybook/test': '8.0.0-alpha.16', + '@storybook/theming': '8.0.0-alpha.16', + '@storybook/types': '8.0.0-alpha.16', + '@storybook/vue3': '8.0.0-alpha.16', + '@storybook/vue3-vite': '8.0.0-alpha.16', + '@storybook/vue3-webpack5': '8.0.0-alpha.16', + '@storybook/web-components': '8.0.0-alpha.16', + '@storybook/web-components-vite': '8.0.0-alpha.16', + '@storybook/web-components-webpack5': '8.0.0-alpha.16', + sb: '8.0.0-alpha.16', + storybook: '8.0.0-alpha.16', }; diff --git a/code/lib/core-events/package.json b/code/lib/core-events/package.json index 14b7e3bc3771..a951c6dc0d50 100644 --- a/code/lib/core-events/package.json +++ b/code/lib/core-events/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-events", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Event names used in storybook core", "keywords": [ "storybook" diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index 59af1cd23826..24f88c4bb735 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-server", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/lib/core-webpack/package.json b/code/lib/core-webpack/package.json index 5cd90fb22eaf..19c75efee828 100644 --- a/code/lib/core-webpack/package.json +++ b/code/lib/core-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-webpack", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/lib/csf-plugin/package.json b/code/lib/csf-plugin/package.json index 5ecd73e9f0ce..bf7aa1a53167 100644 --- a/code/lib/csf-plugin/package.json +++ b/code/lib/csf-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/csf-plugin", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Enrich CSF files via static analysis", "keywords": [ "storybook" diff --git a/code/lib/csf-tools/package.json b/code/lib/csf-tools/package.json index bf0f58bca7b4..7d3d8dcfe135 100644 --- a/code/lib/csf-tools/package.json +++ b/code/lib/csf-tools/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/csf-tools", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Parse and manipulate CSF and Storybook config files", "keywords": [ "storybook" diff --git a/code/lib/docs-tools/package.json b/code/lib/docs-tools/package.json index 8f91bf9b7906..259ba0d3c20f 100644 --- a/code/lib/docs-tools/package.json +++ b/code/lib/docs-tools/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/docs-tools", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Shared utility functions for frameworks to implement docs", "keywords": [ "storybook" diff --git a/code/lib/instrumenter/package.json b/code/lib/instrumenter/package.json index caa9f9f02735..c2f1085d8e02 100644 --- a/code/lib/instrumenter/package.json +++ b/code/lib/instrumenter/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/instrumenter", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "", "keywords": [ "storybook" diff --git a/code/lib/manager-api/package.json b/code/lib/manager-api/package.json index b662b571e5e2..1c342f712a77 100644 --- a/code/lib/manager-api/package.json +++ b/code/lib/manager-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/manager-api", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Core Storybook Manager API & Context", "keywords": [ "storybook" @@ -30,6 +30,7 @@ }, "main": "dist/index.js", "module": "dist/index.mjs", + "react-native": "dist/index.mjs", "types": "dist/index.d.ts", "files": [ "dist/**/*", diff --git a/code/lib/manager-api/src/version.ts b/code/lib/manager-api/src/version.ts index 98acc144edb0..fdcb66306d83 100644 --- a/code/lib/manager-api/src/version.ts +++ b/code/lib/manager-api/src/version.ts @@ -1 +1 @@ -export const version = '8.0.0-alpha.14'; +export const version = '8.0.0-alpha.16'; diff --git a/code/lib/node-logger/package.json b/code/lib/node-logger/package.json index cff6bd8b9daf..0817f0b09f3e 100644 --- a/code/lib/node-logger/package.json +++ b/code/lib/node-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/node-logger", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "", "keywords": [ "storybook" diff --git a/code/lib/preview-api/package.json b/code/lib/preview-api/package.json index 172ea3b7c1ab..e04cf95d1120 100644 --- a/code/lib/preview-api/package.json +++ b/code/lib/preview-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview-api", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "", "keywords": [ "storybook" @@ -30,6 +30,7 @@ }, "main": "dist/index.js", "module": "dist/index.mjs", + "react-native": "dist/index.mjs", "types": "dist/index.d.ts", "files": [ "dist/**/*", diff --git a/code/lib/preview-api/src/index.ts b/code/lib/preview-api/src/index.ts index 2abcec8de9e1..c2fcc5bf9640 100644 --- a/code/lib/preview-api/src/index.ts +++ b/code/lib/preview-api/src/index.ts @@ -68,4 +68,4 @@ export type { PropDescriptor } from './store'; * STORIES API */ export { StoryStore } from './store'; -export { Preview, PreviewWeb } from './preview-web'; +export { Preview, PreviewWithSelection, PreviewWeb } from './preview-web'; diff --git a/code/lib/preview-api/src/modules/preview-web/Preview.tsx b/code/lib/preview-api/src/modules/preview-web/Preview.tsx index 7e368f7457f3..af851edfc304 100644 --- a/code/lib/preview-api/src/modules/preview-web/Preview.tsx +++ b/code/lib/preview-api/src/modules/preview-web/Preview.tsx @@ -384,6 +384,13 @@ export class Preview { return this.storyStoreValue.loadStory({ storyId }); } + getStoryContext(story: PreparedStory, { forceInitialArgs = false } = {}) { + if (!this.storyStoreValue) + throw new CalledPreviewMethodBeforeInitializationError({ methodName: 'getStoryContext' }); + + return this.storyStoreValue.getStoryContext(story, { forceInitialArgs }); + } + async extract(options?: { includeDocsOnly: boolean }) { if (!this.storyStoreValue) throw new CalledPreviewMethodBeforeInitializationError({ methodName: 'extract' }); diff --git a/code/lib/preview/package.json b/code/lib/preview/package.json index 96cc4bafe494..dc2fee954c5c 100644 --- a/code/lib/preview/package.json +++ b/code/lib/preview/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "", "keywords": [ "storybook" diff --git a/code/lib/react-dom-shim/package.json b/code/lib/react-dom-shim/package.json index bec8f0809080..03864dc865e5 100644 --- a/code/lib/react-dom-shim/package.json +++ b/code/lib/react-dom-shim/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-dom-shim", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "", "keywords": [ "storybook" diff --git a/code/lib/router/package.json b/code/lib/router/package.json index bbf95228bcfa..a2e1d29dfac9 100644 --- a/code/lib/router/package.json +++ b/code/lib/router/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/router", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Core Storybook Router", "keywords": [ "storybook" diff --git a/code/lib/router/src/router.tsx b/code/lib/router/src/router.tsx index 118077b9c007..f2e44437b001 100644 --- a/code/lib/router/src/router.tsx +++ b/code/lib/router/src/router.tsx @@ -3,7 +3,6 @@ import React, { useCallback } from 'react'; import type { ReactNode, ReactElement, ComponentProps } from 'react'; import * as R from 'react-router-dom'; -import { ToggleVisibility } from './visibility'; import { queryFromString, parsePath, getMatch } from './utils'; import type { LinkProps, NavigateOptions, RenderData } from './types'; @@ -31,13 +30,11 @@ interface MatchPropsDefault { interface RoutePropsStartsWith { path: string; startsWith?: boolean; - hideOnly?: boolean; children: ReactNode; } interface RoutePropsDefault { path: RegExp; startsWith?: false; - hideOnly?: boolean; children: ReactNode; } @@ -128,23 +125,14 @@ Match.displayName = 'QueryMatch'; function Route(props: RoutePropsDefault): ReactElement; function Route(props: RoutePropsStartsWith): ReactElement; function Route(input: RoutePropsDefault | RoutePropsStartsWith) { - const { children, hideOnly, ...rest } = input; + const { children, ...rest } = input; if (rest.startsWith === undefined) { rest.startsWith = false; } const matchProps = rest as Omit, 'children'>; - return ( - - {({ match }) => { - if (hideOnly) { - return ; - } - return match ? children : null; - }} - - ); + return {({ match }) => (match ? children : null)}; } Route.displayName = 'Route'; diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index 80703b1d0d99..5846328c2311 100644 --- a/code/lib/source-loader/package.json +++ b/code/lib/source-loader/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/source-loader", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Source loader", "keywords": [ "lib", diff --git a/code/lib/telemetry/package.json b/code/lib/telemetry/package.json index 96242d00cad9..f08a16f49933 100644 --- a/code/lib/telemetry/package.json +++ b/code/lib/telemetry/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/telemetry", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Telemetry logging for crash reports and usage statistics", "keywords": [ "storybook" diff --git a/code/lib/telemetry/src/index.ts b/code/lib/telemetry/src/index.ts index cd5e81dd83c2..5a318cd91b64 100644 --- a/code/lib/telemetry/src/index.ts +++ b/code/lib/telemetry/src/index.ts @@ -11,8 +11,6 @@ export * from './storybook-metadata'; export * from './types'; -export { getStorybookCoreVersion } from './package-json'; - export { getPrecedingUpgrade } from './event-cache'; export { addToGlobalContext } from './telemetry'; diff --git a/code/lib/telemetry/src/package-json.ts b/code/lib/telemetry/src/package-json.ts index 56e6823b5920..fe860382dd7f 100644 --- a/code/lib/telemetry/src/package-json.ts +++ b/code/lib/telemetry/src/package-json.ts @@ -27,9 +27,3 @@ export const getActualPackageJson = async (packageName: string) => { const packageJson = await fs.readJson(resolvedPackageJson); return packageJson; }; - -// Note that this probably doesn't work in Yarn PNP mode because @storybook/telemetry doesn't depend on @storybook/cli -export const getStorybookCoreVersion = async () => { - const { version } = await getActualPackageVersion('@storybook/cli'); - return version; -}; diff --git a/code/lib/test/package.json b/code/lib/test/package.json index fe6f87912eda..f49a54ad4b89 100644 --- a/code/lib/test/package.json +++ b/code/lib/test/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/test", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "", "keywords": [ "storybook" diff --git a/code/lib/theming/package.json b/code/lib/theming/package.json index 7d7070dac8a9..2db8901de497 100644 --- a/code/lib/theming/package.json +++ b/code/lib/theming/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/theming", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Core Storybook Components", "keywords": [ "storybook" diff --git a/code/lib/types/package.json b/code/lib/types/package.json index 7fa87fb870d0..81450a93fd97 100644 --- a/code/lib/types/package.json +++ b/code/lib/types/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/types", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Core Storybook TS Types", "keywords": [ "storybook" diff --git a/code/package.json b/code/package.json index e94fd448111b..11d7a645835f 100644 --- a/code/package.json +++ b/code/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/root", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "private": true, "description": "Storybook root", "homepage": "https://storybook.js.org/", diff --git a/code/presets/create-react-app/package.json b/code/presets/create-react-app/package.json index 84e447dc1044..9b374ac8a237 100644 --- a/code/presets/create-react-app/package.json +++ b/code/presets/create-react-app/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-create-react-app", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Storybook for Create React App preset", "keywords": [ "storybook" diff --git a/code/presets/html-webpack/package.json b/code/presets/html-webpack/package.json index 53ac4b370a6d..59b1ff8ee632 100644 --- a/code/presets/html-webpack/package.json +++ b/code/presets/html-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-html-webpack", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/preact-webpack/package.json b/code/presets/preact-webpack/package.json index 0675ac2b6df0..e096553ffd2e 100644 --- a/code/presets/preact-webpack/package.json +++ b/code/presets/preact-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-preact-webpack", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" diff --git a/code/presets/react-webpack/package.json b/code/presets/react-webpack/package.json index 483351b0b3f0..e0c1f31965ad 100644 --- a/code/presets/react-webpack/package.json +++ b/code/presets/react-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-react-webpack", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading", "keywords": [ "storybook" diff --git a/code/presets/server-webpack/package.json b/code/presets/server-webpack/package.json index 6ab09a8f1ecd..8ce710a6e84f 100644 --- a/code/presets/server-webpack/package.json +++ b/code/presets/server-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-server-webpack", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/svelte-webpack/package.json b/code/presets/svelte-webpack/package.json index 6a999a13eb9b..8167e4b24650 100644 --- a/code/presets/svelte-webpack/package.json +++ b/code/presets/svelte-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-svelte-webpack", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/vue3-webpack/package.json b/code/presets/vue3-webpack/package.json index 06bf8455b302..7af09f14a36c 100644 --- a/code/presets/vue3-webpack/package.json +++ b/code/presets/vue3-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-vue3-webpack", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/renderers/html/package.json b/code/renderers/html/package.json index c1bf0967f14a..834ad1e3bde5 100644 --- a/code/renderers/html/package.json +++ b/code/renderers/html/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Storybook HTML renderer", "keywords": [ "storybook" diff --git a/code/renderers/preact/package.json b/code/renderers/preact/package.json index 8bcbde8c58b1..04ac8f205f92 100644 --- a/code/renderers/preact/package.json +++ b/code/renderers/preact/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Storybook Preact renderer", "keywords": [ "storybook" diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json index 52cefe2683e3..9095cb486286 100644 --- a/code/renderers/react/package.json +++ b/code/renderers/react/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Storybook React renderer", "keywords": [ "storybook" diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json index 85bdc2184d06..f581a4819e00 100644 --- a/code/renderers/server/package.json +++ b/code/renderers/server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Storybook Server renderer", "keywords": [ "storybook" diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json index 57dc914b794d..09781741ae5e 100644 --- a/code/renderers/svelte/package.json +++ b/code/renderers/svelte/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Storybook Svelte renderer", "keywords": [ "storybook" diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json index 1b568e4444b8..204748b46885 100644 --- a/code/renderers/vue3/package.json +++ b/code/renderers/vue3/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Storybook Vue 3 renderer", "keywords": [ "storybook" diff --git a/code/renderers/web-components/package.json b/code/renderers/web-components/package.json index 2abd61ca3ed0..986b8a71b7c7 100644 --- a/code/renderers/web-components/package.json +++ b/code/renderers/web-components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Storybook web-components renderer", "keywords": [ "lit", diff --git a/code/ui/blocks/package.json b/code/ui/blocks/package.json index ecd41201eac0..300c0914d801 100644 --- a/code/ui/blocks/package.json +++ b/code/ui/blocks/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/blocks", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Storybook Doc Blocks", "keywords": [ "storybook" diff --git a/code/ui/components/package.json b/code/ui/components/package.json index fe55d82cc560..7355c184d365 100644 --- a/code/ui/components/package.json +++ b/code/ui/components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/components", - "version": "8.0.0-alpha.14", + "version": "8.0.0-alpha.16", "description": "Core Storybook Components", "keywords": [ "storybook" diff --git a/code/ui/components/src/components/ActionBar/ActionBar.tsx b/code/ui/components/src/components/ActionBar/ActionBar.tsx index 6295bf99349a..1668a030e300 100644 --- a/code/ui/components/src/components/ActionBar/ActionBar.tsx +++ b/code/ui/components/src/components/ActionBar/ActionBar.tsx @@ -1,4 +1,4 @@ -import type { FC, MouseEvent, ReactElement } from 'react'; +import type { MouseEvent, ReactElement } from 'react'; import React from 'react'; import { styled } from '@storybook/theming'; @@ -66,7 +66,7 @@ export interface ActionBarProps { actionItems: ActionItem[]; } -export const ActionBar: FC = ({ actionItems, ...props }) => ( +export const ActionBar = ({ actionItems, ...props }: ActionBarProps) => ( {actionItems.map(({ title, className, onClick, disabled }, index: number) => ( diff --git a/code/ui/components/src/components/Badge/Badge.tsx b/code/ui/components/src/components/Badge/Badge.tsx index bcb4d3b01b50..f9d1c9b91ebb 100644 --- a/code/ui/components/src/components/Badge/Badge.tsx +++ b/code/ui/components/src/components/Badge/Badge.tsx @@ -1,4 +1,3 @@ -import type { FC, PropsWithChildren } from 'react'; import React from 'react'; import { styled } from '@storybook/theming'; import { transparentize } from 'polished'; @@ -80,10 +79,11 @@ const BadgeWrapper = styled.div( } ); -export interface BadgeProps extends PropsWithChildren { +export interface BadgeProps { status: 'positive' | 'negative' | 'neutral' | 'warning' | 'critical'; + children?: React.ReactNode; } -export const Badge: FC = ({ ...props }) => { +export const Badge = ({ ...props }: BadgeProps) => { return ; }; diff --git a/code/ui/components/src/components/ErrorFormatter/ErrorFormatter.tsx b/code/ui/components/src/components/ErrorFormatter/ErrorFormatter.tsx index 6d02a63aba20..1ca2cb381ff7 100644 --- a/code/ui/components/src/components/ErrorFormatter/ErrorFormatter.tsx +++ b/code/ui/components/src/components/ErrorFormatter/ErrorFormatter.tsx @@ -1,5 +1,5 @@ import { global } from '@storybook/global'; -import type { FC } from 'react'; + import React, { Fragment } from 'react'; import { styled } from '@storybook/theming'; @@ -20,7 +20,12 @@ const firstLineRegex = /(Error): (.*)\n/; const linesRegexChromium = /at (?:(.*) )?\(?(.+)\)?/; const linesRegexFirefox = /([^@]+)?(?:\/<)?@(.+)?/; const linesRegexSafari = /([^@]+)?@(.+)?/; -export const ErrorFormatter: FC<{ error: Error }> = ({ error }) => { + +export interface ErrorFormatterProps { + error: Error; +} + +export const ErrorFormatter = ({ error }: ErrorFormatterProps) => { if (!error) { return This error has no stack or message; } diff --git a/code/ui/components/src/components/Loader/Loader.tsx b/code/ui/components/src/components/Loader/Loader.tsx index c4f89c572a5d..c4fc4eb68e86 100644 --- a/code/ui/components/src/components/Loader/Loader.tsx +++ b/code/ui/components/src/components/Loader/Loader.tsx @@ -1,5 +1,4 @@ import { transparentize } from 'polished'; -import type { ComponentProps, FC } from 'react'; import React from 'react'; import { styled, keyframes } from '@storybook/theming'; import { Icons } from '../icon/icon'; @@ -98,18 +97,13 @@ interface Progress { }; } -interface LoaderProps { +interface LoaderProps extends React.HTMLAttributes { progress?: Progress; error?: Error; size?: number; } -export const Loader: FC> = ({ - progress, - error, - size, - ...props -}) => { +export const Loader = ({ progress, error, size, ...props }: LoaderProps) => { if (error) { return ( diff --git a/code/ui/components/src/components/ScrollArea/ScrollArea.tsx b/code/ui/components/src/components/ScrollArea/ScrollArea.tsx index b06fff3f5ec4..f3f965af8783 100644 --- a/code/ui/components/src/components/ScrollArea/ScrollArea.tsx +++ b/code/ui/components/src/components/ScrollArea/ScrollArea.tsx @@ -1,4 +1,3 @@ -import type { FC } from 'react'; import React from 'react'; import { styled } from '@storybook/theming'; import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'; @@ -76,14 +75,14 @@ const ScrollAreaThumb = styled(ScrollAreaPrimitive.Thumb)(({ theme }) => ({ }, })); -export const ScrollArea: FC = ({ +export const ScrollArea = ({ children, horizontal = false, vertical = false, offset = 2, scrollbarSize = 6, className, -}) => ( +}: ScrollAreaProps) => ( {children} {horizontal && ( diff --git a/code/ui/components/src/components/bar/bar.tsx b/code/ui/components/src/components/bar/bar.tsx index bdbb60757f38..27c595c65a8a 100644 --- a/code/ui/components/src/components/bar/bar.tsx +++ b/code/ui/components/src/components/bar/bar.tsx @@ -1,7 +1,8 @@ -import type { ComponentProps, FC } from 'react'; +import type { ComponentProps } from 'react'; import React, { Children } from 'react'; import { styled } from '@storybook/theming'; +import type { ScrollAreaProps } from '../ScrollArea/ScrollArea'; import { ScrollArea } from '../ScrollArea/ScrollArea'; export interface SideProps { @@ -39,11 +40,11 @@ export const Side = styled.div( ); Side.displayName = 'Side'; -const UnstyledBar: FC & { scrollable?: boolean }> = ({ - children, - className, - scrollable, -}) => +interface UnstyledBarProps extends ScrollAreaProps { + scrollable?: boolean; +} + +const UnstyledBar = ({ children, className, scrollable }: UnstyledBarProps) => scrollable ? ( {children} @@ -51,7 +52,11 @@ const UnstyledBar: FC & { scrollable?: boolean ) : (
{children}
); -export const Bar = styled(UnstyledBar)<{ border?: boolean; scrollable?: boolean }>( + +export interface BarProps extends UnstyledBarProps { + border?: boolean; +} +export const Bar = styled(UnstyledBar)( ({ theme, scrollable = true }) => ({ color: theme.barTextColor, width: '100%', @@ -70,7 +75,10 @@ export const Bar = styled(UnstyledBar)<{ border?: boolean; scrollable?: boolean ); Bar.displayName = 'Bar'; -const BarInner = styled.div<{ bgColor: string }>(({ bgColor }) => ({ +interface BarInnerProps { + bgColor?: string; +} +const BarInner = styled.div(({ bgColor }) => ({ display: 'flex', justifyContent: 'space-between', position: 'relative', @@ -85,7 +93,7 @@ export interface FlexBarProps extends ComponentProps { backgroundColor?: string; } -export const FlexBar: FC = ({ children, backgroundColor, ...rest }) => { +export const FlexBar = ({ children, backgroundColor, ...rest }: FlexBarProps) => { const [left, right] = Children.toArray(children); return ( diff --git a/code/ui/components/src/components/bar/button.tsx b/code/ui/components/src/components/bar/button.tsx index 0c45c0ba3fa6..68ce83036b59 100644 --- a/code/ui/components/src/components/bar/button.tsx +++ b/code/ui/components/src/components/bar/button.tsx @@ -2,7 +2,6 @@ import type { AnchorHTMLAttributes, ButtonHTMLAttributes, DetailedHTMLProps, - FC, ForwardedRef, ForwardRefExoticComponent, ReactElement, @@ -147,7 +146,7 @@ const IconButtonSkeletonWrapper = styled.div(() => ({ * @deprecated * This component will be removed in Storybook 9.0 * */ -export const IconButtonSkeleton: FC = () => ( +export const IconButtonSkeleton = () => ( diff --git a/code/ui/components/src/components/bar/separator.tsx b/code/ui/components/src/components/bar/separator.tsx index d0606458d042..316c432022c8 100644 --- a/code/ui/components/src/components/bar/separator.tsx +++ b/code/ui/components/src/components/bar/separator.tsx @@ -1,6 +1,10 @@ import React, { Fragment } from 'react'; import { styled } from '@storybook/theming'; +export interface SeparatorProps { + force?: boolean; +} + export const Separator = styled.span( ({ theme }) => ({ width: 1, @@ -35,6 +39,3 @@ export const interleaveSeparators = (list: any[]) => ), null ); -export interface SeparatorProps { - force?: boolean; -} diff --git a/code/ui/components/src/components/brand/StorybookIcon.tsx b/code/ui/components/src/components/brand/StorybookIcon.tsx index 5b756ea3afc6..b880d5bcefc7 100644 --- a/code/ui/components/src/components/brand/StorybookIcon.tsx +++ b/code/ui/components/src/components/brand/StorybookIcon.tsx @@ -1,7 +1,6 @@ -import type { FC } from 'react'; import React from 'react'; -export const StorybookIcon: FC = ({ ...props }) => ( +export const StorybookIcon = (props: React.SVGAttributes) => ( Storybook icon diff --git a/code/ui/components/src/components/brand/StorybookLogo.tsx b/code/ui/components/src/components/brand/StorybookLogo.tsx index b94c9e37f144..aafcc0aa1149 100644 --- a/code/ui/components/src/components/brand/StorybookLogo.tsx +++ b/code/ui/components/src/components/brand/StorybookLogo.tsx @@ -1,9 +1,10 @@ -import type { FC } from 'react'; import React from 'react'; -export const StorybookLogo: FC<{ +type StorybookLogoProps = { alt: string; -}> = ({ alt, ...props }) => ( +} & React.SVGAttributes; + +export const StorybookLogo = ({ alt, ...props }: StorybookLogoProps) => ( {alt ? {alt} : null} diff --git a/code/ui/components/src/components/form/field/field.tsx b/code/ui/components/src/components/form/field/field.tsx index 6452a31e3444..19b21ae8d2f7 100644 --- a/code/ui/components/src/components/form/field/field.tsx +++ b/code/ui/components/src/components/form/field/field.tsx @@ -1,4 +1,4 @@ -import type { FC, ReactNode } from 'react'; +import type { ReactNode } from 'react'; import React from 'react'; import { styled } from '@storybook/theming'; @@ -28,7 +28,7 @@ export interface FieldProps { label?: ReactNode; } -export const Field: FC = ({ label, children, ...props }) => ( +export const Field = ({ label, children, ...props }: FieldProps) => ( {label ? (