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 6b3fc32d824b..0ee045065da6 100644 --- a/CHANGELOG.prerelease.md +++ b/CHANGELOG.prerelease.md @@ -1,3 +1,9 @@ +## 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)! diff --git a/CODEOWNERS b/CODEOWNERS index df2a08807c84..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 @yannbf -/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/MIGRATION.md b/MIGRATION.md index 3a1b66b23c5b..e02b78ed92ca 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -19,7 +19,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) @@ -27,6 +26,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) @@ -72,17 +72,17 @@ - [Addon author changes](#addon-author-changes) - [Removed `config` preset](#removed-config-preset-1) - [From version 7.5.0 to 7.6.0](#from-version-750-to-760) - - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated) - - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated) - - [typescript.skipBabel deprecated](#typescriptskipbabel-deprecated) - - [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop) - - [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react) + - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated) + - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated) + - [typescript.skipBabel deprecated](#typescriptskipbabel-deprecated) + - [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop) + - [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react) - [From version 7.4.0 to 7.5.0](#from-version-740-to-750) - - [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated) - - [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers) + - [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated) + - [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers) - [From version 7.0.0 to 7.2.0](#from-version-700-to-720) - - [Addon API is more type-strict](#addon-api-is-more-type-strict) - - [Addon-controls hideNoControlsWarning parameter is deprecated](#addon-controls-hidenocontrolswarning-parameter-is-deprecated) + - [Addon API is more type-strict](#addon-api-is-more-type-strict) + - [Addon-controls hideNoControlsWarning parameter is deprecated](#addon-controls-hidenocontrolswarning-parameter-is-deprecated) - [From version 6.5.x to 7.0.0](#from-version-65x-to-700) - [7.0 breaking changes](#70-breaking-changes) - [Dropped support for Node 15 and below](#dropped-support-for-node-15-and-below) @@ -108,7 +108,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) @@ -121,7 +121,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) @@ -171,7 +171,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) @@ -629,13 +629,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. @@ -705,6 +698,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 0b025846f6de..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.15", + "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 105967fbf4ea..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.15", + "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 7dc215c939df..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.15", + "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 fa862fafdf76..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.15", + "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 547571fed237..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.15", + "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 d91fd33ca974..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.15", + "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 0431bf9d21c0..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.15", + "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 be6638ab249b..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.15", + "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 3db11190accf..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.15", + "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 cd9ef6814723..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.15", + "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 b5a133346660..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.15", + "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 eac997b2542b..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.15", + "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 a04f25561684..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.15", + "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 8d4fa9bb7eb2..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.15", + "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/package.json b/code/addons/themes/package.json index ee54e95d349e..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.15", + "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 3325a1b7abaf..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.15", + "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 4d36ff970e00..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.15", + "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 bf86157d426d..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.15", + "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 f531c4ae96d9..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.15", + "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 de9ba106459c..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.15", + "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 c2907be55c3b..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.15", + "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 21def746c9de..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.15", + "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 8fbba14f8371..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.15", + "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 629a1394274e..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.15", + "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 9ee7c8d22e3b..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.15", + "version": "8.0.0-alpha.16", "description": "Storybook for Next.js", "keywords": [ "storybook", diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json index a87d20a24295..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.15", + "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 4a9ad3897615..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.15", + "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 5e5ba767ee50..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.15", + "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 141ab40e3c7e..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.15", + "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 f7619ce1ff70..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.15", + "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 8b92f440bf71..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.15", + "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 d6559a9b746e..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.15", + "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 db51c058bfec..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.15", + "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 f56e7c096d52..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.15", + "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 a76d282f4575..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.15", + "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 f7e5d3f84658..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.15", + "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 bc55dd302ede..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.15", + "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 75cec6f24251..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.15", + "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 7d5517826c3e..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.15", + "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 56db69e1f279..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.15", + "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 56a588fe9a51..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.15", + "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/client-logger/package.json b/code/lib/client-logger/package.json index d11e28d057a0..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.15", + "version": "8.0.0-alpha.16", "description": "", "keywords": [ "storybook" diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index abc46fc8686a..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.15", + "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 eb8756600d6f..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.15", + "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 001f5bf545d3..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.15', - '@storybook/addon-actions': '8.0.0-alpha.15', - '@storybook/addon-backgrounds': '8.0.0-alpha.15', - '@storybook/addon-controls': '8.0.0-alpha.15', - '@storybook/addon-docs': '8.0.0-alpha.15', - '@storybook/addon-essentials': '8.0.0-alpha.15', - '@storybook/addon-highlight': '8.0.0-alpha.15', - '@storybook/addon-interactions': '8.0.0-alpha.15', - '@storybook/addon-jest': '8.0.0-alpha.15', - '@storybook/addon-links': '8.0.0-alpha.15', - '@storybook/addon-mdx-gfm': '8.0.0-alpha.15', - '@storybook/addon-measure': '8.0.0-alpha.15', - '@storybook/addon-outline': '8.0.0-alpha.15', - '@storybook/addon-storysource': '8.0.0-alpha.15', - '@storybook/addon-themes': '8.0.0-alpha.15', - '@storybook/addon-toolbars': '8.0.0-alpha.15', - '@storybook/addon-viewport': '8.0.0-alpha.15', - '@storybook/angular': '8.0.0-alpha.15', - '@storybook/blocks': '8.0.0-alpha.15', - '@storybook/builder-manager': '8.0.0-alpha.15', - '@storybook/builder-vite': '8.0.0-alpha.15', - '@storybook/builder-webpack5': '8.0.0-alpha.15', - '@storybook/channels': '8.0.0-alpha.15', - '@storybook/cli': '8.0.0-alpha.15', - '@storybook/client-logger': '8.0.0-alpha.15', - '@storybook/codemod': '8.0.0-alpha.15', - '@storybook/components': '8.0.0-alpha.15', - '@storybook/core-common': '8.0.0-alpha.15', - '@storybook/core-events': '8.0.0-alpha.15', - '@storybook/core-server': '8.0.0-alpha.15', - '@storybook/core-webpack': '8.0.0-alpha.15', - '@storybook/csf-plugin': '8.0.0-alpha.15', - '@storybook/csf-tools': '8.0.0-alpha.15', - '@storybook/docs-tools': '8.0.0-alpha.15', - '@storybook/ember': '8.0.0-alpha.15', - '@storybook/html': '8.0.0-alpha.15', - '@storybook/html-vite': '8.0.0-alpha.15', - '@storybook/html-webpack5': '8.0.0-alpha.15', - '@storybook/instrumenter': '8.0.0-alpha.15', - '@storybook/manager': '8.0.0-alpha.15', - '@storybook/manager-api': '8.0.0-alpha.15', - '@storybook/nextjs': '8.0.0-alpha.15', - '@storybook/node-logger': '8.0.0-alpha.15', - '@storybook/preact': '8.0.0-alpha.15', - '@storybook/preact-vite': '8.0.0-alpha.15', - '@storybook/preact-webpack5': '8.0.0-alpha.15', - '@storybook/preset-create-react-app': '8.0.0-alpha.15', - '@storybook/preset-html-webpack': '8.0.0-alpha.15', - '@storybook/preset-preact-webpack': '8.0.0-alpha.15', - '@storybook/preset-react-webpack': '8.0.0-alpha.15', - '@storybook/preset-server-webpack': '8.0.0-alpha.15', - '@storybook/preset-svelte-webpack': '8.0.0-alpha.15', - '@storybook/preset-vue3-webpack': '8.0.0-alpha.15', - '@storybook/preview': '8.0.0-alpha.15', - '@storybook/preview-api': '8.0.0-alpha.15', - '@storybook/react': '8.0.0-alpha.15', - '@storybook/react-dom-shim': '8.0.0-alpha.15', - '@storybook/react-vite': '8.0.0-alpha.15', - '@storybook/react-webpack5': '8.0.0-alpha.15', - '@storybook/router': '8.0.0-alpha.15', - '@storybook/server': '8.0.0-alpha.15', - '@storybook/server-webpack5': '8.0.0-alpha.15', - '@storybook/source-loader': '8.0.0-alpha.15', - '@storybook/svelte': '8.0.0-alpha.15', - '@storybook/svelte-vite': '8.0.0-alpha.15', - '@storybook/svelte-webpack5': '8.0.0-alpha.15', - '@storybook/sveltekit': '8.0.0-alpha.15', - '@storybook/telemetry': '8.0.0-alpha.15', - '@storybook/test': '8.0.0-alpha.15', - '@storybook/theming': '8.0.0-alpha.15', - '@storybook/types': '8.0.0-alpha.15', - '@storybook/vue3': '8.0.0-alpha.15', - '@storybook/vue3-vite': '8.0.0-alpha.15', - '@storybook/vue3-webpack5': '8.0.0-alpha.15', - '@storybook/web-components': '8.0.0-alpha.15', - '@storybook/web-components-vite': '8.0.0-alpha.15', - '@storybook/web-components-webpack5': '8.0.0-alpha.15', - sb: '8.0.0-alpha.15', - storybook: '8.0.0-alpha.15', + '@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 259051a4dbec..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.15", + "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 ece8698cb5ec..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.15", + "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 c910691fc3c9..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.15", + "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 906efd6d88f5..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.15", + "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 5670166211ca..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.15", + "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 d0980f6e7e78..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.15", + "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 6cdf6600c97e..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.15", + "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 01af19b6ceef..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.15", + "version": "8.0.0-alpha.16", "description": "Core Storybook Manager API & Context", "keywords": [ "storybook" diff --git a/code/lib/manager-api/src/version.ts b/code/lib/manager-api/src/version.ts index 71a3c20896b8..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.15'; +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 630a46279841..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.15", + "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 d3eb58f32f32..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.15", + "version": "8.0.0-alpha.16", "description": "", "keywords": [ "storybook" diff --git a/code/lib/preview/package.json b/code/lib/preview/package.json index ff8f15d4e86e..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.15", + "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 4b783b517126..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.15", + "version": "8.0.0-alpha.16", "description": "", "keywords": [ "storybook" diff --git a/code/lib/router/package.json b/code/lib/router/package.json index 8b486fbb46da..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.15", + "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 91fe61d6a278..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.15", + "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 99301b412ec8..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.15", + "version": "8.0.0-alpha.16", "description": "Telemetry logging for crash reports and usage statistics", "keywords": [ "storybook" diff --git a/code/lib/test/package.json b/code/lib/test/package.json index 1f5056884428..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.15", + "version": "8.0.0-alpha.16", "description": "", "keywords": [ "storybook" diff --git a/code/lib/theming/package.json b/code/lib/theming/package.json index d6f9115a22e8..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.15", + "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 e981bd0e6e7e..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.15", + "version": "8.0.0-alpha.16", "description": "Core Storybook TS Types", "keywords": [ "storybook" diff --git a/code/package.json b/code/package.json index 59329639237c..11d7a645835f 100644 --- a/code/package.json +++ b/code/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/root", - "version": "8.0.0-alpha.15", + "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 d3fc0bd81d42..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.15", + "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 c2888a7d9117..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.15", + "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 c42399185223..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.15", + "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 19d8fee1c5fb..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.15", + "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 585619a8c649..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.15", + "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 9256d8c73609..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.15", + "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 1f96e73359d7..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.15", + "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 78ec60113c8a..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.15", + "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 77f3dba0ed38..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.15", + "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 ba83ddeb281d..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.15", + "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 8ae85e81860a..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.15", + "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 5e50321c1927..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.15", + "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 daa4d8cd020c..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.15", + "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 4e9fef36250a..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.15", + "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 d977f658bc7b..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.15", + "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 6d394a410cfe..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.15", + "version": "8.0.0-alpha.16", "description": "Core Storybook Components", "keywords": [ "storybook" diff --git a/code/ui/manager/package.json b/code/ui/manager/package.json index 56988ce10855..8ebec0e95b0c 100644 --- a/code/ui/manager/package.json +++ b/code/ui/manager/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/manager", - "version": "8.0.0-alpha.15", + "version": "8.0.0-alpha.16", "description": "Core Storybook UI", "keywords": [ "storybook" diff --git a/code/ui/manager/src/App.tsx b/code/ui/manager/src/App.tsx index 394016ff5708..74e68183ee62 100644 --- a/code/ui/manager/src/App.tsx +++ b/code/ui/manager/src/App.tsx @@ -1,8 +1,5 @@ import type { ComponentProps } from 'react'; import React from 'react'; - -import { Route } from '@storybook/router'; - import { Global, createGlobal } from '@storybook/theming'; import type { Addon_PageType } from '@storybook/types'; import Sidebar from './container/Sidebar'; @@ -27,11 +24,7 @@ export const App = ({ managerLayoutState, setManagerLayoutState, pages }: Props) - - - } + slotMain={} slotSidebar={ setMobileAboutOpen((state) => !state)} />} slotPanel={} slotPages={pages.map(({ id, render: Content }) => ( diff --git a/code/ui/manager/src/components/layout/Layout.stories.tsx b/code/ui/manager/src/components/layout/Layout.stories.tsx index aea6f4a1a5f2..6fa6541b88df 100644 --- a/code/ui/manager/src/components/layout/Layout.stories.tsx +++ b/code/ui/manager/src/components/layout/Layout.stories.tsx @@ -7,6 +7,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { fn } from '@storybook/test'; import { Layout } from './Layout'; import { LayoutProvider } from './LayoutProvider'; +import { LocationProvider } from '@storybook/router'; import MobileNavigationStoriesMeta from '../mobile/navigation/MobileNavigation.stories'; const PlaceholderBlock = styled.div({ @@ -67,7 +68,11 @@ const meta = { }, decorators: [ MobileNavigationStoriesMeta.decorators[0] as any, - (storyFn) => {storyFn()}, + (storyFn) => ( + + {storyFn()} + + ), ], render: (args) => { const [managerLayoutState, setManagerLayoutState] = useState(args.managerLayoutState); diff --git a/code/ui/manager/src/components/layout/Layout.tsx b/code/ui/manager/src/components/layout/Layout.tsx index 726b535e7f37..1c3494f76a20 100644 --- a/code/ui/manager/src/components/layout/Layout.tsx +++ b/code/ui/manager/src/components/layout/Layout.tsx @@ -6,6 +6,7 @@ import { MobileNavigation } from '../mobile/navigation/MobileNavigation'; import { MEDIA_DESKTOP_BREAKPOINT } from '../../constants'; import { useLayout } from './LayoutProvider'; import { Notifications } from '../../container/Notifications'; +import { Match } from '@storybook/router'; interface InternalLayoutState { isDragging: boolean; @@ -145,7 +146,9 @@ export const Layout = ({ managerLayoutState, setManagerLayoutState, ...slots }: > {showPages && {slots.slotPages}} - {slots.slotMain} + + {({ match }) => {slots.slotMain}} + {isDesktop && ( <> @@ -210,11 +213,12 @@ const SidebarContainer = styled.div(({ theme }) => ({ borderRight: `1px solid ${theme.color.border}`, })); -const ContentContainer = styled.div(({ theme }) => ({ +const ContentContainer = styled.div<{ shown: boolean }>(({ theme, shown }) => ({ flex: 1, position: 'relative', backgroundColor: theme.background.content, - display: 'grid', // This is needed to make the content container fill the available space + display: shown ? 'grid' : 'none', // This is needed to make the content container fill the available space + overflow: 'auto', [MEDIA_DESKTOP_BREAKPOINT]: { flex: 'auto', diff --git a/code/ui/manager/src/components/mobile/navigation/MobileAddonsDrawer.tsx b/code/ui/manager/src/components/mobile/navigation/MobileAddonsDrawer.tsx index b05dff4c3d25..7c0027d610bc 100644 --- a/code/ui/manager/src/components/mobile/navigation/MobileAddonsDrawer.tsx +++ b/code/ui/manager/src/components/mobile/navigation/MobileAddonsDrawer.tsx @@ -1,59 +1,21 @@ import type { FC, ReactNode } from 'react'; -import React, { useRef } from 'react'; +import React from 'react'; import { styled } from '@storybook/theming'; -import { Transition } from 'react-transition-group'; -import type { TransitionStatus } from 'react-transition-group/Transition'; -import { useLayout } from '../../layout/LayoutProvider'; interface MobileAddonsDrawerProps { children: ReactNode; } -const TRANSITION_DURATION = 200; - -const Container = styled.div<{ state: TransitionStatus }>(({ theme, state }) => ({ - position: 'fixed', +const Container = styled.div(({ theme }) => ({ + position: 'relative', boxSizing: 'border-box', width: '100%', background: theme.background.content, - height: '50%', - bottom: 0, - left: 0, + height: '42vh', zIndex: 11, - transition: `all ${TRANSITION_DURATION}ms ease-in-out`, overflow: 'hidden', - borderTop: `1px solid ${theme.appBorderColor}`, - transform: `${(() => { - switch (state) { - case 'entering': - case 'entered': - return 'translateY(0)'; - case 'exiting': - case 'exited': - return 'translateY(100%)'; - default: - return 'translateY(0)'; - } - })()}`, })); export const MobileAddonsDrawer: FC = ({ children }) => { - const { isMobilePanelOpen } = useLayout(); - const containerRef = useRef(null); - - return ( - - {(state) => ( - - {children} - - )} - - ); + return {children}; }; diff --git a/code/ui/manager/src/components/mobile/navigation/MobileNavigation.tsx b/code/ui/manager/src/components/mobile/navigation/MobileNavigation.tsx index 7174b8bd6a2e..47b7587019f8 100644 --- a/code/ui/manager/src/components/mobile/navigation/MobileNavigation.tsx +++ b/code/ui/manager/src/components/mobile/navigation/MobileNavigation.tsx @@ -35,40 +35,50 @@ const useFullStoryName = () => { }; export const MobileNavigation: FC = ({ menu, panel, showPanel }) => { - const { isMobileMenuOpen, setMobileMenuOpen, setMobilePanelOpen } = useLayout(); + const { isMobileMenuOpen, isMobilePanelOpen, setMobileMenuOpen, setMobilePanelOpen } = + useLayout(); const fullStoryName = useFullStoryName(); return ( {menu} - {panel} - - {showPanel && ( - setMobilePanelOpen(true)} title="Open addon panel"> - - + {isMobilePanelOpen ? ( + {panel} + ) : ( + )} ); }; const Container = styled.div(({ theme }) => ({ - display: 'flex', - alignItems: 'center', - justifyContent: 'space-between', bottom: 0, left: 0, width: '100%', - height: 40, zIndex: 10, background: theme.barBg, - padding: '0 6px', borderTop: `1px solid ${theme.appBorderColor}`, })); +const Nav = styled.div({ + display: 'flex', + alignItems: 'center', + justifyContent: 'space-between', + width: '100%', + height: 40, + padding: '0 6px', +}); + const Button = styled.button(({ theme }) => ({ all: 'unset', display: 'flex', diff --git a/code/ui/manager/src/container/Sidebar.tsx b/code/ui/manager/src/container/Sidebar.tsx index 7eec79fc83c3..21d9cf09ef6c 100755 --- a/code/ui/manager/src/container/Sidebar.tsx +++ b/code/ui/manager/src/container/Sidebar.tsx @@ -45,9 +45,9 @@ const Sidebar = React.memo(function Sideber({ onMenuClick }: SidebarProps) { const bottomItems = api.getElements(Addon_TypesEnum.experimental_SIDEBAR_BOTTOM); const topItems = api.getElements(Addon_TypesEnum.experimental_SIDEBAR_TOP); // eslint-disable-next-line react-hooks/exhaustive-deps - const bottom = useMemo(() => Object.values(bottomItems), [...Object.values(bottomItems)]); + const bottom = useMemo(() => Object.values(bottomItems), [Object.keys(bottomItems).join('')]); // eslint-disable-next-line react-hooks/exhaustive-deps - const top = useMemo(() => Object.values(topItems), [...Object.values(topItems)]); + const top = useMemo(() => Object.values(topItems), [Object.keys(topItems).join('')]); return { title: name, diff --git a/docs/api/main-config-config.md b/docs/api/main-config-config.md deleted file mode 100644 index 326f28f9ace7..000000000000 --- a/docs/api/main-config-config.md +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: 'config' ---- - -(⛔️ **Deprecated**) - -Parent: [main.js|ts configuration](./main-config.md) - -Type: `string[] | ((config: string[], options: Options) => string[] | Promise)` - -Add additional scripts to run in the story preview. Deprecated in favor of [`previewAnnotations`](./main-config-preview-annotations.md). diff --git a/docs/api/main-config.md b/docs/api/main-config.md index 51fc0888aff4..a9013268e45c 100644 --- a/docs/api/main-config.md +++ b/docs/api/main-config.md @@ -47,4 +47,3 @@ An object to configure Storybook containing the following properties: - [`typescript`](./main-config-typescript.md) - [`viteFinal`](./main-config-vite-final.md) - [`webpackFinal`](./main-config-webpack-final.md) -- [`config`](./main-config-config.md) (⛔️ Deprecated) diff --git a/docs/faq.md b/docs/faq.md index 50ebca8baaf5..6e6ce176787a 100644 --- a/docs/faq.md +++ b/docs/faq.md @@ -329,7 +329,6 @@ We're only covering versions 5.3 and 5.0 as they were important milestones for S | | `main.js` configuration/typescript | [See current documentation](./api/main-config-typescript.md) | Non existing feature or undocumented | Non existing feature or undocumented | | | `main.js` configuration/viteFinal | [See current documentation](./api/main-config-vite-final.md) | Non existing feature or undocumented | Non existing feature or undocumented | | | `main.js` configuration/webpackFinal | [See current documentation](./api/main-config-webpack-final.md) | Non existing feature or undocumented | Non existing feature or undocumented | -| | `main.js` configuration/config | [See current documentation](./api/main-config-config.md) | Non existing feature or undocumented | Non existing feature or undocumented | | | Frameworks | [See current documentation](./api/new-frameworks.md) | Non existing feature or undocumented | Non existing feature or undocumented | | | CLI options | [See current documentation](./api/cli-options.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/cli-options) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/cli-options) | diff --git a/docs/snippets/vue/button-story-auto-docs.ts-4-9.mdx b/docs/snippets/vue/button-story-auto-docs.ts-4-9.mdx index 3c03a16deab1..75f31fd78fa1 100644 --- a/docs/snippets/vue/button-story-auto-docs.ts-4-9.mdx +++ b/docs/snippets/vue/button-story-auto-docs.ts-4-9.mdx @@ -1,7 +1,6 @@ ```ts // Button.stories.ts -// Replace vue3 with vue if you are using Storybook for Vue 2 import type { Meta, StoryObj } from '@storybook/vue3'; import Button from './Button.vue'; diff --git a/docs/snippets/vue/csf-3-example-starter.ts-4-9.mdx b/docs/snippets/vue/csf-3-example-starter.ts-4-9.mdx index 3d6b26d14379..f33bfd299044 100644 --- a/docs/snippets/vue/csf-3-example-starter.ts-4-9.mdx +++ b/docs/snippets/vue/csf-3-example-starter.ts-4-9.mdx @@ -1,7 +1,6 @@ ```ts // CSF 3 -// Replace vue3 with vue if you are using Storybook for Vue 2 import type { Meta, StoryObj } from '@storybook/vue3'; import Button from './Button.vue'; diff --git a/docs/snippets/vue/csf-3-example-starter.ts.mdx b/docs/snippets/vue/csf-3-example-starter.ts.mdx index 2dc150b1d738..e13b2470da4e 100644 --- a/docs/snippets/vue/csf-3-example-starter.ts.mdx +++ b/docs/snippets/vue/csf-3-example-starter.ts.mdx @@ -1,7 +1,6 @@ ```ts // CSF 3 -// Replace vue3 with vue if you are using Storybook for Vue 2 import type { Meta, StoryObj } from '@storybook/vue3'; import Button from './Button.vue'; diff --git a/docs/toc.js b/docs/toc.js index 97a927484010..601adf1c9218 100644 --- a/docs/toc.js +++ b/docs/toc.js @@ -582,11 +582,6 @@ module.exports = { pathSegment: 'main-config-webpack-final', type: 'link', }, - { - title: 'config', - pathSegment: 'main-config-config', - type: 'link', - }, ], }, { diff --git a/docs/versions/next.json b/docs/versions/next.json index f32c9fefec9d..5cafa5e5cdea 100644 --- a/docs/versions/next.json +++ b/docs/versions/next.json @@ -1 +1 @@ -{"version":"8.0.0-alpha.15","info":{"plain":"- Next.js: Add logger statements for compiler selection - [#25755](https://github.com/storybookjs/storybook/pull/25755), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- React-Native: Fixes for v8 compatibility - [#25678](https://github.com/storybookjs/storybook/pull/25678), thanks [@shilman](https://github.com/shilman)!\n- UI: Remove use of React.FC in components - [#25588](https://github.com/storybookjs/storybook/pull/25588), thanks [@ShaunEvening](https://github.com/ShaunEvening)!\n- 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)!\n- Vue3: Introduce portable stories API - [#25443](https://github.com/storybookjs/storybook/pull/25443), thanks [@yannbf](https://github.com/yannbf)!"}} +{"version":"8.0.0-alpha.16","info":{"plain":"- CLI: Fix `upgrade` detecting the wrong version of existing Storybooks - [#25752](https://github.com/storybookjs/storybook/pull/25752), thanks [@JReinhold](https://github.com/JReinhold)!\n- CLI: Update init for react native v7 - [#25780](https://github.com/storybookjs/storybook/pull/25780), thanks [@dannyhw](https://github.com/dannyhw)!\n- UI: Improve how the addon panel work on mobile - [#25787](https://github.com/storybookjs/storybook/pull/25787), thanks [@cdedreuille](https://github.com/cdedreuille)!"}}