diff --git a/.circleci/config.yml b/.circleci/config.yml index 00f3a552e09a..cb0d2589d78e 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -43,7 +43,7 @@ executors: default: 'small' working_directory: /tmp/storybook docker: - - image: mcr.microsoft.com/playwright:v1.29.1-focal + - image: mcr.microsoft.com/playwright:v1.30.0-focal environment: NODE_OPTIONS: --max_old_space_size=6144 resource_class: <> diff --git a/CHANGELOG.md b/CHANGELOG.md index 460160d78cb3..bc05fdce3ecb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,50 @@ +## 7.0.0-beta.33 (January 24, 2023) + +#### Features + +- Addon-docs: Allow `` to reference the first story [#20765](https://github.com/storybooks/storybook/pull/20765) + +#### Bug Fixes + +- Angular: Fix issue if BrowserAnimationsModule is imported [#20709](https://github.com/storybooks/storybook/pull/20709) +- Core: Fix issue with inconsistent CSF ordering in sandboxes [#20705](https://github.com/storybooks/storybook/pull/20705) +- Fixed paths in generated main.cjs for the default sandbox on Windows [#20724](https://github.com/storybooks/storybook/pull/20724) +- Blocks: Ignore known blocks with global CSS selector [#20757](https://github.com/storybooks/storybook/pull/20757) + +#### Maintenance + +- Docs: Make reference stories consistent [#20759](https://github.com/storybooks/storybook/pull/20759) +- Blocks: New Canvas API [#20723](https://github.com/storybooks/storybook/pull/20723) + +#### Build + +- Fix vue sandbox: remove the lang=ts in a file, that should remain agnostic [#20768](https://github.com/storybooks/storybook/pull/20768) +- Build: do not treat check as a cache-able operation && cleanup [#20762](https://github.com/storybooks/storybook/pull/20762) + +## 7.0.0-beta.32 (January 24, 2023) + +#### Features + +- CLI: Add init support for qwik projects [#20411](https://github.com/storybooks/storybook/pull/20411) + +#### Bug Fixes + +- Vue3: Fix reactive args + many vue app creation issue [#20712](https://github.com/storybooks/storybook/pull/20712) +- Docs: Allow "declaring" stories with `story={}` [#20702](https://github.com/storybooks/storybook/pull/20702) +- Addon-links: Fix the d.ts file, deprecate LinkTo [#20671](https://github.com/storybooks/storybook/pull/20671) +- CLI: Fix package execution for npm package manager [#20708](https://github.com/storybooks/storybook/pull/20708) + +#### Maintenance + +- Upgrade react-popper-tooltip [#20736](https://github.com/storybooks/storybook/pull/20736) +- CLI: Upgrade automigrations to use new safe helpers [#20693](https://github.com/storybooks/storybook/pull/20693) +- Csf-tools: Add helpers to get name from node path [#20691](https://github.com/storybooks/storybook/pull/20691) +- Build: remove preact-webpack5 from babelrc automigration [#20706](https://github.com/storybooks/storybook/pull/20706) + +#### Build + +- Fix windows snapshot [#20707](https://github.com/storybooks/storybook/pull/20707) + ## 7.0.0-beta.31 (January 20, 2023) #### Features diff --git a/MIGRATION.md b/MIGRATION.md index 86ef85ce8a91..914cd3a1b8ee 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -40,12 +40,17 @@ - [Icons API changed](#icons-api-changed) - [Removed global client APIs](#removed-global-client-apis) - [Docs Changes](#docs-changes) - - [Standalone docs files](#standalone-docs-files) - - [Referencing stories in docs files](#referencing-stories-in-docs-files) - - [Description block, `parameters.notes` and `parameters.info`](#description-block-parametersnotes-and-parametersinfo) - - [Autodocs](#autodocs) - - [Configuring the Docs Container](#configuring-the-docs-container) - - [External Docs](#external-docs) + - [Autodocs changes](#autodocs-changes) + - [MDX docs files](#mdx-docs-files) + - [Unattached docs files](#unattached-docs-files) + - [Doc Blocks](#doc-blocks) + - [Meta block](#meta-block) + - [Description block, `parameters.notes` and `parameters.info`](#description-block-parametersnotes-and-parametersinfo) + - [Story block](#story-block) + - [Source block](#source-block) + - [Canvas block](#canvas-block) + - [ArgsTable block](#argstable-block) + - [Configuring Autodocs](#configuring-autodocs) - [MDX2 upgrade](#mdx2-upgrade) - [Legacy MDX1 support](#legacy-mdx1-support) - [Default docs styles will leak into non-story user components](#default-docs-styles-will-leak-into-non-story-user-components) @@ -744,36 +749,100 @@ Instead, use `export const parameters = {};` and `export const decorators = [];` ### Docs Changes -The information hierarchy of docs in Storybook has changed in 7.0. The main difference is that each docs is listed in the sidebar as a separate entry, rather than attached to individual stories. +The information hierarchy of docs in Storybook has changed in 7.0. The main difference is that each docs is listed in the sidebar as a separate entry underneath the component, rather than attached to individual stories. You can also opt-in to a Autodocs entry rather than having one for every component (previously stories). -These changes are encapsulated in the following: +We've also modernized the API for all the doc blocks (the MDX components you use to write custom docs pages), which we'll describe below. -#### Standalone docs files +#### Autodocs changes -In Storybook 6.x, to create a standalone docs MDX file, you'd have to create a `.stories.mdx` file, and describe its location with the `Meta` doc block: +In 7.0, rather than rendering each story in "docs view mode", Autodocs (formerly known as "Docs Page") operates by adding additional sidebar entries for each component. By default it uses the same template as was used in 6.x, and the entries are entitled `Docs`. -```mdx -import { Meta } from '@storybook/addon-docs'; +You can configure Autodocs in `main.js`: - +```js +module.exports = { + docs: { + autodocs: true, // see below for alternatives + defaultName: 'Docs', // set to change the name of generated docs entries + }, +}; ``` -In 7.0, things are a little simpler -- you should call the file `.mdx` (drop the `.stories`). This will mean behind the scenes there is no story attached to this entry. You may also drop the `title` and use autotitle (and leave the `Meta` component out entirely). +If you are migrating from 6.x your `docs.autodocs` option will have been set to `true`, which has the effect of enabling docs page for _every_ CSF file. However, as of 7.0, the new default is `'tag'`, which requires opting into Autodocs per-CSF file, with the `autodocs` **tag** on your component export: + +```ts +export default { + component: MyComponent + // Tags are a new feature coming in 7.1, that we are using to drive this behaviour. + tags: ['autodocs'] +} +``` + +You can also set `autodocs: false` to opt-out of Autodocs entirely. Further configuration of Autodocs is described below. + +**Parameter changes** -Additionally, you can attach a standalone docs entry to a component, using the new `of={}` syntax on the `Meta` component: +We've renamed many of the parameters that control docs rendering for consistency with the blocks (see below). The old parameters are now deprecated and will be removed in 8.0. Here is a full list of changes: + +- `docs.inlineStories` has been renamed `docs.story.inline` +- `docs.iframeHeight` has been renamed `docs.story.iframeHeight` +- `notes` and `info` are no longer supported, instead use `docs.description.story | component` + +#### MDX docs files + +Previously `.stories.mdx` files were used to both define and document stories. In 7.0, we have deprecated defining stories in MDX files, and consequently have changed the suffix to simply `.mdx`. Our default `stories` glob in `main.js` will now match such files -- if you want to write MDX files that do not appear in Storybook, you may need to adjust the glob accordingly. + +If you were using `.stories.mdx` files to write stories, we encourage you to move the stories to a CSF file, and _attach_ an `.mdx` file to that CSF file to document them. You can use the `Meta` block to attach a MDX file to a CSF file, and the `Story` block to render the stories: ```mdx -import { Meta } from '@storybook/blocks'; +import { Meta, Story } from '@storybook/blocks'; import * as ComponentStories from './some-component.stories'; + + ``` -You can create as many docs entries as you like for a given component. Note that if you attach a docs entry to a component it will replace the automatically generated entry from `DocsPage` (See below). +You can create as many docs entries as you like for a given component. Note that if you attach a docs entry to a component it will replace the automatically generated entry from Autodocs. By default docs entries are listed first for the component. You can sort them using story sorting. -#### Referencing stories in docs files +#### Unattached docs files + +In Storybook 6.x, to create a unattached docs MDX file (that is, one not attached to story or a CSF file), you'd have to create a `.stories.mdx` file, and describe its location with the `Meta` doc block: + +```mdx +import { Meta } from '@storybook/addon-docs'; + + +``` + +In 7.0, things are a little simpler -- you should call the file `.mdx` (drop the `.stories`). This will mean behind the scenes there is no story attached to this entry. You may also drop the `title` and use autotitle (and leave the `Meta` component out entirely, potentially). + +#### Doc Blocks + +Additionally to changing the docs information architecture, we've updated the API of the doc blocks themselves to be more consistent and future proof. + +**General changes** + +- Each block now uses `of={}` as a primary API -- where the argument to the `of` prop is a CSF or story _export_. + +- When you've attached to a CSF file (with the `Meta` block, or in Autodocs), you can drop the `of` and the block will reference the first story or the CSF file as a whole. + +- Most other props controlling rendering of blocks now correspond precisely to the parameters for that block [defined for autodocs above](#autodocs-changes). + +##### Meta block + +The primary change of the `Meta` block is the ability to attach to CSF files with `` as described above. + +##### Description block, `parameters.notes` and `parameters.info` + +In 6.5 the Description doc block accepted a range of different props, `markdown`, `type` and `children` as a way to customize the content. +The props have been simplified and the block now only accepts an `of` prop, which can be a reference to either a CSF file, a default export (meta) or a story export, depending on which description you want to be shown. See TDB DOCS LINK for a deeper explanation of the new prop. + +`parameters.notes` and `parameters.info` have been deprecated as a way to specify descriptions. Instead use JSDoc comments above the default export or story export, or use `parameters.docs.description.story | component` directly. See TDB DOCS LINK for a deeper explanation on how to write descriptions. + +##### Story block To reference a story in a MDX file, you should reference it with `of`: @@ -798,43 +867,70 @@ import * as SecondComponentStories from './second-component.stories'; ``` -#### Description block, `parameters.notes` and `parameters.info` +Referencing stories by `id="xyz--abc"` is deprecated and should be replaced with `of={}` as above. -In 6.5 the Description doc block accepted a range of different props, `markdown`, `type` and `children` as a way to customize the content. -The props have been simplified and the block now only accepts an `of` prop, which can be a reference to either a CSF file, a default export (meta) or a story export, depending on which description you want to be shown. See TDB DOCS LINK for a deeper explanation of the new prop. +##### Source block -`parameters.notes` and `parameters.info` have been deprecated as a way to specify descriptions. Instead use JSDoc comments above the default export or story export, or use `parameters.docs.description.story | component` directly. See TDB DOCS LINK for a deeper explanation on how to write descriptions. +The source block now references a single story, the component, or a CSF file itself via the `of={}` parameter. -#### Autodocs +Referencing stories by `id="xyz--abc"` is deprecated and should be replaced with `of={}` as above. Referencing multiple stories via `ids={["xyz--abc"]}` is now deprecated and should be avoided (instead use two source blocks). -In 7.0, rather than rendering each story in "docs view mode", Autodocs (formerly known as "Docs Page") operates by adding additional sidebar entries for each component. By default it uses the same template as was used in 6.x, and the entries are entitled `Docs`. +#### Canvas block -You can configure Autodocs in `main.js`: +The Canvas block follows the same changes as [the Story block described above](#story-block). -```js -module.exports = { - docs: { - autodocs: true, // see below for alternatives - defaultName: 'Docs', // set to change the name of generated docs entries - }, -}; -``` +Previously the Canvas block accepted children (Story blocks) as a way to reference stories. That has now been replaced with the `of={}` prop that accepts a reference to _a story_. +That also means the Canvas block no longer supports containing multiple stories or elements, and thus the props related to that - `isColumn` and `columns` - have also been deprecated. -If you are migrating from 6.x your `docs.autodocs` option will have been set to `true`, which has the effect of enabling docs page for _every_ CSF file. However, as of 7.0, the new default is `'tag'`, which requires opting into Autodocs per-CSF file, with the `autodocs` **tag** on your component export: +- To pass props to the inner Story block use the `story={{ }}` prop +- Similarly, to pass props to the inner Source block use the `source={{ }}` prop. +- The `mdxSource` prop has been deprecated in favor of using `source={{ code: '...' }}` +- The `withSource` prop has been renamed to `sourceState` -```ts -export default { - component: MyComponent - // Tags are a new feature coming in 7.1, that we are using to drive this behaviour. - tags: ['autodocs'] -} +Here's a full example of the new API: + +```mdx +import { Meta, Canvas } from '@storybook/blocks'; +import * as ComponentStories from './some-component.stories'; + + + + ``` -You can also set `autodocs: false` to opt-out of Autodocs entirely. +##### ArgsTable block + +The `ArgsTable` block is now deprecated, and two new blocks: `ArgsTypes` and `Controls` should be preferred. + +- `` will render a readonly table of args/props descriptions for a story, CSF file or component. If `of` ommitted and the MDX file is attached it will render the arg types defined at the CSF file level. -You can change the default template in the same way as in 6.x, using the `docs.page` parameter. +- `` will render the controls for a story (or the primary story if `of` is omitted and the MDX file is attached). -#### Configuring the Docs Container +The following props are not supported in the new blocks: + +- `components` - to render more than one component in a single table +- `showComponent` to show the component's props as well as the story's args +- the `subcomponents` annotation to show more components on the table. +- `of="^"` to reference the meta (just omit `of` in that case, for `ArgTypes`). +- `story="^"` to reference the primary story (just omit `of` in that case, for `Controls`). +- `story="."` to reference the current story (this no longer makes sense in Docs 2). +- `story="name"` to reference a story (use `of={}`). + +#### Configuring Autodocs As in 6.x, you can override the docs container to configure docs further. This is the container that each docs entry is rendered inside: @@ -848,6 +944,8 @@ export const parameters = { } ``` +Note that the container must be implemented as a _React component_. + You likely want to use the `DocsContainer` component exported by `@storybook/blocks` and consider the following examples: **Overriding theme**: @@ -877,28 +975,6 @@ export const MyDocsContainer = (props) => ( **_NOTE_**: due to breaking changes in MDX2, such override will _only_ apply to elements you create via the MDX syntax, not pure HTML -- ie. `## content` not `

content

`. -#### External Docs - -Storybook 7.0 can be used in the above way in externally created projects (i.e. custom docs sites). Your `.mdx` files defined as above should be portable to other contexts. You simply need to render them in an `ExternalDocs` component: - -```js -// In your project somewhere: -import { ExternalDocs } from '@storybook/blocks'; - -// Import all the preview entries from addons that need to operate in your external docs, -// at a minimum likely your project's and your renderer's. -import * as reactAnnotations from '@storybook/react/preview'; -import * as previewAnnotations from '../.storybook/preview'; - -export default function App({ Component, pageProps }) { - return ( - - - - ); -} -``` - #### MDX2 upgrade Storybook 7 Docs uses MDXv2 instead of MDXv1. This means an improved syntax, support for inline JS expression, and improved performance among [other benefits](https://mdxjs.com/blog/v2/). diff --git a/README.md b/README.md index 09db01f2fc1f..ab9c9cab4456 100644 --- a/README.md +++ b/README.md @@ -109,6 +109,7 @@ For additional help, join us in the [Storybook Discord](https://discord.gg/story | [Svelte](code/renderers/svelte) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/svelte/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/svelte-kitchen-sink/) | [![Svelte](https://img.shields.io/npm/dm/@storybook/svelte?style=flat-square&color=eee)](code/renderers/svelte) | | [Preact](code/renderers/preact) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/preact/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/preact-kitchen-sink/) | [![Preact](https://img.shields.io/npm/dm/@storybook/preact?style=flat-square&color=eee)](code/renderers/preact) | | [Marionette.js](https://github.com/storybookjs/marionette) | - | [![Marionette.js](https://img.shields.io/npm/dm/@storybook/marionette?style=flat-square&color=eee)](https://github.com/storybookjs/marionette) | +| [Qwik](https://github.com/literalpie/storybook-framework-qwik) | - | [![Qwik](https://img.shields.io/npm/dm/storybook-framework-qwik?style=flat-square&color=eee)](https://github.com/literalpie/storybook-framework-qwik) | | [Android, iOS, Flutter](https://github.com/storybookjs/native) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/native/latest?style=flat-square&color=blue&label)](https://storybookjs.github.io/native/@storybook/native-flutter-example/index.html) | [![Native](https://img.shields.io/npm/dm/@storybook/native?style=flat-square&color=eee)](https://github.com/storybookjs/native) | ### Sub Projects diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index c11c90d1cfc6..7b19d4008453 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-a11y", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Test component compliance with web accessibility standards", "keywords": [ "a11y", @@ -63,16 +63,16 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/addon-highlight": "7.0.0-beta.31", - "@storybook/channels": "7.0.0-beta.31", - "@storybook/client-logger": "7.0.0-beta.31", - "@storybook/components": "7.0.0-beta.31", - "@storybook/core-events": "7.0.0-beta.31", + "@storybook/addon-highlight": "7.0.0-beta.33", + "@storybook/channels": "7.0.0-beta.33", + "@storybook/client-logger": "7.0.0-beta.33", + "@storybook/components": "7.0.0-beta.33", + "@storybook/core-events": "7.0.0-beta.33", "@storybook/global": "^5.0.0", - "@storybook/manager-api": "7.0.0-beta.31", - "@storybook/preview-api": "7.0.0-beta.31", - "@storybook/theming": "7.0.0-beta.31", - "@storybook/types": "7.0.0-beta.31", + "@storybook/manager-api": "7.0.0-beta.33", + "@storybook/preview-api": "7.0.0-beta.33", + "@storybook/theming": "7.0.0-beta.33", + "@storybook/types": "7.0.0-beta.33", "axe-core": "^4.2.0", "lodash": "^4.17.21", "react-resize-detector": "^7.1.2" @@ -104,7 +104,7 @@ "./src/preview.tsx" ] }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807", + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7", "storybook": { "displayName": "Accessibility", "icon": "https://user-images.githubusercontent.com/263385/101991665-47042f80-3c7c-11eb-8f00-64b5a18f498a.png", diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json index 8d98e10cd50f..3eb3af214538 100644 --- a/code/addons/actions/package.json +++ b/code/addons/actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-actions", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Get UI feedback when an action is performed on an interactive element", "keywords": [ "storybook", @@ -77,14 +77,14 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.0.0-beta.31", - "@storybook/components": "7.0.0-beta.31", - "@storybook/core-events": "7.0.0-beta.31", + "@storybook/client-logger": "7.0.0-beta.33", + "@storybook/components": "7.0.0-beta.33", + "@storybook/core-events": "7.0.0-beta.33", "@storybook/global": "^5.0.0", - "@storybook/manager-api": "7.0.0-beta.31", - "@storybook/preview-api": "7.0.0-beta.31", - "@storybook/theming": "7.0.0-beta.31", - "@storybook/types": "7.0.0-beta.31", + "@storybook/manager-api": "7.0.0-beta.33", + "@storybook/preview-api": "7.0.0-beta.33", + "@storybook/theming": "7.0.0-beta.33", + "@storybook/types": "7.0.0-beta.33", "dequal": "^2.0.2", "lodash": "^4.17.21", "polished": "^4.2.2", @@ -121,7 +121,7 @@ "./src/preview.ts" ] }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807", + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7", "storybook": { "displayName": "Actions", "unsupportedFrameworks": [ diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json index c97293ccea3e..228b3bfcbe9c 100644 --- a/code/addons/backgrounds/package.json +++ b/code/addons/backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-backgrounds", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Switch backgrounds to view components in different settings", "keywords": [ "addon", @@ -76,14 +76,14 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.0.0-beta.31", - "@storybook/components": "7.0.0-beta.31", - "@storybook/core-events": "7.0.0-beta.31", + "@storybook/client-logger": "7.0.0-beta.33", + "@storybook/components": "7.0.0-beta.33", + "@storybook/core-events": "7.0.0-beta.33", "@storybook/global": "^5.0.0", - "@storybook/manager-api": "7.0.0-beta.31", - "@storybook/preview-api": "7.0.0-beta.31", - "@storybook/theming": "7.0.0-beta.31", - "@storybook/types": "7.0.0-beta.31", + "@storybook/manager-api": "7.0.0-beta.33", + "@storybook/preview-api": "7.0.0-beta.33", + "@storybook/theming": "7.0.0-beta.33", + "@storybook/types": "7.0.0-beta.33", "memoizerific": "^1.11.3", "ts-dedent": "^2.0.0" }, @@ -112,7 +112,7 @@ "./src/preview.tsx" ] }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807", + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7", "storybook": { "displayName": "Backgrounds", "icon": "https://user-images.githubusercontent.com/263385/101991667-479cc600-3c7c-11eb-96d3-410e936252e7.png", diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json index 73d0926a9b3d..3647260101cc 100644 --- a/code/addons/controls/package.json +++ b/code/addons/controls/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-controls", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Interact with component inputs dynamically in the Storybook UI", "keywords": [ "addon", @@ -68,15 +68,15 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/blocks": "7.0.0-beta.31", - "@storybook/client-logger": "7.0.0-beta.31", - "@storybook/components": "7.0.0-beta.31", - "@storybook/core-common": "7.0.0-beta.31", - "@storybook/manager-api": "7.0.0-beta.31", - "@storybook/node-logger": "7.0.0-beta.31", - "@storybook/preview-api": "7.0.0-beta.31", - "@storybook/theming": "7.0.0-beta.31", - "@storybook/types": "7.0.0-beta.31", + "@storybook/blocks": "7.0.0-beta.33", + "@storybook/client-logger": "7.0.0-beta.33", + "@storybook/components": "7.0.0-beta.33", + "@storybook/core-common": "7.0.0-beta.33", + "@storybook/manager-api": "7.0.0-beta.33", + "@storybook/node-logger": "7.0.0-beta.33", + "@storybook/preview-api": "7.0.0-beta.33", + "@storybook/theming": "7.0.0-beta.33", + "@storybook/types": "7.0.0-beta.33", "lodash": "^4.17.21", "ts-dedent": "^2.0.0" }, @@ -102,7 +102,7 @@ ], "platform": "browser" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807", + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7", "storybook": { "displayName": "Controls", "icon": "https://user-images.githubusercontent.com/263385/101991669-479cc600-3c7c-11eb-93d9-38b67e8371f2.png", diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index e6a8ce28b9ac..7ec40825a09c 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-docs", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Document component usage and properties in Markdown", "keywords": [ "addon", @@ -103,19 +103,19 @@ "@babel/plugin-transform-react-jsx": "^7.19.0", "@jest/transform": "^29.3.1", "@mdx-js/react": "^2.1.5", - "@storybook/blocks": "7.0.0-beta.31", - "@storybook/client-logger": "7.0.0-beta.31", - "@storybook/components": "7.0.0-beta.31", - "@storybook/csf-plugin": "7.0.0-beta.31", - "@storybook/csf-tools": "7.0.0-beta.31", + "@storybook/blocks": "7.0.0-beta.33", + "@storybook/client-logger": "7.0.0-beta.33", + "@storybook/components": "7.0.0-beta.33", + "@storybook/csf-plugin": "7.0.0-beta.33", + "@storybook/csf-tools": "7.0.0-beta.33", "@storybook/global": "^5.0.0", "@storybook/mdx2-csf": "next", - "@storybook/node-logger": "7.0.0-beta.31", - "@storybook/postinstall": "7.0.0-beta.31", - "@storybook/preview-api": "7.0.0-beta.31", - "@storybook/theming": "7.0.0-beta.31", - "@storybook/types": "7.0.0-beta.31", - "fs-extra": "^9.0.1", + "@storybook/node-logger": "7.0.0-beta.33", + "@storybook/postinstall": "7.0.0-beta.33", + "@storybook/preview-api": "7.0.0-beta.33", + "@storybook/theming": "7.0.0-beta.33", + "@storybook/types": "7.0.0-beta.33", + "fs-extra": "^11.1.0", "remark-external-links": "^8.0.0", "remark-slug": "^6.0.0", "ts-dedent": "^2.0.0" @@ -147,7 +147,7 @@ "./src/shims/mdx-react-shim.ts" ] }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807", + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7", "storybook": { "displayName": "Docs", "icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png", diff --git a/code/addons/docs/template/stories/stories-mdx/csf-in-mdx.stories.mdx b/code/addons/docs/template/stories/stories-mdx/csf-in-mdx.stories.mdx index fda87f38fd6b..e720e4a2bd63 100644 --- a/code/addons/docs/template/stories/stories-mdx/csf-in-mdx.stories.mdx +++ b/code/addons/docs/template/stories/stories-mdx/csf-in-mdx.stories.mdx @@ -11,13 +11,13 @@ overhauled and improved in 7.0, and the legacy mode is now deprecated and will b removed in 8.0. - + - + ## Duplicate stories diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json index df6fc1d2715b..0ed4ad615f58 100644 --- a/code/addons/essentials/package.json +++ b/code/addons/essentials/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-essentials", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Curated addons to bring out the best of Storybook", "keywords": [ "addon", @@ -119,23 +119,23 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/addon-actions": "7.0.0-beta.31", - "@storybook/addon-backgrounds": "7.0.0-beta.31", - "@storybook/addon-controls": "7.0.0-beta.31", - "@storybook/addon-docs": "7.0.0-beta.31", - "@storybook/addon-highlight": "7.0.0-beta.31", - "@storybook/addon-measure": "7.0.0-beta.31", - "@storybook/addon-outline": "7.0.0-beta.31", - "@storybook/addon-toolbars": "7.0.0-beta.31", - "@storybook/addon-viewport": "7.0.0-beta.31", - "@storybook/core-common": "7.0.0-beta.31", - "@storybook/manager-api": "7.0.0-beta.31", - "@storybook/node-logger": "7.0.0-beta.31", - "@storybook/preview-api": "7.0.0-beta.31", + "@storybook/addon-actions": "7.0.0-beta.33", + "@storybook/addon-backgrounds": "7.0.0-beta.33", + "@storybook/addon-controls": "7.0.0-beta.33", + "@storybook/addon-docs": "7.0.0-beta.33", + "@storybook/addon-highlight": "7.0.0-beta.33", + "@storybook/addon-measure": "7.0.0-beta.33", + "@storybook/addon-outline": "7.0.0-beta.33", + "@storybook/addon-toolbars": "7.0.0-beta.33", + "@storybook/addon-viewport": "7.0.0-beta.33", + "@storybook/core-common": "7.0.0-beta.33", + "@storybook/manager-api": "7.0.0-beta.33", + "@storybook/node-logger": "7.0.0-beta.33", + "@storybook/preview-api": "7.0.0-beta.33", "ts-dedent": "^2.0.0" }, "devDependencies": { - "@storybook/vue": "7.0.0-beta.31", + "@storybook/vue": "7.0.0-beta.33", "typescript": "^4.9.3" }, "peerDependencies": { @@ -166,5 +166,5 @@ ], "platform": "node" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json index 76f7b20a03e2..63291b6a0bfd 100644 --- a/code/addons/highlight/package.json +++ b/code/addons/highlight/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-highlight", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Highlight DOM nodes within your stories", "keywords": [ "storybook-addons", @@ -61,9 +61,9 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/core-events": "7.0.0-beta.31", + "@storybook/core-events": "7.0.0-beta.33", "@storybook/global": "^5.0.0", - "@storybook/preview-api": "7.0.0-beta.31" + "@storybook/preview-api": "7.0.0-beta.33" }, "devDependencies": { "@types/webpack-env": "^1.16.0", @@ -78,7 +78,7 @@ "./src/preview.ts" ] }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807", + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7", "sbmodern": "dist/modern/index.js", "storybook": { "displayName": "Highlight", diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json index bcd2f6f6e33c..a78fee8045d7 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-interactions", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Automate, test and debug user interactions", "keywords": [ "storybook-addons", @@ -72,16 +72,16 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.0.0-beta.31", - "@storybook/components": "7.0.0-beta.31", - "@storybook/core-common": "7.0.0-beta.31", - "@storybook/core-events": "7.0.0-beta.31", + "@storybook/client-logger": "7.0.0-beta.33", + "@storybook/components": "7.0.0-beta.33", + "@storybook/core-common": "7.0.0-beta.33", + "@storybook/core-events": "7.0.0-beta.33", "@storybook/global": "^5.0.0", - "@storybook/instrumenter": "7.0.0-beta.31", - "@storybook/manager-api": "7.0.0-beta.31", - "@storybook/preview-api": "7.0.0-beta.31", - "@storybook/theming": "7.0.0-beta.31", - "@storybook/types": "7.0.0-beta.31", + "@storybook/instrumenter": "7.0.0-beta.33", + "@storybook/manager-api": "7.0.0-beta.33", + "@storybook/preview-api": "7.0.0-beta.33", + "@storybook/theming": "7.0.0-beta.33", + "@storybook/types": "7.0.0-beta.33", "jest-mock": "^27.0.6", "polished": "^4.2.2", "ts-dedent": "^2.2.0" @@ -118,7 +118,7 @@ ], "platform": "node" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807", + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7", "storybook": { "displayName": "Interactions", "unsupportedFrameworks": [ diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json index 95834e567de1..109fbc684c82 100644 --- a/code/addons/jest/package.json +++ b/code/addons/jest/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-jest", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "React storybook addon that show component jest report", "keywords": [ "addon", @@ -70,13 +70,13 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.0.0-beta.31", - "@storybook/components": "7.0.0-beta.31", - "@storybook/core-events": "7.0.0-beta.31", + "@storybook/client-logger": "7.0.0-beta.33", + "@storybook/components": "7.0.0-beta.33", + "@storybook/core-events": "7.0.0-beta.33", "@storybook/global": "^5.0.0", - "@storybook/manager-api": "7.0.0-beta.31", - "@storybook/preview-api": "7.0.0-beta.31", - "@storybook/theming": "7.0.0-beta.31", + "@storybook/manager-api": "7.0.0-beta.33", + "@storybook/preview-api": "7.0.0-beta.33", + "@storybook/theming": "7.0.0-beta.33", "react-resize-detector": "^7.1.2", "upath": "^1.2.0" }, @@ -105,7 +105,7 @@ ], "platform": "browser" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807", + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7", "storybook": { "displayName": "Jest", "icon": "https://pbs.twimg.com/profile_images/821713465245102080/mMtKIMax_400x400.jpg", diff --git a/code/addons/links/package.json b/code/addons/links/package.json index 342f620491de..fc373b53a04f 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-links", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Link stories together to build demos and prototypes with your UI components", "keywords": [ "addon", @@ -63,6 +63,9 @@ ], "preview": [ "dist/preview.d.ts" + ], + "react": [ + "dist/react/index.d.ts" ] } }, @@ -77,18 +80,19 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.0.0-beta.31", - "@storybook/core-events": "7.0.0-beta.31", + "@storybook/client-logger": "7.0.0-beta.33", + "@storybook/core-events": "7.0.0-beta.33", "@storybook/csf": "next", "@storybook/global": "^5.0.0", - "@storybook/manager-api": "7.0.0-beta.31", - "@storybook/preview-api": "7.0.0-beta.31", - "@storybook/router": "7.0.0-beta.31", - "@storybook/types": "7.0.0-beta.31", + "@storybook/manager-api": "7.0.0-beta.33", + "@storybook/preview-api": "7.0.0-beta.33", + "@storybook/router": "7.0.0-beta.33", + "@storybook/types": "7.0.0-beta.33", "prop-types": "^15.7.2", "ts-dedent": "^2.0.0" }, "devDependencies": { + "fs-extra": "^11.1.0", "typescript": "~4.9.3" }, "peerDependencies": { @@ -112,9 +116,10 @@ "./src/manager.ts", "./src/preview.ts", "./src/react/index.ts" - ] + ], + "post": "./scripts/fix-preview-api-reference.ts" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807", + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7", "storybook": { "displayName": "Links", "icon": "https://user-images.githubusercontent.com/263385/101991673-48355c80-3c7c-11eb-9b6e-b627c96a75f6.png", diff --git a/code/addons/links/react.d.ts b/code/addons/links/react.d.ts index bdca492fe003..2d72882f8543 100644 --- a/code/addons/links/react.d.ts +++ b/code/addons/links/react.d.ts @@ -1,2 +1 @@ -export * from './dist/react'; -export { default } from './dist/react'; +export * from './dist/react/index'; diff --git a/code/addons/links/react.js b/code/addons/links/react.js index 685845b5dceb..7cbaa73010c1 100644 --- a/code/addons/links/react.js +++ b/code/addons/links/react.js @@ -1,3 +1,3 @@ -import LinkTo from './dist/react'; +import LinkTo from './dist/react/index'; export default LinkTo; diff --git a/code/addons/links/scripts/fix-preview-api-reference.ts b/code/addons/links/scripts/fix-preview-api-reference.ts new file mode 100644 index 000000000000..71ca667999e2 --- /dev/null +++ b/code/addons/links/scripts/fix-preview-api-reference.ts @@ -0,0 +1,19 @@ +import { readFile, writeFile } from 'fs-extra'; + +/* I wish this wasn't needed.. + * There seems to be some bug in tsup / the unlaying lib that does DTS bundling + * ...that makes it mess up the generation. + */ +const run = async () => { + const content = await readFile('./dist/index.d.ts', 'utf-8'); + + const regexp = /'lib\/preview-api/; + const replaced = content.replace(regexp, "'@storybook/preview-api"); + + await writeFile('./dist/index.d.ts', replaced); +}; + +run().catch((error) => { + console.error(error); + process.exit(1); +}); diff --git a/code/addons/links/src/index.ts b/code/addons/links/src/index.ts index 071b1de97b79..f39228817d21 100644 --- a/code/addons/links/src/index.ts +++ b/code/addons/links/src/index.ts @@ -4,6 +4,9 @@ import { dedent } from 'ts-dedent'; let hasWarned = false; +/** + * @deprecated please import this specific function from @storybook/addon-links/react + */ export function LinkTo(): null { if (!hasWarned) { // eslint-disable-next-line no-console diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json index 162166ced6ab..ae9e0e0de43f 100644 --- a/code/addons/measure/package.json +++ b/code/addons/measure/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-measure", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Inspect layouts by visualizing the box model", "keywords": [ "storybook-addons", @@ -75,13 +75,13 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.0.0-beta.31", - "@storybook/components": "7.0.0-beta.31", - "@storybook/core-events": "7.0.0-beta.31", + "@storybook/client-logger": "7.0.0-beta.33", + "@storybook/components": "7.0.0-beta.33", + "@storybook/core-events": "7.0.0-beta.33", "@storybook/global": "^5.0.0", - "@storybook/manager-api": "7.0.0-beta.31", - "@storybook/preview-api": "7.0.0-beta.31", - "@storybook/types": "7.0.0-beta.31" + "@storybook/manager-api": "7.0.0-beta.33", + "@storybook/preview-api": "7.0.0-beta.33", + "@storybook/types": "7.0.0-beta.33" }, "devDependencies": { "typescript": "~4.9.3" @@ -108,7 +108,7 @@ "./src/preview.tsx" ] }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807", + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7", "storybook": { "displayName": "Measure", "unsupportedFrameworks": [ diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json index fa7491533b4a..18a85dcc06e4 100644 --- a/code/addons/outline/package.json +++ b/code/addons/outline/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-outline", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Outline all elements with CSS to help with layout placement and alignment", "keywords": [ "storybook-addons", @@ -78,13 +78,13 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.0.0-beta.31", - "@storybook/components": "7.0.0-beta.31", - "@storybook/core-events": "7.0.0-beta.31", + "@storybook/client-logger": "7.0.0-beta.33", + "@storybook/components": "7.0.0-beta.33", + "@storybook/core-events": "7.0.0-beta.33", "@storybook/global": "^5.0.0", - "@storybook/manager-api": "7.0.0-beta.31", - "@storybook/preview-api": "7.0.0-beta.31", - "@storybook/types": "7.0.0-beta.31", + "@storybook/manager-api": "7.0.0-beta.33", + "@storybook/preview-api": "7.0.0-beta.33", + "@storybook/types": "7.0.0-beta.33", "ts-dedent": "^2.0.0" }, "devDependencies": { @@ -112,7 +112,7 @@ "./src/preview.tsx" ] }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807", + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7", "storybook": { "displayName": "Outline", "unsupportedFrameworks": [ diff --git a/code/addons/storyshots-core/package.json b/code/addons/storyshots-core/package.json index 3695e0f7b392..9712a40faacd 100644 --- a/code/addons/storyshots-core/package.json +++ b/code/addons/storyshots-core/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storyshots", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Take a code snapshot of every story automatically with Jest", "keywords": [ "addon", @@ -37,12 +37,12 @@ "dependencies": { "@jest/transform": "^29.3.1", "@storybook/babel-plugin-require-context-hook": "1.0.1", - "@storybook/client-api": "7.0.0-beta.31", - "@storybook/core-common": "7.0.0-beta.31", - "@storybook/core-webpack": "7.0.0-beta.31", + "@storybook/client-api": "7.0.0-beta.33", + "@storybook/core-common": "7.0.0-beta.33", + "@storybook/core-webpack": "7.0.0-beta.33", "@storybook/global": "^5.0.0", - "@storybook/preview-api": "7.0.0-beta.31", - "@storybook/types": "7.0.0-beta.31", + "@storybook/preview-api": "7.0.0-beta.33", + "@storybook/types": "7.0.0-beta.33", "@types/glob": "^7.1.3", "@types/jest-specific-snapshot": "^0.5.6", "core-js": "^3.8.2", @@ -58,11 +58,11 @@ "@angular/core": "^13.3.6", "@angular/platform-browser-dynamic": "^13.3.6", "@emotion/jest": "^11.8.0", - "@storybook/addon-docs": "7.0.0-beta.31", - "@storybook/angular": "7.0.0-beta.31", - "@storybook/react": "7.0.0-beta.31", - "@storybook/vue": "7.0.0-beta.31", - "@storybook/vue3": "7.0.0-beta.31", + "@storybook/addon-docs": "7.0.0-beta.33", + "@storybook/angular": "7.0.0-beta.33", + "@storybook/react": "7.0.0-beta.33", + "@storybook/vue": "7.0.0-beta.33", + "@storybook/vue3": "7.0.0-beta.33", "babel-loader": "^9.1.2", "enzyme": "^3.11.0", "enzyme-adapter-react-16": "^1.15.5", @@ -143,7 +143,7 @@ "access": "public" }, "bundler": {}, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807", + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7", "storybook": { "displayName": "Storyshots", "icon": "https://user-images.githubusercontent.com/263385/101991676-48cdf300-3c7c-11eb-8aa1-944dab6ab29b.png", diff --git a/code/addons/storyshots-puppeteer/package.json b/code/addons/storyshots-puppeteer/package.json index a7cc09d5c039..8317bc8372f9 100644 --- a/code/addons/storyshots-puppeteer/package.json +++ b/code/addons/storyshots-puppeteer/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storyshots-puppeteer", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Image snapshots addition to StoryShots based on puppeteer", "keywords": [ "addon", @@ -36,8 +36,8 @@ "dependencies": { "@axe-core/puppeteer": "^4.2.0", "@storybook/csf": "next", - "@storybook/node-logger": "7.0.0-beta.31", - "@storybook/types": "7.0.0-beta.31", + "@storybook/node-logger": "7.0.0-beta.33", + "@storybook/types": "7.0.0-beta.33", "@types/jest-image-snapshot": "^5.1.0", "jest-image-snapshot": "^6.0.0" }, @@ -49,7 +49,7 @@ "rimraf": "^3.0.2" }, "peerDependencies": { - "@storybook/addon-storyshots": "7.0.0-beta.31", + "@storybook/addon-storyshots": "7.0.0-beta.33", "puppeteer": ">=2.0.0" }, "peerDependenciesMeta": { @@ -61,5 +61,5 @@ "access": "public" }, "bundler": {}, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json index dadbf9e3ab21..c29a46816342 100644 --- a/code/addons/storysource/package.json +++ b/code/addons/storysource/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storysource", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "View a story’s source code to see how it works and paste into your app", "keywords": [ "addon", @@ -54,13 +54,13 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.0.0-beta.31", - "@storybook/components": "7.0.0-beta.31", - "@storybook/manager-api": "7.0.0-beta.31", - "@storybook/preview-api": "7.0.0-beta.31", - "@storybook/router": "7.0.0-beta.31", - "@storybook/source-loader": "7.0.0-beta.31", - "@storybook/theming": "7.0.0-beta.31", + "@storybook/client-logger": "7.0.0-beta.33", + "@storybook/components": "7.0.0-beta.33", + "@storybook/manager-api": "7.0.0-beta.33", + "@storybook/preview-api": "7.0.0-beta.33", + "@storybook/router": "7.0.0-beta.33", + "@storybook/source-loader": "7.0.0-beta.33", + "@storybook/theming": "7.0.0-beta.33", "estraverse": "^5.2.0", "prop-types": "^15.7.2", "react-syntax-highlighter": "^15.5.0" @@ -92,7 +92,7 @@ "./src/preset.ts" ] }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807", + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7", "storybook": { "displayName": "Storysource", "icon": "https://user-images.githubusercontent.com/263385/101991675-48cdf300-3c7c-11eb-9400-58de5ac6daa7.png", diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json index 08758bbf4fd9..cacda29eb6b0 100644 --- a/code/addons/toolbars/package.json +++ b/code/addons/toolbars/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-toolbars", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Create your own toolbar items that control story rendering", "keywords": [ "addon", @@ -68,11 +68,11 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.0.0-beta.31", - "@storybook/components": "7.0.0-beta.31", - "@storybook/manager-api": "7.0.0-beta.31", - "@storybook/preview-api": "7.0.0-beta.31", - "@storybook/theming": "7.0.0-beta.31" + "@storybook/client-logger": "7.0.0-beta.33", + "@storybook/components": "7.0.0-beta.33", + "@storybook/manager-api": "7.0.0-beta.33", + "@storybook/preview-api": "7.0.0-beta.33", + "@storybook/theming": "7.0.0-beta.33" }, "devDependencies": { "typescript": "~4.9.3" @@ -99,7 +99,7 @@ ], "platform": "browser" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807", + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7", "storybook": { "displayName": "Toolbars", "icon": "https://user-images.githubusercontent.com/263385/101991677-48cdf300-3c7c-11eb-93b4-19b0e3366959.png", diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json index c752d33e5193..607e8bcb3b3c 100644 --- a/code/addons/viewport/package.json +++ b/code/addons/viewport/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-viewport", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Build responsive components by adjusting Storybook’s viewport size and orientation", "keywords": [ "addon", @@ -73,13 +73,13 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.0.0-beta.31", - "@storybook/components": "7.0.0-beta.31", - "@storybook/core-events": "7.0.0-beta.31", + "@storybook/client-logger": "7.0.0-beta.33", + "@storybook/components": "7.0.0-beta.33", + "@storybook/core-events": "7.0.0-beta.33", "@storybook/global": "^5.0.0", - "@storybook/manager-api": "7.0.0-beta.31", - "@storybook/preview-api": "7.0.0-beta.31", - "@storybook/theming": "7.0.0-beta.31", + "@storybook/manager-api": "7.0.0-beta.33", + "@storybook/preview-api": "7.0.0-beta.33", + "@storybook/theming": "7.0.0-beta.33", "memoizerific": "^1.11.3", "prop-types": "^15.7.2" }, @@ -109,7 +109,7 @@ "./src/preview.ts" ] }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807", + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7", "storybook": { "displayName": "Viewport", "icon": "https://user-images.githubusercontent.com/263385/101991678-48cdf300-3c7c-11eb-9764-f8af293c1b28.png", diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json index b3675a20c726..7d9240544b33 100644 --- a/code/frameworks/angular/package.json +++ b/code/frameworks/angular/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/angular", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.", "keywords": [ "storybook", @@ -36,20 +36,20 @@ "prep": "../../../scripts/prepare/tsc.ts" }, "dependencies": { - "@storybook/builder-webpack5": "7.0.0-beta.31", - "@storybook/cli": "7.0.0-beta.31", - "@storybook/client-logger": "7.0.0-beta.31", - "@storybook/core-client": "7.0.0-beta.31", - "@storybook/core-common": "7.0.0-beta.31", - "@storybook/core-events": "7.0.0-beta.31", - "@storybook/core-server": "7.0.0-beta.31", - "@storybook/core-webpack": "7.0.0-beta.31", - "@storybook/docs-tools": "7.0.0-beta.31", + "@storybook/builder-webpack5": "7.0.0-beta.33", + "@storybook/cli": "7.0.0-beta.33", + "@storybook/client-logger": "7.0.0-beta.33", + "@storybook/core-client": "7.0.0-beta.33", + "@storybook/core-common": "7.0.0-beta.33", + "@storybook/core-events": "7.0.0-beta.33", + "@storybook/core-server": "7.0.0-beta.33", + "@storybook/core-webpack": "7.0.0-beta.33", + "@storybook/docs-tools": "7.0.0-beta.33", "@storybook/global": "^5.0.0", - "@storybook/manager-api": "7.0.0-beta.31", - "@storybook/node-logger": "7.0.0-beta.31", - "@storybook/preview-api": "7.0.0-beta.31", - "@storybook/types": "7.0.0-beta.31", + "@storybook/manager-api": "7.0.0-beta.33", + "@storybook/node-logger": "7.0.0-beta.33", + "@storybook/preview-api": "7.0.0-beta.33", + "@storybook/types": "7.0.0-beta.33", "@types/node": "^16.0.0", "@types/react": "^16.14.34", "@types/react-dom": "^16.9.14", @@ -67,16 +67,17 @@ }, "devDependencies": { "@angular-devkit/architect": "^0.1500.4", - "@angular-devkit/build-angular": "^15.0.4", - "@angular-devkit/core": "^15.0.4", - "@angular/cli": "^15.0.4", - "@angular/common": "^15.0.4", - "@angular/compiler": "^15.0.4", - "@angular/compiler-cli": "^15.0.4", - "@angular/core": "^15.0.4", - "@angular/forms": "^15.0.4", - "@angular/platform-browser": "^15.0.4", - "@angular/platform-browser-dynamic": "^15.0.4", + "@angular-devkit/build-angular": "^15.1.1", + "@angular-devkit/core": "^15.1.1", + "@angular/animations": "^15.1.1", + "@angular/cli": "^15.1.1", + "@angular/common": "^15.1.1", + "@angular/compiler": "^15.1.1", + "@angular/compiler-cli": "^15.1.1", + "@angular/core": "^15.1.1", + "@angular/forms": "^15.1.1", + "@angular/platform-browser": "^15.1.1", + "@angular/platform-browser-dynamic": "^15.1.1", "@types/rimraf": "^3.0.2", "@types/tmp": "^0.2.3", "cross-spawn": "^7.0.3", @@ -90,17 +91,17 @@ "zone.js": "^0.12.0" }, "peerDependencies": { - "@angular-devkit/architect": ">=0.1400.0", - "@angular-devkit/build-angular": ">=14.0.0", - "@angular-devkit/core": ">=14.0.0", - "@angular/cli": ">=14.0.0", - "@angular/common": ">=14.0.0", - "@angular/compiler": ">=14.0.0", - "@angular/compiler-cli": ">=14.0.0", - "@angular/core": ">=14.0.0", - "@angular/forms": ">=14.0.0", - "@angular/platform-browser": ">=14.0.0", - "@angular/platform-browser-dynamic": ">=14.0.0", + "@angular-devkit/architect": ">=0.1400.0 < 0.1600.0", + "@angular-devkit/build-angular": ">=14.1.0 < 16.0.0", + "@angular-devkit/core": ">=14.1.0 < 16.0.0", + "@angular/cli": ">=14.1.0 < 16.0.0", + "@angular/common": ">=14.1.0 < 16.0.0", + "@angular/compiler": ">=14.1.0 < 16.0.0", + "@angular/compiler-cli": ">=14.1.0 < 16.0.0", + "@angular/core": ">=14.1.0 < 16.0.0", + "@angular/forms": ">=14.1.0 < 16.0.0", + "@angular/platform-browser": ">=14.1.0 < 16.0.0", + "@angular/platform-browser-dynamic": ">=14.1.0 < 16.0.0", "@babel/core": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", @@ -123,5 +124,5 @@ "bundler": { "tsConfig": "tsconfig.build.json" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/frameworks/angular/src/builders/build-storybook/index.ts b/code/frameworks/angular/src/builders/build-storybook/index.ts index 5d10ddfbd03b..d39fad679d3a 100644 --- a/code/frameworks/angular/src/builders/build-storybook/index.ts +++ b/code/frameworks/angular/src/builders/build-storybook/index.ts @@ -22,7 +22,7 @@ import { buildStandaloneErrorHandler } from '../utils/build-standalone-errors-ha export type StorybookBuilderOptions = JsonObject & { browserTarget?: string | null; tsConfig?: string; - docsMode: boolean; + docs: boolean; compodoc: boolean; compodocArgs: string[]; styles?: StyleElement[]; @@ -59,7 +59,7 @@ function commandBuilder( stylePreprocessorOptions, styles, configDir, - docsMode, + docs, loglevel, outputDir, quiet, @@ -70,7 +70,7 @@ function commandBuilder( const standaloneOptions: StandaloneBuildOptions = { packageJson: readUpSync({ cwd: __dirname }).packageJson, configDir, - docsMode, + ...(docs ? { docs } : {}), loglevel, outputDir, quiet, diff --git a/code/frameworks/angular/src/builders/build-storybook/schema.json b/code/frameworks/angular/src/builders/build-storybook/schema.json index 29ebe3b5e19d..43c55428d1dd 100644 --- a/code/frameworks/angular/src/builders/build-storybook/schema.json +++ b/code/frameworks/angular/src/builders/build-storybook/schema.json @@ -34,7 +34,7 @@ "description": "Suppress verbose build output.", "default": false }, - "docsMode": { + "docs": { "type": "boolean", "description": "Starts Storybook in documentation mode. Learn more about it : https://storybook.js.org/docs/react/writing-docs/build-documentation#preview-storybooks-documentation.", "default": false @@ -47,13 +47,19 @@ "compodocArgs": { "type": "array", "description": "Compodoc options : https://compodoc.app/guides/options.html. Options `-p` with tsconfig path and `-d` with workspace root is always given.", - "default": ["-e", "json"], + "default": [ + "-e", + "json" + ], "items": { "type": "string" } }, "webpackStatsJson": { - "type": ["boolean", "string"], + "type": [ + "boolean", + "string" + ], "description": "Write Webpack Stats JSON to disk", "default": false }, @@ -104,7 +110,9 @@ } }, "additionalProperties": false, - "required": ["input"] + "required": [ + "input" + ] }, { "type": "string", @@ -113,4 +121,4 @@ ] } } -} +} \ No newline at end of file diff --git a/code/frameworks/angular/src/builders/start-storybook/index.ts b/code/frameworks/angular/src/builders/start-storybook/index.ts index 6678cf501778..abf0e59f237e 100644 --- a/code/frameworks/angular/src/builders/start-storybook/index.ts +++ b/code/frameworks/angular/src/builders/start-storybook/index.ts @@ -22,7 +22,7 @@ import { buildStandaloneErrorHandler } from '../utils/build-standalone-errors-ha export type StorybookBuilderOptions = JsonObject & { browserTarget?: string | null; tsConfig?: string; - docsMode: boolean; + docs: boolean; compodoc: boolean; compodocArgs: string[]; styles?: StyleElement[]; @@ -68,7 +68,7 @@ function commandBuilder( styles, ci, configDir, - docsMode, + docs, host, https, port, @@ -84,7 +84,7 @@ function commandBuilder( packageJson: readUpSync({ cwd: __dirname }).packageJson, ci, configDir, - docsMode, + ...(docs ? { docs } : {}), host, https, port, diff --git a/code/frameworks/angular/src/builders/start-storybook/schema.json b/code/frameworks/angular/src/builders/start-storybook/schema.json index bfc83a59fe29..e81e0579b8dc 100644 --- a/code/frameworks/angular/src/builders/start-storybook/schema.json +++ b/code/frameworks/angular/src/builders/start-storybook/schema.json @@ -61,7 +61,7 @@ "description": "Suppress verbose build output.", "default": false }, - "docsMode": { + "docs": { "type": "boolean", "description": "Starts Storybook in documentation mode. Learn more about it : https://storybook.js.org/docs/react/writing-docs/build-documentation#preview-storybooks-documentation.", "default": false @@ -74,7 +74,10 @@ "compodocArgs": { "type": "array", "description": "Compodoc options : https://compodoc.app/guides/options.html. Options `-p` with tsconfig path and `-d` with workspace root is always given.", - "default": ["-e", "json"], + "default": [ + "-e", + "json" + ], "items": { "type": "string" } @@ -126,7 +129,9 @@ } }, "additionalProperties": false, - "required": ["input"] + "required": [ + "input" + ] }, { "type": "string", @@ -135,4 +140,4 @@ ] } } -} +} \ No newline at end of file diff --git a/code/frameworks/angular/src/builders/utils/run-compodoc.spec.ts b/code/frameworks/angular/src/builders/utils/run-compodoc.spec.ts index 0ec053879eef..9daf6b6a86d3 100644 --- a/code/frameworks/angular/src/builders/utils/run-compodoc.spec.ts +++ b/code/frameworks/angular/src/builders/utils/run-compodoc.spec.ts @@ -1,4 +1,3 @@ -import { BuilderContext } from '@angular-devkit/architect'; import { LoggerApi } from '@angular-devkit/core/src/logger'; import { take } from 'rxjs/operators'; @@ -41,7 +40,7 @@ describe('runCompodoc', () => { { workspaceRoot: 'path/to/project', logger: builderContextLoggerMock, - } as BuilderContext + } ) .pipe(take(1)) .subscribe(); @@ -65,7 +64,7 @@ describe('runCompodoc', () => { { workspaceRoot: 'path/to/project', logger: builderContextLoggerMock, - } as BuilderContext + } ) .pipe(take(1)) .subscribe(); @@ -89,7 +88,7 @@ describe('runCompodoc', () => { { workspaceRoot: 'path/to/project', logger: builderContextLoggerMock, - } as BuilderContext + } ) .pipe(take(1)) .subscribe(); @@ -112,7 +111,7 @@ describe('runCompodoc', () => { { workspaceRoot: 'path/to/project', logger: builderContextLoggerMock, - } as BuilderContext + } ) .pipe(take(1)) .subscribe(); @@ -135,7 +134,7 @@ describe('runCompodoc', () => { { workspaceRoot: 'path/to/project', logger: builderContextLoggerMock, - } as BuilderContext + } ) .pipe(take(1)) .subscribe(); diff --git a/code/frameworks/angular/src/builders/utils/run-compodoc.ts b/code/frameworks/angular/src/builders/utils/run-compodoc.ts index ba509bd05abe..6f167070789c 100644 --- a/code/frameworks/angular/src/builders/utils/run-compodoc.ts +++ b/code/frameworks/angular/src/builders/utils/run-compodoc.ts @@ -28,7 +28,11 @@ export const runCompodoc = ( const packageManager = JsPackageManagerFactory.getPackageManager(); try { - const stdout = packageManager.runScript('compodoc', finalCompodocArgs, context.workspaceRoot); + const stdout = packageManager.runPackageCommand( + 'compodoc', + finalCompodocArgs, + context.workspaceRoot + ); context.logger.info(stdout); observer.next(); diff --git a/code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts b/code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts index 5716c9464ddb..29c1d23d2a17 100644 --- a/code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts +++ b/code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts @@ -1,5 +1,6 @@ import { NgModule, enableProdMode, Type, ApplicationRef } from '@angular/core'; import { bootstrapApplication } from '@angular/platform-browser'; +import { provideAnimations, BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { Subject, BehaviorSubject } from 'rxjs'; import { stringify } from 'telejson'; @@ -97,6 +98,16 @@ export abstract class AbstractRenderer { const newStoryProps$ = new BehaviorSubject(storyFnAngular.props); + const hasAnimationsDefined = + !!storyFnAngular.moduleMetadata?.imports?.includes(BrowserAnimationsModule); + + if (hasAnimationsDefined && storyFnAngular?.moduleMetadata?.imports) { + // eslint-disable-next-line no-param-reassign + storyFnAngular.moduleMetadata.imports = storyFnAngular.moduleMetadata.imports.filter( + (importedModule) => importedModule !== BrowserAnimationsModule + ); + } + if ( !this.fullRendererRequired({ storyFnAngular, @@ -122,7 +133,10 @@ export abstract class AbstractRenderer { const application = getApplication({ storyFnAngular, component, targetSelector }); const applicationRef = await bootstrapApplication(application, { - providers: [storyPropsProvider(newStoryProps$)], + providers: [ + storyPropsProvider(newStoryProps$), + ...(hasAnimationsDefined ? [provideAnimations()] : []), + ], }); applicationRefs.add(applicationRef); diff --git a/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/open-close-component/open-close.component.css b/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/open-close-component/open-close.component.css new file mode 100644 index 000000000000..c7401b7f181a --- /dev/null +++ b/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/open-close-component/open-close.component.css @@ -0,0 +1,13 @@ +:host { + display: block; + margin-top: 1rem; +} + +.open-close-container { + border: 1px solid #dddddd; + margin-top: 1em; + padding: 20px 20px 0px 20px; + color: #000000; + font-weight: bold; + font-size: 20px; +} diff --git a/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/open-close-component/open-close.component.html b/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/open-close-component/open-close.component.html new file mode 100644 index 000000000000..c7c50baa228c --- /dev/null +++ b/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/open-close-component/open-close.component.html @@ -0,0 +1,7 @@ + + +
+

The box is now {{ isOpen ? 'Open' : 'Closed' }}!

+
diff --git a/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/open-close-component/open-close.component.ts b/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/open-close-component/open-close.component.ts new file mode 100644 index 000000000000..cfc78f6a6663 --- /dev/null +++ b/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/open-close-component/open-close.component.ts @@ -0,0 +1,39 @@ +import { Component } from '@angular/core'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { trigger, state, style, transition, animate } from '@angular/animations'; + +@Component({ + selector: 'app-open-close', + animations: [ + trigger('openClose', [ + // ... + state( + 'open', + style({ + height: '200px', + opacity: 1, + backgroundColor: 'yellow', + }) + ), + state( + 'closed', + style({ + height: '100px', + opacity: 0.8, + backgroundColor: 'blue', + }) + ), + transition('open => closed', [animate('0.1s')]), + transition('closed => open', [animate('0.1s')]), + ]), + ], + templateUrl: 'open-close.component.html', + styleUrls: ['open-close.component.css'], +}) +export class OpenCloseComponent { + isOpen = true; + + toggle() { + this.isOpen = !this.isOpen; + } +} diff --git a/code/frameworks/angular/template/stories/core/moduleMetadata/with-browser-animations.stories.ts b/code/frameworks/angular/template/stories/core/moduleMetadata/with-browser-animations.stories.ts new file mode 100644 index 000000000000..d2c6e514bd28 --- /dev/null +++ b/code/frameworks/angular/template/stories/core/moduleMetadata/with-browser-animations.stories.ts @@ -0,0 +1,30 @@ +import { Meta, StoryFn } from '@storybook/angular'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { within, userEvent } from '@storybook/testing-library'; +import { expect } from '@storybook/jest'; +import { OpenCloseComponent } from './angular-src/open-close-component/open-close.component'; + +export default { + component: OpenCloseComponent, + parameters: { + chromatic: { delay: 100 }, + }, +} as Meta; + +export const WithBrowserAnimations: StoryFn = () => ({ + template: ``, + moduleMetadata: { + declarations: [OpenCloseComponent], + imports: [BrowserAnimationsModule], + }, +}); + +WithBrowserAnimations.play = async ({ canvasElement }) => { + const canvas = within(canvasElement); + const opened = canvas.getByText('The box is now Open!'); + expect(opened).toBeDefined(); + const submitButton = canvas.getByRole('button'); + await userEvent.click(submitButton); + const closed = canvas.getByText('The box is now Closed!'); + expect(closed).toBeDefined(); +}; diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json index 6c3f5d554797..57d5be52c4ad 100644 --- a/code/frameworks/ember/package.json +++ b/code/frameworks/ember/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/ember", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.", "homepage": "https://github.com/storybookjs/storybook/tree/main/frameworks/ember", "bugs": { @@ -31,12 +31,12 @@ "prep": "../../../scripts/prepare/tsc.ts" }, "dependencies": { - "@storybook/builder-webpack5": "7.0.0-beta.31", - "@storybook/core-common": "7.0.0-beta.31", - "@storybook/docs-tools": "7.0.0-beta.31", + "@storybook/builder-webpack5": "7.0.0-beta.33", + "@storybook/core-common": "7.0.0-beta.33", + "@storybook/docs-tools": "7.0.0-beta.33", "@storybook/global": "^5.0.0", - "@storybook/preview-api": "7.0.0-beta.31", - "@storybook/types": "7.0.0-beta.31", + "@storybook/preview-api": "7.0.0-beta.33", + "@storybook/types": "7.0.0-beta.33", "ts-dedent": "^2.0.0" }, "devDependencies": { @@ -59,5 +59,5 @@ "access": "public" }, "bundler": {}, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/frameworks/html-vite/package.json b/code/frameworks/html-vite/package.json index 7fcc8ebc135f..4ddf2d8279d1 100644 --- a/code/frameworks/html-vite/package.json +++ b/code/frameworks/html-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-vite", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Storybook for HTML and Vite: Develop HTML in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -48,15 +48,15 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/addons": "7.0.0-beta.31", - "@storybook/builder-vite": "7.0.0-beta.31", - "@storybook/channel-postmessage": "7.0.0-beta.31", - "@storybook/channel-websocket": "7.0.0-beta.31", - "@storybook/client-api": "7.0.0-beta.31", - "@storybook/core-server": "7.0.0-beta.31", - "@storybook/html": "7.0.0-beta.31", - "@storybook/node-logger": "7.0.0-beta.31", - "@storybook/preview-web": "7.0.0-beta.31", + "@storybook/addons": "7.0.0-beta.33", + "@storybook/builder-vite": "7.0.0-beta.33", + "@storybook/channel-postmessage": "7.0.0-beta.33", + "@storybook/channel-websocket": "7.0.0-beta.33", + "@storybook/client-api": "7.0.0-beta.33", + "@storybook/core-server": "7.0.0-beta.33", + "@storybook/html": "7.0.0-beta.33", + "@storybook/node-logger": "7.0.0-beta.33", + "@storybook/preview-web": "7.0.0-beta.33", "magic-string": "^0.26.1" }, "devDependencies": { @@ -76,5 +76,5 @@ ], "platform": "node" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/frameworks/html-webpack5/package.json b/code/frameworks/html-webpack5/package.json index 2e6d093ed8f5..e6d1ab9b85cd 100644 --- a/code/frameworks/html-webpack5/package.json +++ b/code/frameworks/html-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-webpack5", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -48,11 +48,11 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/builder-webpack5": "7.0.0-beta.31", - "@storybook/core-common": "7.0.0-beta.31", + "@storybook/builder-webpack5": "7.0.0-beta.33", + "@storybook/core-common": "7.0.0-beta.33", "@storybook/global": "^5.0.0", - "@storybook/html": "7.0.0-beta.31", - "@storybook/preset-html-webpack": "7.0.0-beta.31", + "@storybook/html": "7.0.0-beta.33", + "@storybook/preset-html-webpack": "7.0.0-beta.33", "@types/node": "^16.0.0" }, "devDependencies": { @@ -76,5 +76,5 @@ ], "platform": "node" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 4a2be64dbf07..d8fdb57c1cf3 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/nextjs", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Storybook for Next.js", "keywords": [ "storybook", @@ -60,16 +60,16 @@ }, "dependencies": { "@next/font": "^13.0.7", - "@storybook/addon-actions": "7.0.0-beta.31", - "@storybook/builder-webpack5": "7.0.0-beta.31", - "@storybook/core-common": "7.0.0-beta.31", - "@storybook/node-logger": "7.0.0-beta.31", - "@storybook/preset-react-webpack": "7.0.0-beta.31", - "@storybook/preview-api": "7.0.0-beta.31", - "@storybook/react": "7.0.0-beta.31", + "@storybook/addon-actions": "7.0.0-beta.33", + "@storybook/builder-webpack5": "7.0.0-beta.33", + "@storybook/core-common": "7.0.0-beta.33", + "@storybook/node-logger": "7.0.0-beta.33", + "@storybook/preset-react-webpack": "7.0.0-beta.33", + "@storybook/preview-api": "7.0.0-beta.33", + "@storybook/react": "7.0.0-beta.33", "@types/node": "^16.0.0", "find-up": "^5.0.0", - "fs-extra": "^9.0.1", + "fs-extra": "^11.1.0", "image-size": "^1.0.0", "loader-utils": "^3.2.0", "pnp-webpack-plugin": "^1.7.0", @@ -123,5 +123,5 @@ ], "platform": "node" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json index bb4891b37950..5fa39ff82efb 100644 --- a/code/frameworks/preact-vite/package.json +++ b/code/frameworks/preact-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact-vite", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Storybook for Preact and Vite: Develop Preact components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -48,8 +48,8 @@ }, "dependencies": { "@preact/preset-vite": "^2.0.0", - "@storybook/builder-vite": "7.0.0-beta.31", - "@storybook/preact": "7.0.0-beta.31" + "@storybook/builder-vite": "7.0.0-beta.33", + "@storybook/preact": "7.0.0-beta.33" }, "devDependencies": { "@types/node": "^16.0.0", @@ -73,5 +73,5 @@ ], "platform": "node" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/frameworks/preact-webpack5/package.json b/code/frameworks/preact-webpack5/package.json index 7f5deb6cca28..0e5715e463e4 100644 --- a/code/frameworks/preact-webpack5/package.json +++ b/code/frameworks/preact-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact-webpack5", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" @@ -48,10 +48,10 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/builder-webpack5": "7.0.0-beta.31", - "@storybook/core-common": "7.0.0-beta.31", - "@storybook/preact": "7.0.0-beta.31", - "@storybook/preset-preact-webpack": "7.0.0-beta.31", + "@storybook/builder-webpack5": "7.0.0-beta.33", + "@storybook/core-common": "7.0.0-beta.33", + "@storybook/preact": "7.0.0-beta.33", + "@storybook/preset-preact-webpack": "7.0.0-beta.33", "@types/node": "^16.0.0" }, "devDependencies": { @@ -77,5 +77,5 @@ ], "platform": "node" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index 00915472754a..f8a76e1de489 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-vite", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -50,8 +50,8 @@ "dependencies": { "@joshwooding/vite-plugin-react-docgen-typescript": "^0.2.1", "@rollup/pluginutils": "^4.2.0", - "@storybook/builder-vite": "7.0.0-beta.31", - "@storybook/react": "7.0.0-beta.31", + "@storybook/builder-vite": "7.0.0-beta.33", + "@storybook/react": "7.0.0-beta.33", "@vitejs/plugin-react": "^3.0.1", "ast-types": "^0.14.2", "magic-string": "^0.26.1", @@ -80,5 +80,5 @@ ], "platform": "node" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json index 4793144276ba..f74993d870e2 100644 --- a/code/frameworks/react-webpack5/package.json +++ b/code/frameworks/react-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-webpack5", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -48,9 +48,9 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/builder-webpack5": "7.0.0-beta.31", - "@storybook/preset-react-webpack": "7.0.0-beta.31", - "@storybook/react": "7.0.0-beta.31", + "@storybook/builder-webpack5": "7.0.0-beta.33", + "@storybook/preset-react-webpack": "7.0.0-beta.33", + "@storybook/react": "7.0.0-beta.33", "@types/node": "^16.0.0" }, "devDependencies": { @@ -83,5 +83,5 @@ ], "platform": "node" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/frameworks/server-webpack5/package.json b/code/frameworks/server-webpack5/package.json index 494e76561bde..77cb7ab390a0 100644 --- a/code/frameworks/server-webpack5/package.json +++ b/code/frameworks/server-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server-webpack5", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -48,10 +48,10 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/builder-webpack5": "7.0.0-beta.31", - "@storybook/core-common": "7.0.0-beta.31", - "@storybook/preset-server-webpack": "7.0.0-beta.31", - "@storybook/server": "7.0.0-beta.31", + "@storybook/builder-webpack5": "7.0.0-beta.33", + "@storybook/core-common": "7.0.0-beta.33", + "@storybook/preset-server-webpack": "7.0.0-beta.33", + "@storybook/server": "7.0.0-beta.33", "@types/node": "^16.0.0" }, "devDependencies": { @@ -74,5 +74,5 @@ ], "platform": "node" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index 9cb6bcbba49d..18b3b642f2ba 100644 --- a/code/frameworks/svelte-vite/package.json +++ b/code/frameworks/svelte-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte-vite", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -48,9 +48,9 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/builder-vite": "7.0.0-beta.31", - "@storybook/node-logger": "7.0.0-beta.31", - "@storybook/svelte": "7.0.0-beta.31", + "@storybook/builder-vite": "7.0.0-beta.33", + "@storybook/node-logger": "7.0.0-beta.33", + "@storybook/svelte": "7.0.0-beta.33", "@sveltejs/vite-plugin-svelte": "^2.0.0", "magic-string": "^0.26.1", "svelte": "^3.0.0", @@ -80,5 +80,5 @@ ], "platform": "node" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/frameworks/svelte-webpack5/package.json b/code/frameworks/svelte-webpack5/package.json index ac6969e29791..ddef745c53de 100644 --- a/code/frameworks/svelte-webpack5/package.json +++ b/code/frameworks/svelte-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte-webpack5", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -48,10 +48,10 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/builder-webpack5": "7.0.0-beta.31", - "@storybook/core-common": "7.0.0-beta.31", - "@storybook/preset-svelte-webpack": "7.0.0-beta.31", - "@storybook/svelte": "7.0.0-beta.31" + "@storybook/builder-webpack5": "7.0.0-beta.33", + "@storybook/core-common": "7.0.0-beta.33", + "@storybook/preset-svelte-webpack": "7.0.0-beta.33", + "@storybook/svelte": "7.0.0-beta.33" }, "devDependencies": { "svelte": "^3.48.0", @@ -78,5 +78,5 @@ ], "platform": "node" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json index 927f59226b6e..6976c7537d6b 100644 --- a/code/frameworks/sveltekit/package.json +++ b/code/frameworks/sveltekit/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/sveltekit", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Storybook for SvelteKit", "keywords": [ "storybook", @@ -51,9 +51,9 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/builder-vite": "7.0.0-beta.31", - "@storybook/svelte": "7.0.0-beta.31", - "@storybook/svelte-vite": "7.0.0-beta.31" + "@storybook/builder-vite": "7.0.0-beta.33", + "@storybook/svelte": "7.0.0-beta.33", + "@storybook/svelte-vite": "7.0.0-beta.33" }, "devDependencies": { "@types/node": "^16.0.0", @@ -76,5 +76,5 @@ ], "platform": "node" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/frameworks/vue-vite/package.json b/code/frameworks/vue-vite/package.json index d8625c1542e4..4436bd2c5ebc 100644 --- a/code/frameworks/vue-vite/package.json +++ b/code/frameworks/vue-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue-vite", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Storybook for Vue2 and Vite: Develop Vue2 Components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -48,10 +48,10 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/builder-vite": "7.0.0-beta.31", - "@storybook/core-common": "7.0.0-beta.31", - "@storybook/core-server": "7.0.0-beta.31", - "@storybook/vue": "7.0.0-beta.31", + "@storybook/builder-vite": "7.0.0-beta.33", + "@storybook/core-common": "7.0.0-beta.33", + "@storybook/core-server": "7.0.0-beta.33", + "@storybook/vue": "7.0.0-beta.33", "magic-string": "^0.26.1", "vue-docgen-api": "^4.40.0" }, @@ -79,5 +79,5 @@ ], "platform": "node" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/frameworks/vue-webpack5/package.json b/code/frameworks/vue-webpack5/package.json index c9e3152f0c71..83f69d5bbc5c 100644 --- a/code/frameworks/vue-webpack5/package.json +++ b/code/frameworks/vue-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue-webpack5", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -48,10 +48,10 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/builder-webpack5": "7.0.0-beta.31", - "@storybook/core-common": "7.0.0-beta.31", - "@storybook/preset-vue-webpack": "7.0.0-beta.31", - "@storybook/vue": "7.0.0-beta.31", + "@storybook/builder-webpack5": "7.0.0-beta.33", + "@storybook/core-common": "7.0.0-beta.33", + "@storybook/preset-vue-webpack": "7.0.0-beta.33", + "@storybook/vue": "7.0.0-beta.33", "@types/node": "^16.0.0" }, "devDependencies": { @@ -83,5 +83,5 @@ ], "platform": "node" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json index 52016c5cdde4..0ee4b550e30c 100644 --- a/code/frameworks/vue3-vite/package.json +++ b/code/frameworks/vue3-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3-vite", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -48,9 +48,9 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/builder-vite": "7.0.0-beta.31", - "@storybook/core-server": "7.0.0-beta.31", - "@storybook/vue3": "7.0.0-beta.31", + "@storybook/builder-vite": "7.0.0-beta.33", + "@storybook/core-server": "7.0.0-beta.33", + "@storybook/vue3": "7.0.0-beta.33", "magic-string": "^0.26.1", "vue-docgen-api": "^4.40.0" }, @@ -83,5 +83,5 @@ ], "platform": "node" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/frameworks/vue3-webpack5/package.json b/code/frameworks/vue3-webpack5/package.json index cc5fa5f83934..89d57f8551da 100644 --- a/code/frameworks/vue3-webpack5/package.json +++ b/code/frameworks/vue3-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3-webpack5", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -48,10 +48,10 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/builder-webpack5": "7.0.0-beta.31", - "@storybook/core-common": "7.0.0-beta.31", - "@storybook/preset-vue3-webpack": "7.0.0-beta.31", - "@storybook/vue3": "7.0.0-beta.31", + "@storybook/builder-webpack5": "7.0.0-beta.33", + "@storybook/core-common": "7.0.0-beta.33", + "@storybook/preset-vue3-webpack": "7.0.0-beta.33", + "@storybook/vue3": "7.0.0-beta.33", "@types/node": "^16.0.0" }, "devDependencies": { @@ -80,5 +80,5 @@ ], "platform": "node" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json index 8ca0b6661cdb..8dbda1f3d7a6 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": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Storybook for web-components and Vite: Develop Web Components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -48,10 +48,10 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/builder-vite": "7.0.0-beta.31", - "@storybook/core-server": "7.0.0-beta.31", - "@storybook/node-logger": "7.0.0-beta.31", - "@storybook/web-components": "7.0.0-beta.31", + "@storybook/builder-vite": "7.0.0-beta.33", + "@storybook/core-server": "7.0.0-beta.33", + "@storybook/node-logger": "7.0.0-beta.33", + "@storybook/web-components": "7.0.0-beta.33", "magic-string": "^0.26.1" }, "devDependencies": { @@ -75,5 +75,5 @@ ], "platform": "node" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/frameworks/web-components-webpack5/package.json b/code/frameworks/web-components-webpack5/package.json index 175dfb1fc8ca..237b48cbf292 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": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.", "keywords": [ "lit-html", @@ -51,10 +51,10 @@ }, "dependencies": { "@babel/preset-env": "^7.20.2", - "@storybook/builder-webpack5": "7.0.0-beta.31", - "@storybook/core-common": "7.0.0-beta.31", - "@storybook/preset-web-components-webpack": "7.0.0-beta.31", - "@storybook/web-components": "7.0.0-beta.31", + "@storybook/builder-webpack5": "7.0.0-beta.33", + "@storybook/core-common": "7.0.0-beta.33", + "@storybook/preset-web-components-webpack": "7.0.0-beta.33", + "@storybook/web-components": "7.0.0-beta.33", "@types/node": "^16.0.0" }, "devDependencies": { @@ -79,5 +79,5 @@ ], "platform": "node" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/lerna.json b/code/lerna.json index 642c555f6170..e6a48cfdf823 100644 --- a/code/lerna.json +++ b/code/lerna.json @@ -2,5 +2,5 @@ "npmClient": "yarn", "useWorkspaces": true, "registry": "https://registry.npmjs.org", - "version": "7.0.0-beta.31" + "version": "7.0.0-beta.33" } diff --git a/code/lib/addons/package.json b/code/lib/addons/package.json index 2598755f009b..03ccfa914606 100644 --- a/code/lib/addons/package.json +++ b/code/lib/addons/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addons", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Storybook addons store", "keywords": [ "storybook" @@ -44,9 +44,9 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/manager-api": "7.0.0-beta.31", - "@storybook/preview-api": "7.0.0-beta.31", - "@storybook/types": "7.0.0-beta.31" + "@storybook/manager-api": "7.0.0-beta.33", + "@storybook/preview-api": "7.0.0-beta.33", + "@storybook/types": "7.0.0-beta.33" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", @@ -60,5 +60,5 @@ "./src/index.ts" ] }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/lib/builder-manager/package.json b/code/lib/builder-manager/package.json index 42fb6cf195d4..4b4df529d2fe 100644 --- a/code/lib/builder-manager/package.json +++ b/code/lib/builder-manager/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-manager", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Storybook manager builder", "keywords": [ "storybook" @@ -44,9 +44,9 @@ }, "dependencies": { "@fal-works/esbuild-plugin-global-externals": "^2.1.2", - "@storybook/core-common": "7.0.0-beta.31", - "@storybook/manager": "7.0.0-beta.31", - "@storybook/node-logger": "7.0.0-beta.31", + "@storybook/core-common": "7.0.0-beta.33", + "@storybook/manager": "7.0.0-beta.33", + "@storybook/node-logger": "7.0.0-beta.33", "@types/ejs": "^3.1.1", "@types/find-cache-dir": "^3.2.1", "@yarnpkg/esbuild-plugin-pnp": "^3.0.0-rc.10", @@ -56,7 +56,7 @@ "esbuild-plugin-alias": "^0.2.1", "express": "^4.17.3", "find-cache-dir": "^3.0.0", - "fs-extra": "^9.0.1", + "fs-extra": "^11.1.0", "process": "^0.11.10", "slash": "^3.0.0", "util": "^0.12.4" @@ -73,5 +73,5 @@ ], "platform": "node" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/lib/builder-vite/README.md b/code/lib/builder-vite/README.md index b492db443f78..57b928f954b9 100644 --- a/code/lib/builder-vite/README.md +++ b/code/lib/builder-vite/README.md @@ -66,8 +66,26 @@ For other details about the differences between vite and webpack projects, be su ### Customize Vite config The builder _will_ read your `vite.config.js` file, though it may change some of the options in order to work correctly. +It looks for the Vite config in the CWD. If your config is located elsewhere, specify the path using the `viteConfigPath` builder option: -In `.storybook/main.js` (or whatever your Storybook config file is named), you can override the merged Vite config: +```javascript +// .storybook/main.mjs + +const config = { + framework: { + name: '@storybook/react-vite', // Your framework name here. + options: { + builder: { + viteConfigPath: '.storybook/customViteConfig.js', + }, + }, + }, +}; + +export default config; +``` + +You can also override the merged Vite config: ```javascript // use `mergeConfig` to recursively merge Vite options diff --git a/code/lib/builder-vite/package.json b/code/lib/builder-vite/package.json index deb9221b9880..4275e5c1b450 100644 --- a/code/lib/builder-vite/package.json +++ b/code/lib/builder-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-vite", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "A plugin to run and build Storybooks with Vite", "homepage": "https://github.com/storybookjs/storybook/tree/main/code/lib/builder-vite/#readme", "bugs": { @@ -43,20 +43,20 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/channel-postmessage": "7.0.0-beta.31", - "@storybook/channel-websocket": "7.0.0-beta.31", - "@storybook/client-logger": "7.0.0-beta.31", - "@storybook/core-common": "7.0.0-beta.31", - "@storybook/csf-plugin": "7.0.0-beta.31", + "@storybook/channel-postmessage": "7.0.0-beta.33", + "@storybook/channel-websocket": "7.0.0-beta.33", + "@storybook/client-logger": "7.0.0-beta.33", + "@storybook/core-common": "7.0.0-beta.33", + "@storybook/csf-plugin": "7.0.0-beta.33", "@storybook/mdx2-csf": "next", - "@storybook/node-logger": "7.0.0-beta.31", - "@storybook/preview": "7.0.0-beta.31", - "@storybook/preview-api": "7.0.0-beta.31", - "@storybook/types": "7.0.0-beta.31", + "@storybook/node-logger": "7.0.0-beta.33", + "@storybook/preview": "7.0.0-beta.33", + "@storybook/preview-api": "7.0.0-beta.33", + "@storybook/types": "7.0.0-beta.33", "browser-assert": "^1.2.1", "es-module-lexer": "^0.9.3", "express": "^4.17.3", - "fs-extra": "^9.0.1", + "fs-extra": "^11.1.0", "glob": "^7.2.0", "glob-promise": "^4.2.0", "magic-string": "^0.26.1", @@ -97,5 +97,5 @@ ], "platform": "node" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/lib/builder-vite/src/types.ts b/code/lib/builder-vite/src/types.ts index 3b03956ab75a..c8b434dc38de 100644 --- a/code/lib/builder-vite/src/types.ts +++ b/code/lib/builder-vite/src/types.ts @@ -17,4 +17,9 @@ export type StorybookConfigVite = { viteFinal?: ViteFinal; }; -export type BuilderOptions = {}; +export type BuilderOptions = { + /** + * Path to vite.config file, relative to CWD. + */ + viteConfigPath?: string; +}; diff --git a/code/lib/builder-vite/src/vite-config.ts b/code/lib/builder-vite/src/vite-config.ts index 316d970189a0..0e123bf640ee 100644 --- a/code/lib/builder-vite/src/vite-config.ts +++ b/code/lib/builder-vite/src/vite-config.ts @@ -8,7 +8,7 @@ import type { InlineConfig, } from 'vite'; import { viteExternalsPlugin } from 'vite-plugin-externals'; -import { isPreservingSymlinks, getFrameworkName } from '@storybook/core-common'; +import { isPreservingSymlinks, getFrameworkName, getBuilderOptions } from '@storybook/core-common'; import { globals } from '@storybook/preview/globals'; import type { Options } from '@storybook/types'; import { @@ -18,6 +18,7 @@ import { mdxPlugin, stripStoryHMRBoundary, } from './plugins'; +import type { BuilderOptions } from './types'; export type PluginConfigType = 'build' | 'development'; @@ -39,12 +40,13 @@ export async function commonConfig( _type: PluginConfigType ): Promise { const configEnv = _type === 'development' ? configEnvServe : configEnvBuild; + const { viteConfigPath } = await getBuilderOptions(options); // I destructure away the `build` property from the user's config object // I do this because I can contain config that breaks storybook, such as we had in a lit project. // If the user needs to configure the `build` they need to do so in the viteFinal function in main.js. const { config: { build: buildProperty = undefined, ...userConfig } = {} } = - (await loadConfigFromFile(configEnv)) ?? {}; + (await loadConfigFromFile(configEnv, viteConfigPath)) ?? {}; const sbConfig: InlineConfig = { configFile: false, diff --git a/code/lib/builder-webpack5/package.json b/code/lib/builder-webpack5/package.json index 444cc56b6d95..cb985564ce76 100644 --- a/code/lib/builder-webpack5/package.json +++ b/code/lib/builder-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-webpack5", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" @@ -58,25 +58,25 @@ }, "dependencies": { "@babel/core": "^7.12.10", - "@storybook/addons": "7.0.0-beta.31", - "@storybook/api": "7.0.0-beta.31", - "@storybook/channel-postmessage": "7.0.0-beta.31", - "@storybook/channel-websocket": "7.0.0-beta.31", - "@storybook/channels": "7.0.0-beta.31", - "@storybook/client-api": "7.0.0-beta.31", - "@storybook/client-logger": "7.0.0-beta.31", - "@storybook/components": "7.0.0-beta.31", - "@storybook/core-common": "7.0.0-beta.31", - "@storybook/core-events": "7.0.0-beta.31", - "@storybook/core-webpack": "7.0.0-beta.31", + "@storybook/addons": "7.0.0-beta.33", + "@storybook/api": "7.0.0-beta.33", + "@storybook/channel-postmessage": "7.0.0-beta.33", + "@storybook/channel-websocket": "7.0.0-beta.33", + "@storybook/channels": "7.0.0-beta.33", + "@storybook/client-api": "7.0.0-beta.33", + "@storybook/client-logger": "7.0.0-beta.33", + "@storybook/components": "7.0.0-beta.33", + "@storybook/core-common": "7.0.0-beta.33", + "@storybook/core-events": "7.0.0-beta.33", + "@storybook/core-webpack": "7.0.0-beta.33", "@storybook/global": "^5.0.0", - "@storybook/manager-api": "7.0.0-beta.31", - "@storybook/node-logger": "7.0.0-beta.31", - "@storybook/preview": "7.0.0-beta.31", - "@storybook/preview-api": "7.0.0-beta.31", - "@storybook/router": "7.0.0-beta.31", - "@storybook/store": "7.0.0-beta.31", - "@storybook/theming": "7.0.0-beta.31", + "@storybook/manager-api": "7.0.0-beta.33", + "@storybook/node-logger": "7.0.0-beta.33", + "@storybook/preview": "7.0.0-beta.33", + "@storybook/preview-api": "7.0.0-beta.33", + "@storybook/router": "7.0.0-beta.33", + "@storybook/store": "7.0.0-beta.33", + "@storybook/theming": "7.0.0-beta.33", "@types/node": "^16.0.0", "@types/semver": "^7.3.4", "babel-loader": "^9.0.0", @@ -86,7 +86,7 @@ "css-loader": "^6.7.1", "express": "^4.17.3", "fork-ts-checker-webpack-plugin": "^7.2.8", - "fs-extra": "^9.0.1", + "fs-extra": "^11.1.0", "html-webpack-plugin": "^5.5.0", "path-browserify": "^1.0.1", "process": "^0.11.10", @@ -131,5 +131,5 @@ ], "platform": "node" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/lib/channel-postmessage/package.json b/code/lib/channel-postmessage/package.json index f902ab9012b8..2c183e21e0f3 100644 --- a/code/lib/channel-postmessage/package.json +++ b/code/lib/channel-postmessage/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channel-postmessage", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "", "keywords": [ "storybook" @@ -43,9 +43,9 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/channels": "7.0.0-beta.31", - "@storybook/client-logger": "7.0.0-beta.31", - "@storybook/core-events": "7.0.0-beta.31", + "@storybook/channels": "7.0.0-beta.33", + "@storybook/client-logger": "7.0.0-beta.33", + "@storybook/core-events": "7.0.0-beta.33", "@storybook/global": "^5.0.0", "qs": "^6.10.0", "telejson": "^7.0.3" @@ -61,5 +61,5 @@ "./src/index.ts" ] }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/lib/channel-websocket/package.json b/code/lib/channel-websocket/package.json index d7f2b493207f..3b340fa188c8 100644 --- a/code/lib/channel-websocket/package.json +++ b/code/lib/channel-websocket/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channel-websocket", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "", "keywords": [ "storybook" @@ -43,8 +43,8 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/channels": "7.0.0-beta.31", - "@storybook/client-logger": "7.0.0-beta.31", + "@storybook/channels": "7.0.0-beta.33", + "@storybook/client-logger": "7.0.0-beta.33", "@storybook/global": "^5.0.0", "telejson": "^7.0.3" }, @@ -59,5 +59,5 @@ "./src/index.ts" ] }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/lib/channels/package.json b/code/lib/channels/package.json index a38cd8781e4f..c6d9f195a6f3 100644 --- a/code/lib/channels/package.json +++ b/code/lib/channels/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channels", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "", "keywords": [ "storybook" @@ -53,5 +53,5 @@ "./src/index.ts" ] }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/lib/cli-sb/package.json b/code/lib/cli-sb/package.json index d47b04d9383b..3a0837dfbd40 100644 --- a/code/lib/cli-sb/package.json +++ b/code/lib/cli-sb/package.json @@ -1,6 +1,6 @@ { "name": "sb", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Storybook CLI", "keywords": [ "storybook" @@ -21,10 +21,10 @@ "license": "MIT", "bin": "./index.js", "dependencies": { - "@storybook/cli": "7.0.0-beta.31" + "@storybook/cli": "7.0.0-beta.33" }, "publishConfig": { "access": "public" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/lib/cli-storybook/package.json b/code/lib/cli-storybook/package.json index e6c97b34ff6f..609353f4acbf 100644 --- a/code/lib/cli-storybook/package.json +++ b/code/lib/cli-storybook/package.json @@ -1,6 +1,6 @@ { "name": "storybook", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Storybook CLI", "keywords": [ "storybook" @@ -24,10 +24,10 @@ "storybook": "./index.js" }, "dependencies": { - "@storybook/cli": "7.0.0-beta.31" + "@storybook/cli": "7.0.0-beta.33" }, "publishConfig": { "access": "public" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json index bf43212d4a1e..b1b1047c6611 100644 --- a/code/lib/cli/package.json +++ b/code/lib/cli/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/cli", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Storybook's CLI - easiest method of adding storybook to your projects", "keywords": [ "cli", @@ -56,13 +56,13 @@ "dependencies": { "@babel/core": "^7.20.2", "@babel/preset-env": "^7.20.2", - "@storybook/codemod": "7.0.0-beta.31", - "@storybook/core-common": "7.0.0-beta.31", - "@storybook/core-server": "7.0.0-beta.31", - "@storybook/csf-tools": "7.0.0-beta.31", - "@storybook/node-logger": "7.0.0-beta.31", - "@storybook/telemetry": "7.0.0-beta.31", - "@storybook/types": "7.0.0-beta.31", + "@storybook/codemod": "7.0.0-beta.33", + "@storybook/core-common": "7.0.0-beta.33", + "@storybook/core-server": "7.0.0-beta.33", + "@storybook/csf-tools": "7.0.0-beta.33", + "@storybook/node-logger": "7.0.0-beta.33", + "@storybook/telemetry": "7.0.0-beta.33", + "@storybook/types": "7.0.0-beta.33", "@types/semver": "^7.3.4", "boxen": "^5.1.2", "chalk": "^4.1.0", @@ -73,7 +73,7 @@ "execa": "^5.0.0", "express": "^4.17.3", "find-up": "^5.0.0", - "fs-extra": "^9.0.1", + "fs-extra": "^11.1.0", "get-port": "^5.1.1", "giget": "^1.0.0", "globby": "^11.0.2", @@ -91,7 +91,7 @@ "util-deprecate": "^1.0.2" }, "devDependencies": { - "@storybook/client-api": "7.0.0-beta.31", + "@storybook/client-api": "7.0.0-beta.33", "@types/cross-spawn": "^6.0.2", "@types/prompts": "^2.0.9", "@types/puppeteer-core": "^2.1.0", @@ -111,5 +111,5 @@ ], "platform": "node" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/lib/cli/src/automigrate/fixes/mainjsFramework.ts b/code/lib/cli/src/automigrate/fixes/mainjsFramework.ts index b08460602cf8..ad27f0e9bab6 100644 --- a/code/lib/cli/src/automigrate/fixes/mainjsFramework.ts +++ b/code/lib/cli/src/automigrate/fixes/mainjsFramework.ts @@ -38,7 +38,7 @@ export const mainjsFramework: Fix = { } const main = await readConfig(mainConfig); - const currentFramework = main.getFieldValue(['framework']); + const currentFramework = main.getFieldNode(['framework']); const features = main.getFieldValue(['features']); if (currentFramework) return null; diff --git a/code/lib/cli/src/automigrate/fixes/missing-babelrc.test.ts b/code/lib/cli/src/automigrate/fixes/missing-babelrc.test.ts index 1f896ed5e8e8..4f706b130fb2 100644 --- a/code/lib/cli/src/automigrate/fixes/missing-babelrc.test.ts +++ b/code/lib/cli/src/automigrate/fixes/missing-babelrc.test.ts @@ -49,18 +49,33 @@ describe('missing-babelrc fix', () => { // different babel extensions await expect( - check({ extraFiles: { '.babelrc': babelContent }, packageJson }) + check({ + extraFiles: { '.babelrc': babelContent }, + packageJson, + main: { framework: '@storybook/react' }, + }) ).resolves.toBeNull(); await expect( - check({ extraFiles: { '.babelrc.json': babelContent }, packageJson }) + check({ + extraFiles: { '.babelrc.json': babelContent }, + packageJson, + main: { framework: '@storybook/react' }, + }) ).resolves.toBeNull(); await expect( - check({ extraFiles: { 'babel.config.json': babelContent }, packageJson }) + check({ + extraFiles: { 'babel.config.json': babelContent }, + packageJson, + main: { framework: '@storybook/react' }, + }) ).resolves.toBeNull(); // babel field in package.json await expect( - check({ packageJson: { ...packageJson, babel: babelContent } }) + check({ + packageJson: { ...packageJson, babel: babelContent }, + main: { framework: '@storybook/react' }, + }) ).resolves.toBeNull(); }); @@ -72,7 +87,9 @@ describe('missing-babelrc fix', () => { }, }; - await expect(check({ packageJson })).resolves.toBeNull(); + await expect( + check({ packageJson, main: { framework: '@storybook/nextjs' } }) + ).resolves.toBeNull(); }); it('skips when using CRA preset', async () => { @@ -84,7 +101,10 @@ describe('missing-babelrc fix', () => { }; await expect( - check({ packageJson, main: { addons: ['@storybook/preset-create-react-app'] } }) + check({ + packageJson, + main: { framework: '@storybook/react', addons: ['@storybook/preset-create-react-app'] }, + }) ).resolves.toBeNull(); }); diff --git a/code/lib/cli/src/automigrate/fixes/missing-babelrc.ts b/code/lib/cli/src/automigrate/fixes/missing-babelrc.ts index 3e7fdc59f9f8..a2510410c1d0 100644 --- a/code/lib/cli/src/automigrate/fixes/missing-babelrc.ts +++ b/code/lib/cli/src/automigrate/fixes/missing-babelrc.ts @@ -46,18 +46,18 @@ export const missingBabelRc: Fix = { const main = await readConfig(mainConfig); - const frameworkField = main.getFieldValue(['framework']); - const frameworkPackage = - typeof frameworkField === 'string' ? frameworkField : frameworkField?.name; + const frameworkPackage = main.getNameFromPath(['framework']); - const addons: any[] = main.getFieldValue(['addons']) || []; + const addons = main.getNamesFromPath(['addons']); - const hasCraPreset = addons.find((addon) => { - const name = typeof addon === 'string' ? addon : addon.name; - return name === '@storybook/preset-create-react-app'; - }); + const hasCraPreset = + addons && addons.find((addon) => addon === '@storybook/preset-create-react-app'); - if (frameworksThatNeedBabelConfig.includes(frameworkPackage) && !hasCraPreset) { + if ( + frameworkPackage && + frameworksThatNeedBabelConfig.includes(frameworkPackage) && + !hasCraPreset + ) { const config = await loadPartialConfigAsync({ babelrc: true, filename: '__fake__.js', // somehow needed to detect .babelrc.* files diff --git a/code/lib/cli/src/automigrate/fixes/new-frameworks.ts b/code/lib/cli/src/automigrate/fixes/new-frameworks.ts index d6935e92c703..7850eca4aa25 100644 --- a/code/lib/cli/src/automigrate/fixes/new-frameworks.ts +++ b/code/lib/cli/src/automigrate/fixes/new-frameworks.ts @@ -127,7 +127,7 @@ export const newFrameworks: Fix = { // If in the future the eslint plugin has a framework option, using main to extract the framework field will be very useful const main = await readConfig(mainConfig); - const frameworkPackage = main.getFieldValue(['framework']) as keyof typeof packagesMap; + const frameworkPackage = main.getNameFromPath(['framework']) as keyof typeof packagesMap; const builder = main.getFieldValue(['core', 'builder']); if (!frameworkPackage) { diff --git a/code/lib/cli/src/automigrate/fixes/sveltekit-framework.ts b/code/lib/cli/src/automigrate/fixes/sveltekit-framework.ts index 3422da2cfc61..d990ac2ebb4f 100644 --- a/code/lib/cli/src/automigrate/fixes/sveltekit-framework.ts +++ b/code/lib/cli/src/automigrate/fixes/sveltekit-framework.ts @@ -57,9 +57,9 @@ export const sveltekitFramework: Fix = { } const main = await readConfig(mainConfig); - const frameworkConfig = main.getFieldValue(['framework']); + const framework = main.getNameFromPath(['framework']); - if (!frameworkConfig) { + if (!framework) { logger.warn(dedent` ❌ Unable to determine Storybook framework, skipping ${chalk.cyan(fixId)} fix. 🤔 Are you running automigrate from your project directory? @@ -67,8 +67,6 @@ export const sveltekitFramework: Fix = { return null; } - const framework = typeof frameworkConfig === 'string' ? frameworkConfig : frameworkConfig.name; - if (framework === '@storybook/sveltekit') { // already using the new framework return null; diff --git a/code/lib/cli/src/build.ts b/code/lib/cli/src/build.ts index 2110be45d4fa..b1c16e37b2cd 100644 --- a/code/lib/cli/src/build.ts +++ b/code/lib/cli/src/build.ts @@ -10,7 +10,6 @@ export const build = async (cliOptions: any) => { configDir: cliOptions.configDir || './.storybook', outputDir: cliOptions.outputDir || './storybook-static', ignorePreview: !!cliOptions.previewUrl && !cliOptions.forceBuildPreview, - docsMode: !!cliOptions.docs, configType: 'PRODUCTION', cache, packageJson: readUpSync({ cwd: __dirname }).packageJson, diff --git a/code/lib/cli/src/detect.test.ts b/code/lib/cli/src/detect.test.ts index aba138e6a3c3..cb3b84288bee 100644 --- a/code/lib/cli/src/detect.test.ts +++ b/code/lib/cli/src/detect.test.ts @@ -89,6 +89,16 @@ const MOCK_FRAMEWORK_FILES: { }, }, }, + { + name: ProjectType.QWIK, + files: { + 'package.json': { + devDependencies: { + '@builder.io/qwik': '1.0.0', + }, + }, + }, + }, { name: ProjectType.REACT_NATIVE, files: { diff --git a/code/lib/cli/src/dev.ts b/code/lib/cli/src/dev.ts index b50da7466229..4eaa12083904 100644 --- a/code/lib/cli/src/dev.ts +++ b/code/lib/cli/src/dev.ts @@ -13,7 +13,6 @@ export const dev = async (cliOptions: any) => { configDir: cliOptions.configDir || './.storybook', configType: 'DEVELOPMENT', ignorePreview: !!cliOptions.previewUrl && !cliOptions.forceBuildPreview, - docsMode: !!cliOptions.docs, cache, packageJson: readUpSync({ cwd: __dirname }).packageJson, }; diff --git a/code/lib/cli/src/dirs.ts b/code/lib/cli/src/dirs.ts index 69a411752360..1ac239604cf6 100644 --- a/code/lib/cli/src/dirs.ts +++ b/code/lib/cli/src/dirs.ts @@ -1,12 +1,17 @@ import { dirname } from 'path'; import type { SupportedFrameworks, SupportedRenderers } from './project_types'; +import { externalFrameworks } from './project_types'; export function getCliDir() { return dirname(require.resolve('@storybook/cli/package.json')); } export function getRendererDir(renderer: SupportedFrameworks | SupportedRenderers) { + const externalFramework = externalFrameworks.find((framework) => framework.name === renderer); + const frameworkPackageName = externalFramework?.packageName ?? `@storybook/${renderer}`; return dirname( - require.resolve(`@storybook/${renderer}/package.json`, { paths: [process.cwd()] }) + require.resolve(`${frameworkPackageName}/package.json`, { + paths: [process.cwd()], + }) ); } diff --git a/code/lib/cli/src/generators/QWIK/index.ts b/code/lib/cli/src/generators/QWIK/index.ts new file mode 100644 index 000000000000..baa3c86ac94d --- /dev/null +++ b/code/lib/cli/src/generators/QWIK/index.ts @@ -0,0 +1,8 @@ +import { baseGenerator } from '../baseGenerator'; +import type { Generator } from '../types'; + +const generator: Generator = async (packageManager, npmOptions, options) => { + await baseGenerator(packageManager, npmOptions, options, 'qwik', {}, 'qwik'); +}; + +export default generator; diff --git a/code/lib/cli/src/generators/baseGenerator.ts b/code/lib/cli/src/generators/baseGenerator.ts index 1d91ef3cb8a1..67cf9d7dec7c 100644 --- a/code/lib/cli/src/generators/baseGenerator.ts +++ b/code/lib/cli/src/generators/baseGenerator.ts @@ -3,7 +3,7 @@ import fse from 'fs-extra'; import { dedent } from 'ts-dedent'; import type { NpmOptions } from '../NpmOptions'; import type { SupportedRenderers, SupportedFrameworks, Builder } from '../project_types'; -import { CoreBuilder } from '../project_types'; +import { externalFrameworks, CoreBuilder } from '../project_types'; import { getBabelDependencies, copyComponents } from '../helpers'; import { configureMain, configurePreview } from './configure'; import type { JsPackageManager } from '../js-package-manager'; @@ -44,6 +44,19 @@ const getBuilderDetails = (builder: string) => { return builder; }; +const getExternalFramework = (framework: string) => + externalFrameworks.find( + (exFramework) => exFramework.name === framework || exFramework.packageName === framework + ); + +const getFrameworkPackage = (framework: string, renderer: string, builder: string) => { + const externalFramework = getExternalFramework(framework); + if (externalFramework) { + return externalFramework.packageName; + } + return framework ? `@storybook/${framework}` : `@storybook/${renderer}-${builder}`; +}; + const wrapForPnp = (packageName: string) => `%%path.dirname(require.resolve(path.join('${packageName}', 'package.json')))%%`; @@ -60,9 +73,8 @@ const getFrameworkDetails = ( renderer?: string; rendererId: SupportedRenderers; } => { - const frameworkPackage = framework - ? `@storybook/${framework}` - : `@storybook/${renderer}-${builder}`; + const frameworkPackage = getFrameworkPackage(framework, renderer, builder); + const frameworkPackagePath = pnp ? wrapForPnp(frameworkPackage) : frameworkPackage; const rendererPackage = `@storybook/${renderer}`; @@ -71,7 +83,9 @@ const getFrameworkDetails = ( const builderPackage = getBuilderDetails(builder); const builderPackagePath = pnp ? wrapForPnp(builderPackage) : builderPackage; - const isKnownFramework = !!(packageVersions as Record)[frameworkPackage]; + const isExternalFramework = !!getExternalFramework(frameworkPackage); + const isKnownFramework = + isExternalFramework || !!(packageVersions as Record)[frameworkPackage]; const isKnownRenderer = !!(packageVersions as Record)[rendererPackage]; if (isKnownFramework) { @@ -194,7 +208,7 @@ export async function baseGenerator( const packages = [ 'storybook', - `@storybook/${rendererId}`, + getExternalFramework(rendererId) ? undefined : `@storybook/${rendererId}`, ...frameworkPackages, ...addonPackages, ...extraPackages, diff --git a/code/lib/cli/src/initiate.ts b/code/lib/cli/src/initiate.ts index cab89c24e3ea..6419ba9b6fb7 100644 --- a/code/lib/cli/src/initiate.ts +++ b/code/lib/cli/src/initiate.ts @@ -26,6 +26,7 @@ import webComponentsGenerator from './generators/WEB-COMPONENTS'; import riotGenerator from './generators/RIOT'; import preactGenerator from './generators/PREACT'; import svelteGenerator from './generators/SVELTE'; +import qwikGenerator from './generators/QWIK'; import svelteKitGenerator from './generators/SVELTEKIT'; import raxGenerator from './generators/RAX'; import serverGenerator from './generators/SERVER'; @@ -94,6 +95,12 @@ const installStorybook = ( .then(commandLog('Adding Storybook support to your "React Native" app\n')); } + case ProjectType.QWIK: { + return qwikGenerator(packageManager, npmOptions, generatorOptions).then( + commandLog('Adding Storybook support to your "Qwik" app\n') + ); + } + case ProjectType.WEBPACK_REACT: return webpackReactGenerator(packageManager, npmOptions, generatorOptions).then( commandLog('Adding Storybook support to your "Webpack React" app\n') diff --git a/code/lib/cli/src/js-package-manager/JsPackageManager.ts b/code/lib/cli/src/js-package-manager/JsPackageManager.ts index 63978099d756..5cfd25cb7c61 100644 --- a/code/lib/cli/src/js-package-manager/JsPackageManager.ts +++ b/code/lib/cli/src/js-package-manager/JsPackageManager.ts @@ -376,7 +376,7 @@ export abstract class JsPackageManager { ): // Use generic and conditional type to force `string[]` if fetchAllVersions is true and `string` if false Promise; - public abstract runScript(script: string, args: string[], cwd?: string): string; + public abstract runPackageCommand(command: string, args: string[], cwd?: string): string; public executeCommand( command: string, diff --git a/code/lib/cli/src/js-package-manager/NPMProxy.test.ts b/code/lib/cli/src/js-package-manager/NPMProxy.test.ts index 21a97fdc4d88..d85cf7ad3019 100644 --- a/code/lib/cli/src/js-package-manager/NPMProxy.test.ts +++ b/code/lib/cli/src/js-package-manager/NPMProxy.test.ts @@ -59,14 +59,14 @@ describe('NPM Proxy', () => { describe('runScript', () => { describe('npm6', () => { - it('should execute script `npm run compodoc -- -e json -d .`', () => { + it('should execute script `npm exec -- compodoc -e json -d .`', () => { const executeCommandSpy = jest.spyOn(npmProxy, 'executeCommand').mockReturnValue('6.0.0'); - npmProxy.runScript('compodoc', ['-e', 'json', '-d', '.']); + npmProxy.runPackageCommand('compodoc', ['-e', 'json', '-d', '.']); expect(executeCommandSpy).toHaveBeenLastCalledWith( 'npm', - ['run', 'compodoc', '--', '-e', 'json', '-d', '.'], + ['exec', '--', 'compodoc', '-e', 'json', '-d', '.'], undefined, undefined ); @@ -76,11 +76,11 @@ describe('NPM Proxy', () => { it('should execute script `npm run compodoc -- -e json -d .`', () => { const executeCommandSpy = jest.spyOn(npmProxy, 'executeCommand').mockReturnValue('7.1.0'); - npmProxy.runScript('compodoc', ['-e', 'json', '-d', '.']); + npmProxy.runPackageCommand('compodoc', ['-e', 'json', '-d', '.']); expect(executeCommandSpy).toHaveBeenLastCalledWith( 'npm', - ['run', 'compodoc', '--', '-e', 'json', '-d', '.'], + ['exec', '--', 'compodoc', '-e', 'json', '-d', '.'], undefined, undefined ); diff --git a/code/lib/cli/src/js-package-manager/NPMProxy.ts b/code/lib/cli/src/js-package-manager/NPMProxy.ts index 5fb543a1e325..1d26d1c40b32 100644 --- a/code/lib/cli/src/js-package-manager/NPMProxy.ts +++ b/code/lib/cli/src/js-package-manager/NPMProxy.ts @@ -38,8 +38,8 @@ export class NPMProxy extends JsPackageManager { return this.uninstallArgs; } - public runScript(command: string, args: string[], cwd?: string): string { - return this.executeCommand(`npm`, ['run', command, '--', ...args], undefined, cwd); + public runPackageCommand(command: string, args: string[], cwd?: string): string { + return this.executeCommand(`npm`, ['exec', '--', command, ...args], undefined, cwd); } protected getResolutions(packageJson: PackageJson, versions: Record) { diff --git a/code/lib/cli/src/js-package-manager/PNPMProxy.test.ts b/code/lib/cli/src/js-package-manager/PNPMProxy.test.ts index 8336839eb632..abf2659785e5 100644 --- a/code/lib/cli/src/js-package-manager/PNPMProxy.test.ts +++ b/code/lib/cli/src/js-package-manager/PNPMProxy.test.ts @@ -50,7 +50,7 @@ describe('NPM Proxy', () => { it('should execute script `yarn compodoc -- -e json -d .`', () => { const executeCommandSpy = jest.spyOn(pnpmProxy, 'executeCommand').mockReturnValue('7.1.0'); - pnpmProxy.runScript('compodoc', ['-e', 'json', '-d', '.']); + pnpmProxy.runPackageCommand('compodoc', ['-e', 'json', '-d', '.']); expect(executeCommandSpy).toHaveBeenLastCalledWith( 'pnpm', diff --git a/code/lib/cli/src/js-package-manager/PNPMProxy.ts b/code/lib/cli/src/js-package-manager/PNPMProxy.ts index a288e4f42db7..23ea36823107 100644 --- a/code/lib/cli/src/js-package-manager/PNPMProxy.ts +++ b/code/lib/cli/src/js-package-manager/PNPMProxy.ts @@ -24,7 +24,7 @@ export class PNPMProxy extends JsPackageManager { return this.executeCommand('pnpm', ['--version']); } - runScript(command: string, args: string[], cwd?: string): string { + runPackageCommand(command: string, args: string[], cwd?: string): string { return this.executeCommand(`pnpm`, ['run', command, ...args], undefined, cwd); } diff --git a/code/lib/cli/src/js-package-manager/Yarn1Proxy.test.ts b/code/lib/cli/src/js-package-manager/Yarn1Proxy.test.ts index 26674f0aac59..1d6eb28af1c3 100644 --- a/code/lib/cli/src/js-package-manager/Yarn1Proxy.test.ts +++ b/code/lib/cli/src/js-package-manager/Yarn1Proxy.test.ts @@ -50,7 +50,7 @@ describe('Yarn 1 Proxy', () => { it('should execute script `yarn compodoc -- -e json -d .`', () => { const executeCommandSpy = jest.spyOn(yarn1Proxy, 'executeCommand').mockReturnValue('7.1.0'); - yarn1Proxy.runScript('compodoc', ['-e', 'json', '-d', '.']); + yarn1Proxy.runPackageCommand('compodoc', ['-e', 'json', '-d', '.']); expect(executeCommandSpy).toHaveBeenLastCalledWith( 'yarn', diff --git a/code/lib/cli/src/js-package-manager/Yarn1Proxy.ts b/code/lib/cli/src/js-package-manager/Yarn1Proxy.ts index 75d980675d3f..6941016bbba6 100644 --- a/code/lib/cli/src/js-package-manager/Yarn1Proxy.ts +++ b/code/lib/cli/src/js-package-manager/Yarn1Proxy.ts @@ -16,7 +16,7 @@ export class Yarn1Proxy extends JsPackageManager { return `yarn ${command}`; } - runScript(command: string, args: string[], cwd?: string): string { + runPackageCommand(command: string, args: string[], cwd?: string): string { return this.executeCommand(`yarn`, [command, ...args], undefined, cwd); } diff --git a/code/lib/cli/src/js-package-manager/Yarn2Proxy.test.ts b/code/lib/cli/src/js-package-manager/Yarn2Proxy.test.ts index badeddd2cfcb..4b79bf7f2841 100644 --- a/code/lib/cli/src/js-package-manager/Yarn2Proxy.test.ts +++ b/code/lib/cli/src/js-package-manager/Yarn2Proxy.test.ts @@ -35,7 +35,7 @@ describe('Yarn 2 Proxy', () => { it('should execute script `yarn compodoc -- -e json -d .`', () => { const executeCommandSpy = jest.spyOn(yarn2Proxy, 'executeCommand').mockReturnValue('7.1.0'); - yarn2Proxy.runScript('compodoc', ['-e', 'json', '-d', '.']); + yarn2Proxy.runPackageCommand('compodoc', ['-e', 'json', '-d', '.']); expect(executeCommandSpy).toHaveBeenLastCalledWith( 'yarn', diff --git a/code/lib/cli/src/js-package-manager/Yarn2Proxy.ts b/code/lib/cli/src/js-package-manager/Yarn2Proxy.ts index e77868600c88..0294e4fd3d04 100644 --- a/code/lib/cli/src/js-package-manager/Yarn2Proxy.ts +++ b/code/lib/cli/src/js-package-manager/Yarn2Proxy.ts @@ -17,7 +17,7 @@ export class Yarn2Proxy extends JsPackageManager { return `yarn ${command}`; } - runScript(command: string, args: string[], cwd?: string): string { + runPackageCommand(command: string, args: string[], cwd?: string): string { return this.executeCommand(`yarn`, [command, ...args], undefined, cwd); } diff --git a/code/lib/cli/src/project_types.ts b/code/lib/cli/src/project_types.ts index 47f1d99e6102..fcd3cb67b7c0 100644 --- a/code/lib/cli/src/project_types.ts +++ b/code/lib/cli/src/project_types.ts @@ -15,8 +15,13 @@ function eqMajor(versionRange: string, major: number) { return validRange(versionRange) && minVersion(versionRange).major === major; } +/** A list of all frameworks that are supported, but use a package outside the storybook monorepo */ +export const externalFrameworks: { name: SupportedFrameworks; packageName: string }[] = [ + { name: 'qwik', packageName: 'storybook-framework-qwik' }, +]; + // Should match @storybook/ -export type SupportedFrameworks = 'nextjs' | 'angular' | 'sveltekit'; +export type SupportedFrameworks = 'nextjs' | 'angular' | 'sveltekit' | 'qwik'; // Should match @storybook/ export type SupportedRenderers = @@ -32,6 +37,7 @@ export type SupportedRenderers = | 'marko' | 'preact' | 'svelte' + | 'qwik' | 'rax' | 'aurelia' | 'html' @@ -51,6 +57,7 @@ export const SUPPORTED_RENDERERS: SupportedRenderers[] = [ 'marko', 'preact', 'svelte', + 'qwik', 'rax', 'aurelia', ]; @@ -74,6 +81,7 @@ export enum ProjectType { MARIONETTE = 'MARIONETTE', MARKO = 'MARKO', HTML = 'HTML', + QWIK = 'QWIK', RIOT = 'RIOT', PREACT = 'PREACT', SVELTE = 'SVELTE', @@ -168,6 +176,13 @@ export const supportedTemplates: TemplateConfiguration[] = [ return dependencies.every(Boolean); }, }, + { + preset: ProjectType.QWIK, + dependencies: ['@builder.io/qwik'], + matcherFunction: ({ dependencies }) => { + return dependencies.every(Boolean); + }, + }, { preset: ProjectType.REACT_PROJECT, peerDependencies: ['react'], diff --git a/code/lib/cli/src/repro-generators/scripts.ts b/code/lib/cli/src/repro-generators/scripts.ts index c8b0b9fe8d1d..e003f973c7b4 100644 --- a/code/lib/cli/src/repro-generators/scripts.ts +++ b/code/lib/cli/src/repro-generators/scripts.ts @@ -186,7 +186,7 @@ const addAdditionalFiles = async ({ additionalFiles, cwd }: Options) => { await Promise.all( additionalFiles.map(async (file) => { - await outputFile(path.resolve(cwd, file.path), file.contents, { encoding: 'UTF-8' }); + await outputFile(path.resolve(cwd, file.path), file.contents, { encoding: 'utf-8' }); }) ); }; diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts index 6b22db8465ae..c6b26f5e4c39 100644 --- a/code/lib/cli/src/sandbox-templates.ts +++ b/code/lib/cli/src/sandbox-templates.ts @@ -354,6 +354,17 @@ const baseTemplates = { builder: '@storybook/builder-vite', }, }, + 'qwik-vite/default-ts': { + name: 'Qwik CLI (Default TS)', + script: 'yarn create qwik basic {{beforeDir}} --no-install', + inDevelopment: true, + skipTasks: ['e2e-tests'], + expected: { + framework: 'storybook-framework-qwik', + renderer: 'storybook-framework-qwik', + builder: 'storybook-framework-qwik', + }, + }, } satisfies Record; /** @@ -429,6 +440,7 @@ export const daily: TemplateKey[] = [ 'svelte-vite/default-js', 'nextjs/12-js', 'nextjs/default-js', + 'qwik-vite/default-ts', 'preact-webpack5/default-js', 'preact-vite/default-js', ]; diff --git a/code/lib/cli/src/versions.ts b/code/lib/cli/src/versions.ts index 9ef503386660..d60c0d04cd02 100644 --- a/code/lib/cli/src/versions.ts +++ b/code/lib/cli/src/versions.ts @@ -1,90 +1,90 @@ // auto generated file, do not edit export default { - '@storybook/addon-a11y': '7.0.0-beta.31', - '@storybook/addon-actions': '7.0.0-beta.31', - '@storybook/addon-backgrounds': '7.0.0-beta.31', - '@storybook/addon-controls': '7.0.0-beta.31', - '@storybook/addon-docs': '7.0.0-beta.31', - '@storybook/addon-essentials': '7.0.0-beta.31', - '@storybook/addon-highlight': '7.0.0-beta.31', - '@storybook/addon-interactions': '7.0.0-beta.31', - '@storybook/addon-jest': '7.0.0-beta.31', - '@storybook/addon-links': '7.0.0-beta.31', - '@storybook/addon-measure': '7.0.0-beta.31', - '@storybook/addon-outline': '7.0.0-beta.31', - '@storybook/addon-storyshots': '7.0.0-beta.31', - '@storybook/addon-storyshots-puppeteer': '7.0.0-beta.31', - '@storybook/addon-storysource': '7.0.0-beta.31', - '@storybook/addon-toolbars': '7.0.0-beta.31', - '@storybook/addon-viewport': '7.0.0-beta.31', - '@storybook/addons': '7.0.0-beta.31', - '@storybook/angular': '7.0.0-beta.31', - '@storybook/manager-api': '7.0.0-beta.31', - '@storybook/blocks': '7.0.0-beta.31', - '@storybook/builder-manager': '7.0.0-beta.31', - '@storybook/builder-vite': '7.0.0-beta.31', - '@storybook/builder-webpack5': '7.0.0-beta.31', - '@storybook/channel-postmessage': '7.0.0-beta.31', - '@storybook/channel-websocket': '7.0.0-beta.31', - '@storybook/channels': '7.0.0-beta.31', - '@storybook/cli': '7.0.0-beta.31', - '@storybook/client-api': '7.0.0-beta.31', - '@storybook/client-logger': '7.0.0-beta.31', - '@storybook/codemod': '7.0.0-beta.31', - '@storybook/components': '7.0.0-beta.31', - '@storybook/core-client': '7.0.0-beta.31', - '@storybook/core-common': '7.0.0-beta.31', - '@storybook/core-events': '7.0.0-beta.31', - '@storybook/core-server': '7.0.0-beta.31', - '@storybook/core-webpack': '7.0.0-beta.31', - '@storybook/csf-tools': '7.0.0-beta.31', - '@storybook/docs-tools': '7.0.0-beta.31', - '@storybook/ember': '7.0.0-beta.31', - '@storybook/html': '7.0.0-beta.31', - '@storybook/html-webpack5': '7.0.0-beta.31', - '@storybook/html-vite': '7.0.0-beta.31', - '@storybook/instrumenter': '7.0.0-beta.31', - '@storybook/nextjs': '7.0.0-beta.31', - '@storybook/node-logger': '7.0.0-beta.31', - '@storybook/postinstall': '7.0.0-beta.31', - '@storybook/preact': '7.0.0-beta.31', - '@storybook/preact-vite': '7.0.0-beta.31', - '@storybook/preact-webpack5': '7.0.0-beta.31', - '@storybook/preset-html-webpack': '7.0.0-beta.31', - '@storybook/preset-preact-webpack': '7.0.0-beta.31', - '@storybook/preset-react-webpack': '7.0.0-beta.31', - '@storybook/preset-server-webpack': '7.0.0-beta.31', - '@storybook/preset-svelte-webpack': '7.0.0-beta.31', - '@storybook/preset-vue-webpack': '7.0.0-beta.31', - '@storybook/preset-vue3-webpack': '7.0.0-beta.31', - '@storybook/preset-web-components-webpack': '7.0.0-beta.31', - '@storybook/preview': '7.0.0-beta.31', - '@storybook/preview-api': '7.0.0-beta.31', - '@storybook/preview-web': '7.0.0-beta.31', - '@storybook/react': '7.0.0-beta.31', - '@storybook/react-vite': '7.0.0-beta.31', - '@storybook/react-webpack5': '7.0.0-beta.31', - '@storybook/router': '7.0.0-beta.31', - '@storybook/server': '7.0.0-beta.31', - '@storybook/server-webpack5': '7.0.0-beta.31', - '@storybook/source-loader': '7.0.0-beta.31', - '@storybook/store': '7.0.0-beta.31', - '@storybook/svelte': '7.0.0-beta.31', - '@storybook/sveltekit': '7.0.0-beta.31', - '@storybook/svelte-vite': '7.0.0-beta.31', - '@storybook/svelte-webpack5': '7.0.0-beta.31', - '@storybook/telemetry': '7.0.0-beta.31', - '@storybook/theming': '7.0.0-beta.31', - '@storybook/manager': '7.0.0-beta.31', - '@storybook/vue': '7.0.0-beta.31', - '@storybook/vue-vite': '7.0.0-beta.31', - '@storybook/vue-webpack5': '7.0.0-beta.31', - '@storybook/vue3': '7.0.0-beta.31', - '@storybook/vue3-vite': '7.0.0-beta.31', - '@storybook/vue3-webpack5': '7.0.0-beta.31', - '@storybook/web-components': '7.0.0-beta.31', - '@storybook/web-components-webpack5': '7.0.0-beta.31', - '@storybook/web-components-vite': '7.0.0-beta.31', - sb: '7.0.0-beta.31', - storybook: '7.0.0-beta.31', + '@storybook/addon-a11y': '7.0.0-beta.33', + '@storybook/addon-actions': '7.0.0-beta.33', + '@storybook/addon-backgrounds': '7.0.0-beta.33', + '@storybook/addon-controls': '7.0.0-beta.33', + '@storybook/addon-docs': '7.0.0-beta.33', + '@storybook/addon-essentials': '7.0.0-beta.33', + '@storybook/addon-highlight': '7.0.0-beta.33', + '@storybook/addon-interactions': '7.0.0-beta.33', + '@storybook/addon-jest': '7.0.0-beta.33', + '@storybook/addon-links': '7.0.0-beta.33', + '@storybook/addon-measure': '7.0.0-beta.33', + '@storybook/addon-outline': '7.0.0-beta.33', + '@storybook/addon-storyshots': '7.0.0-beta.33', + '@storybook/addon-storyshots-puppeteer': '7.0.0-beta.33', + '@storybook/addon-storysource': '7.0.0-beta.33', + '@storybook/addon-toolbars': '7.0.0-beta.33', + '@storybook/addon-viewport': '7.0.0-beta.33', + '@storybook/addons': '7.0.0-beta.33', + '@storybook/angular': '7.0.0-beta.33', + '@storybook/manager-api': '7.0.0-beta.33', + '@storybook/blocks': '7.0.0-beta.33', + '@storybook/builder-manager': '7.0.0-beta.33', + '@storybook/builder-vite': '7.0.0-beta.33', + '@storybook/builder-webpack5': '7.0.0-beta.33', + '@storybook/channel-postmessage': '7.0.0-beta.33', + '@storybook/channel-websocket': '7.0.0-beta.33', + '@storybook/channels': '7.0.0-beta.33', + '@storybook/cli': '7.0.0-beta.33', + '@storybook/client-api': '7.0.0-beta.33', + '@storybook/client-logger': '7.0.0-beta.33', + '@storybook/codemod': '7.0.0-beta.33', + '@storybook/components': '7.0.0-beta.33', + '@storybook/core-client': '7.0.0-beta.33', + '@storybook/core-common': '7.0.0-beta.33', + '@storybook/core-events': '7.0.0-beta.33', + '@storybook/core-server': '7.0.0-beta.33', + '@storybook/core-webpack': '7.0.0-beta.33', + '@storybook/csf-tools': '7.0.0-beta.33', + '@storybook/docs-tools': '7.0.0-beta.33', + '@storybook/ember': '7.0.0-beta.33', + '@storybook/html': '7.0.0-beta.33', + '@storybook/html-webpack5': '7.0.0-beta.33', + '@storybook/html-vite': '7.0.0-beta.33', + '@storybook/instrumenter': '7.0.0-beta.33', + '@storybook/nextjs': '7.0.0-beta.33', + '@storybook/node-logger': '7.0.0-beta.33', + '@storybook/postinstall': '7.0.0-beta.33', + '@storybook/preact': '7.0.0-beta.33', + '@storybook/preact-vite': '7.0.0-beta.33', + '@storybook/preact-webpack5': '7.0.0-beta.33', + '@storybook/preset-html-webpack': '7.0.0-beta.33', + '@storybook/preset-preact-webpack': '7.0.0-beta.33', + '@storybook/preset-react-webpack': '7.0.0-beta.33', + '@storybook/preset-server-webpack': '7.0.0-beta.33', + '@storybook/preset-svelte-webpack': '7.0.0-beta.33', + '@storybook/preset-vue-webpack': '7.0.0-beta.33', + '@storybook/preset-vue3-webpack': '7.0.0-beta.33', + '@storybook/preset-web-components-webpack': '7.0.0-beta.33', + '@storybook/preview': '7.0.0-beta.33', + '@storybook/preview-api': '7.0.0-beta.33', + '@storybook/preview-web': '7.0.0-beta.33', + '@storybook/react': '7.0.0-beta.33', + '@storybook/react-vite': '7.0.0-beta.33', + '@storybook/react-webpack5': '7.0.0-beta.33', + '@storybook/router': '7.0.0-beta.33', + '@storybook/server': '7.0.0-beta.33', + '@storybook/server-webpack5': '7.0.0-beta.33', + '@storybook/source-loader': '7.0.0-beta.33', + '@storybook/store': '7.0.0-beta.33', + '@storybook/svelte': '7.0.0-beta.33', + '@storybook/sveltekit': '7.0.0-beta.33', + '@storybook/svelte-vite': '7.0.0-beta.33', + '@storybook/svelte-webpack5': '7.0.0-beta.33', + '@storybook/telemetry': '7.0.0-beta.33', + '@storybook/theming': '7.0.0-beta.33', + '@storybook/manager': '7.0.0-beta.33', + '@storybook/vue': '7.0.0-beta.33', + '@storybook/vue-vite': '7.0.0-beta.33', + '@storybook/vue-webpack5': '7.0.0-beta.33', + '@storybook/vue3': '7.0.0-beta.33', + '@storybook/vue3-vite': '7.0.0-beta.33', + '@storybook/vue3-webpack5': '7.0.0-beta.33', + '@storybook/web-components': '7.0.0-beta.33', + '@storybook/web-components-webpack5': '7.0.0-beta.33', + '@storybook/web-components-vite': '7.0.0-beta.33', + sb: '7.0.0-beta.33', + storybook: '7.0.0-beta.33', }; diff --git a/code/lib/client-api/package.json b/code/lib/client-api/package.json index bfc17aaa21a8..ccc079419101 100644 --- a/code/lib/client-api/package.json +++ b/code/lib/client-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/client-api", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Storybook Client API", "keywords": [ "storybook" @@ -42,8 +42,8 @@ "prep": "../../../scripts/prepare/facade.ts" }, "dependencies": { - "@storybook/client-logger": "7.0.0-beta.31", - "@storybook/preview-api": "7.0.0-beta.31" + "@storybook/client-logger": "7.0.0-beta.33", + "@storybook/preview-api": "7.0.0-beta.33" }, "publishConfig": { "access": "public" @@ -54,5 +54,5 @@ ], "shim": "@storybook/preview-api/dist/client-api" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/lib/client-logger/package.json b/code/lib/client-logger/package.json index 2ef66cc975e9..d70a7bc88f1f 100644 --- a/code/lib/client-logger/package.json +++ b/code/lib/client-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/client-logger", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "", "keywords": [ "storybook" @@ -56,5 +56,5 @@ "./src/index.ts" ] }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index 5c6e6f8fb982..f342c33e6fdd 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/codemod", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "A collection of codemod scripts written with JSCodeshift", "keywords": [ "storybook" @@ -50,9 +50,9 @@ "@babel/preset-env": "^7.20.2", "@babel/types": "^7.20.7", "@storybook/csf": "next", - "@storybook/csf-tools": "7.0.0-beta.31", - "@storybook/node-logger": "7.0.0-beta.31", - "@storybook/types": "7.0.0-beta.31", + "@storybook/csf-tools": "7.0.0-beta.33", + "@storybook/node-logger": "7.0.0-beta.33", + "@storybook/types": "7.0.0-beta.33", "cross-spawn": "^7.0.3", "globby": "^11.0.2", "jscodeshift": "^0.13.1", @@ -86,5 +86,5 @@ "./src/transforms/upgrade-hierarchy-separators.js" ] }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/lib/core-client/package.json b/code/lib/core-client/package.json index 105d0bf9865f..59f253bbccf2 100644 --- a/code/lib/core-client/package.json +++ b/code/lib/core-client/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-client", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" @@ -35,8 +35,8 @@ "prep": "../../../scripts/prepare/facade.ts" }, "dependencies": { - "@storybook/client-logger": "7.0.0-beta.31", - "@storybook/preview-api": "7.0.0-beta.31" + "@storybook/client-logger": "7.0.0-beta.33", + "@storybook/preview-api": "7.0.0-beta.33" }, "publishConfig": { "access": "public" @@ -47,5 +47,5 @@ ], "shim": "@storybook/preview-api/dist/core-client" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/lib/core-common/package.json b/code/lib/core-common/package.json index 5f75aca8bdee..4e2d6ba4ced9 100644 --- a/code/lib/core-common/package.json +++ b/code/lib/core-common/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-common", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" @@ -44,8 +44,8 @@ }, "dependencies": { "@babel/core": "^7.20.2", - "@storybook/node-logger": "7.0.0-beta.31", - "@storybook/types": "7.0.0-beta.31", + "@storybook/node-logger": "7.0.0-beta.33", + "@storybook/types": "7.0.0-beta.33", "@types/babel__core": "^7.1.20", "@types/express": "^4.7.0", "@types/node": "^16.0.0", @@ -56,7 +56,7 @@ "express": "^4.17.3", "file-system-cache": "^2.0.0", "find-up": "^5.0.0", - "fs-extra": "^9.0.1", + "fs-extra": "^11.1.0", "glob": "^7.1.6", "handlebars": "^4.7.7", "lazy-universal-dotenv": "^3.0.1", @@ -83,5 +83,5 @@ ], "platform": "node" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/lib/core-common/src/index.ts b/code/lib/core-common/src/index.ts index 8def5570ddfb..04c0008303ce 100644 --- a/code/lib/core-common/src/index.ts +++ b/code/lib/core-common/src/index.ts @@ -6,6 +6,7 @@ export * from './utils/cache'; export * from './utils/check-addon-order'; export * from './utils/envs'; export * from './utils/findDistEsm'; +export * from './utils/get-builder-options'; export * from './utils/get-framework-name'; export * from './utils/get-renderer-name'; export * from './utils/get-storybook-configuration'; diff --git a/code/lib/core-common/src/utils/get-builder-options.ts b/code/lib/core-common/src/utils/get-builder-options.ts new file mode 100644 index 000000000000..f0ef6c735f21 --- /dev/null +++ b/code/lib/core-common/src/utils/get-builder-options.ts @@ -0,0 +1,23 @@ +import type { Options } from '@storybook/types'; + +/** + * Builder options can be specified in `core.builder.options` or `framework.options.builder`. + * Preference is given here to `framework.options.builder` if both are specified. + */ +export async function getBuilderOptions>( + options: Options +): Promise> { + const framework = await options.presets.apply('framework', {}, options); + + if (typeof framework !== 'string' && framework?.options?.builder) { + return framework.options.builder; + } + + const { builder } = await options.presets.apply('core', {}, options); + + if (typeof builder !== 'string' && builder?.options) { + return builder.options as T; + } + + return {}; +} diff --git a/code/lib/core-common/src/utils/get-storybook-info.ts b/code/lib/core-common/src/utils/get-storybook-info.ts index 679ab828c03d..556d57049f00 100644 --- a/code/lib/core-common/src/utils/get-storybook-info.ts +++ b/code/lib/core-common/src/utils/get-storybook-info.ts @@ -17,6 +17,7 @@ const rendererPackages: Record = { '@storybook/riot': 'riot', '@storybook/svelte': 'svelte', '@storybook/preact': 'preact', + 'storybook-framework-qwik': 'qwik', '@storybook/rax': 'rax', '@storybook/server': 'server', }; diff --git a/code/lib/core-events/package.json b/code/lib/core-events/package.json index d2cc0a23a638..79f9ed6165a2 100644 --- a/code/lib/core-events/package.json +++ b/code/lib/core-events/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-events", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Event names used in storybook core", "keywords": [ "storybook" @@ -53,5 +53,5 @@ "./src/index.ts" ] }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index ecc2609c1ad0..76f76302b7fa 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-server", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" @@ -58,17 +58,17 @@ "dependencies": { "@aw-web-design/x-default-browser": "1.4.88", "@discoveryjs/json-ext": "^0.5.3", - "@storybook/builder-manager": "7.0.0-beta.31", - "@storybook/core-common": "7.0.0-beta.31", - "@storybook/core-events": "7.0.0-beta.31", + "@storybook/builder-manager": "7.0.0-beta.33", + "@storybook/core-common": "7.0.0-beta.33", + "@storybook/core-events": "7.0.0-beta.33", "@storybook/csf": "next", - "@storybook/csf-tools": "7.0.0-beta.31", + "@storybook/csf-tools": "7.0.0-beta.33", "@storybook/docs-mdx": "next", "@storybook/global": "^5.0.0", - "@storybook/node-logger": "7.0.0-beta.31", - "@storybook/preview-api": "7.0.0-beta.31", - "@storybook/telemetry": "7.0.0-beta.31", - "@storybook/types": "7.0.0-beta.31", + "@storybook/node-logger": "7.0.0-beta.33", + "@storybook/preview-api": "7.0.0-beta.33", + "@storybook/telemetry": "7.0.0-beta.33", + "@storybook/types": "7.0.0-beta.33", "@types/detect-port": "^1.3.0", "@types/node": "^16.0.0", "@types/node-fetch": "^2.5.7", @@ -81,7 +81,7 @@ "compression": "^1.7.4", "detect-port": "^1.3.0", "express": "^4.17.3", - "fs-extra": "^9.0.1", + "fs-extra": "^11.1.0", "globby": "^11.0.2", "ip": "^2.0.0", "lodash": "^4.17.21", @@ -119,5 +119,5 @@ ], "platform": "node" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/lib/core-server/src/utils/StoryIndexGenerator.ts b/code/lib/core-server/src/utils/StoryIndexGenerator.ts index 39e9817d77f6..6d8817147f0f 100644 --- a/code/lib/core-server/src/utils/StoryIndexGenerator.ts +++ b/code/lib/core-server/src/utils/StoryIndexGenerator.ts @@ -113,7 +113,7 @@ export class StoryIndexGenerator { async initialize() { // Find all matching paths for each specifier - await Promise.all( + const specifiersAndCaches = await Promise.all( this.specifiers.map(async (specifier) => { const pathToSubIndex = {} as SpecifierStoriesCache; @@ -132,10 +132,16 @@ export class StoryIndexGenerator { pathToSubIndex[absolutePath] = false; }); - this.specifierToCache.set(specifier, pathToSubIndex); + return [specifier, pathToSubIndex] as const; }) ); + // We do this in a second step to avoid timing issues with the Promise.all above -- to ensure + // the keys in the `specifierToCache` object are consistent with the order of specifiers. + specifiersAndCaches.forEach(([specifier, cache]) => + this.specifierToCache.set(specifier, cache) + ); + // Extract stories for each file await this.ensureExtracted(); } diff --git a/code/lib/core-webpack/package.json b/code/lib/core-webpack/package.json index d0c163a89465..47f0b205daf9 100644 --- a/code/lib/core-webpack/package.json +++ b/code/lib/core-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-webpack", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" @@ -43,9 +43,9 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/core-common": "7.0.0-beta.31", - "@storybook/node-logger": "7.0.0-beta.31", - "@storybook/types": "7.0.0-beta.31", + "@storybook/core-common": "7.0.0-beta.33", + "@storybook/node-logger": "7.0.0-beta.33", + "@storybook/types": "7.0.0-beta.33", "@types/node": "^16.0.0", "ts-dedent": "^2.0.0" }, @@ -62,5 +62,5 @@ ], "platform": "node" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/lib/csf-plugin/package.json b/code/lib/csf-plugin/package.json index f964cd334eea..e8934289769a 100644 --- a/code/lib/csf-plugin/package.json +++ b/code/lib/csf-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/csf-plugin", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Enrich CSF files via static analysis", "keywords": [ "storybook" @@ -43,7 +43,7 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/csf-tools": "7.0.0-beta.31", + "@storybook/csf-tools": "7.0.0-beta.33", "unplugin": "^0.10.2" }, "devDependencies": { @@ -64,5 +64,5 @@ ], "platform": "node" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/lib/csf-tools/package.json b/code/lib/csf-tools/package.json index ad204536bc87..c74e43f12d3b 100644 --- a/code/lib/csf-tools/package.json +++ b/code/lib/csf-tools/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/csf-tools", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "", "keywords": [ "storybook" @@ -45,8 +45,8 @@ "dependencies": { "@babel/types": "^7.20.2", "@storybook/csf": "next", - "@storybook/types": "7.0.0-beta.31", - "fs-extra": "^9.0.1", + "@storybook/types": "7.0.0-beta.33", + "fs-extra": "^11.1.0", "recast": "^0.23.1", "ts-dedent": "^2.0.0" }, @@ -54,7 +54,7 @@ "@babel/generator": "^7.20.4", "@babel/parser": "^7.20.3", "@babel/traverse": "^7.20.1", - "@types/fs-extra": "^9.0.6", + "@types/fs-extra": "^11.0.1", "@types/js-yaml": "^3.12.6", "js-yaml": "^3.14.1", "typescript": "~4.9.3" @@ -67,5 +67,5 @@ "./src/index.ts" ] }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/lib/csf-tools/src/ConfigFile.test.ts b/code/lib/csf-tools/src/ConfigFile.test.ts index 0c528a694cd7..2c3fa24c5101 100644 --- a/code/lib/csf-tools/src/ConfigFile.test.ts +++ b/code/lib/csf-tools/src/ConfigFile.test.ts @@ -747,4 +747,89 @@ describe('ConfigFile', () => { }); }); }); + + describe('config helpers', () => { + describe('getNameFromPath', () => { + it(`supports string literal node`, () => { + const source = dedent` + import type { StorybookConfig } from '@storybook/react-webpack5'; + + const config: StorybookConfig = { + framework: 'foo', + } + export default config; + `; + const config = loadConfig(source).parse(); + expect(config.getNameFromPath(['framework'])).toEqual('foo'); + }); + + it(`supports object expression node with name property`, () => { + const source = dedent` + import type { StorybookConfig } from '@storybook/react-webpack5'; + + const config: StorybookConfig = { + framework: { name: 'foo', options: { bar: require('baz') } }, + } + export default config; + `; + const config = loadConfig(source).parse(); + expect(config.getNameFromPath(['framework'])).toEqual('foo'); + }); + + it(`returns undefined when accessing a field that does not exist`, () => { + const source = dedent` + import type { StorybookConfig } from '@storybook/react-webpack5'; + + const config: StorybookConfig = { } + export default config; + `; + const config = loadConfig(source).parse(); + expect(config.getNameFromPath(['framework'])).toBeUndefined(); + }); + + it(`throws an error when node is of unexpected type`, () => { + const source = dedent` + import type { StorybookConfig } from '@storybook/react-webpack5'; + + const config: StorybookConfig = { + framework: makesNoSense(), + } + export default config; + `; + const config = loadConfig(source).parse(); + expect(() => config.getNameFromPath(['framework'])).toThrowError( + `The given node must be a string literal or an object expression with a "name" property that is a string literal.` + ); + }); + }); + + describe('getNamesFromPath', () => { + it(`supports an array with string literal and object expression with name property`, () => { + const source = dedent` + import type { StorybookConfig } from '@storybook/react-webpack5'; + + const config: StorybookConfig = { + addons: [ + 'foo', + { name: 'bar', options: {} }, + ] + } + export default config; + `; + const config = loadConfig(source).parse(); + expect(config.getNamesFromPath(['addons'])).toEqual(['foo', 'bar']); + }); + }); + + it(`returns undefined when accessing a field that does not exist`, () => { + const source = dedent` + import type { StorybookConfig } from '@storybook/react-webpack5'; + + const config: StorybookConfig = { } + export default config; + `; + const config = loadConfig(source).parse(); + expect(config.getNamesFromPath(['addons'])).toBeUndefined(); + }); + }); }); diff --git a/code/lib/csf-tools/src/ConfigFile.ts b/code/lib/csf-tools/src/ConfigFile.ts index 032de31d3fa7..3464bdfcabf1 100644 --- a/code/lib/csf-tools/src/ConfigFile.ts +++ b/code/lib/csf-tools/src/ConfigFile.ts @@ -254,6 +254,88 @@ export class ConfigFile { } } + /** + * Returns the name of a node in a given path, supporting the following formats: + * 1. { framework: 'value' } + * 2. { framework: { name: 'value', options: {} } } + */ + /** + * Returns the name of a node in a given path, supporting the following formats: + * @example + * // 1. { framework: 'framework-name' } + * // 2. { framework: { name: 'framework-name', options: {} } + * getNameFromPath(['framework']) // => 'framework-name' + */ + getNameFromPath(path: string[]): string | undefined { + const node = this.getFieldNode(path); + if (!node) { + return undefined; + } + + return this._getPresetValue(node, 'name'); + } + + /** + * Returns an array of names of a node in a given path, supporting the following formats: + * @example + * const config = { + * addons: [ + * 'first-addon', + * { name: 'second-addon', options: {} } + * ] + * } + * // => ['first-addon', 'second-addon'] + * getNamesFromPath(['addons']) + * + */ + getNamesFromPath(path: string[]): string[] | undefined { + const node = this.getFieldNode(path); + if (!node) { + return undefined; + } + + const pathNames: string[] = []; + if (t.isArrayExpression(node)) { + node.elements.forEach((element) => { + pathNames.push(this._getPresetValue(element, 'name')); + }); + } + + return pathNames; + } + + /** + * Given a node and a fallback property, returns a **non-evaluated** string value of the node. + * 1. { node: 'value' } + * 2. { node: { fallbackProperty: 'value' } } + */ + _getPresetValue(node: t.Node, fallbackProperty: string) { + let value; + if (t.isStringLiteral(node)) { + value = node.value; + } else if (t.isObjectExpression(node)) { + node.properties.forEach((prop) => { + if ( + t.isObjectProperty(prop) && + t.isIdentifier(prop.key) && + prop.key.name === fallbackProperty + ) { + if (t.isStringLiteral(prop.value)) { + value = prop.value.value; + } + } + }); + } + + if (!value) { + throw new Error( + `The given node must be a string literal or an object expression with a "${fallbackProperty}" property that is a string literal.` + ); + } + + return value; + } + removeField(path: string[]) { const removeProperty = (properties: t.ObjectProperty[], prop: string) => { const index = properties.findIndex( diff --git a/code/lib/docs-tools/package.json b/code/lib/docs-tools/package.json index 51b0ee595a1a..c118e7cd4843 100644 --- a/code/lib/docs-tools/package.json +++ b/code/lib/docs-tools/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/docs-tools", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Shared utility functions for frameworks to implement docs", "keywords": [ "storybook" @@ -44,9 +44,9 @@ }, "dependencies": { "@babel/core": "^7.12.10", - "@storybook/core-common": "7.0.0-beta.31", - "@storybook/preview-api": "7.0.0-beta.31", - "@storybook/types": "7.0.0-beta.31", + "@storybook/core-common": "7.0.0-beta.33", + "@storybook/preview-api": "7.0.0-beta.33", + "@storybook/types": "7.0.0-beta.33", "@types/doctrine": "^0.0.3", "doctrine": "^3.0.0", "lodash": "^4.17.21" @@ -64,5 +64,5 @@ "./src/index.ts" ] }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/lib/instrumenter/package.json b/code/lib/instrumenter/package.json index aec72288d25e..1cadbf4ccebf 100644 --- a/code/lib/instrumenter/package.json +++ b/code/lib/instrumenter/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/instrumenter", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "", "keywords": [ "storybook" @@ -43,11 +43,11 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/channels": "7.0.0-beta.31", - "@storybook/client-logger": "7.0.0-beta.31", - "@storybook/core-events": "7.0.0-beta.31", + "@storybook/channels": "7.0.0-beta.33", + "@storybook/client-logger": "7.0.0-beta.33", + "@storybook/core-events": "7.0.0-beta.33", "@storybook/global": "^5.0.0", - "@storybook/preview-api": "7.0.0-beta.31", + "@storybook/preview-api": "7.0.0-beta.33", "core-js": "^3.8.2" }, "devDependencies": { @@ -61,5 +61,5 @@ "./src/index.ts" ] }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/lib/manager-api-shim/package.json b/code/lib/manager-api-shim/package.json index a652a8cd5e0d..402d79bc46c3 100644 --- a/code/lib/manager-api-shim/package.json +++ b/code/lib/manager-api-shim/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/api", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Storybook Manager API (facade)", "keywords": [ "storybook" @@ -42,8 +42,8 @@ "prep": "../../../scripts/prepare/facade.ts" }, "dependencies": { - "@storybook/client-logger": "7.0.0-beta.31", - "@storybook/manager-api": "7.0.0-beta.31" + "@storybook/client-logger": "7.0.0-beta.33", + "@storybook/manager-api": "7.0.0-beta.33" }, "publishConfig": { "access": "public" @@ -54,5 +54,5 @@ ], "shim": "@storybook/manager-api" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/lib/manager-api/package.json b/code/lib/manager-api/package.json index 4478517ae782..f7803b614334 100644 --- a/code/lib/manager-api/package.json +++ b/code/lib/manager-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/manager-api", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Core Storybook API & Context", "keywords": [ "storybook" @@ -42,14 +42,14 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/channels": "7.0.0-beta.31", - "@storybook/client-logger": "7.0.0-beta.31", - "@storybook/core-events": "7.0.0-beta.31", + "@storybook/channels": "7.0.0-beta.33", + "@storybook/client-logger": "7.0.0-beta.33", + "@storybook/core-events": "7.0.0-beta.33", "@storybook/csf": "next", "@storybook/global": "^5.0.0", - "@storybook/router": "7.0.0-beta.31", - "@storybook/theming": "7.0.0-beta.31", - "@storybook/types": "7.0.0-beta.31", + "@storybook/router": "7.0.0-beta.33", + "@storybook/theming": "7.0.0-beta.33", + "@storybook/types": "7.0.0-beta.33", "dequal": "^2.0.2", "lodash": "^4.17.21", "memoizerific": "^1.11.3", @@ -78,5 +78,5 @@ "./src/index.tsx" ] }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/lib/manager-api/src/version.ts b/code/lib/manager-api/src/version.ts index 65d050e32591..c28cfd53be2e 100644 --- a/code/lib/manager-api/src/version.ts +++ b/code/lib/manager-api/src/version.ts @@ -1 +1 @@ -export const version = '7.0.0-beta.31'; +export const version = '7.0.0-beta.33'; diff --git a/code/lib/node-logger/package.json b/code/lib/node-logger/package.json index e85a29cea2c0..ac8c6f226100 100644 --- a/code/lib/node-logger/package.json +++ b/code/lib/node-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/node-logger", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "", "keywords": [ "storybook" @@ -60,5 +60,5 @@ "./src/index.ts" ] }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/lib/postinstall/package.json b/code/lib/postinstall/package.json index 382212b90a41..cd9c83a0da75 100644 --- a/code/lib/postinstall/package.json +++ b/code/lib/postinstall/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/postinstall", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Storybook addons postinstall utilities", "keywords": [ "api", @@ -57,5 +57,5 @@ "./src/index.ts" ] }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/lib/preview-api/package.json b/code/lib/preview-api/package.json index fdc96ff64f7a..1cad0b3800c8 100644 --- a/code/lib/preview-api/package.json +++ b/code/lib/preview-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview-api", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "", "keywords": [ "storybook" @@ -67,13 +67,13 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/channel-postmessage": "7.0.0-beta.31", - "@storybook/channels": "7.0.0-beta.31", - "@storybook/client-logger": "7.0.0-beta.31", - "@storybook/core-events": "7.0.0-beta.31", + "@storybook/channel-postmessage": "7.0.0-beta.33", + "@storybook/channels": "7.0.0-beta.33", + "@storybook/client-logger": "7.0.0-beta.33", + "@storybook/core-events": "7.0.0-beta.33", "@storybook/csf": "next", "@storybook/global": "^5.0.0", - "@storybook/types": "7.0.0-beta.31", + "@storybook/types": "7.0.0-beta.33", "@types/qs": "^6.9.5", "dequal": "^2.0.2", "lodash": "^4.17.21", @@ -86,7 +86,7 @@ }, "devDependencies": { "@jest/globals": "^26.6.2", - "@storybook/core-common": "7.0.0-beta.31", + "@storybook/core-common": "7.0.0-beta.33", "ansi-to-html": "^0.6.11", "react": "^16.14.0" }, @@ -103,5 +103,5 @@ "./src/store.ts" ] }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/lib/preview-api/src/modules/preview-web/docs-context/DocsContext.ts b/code/lib/preview-api/src/modules/preview-web/docs-context/DocsContext.ts index 02799288b716..3542e0a1919c 100644 --- a/code/lib/preview-api/src/modules/preview-web/docs-context/DocsContext.ts +++ b/code/lib/preview-api/src/modules/preview-web/docs-context/DocsContext.ts @@ -48,7 +48,7 @@ export class DocsContext implements DocsContextProps }); } - // This docs entry references this CSF file and can syncronously load the stories, as well + // This docs entry references this CSF file and can synchronously load the stories, as well // as reference them by module export. If the CSF is part of the "component" stories, they // can also be referenced by name and are in the componentStories list. referenceCSFFile(csfFile: CSFFile) { diff --git a/code/lib/preview-api/src/modules/store/csf/processCSFFile.ts b/code/lib/preview-api/src/modules/store/csf/processCSFFile.ts index c29322a25277..55fc8895eecd 100644 --- a/code/lib/preview-api/src/modules/store/csf/processCSFFile.ts +++ b/code/lib/preview-api/src/modules/store/csf/processCSFFile.ts @@ -8,8 +8,9 @@ import type { NormalizedComponentAnnotations, } from '@storybook/types'; import { isExportStory } from '@storybook/csf'; -import { logger } from '@storybook/client-logger'; +import { deprecate, logger } from '@storybook/client-logger'; +import dedent from 'ts-dedent'; import { normalizeStory } from './normalizeStory'; import { normalizeComponentAnnotations } from './normalizeComponentAnnotations'; @@ -38,6 +39,15 @@ const checkDisallowedParameters = (parameters?: Parameters) => { checkStorySort(parameters); }; +const checkSubcomponents = (meta: ModuleExports) => { + if (meta.subcomponents) { + deprecate(dedent`The \`subcomponents\` annotation is deprecated. + + Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#argstable-block' + `); + } +}; + // Given the raw exports of a CSF file, check and normalize it. export function processCSFFile( moduleExports: ModuleExports, @@ -53,6 +63,7 @@ export function processCSFFile( importPath ); checkDisallowedParameters(meta.parameters); + checkSubcomponents(meta); const csfFile: CSFFile = { meta, stories: {}, moduleExports }; diff --git a/code/lib/preview-web/package.json b/code/lib/preview-web/package.json index a172273ae919..5e962bdf7c45 100644 --- a/code/lib/preview-web/package.json +++ b/code/lib/preview-web/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview-web", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "", "keywords": [ "storybook" @@ -42,8 +42,8 @@ "prep": "../../../scripts/prepare/facade.ts" }, "dependencies": { - "@storybook/client-logger": "7.0.0-beta.31", - "@storybook/preview-api": "7.0.0-beta.31" + "@storybook/client-logger": "7.0.0-beta.33", + "@storybook/preview-api": "7.0.0-beta.33" }, "publishConfig": { "access": "public" @@ -54,5 +54,5 @@ ], "shim": "@storybook/preview-api/dist/preview-web" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/lib/preview/package.json b/code/lib/preview/package.json index 90f1415e3619..5fa32857d6a9 100644 --- a/code/lib/preview/package.json +++ b/code/lib/preview/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "", "keywords": [ "storybook" @@ -57,12 +57,12 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "devDependencies": { - "@storybook/channel-postmessage": "7.0.0-beta.31", - "@storybook/channel-websocket": "7.0.0-beta.31", - "@storybook/channels": "7.0.0-beta.31", - "@storybook/client-logger": "7.0.0-beta.31", - "@storybook/core-events": "7.0.0-beta.31", - "@storybook/preview-api": "7.0.0-beta.31", + "@storybook/channel-postmessage": "7.0.0-beta.33", + "@storybook/channel-websocket": "7.0.0-beta.33", + "@storybook/channels": "7.0.0-beta.33", + "@storybook/client-logger": "7.0.0-beta.33", + "@storybook/core-events": "7.0.0-beta.33", + "@storybook/preview-api": "7.0.0-beta.33", "typescript": "~4.9.3" }, "publishConfig": { @@ -74,5 +74,5 @@ "./src/globals.ts" ] }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/lib/router/package.json b/code/lib/router/package.json index e391c971e11d..09e5cb2ab183 100644 --- a/code/lib/router/package.json +++ b/code/lib/router/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/router", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Core Storybook Router", "keywords": [ "storybook" @@ -48,7 +48,7 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.0.0-beta.31", + "@storybook/client-logger": "7.0.0-beta.33", "memoizerific": "^1.11.3", "qs": "^6.10.0" }, @@ -74,5 +74,5 @@ "./src/utils.ts" ] }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index 48a4685a1eaa..fa1b935212ac 100644 --- a/code/lib/source-loader/package.json +++ b/code/lib/source-loader/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/source-loader", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Source loader", "keywords": [ "lib", @@ -45,7 +45,7 @@ }, "dependencies": { "@storybook/csf": "next", - "@storybook/types": "7.0.0-beta.31", + "@storybook/types": "7.0.0-beta.33", "estraverse": "^5.2.0", "lodash": "^4.17.21", "prettier": "^2.8.0" @@ -67,5 +67,5 @@ ], "platform": "node" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/lib/source-loader/src/abstract-syntax-tree/__snapshots__/inject-decorator.csf-meta-var.test.js.posix.snapshot b/code/lib/source-loader/src/abstract-syntax-tree/__snapshots__/inject-decorator.csf-meta-var.test.js.posix.snapshot deleted file mode 100644 index 8cc5e756eacb..000000000000 --- a/code/lib/source-loader/src/abstract-syntax-tree/__snapshots__/inject-decorator.csf-meta-var.test.js.posix.snapshot +++ /dev/null @@ -1,20 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`inject-decorator positive - ts - csf includes storySource parameter in the default exported variable 1`] = ` -"import React from \\"react\\"; -import { action } from \\"@storybook/addon-actions\\"; -import { Button } from \\"@storybook/react/demo\\"; - -const meta = {parameters: {\\"storySource\\":{\\"source\\":\\"import React from \\\\\\"react\\\\\\";\\\\nimport { action } from \\\\\\"@storybook/addon-actions\\\\\\";\\\\nimport { Button } from \\\\\\"@storybook/react/demo\\\\\\";\\\\n\\\\nconst meta = {\\\\n title: \\\\\\"Button\\\\\\",\\\\n excludeStories: [\\\\\\"text\\\\\\"],\\\\n includeStories: /emoji.*/\\\\n};\\\\n\\\\nexport default meta;\\\\n\\\\nexport const text = () => (\\\\n \\\\n);\\\\n\\",\\"locationsMap\\":{\\"text\\":{\\"startLoc\\":{\\"col\\":20,\\"line\\":13},\\"endLoc\\":{\\"col\\":1,\\"line\\":15},\\"startBody\\":{\\"col\\":20,\\"line\\":13},\\"endBody\\":{\\"col\\":1,\\"line\\":15}}}},}, - title: \\"Button\\", - excludeStories: [\\"text\\"], - includeStories: /emoji.*/ -}; - -export default meta; - -export const text = () => ( - -); -" -`; diff --git a/code/lib/source-loader/src/abstract-syntax-tree/__snapshots__/inject-decorator.csf.test.js.injectStoryParameters-posix.snapshot b/code/lib/source-loader/src/abstract-syntax-tree/__snapshots__/inject-decorator.csf.test.js.injectStoryParameters-posix.snapshot deleted file mode 100644 index 5b50732e7967..000000000000 --- a/code/lib/source-loader/src/abstract-syntax-tree/__snapshots__/inject-decorator.csf.test.js.injectStoryParameters-posix.snapshot +++ /dev/null @@ -1,14 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`inject-decorator injectStoryParameters - ts - csf includes storySource parameter in the default exported object 1`] = ` -" - - -Basic.parameters = { storySource: { source: \\"() => (\\\\n \\\\n)\\" }, ...Basic.parameters }; -WithParams.parameters = { storySource: { source: \\"() => \\" }, ...WithParams.parameters }; -WithDocsParams.parameters = { storySource: { source: \\"() => \\" }, ...WithDocsParams.parameters }; -WithStorySourceParams.parameters = { storySource: { source: \\"() => \\" }, ...WithStorySourceParams.parameters }; -WithTemplate.parameters = { storySource: { source: \\"(args: Args) => \\\\r\\\\n)\\" }, ...Basic.parameters }; -WithParams.parameters = { storySource: { source: \\"() => \\" }, ...WithParams.parameters }; -WithDocsParams.parameters = { storySource: { source: \\"() => \\" }, ...WithDocsParams.parameters }; -WithStorySourceParams.parameters = { storySource: { source: \\"() => \\" }, ...WithStorySourceParams.parameters }; -WithTemplate.parameters = { storySource: { source: \\"(args: Args) => \\\\n);\\\\n\\\\nexport const emoji = () => (\\\\n \\\\n);\\\\n\\\\nexport function emojiFn() {\\\\n return (\\\\n \\\\n )\\\\n};\\\\n\\",\\"locationsMap\\":{\\"text\\":{\\"startLoc\\":{\\"col\\":20,\\"line\\":11},\\"endLoc\\":{\\"col\\":1,\\"line\\":13},\\"startBody\\":{\\"col\\":20,\\"line\\":11},\\"endBody\\":{\\"col\\":1,\\"line\\":13}},\\"emoji\\":{\\"startLoc\\":{\\"col\\":21,\\"line\\":15},\\"endLoc\\":{\\"col\\":1,\\"line\\":21},\\"startBody\\":{\\"col\\":21,\\"line\\":15},\\"endBody\\":{\\"col\\":1,\\"line\\":21}},\\"emoji-fn\\":{\\"startLoc\\":{\\"col\\":7,\\"line\\":23},\\"endLoc\\":{\\"col\\":1,\\"line\\":31},\\"startBody\\":{\\"col\\":7,\\"line\\":23},\\"endBody\\":{\\"col\\":1,\\"line\\":31}}}},}, - title: \\"Button\\", - excludeStories: [\\"text\\"], - includeStories: /emoji.*/ -}; - -export const text = () => ( - -); - -export const emoji = () => ( - -);; - -export const emojiFn = function emojiFn() { - return ( - - ) -}; -" -`; diff --git a/code/lib/source-loader/src/abstract-syntax-tree/__snapshots__/inject-decorator.csf.test.js.windows.snapshot b/code/lib/source-loader/src/abstract-syntax-tree/__snapshots__/inject-decorator.csf.test.js.windows.snapshot deleted file mode 100644 index 7417c387974a..000000000000 --- a/code/lib/source-loader/src/abstract-syntax-tree/__snapshots__/inject-decorator.csf.test.js.windows.snapshot +++ /dev/null @@ -1,36 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`inject-decorator positive - ts - csf includes storySource parameter in the default exported object 1`] = ` -"import React from \\"react\\"; -import { action } from \\"@storybook/addon-actions\\"; -import { Button } from \\"@storybook/react/demo\\"; - -export default {parameters: {\\"storySource\\":{\\"source\\":\\"import React from \\\\\\"react\\\\\\";\\\\r\\\\nimport { action } from \\\\\\"@storybook/addon-actions\\\\\\";\\\\r\\\\nimport { Button } from \\\\\\"@storybook/react/demo\\\\\\";\\\\r\\\\n\\\\r\\\\nexport default {\\\\r\\\\n title: \\\\\\"Button\\\\\\",\\\\r\\\\n excludeStories: [\\\\\\"text\\\\\\"],\\\\r\\\\n includeStories: /emoji.*/\\\\r\\\\n};\\\\r\\\\n\\\\r\\\\nexport const text = () => (\\\\r\\\\n \\\\r\\\\n);\\\\r\\\\n\\\\r\\\\nexport const emoji = () => (\\\\r\\\\n \\\\r\\\\n);\\\\r\\\\n\\\\r\\\\nexport function emojiFn() {\\\\r\\\\n return (\\\\r\\\\n \\\\r\\\\n )\\\\r\\\\n};\\\\r\\\\n\\",\\"locationsMap\\":{\\"text\\":{\\"startLoc\\":{\\"col\\":20,\\"line\\":11},\\"endLoc\\":{\\"col\\":1,\\"line\\":13},\\"startBody\\":{\\"col\\":20,\\"line\\":11},\\"endBody\\":{\\"col\\":1,\\"line\\":13}},\\"emoji\\":{\\"startLoc\\":{\\"col\\":21,\\"line\\":15},\\"endLoc\\":{\\"col\\":1,\\"line\\":21},\\"startBody\\":{\\"col\\":21,\\"line\\":15},\\"endBody\\":{\\"col\\":1,\\"line\\":21}},\\"emoji-fn\\":{\\"startLoc\\":{\\"col\\":7,\\"line\\":23},\\"endLoc\\":{\\"col\\":1,\\"line\\":31},\\"startBody\\":{\\"col\\":7,\\"line\\":23},\\"endBody\\":{\\"col\\":1,\\"line\\":31}}}},}, - title: \\"Button\\", - excludeStories: [\\"text\\"], - includeStories: /emoji.*/ -}; - -export const text = () => ( - -); - -export const emoji = () => ( - -);; - -export const emojiFn = function emojiFn() { - return ( - - ) -}; -" -`; diff --git a/code/lib/source-loader/src/abstract-syntax-tree/generate-helpers.js b/code/lib/source-loader/src/abstract-syntax-tree/generate-helpers.js index 4113d084bafb..7e9f60048d07 100644 --- a/code/lib/source-loader/src/abstract-syntax-tree/generate-helpers.js +++ b/code/lib/source-loader/src/abstract-syntax-tree/generate-helpers.js @@ -12,7 +12,8 @@ import { import { extractSource } from '../extract-source'; export function sanitizeSource(source) { - return JSON.stringify(source) + return JSON.stringify(source, null, 2) + .trim() .replace(/\u2028/g, '\\u2028') .replace(/\u2029/g, '\\u2029'); } @@ -155,9 +156,15 @@ export function generateSourcesInExportedParameters(source, ast, additionalParam const { splicedSource, parametersSliceOfCode, indexWhereToAppend, foundParametersProperty } = popParametersObjectFromDefaultExport(source, ast); if (indexWhereToAppend !== -1) { - const additionalParametersAsJson = JSON.stringify({ - storySource: transformLocationMapToIds(additionalParameters), - }).slice(0, -1); + const additionalParametersAsJson = JSON.stringify( + { + storySource: transformLocationMapToIds(additionalParameters), + }, + null, + 2 + ) + .trim() + .slice(0, -1); const propertyDeclaration = foundParametersProperty ? '' : 'parameters: '; const comma = foundParametersProperty ? '' : ','; const newParameters = `${propertyDeclaration}${additionalParametersAsJson},${parametersSliceOfCode.substring( diff --git a/code/lib/source-loader/src/abstract-syntax-tree/inject-decorator.csf.test.js b/code/lib/source-loader/src/abstract-syntax-tree/inject-decorator.csf.test.js index 324e16e4e08a..88143828a8ed 100644 --- a/code/lib/source-loader/src/abstract-syntax-tree/inject-decorator.csf.test.js +++ b/code/lib/source-loader/src/abstract-syntax-tree/inject-decorator.csf.test.js @@ -1,63 +1,52 @@ -import fs from 'fs'; +import { readFile } from 'fs/promises'; import path from 'path'; import 'jest-specific-snapshot'; import injectDecorator from './inject-decorator'; +import getParser from './parsers'; -const { SNAPSHOT_OS } = global; +const regex = /\\r\\n|\r\n|\r|\n/g; describe('inject-decorator', () => { const snapshotDir = path.join(__dirname, '__snapshots__'); describe('positive - ts - csf', () => { - it('includes storySource parameter in the default exported object', () => { + it('includes storySource parameter in the default exported object', async () => { const mockFilePath = './__mocks__/inject-decorator.ts.csf.txt'; - const source = fs.readFileSync(mockFilePath, 'utf-8'); + const source = await readFile(mockFilePath, 'utf-8'); const result = injectDecorator(source, path.resolve(__dirname, mockFilePath), { parser: 'typescript', }); - expect(result.source).toMatchSpecificSnapshot( - path.join(snapshotDir, `inject-decorator.csf.test.js.${SNAPSHOT_OS}.snapshot`) - ); - expect(result.source).toEqual( - expect.stringContaining( - 'export default {parameters: {"storySource":{"source":"import React from' - ) - ); + expect(getParser('typescript').parse(result.source)).toBeTruthy(); + + expect(result.source).toEqual(expect.stringContaining('"source": "import React from')); }); - it('includes storySource parameter in the default exported variable', () => { + it('includes storySource parameter in the default exported variable', async () => { const mockFilePath = './__mocks__/inject-decorator.ts.csf-meta-var.txt'; - const source = fs.readFileSync(mockFilePath, 'utf-8'); + const source = await readFile(mockFilePath, 'utf-8'); const result = injectDecorator(source, path.resolve(__dirname, mockFilePath), { parser: 'typescript', }); - expect(result.source).toMatchSpecificSnapshot( - path.join(snapshotDir, `inject-decorator.csf-meta-var.test.js.${SNAPSHOT_OS}.snapshot`) - ); - expect(result.source).toEqual( - expect.stringContaining( - 'const meta = {parameters: {"storySource":{"source":"import React from' - ) - ); + expect(getParser('typescript').parse(result.source)).toBeTruthy(); + + expect(result.source).toEqual(expect.stringContaining('"source": "import React from')); }); }); describe('injectStoryParameters - ts - csf', () => { - it('includes storySource parameter in the default exported object', () => { + it('includes storySource parameter in the default exported object', async () => { const mockFilePath = './__mocks__/inject-parameters.ts.csf.txt'; - const source = fs.readFileSync(mockFilePath, 'utf-8'); + const source = await readFile(mockFilePath, 'utf-8'); const result = injectDecorator(source, path.resolve(__dirname, mockFilePath), { injectStoryParameters: true, parser: 'typescript', }); - expect(result.source).toMatchSpecificSnapshot( - path.join( - snapshotDir, - `inject-decorator.csf.test.js.injectStoryParameters-${SNAPSHOT_OS}.snapshot` - ) - ); + + expect(result.source).toContain('Basic.parameters = { storySource: { source:'); + expect(result.source).toContain('WithParams.parameters = { storySource: { source:'); + expect(result.source).toContain('WithDocsParams.parameters = { storySource: { source:'); }); }); }); diff --git a/code/lib/source-loader/src/build.js b/code/lib/source-loader/src/build.js index 8511fac4cba6..c2be5ade7dc1 100644 --- a/code/lib/source-loader/src/build.js +++ b/code/lib/source-loader/src/build.js @@ -19,7 +19,7 @@ export async function transform(inputSource) { // @ts-expect-error (Converted from ts-ignore) var __STORY__ = ${sourceJson}; // @ts-expect-error (Converted from ts-ignore) - var __LOCATIONS_MAP__ = ${JSON.stringify(addsMap)}; + var __LOCATIONS_MAP__ = ${JSON.stringify(addsMap, null, 2).trim()}; `; return `${preamble}\n${source}`; } diff --git a/code/lib/store/package.json b/code/lib/store/package.json index c82a73fa5af8..7eb5139d86ab 100644 --- a/code/lib/store/package.json +++ b/code/lib/store/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/store", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "", "keywords": [ "storybook" @@ -42,8 +42,8 @@ "prep": "../../../scripts/prepare/facade.ts" }, "dependencies": { - "@storybook/client-logger": "7.0.0-beta.31", - "@storybook/preview-api": "7.0.0-beta.31" + "@storybook/client-logger": "7.0.0-beta.33", + "@storybook/preview-api": "7.0.0-beta.33" }, "publishConfig": { "access": "public" @@ -55,5 +55,5 @@ "platform": "node", "shim": "@storybook/preview-api/dist/store" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/lib/store/template/stories/rendering.stories.ts b/code/lib/store/template/stories/rendering.stories.ts index 395d94ea4424..71e2f1a025cd 100644 --- a/code/lib/store/template/stories/rendering.stories.ts +++ b/code/lib/store/template/stories/rendering.stories.ts @@ -9,14 +9,14 @@ export default { label: 'Click me', }, }; - +// this is the story should be remove it will always fail, because forceReRender Api is removed in V7 export const ForceReRender = { play: async ({ canvasElement }: PlayFunctionContext) => { const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__; const button = await within(canvasElement).findByRole('button'); await button.focus(); await expect(button).toHaveFocus(); - + // forceRender is not called in V7 // By forcing the component to rerender, we reset the focus state await channel.emit('forceReRender'); await waitFor(() => expect(button).not.toHaveFocus()); diff --git a/code/lib/telemetry/package.json b/code/lib/telemetry/package.json index b674a13c3d34..2bf00a219182 100644 --- a/code/lib/telemetry/package.json +++ b/code/lib/telemetry/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/telemetry", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Telemetry logging for crash reports and usage statistics", "keywords": [ "storybook" @@ -43,12 +43,12 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.0.0-beta.31", - "@storybook/core-common": "7.0.0-beta.31", + "@storybook/client-logger": "7.0.0-beta.33", + "@storybook/core-common": "7.0.0-beta.33", "chalk": "^4.1.0", "detect-package-manager": "^2.0.1", "fetch-retry": "^5.0.2", - "fs-extra": "^9.0.1", + "fs-extra": "^11.1.0", "isomorphic-unfetch": "^3.1.0", "nanoid": "^3.3.1", "read-pkg-up": "^7.0.1" @@ -65,5 +65,5 @@ ], "platform": "node" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/lib/telemetry/src/anonymous-id.test.ts b/code/lib/telemetry/src/anonymous-id.test.ts index 1e776dce841f..ad8f01ad0b1f 100644 --- a/code/lib/telemetry/src/anonymous-id.test.ts +++ b/code/lib/telemetry/src/anonymous-id.test.ts @@ -72,4 +72,14 @@ describe('normalizeGitUrl', () => { 'github.com/storybookjs/storybook.git' ); }); + + it('trims off extra whitespace', () => { + expect(normalizeGitUrl('https://github.com/storybookjs/storybook.git#next\n')).toEqual( + 'github.com/storybookjs/storybook.git' + ); + + expect(normalizeGitUrl('https://github.com/storybookjs/storybook.git\n')).toEqual( + 'github.com/storybookjs/storybook.git' + ); + }); }); diff --git a/code/lib/telemetry/src/anonymous-id.ts b/code/lib/telemetry/src/anonymous-id.ts index 4f12cf19e5c9..6c4dfb8b3148 100644 --- a/code/lib/telemetry/src/anonymous-id.ts +++ b/code/lib/telemetry/src/anonymous-id.ts @@ -6,7 +6,7 @@ import { oneWayHash } from './one-way-hash'; export function normalizeGitUrl(rawUrl: string) { // I don't *think* its possible to set a hash on a origin URL, but just in case - const urlWithoutHash = rawUrl.replace(/#.*$/, ''); + const urlWithoutHash = rawUrl.trim().replace(/#.*$/, ''); // Strip anything ahead of an @ const urlWithoutUser = urlWithoutHash.replace(/^.*@/, ''); diff --git a/code/lib/theming/package.json b/code/lib/theming/package.json index bea6adedb729..8ce7a716f95b 100644 --- a/code/lib/theming/package.json +++ b/code/lib/theming/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/theming", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Core Storybook Components", "keywords": [ "storybook" @@ -49,7 +49,7 @@ }, "dependencies": { "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0", - "@storybook/client-logger": "7.0.0-beta.31", + "@storybook/client-logger": "7.0.0-beta.33", "@storybook/global": "^5.0.0", "memoizerific": "^1.11.3" }, @@ -58,10 +58,10 @@ "@emotion/is-prop-valid": "^1.2.0", "@emotion/react": "^11.10.4", "@emotion/styled": "^11.10.4", - "@types/fs-extra": "^9.0.6", + "@types/fs-extra": "^11.0.1", "@types/node": "^16.0.0", "deep-object-diff": "^1.1.0", - "fs-extra": "^9.0.1", + "fs-extra": "^11.1.0", "polished": "^4.2.2", "ts-dedent": "^2.0.0", "typescript": "~4.9.3" @@ -80,5 +80,5 @@ ], "post": "./scripts/fix-theme-type-export.ts" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/lib/types/package.json b/code/lib/types/package.json index 939152fb0e26..494c33afaa7d 100644 --- a/code/lib/types/package.json +++ b/code/lib/types/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/types", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Core Storybook Types", "keywords": [ "storybook" @@ -44,7 +44,7 @@ }, "dependencies": { "@babel/core": "^7.12.10", - "@storybook/channels": "7.0.0-beta.31", + "@storybook/channels": "7.0.0-beta.33", "@types/babel__core": "^7.0.0", "@types/express": "^4.7.0", "express": "^4.17.3", @@ -63,5 +63,5 @@ "./src/index.ts" ] }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/nx.json b/code/nx.json index a9e5bd3c4bff..d02cbb3abd87 100644 --- a/code/nx.json +++ b/code/nx.json @@ -11,7 +11,7 @@ "default": { "runner": "@nrwl/nx-cloud", "options": { - "cacheableOperations": ["build", "test", "lint", "package", "prep", "check"], + "cacheableOperations": ["prep"], "accessToken": "NGVmYTkxMmItYzY3OS00MjkxLTk1ZDktZDFmYTFmNmVlNGY4fHJlYWQ=", "canTrackAnalytics": false, "showUsageWarnings": true, diff --git a/code/package.json b/code/package.json index 96b3b0f8ba13..4ba68c7a5023 100644 --- a/code/package.json +++ b/code/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/root", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "private": true, "homepage": "https://storybook.js.org/", "repository": { @@ -97,7 +97,7 @@ "@nrwl/cli": "^15.4.5", "@nrwl/nx-cloud": "^15.0.2", "@nrwl/workspace": "^15.4.5", - "@playwright/test": "1.29.1", + "@playwright/test": "1.30.0", "@storybook/addon-a11y": "workspace:*", "@storybook/addon-actions": "workspace:*", "@storybook/addon-backgrounds": "workspace:*", @@ -197,7 +197,7 @@ "@testing-library/react": "^11.2.2", "@testing-library/user-event": "^13.2.1", "@types/express": "^4.17.11", - "@types/fs-extra": "^9.0.6", + "@types/fs-extra": "^11.0.1", "@types/lodash": "^4.14.167", "@types/node": "^16.0.0", "@types/react": "^16.14.34", @@ -224,7 +224,7 @@ "eslint-plugin-import": "^2.26.0", "eslint-plugin-react": "^7.31.10", "eslint-plugin-storybook": "^0.6.6", - "fs-extra": "^9.0.1", + "fs-extra": "^11.1.0", "github-release-from-changelog": "^2.1.1", "glob": "^7.1.6", "http-server": "^0.12.3", @@ -241,7 +241,7 @@ "lodash": "^4.17.21", "node-gyp": "^8.4.0", "nx": "^15.4.5", - "playwright": "1.29.1", + "playwright": "1.30.0", "prettier": "2.8.0", "process": "^0.11.10", "raf": "^3.4.1", diff --git a/code/presets/html-webpack/package.json b/code/presets/html-webpack/package.json index 80f0886420be..95c8a60b4059 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": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -48,7 +48,7 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/core-webpack": "7.0.0-beta.31", + "@storybook/core-webpack": "7.0.0-beta.33", "@types/node": "^16.0.0", "html-loader": "^3.1.0", "webpack": "5" @@ -71,5 +71,5 @@ ], "platform": "node" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/presets/preact-webpack/package.json b/code/presets/preact-webpack/package.json index 9979dee9ab00..47c73576f49d 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": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" @@ -49,7 +49,7 @@ }, "dependencies": { "@babel/plugin-transform-react-jsx": "^7.19.0", - "@storybook/core-webpack": "7.0.0-beta.31", + "@storybook/core-webpack": "7.0.0-beta.33", "@types/node": "^16.0.0" }, "devDependencies": { @@ -72,5 +72,5 @@ ], "platform": "node" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/presets/react-webpack/package.json b/code/presets/react-webpack/package.json index 57081f183cd6..1a746a9c656e 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": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -71,16 +71,16 @@ "@babel/preset-flow": "^7.18.6", "@babel/preset-react": "^7.18.6", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5", - "@storybook/core-webpack": "7.0.0-beta.31", - "@storybook/docs-tools": "7.0.0-beta.31", - "@storybook/node-logger": "7.0.0-beta.31", - "@storybook/react": "7.0.0-beta.31", + "@storybook/core-webpack": "7.0.0-beta.33", + "@storybook/docs-tools": "7.0.0-beta.33", + "@storybook/node-logger": "7.0.0-beta.33", + "@storybook/react": "7.0.0-beta.33", "@storybook/react-docgen-typescript-plugin": "1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0", "@types/node": "^16.0.0", "@types/semver": "^7.3.4", "babel-plugin-add-react-displayname": "^0.0.5", "babel-plugin-react-docgen": "^4.2.1", - "fs-extra": "^9.0.1", + "fs-extra": "^11.1.0", "react-refresh": "^0.11.0", "semver": "^7.3.7" }, @@ -117,5 +117,5 @@ ], "platform": "node" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/presets/server-webpack/package.json b/code/presets/server-webpack/package.json index 02532bc71da7..cb194ce6e4df 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": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -53,17 +53,17 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/core-server": "7.0.0-beta.31", - "@storybook/core-webpack": "7.0.0-beta.31", + "@storybook/core-server": "7.0.0-beta.33", + "@storybook/core-webpack": "7.0.0-beta.33", "@storybook/global": "^5.0.0", - "@storybook/server": "7.0.0-beta.31", + "@storybook/server": "7.0.0-beta.33", "@types/node": "^16.0.0", "safe-identifier": "^0.4.1", "ts-dedent": "^2.0.0", "yaml-loader": "^0.8.0" }, "devDependencies": { - "fs-extra": "^9.0.1", + "fs-extra": "^11.1.0", "jest-specific-snapshot": "^7.0.0", "typescript": "~4.9.3", "yaml": "^1.10.0" @@ -81,5 +81,5 @@ ], "platform": "node" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/presets/svelte-webpack/package.json b/code/presets/svelte-webpack/package.json index 94d6ea382b82..1fbe9837bf10 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": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -63,8 +63,8 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/core-webpack": "7.0.0-beta.31", - "@storybook/node-logger": "7.0.0-beta.31", + "@storybook/core-webpack": "7.0.0-beta.33", + "@storybook/node-logger": "7.0.0-beta.33", "sveltedoc-parser": "^4.2.1", "ts-dedent": "^2.0.0" }, @@ -93,5 +93,5 @@ ], "platform": "node" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/presets/vue-webpack/package.json b/code/presets/vue-webpack/package.json index 47c510921dcd..4e308e2f3f48 100644 --- a/code/presets/vue-webpack/package.json +++ b/code/presets/vue-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-vue-webpack", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -58,8 +58,8 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/core-webpack": "7.0.0-beta.31", - "@storybook/docs-tools": "7.0.0-beta.31", + "@storybook/core-webpack": "7.0.0-beta.33", + "@storybook/docs-tools": "7.0.0-beta.33", "@types/node": "^16.0.0", "ts-loader": "^9.2.8", "vue-docgen-api": "^4.44.23", @@ -95,5 +95,5 @@ ], "platform": "node" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/presets/vue3-webpack/package.json b/code/presets/vue3-webpack/package.json index 35775e3a591d..0105cd118975 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": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -58,8 +58,8 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/core-webpack": "7.0.0-beta.31", - "@storybook/docs-tools": "7.0.0-beta.31", + "@storybook/core-webpack": "7.0.0-beta.33", + "@storybook/docs-tools": "7.0.0-beta.33", "@types/node": "^16.0.0", "ts-loader": "^9.2.8", "vue-docgen-api": "^4.46.0", @@ -92,5 +92,5 @@ ], "platform": "node" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/presets/web-components-webpack/package.json b/code/presets/web-components-webpack/package.json index a1eaa9de255c..9011b011f858 100644 --- a/code/presets/web-components-webpack/package.json +++ b/code/presets/web-components-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-web-components-webpack", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.", "keywords": [ "lit-html", @@ -53,7 +53,7 @@ "@babel/plugin-syntax-dynamic-import": "^7.8.3", "@babel/plugin-syntax-import-meta": "^7.10.4", "@babel/preset-env": "^7.20.2", - "@storybook/core-webpack": "7.0.0-beta.31", + "@storybook/core-webpack": "7.0.0-beta.33", "@types/node": "^16.0.0", "babel-loader": "^7.0.0 || ^8.0.0 || ^9.0.0", "babel-plugin-bundled-import-meta": "^0.3.1" @@ -77,5 +77,5 @@ ], "platform": "node" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/renderers/html/package.json b/code/renderers/html/package.json index 08e7f8f05df1..04b2fc553ebd 100644 --- a/code/renderers/html/package.json +++ b/code/renderers/html/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Storybook HTML renderer", "keywords": [ "storybook" @@ -48,11 +48,11 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/core-client": "7.0.0-beta.31", - "@storybook/docs-tools": "7.0.0-beta.31", + "@storybook/core-client": "7.0.0-beta.33", + "@storybook/docs-tools": "7.0.0-beta.33", "@storybook/global": "^5.0.0", - "@storybook/preview-api": "7.0.0-beta.31", - "@storybook/types": "7.0.0-beta.31", + "@storybook/preview-api": "7.0.0-beta.33", + "@storybook/types": "7.0.0-beta.33", "ts-dedent": "^2.0.0" }, "devDependencies": { @@ -74,5 +74,5 @@ ], "platform": "browser" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/renderers/preact/package.json b/code/renderers/preact/package.json index b708bdf20f33..42ccf9f3edd5 100644 --- a/code/renderers/preact/package.json +++ b/code/renderers/preact/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Storybook Preact renderer", "keywords": [ "storybook" @@ -48,10 +48,10 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/core-client": "7.0.0-beta.31", + "@storybook/core-client": "7.0.0-beta.33", "@storybook/global": "^5.0.0", - "@storybook/preview-api": "7.0.0-beta.31", - "@storybook/types": "7.0.0-beta.31", + "@storybook/preview-api": "7.0.0-beta.33", + "@storybook/types": "7.0.0-beta.33", "ts-dedent": "^2.0.0" }, "devDependencies": { @@ -74,5 +74,5 @@ ], "platform": "browser" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json index 671403c9a5ab..7f190a4ab49f 100644 --- a/code/renderers/react/package.json +++ b/code/renderers/react/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Storybook React renderer", "keywords": [ "storybook" @@ -48,12 +48,12 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.0.0-beta.31", - "@storybook/core-client": "7.0.0-beta.31", - "@storybook/docs-tools": "7.0.0-beta.31", + "@storybook/client-logger": "7.0.0-beta.33", + "@storybook/core-client": "7.0.0-beta.33", + "@storybook/docs-tools": "7.0.0-beta.33", "@storybook/global": "^5.0.0", - "@storybook/preview-api": "7.0.0-beta.31", - "@storybook/types": "7.0.0-beta.31", + "@storybook/preview-api": "7.0.0-beta.33", + "@storybook/types": "7.0.0-beta.33", "@types/escodegen": "^0.0.6", "@types/estree": "^0.0.51", "@types/node": "^16.0.0", @@ -99,5 +99,5 @@ ], "platform": "browser" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json index 2ba1a58af64c..baf2fc57674c 100644 --- a/code/renderers/server/package.json +++ b/code/renderers/server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Storybook Server renderer", "keywords": [ "storybook" @@ -48,10 +48,10 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/core-client": "7.0.0-beta.31", + "@storybook/core-client": "7.0.0-beta.33", "@storybook/global": "^5.0.0", - "@storybook/preview-api": "7.0.0-beta.31", - "@storybook/types": "7.0.0-beta.31", + "@storybook/preview-api": "7.0.0-beta.33", + "@storybook/types": "7.0.0-beta.33", "ts-dedent": "^2.0.0" }, "devDependencies": { @@ -70,5 +70,5 @@ ], "platform": "browser" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json index 6f0d4f8ff3d7..d688292225f1 100644 --- a/code/renderers/svelte/package.json +++ b/code/renderers/svelte/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Storybook Svelte renderer", "keywords": [ "storybook" @@ -52,12 +52,12 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.0.0-beta.31", - "@storybook/core-client": "7.0.0-beta.31", - "@storybook/docs-tools": "7.0.0-beta.31", + "@storybook/client-logger": "7.0.0-beta.33", + "@storybook/core-client": "7.0.0-beta.33", + "@storybook/docs-tools": "7.0.0-beta.33", "@storybook/global": "^5.0.0", - "@storybook/preview-api": "7.0.0-beta.31", - "@storybook/types": "7.0.0-beta.31", + "@storybook/preview-api": "7.0.0-beta.33", + "@storybook/types": "7.0.0-beta.33", "sveltedoc-parser": "^4.2.1", "type-fest": "2.19.0" }, @@ -83,5 +83,5 @@ ], "platform": "browser" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/renderers/vue/package.json b/code/renderers/vue/package.json index 4dab79e395de..a61a9e2b1e4f 100644 --- a/code/renderers/vue/package.json +++ b/code/renderers/vue/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Storybook Vue renderer", "keywords": [ "storybook" @@ -48,12 +48,12 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.0.0-beta.31", - "@storybook/core-client": "7.0.0-beta.31", - "@storybook/docs-tools": "7.0.0-beta.31", + "@storybook/client-logger": "7.0.0-beta.33", + "@storybook/core-client": "7.0.0-beta.33", + "@storybook/docs-tools": "7.0.0-beta.33", "@storybook/global": "^5.0.0", - "@storybook/preview-api": "7.0.0-beta.31", - "@storybook/types": "7.0.0-beta.31", + "@storybook/preview-api": "7.0.0-beta.33", + "@storybook/types": "7.0.0-beta.33", "ts-dedent": "^2.0.0", "type-fest": "2.19.0" }, @@ -86,5 +86,5 @@ ], "platform": "browser" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json index c39024cfe753..84f4fe1519d5 100644 --- a/code/renderers/vue3/package.json +++ b/code/renderers/vue3/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Storybook Vue 3 renderer", "keywords": [ "storybook" @@ -48,11 +48,11 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/core-client": "7.0.0-beta.31", - "@storybook/docs-tools": "7.0.0-beta.31", + "@storybook/core-client": "7.0.0-beta.33", + "@storybook/docs-tools": "7.0.0-beta.33", "@storybook/global": "^5.0.0", - "@storybook/preview-api": "7.0.0-beta.31", - "@storybook/types": "7.0.0-beta.31", + "@storybook/preview-api": "7.0.0-beta.33", + "@storybook/types": "7.0.0-beta.33", "ts-dedent": "^2.0.0", "type-fest": "2.19.0" }, @@ -80,5 +80,5 @@ ], "platform": "browser" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/renderers/vue3/src/render.ts b/code/renderers/vue3/src/render.ts index 2af91f011291..0f4b72d12e25 100644 --- a/code/renderers/vue3/src/render.ts +++ b/code/renderers/vue3/src/render.ts @@ -1,5 +1,6 @@ +/* eslint-disable no-param-reassign */ import { dedent } from 'ts-dedent'; -import { createApp, h } from 'vue'; +import { createApp, h, reactive } from 'vue'; import type { RenderContext, ArgsStoryFn } from '@storybook/types'; import type { Args, StoryContext } from '@storybook/csf'; @@ -21,26 +22,27 @@ export const setup = (fn: (app: any) => void) => { setupFunction = fn; }; -const map = new Map>(); +const map = new Map< + VueRenderer['canvasElement'], + { vueApp: ReturnType; reactiveArgs: any } +>(); export function renderToCanvas( - { title, name, storyFn, showMain, showError, showException }: RenderContext, + { + storyFn, + name, + showMain, + showError, + showException, + id, + title, + forceRemount, + storyContext, + }: RenderContext, canvasElement: VueRenderer['canvasElement'] ) { // TODO: explain cyclical nature of these app => story => mount - let element: StoryFnVueReturnType; - const storybookApp = createApp({ - unmounted() { - map.delete(canvasElement); - }, - render() { - map.set(canvasElement, storybookApp); - setupFunction(storybookApp); - return h(element); - }, - }); - storybookApp.config.errorHandler = (e: unknown) => showException(e as Error); - element = storyFn(); + const element: StoryFnVueReturnType = storyFn(); if (!element) { showError({ @@ -50,15 +52,38 @@ export function renderToCanvas( Use "() => ({ template: '' })" or "() => ({ components: MyComp, template: '' })" when defining the story. `, }); - return; + return () => {}; } - showMain(); + const storyArgs = element.props || (element as any).render?.().props || storyContext.args || {}; - map.get(canvasElement)?.unmount(); + const existingApp = map.get(canvasElement); + + if (existingApp && !forceRemount) { + updateArgs(existingApp.reactiveArgs, storyArgs); + return () => { + teardown(existingApp.vueApp, canvasElement); + }; + } + + const reactiveArgs = reactive(storyArgs) as Args; + const storybookApp = createApp({ + render() { + map.set(canvasElement, { vueApp: storybookApp, reactiveArgs }); + return h(element, reactiveArgs); + }, + }); + storybookApp.config.errorHandler = (e: unknown) => showException(e as Error); + setupFunction(storybookApp); storybookApp.mount(canvasElement); + + showMain(); + return () => { + teardown(storybookApp, canvasElement); + }; } + /** * get the slots as functions to be rendered * @param props @@ -73,3 +98,25 @@ function getSlots(props: Args, context: StoryContext) { return Object.fromEntries(slots); } + +/** + * update the reactive args + * @param reactiveArgs + * @param nextArgs + * @returns + */ +function updateArgs(reactiveArgs: Args, nextArgs: Args) { + if (!nextArgs) return; + Object.keys(reactiveArgs).forEach((key) => { + delete reactiveArgs[key]; + }); + Object.assign(reactiveArgs, nextArgs); +} + +function teardown( + storybookApp: ReturnType, + canvasElement: VueRenderer['canvasElement'] +) { + storybookApp?.unmount(); + if (map.has(canvasElement)) map.delete(canvasElement); +} diff --git a/code/renderers/vue3/template/stories/ReactiveArgs.stories.js b/code/renderers/vue3/template/stories/ReactiveArgs.stories.js new file mode 100644 index 000000000000..2aa7cc555eda --- /dev/null +++ b/code/renderers/vue3/template/stories/ReactiveArgs.stories.js @@ -0,0 +1,44 @@ +import { expect } from '@storybook/jest'; +import { global as globalThis } from '@storybook/global'; +import { within, userEvent } from '@storybook/testing-library'; +import { UPDATE_STORY_ARGS, STORY_ARGS_UPDATED, RESET_STORY_ARGS } from '@storybook/core-events'; +import ReactiveArgs from './ReactiveArgs.vue'; + +export default { + component: ReactiveArgs, + argTypes: { + // To show that other props are passed through + backgroundColor: { control: 'color' }, + }, +}; + +export const ReactiveTest = { + args: { + label: 'Button', + }, + // test that args are updated correctly in rective mode + play: async ({ canvasElement, id }) => { + const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__; + const canvas = within(canvasElement); + + await channel.emit(RESET_STORY_ARGS, { storyId: id }); + await new Promise((resolve) => { + channel.once(STORY_ARGS_UPDATED, resolve); + }); + const reactiveButton = await canvas.getByRole('button'); + await expect(reactiveButton).toHaveTextContent('Button 0'); + + await userEvent.click(reactiveButton); // click to update the label to increment the count + 1 + await channel.emit(UPDATE_STORY_ARGS, { + storyId: id, + updatedArgs: { label: 'updated' }, + }); + await new Promise((resolve) => { + channel.once(STORY_ARGS_UPDATED, resolve); + }); + await expect(canvas.getByRole('button')).toHaveTextContent('updated 1'); + + await userEvent.click(reactiveButton); // click to update the label to increment the count + 1 + await expect(reactiveButton).toHaveTextContent('updated 2'); + }, +}; diff --git a/code/renderers/vue3/template/stories/ReactiveArgs.vue b/code/renderers/vue3/template/stories/ReactiveArgs.vue new file mode 100644 index 000000000000..4ad7fec8a7d3 --- /dev/null +++ b/code/renderers/vue3/template/stories/ReactiveArgs.vue @@ -0,0 +1,40 @@ + + + diff --git a/code/renderers/web-components/package.json b/code/renderers/web-components/package.json index 3a2c4cf7dc87..c0559a3ae861 100644 --- a/code/renderers/web-components/package.json +++ b/code/renderers/web-components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Storybook web-components renderer", "keywords": [ "lit-html", @@ -50,13 +50,13 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.0.0-beta.31", - "@storybook/core-client": "7.0.0-beta.31", - "@storybook/docs-tools": "7.0.0-beta.31", + "@storybook/client-logger": "7.0.0-beta.33", + "@storybook/core-client": "7.0.0-beta.33", + "@storybook/docs-tools": "7.0.0-beta.33", "@storybook/global": "^5.0.0", - "@storybook/manager-api": "7.0.0-beta.31", - "@storybook/preview-api": "7.0.0-beta.31", - "@storybook/types": "7.0.0-beta.31", + "@storybook/manager-api": "7.0.0-beta.33", + "@storybook/preview-api": "7.0.0-beta.33", + "@storybook/types": "7.0.0-beta.33", "ts-dedent": "^2.0.0" }, "devDependencies": { @@ -84,5 +84,5 @@ ], "platform": "browser" }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/renderers/web-components/template/cli/ts/Button.ts b/code/renderers/web-components/template/cli/ts/Button.ts index 3a6c0350d1bb..90fd50410ccc 100644 --- a/code/renderers/web-components/template/cli/ts/Button.ts +++ b/code/renderers/web-components/template/cli/ts/Button.ts @@ -27,7 +27,7 @@ export interface ButtonProps { /** * Primary UI component for user interaction */ -export const Button = ({ primary, backgroundColor = null, size, label, onClick }: ButtonProps) => { +export const Button = ({ primary, backgroundColor, size, label, onClick }: ButtonProps) => { const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; return html` diff --git a/code/ui/blocks/package.json b/code/ui/blocks/package.json index 6e1feaf111f2..acd1f9e63d9b 100644 --- a/code/ui/blocks/package.json +++ b/code/ui/blocks/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/blocks", - "version": "7.0.0-beta.31", + "version": "7.0.0-beta.33", "description": "Storybook Doc Blocks", "keywords": [ "storybook" @@ -43,17 +43,17 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/channels": "7.0.0-beta.31", - "@storybook/client-logger": "7.0.0-beta.31", - "@storybook/components": "7.0.0-beta.31", - "@storybook/core-events": "7.0.0-beta.31", + "@storybook/channels": "7.0.0-beta.33", + "@storybook/client-logger": "7.0.0-beta.33", + "@storybook/components": "7.0.0-beta.33", + "@storybook/core-events": "7.0.0-beta.33", "@storybook/csf": "next", - "@storybook/docs-tools": "7.0.0-beta.31", + "@storybook/docs-tools": "7.0.0-beta.33", "@storybook/global": "^5.0.0", - "@storybook/manager-api": "7.0.0-beta.31", - "@storybook/preview-api": "7.0.0-beta.31", - "@storybook/theming": "7.0.0-beta.31", - "@storybook/types": "7.0.0-beta.31", + "@storybook/manager-api": "7.0.0-beta.33", + "@storybook/preview-api": "7.0.0-beta.33", + "@storybook/theming": "7.0.0-beta.33", + "@storybook/types": "7.0.0-beta.33", "@types/lodash": "^4.14.167", "color-convert": "^2.0.1", "dequal": "^2.0.2", @@ -66,7 +66,7 @@ "util-deprecate": "^1.0.2" }, "devDependencies": { - "@storybook/addon-actions": "7.0.0-beta.31", + "@storybook/addon-actions": "7.0.0-beta.33", "@types/color-convert": "^2.0.0" }, "peerDependencies": { @@ -81,5 +81,5 @@ "./src/index.ts" ] }, - "gitHead": "6d1ea7647fce605b2029077cbd02f655cafe1807" + "gitHead": "7b662c444875d3890ee935878fb1b2b45fbfdfb7" } diff --git a/code/ui/blocks/src/blocks/Canvas.stories.tsx b/code/ui/blocks/src/blocks/Canvas.stories.tsx index 329690713f78..ccc50895e53c 100644 --- a/code/ui/blocks/src/blocks/Canvas.stories.tsx +++ b/code/ui/blocks/src/blocks/Canvas.stories.tsx @@ -1,66 +1,64 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; -import { Canvas, SourceState } from './Canvas'; -import { Story as StoryComponent } from './Story'; +import dedent from 'ts-dedent'; +import { Canvas } from './Canvas'; +import SourceStoriesMeta from './Source.stories'; import * as ButtonStories from '../examples/Button.stories'; +import * as ParameterStories from '../examples/CanvasParameters.stories'; +import * as SourceParameterStories from '../examples/SourceParameters.stories'; const meta: Meta = { component: Canvas, parameters: { - relativeCsfPaths: ['../examples/Button.stories'], - }, - render: (args) => { - return ( - - - - ); + relativeCsfPaths: [ + '../examples/Button.stories', + '../examples/CanvasParameters.stories', + '../examples/SourceParameters.stories', + ], + snippets: { + 'storybook-blocks-example-button--primary': { + code: dedent` + ', // spaces should be removed by the prettier formatter + format: 'html', + }, + }, +}; + +export const PropInlineStory: Story = { + name: 'Prop story = { ..., inline: true }', + args: { + of: ButtonStories.Primary, + story: { inline: false, height: '200px' }, + }, +}; + +export const PropAutoplayingStory: Story = { + name: 'Prop story = { ..., autoplay: true}', + args: { + of: ButtonStories.Clicking, + story: { autoplay: true }, + }, +}; + +const ClassNameStoryDescription = () => (

This story sets the className prop on the Canvas to{' '} my-custom-classname, which will propagate to the preview element. To demonstrate this, it also adds a style tag that sets another background color for that class:

); -/** - * This is a comment on classname - */ -export const ClassName: Story = { - name: 'ClassName', +export const PropClassName: Story = { + name: 'Prop className = my-custom-classname', args: { + of: ButtonStories.Primary, className: 'my-custom-classname', }, render: (args) => ( <> - + + + + + ), +}; + +export const ParameterWithToolbar: Story = { + name: 'parameters.docs.canvas.withToolbar = true', + args: { + of: ParameterStories.WithToolbar, + }, +}; + +export const ParameterAdditionalActions: Story = { + name: 'parameters.docs.canvas.additionalActions = [ ... ]', + args: { + of: ParameterStories.AdditionalActions, + }, +}; + +export const ParameterClassName: Story = { + name: 'parameters.docs.canvas.className = my-custom-classname', + args: { + of: ParameterStories.ClassName, + }, + render: (args) => ( + <> + - - - + ), }; + +export const ParametersSourceStateShown: Story = { + name: 'parameters.docs.canvas.sourceState = shown', + args: { + of: ParameterStories.SourceStateShown, + }, +}; + +export const ParametersSourceStateHidden: Story = { + name: 'parameters.docs.canvas.sourceState = hidden', + args: { + of: ParameterStories.SourceStateHidden, + }, +}; + +export const ParametersSourceStateNone: Story = { + name: 'parameters.docs.canvas.sourceState = none', + args: { + of: ParameterStories.SourceStateNone, + }, +}; + +export const ParameterDocsCanvasLayoutFullscreen: Story = { + name: 'parameters.docs.canvas.layout = fullscreen', + args: { + of: ParameterStories.DocsCanvasLayoutFullscreen, + }, +}; + +export const ParameterDocsCanvasLayoutCentered: Story = { + name: 'parameters.docs.canvas.layout = centered', + args: { + of: ParameterStories.DocsCanvasLayoutCentered, + }, +}; + +export const ParameterDocsCanvasLayoutPadded: Story = { + name: 'parameters.docs.canvas.layout = padded', + args: { + of: ParameterStories.DocsCanvasLayoutPadded, + }, +}; + +export const ParameterLayoutFullscreen: Story = { + name: 'parameters.layout = fullscreen', + args: { + of: ParameterStories.LayoutFullscreen, + }, +}; + +export const ParameterLayoutCentered: Story = { + name: 'parameters.layout = centered', + args: { + of: ParameterStories.LayoutCentered, + }, +}; + +export const ParameterLayoutPadded: Story = { + name: 'parameters.layout = padded', + args: { + of: ParameterStories.LayoutPadded, + }, +}; + +export const ParameterSource: Story = { + name: 'parameters.docs.source', + args: { + of: SourceParameterStories.CodeLanguage, + }, +}; + +export const ParameterStory: Story = { + name: 'parameters.docs.story', + args: { + of: ParameterStories.StoryParameters, + }, +}; diff --git a/code/ui/blocks/src/blocks/Canvas.tsx b/code/ui/blocks/src/blocks/Canvas.tsx index 6ccd43f49650..c6bf9c1b7f77 100644 --- a/code/ui/blocks/src/blocks/Canvas.tsx +++ b/code/ui/blocks/src/blocks/Canvas.tsx @@ -1,26 +1,105 @@ +/* eslint-disable react/destructuring-assignment */ import React, { Children, useContext } from 'react'; import type { FC, ReactElement, ReactNode } from 'react'; -import type { Renderer } from '@storybook/types'; -import type { PreviewProps as PurePreviewProps } from '../components'; +import type { ModuleExport, ModuleExports, Renderer } from '@storybook/types'; +import { deprecate } from '@storybook/client-logger'; +import dedent from 'ts-dedent'; +import type { Layout, PreviewProps as PurePreviewProps } from '../components'; import { Preview as PurePreview, PreviewSkeleton } from '../components'; import type { DocsContextProps } from './DocsContext'; import { DocsContext } from './DocsContext'; import type { SourceContextProps } from './SourceContainer'; import { SourceContext } from './SourceContainer'; -import { useSourceProps, SourceState } from './Source'; +import type { SourceProps } from './Source'; +import { useSourceProps, SourceState as DeprecatedSourceState, SourceState } from './Source'; import { useStories } from './useStory'; -import { getStoryId } from './Story'; +import type { StoryProps } from './Story'; +import { getStoryId, Story } from './Story'; +import { useOf } from './useOf'; -export { SourceState }; +export { DeprecatedSourceState as SourceState }; -type CanvasProps = Omit & { - withSource?: SourceState; +type DeprecatedCanvasProps = { + /** + * @deprecated multiple stories are not supported + */ + isColumn?: boolean; + /** + * @deprecated multiple stories are not supported + */ + columns?: number; + /** + * @deprecated use `sourceState` instead + */ + withSource?: DeprecatedSourceState; + /** + * @deprecated use `source.code` instead + */ mdxSource?: string; + /** + * @deprecated reference stories with the `of` prop instead + */ children?: ReactNode; }; -const usePreviewProps = ( - { withSource, mdxSource, children, ...props }: CanvasProps, +type CanvasProps = Pick & { + /** + * Pass the export defining a story to render that story + * + * ```jsx + * import { Meta, Canvas } from '@storybook/blocks'; + * import * as ButtonStories from './Button.stories'; + * + * + * + * ``` + */ + of?: ModuleExport; + /** + * Pass all exports of the CSF file if this MDX file is unattached + * + * ```jsx + * import { Canvas } from '@storybook/blocks'; + * import * as ButtonStories from './Button.stories'; + * + * + * ``` + */ + meta?: ModuleExports; + /** + * Specify the initial state of the source panel + * hidden: the source panel is hidden by default + * shown: the source panel is shown by default + * none: the source panel is not available and the button to show it is hidden + * @default 'hidden' + */ + sourceState?: 'hidden' | 'shown' | 'none'; + /** + * how to layout the story within the canvas + * padded: the story has padding within the canvas + * fullscreen: the story is rendered edge to edge within the canvas + * centered: the story is centered within the canvas + * @default 'padded' + */ + layout?: Layout; + /** + * @see {SourceProps} + */ + source?: Omit; + /** + * @see {StoryProps} + */ + story?: Pick; +}; + +const useDeprecatedPreviewProps = ( + { + withSource, + mdxSource, + children, + layout: layoutProp, + ...props + }: DeprecatedCanvasProps & { of?: ModuleExport; layout?: Layout }, docsContext: DocsContextProps, sourceContext: SourceContextProps ) => { @@ -36,7 +115,7 @@ const usePreviewProps = ( const stories = useStories(storyIds, docsContext); const isLoading = stories.some((s) => !s); const sourceProps = useSourceProps( - mdxSource ? { code: decodeURI(mdxSource) } : { ids: storyIds }, + mdxSource ? { code: decodeURI(mdxSource), of: props.of } : { ids: storyIds, of: props.of }, docsContext, sourceContext ); @@ -44,23 +123,116 @@ const usePreviewProps = ( return { isLoading, previewProps: props }; } + // if the user has specified a layout prop, use that... + let layout = layoutProp; + // ...otherwise, try to infer it from the children 'parameters' prop + Children.forEach(children, (child) => { + if (layout) { + return; + } + layout = (child as ReactElement)?.props?.parameters?.layout; + }); + // ...otherwise, try to infer it from the story parameters + stories.forEach((story) => { + if (layout || !story) { + return; + } + layout = story?.parameters.layout ?? story.parameters.docs?.canvas?.layout; + }); + return { isLoading, previewProps: { ...props, // pass through columns etc. + layout: layout ?? 'padded', withSource: sourceProps, isExpanded: (withSource || sourceProps.state) === SourceState.OPEN, }, }; }; -export const Canvas: FC = (props) => { +export const Canvas: FC = (props) => { const docsContext = useContext(DocsContext); const sourceContext = useContext(SourceContext); - const { isLoading, previewProps } = usePreviewProps(props, docsContext, sourceContext); - const { children } = props; + const { children, of, source } = props; + const { isLoading, previewProps } = useDeprecatedPreviewProps(props, docsContext, sourceContext); - if (isLoading) return ; + let story; + let sourceProps; + /** + * useOf and useSourceProps will throw if they can't find the story, in the scenario where + * the doc is unattached (no primary story) and 'of' is undefined. + * That scenario is valid in the deprecated API, where children is used as story refs rather than 'of'. + * So if children is passed we allow the error to be swallowed and we'll use them instead. + * We use two separate try blocks and throw the error afterwards to not break the rules of hooks. + */ + let hookError; + try { + ({ story } = useOf(of || 'story', ['story'])); + } catch (error) { + if (!children) { + hookError = error; + } + } + try { + sourceProps = useSourceProps({ ...source, of }, docsContext, sourceContext); + } catch (error) { + if (!children) { + hookError = error; + } + } + if (hookError) { + throw hookError; + } - return {children}; + if (props.withSource) { + deprecate(dedent`Setting source state with \`withSource\` is deprecated, please use \`sourceState\` with 'hidden', 'shown' or 'none' instead. + + Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#canvas-block' + `); + } + if (props.mdxSource) { + deprecate(dedent`Setting source code with \`mdxSource\` is deprecated, please use source={{code: '...'}} instead. + + Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#canvas-block' + `); + } + if (props.isColumn !== undefined || props.columns !== undefined) { + deprecate(dedent`\`isColumn\` and \`columns\` props are deprecated as the Canvas block now only supports showing a single story. + + Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#canvas-block' + `); + } + if (children) { + deprecate(dedent`Passing children to Canvas is deprecated, please use the \`of\` prop instead to reference a story. + + Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#canvas-block' + `); + return isLoading ? ( + + ) : ( + {children} + ); + } + + const layout = + props.layout ?? story.parameters.layout ?? story.parameters.docs?.canvas?.layout ?? 'padded'; + const withToolbar = props.withToolbar ?? story.parameters.docs?.canvas?.withToolbar ?? false; + const additionalActions = + props.additionalActions ?? story.parameters.docs?.canvas?.additionalActions; + const sourceState = props.sourceState ?? story.parameters.docs?.canvas?.sourceState ?? 'hidden'; + const className = props.className ?? story.parameters.docs?.canvas?.className; + + return ( + + + + ); }; diff --git a/code/ui/blocks/src/blocks/DocsStory.tsx b/code/ui/blocks/src/blocks/DocsStory.tsx index efdf5e51081b..1c9599667acc 100644 --- a/code/ui/blocks/src/blocks/DocsStory.tsx +++ b/code/ui/blocks/src/blocks/DocsStory.tsx @@ -4,38 +4,27 @@ import { Subheading } from './Subheading'; import type { DocsStoryProps } from './types'; import { Anchor } from './Anchor'; import { Description } from './Description'; -import { Story } from './Story'; import { Canvas } from './Canvas'; +import { useOf } from './useOf'; export const DocsStory: FC = ({ - id, - name, + of, expanded = true, withToolbar = false, - parameters = {}, __forceInitialArgs = false, __primary = false, }) => { - let description; - const { docs } = parameters; - if (expanded && docs) { - description = docs.description?.story; - } - - const subheading = expanded && name; + const { story } = useOf(of || 'story', ['story']); return ( - - {subheading && {subheading}} - {description && } - - - + + {expanded && ( + <> + {story.name} + + + )} + ); }; diff --git a/code/ui/blocks/src/blocks/Primary.tsx b/code/ui/blocks/src/blocks/Primary.tsx index 8095d079323e..1a4e36672453 100644 --- a/code/ui/blocks/src/blocks/Primary.tsx +++ b/code/ui/blocks/src/blocks/Primary.tsx @@ -1,16 +1,28 @@ import type { FC } from 'react'; import React, { useContext } from 'react'; +import dedent from 'ts-dedent'; +import { deprecate } from '@storybook/client-logger'; import { DocsContext } from './DocsContext'; import { DocsStory } from './DocsStory'; interface PrimaryProps { + /** + * @deprecated Primary block should only be used to render the primary story, which is automatically found. + */ name?: string; } export const Primary: FC = ({ name }) => { const docsContext = useContext(DocsContext); + if (name) { + deprecate(dedent`\`name\` prop is deprecated on the Primary block. + The Primary block should only be used to render the primary story, which is automatically found. + `); + } const storyId = name && docsContext.storyIdByName(name); const story = docsContext.storyById(storyId); - return story ? : null; + return story ? ( + + ) : null; }; diff --git a/code/ui/blocks/src/blocks/Source.tsx b/code/ui/blocks/src/blocks/Source.tsx index 564a511b7b2b..f63d497af048 100644 --- a/code/ui/blocks/src/blocks/Source.tsx +++ b/code/ui/blocks/src/blocks/Source.tsx @@ -33,7 +33,7 @@ type SourceParameters = SourceCodeProps & { originalSource?: string; }; -type SourceProps = Omit & { +export type SourceProps = Omit & { /** * Pass the export defining a story to render its source * diff --git a/code/ui/blocks/src/blocks/Stories.tsx b/code/ui/blocks/src/blocks/Stories.tsx index 76cb3a6a1e04..4accadb42eed 100644 --- a/code/ui/blocks/src/blocks/Stories.tsx +++ b/code/ui/blocks/src/blocks/Stories.tsx @@ -3,7 +3,6 @@ import React, { useContext } from 'react'; import { DocsContext } from './DocsContext'; import { DocsStory } from './DocsStory'; import { Heading } from './Heading'; -import type { DocsStoryProps } from './types'; interface StoriesProps { title?: JSX.Element | string; @@ -13,8 +12,8 @@ interface StoriesProps { export const Stories: FC = ({ title, includePrimary = true }) => { const { componentStories } = useContext(DocsContext); - let stories: DocsStoryProps[] = componentStories(); - stories = stories.filter((story) => !story.parameters?.docs?.disable); + let stories = componentStories().filter((story) => !story.parameters?.docs?.disable); + if (!includePrimary) stories = stories.slice(1); if (!stories || stories.length === 0) { @@ -24,7 +23,8 @@ export const Stories: FC = ({ title, includePrimary = true }) => { <> {title} {stories.map( - (story) => story && + (story) => + story && )} ); diff --git a/code/ui/blocks/src/blocks/Story.stories.tsx b/code/ui/blocks/src/blocks/Story.stories.tsx index 34cc6738af61..e2603bc170cd 100644 --- a/code/ui/blocks/src/blocks/Story.stories.tsx +++ b/code/ui/blocks/src/blocks/Story.stories.tsx @@ -1,21 +1,22 @@ -/// -import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import { Story as StoryBlock } from './Story'; import * as ButtonStories from '../examples/Button.stories'; import * as StoryComponentStories from '../components/Story.stories'; +import * as StoryParametersStories from '../examples/StoryParameters.stories'; const meta: Meta = { component: StoryBlock, parameters: { - relativeCsfPaths: ['../examples/Button.stories', '../blocks/Story.stories'], + relativeCsfPaths: ['../examples/Button.stories', '../examples/StoryParameters.stories'], }, }; export default meta; type Story = StoryObj; +export const DefaultAttached: Story = {}; + export const Of: Story = { args: { of: ButtonStories.Primary, @@ -29,55 +30,17 @@ export const OfWithMeta: Story = { }, }; -const blocksAwareId = `${ - import.meta.env.STORYBOOK_BLOCKS_ONLY === 'true' ? '' : 'storybook-blocks-' -}example-button--primary`; - -export const Id: Story = { - args: { - id: blocksAwareId, - }, -}; - -export const Name: Story = { +export const OfWithMetaUnattached: Story = { + parameters: { attached: false }, args: { - name: 'Secondary', - }, -}; - -export const SimpleSizeTest: Story = { - render: () => { - return ( -
-

- This story does nothing. Its only purpose is to show how its size renders in different - conditions (inline/iframe/fixed height) when used in a {''} block. -

-

- It has a fixed height of 500px and a fixed width of{' '} - 800px -

-
- ); - }, - parameters: { - // Stop *this* story from being stacked in Chromatic - theme: 'default', + of: ButtonStories.Secondary, + meta: ButtonStories.default, }, }; export const Inline: Story = { args: { - of: SimpleSizeTest, + of: StoryParametersStories.NoParameters, inline: true, }, }; @@ -85,25 +48,16 @@ export const Inline: Story = { export const InlineWithHeightProps: Story = { ...Inline, args: { - of: SimpleSizeTest, + of: StoryParametersStories.NoParameters, inline: true, height: '600px', }, }; -export const SimpleSizeTestWithHeightParameter = { - ...SimpleSizeTest, - parameters: { - docs: { story: { height: '600px' } }, - // Stop *this* story from being stacked in Chromatic - theme: 'default', - }, -}; - export const InlineWithHeightParameter: Story = { ...Inline, args: { - of: SimpleSizeTestWithHeightParameter, + of: StoryParametersStories.Height, }, }; @@ -111,65 +65,42 @@ export const IFrameProps: Story = { ...Inline, name: 'IFrame Props', args: { - of: SimpleSizeTest, + of: StoryParametersStories.NoParameters, inline: false, }, }; -export const SimpleSizeTestWithIFrameParameter = { - ...SimpleSizeTest, - parameters: { docs: { story: { inline: false } } }, -}; - -export const IframeWithParameter: Story = { +export const IFrameWithParameter: Story = { ...Inline, name: 'IFrame With Parameter', args: { - of: SimpleSizeTestWithIFrameParameter, + of: StoryParametersStories.InlineFalse, }, }; -export const IframeWithHeightProps: Story = { +export const IFrameWithHeightProps: Story = { ...Inline, name: 'IFrame With Height Props', args: { - of: SimpleSizeTest, + of: StoryParametersStories.NoParameters, inline: false, height: '300px', }, }; -export const SimpleSizeTestWithIFrameAndIFrameHeightParameter = { - ...SimpleSizeTest, - parameters: { - docs: { story: { inline: false, iframeHeight: '300px' } }, - // Stop *this* story from being stacked in Chromatic - theme: 'default', - }, -}; - -export const IFrameWithIFrameHeightParameter: Story = { +export const IFrameWithHeightParameter: Story = { ...Inline, - name: 'IFrame With IFrame Height Parameter', + name: 'IFrame With Height Parameter', args: { - of: SimpleSizeTestWithIFrameAndIFrameHeightParameter, + of: StoryParametersStories.InlineFalseWithHeight, }, }; -export const SimpleSizeTestWithIFrameAndHeightParameter = { - ...SimpleSizeTest, - parameters: { - docs: { story: { inline: false, height: '300px' } }, - // Stop *this* story from being stacked in Chromatic - theme: 'default', - }, -}; - -export const IFrameWithHeightParameter: Story = { +export const IFrameWithIFrameHeightParameter: Story = { ...Inline, - name: 'IFrame With Height Parameter', + name: 'IFrame With IFrame Height Parameter', args: { - of: SimpleSizeTestWithIFrameAndHeightParameter, + of: StoryParametersStories.InlineFalseWithIframeHeight, }, }; @@ -192,7 +123,7 @@ export const WithInteractionsAutoplayInProps: Story = { }, }; -export const WithInteractionsAutoplayInStory: Story = { +export const WithInteractionsAutoplayInParameters: Story = { args: { of: ButtonStories.ClickingInDocs, }, diff --git a/code/ui/blocks/src/blocks/Story.tsx b/code/ui/blocks/src/blocks/Story.tsx index 76c7a52f6f23..42d84ff90947 100644 --- a/code/ui/blocks/src/blocks/Story.tsx +++ b/code/ui/blocks/src/blocks/Story.tsx @@ -10,6 +10,7 @@ import type { } from '@storybook/types'; import { deprecate } from '@storybook/client-logger'; +import dedent from 'ts-dedent'; import { Story as PureStory, StorySkeleton } from '../components'; import type { DocsContextProps } from './DocsContext'; import { DocsContext } from './DocsContext'; @@ -32,6 +33,10 @@ type StoryRefProps = { * @deprecated Use of={storyExport} instead */ id?: string; + /** + * @deprecated Use of={storyExport} and define the story in the CSF file + */ + story?: StoryAnnotations; /** * Pass the export defining a story to render that story * @@ -83,22 +88,37 @@ type StoryParameters = { export type StoryProps = (StoryDefProps | StoryRefProps) & StoryParameters; export const getStoryId = (props: StoryProps, context: DocsContextProps): StoryId => { - const { id, of, meta } = props as StoryRefProps; - - if (of) { - if (meta) context.referenceMeta(meta, false); - const resolved = context.resolveOf(of, ['story']); - return resolved.story.id; + const { id, of, meta, story } = props as StoryRefProps; + if (id) { + deprecate(dedent`Referencing stories by \`id\` is deprecated, please use \`of\` instead. + + Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#story-block'`); + return id; } const { name } = props as StoryDefProps; - return id || context.storyIdByName(name); -}; + if (name) { + deprecate(dedent`Referencing stories by \`name\` is deprecated, please use \`of\` instead. + + Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#story-block'`); + return context.storyIdByName(name); + } -// Find the first option that isn't undefined -function getProp(...options: (T | undefined)[]) { - return options.find((option) => typeof option !== 'undefined'); -} + // The `story={moduleExports}` prop is a legacy prop for stories defined in CSF files, but + // "declared" in MDX files (the CSF file has no meta export or doesn't match the stories glob). + // In this case, the `.stories.mdx` file will have actually ended up declaring the story + // so we can reference the story just the same as an `of={moduleExports}` would have. + // See https://github.com/storybookjs/mdx2-csf/issues/3 + if (story) { + deprecate(dedent`The \`story\` prop is deprecated, please export your stories from CSF files and reference them with \`of={}\`. + + Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#story-block'`); + } + + if (meta) context.referenceMeta(meta, false); + const resolved = context.resolveOf(of || story || 'story', ['story']); + return resolved.story.id; +}; export const getStoryProps = ( props: StoryParameters, @@ -123,17 +143,22 @@ export const getStoryProps = ( autoplay?: boolean; }; if (typeof inlineStories !== 'undefined') - deprecate('The `docs.inlineStories` parameter is deprecated, use `docs.story.inline` instead'); - const inline = getProp(props.inline, storyParameters.inline, inlineStories) || false; - - if (typeof iframeHeight !== 'undefined') - deprecate( - 'The `docs.iframeHeight` parameter is deprecated, use `docs.story.iframeHeight` instead' - ); + deprecate(dedent`The \`docs.inlineStories\` parameter is deprecated, use \`docs.story.inline\` instead. + + Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#autodocs-changes' + `); + const inline = props.inline ?? storyParameters.inline ?? inlineStories ?? false; + + if (typeof iframeHeight !== 'undefined') { + deprecate(dedent`The \`docs.iframeHeight\` parameter is deprecated, use \`docs.story.iframeHeight\` instead. + + Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#autodocs-changes' + `); + } if (inline) { - const height = getProp(props.height, storyParameters.height); - const autoplay = getProp(props.autoplay, storyParameters.autoplay) || false; + const height = props.height ?? storyParameters.height; + const autoplay = props.autoplay ?? storyParameters.autoplay ?? false; return { story, inline: true, @@ -148,7 +173,10 @@ export const getStoryProps = ( } const height = - getProp(props.height, storyParameters.height, storyParameters.iframeHeight, iframeHeight) || + props.height ?? + storyParameters.height ?? + storyParameters.iframeHeight ?? + iframeHeight ?? '100px'; return { story, diff --git a/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx b/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx index 1f4b4ffddcd0..c34fe085bc36 100644 --- a/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx +++ b/code/ui/blocks/src/blocks/internal/InternalCanvas.stories.tsx @@ -4,16 +4,16 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import { userEvent, within } from '@storybook/testing-library'; import { expect } from '@storybook/jest'; -import { Canvas } from '../Canvas'; +import { Canvas, SourceState } from '../Canvas'; import { Story as StoryComponent } from '../Story'; import * as ButtonStories from '../../examples/Button.stories'; +import * as CanvasParameterStories from '../../examples/CanvasParameters.stories'; const meta: Meta = { - title: 'Blocks/Internal/Canvas', component: Canvas, parameters: { theme: 'light', - relativeCsfPaths: ['../examples/Button.stories'], + relativeCsfPaths: ['../examples/Button.stories', '../examples/CanvasParameters.stories'], }, render: (args) => { return ( @@ -40,10 +40,87 @@ const expectAmountOfStoriesInSource = await userEvent.click(showCodeButton); // Assert - check that the correct amount of stories' source is shown - const booleanControlNodes = await canvas.findAllByText(`label`); - await expect(booleanControlNodes).toHaveLength(amount); + const buttonNodes = await canvas.findAllByText(`label`); + await expect(buttonNodes).toHaveLength(amount); }; +export const BasicStoryChild: Story = {}; + +export const BasicStoryChildUnattached: Story = { + parameters: { attached: false }, +}; + +export const WithSourceOpen: Story = { + args: { + withSource: SourceState.OPEN, + }, +}; +export const WithSourceClosed: Story = { + args: { + withSource: SourceState.CLOSED, + }, +}; + +export const WithMdxSource: Story = { + name: 'With MDX Source', + args: { + withSource: SourceState.OPEN, + mdxSource: `