From 84b1609cdde93de236bd574cc5b65cb22eeaa898 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Nuno=20Mota?= Date: Sun, 14 May 2023 23:46:33 +0100 Subject: [PATCH 001/380] Fix typo --- code/ui/blocks/src/examples/EmptyExample.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/ui/blocks/src/examples/EmptyExample.tsx b/code/ui/blocks/src/examples/EmptyExample.tsx index b107ac26b781..fcdc9b3e2933 100644 --- a/code/ui/blocks/src/examples/EmptyExample.tsx +++ b/code/ui/blocks/src/examples/EmptyExample.tsx @@ -3,7 +3,7 @@ import React from 'react'; // eslint-disable-next-line no-empty-pattern export const EmptyExample = ({}) => (
- This component is not intended to render anything, it simply serves a something to hang + This component is not intended to render anything, it simply serves as something to hang parameters off
); From 764c819a38c604ba1cad76ab95d96ccc06ef1a5b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Nuno=20Mota?= Date: Mon, 15 May 2023 02:25:06 +0100 Subject: [PATCH 002/380] Add of prop and deprecate componentSubtitle --- MIGRATION.md | 9 +- .../ui/blocks/src/blocks/Subtitle.stories.tsx | 104 ++++++++++++++++++ code/ui/blocks/src/blocks/Subtitle.tsx | 37 ++++++- .../ui/blocks/src/examples/Button.stories.tsx | 3 + .../ButtonWithMetaSubtitleInBoth.stories.tsx | 29 +++++ ...etaSubtitleInComponentSubtitle.stories.tsx | 26 +++++ ...WithMetaSubtitleInDocsSubtitle.stories.tsx | 27 +++++ docs/api/doc-block-subtitle.md | 8 +- 8 files changed, 235 insertions(+), 8 deletions(-) create mode 100644 code/ui/blocks/src/blocks/Subtitle.stories.tsx create mode 100644 code/ui/blocks/src/examples/ButtonWithMetaSubtitleInBoth.stories.tsx create mode 100644 code/ui/blocks/src/examples/ButtonWithMetaSubtitleInComponentSubtitle.stories.tsx create mode 100644 code/ui/blocks/src/examples/ButtonWithMetaSubtitleInDocsSubtitle.stories.tsx diff --git a/MIGRATION.md b/MIGRATION.md index d3a88a146bb8..70993eda809f 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -71,6 +71,7 @@ - [Source block](#source-block) - [Canvas block](#canvas-block) - [ArgsTable block](#argstable-block) + - [Subtitle block and `parameters.componentSubtitle`](#subtitle-block-and-parameterscomponentsubtitle) - [Configuring Autodocs](#configuring-autodocs) - [MDX2 upgrade](#mdx2-upgrade) - [Legacy MDX1 support](#legacy-mdx1-support) @@ -1333,7 +1334,7 @@ Additionally to changing the docs information architecture, we've updated the AP - 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). +- Most other props controlling rendering of blocks now correspond precisely to the parameters for that block [defined for autodocs above](#autodocsautodocs-changes). ##### Meta block @@ -1449,6 +1450,12 @@ The following props are not supported in the new blocks: - `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={}`). +- +##### Subtitle block and `parameters.componentSubtitle` + +The `Subtitle` block now accepts an `of` prop, which can be a reference to a CSF file or a default export (meta). + +`parameters.componentSubtitle` has been deprecated to be consistent with other parameters related to autodocs, instead use `parameters.docs.subtitle`. #### Configuring Autodocs diff --git a/code/ui/blocks/src/blocks/Subtitle.stories.tsx b/code/ui/blocks/src/blocks/Subtitle.stories.tsx new file mode 100644 index 000000000000..f1a87cd4160e --- /dev/null +++ b/code/ui/blocks/src/blocks/Subtitle.stories.tsx @@ -0,0 +1,104 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import React from 'react'; +import { Subtitle } from './Subtitle'; +import * as DefaultButtonStories from '../examples/Button.stories'; +import * as ButtonStoriesWithMetaSubtitleInBoth from '../examples/ButtonWithMetaSubtitleInBoth.stories'; +import * as ButtonStoriesWithMetaSubtitleInComponentSubtitle from '../examples/ButtonWithMetaSubtitleInComponentSubtitle.stories'; +import * as ButtonStoriesWithMetaSubtitleInDocsSubtitle from '../examples/ButtonWithMetaSubtitleInDocsSubtitle.stories'; + +const meta: Meta = { + component: Subtitle, + parameters: { + controls: { + include: [], + hideNoControlsWarning: true, + }, + // workaround for https://github.com/storybookjs/storybook/issues/20505 + docs: { source: { type: 'code' } }, + attached: false, + docsStyles: true, + }, +}; +export default meta; + +type Story = StoryObj; + +export const OfCSFFileInBoth: Story = { + args: { + of: ButtonStoriesWithMetaSubtitleInBoth, + }, + parameters: { + relativeCsfPaths: ['../examples/ButtonWithMetaSubtitleInBoth.stories'], + }, +}; +export const OfCSFFileInComponentSubtitle: Story = { + name: 'Of CSF File In parameters.componentSubtitle', + args: { + of: ButtonStoriesWithMetaSubtitleInComponentSubtitle, + }, + parameters: { + relativeCsfPaths: ['../examples/ButtonWithMetaSubtitleInComponentSubtitle.stories'], + }, +}; +export const OfCSFFileInDocsSubtitle: Story = { + name: 'Of CSF File In parameters.docs.subtitle', + args: { + of: ButtonStoriesWithMetaSubtitleInDocsSubtitle, + }, + parameters: { + relativeCsfPaths: ['../examples/ButtonWithMetaSubtitleInDocsSubtitle.stories'], + }, +}; +export const OfMetaInBoth: Story = { + args: { + of: ButtonStoriesWithMetaSubtitleInBoth.default, + }, + parameters: { + relativeCsfPaths: ['../examples/ButtonWithMetaSubtitleInBoth.stories'], + }, +}; +export const OfMetaInComponentSubtitle: Story = { + name: 'Of Meta In parameters.componentSubtitle', + args: { + of: ButtonStoriesWithMetaSubtitleInComponentSubtitle.default, + }, + parameters: { + relativeCsfPaths: ['../examples/ButtonWithMetaSubtitleInComponentSubtitle.stories'], + }, +}; +export const OfMetaInDocsSubtitle: Story = { + name: 'Of Meta In parameters.docs.subtitle', + args: { + of: ButtonStoriesWithMetaSubtitleInDocsSubtitle.default, + }, + parameters: { + relativeCsfPaths: ['../examples/ButtonWithMetaSubtitleInDocsSubtitle.stories'], + }, +}; +export const DefaultAttached: Story = { + parameters: { relativeCsfPaths: ['../examples/Button.stories'], attached: true }, +}; +export const OfUndefinedAttached: Story = { + args: { + // @ts-expect-error this is supposed to be undefined + // eslint-disable-next-line import/namespace + of: DefaultButtonStories.NotDefined, + }, + parameters: { + chromatic: { disableSnapshot: true }, + relativeCsfPaths: ['../examples/Button.stories'], + attached: true, + }, + decorators: [(s) => (window?.navigator.userAgent.match(/StorybookTestRunner/) ?
: s())], +}; +export const OfStringMetaAttached: Story = { + name: 'Of "meta" Attached', + args: { + of: 'meta', + }, + parameters: { relativeCsfPaths: ['../examples/Button.stories'], attached: true }, +}; +export const Children: Story = { + parameters: { relativeCsfPaths: ['../examples/Button.stories'], attached: true }, + render: () => This subtitle is set inside the Subtitle element., +}; diff --git a/code/ui/blocks/src/blocks/Subtitle.tsx b/code/ui/blocks/src/blocks/Subtitle.tsx index ee4fa0517563..69aa532731df 100644 --- a/code/ui/blocks/src/blocks/Subtitle.tsx +++ b/code/ui/blocks/src/blocks/Subtitle.tsx @@ -1,16 +1,41 @@ import type { FunctionComponent, ReactNode } from 'react'; -import React, { useContext } from 'react'; +import React from 'react'; +import { deprecate } from '@storybook/client-logger'; + import { Subtitle as PureSubtitle } from '../components'; -import { DocsContext } from './DocsContext'; +import type { Of } from './useOf'; +import { useOf } from './useOf'; interface SubtitleProps { children?: ReactNode; + /** + * Specify where to get the subtitle from. + * If not specified, the subtitle will be extracted from the meta of the attached CSF file. + */ + of?: Of; } -export const Subtitle: FunctionComponent = ({ children }) => { - const docsContext = useContext(DocsContext); - const { parameters } = docsContext.storyById(); - const content = children || parameters?.componentSubtitle; +const DEPRECATION_MIGRATION_LINK = + 'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#description-block-parameters'; + +export const Subtitle: FunctionComponent = (props) => { + const { of, children } = props; + + if ('of' in props && of === undefined) { + throw new Error('Unexpected `of={undefined}`, did you mistype a CSF file reference?'); + } + + const { preparedMeta } = useOf(of || 'meta', ['meta']); + const { parameters } = preparedMeta; + const { componentSubtitle, docs } = parameters || {}; + + if (componentSubtitle) { + deprecate( + `Using 'parameters.componentSubtitle' property to subtitle stories is deprecated. See ${DEPRECATION_MIGRATION_LINK}` + ); + } + + const content = children || docs?.subtitle || componentSubtitle; return content ? ( {content} diff --git a/code/ui/blocks/src/examples/Button.stories.tsx b/code/ui/blocks/src/examples/Button.stories.tsx index 59e3fe55b308..71bd7adb5daf 100644 --- a/code/ui/blocks/src/examples/Button.stories.tsx +++ b/code/ui/blocks/src/examples/Button.stories.tsx @@ -20,6 +20,9 @@ const meta = { notes: 'These are notes for the Button stories', info: 'This is info for the Button stories', jsx: { useBooleanShorthandSyntax: false }, + docs: { + subtitle: 'This is the subtitle for the Button stories', + }, }, } satisfies Meta; diff --git a/code/ui/blocks/src/examples/ButtonWithMetaSubtitleInBoth.stories.tsx b/code/ui/blocks/src/examples/ButtonWithMetaSubtitleInBoth.stories.tsx new file mode 100644 index 000000000000..27327f062d8d --- /dev/null +++ b/code/ui/blocks/src/examples/ButtonWithMetaSubtitleInBoth.stories.tsx @@ -0,0 +1,29 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Button } from './Button'; + +const meta = { + title: 'examples/Button with Meta Subtitle in Both', + component: Button, + argTypes: { + backgroundColor: { control: 'color' }, + }, + parameters: { + // Stop *this* story from being stacked in Chromatic + theme: 'default', + // this is to test the deprecated features of the Subtitle block + componentSubtitle: 'This subtitle is set in parameters.componentSubtitle', + docs: { + subtitle: 'This subtitle is set in parameters.docs.subtitle', + }, + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const WithMetaSubtitleInBoth: Story = { + args: { + primary: true, + label: 'Button', + }, +}; diff --git a/code/ui/blocks/src/examples/ButtonWithMetaSubtitleInComponentSubtitle.stories.tsx b/code/ui/blocks/src/examples/ButtonWithMetaSubtitleInComponentSubtitle.stories.tsx new file mode 100644 index 000000000000..57a106340421 --- /dev/null +++ b/code/ui/blocks/src/examples/ButtonWithMetaSubtitleInComponentSubtitle.stories.tsx @@ -0,0 +1,26 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Button } from './Button'; + +const meta = { + title: 'examples/Button with Meta Subtitle in componentSubtitle', + component: Button, + argTypes: { + backgroundColor: { control: 'color' }, + }, + parameters: { + // Stop *this* story from being stacked in Chromatic + theme: 'default', + // this is to test the deprecated features of the Subtitle block + componentSubtitle: 'This subtitle is set in parameters.componentSubtitle', + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const WithMetaSubtitleInComponentSubtitle: Story = { + args: { + primary: true, + label: 'Button', + }, +}; diff --git a/code/ui/blocks/src/examples/ButtonWithMetaSubtitleInDocsSubtitle.stories.tsx b/code/ui/blocks/src/examples/ButtonWithMetaSubtitleInDocsSubtitle.stories.tsx new file mode 100644 index 000000000000..3df3110baf6c --- /dev/null +++ b/code/ui/blocks/src/examples/ButtonWithMetaSubtitleInDocsSubtitle.stories.tsx @@ -0,0 +1,27 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Button } from './Button'; + +const meta = { + title: 'examples/Button with Meta Subtitle in docs.subtitle', + component: Button, + argTypes: { + backgroundColor: { control: 'color' }, + }, + parameters: { + // Stop *this* story from being stacked in Chromatic + theme: 'default', + docs: { + subtitle: 'This subtitle is set in parameters.docs.subtitle', + }, + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const WithMetaSubtitleInDocsSubtitle: Story = { + args: { + primary: true, + label: 'Button', + }, +}; diff --git a/docs/api/doc-block-subtitle.md b/docs/api/doc-block-subtitle.md index f0d1d5ed5a6c..c9c0dc17461f 100644 --- a/docs/api/doc-block-subtitle.md +++ b/docs/api/doc-block-subtitle.md @@ -24,10 +24,16 @@ import { Subtitle } from '@storybook/blocks'; `Subtitle` is configured with the following props: +### `of` + +Type: CSF file exports + +Specifies which meta's subtitle is displayed. + ### `children` Type: `JSX.Element | string` -Default: `parameters.componentSubtitle` +Default: `parameters.docs.subtitle` Provides the content. From 75564f3f64e3e303f76e81f7ffadf465c8885c44 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Nuno=20Mota?= Date: Mon, 15 May 2023 02:36:04 +0100 Subject: [PATCH 003/380] Shorten declaring componentSubtitle and docs --- code/ui/blocks/src/blocks/Subtitle.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/code/ui/blocks/src/blocks/Subtitle.tsx b/code/ui/blocks/src/blocks/Subtitle.tsx index 69aa532731df..3db90bfb4e4c 100644 --- a/code/ui/blocks/src/blocks/Subtitle.tsx +++ b/code/ui/blocks/src/blocks/Subtitle.tsx @@ -26,8 +26,7 @@ export const Subtitle: FunctionComponent = (props) => { } const { preparedMeta } = useOf(of || 'meta', ['meta']); - const { parameters } = preparedMeta; - const { componentSubtitle, docs } = parameters || {}; + const { componentSubtitle, docs } = preparedMeta.parameters || {}; if (componentSubtitle) { deprecate( From bd34ef7cc8df96960a08551b99cb5ab2418914a1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Nuno=20Mota?= Date: Mon, 15 May 2023 02:39:58 +0100 Subject: [PATCH 004/380] Fix autodocs link --- MIGRATION.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/MIGRATION.md b/MIGRATION.md index 70993eda809f..a095402e4a02 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -1334,7 +1334,7 @@ Additionally to changing the docs information architecture, we've updated the AP - 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](#autodocsautodocs-changes). +- Most other props controlling rendering of blocks now correspond precisely to the parameters for that block [defined for autodocs above](#autodocs-changes). ##### Meta block From bba00d9487445ef711aca361a23be7818194a363 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Nuno=20Mota?= Date: Mon, 15 May 2023 02:46:51 +0100 Subject: [PATCH 005/380] Add missing parameter change documentation --- MIGRATION.md | 1 + 1 file changed, 1 insertion(+) diff --git a/MIGRATION.md b/MIGRATION.md index a095402e4a02..dc4ce9cf0330 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -1290,6 +1290,7 @@ We've renamed many of the parameters that control docs rendering for consistency - `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` +- `componentSubtitle` are no longer supported, instead use `docs.subtitle` #### MDX docs files From b8e2820a85f1c29530508cc58039fa41d585b6e0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Nuno=20Mota?= Date: Mon, 15 May 2023 02:53:15 +0100 Subject: [PATCH 006/380] Fix DEPRECATION_MIGRATION_LINK in Subtitle --- code/ui/blocks/src/blocks/Subtitle.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/ui/blocks/src/blocks/Subtitle.tsx b/code/ui/blocks/src/blocks/Subtitle.tsx index 3db90bfb4e4c..9b7556e9c7c6 100644 --- a/code/ui/blocks/src/blocks/Subtitle.tsx +++ b/code/ui/blocks/src/blocks/Subtitle.tsx @@ -16,7 +16,7 @@ interface SubtitleProps { } const DEPRECATION_MIGRATION_LINK = - 'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#description-block-parameters'; + 'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#subtitle-block-and-parameterscomponentsubtitle'; export const Subtitle: FunctionComponent = (props) => { const { of, children } = props; From 3a209e264c3f915f1aabdd100bbb17685a742933 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Nuno=20Mota?= Date: Mon, 15 May 2023 03:02:49 +0100 Subject: [PATCH 007/380] Fix grammar --- MIGRATION.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/MIGRATION.md b/MIGRATION.md index 993ab55a3e41..48c4eca92cab 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -1329,7 +1329,7 @@ We've renamed many of the parameters that control docs rendering for consistency - `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` -- `componentSubtitle` are no longer supported, instead use `docs.subtitle` +- `componentSubtitle` is no longer supported, instead use `docs.subtitle` #### MDX docs files From 975c32db37e052a905c71dbcf63cfee91ef4a35d Mon Sep 17 00:00:00 2001 From: Steve Dodier-Lazaro Date: Sat, 5 Aug 2023 10:21:35 +0200 Subject: [PATCH 008/380] feat: Update title to support 'of' prop Partially implements #22490 --- MIGRATION.md | 4 ++ code/ui/blocks/src/blocks/Title.stories.tsx | 56 +++++++++++++++++++++ code/ui/blocks/src/blocks/Title.tsx | 55 +++++++++++++++++++- docs/api/doc-block-title.md | 6 +++ 4 files changed, 119 insertions(+), 2 deletions(-) create mode 100644 code/ui/blocks/src/blocks/Title.stories.tsx diff --git a/MIGRATION.md b/MIGRATION.md index 6fa7d0c5d300..d05d91d36d2f 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -1429,6 +1429,10 @@ Additionally to changing the docs information architecture, we've updated the AP The primary change of the `Meta` block is the ability to attach to CSF files with `` as described above. +##### Title block + +The `Title` block now also accepts an `of` prop as described above. It still accepts being passed `children`. + ##### 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. diff --git a/code/ui/blocks/src/blocks/Title.stories.tsx b/code/ui/blocks/src/blocks/Title.stories.tsx new file mode 100644 index 000000000000..0eca0b8d2283 --- /dev/null +++ b/code/ui/blocks/src/blocks/Title.stories.tsx @@ -0,0 +1,56 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Title } from './Title'; +import * as DefaultButtonStories from '../examples/Button.stories'; + +const meta: Meta = { + component: Title, + title: 'Blocks/Title', + parameters: { + controls: { + include: [], + hideNoControlsWarning: true, + }, + // workaround for https://github.com/storybookjs/storybook/issues/20505 + docs: { source: { type: 'code' } }, + attached: false, + docsStyles: true, + }, +}; +export default meta; + +type Story = StoryObj; + +export const OfCSFFileInComponentTitle: Story = { + name: 'Of CSF File with title', + args: { + of: DefaultButtonStories, + }, + parameters: { relativeCsfPaths: ['../examples/Button.stories'] }, +}; + +export const OfMetaInComponentTitle: Story = { + name: 'Of meta with title', + args: { + of: DefaultButtonStories, + }, + parameters: { relativeCsfPaths: ['../examples/Button.stories'] }, +}; + +export const OfStringMetaAttached: Story = { + name: 'Of attached "meta"', + args: { + of: 'meta', + }, + parameters: { relativeCsfPaths: ['../examples/Button.stories'], attached: true }, +}; + +export const Children: Story = { + args: { + children: 'Custom title', + }, +}; + +export const DefaultAttached: Story = { + args: {}, + parameters: { relativeCsfPaths: ['../examples/Button.stories'], attached: true }, +}; diff --git a/code/ui/blocks/src/blocks/Title.tsx b/code/ui/blocks/src/blocks/Title.tsx index 1f52fb2cc179..a530b720a0cb 100644 --- a/code/ui/blocks/src/blocks/Title.tsx +++ b/code/ui/blocks/src/blocks/Title.tsx @@ -3,8 +3,19 @@ import type { FunctionComponent, ReactNode } from 'react'; import React, { useContext } from 'react'; import { Title as PureTitle } from '../components'; import { DocsContext } from './DocsContext'; +import type { Of } from './useOf'; +import { useOf } from './useOf'; interface TitleProps { + /** + * Specify where to get the title from. Must be a CSF file's default export. + * If not specified, the title will be read from children, or extracted from the meta of the attached CSF file. + */ + of?: Of; + + /** + * Specify content to display as the title. + */ children?: ReactNode; } @@ -15,9 +26,49 @@ export const extractTitle = (title: ComponentTitle) => { return (groups && groups[groups.length - 1]) || title; }; -export const Title: FunctionComponent = ({ children }) => { +const getTitleFromResolvedOf = (resolvedOf: ReturnType): string | null => { + switch (resolvedOf.type) { + case 'meta': { + return resolvedOf.preparedMeta.title || null; + } + case 'story': + case 'component': { + throw new Error( + `Unsupported module type. Title's \`of\` prop only supports \`meta\`, got: ${ + (resolvedOf as any).type + }` + ); + } + default: { + throw new Error( + `Unrecognized module type resolved from 'useOf', got: ${(resolvedOf as any).type}` + ); + } + } +}; + +export const Title: FunctionComponent = (props) => { + const { children, of } = props; + + if ('of' in props && of === undefined) { + throw new Error('Unexpected `of={undefined}`, did you mistype a CSF file reference?'); + } + const context = useContext(DocsContext); - const content = children || extractTitle(context.storyById().title); + + let content; + if (of) { + const resolvedOf = useOf(of || 'meta'); + content = getTitleFromResolvedOf(resolvedOf); + } + + if (!content) { + content = children; + } + + if (!content) { + content = extractTitle(context.storyById().title); + } return content ? {content} : null; }; diff --git a/docs/api/doc-block-title.md b/docs/api/doc-block-title.md index acdc1cee0f90..b9b2c3567a12 100644 --- a/docs/api/doc-block-title.md +++ b/docs/api/doc-block-title.md @@ -29,3 +29,9 @@ import { Title } from '@storybook/blocks'; Type: `JSX.Element | string` Provides the content. Falls back to value of `title` in an [attached](./doc-block-meta.md#attached-vs-unattached) CSF file (or value derived from [autotitle](../configure/sidebar-and-urls.md#csf-30-auto-titles)), trimmed to the last segment. For example, if the title value is `'path/to/components/Button'`, the default content is `'Button'`. + +### `of` + +Type: CSF file exports + +Specifies which meta's title is displayed. From 266266d8c6b8bd96dc47055571f7595445d9e150 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Nuno=20Mota?= Date: Mon, 7 Aug 2023 23:55:59 +0100 Subject: [PATCH 009/380] Update subtitle block props into alphabetical order --- docs/api/doc-block-subtitle.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/api/doc-block-subtitle.md b/docs/api/doc-block-subtitle.md index c9c0dc17461f..bd4c5b5f90cf 100644 --- a/docs/api/doc-block-subtitle.md +++ b/docs/api/doc-block-subtitle.md @@ -24,12 +24,6 @@ import { Subtitle } from '@storybook/blocks'; `Subtitle` is configured with the following props: -### `of` - -Type: CSF file exports - -Specifies which meta's subtitle is displayed. - ### `children` Type: `JSX.Element | string` @@ -37,3 +31,9 @@ Type: `JSX.Element | string` Default: `parameters.docs.subtitle` Provides the content. + +### `of` + +Type: CSF file exports + +Specifies which meta's subtitle is displayed. From ad2d18338dd1ab873bbbd402133ff1032cba9a5a Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Fri, 6 Oct 2023 15:25:58 +0200 Subject: [PATCH 010/380] fix addon-links stories --- .../template/stories/decorator.stories.ts | 18 ++++--- .../links/template/stories/hrefto.stories.ts | 23 ++++++++ .../links/template/stories/linkto.stories.ts | 53 +++++++++++++++---- .../links/template/stories/scroll.stories.ts | 41 -------------- 4 files changed, 77 insertions(+), 58 deletions(-) create mode 100644 code/addons/links/template/stories/hrefto.stories.ts delete mode 100644 code/addons/links/template/stories/scroll.stories.ts diff --git a/code/addons/links/template/stories/decorator.stories.ts b/code/addons/links/template/stories/decorator.stories.ts index 218833a75800..2149eb5dafa4 100644 --- a/code/addons/links/template/stories/decorator.stories.ts +++ b/code/addons/links/template/stories/decorator.stories.ts @@ -9,29 +9,35 @@ export default { decorators: [withLinks], }; -export const Basic = { +export const Target = { + render: () => 'This is just a story to target with the links', +}; + +export const KindAndStory = { args: { content: ` `, }, }; -export const Other = { + +export const StoryOnly = { args: { content: ` `, }, }; -export const Third = { + +export const KindOnly = { args: { content: ` `, }, diff --git a/code/addons/links/template/stories/hrefto.stories.ts b/code/addons/links/template/stories/hrefto.stories.ts new file mode 100644 index 000000000000..8bb2bd3e3a3a --- /dev/null +++ b/code/addons/links/template/stories/hrefto.stories.ts @@ -0,0 +1,23 @@ +import { hrefTo } from '@storybook/addon-links'; + +export default { + component: globalThis.Components.Html, + title: 'hrefTo', + parameters: { + chromatic: { disable: true }, + }, +}; + +export const Default = { + render: () => { + hrefTo('addons-links-hrefto', 'target').then((href) => { + const root = document.querySelector('#storybook-root'); + if (!root) { + return; + } + const node = document.createElement('code'); + node.innerHTML = href; + root.appendChild(node); + }); + }, +}; diff --git a/code/addons/links/template/stories/linkto.stories.ts b/code/addons/links/template/stories/linkto.stories.ts index bdc752c2ae17..13e549f75134 100644 --- a/code/addons/links/template/stories/linkto.stories.ts +++ b/code/addons/links/template/stories/linkto.stories.ts @@ -3,6 +3,7 @@ import { linkTo } from '@storybook/addon-links'; export default { component: globalThis.Components.Button, + title: 'linkTo', args: { label: 'Click Me!', }, @@ -11,34 +12,64 @@ export default { }, }; -export const ID = { +export const Target = { + render: () => 'This is just a story to target with the links', +}; + +export const Id = { args: { - onClick: linkTo('addons-links-parameters--basic'), + onClick: linkTo('addons-links-linkto--target'), + label: 'addons-links-linkto--target', }, }; -export const Title = { + +export const TitleOnly = { args: { - onClick: linkTo('addons-links-parameters'), + onClick: linkTo('addons/links/linkTo'), + label: 'addons/links/linkTo', }, }; -export const Basic = { + +export const NormalizedTitleOnly = { args: { - onClick: linkTo('addons-links-parameters', 'basic'), + onClick: linkTo('addons-links-linkto'), + label: 'addons-links-linkto', }, }; -export const Other = { + +export const TitleAndName = { args: { - onClick: linkTo('addons-links-parameters', 'basic'), + onClick: linkTo('addons/links/linkTo', 'Target'), + label: 'addons/links/linkTo, Target', }, }; -export const Third = { + +export const NormalizedTitleAndName = { args: { - onClick: linkTo('addons-links-parameters', 'other'), + onClick: linkTo('addons-links-linkto', 'target'), + label: 'addons-links-linkto, target', }, }; export const Callback = { args: { - onClick: linkTo('addons-links-parameters', (event: Event) => 'basic'), + onClick: linkTo( + (event: Event) => 'addons-links-linkto', + (event: Event) => 'target' + ), + }, +}; + +export const ToMDXDocs = { + args: { + onClick: linkTo('Configure Your Project'), + label: 'Configure Your Project', + }, +}; + +export const ToAutodocs = { + args: { + onClick: linkTo('Example Button', 'Docs'), + label: 'Example Button, Docs', }, }; diff --git a/code/addons/links/template/stories/scroll.stories.ts b/code/addons/links/template/stories/scroll.stories.ts deleted file mode 100644 index a7d6a3937763..000000000000 --- a/code/addons/links/template/stories/scroll.stories.ts +++ /dev/null @@ -1,41 +0,0 @@ -import { global as globalThis } from '@storybook/global'; -import { withLinks } from '@storybook/addon-links'; - -export default { - component: globalThis.Components.Html, - parameters: { - chromatic: { disable: true }, - }, - decorators: [withLinks], -}; - -export const Basic = { - args: { - content: ` -
-
- go to basic -
- `, - }, -}; -export const Other = { - args: { - content: ` -
-
- to to basic -
- `, - }, -}; -export const Third = { - args: { - content: ` -
-
- go to other -
- `, - }, -}; From 4b05aa8c4f3b0c48c7e5b8f4bd71f4d0422e8832 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Nuno=20Mota?= Date: Fri, 27 Oct 2023 16:31:20 +0100 Subject: [PATCH 011/380] Update MIGRATION.md --- MIGRATION.md | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index fc1fe488edca..f1c833115c54 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -2,6 +2,7 @@ - [From version 7.5.0 to 7.6.0](#from-version-750-to-760) - [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop) + - [Subtitle block and `parameters.componentSubtitle`](#subtitle-block-and-parameterscomponentsubtitle) - [From version 7.4.0 to 7.5.0](#from-version-740-to-750) - [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated) - [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers) @@ -83,7 +84,6 @@ - [Source block](#source-block) - [Canvas block](#canvas-block) - [ArgsTable block](#argstable-block) - - [Subtitle block and `parameters.componentSubtitle`](#subtitle-block-and-parameterscomponentsubtitle) - [Configuring Autodocs](#configuring-autodocs) - [MDX2 upgrade](#mdx2-upgrade) - [Legacy MDX1 support](#legacy-mdx1-support) @@ -314,6 +314,12 @@ The `Primary` doc block now also accepts an `of` prop as described in the [Doc Blocks](#doc-blocks) section. It still accepts being passed `name` or no props at all. +##### Subtitle block and `parameters.componentSubtitle` + +The `Subtitle` block now accepts an `of` prop, which can be a reference to a CSF file or a default export (meta). + +`parameters.componentSubtitle` has been deprecated to be consistent with other parameters related to autodocs, instead use `parameters.docs.subtitle`. + ## From version 7.4.0 to 7.5.0 #### `storyStoreV6` and `storiesOf` is deprecated @@ -1462,7 +1468,6 @@ We've renamed many of the parameters that control docs rendering for consistency - `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` -- `componentSubtitle` is no longer supported, instead use `docs.subtitle` #### MDX docs files @@ -1623,12 +1628,6 @@ The following props are not supported in the new blocks: - `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={}`). -- -##### Subtitle block and `parameters.componentSubtitle` - -The `Subtitle` block now accepts an `of` prop, which can be a reference to a CSF file or a default export (meta). - -`parameters.componentSubtitle` has been deprecated to be consistent with other parameters related to autodocs, instead use `parameters.docs.subtitle`. #### Configuring Autodocs From 2a723e0deb54deef9bdfb4112d439460427f990e Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Sat, 28 Oct 2023 00:35:05 +0200 Subject: [PATCH 012/380] use play instead of render for hrefTo stories --- .../links/template/stories/hrefto.stories.ts | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/code/addons/links/template/stories/hrefto.stories.ts b/code/addons/links/template/stories/hrefto.stories.ts index 8bb2bd3e3a3a..d58844b305bd 100644 --- a/code/addons/links/template/stories/hrefto.stories.ts +++ b/code/addons/links/template/stories/hrefto.stories.ts @@ -6,18 +6,17 @@ export default { parameters: { chromatic: { disable: true }, }, + args: { + content: '
Waiting for hrefTo to resolve...
', + }, }; export const Default = { - render: () => { - hrefTo('addons-links-hrefto', 'target').then((href) => { - const root = document.querySelector('#storybook-root'); - if (!root) { - return; - } - const node = document.createElement('code'); - node.innerHTML = href; - root.appendChild(node); - }); + play: async () => { + const href = await hrefTo('addons-links-hrefto', 'target'); + const content = document.querySelector('#content'); + if (content) { + content.textContent = href; + } }, }; From 28bf895e31b5b6db01d1708a7cf4d9e7dab75e86 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Wed, 13 Mar 2024 22:39:59 +0100 Subject: [PATCH 013/380] Don't transform MDX anchors if their hrefs starts with http:// --- code/ui/blocks/src/blocks/mdx.tsx | 76 ++++++++++++++++--------------- 1 file changed, 39 insertions(+), 37 deletions(-) diff --git a/code/ui/blocks/src/blocks/mdx.tsx b/code/ui/blocks/src/blocks/mdx.tsx index 453f5c9ff8ed..1659eef1dc79 100644 --- a/code/ui/blocks/src/blocks/mdx.tsx +++ b/code/ui/blocks/src/blocks/mdx.tsx @@ -96,45 +96,47 @@ export const AnchorMdx: FC> = (props) => { const { href, target, children, ...rest } = props; const context = useContext(DocsContext); - if (href) { - // Enable scrolling for in-page anchors. - if (href.startsWith('#')) { - return {children}; - } - - // Links to other pages of SB should use the base URL of the top level iframe instead of the base URL of the preview iframe. - if (target !== '_blank' && !href.startsWith('https://')) { - return ( - ) => { - // Cmd/Ctrl/Shift/Alt + Click should trigger default browser behaviour. Same applies to non-left clicks - const LEFT_BUTTON = 0; - const isLeftClick = - event.button === LEFT_BUTTON && - !event.altKey && - !event.ctrlKey && - !event.metaKey && - !event.shiftKey; - - if (isLeftClick) { - event.preventDefault(); - // use the A element's href, which has been modified for - // local paths without a `?path=` query param prefix - navigate(context, event.currentTarget.getAttribute('href')); - } - }} - target={target} - {...rest} - > - {children} - - ); - } + if (!href) { + return ; } - // External URL dont need any modification. - return ; + // Enable scrolling for in-page anchors. + if (href.startsWith('#')) { + return {children}; + } + + // links to external locations don't need any modifications. + if (target === '_blank' || /^https?:\/\//.test(href)) { + return ; + } + + // Links to other pages of SB should use the base URL of the top level iframe instead of the base URL of the preview iframe. + return ( + ) => { + // Cmd/Ctrl/Shift/Alt + Click should trigger default browser behaviour. Same applies to non-left clicks + const LEFT_BUTTON = 0; + const isLeftClick = + event.button === LEFT_BUTTON && + !event.altKey && + !event.ctrlKey && + !event.metaKey && + !event.shiftKey; + + if (isLeftClick) { + event.preventDefault(); + // use the A element's href, which has been modified for + // local paths without a `?path=` query param prefix + navigate(context, event.currentTarget.getAttribute('href')); + } + }} + target={target} + {...rest} + > + {children} + + ); }; const SUPPORTED_MDX_HEADERS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const; From e057e62a515894303a6a985090d2d516bc433a63 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Wed, 13 Mar 2024 22:50:42 +0100 Subject: [PATCH 014/380] collabse conditions --- code/ui/blocks/src/blocks/mdx.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/code/ui/blocks/src/blocks/mdx.tsx b/code/ui/blocks/src/blocks/mdx.tsx index 1659eef1dc79..fe9c8c24f5c9 100644 --- a/code/ui/blocks/src/blocks/mdx.tsx +++ b/code/ui/blocks/src/blocks/mdx.tsx @@ -96,7 +96,8 @@ export const AnchorMdx: FC> = (props) => { const { href, target, children, ...rest } = props; const context = useContext(DocsContext); - if (!href) { + // links to external locations don't need any modifications. + if (!href || target === '_blank' || /^https?:\/\//.test(href)) { return ; } @@ -105,11 +106,6 @@ export const AnchorMdx: FC> = (props) => { return {children}; } - // links to external locations don't need any modifications. - if (target === '_blank' || /^https?:\/\//.test(href)) { - return ; - } - // Links to other pages of SB should use the base URL of the top level iframe instead of the base URL of the preview iframe. return ( Date: Fri, 29 Mar 2024 11:58:19 +0800 Subject: [PATCH 015/380] chore: remove repetitive words Signed-off-by: JohnEndson --- MIGRATION.md | 2 +- code/addons/viewport/README.md | 2 +- code/lib/core-server/src/utils/StoryIndexGenerator.ts | 2 +- docs/writing-tests/test-runner.md | 10 +++++----- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index 345f0ff2baf7..eecaf94950a2 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -5477,7 +5477,7 @@ Currently there is no recommended way of accessing the component options of a st ## From version 4.0.x to 4.1.x -There are are a few migrations you should be aware of in 4.1, including one unintentionally breaking change for advanced addon usage. +There are a few migrations you should be aware of in 4.1, including one unintentionally breaking change for advanced addon usage. ### Private addon config diff --git a/code/addons/viewport/README.md b/code/addons/viewport/README.md index 3766d555f8b3..7975688745fd 100644 --- a/code/addons/viewport/README.md +++ b/code/addons/viewport/README.md @@ -22,7 +22,7 @@ export default { }; ``` -You should now be able to see the viewport addon icon in the the toolbar at the top of the screen. +You should now be able to see the viewport addon icon in the toolbar at the top of the screen. ## Usage diff --git a/code/lib/core-server/src/utils/StoryIndexGenerator.ts b/code/lib/core-server/src/utils/StoryIndexGenerator.ts index a650f04c1ffa..6dea83092d16 100644 --- a/code/lib/core-server/src/utils/StoryIndexGenerator.ts +++ b/code/lib/core-server/src/utils/StoryIndexGenerator.ts @@ -506,7 +506,7 @@ export class StoryIndexGenerator { // Otherwise the existing entry is created by `autodocs=true` which allowed to be overridden. } else { // If both entries are templates (e.g. you have two CSF files with the same title), then - // we need to merge the entries. We'll use the the first one's name and importPath, + // we need to merge the entries. We'll use the first one's name and importPath, // but ensure we include both as storiesImports so they are both loaded before rendering // the story (for the block & friends) return { diff --git a/docs/writing-tests/test-runner.md b/docs/writing-tests/test-runner.md index 40b50980517e..6a39b2362ad3 100644 --- a/docs/writing-tests/test-runner.md +++ b/docs/writing-tests/test-runner.md @@ -202,12 +202,12 @@ The test-runner renders a story and executes its [play function](../writing-stor The test-runner exports test hooks that can be overridden globally to enable use cases like visual or DOM snapshots. These hooks give you access to the test lifecycle _before_ and _after_ the story is rendered. Listed below are the available hooks and an overview of how to use them. -| Hook | Description | -| ----------- | --------------------------------------------------------------------------------------------------------------- | -| `prepare` | Prepares the browser for tests
`async prepare({ page, browserContext, testRunnerConfig }) {}` | -| `setup` | Executes once before all the tests run
`setup() {}` | +| Hook | Description | +| ----------- | ------------------------------------------------------------------------------------------------------------ | +| `prepare` | Prepares the browser for tests
`async prepare({ page, browserContext, testRunnerConfig }) {}` | +| `setup` | Executes once before all the tests run
`setup() {}` | | `preVisit` | Executes before a story is initially visited and rendered in the browser
`async preVisit(page, context) {}` | -| `postVisit` | Executes after the story is is visited and fully rendered
`async postVisit(page, context) {}` | +| `postVisit` | Executes after the story is visited and fully rendered
`async postVisit(page, context) {}` | From 3ff3e13bffba90d197407c00658ed4eddf3b8806 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Fri, 29 Mar 2024 10:38:36 +0100 Subject: [PATCH 016/380] Implement module mocking in storybook --- code/builders/builder-vite/src/vite-config.ts | 1 + .../src/preview/base-webpack.config.ts | 8 ++++++ .../modules/preview-web/render/StoryRender.ts | 4 ++- .../stories/module-mocking.stories.ts | 27 +++++++++++++++++++ code/lib/test/template/stories/utils.mock.ts | 4 +++ code/lib/test/template/stories/utils.ts | 1 + scripts/tasks/sandbox-parts.ts | 19 +++++++++++++ scripts/tasks/sandbox.ts | 4 ++- 8 files changed, 66 insertions(+), 2 deletions(-) create mode 100644 code/lib/test/template/stories/module-mocking.stories.ts create mode 100644 code/lib/test/template/stories/utils.mock.ts create mode 100644 code/lib/test/template/stories/utils.ts diff --git a/code/builders/builder-vite/src/vite-config.ts b/code/builders/builder-vite/src/vite-config.ts index 4a1c2fb3ee44..95d68543a22e 100644 --- a/code/builders/builder-vite/src/vite-config.ts +++ b/code/builders/builder-vite/src/vite-config.ts @@ -65,6 +65,7 @@ export async function commonConfig( base: './', plugins: await pluginConfig(options), resolve: { + conditions: ['storybook', 'stories', 'test'], preserveSymlinks: isPreservingSymlinks(), alias: { assert: require.resolve('browser-assert'), diff --git a/code/builders/builder-webpack5/src/preview/base-webpack.config.ts b/code/builders/builder-webpack5/src/preview/base-webpack.config.ts index 8a2d60743661..38961e89085d 100644 --- a/code/builders/builder-webpack5/src/preview/base-webpack.config.ts +++ b/code/builders/builder-webpack5/src/preview/base-webpack.config.ts @@ -85,6 +85,14 @@ export async function createDefaultWebpackConfig( }, resolve: { ...storybookBaseConfig.resolve, + // see https://github.com/webpack/webpack/issues/17692#issuecomment-1866272674 for the docs + conditionNames: [ + ...(storybookBaseConfig.resolve?.conditionNames ?? []), + 'storybook', + 'stories', + 'test', + '...', + ], fallback: { crypto: false, assert: false, diff --git a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.ts b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.ts index ff3449b7a437..72b554d38cd2 100644 --- a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.ts +++ b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.ts @@ -172,7 +172,9 @@ export class StoryRender implements Render); + // TODO add this to CSF + canvasElement, + } as unknown as StoryContextForLoaders); }); if (abortSignal.aborted) { return; diff --git a/code/lib/test/template/stories/module-mocking.stories.ts b/code/lib/test/template/stories/module-mocking.stories.ts new file mode 100644 index 000000000000..d81e86715e02 --- /dev/null +++ b/code/lib/test/template/stories/module-mocking.stories.ts @@ -0,0 +1,27 @@ +import { global as globalThis } from '@storybook/global'; +// @ts-expect-error This alias is set in the sandbox +// eslint-disable-next-line import/no-unresolved +import { foo } from '#utils'; +import { expect, fn, isMockFunction, mocked } from '@storybook/test'; + +export default { + component: globalThis.Components.Button, + args: { + onClick: fn(), + label: 'Mock story', + }, + parameters: { + chromatic: { + disable: true, + }, + }, + loaders: () => { + mocked(foo).mockReturnValue('mocked'); + }, + async play() { + await expect(isMockFunction(foo)).toBe(true); + await expect(foo()).toBe('mocked'); + }, +}; + +export const Basic = {}; diff --git a/code/lib/test/template/stories/utils.mock.ts b/code/lib/test/template/stories/utils.mock.ts new file mode 100644 index 000000000000..15c648e88c00 --- /dev/null +++ b/code/lib/test/template/stories/utils.mock.ts @@ -0,0 +1,4 @@ +import { fn } from '@storybook/test'; +import * as utils from './utils'; + +export const foo = fn(utils.foo); diff --git a/code/lib/test/template/stories/utils.ts b/code/lib/test/template/stories/utils.ts new file mode 100644 index 000000000000..5a80b1903c1f --- /dev/null +++ b/code/lib/test/template/stories/utils.ts @@ -0,0 +1 @@ +export const foo = () => 'not mocked'; diff --git a/scripts/tasks/sandbox-parts.ts b/scripts/tasks/sandbox-parts.ts index cd7dc643a185..ed52cd272ede 100644 --- a/scripts/tasks/sandbox-parts.ts +++ b/scripts/tasks/sandbox-parts.ts @@ -467,6 +467,12 @@ export const addStories: Task['run'] = async ( cwd, disableDocs, }); + + await linkPackageStories(await workspacePath('core package', '@storybook/test'), { + mainConfig, + cwd, + disableDocs, + }); } const mainAddons = (mainConfig.getSafeFieldValue(['addons']) || []).reduce( @@ -554,6 +560,19 @@ export const extendMain: Task['run'] = async ({ template, sandboxDir }, { disabl await writeConfig(mainConfig); }; +export async function setImportMap(cwd: string) { + const packageJson = await readJson(join(cwd, 'package.json')); + + packageJson.imports = { + '#utils': { + storybook: './template-stories/lib/test/utils.mock.ts', + default: './template-stories/lib/test/utils.ts', + }, + }; + + await writeJson(join(cwd, 'package.json'), packageJson, { spaces: 2 }); +} + /** * Sets compodoc option in angular.json projects to false. We have to generate compodoc * manually to avoid symlink issues related to the template-stories folder. diff --git a/scripts/tasks/sandbox.ts b/scripts/tasks/sandbox.ts index ee57d64a0c38..1d3a1e1af74f 100644 --- a/scripts/tasks/sandbox.ts +++ b/scripts/tasks/sandbox.ts @@ -37,7 +37,7 @@ export const sandbox: Task = { await remove(details.sandboxDir); } - const { create, install, addStories, extendMain, init, addExtraDependencies } = + const { create, install, addStories, extendMain, init, addExtraDependencies, setImportMap } = // @ts-expect-error esbuild for some reason exports a default object // eslint-disable-next-line import/extensions (await import('./sandbox-parts.ts')).default; @@ -84,6 +84,8 @@ export const sandbox: Task = { await extendMain(details, options); + await setImportMap(details.sandboxDir); + logger.info(`โœ… Storybook sandbox created at ${details.sandboxDir}`); }, }; From 3d146f526ba9b86630746da2f2cd8a012da46e89 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Fri, 29 Mar 2024 12:33:10 +0100 Subject: [PATCH 017/380] Fix check --- .../src/js-package-manager/Yarn2Proxy.test.ts | 1 - .../src/js-package-manager/Yarn2Proxy.ts | 49 ++----------------- .../src/__test__/portable-stories.test.tsx | 7 ++- 3 files changed, 9 insertions(+), 48 deletions(-) diff --git a/code/lib/core-common/src/js-package-manager/Yarn2Proxy.test.ts b/code/lib/core-common/src/js-package-manager/Yarn2Proxy.test.ts index f024d19c1133..985d0dbecf83 100644 --- a/code/lib/core-common/src/js-package-manager/Yarn2Proxy.test.ts +++ b/code/lib/core-common/src/js-package-manager/Yarn2Proxy.test.ts @@ -1,5 +1,4 @@ import { describe, beforeEach, it, expect, vi } from 'vitest'; -import dedent from 'ts-dedent'; import { Yarn2Proxy } from './Yarn2Proxy'; describe('Yarn 2 Proxy', () => { diff --git a/code/lib/core-common/src/js-package-manager/Yarn2Proxy.ts b/code/lib/core-common/src/js-package-manager/Yarn2Proxy.ts index 7014357cc44b..71b7a5391a7b 100644 --- a/code/lib/core-common/src/js-package-manager/Yarn2Proxy.ts +++ b/code/lib/core-common/src/js-package-manager/Yarn2Proxy.ts @@ -36,49 +36,6 @@ const CRITICAL_YARN2_ERROR_CODES = { YN0083: 'AUTOMERGE_GIT_ERROR', }; -const YARN2_ERROR_CODES = { - ...CRITICAL_YARN2_ERROR_CODES, - YN0000: 'UNNAMED', - YN0002: 'MISSING_PEER_DEPENDENCY', - YN0003: 'CYCLIC_DEPENDENCIES', - YN0004: 'DISABLED_BUILD_SCRIPTS', - YN0005: 'BUILD_DISABLED', - YN0006: 'SOFT_LINK_BUILD', - YN0007: 'MUST_BUILD', - YN0008: 'MUST_REBUILD', - YN0013: 'FETCH_NOT_CACHED', - YN0017: 'RESOLUTION_PACK', - YN0018: 'CACHE_CHECKSUM_MISMATCH', - YN0019: 'UNUSED_CACHE_ENTRY', - YN0022: 'TOO_MANY_MATCHING_WORKSPACES', - YN0023: 'CONSTRAINTS_MISSING_DEPENDENCY', - YN0024: 'CONSTRAINTS_INCOMPATIBLE_DEPENDENCY', - YN0025: 'CONSTRAINTS_EXTRANEOUS_DEPENDENCY', - YN0026: 'CONSTRAINTS_INVALID_DEPENDENCY', - YN0027: 'CANT_SUGGEST_RESOLUTIONS', - YN0029: 'CROSS_DRIVE_VIRTUAL_LOCAL', - YN0031: 'DANGEROUS_NODE_MODULES', - YN0032: 'NODE_GYP_INJECTED', - YN0047: 'AUTOMERGE_IMMUTABLE', - YN0048: 'AUTOMERGE_SUCCESS', - YN0049: 'AUTOMERGE_REQUIRED', - YN0050: 'DEPRECATED_CLI_SETTINGS', - YN0059: 'INVALID_RANGE_PEER_DEPENDENCY', - YN0060: 'INCOMPATIBLE_PEER_DEPENDENCY', - YN0061: 'DEPRECATED_PACKAGE', - YN0068: 'UNUSED_PACKAGE_EXTENSION', - YN0069: 'REDUNDANT_PACKAGE_EXTENSION', - YN0074: 'NM_HARDLINKS_MODE_DOWNGRADED', - YN0077: 'GHOST_ARCHITECTURE', - YN0080: 'NETWORK_DISABLED', - YN0085: 'UPDATED_RESOLUTION_RECORD', - YN0086: 'EXPLAIN_PEER_DEPENDENCIES_CTA', - YN0087: 'MIGRATION_SUCCESS', - YN0088: 'VERSION_NOTICE', - YN0089: 'TIPS_NOTICE', - YN0090: 'OFFLINE_MODE_ENABLED', -}; - // This encompasses both yarn 2 and yarn 3 export class Yarn2Proxy extends JsPackageManager { readonly type = 'yarn2'; @@ -306,10 +263,12 @@ export class Yarn2Proxy extends JsPackageManager { while ((match = regex.exec(logs)) !== null) { const code = match[1]; const message = match[2].replace(/[โ”Œโ”‚โ””]/g, '').trim(); - if (CRITICAL_YARN2_ERROR_CODES[code]) { + if (code in CRITICAL_YARN2_ERROR_CODES) { errorCodesWithMessages.push({ code, - message: `${CRITICAL_YARN2_ERROR_CODES[code]}\n-> ${message}\n`, + message: `${ + CRITICAL_YARN2_ERROR_CODES[code as keyof typeof CRITICAL_YARN2_ERROR_CODES] + }\n-> ${message}\n`, }); } } diff --git a/code/renderers/react/src/__test__/portable-stories.test.tsx b/code/renderers/react/src/__test__/portable-stories.test.tsx index f80a1bbd2cc6..41cc6ac38e60 100644 --- a/code/renderers/react/src/__test__/portable-stories.test.tsx +++ b/code/renderers/react/src/__test__/portable-stories.test.tsx @@ -3,7 +3,6 @@ import React from 'react'; import { vi, it, expect, afterEach, describe } from 'vitest'; import { render, screen, cleanup } from '@testing-library/react'; import { addons } from '@storybook/preview-api'; -//@ts-expect-error our tsconfig.jsn#moduleResolution is set to 'node', which doesn't support this import import * as addonInteractionsPreview from '@storybook/addon-interactions/preview'; @@ -92,7 +91,11 @@ describe('projectAnnotations', () => { }); it('has spies when addon-interactions annotations are added', async () => { - const Story = composeStory(stories.WithActionArg, stories.default, addonInteractionsPreview); + const Story = composeStory( + stories.WithActionArg, + stories.default, + addonInteractionsPreview as any + ); expect(vi.mocked(Story.args.someActionArg!).mock).toBeDefined(); const { container } = render(); From 0dbda33933b33af430d91cc0a8d0d5fbdcb880be Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Mon, 1 Apr 2024 23:57:41 +0200 Subject: [PATCH 018/380] Add SaveFromControls action bar --- .../ArgsTable/SaveFromControls.stories.tsx | 22 ++++ .../components/ArgsTable/SaveFromControls.tsx | 113 ++++++++++++++++++ 2 files changed, 135 insertions(+) create mode 100644 code/ui/blocks/src/components/ArgsTable/SaveFromControls.stories.tsx create mode 100644 code/ui/blocks/src/components/ArgsTable/SaveFromControls.tsx diff --git a/code/ui/blocks/src/components/ArgsTable/SaveFromControls.stories.tsx b/code/ui/blocks/src/components/ArgsTable/SaveFromControls.stories.tsx new file mode 100644 index 000000000000..bb8fdf558f70 --- /dev/null +++ b/code/ui/blocks/src/components/ArgsTable/SaveFromControls.stories.tsx @@ -0,0 +1,22 @@ +import { action } from '@storybook/addon-actions'; +import type { Meta, StoryObj } from '@storybook/react'; + +import { SaveFromControls } from './SaveFromControls'; + +const meta = { + component: SaveFromControls, + title: 'Components/ArgsTable/SaveFromControls', + args: { + saveStory: action('saveStory'), + createStory: action('createStory'), + resetArgs: action('resetArgs'), + }, + parameters: { + layout: 'fullscreen', + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = {}; diff --git a/code/ui/blocks/src/components/ArgsTable/SaveFromControls.tsx b/code/ui/blocks/src/components/ArgsTable/SaveFromControls.tsx new file mode 100644 index 000000000000..3a1aefc5f434 --- /dev/null +++ b/code/ui/blocks/src/components/ArgsTable/SaveFromControls.tsx @@ -0,0 +1,113 @@ +import { Bar as BaseBar, IconButton, TooltipNote, WithTooltip } from '@storybook/components'; +import { AddIcon, BookmarkHollowIcon, InfoIcon, UndoIcon } from '@storybook/icons'; +import { styled } from '@storybook/theming'; +import React from 'react'; + +const Bar = styled(BaseBar)(({ theme }) => ({ + display: 'flex', + flexWrap: 'wrap', + alignItems: 'center', + justifyContent: 'space-between', + gap: 6, + padding: '6px 10px', + fontSize: theme.typography.size.s2, + containerType: 'size', + background: theme.background.bar, + borderTop: `1px solid ${theme.color.border}`, + overflow: 'visible', +})); + +const Content = styled.div({ + display: 'flex', + alignItems: 'center', + marginLeft: 10, + gap: 6, + + 'span:last-of-type': { + display: 'none', + }, + '@container (min-width: 800px)': { + 'span:first-of-type': { + display: 'none', + }, + 'span:last-of-type': { + display: 'inline', + }, + }, +}); + +const Actions = styled.div(({ theme }) => ({ + display: 'flex', + alignItems: 'center', + gap: 2, + color: theme.color.mediumdark, + fontSize: theme.typography.size.s2, +})); + +const ActionButton = styled(IconButton)({ + span: { + display: 'none', + '@container (min-width: 800px)': { + display: 'inline', + }, + }, +}); + +type SaveFromControlsProps = { + saveStory: () => void; + createStory: () => void; + resetArgs: () => void; +}; + +export const SaveFromControls = ({ saveStory, createStory, resetArgs }: SaveFromControlsProps) => { + return ( + + + + Unsaved changes + You modified this story. Do you want to save your changes? + + + + } + > + saveStory()}> + + Save + + + + } + > + createStory()} + > + + Create new story + + + + } + > + resetArgs()}> + + Reset + + + + + ); +}; From 8cbd0127e00b6ad559d2f3e28147a121c768cd00 Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Tue, 2 Apr 2024 08:45:56 +0200 Subject: [PATCH 019/380] Add SaveFromControls bar to Controls panel --- .../ArgsTable/ArgsTable.stories.tsx | 48 +++++++++++-------- .../src/components/ArgsTable/ArgsTable.tsx | 16 +++++-- .../components/ArgsTable/SaveFromControls.tsx | 2 + 3 files changed, 42 insertions(+), 24 deletions(-) diff --git a/code/ui/blocks/src/components/ArgsTable/ArgsTable.stories.tsx b/code/ui/blocks/src/components/ArgsTable/ArgsTable.stories.tsx index 39ed63dc6299..159b65b5df03 100644 --- a/code/ui/blocks/src/components/ArgsTable/ArgsTable.stories.tsx +++ b/code/ui/blocks/src/components/ArgsTable/ArgsTable.stories.tsx @@ -52,27 +52,6 @@ export const Compact = { args: { ...Normal.args, compact: true }, }; -const AddonPanelLayout = styled.div(({ theme }) => ({ - fontSize: theme.typography.size.s2 - 1, - background: theme.background.content, -})); - -export const InAddonPanel = { - args: { ...Normal.args, inAddonPanel: true }, - decorators: [(storyFn: any) => {storyFn()}], -}; - -export const InAddonPanelNoControls = { - render: (args: any) => , - args: { - rows: { - stringType: { ...stringType, control: false }, - numberType: { ...numberType, control: false }, - }, - }, - decorators: InAddonPanel.decorators, -}; - export const Sections = { args: { rows: { @@ -137,6 +116,33 @@ export const AllControls = { }, }; +const AddonPanelLayout = styled.div(({ theme }) => ({ + fontSize: theme.typography.size.s2 - 1, + background: theme.background.content, +})); + +export const InAddonPanel = { + args: { + ...Normal.args, + inAddonPanel: true, + rows: SectionsAndSubsections.args.rows, + }, + decorators: [(storyFn: any) => {storyFn()}], + parameters: { + layout: 'fullscreen', + }, +}; + +export const InAddonPanelNoControls = { + ...InAddonPanel, + args: { + ...InAddonPanel.args, + rows: Object.fromEntries( + Object.entries(InAddonPanel.args.rows).map(([k, v]) => [k, { ...v, control: null }]) + ), + }, +}; + export const Error = { args: { error: ArgsTableError.NO_COMPONENT, diff --git a/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx b/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx index 8ad18ff4257c..71ace3f8a966 100644 --- a/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx +++ b/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx @@ -15,6 +15,12 @@ import type { ArgType, ArgTypes, Args, Globals } from './types'; import { EmptyBlock } from '..'; import { Skeleton } from './Skeleton'; import { Empty } from './Empty'; +import { SaveFromControls } from './SaveFromControls'; + +const ContentWrapper = styled(ResetWrapper)({ + maxHeight: '100vh', + overflow: 'auto', +}); export const TableWrapper = styled.table<{ compact?: boolean; @@ -356,7 +362,7 @@ export const ArgsTable: FC = (props) => { const common = { updateArgs, compact, inAddonPanel, initialExpandedArgs }; return ( - + @@ -377,7 +383,7 @@ export const ArgsTable: FC = (props) => { Control{' '} - {!isLoading && resetArgs && ( + {!isLoading && !inAddonPanel && resetArgs && ( resetArgs()} title="Reset controls"> @@ -433,6 +439,10 @@ export const ArgsTable: FC = (props) => { ))} - + + {inAddonPanel && ( + {}} createStory={() => {}} resetArgs={resetArgs} /> + )} + ); }; diff --git a/code/ui/blocks/src/components/ArgsTable/SaveFromControls.tsx b/code/ui/blocks/src/components/ArgsTable/SaveFromControls.tsx index 3a1aefc5f434..f8ce7e1ed88f 100644 --- a/code/ui/blocks/src/components/ArgsTable/SaveFromControls.tsx +++ b/code/ui/blocks/src/components/ArgsTable/SaveFromControls.tsx @@ -4,6 +4,8 @@ import { styled } from '@storybook/theming'; import React from 'react'; const Bar = styled(BaseBar)(({ theme }) => ({ + position: 'sticky', + bottom: 0, display: 'flex', flexWrap: 'wrap', alignItems: 'center', From 48c14e838009c479aa51143d5bd9b5b708b5a113 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 2 Apr 2024 10:09:26 +0200 Subject: [PATCH 020/380] add events --- code/lib/core-events/src/index.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/code/lib/core-events/src/index.ts b/code/lib/core-events/src/index.ts index 7542d0aa4e57..d23644f124d8 100644 --- a/code/lib/core-events/src/index.ts +++ b/code/lib/core-events/src/index.ts @@ -73,6 +73,9 @@ enum events { SET_WHATS_NEW_CACHE = 'setWhatsNewCache', TOGGLE_WHATS_NEW_NOTIFICATIONS = 'toggleWhatsNewNotifications', TELEMETRY_ERROR = 'telemetryError', + + SAVE_STORY_REQUEST = 'saveStoryRequest', + SAVE_STORY_RESULT = 'saveStoryResult', } // Enables: `import Events from ...` From 2a15187f26c8ad786bf149ff1ed632c5a8393ac2 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 2 Apr 2024 10:25:40 +0200 Subject: [PATCH 021/380] move code for whatsnew to new file to not over-complicate the common preset. add scaffolding for save-from-controls --- code/lib/core-events/src/index.ts | 2 + .../core-server/src/presets/common-preset.ts | 114 ++--------------- .../src/utils/save-from-controls.ts | 28 +++++ code/lib/core-server/src/utils/whats-new.ts | 119 ++++++++++++++++++ 4 files changed, 156 insertions(+), 107 deletions(-) create mode 100644 code/lib/core-server/src/utils/save-from-controls.ts create mode 100644 code/lib/core-server/src/utils/whats-new.ts diff --git a/code/lib/core-events/src/index.ts b/code/lib/core-events/src/index.ts index d23644f124d8..094f26f8b7b6 100644 --- a/code/lib/core-events/src/index.ts +++ b/code/lib/core-events/src/index.ts @@ -130,6 +130,8 @@ export const { SET_WHATS_NEW_CACHE, TOGGLE_WHATS_NEW_NOTIFICATIONS, TELEMETRY_ERROR, + SAVE_STORY_REQUEST, + SAVE_STORY_RESULT, } = events; export interface WhatsNewCache { diff --git a/code/lib/core-server/src/presets/common-preset.ts b/code/lib/core-server/src/presets/common-preset.ts index 6dcd6366eff0..0153eb7b529f 100644 --- a/code/lib/core-server/src/presets/common-preset.ts +++ b/code/lib/core-server/src/presets/common-preset.ts @@ -1,8 +1,7 @@ -import fs, { pathExists, readFile } from 'fs-extra'; +import { pathExists, readFile } from 'fs-extra'; import { logger } from '@storybook/node-logger'; import { telemetry } from '@storybook/telemetry'; import { - findConfigFile, getDirectoryFromWorkingDir, getPreviewBodyTemplate, getPreviewHeadTemplate, @@ -17,23 +16,15 @@ import type { PresetPropertyFn, PresetProperty, } from '@storybook/types'; -import { printConfig, readConfig, readCsf } from '@storybook/csf-tools'; +import { readCsf } from '@storybook/csf-tools'; import { join, dirname, isAbsolute } from 'path'; import { dedent } from 'ts-dedent'; -import fetch from 'node-fetch'; import type { Channel } from '@storybook/channels'; -import type { WhatsNewCache, WhatsNewData } from '@storybook/core-events'; -import { - REQUEST_WHATS_NEW_DATA, - RESULT_WHATS_NEW_DATA, - TELEMETRY_ERROR, - SET_WHATS_NEW_CACHE, - TOGGLE_WHATS_NEW_NOTIFICATIONS, -} from '@storybook/core-events'; -import invariant from 'tiny-invariant'; import { parseStaticDir } from '../utils/server-statics'; import { defaultStaticDirs } from '../utils/constants'; -import { sendTelemetryError } from '../withTelemetry'; +import type { OptionsWithRequiredCache } from '../utils/whats-new'; +import { initializeWhatsNew } from '../utils/whats-new'; +import { initializeSaveFromControls } from '../utils/save-from-controls'; const interpolate = (string: string, data: Record = {}) => Object.entries(data).reduce((acc, [k, v]) => acc.replace(new RegExp(`%${k}%`, 'g'), v), string); @@ -239,20 +230,6 @@ export const managerHead = async (_: any, options: Options) => { return ''; }; -const WHATS_NEW_CACHE = 'whats-new-cache'; -const WHATS_NEW_URL = 'https://storybook.js.org/whats-new/v1'; - -// Grabbed from the implementation: https://github.com/storybookjs/dx-functions/blob/main/netlify/functions/whats-new.ts -type WhatsNewResponse = { - title: string; - url: string; - blogUrl?: string; - publishedAt: string; - excerpt: string; -}; - -type OptionsWithRequiredCache = Exclude & Required>; - // eslint-disable-next-line @typescript-eslint/naming-convention export const experimental_serverChannel = async ( channel: Channel, @@ -260,85 +237,8 @@ export const experimental_serverChannel = async ( ) => { const coreOptions = await options.presets.apply('core'); - channel.on(SET_WHATS_NEW_CACHE, async (data: WhatsNewCache) => { - const cache: WhatsNewCache = await options.cache.get(WHATS_NEW_CACHE).catch((e) => { - logger.verbose(e); - return {}; - }); - await options.cache.set(WHATS_NEW_CACHE, { ...cache, ...data }); - }); - - channel.on(REQUEST_WHATS_NEW_DATA, async () => { - try { - const post = (await fetch(WHATS_NEW_URL).then(async (response) => { - if (response.ok) return response.json(); - // eslint-disable-next-line @typescript-eslint/no-throw-literal - throw response; - })) as WhatsNewResponse; - - const configFileName = findConfigFile('main', options.configDir); - if (!configFileName) - throw new Error(`unable to find storybook main file in ${options.configDir}`); - const main = await readConfig(configFileName); - const disableWhatsNewNotifications = main.getFieldValue([ - 'core', - 'disableWhatsNewNotifications', - ]); - - const cache: WhatsNewCache = (await options.cache.get(WHATS_NEW_CACHE)) ?? {}; - const data = { - ...post, - status: 'SUCCESS', - postIsRead: post.url === cache.lastReadPost, - showNotification: post.url !== cache.lastDismissedPost && post.url !== cache.lastReadPost, - disableWhatsNewNotifications, - } satisfies WhatsNewData; - channel.emit(RESULT_WHATS_NEW_DATA, { data }); - } catch (e) { - logger.verbose(e instanceof Error ? e.message : String(e)); - channel.emit(RESULT_WHATS_NEW_DATA, { - data: { status: 'ERROR' } satisfies WhatsNewData, - }); - } - }); - - channel.on( - TOGGLE_WHATS_NEW_NOTIFICATIONS, - async ({ disableWhatsNewNotifications }: { disableWhatsNewNotifications: boolean }) => { - const isTelemetryEnabled = coreOptions.disableTelemetry !== true; - try { - const mainPath = findConfigFile('main', options.configDir); - invariant(mainPath, `unable to find storybook main file in ${options.configDir}`); - const main = await readConfig(mainPath); - main.setFieldValue(['core', 'disableWhatsNewNotifications'], disableWhatsNewNotifications); - await fs.writeFile(mainPath, printConfig(main).code); - if (isTelemetryEnabled) { - await telemetry('core-config', { disableWhatsNewNotifications }); - } - } catch (error) { - invariant(error instanceof Error); - if (isTelemetryEnabled) { - await sendTelemetryError(error, 'core-config', { - cliOptions: options, - presetOptions: { ...options, corePresets: [], overridePresets: [] }, - skipPrompt: true, - }); - } - } - } - ); - - channel.on(TELEMETRY_ERROR, async (error) => { - const isTelemetryEnabled = coreOptions.disableTelemetry !== true; - - if (isTelemetryEnabled) { - await sendTelemetryError(error, 'browser', { - cliOptions: options, - presetOptions: { ...options, corePresets: [], overridePresets: [] }, - skipPrompt: true, - }); - } - }); + initializeWhatsNew(channel, options, coreOptions); + initializeSaveFromControls(channel, options, coreOptions); return channel; }; diff --git a/code/lib/core-server/src/utils/save-from-controls.ts b/code/lib/core-server/src/utils/save-from-controls.ts new file mode 100644 index 000000000000..b6434013be4d --- /dev/null +++ b/code/lib/core-server/src/utils/save-from-controls.ts @@ -0,0 +1,28 @@ +import type { CoreConfig } from '@storybook/types'; +import type { Channel } from '@storybook/channels'; +import { SAVE_STORY_REQUEST, SAVE_STORY_RESULT } from '@storybook/core-events'; +import type { OptionsWithRequiredCache } from './whats-new'; +// import { sendTelemetryError } from '../withTelemetry'; + +interface RequestSaveStoryPayload { + // The id of the request. It might be simply the story Title + id: string; + // The path of the Story + importPath: string; + // The updated list of set args + args: Record; + // The exported name of the Story -> This information doesn't exist in the index.json yet. + name: string; +} + +export function initializeSaveFromControls( + channel: Channel, + options: OptionsWithRequiredCache, + coreOptions: CoreConfig +) { + channel.on(SAVE_STORY_REQUEST, async (data: RequestSaveStoryPayload) => { + // TODO: Implement the save story logic + + channel.emit(SAVE_STORY_RESULT, { id: data.id, success: true }); + }); +} diff --git a/code/lib/core-server/src/utils/whats-new.ts b/code/lib/core-server/src/utils/whats-new.ts new file mode 100644 index 000000000000..3392c93d201f --- /dev/null +++ b/code/lib/core-server/src/utils/whats-new.ts @@ -0,0 +1,119 @@ +import fs from 'fs-extra'; +import { logger } from '@storybook/node-logger'; +import { telemetry } from '@storybook/telemetry'; +import { findConfigFile } from '@storybook/core-common'; +import type { CoreConfig, Options } from '@storybook/types'; +import { printConfig, readConfig } from '@storybook/csf-tools'; +import fetch from 'node-fetch'; +import type { Channel } from '@storybook/channels'; +import type { WhatsNewCache, WhatsNewData } from '@storybook/core-events'; +import { + REQUEST_WHATS_NEW_DATA, + RESULT_WHATS_NEW_DATA, + TELEMETRY_ERROR, + SET_WHATS_NEW_CACHE, + TOGGLE_WHATS_NEW_NOTIFICATIONS, +} from '@storybook/core-events'; +import invariant from 'tiny-invariant'; +import { sendTelemetryError } from '../withTelemetry'; + +export type OptionsWithRequiredCache = Exclude & Required>; + +// Grabbed from the implementation: https://github.com/storybookjs/dx-functions/blob/main/netlify/functions/whats-new.ts +export type WhatsNewResponse = { + title: string; + url: string; + blogUrl?: string; + publishedAt: string; + excerpt: string; +}; + +const WHATS_NEW_CACHE = 'whats-new-cache'; +const WHATS_NEW_URL = 'https://storybook.js.org/whats-new/v1'; + +export function initializeWhatsNew( + channel: Channel, + options: OptionsWithRequiredCache, + coreOptions: CoreConfig +) { + channel.on(SET_WHATS_NEW_CACHE, async (data: WhatsNewCache) => { + const cache: WhatsNewCache = await options.cache.get(WHATS_NEW_CACHE).catch((e) => { + logger.verbose(e); + return {}; + }); + await options.cache.set(WHATS_NEW_CACHE, { ...cache, ...data }); + }); + + channel.on(REQUEST_WHATS_NEW_DATA, async () => { + try { + const post = (await fetch(WHATS_NEW_URL).then(async (response) => { + if (response.ok) return response.json(); + // eslint-disable-next-line @typescript-eslint/no-throw-literal + throw response; + })) as WhatsNewResponse; + + const configFileName = findConfigFile('main', options.configDir); + if (!configFileName) { + throw new Error(`unable to find storybook main file in ${options.configDir}`); + } + const main = await readConfig(configFileName); + const disableWhatsNewNotifications = main.getFieldValue([ + 'core', + 'disableWhatsNewNotifications', + ]); + + const cache: WhatsNewCache = (await options.cache.get(WHATS_NEW_CACHE)) ?? {}; + const data = { + ...post, + status: 'SUCCESS', + postIsRead: post.url === cache.lastReadPost, + showNotification: post.url !== cache.lastDismissedPost && post.url !== cache.lastReadPost, + disableWhatsNewNotifications, + } satisfies WhatsNewData; + channel.emit(RESULT_WHATS_NEW_DATA, { data }); + } catch (e) { + logger.verbose(e instanceof Error ? e.message : String(e)); + channel.emit(RESULT_WHATS_NEW_DATA, { + data: { status: 'ERROR' } satisfies WhatsNewData, + }); + } + }); + + channel.on( + TOGGLE_WHATS_NEW_NOTIFICATIONS, + async ({ disableWhatsNewNotifications }: { disableWhatsNewNotifications: boolean }) => { + const isTelemetryEnabled = coreOptions.disableTelemetry !== true; + try { + const mainPath = findConfigFile('main', options.configDir); + invariant(mainPath, `unable to find storybook main file in ${options.configDir}`); + const main = await readConfig(mainPath); + main.setFieldValue(['core', 'disableWhatsNewNotifications'], disableWhatsNewNotifications); + await fs.writeFile(mainPath, printConfig(main).code); + if (isTelemetryEnabled) { + await telemetry('core-config', { disableWhatsNewNotifications }); + } + } catch (error) { + invariant(error instanceof Error); + if (isTelemetryEnabled) { + await sendTelemetryError(error, 'core-config', { + cliOptions: options, + presetOptions: { ...options, corePresets: [], overridePresets: [] }, + skipPrompt: true, + }); + } + } + } + ); + + channel.on(TELEMETRY_ERROR, async (error) => { + const isTelemetryEnabled = coreOptions.disableTelemetry !== true; + + if (isTelemetryEnabled) { + await sendTelemetryError(error, 'browser', { + cliOptions: options, + presetOptions: { ...options, corePresets: [], overridePresets: [] }, + skipPrompt: true, + }); + } + }); +} From d5b573a254b68fc757c66e6f256ef643822b05f4 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 2 Apr 2024 11:19:58 +0200 Subject: [PATCH 022/380] more scaffolding --- .../src/utils/save-from-controls.ts | 29 +++++++++++++++++-- 1 file changed, 27 insertions(+), 2 deletions(-) diff --git a/code/lib/core-server/src/utils/save-from-controls.ts b/code/lib/core-server/src/utils/save-from-controls.ts index b6434013be4d..9b14ed0295dd 100644 --- a/code/lib/core-server/src/utils/save-from-controls.ts +++ b/code/lib/core-server/src/utils/save-from-controls.ts @@ -2,6 +2,7 @@ import type { CoreConfig } from '@storybook/types'; import type { Channel } from '@storybook/channels'; import { SAVE_STORY_REQUEST, SAVE_STORY_RESULT } from '@storybook/core-events'; import type { OptionsWithRequiredCache } from './whats-new'; +import { readCsf, writeCsf } from '@storybook/csf-tools'; // import { sendTelemetryError } from '../withTelemetry'; interface RequestSaveStoryPayload { @@ -21,8 +22,32 @@ export function initializeSaveFromControls( coreOptions: CoreConfig ) { channel.on(SAVE_STORY_REQUEST, async (data: RequestSaveStoryPayload) => { - // TODO: Implement the save story logic + try { + // open the story file + const csf = await readCsf(data.importPath, { makeTitle: () => data.name }); + const parsed = csf.parse(); - channel.emit(SAVE_STORY_RESULT, { id: data.id, success: true }); + // find the AST node for the story + const found = !!parsed.stories.find((s) => s.id === data.id); + let node = csf.getStoryExport(data.id); + + // if none can be found, create one + if (!found) { + // @ts-expect-error (TODO) + node = undefined; + throw new Error(`creation of new story: not yet implemented`); + } + + // modify the AST node with the new args + // node + + // save the file + await writeCsf(csf); + + channel.emit(SAVE_STORY_RESULT, { id: data.id, success: true }); + } catch (e) { + // sendTelemetryError(channel, e); + channel.emit(SAVE_STORY_RESULT, { id: data.id, success: false }); + } }); } From 06d3ab8764d932a995725d1b89a308571dd607f9 Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Tue, 2 Apr 2024 12:24:59 +0200 Subject: [PATCH 023/380] Fix bar height --- code/ui/blocks/src/components/ArgsTable/SaveFromControls.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/code/ui/blocks/src/components/ArgsTable/SaveFromControls.tsx b/code/ui/blocks/src/components/ArgsTable/SaveFromControls.tsx index f8ce7e1ed88f..3a3e71f8bca6 100644 --- a/code/ui/blocks/src/components/ArgsTable/SaveFromControls.tsx +++ b/code/ui/blocks/src/components/ArgsTable/SaveFromControls.tsx @@ -7,16 +7,15 @@ const Bar = styled(BaseBar)(({ theme }) => ({ position: 'sticky', bottom: 0, display: 'flex', - flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between', + height: 39, gap: 6, padding: '6px 10px', fontSize: theme.typography.size.s2, containerType: 'size', background: theme.background.bar, - borderTop: `1px solid ${theme.color.border}`, - overflow: 'visible', + borderTop: `1px solid ${theme.appBorderColor}`, })); const Content = styled.div({ From ebd07b44eff19e25f295b83e9309798fa46f5b8a Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Tue, 2 Apr 2024 12:28:07 +0200 Subject: [PATCH 024/380] Implement new story form --- .../ArgsTable/SaveFromControls.stories.tsx | 28 +++- .../components/ArgsTable/SaveFromControls.tsx | 157 +++++++++++++----- 2 files changed, 142 insertions(+), 43 deletions(-) diff --git a/code/ui/blocks/src/components/ArgsTable/SaveFromControls.stories.tsx b/code/ui/blocks/src/components/ArgsTable/SaveFromControls.stories.tsx index bb8fdf558f70..37acbec5ff70 100644 --- a/code/ui/blocks/src/components/ArgsTable/SaveFromControls.stories.tsx +++ b/code/ui/blocks/src/components/ArgsTable/SaveFromControls.stories.tsx @@ -2,14 +2,15 @@ import { action } from '@storybook/addon-actions'; import type { Meta, StoryObj } from '@storybook/react'; import { SaveFromControls } from './SaveFromControls'; +import { expect, fn, userEvent, within } from '@storybook/test'; const meta = { component: SaveFromControls, title: 'Components/ArgsTable/SaveFromControls', args: { - saveStory: action('saveStory'), - createStory: action('createStory'), - resetArgs: action('resetArgs'), + saveStory: fn(action('saveStory')), + createStory: fn(action('createStory')), + resetArgs: fn(action('resetArgs')), }, parameters: { layout: 'fullscreen', @@ -20,3 +21,24 @@ export default meta; type Story = StoryObj; export const Default: Story = {}; + +export const Creating: Story = { + play: async ({ canvasElement }) => { + const createButton = await within(canvasElement).findByRole('button', { name: /create/i }); + await userEvent.click(createButton); + }, +}; + +export const Created: Story = { + play: async (context) => { + await Creating.play(context); + const { canvasElement, args } = context; + + const input = await within(canvasElement).findByRole('textbox'); + await userEvent.type(input, 'MyNewStory'); + const submitButton = await within(canvasElement).findByRole('button', { name: /save/i }); + await userEvent.click(submitButton); + + await expect(args.createStory).toHaveBeenCalledWith('MyNewStory'); + }, +}; diff --git a/code/ui/blocks/src/components/ArgsTable/SaveFromControls.tsx b/code/ui/blocks/src/components/ArgsTable/SaveFromControls.tsx index 3a3e71f8bca6..ca5e932a9a21 100644 --- a/code/ui/blocks/src/components/ArgsTable/SaveFromControls.tsx +++ b/code/ui/blocks/src/components/ArgsTable/SaveFromControls.tsx @@ -1,5 +1,5 @@ -import { Bar as BaseBar, IconButton, TooltipNote, WithTooltip } from '@storybook/components'; -import { AddIcon, BookmarkHollowIcon, InfoIcon, UndoIcon } from '@storybook/icons'; +import { Bar as BaseBar, IconButton, TooltipNote, WithTooltip, Form } from '@storybook/components'; +import { AddIcon, CheckIcon, UndoIcon } from '@storybook/icons'; import { styled } from '@storybook/theming'; import React from 'react'; @@ -37,6 +37,26 @@ const Content = styled.div({ }, }); +const InlineForm = styled(Form)({ + display: 'flex', + alignItems: 'center', + gap: 2, + width: 'auto', +}); + +const InlineInput = styled(Form.Input)(({ theme }) => ({ + height: 28, + minHeight: 28, + marginRight: 4, + + '::placeholder': { + color: theme.color.mediumdark, + }, + '&:invalid:not(:placeholder-shown)': { + boxShadow: `${theme.color.negative} 0 0 0 1px inset`, + }, +})); + const Actions = styled.div(({ theme }) => ({ display: 'flex', alignItems: 'center', @@ -56,59 +76,116 @@ const ActionButton = styled(IconButton)({ type SaveFromControlsProps = { saveStory: () => void; - createStory: () => void; + createStory: (storyName: string) => void; resetArgs: () => void; }; export const SaveFromControls = ({ saveStory, createStory, resetArgs }: SaveFromControlsProps) => { + const inputRef = React.useRef(null); + const [saving, setSaving] = React.useState(false); + const [creating, setCreating] = React.useState(false); + const [storyName, setStoryName] = React.useState(''); + + const onSaveStory = () => { + setSaving(true); + saveStory(); + setTimeout(() => setSaving(false), 1000); + }; + + const onShowForm = () => { + setCreating(true); + setStoryName(''); + setTimeout(() => inputRef.current?.focus(), 0); + }; + const onChange = (e: React.ChangeEvent) => { + const value = e.target.value + .replace(/[^a-z-_ ]/gi, '') + .replaceAll(/([-_ ]+[a-z])/gi, (match) => match.toUpperCase().replace(/[-_ ]/g, '')); + setStoryName(value.charAt(0).toUpperCase() + value.slice(1)); + }; + const onSubmitForm = (e: React.FormEvent) => { + e.preventDefault(); + if (saving) return; + setSaving(true); + createStory(storyName.replaceAll(/[^a-z]/gi, '')); + setTimeout(() => { + setSaving(false); + setCreating(false); + }, 1000); + }; + const onCancelForm = () => { + setCreating(false); + }; + return ( - Unsaved changes You modified this story. Do you want to save your changes? - - } - > - saveStory()}> - - Save - - - - } - > + {creating ? ( + + createStory()} + aria-label="Save story to file system" + disabled={saving || !storyName} + type="submit" > - - Create new story + Save - - - } - > - resetArgs()}> - - Reset + + Cancel - - + + ) : ( + + } + > + + + Update story + + + + } + > + + + Create new story + + + + } + > + resetArgs()}> + + Reset + + + + )} ); }; From fd7fd6b5f48eeb87af2b62245111a33756cc6cca Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Tue, 2 Apr 2024 14:40:51 +0200 Subject: [PATCH 025/380] Fix bar position when there's extra vertical space --- .../src/components/ArgsTable/ArgsTable.tsx | 24 ++++++++++++------- 1 file changed, 16 insertions(+), 8 deletions(-) diff --git a/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx b/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx index 71ace3f8a966..8febbe3aa20a 100644 --- a/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx +++ b/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx @@ -17,9 +17,12 @@ import { Skeleton } from './Skeleton'; import { Empty } from './Empty'; import { SaveFromControls } from './SaveFromControls'; -const ContentWrapper = styled(ResetWrapper)({ +const AddonWrapper = styled.div({ + display: 'grid', + gridTemplateRows: '1fr 39px', + height: '100%', maxHeight: '100vh', - overflow: 'auto', + overflowY: 'auto', }); export const TableWrapper = styled.table<{ @@ -361,8 +364,8 @@ export const ArgsTable: FC = (props) => { const common = { updateArgs, compact, inAddonPanel, initialExpandedArgs }; - return ( - + const table = ( + @@ -439,10 +442,15 @@ export const ArgsTable: FC = (props) => { ))} + + ); - {inAddonPanel && ( - {}} createStory={() => {}} resetArgs={resetArgs} /> - )} - + if (!inAddonPanel) return table; + + return ( + + {table} + {}} createStory={() => {}} resetArgs={resetArgs} /> + ); }; From 4b8f2dda4845a07b27afe6957f5d50b03b3f6a99 Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Tue, 2 Apr 2024 16:05:04 +0200 Subject: [PATCH 026/380] Add slideIn animation and improve short label display --- .../src/components/ArgsTable/ArgsTable.tsx | 3 + .../components/ArgsTable/SaveFromControls.tsx | 69 +++++++++---------- 2 files changed, 35 insertions(+), 37 deletions(-) diff --git a/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx b/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx index 8febbe3aa20a..4377a28bf503 100644 --- a/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx +++ b/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx @@ -447,6 +447,9 @@ export const ArgsTable: FC = (props) => { if (!inAddonPanel) return table; + const hasControls = Object.values(rows).some((row) => row?.control); + if (!hasControls) return table; + return ( {table} diff --git a/code/ui/blocks/src/components/ArgsTable/SaveFromControls.tsx b/code/ui/blocks/src/components/ArgsTable/SaveFromControls.tsx index ca5e932a9a21..fb2e009f7357 100644 --- a/code/ui/blocks/src/components/ArgsTable/SaveFromControls.tsx +++ b/code/ui/blocks/src/components/ArgsTable/SaveFromControls.tsx @@ -1,8 +1,13 @@ import { Bar as BaseBar, IconButton, TooltipNote, WithTooltip, Form } from '@storybook/components'; import { AddIcon, CheckIcon, UndoIcon } from '@storybook/icons'; -import { styled } from '@storybook/theming'; +import { keyframes, styled } from '@storybook/theming'; import React from 'react'; +const slideIn = keyframes({ + from: { transform: 'translateY(40px)' }, + to: { transform: 'translateY(0)' }, +}); + const Bar = styled(BaseBar)(({ theme }) => ({ position: 'sticky', bottom: 0, @@ -16,6 +21,7 @@ const Bar = styled(BaseBar)(({ theme }) => ({ containerType: 'size', background: theme.background.bar, borderTop: `1px solid ${theme.appBorderColor}`, + animation: `${slideIn} 300ms forwards`, })); const Content = styled.div({ @@ -23,16 +29,17 @@ const Content = styled.div({ alignItems: 'center', marginLeft: 10, gap: 6, +}); - 'span:last-of-type': { - display: 'none', - }, - '@container (min-width: 800px)': { - 'span:first-of-type': { - display: 'none', - }, - 'span:last-of-type': { - display: 'inline', +const Label = styled.div({ + '@container (max-width: 799px)': { + lineHeight: 0, + textIndent: '-9999px', + '&::after': { + content: 'attr(data-short-label)', + display: 'block', + lineHeight: 'initial', + textIndent: '0', }, }, }); @@ -65,15 +72,6 @@ const Actions = styled.div(({ theme }) => ({ fontSize: theme.typography.size.s2, })); -const ActionButton = styled(IconButton)({ - span: { - display: 'none', - '@container (min-width: 800px)': { - display: 'inline', - }, - }, -}); - type SaveFromControlsProps = { saveStory: () => void; createStory: (storyName: string) => void; @@ -120,8 +118,9 @@ export const SaveFromControls = ({ saveStory, createStory, resetArgs }: SaveFrom return ( - Unsaved changes - You modified this story. Do you want to save your changes? + {creating ? ( @@ -132,16 +131,16 @@ export const SaveFromControls = ({ saveStory, createStory, resetArgs }: SaveFrom ref={inputRef} value={storyName} /> - Save - - + + Cancel - + ) : ( @@ -151,14 +150,10 @@ export const SaveFromControls = ({ saveStory, createStory, resetArgs }: SaveFrom trigger="hover" tooltip={} > - + - Update story - + + } > - + - Create new story - + + } > - resetArgs()}> + resetArgs()}> Reset - + )} From ba76685265416856d320632e2c016df4136dfacc Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Tue, 2 Apr 2024 16:21:30 +0200 Subject: [PATCH 027/380] Avoid scrollbar while animating --- .../components/ArgsTable/SaveFromControls.tsx | 148 ++++++++++-------- 1 file changed, 79 insertions(+), 69 deletions(-) diff --git a/code/ui/blocks/src/components/ArgsTable/SaveFromControls.tsx b/code/ui/blocks/src/components/ArgsTable/SaveFromControls.tsx index fb2e009f7357..3e7abf5b4ab7 100644 --- a/code/ui/blocks/src/components/ArgsTable/SaveFromControls.tsx +++ b/code/ui/blocks/src/components/ArgsTable/SaveFromControls.tsx @@ -8,20 +8,24 @@ const slideIn = keyframes({ to: { transform: 'translateY(0)' }, }); -const Bar = styled(BaseBar)(({ theme }) => ({ +const Container = styled.div({ + containerType: 'size', position: 'sticky', bottom: 0, + height: 39, + overflow: 'hidden', +}); + +const Bar = styled(BaseBar)(({ theme }) => ({ display: 'flex', alignItems: 'center', justifyContent: 'space-between', - height: 39, gap: 6, padding: '6px 10px', - fontSize: theme.typography.size.s2, - containerType: 'size', + animation: `${slideIn} 300ms forwards`, background: theme.background.bar, borderTop: `1px solid ${theme.appBorderColor}`, - animation: `${slideIn} 300ms forwards`, + fontSize: theme.typography.size.s2, })); const Content = styled.div({ @@ -116,71 +120,77 @@ export const SaveFromControls = ({ saveStory, createStory, resetArgs }: SaveFrom }; return ( - - - - - - {creating ? ( - - - - Save - - - Cancel - - - ) : ( - - } - > - - - - - - - } - > - - - + + + + + + + {creating ? ( + + + + Save - - - } - > - resetArgs()}> - - Reset + + Cancel - - - )} - + + ) : ( + + } + > + + + + + + + } + > + + + + + + + } + > + resetArgs()}> + + Reset + + + + )} + + ); }; From 08c3f247615c41d0b547cbf8d64d1db36d8ff392 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Thu, 4 Apr 2024 12:44:12 +0200 Subject: [PATCH 028/380] reload window when tearing down during 'loading' phase --- .../preview-web/render/StoryRender.test.ts | 183 +++++++++++++++--- .../modules/preview-web/render/StoryRender.ts | 5 +- 2 files changed, 155 insertions(+), 33 deletions(-) diff --git a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts index df4b37b840ae..e4942c11aab8 100644 --- a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts @@ -15,43 +15,17 @@ const entry = { importPath: './component.stories.ts', } as StoryIndexEntry; -const createGate = (): [Promise, (_?: any) => void] => { - let openGate = (_?: any) => {}; - const gate = new Promise((resolve) => { +const createGate = (): [Promise, () => void] => { + let openGate = () => {}; + const gate = new Promise((resolve) => { openGate = resolve; }); return [gate, openGate]; }; -describe('StoryRender', () => { - it('throws PREPARE_ABORTED if torndown during prepare', async () => { - const [importGate, openImportGate] = createGate(); - const mockStore = { - loadStory: vi.fn(async () => { - await importGate; - return {}; - }), - cleanupStory: vi.fn(), - }; - - const render = new StoryRender( - new Channel({}), - mockStore as unknown as StoryStore, - vi.fn(), - {} as any, - entry.id, - 'story' - ); - - const preparePromise = render.prepare(); - - render.teardown(); - - openImportGate(); - - await expect(preparePromise).rejects.toThrowError(PREPARE_ABORTED); - }); +window.location = { reload: vi.fn() } as any; +describe('StoryRender', () => { it('does run play function if passed autoplay=true', async () => { const story = { id: 'id', @@ -105,4 +79,151 @@ describe('StoryRender', () => { await render.renderToElement({} as any); expect(story.playFunction).not.toHaveBeenCalled(); }); + + describe('teardown', () => { + const teardownAndWaitForReload = (render: StoryRender) => { + // 1. immediately teardown the story + render.teardown(); + + return new Promise((resolve) => { + setInterval(() => { + try { + // 2. assert that the window is reloaded and move on + expect(window.location.reload).toHaveBeenCalledOnce(); + resolve(); + } catch { + // empty catch to ignore the assertion failing + } + }, 0); + }); + }; + + it('throws PREPARE_ABORTED if torndown during prepare', async () => { + const [importGate, openImportGate] = createGate(); + const mockStore = { + loadStory: vi.fn(async () => { + await importGate; + return {}; + }), + cleanupStory: vi.fn(), + }; + + const render = new StoryRender( + new Channel({}), + mockStore as unknown as StoryStore, + vi.fn(), + {} as any, + entry.id, + 'story' + ); + + const preparePromise = render.prepare(); + + render.teardown(); + + openImportGate(); + + await expect(preparePromise).rejects.toThrowError(PREPARE_ABORTED); + }); + + it('reloads the page when tearing down during loading', async () => { + const story = { + id: 'id', + title: 'title', + name: 'name', + tags: [], + applyLoaders: vi.fn(), + unboundStoryFn: vi.fn(), + playFunction: vi.fn(), + prepareContext: vi.fn(), + }; + const store = { getStoryContext: () => ({}), cleanupStory: vi.fn() }; + + const render = new StoryRender( + new Channel({}), + store as any, + vi.fn() as any, + {} as any, + entry.id, + 'story', + { autoplay: true }, + story as any + ); + + story.applyLoaders.mockImplementation(() => teardownAndWaitForReload(render)); + + await render.renderToElement({} as any); + + expect(story.applyLoaders).toHaveBeenCalledOnce(); + expect(store.cleanupStory).toHaveBeenCalledOnce(); + expect(window.location.reload).toHaveBeenCalledOnce(); + }); + + it('reloads the page when tearing down during rendering', async () => { + const story = { + id: 'id', + title: 'title', + name: 'name', + tags: [], + applyLoaders: vi.fn(), + unboundStoryFn: vi.fn(), + playFunction: vi.fn(), + prepareContext: vi.fn(), + }; + const store = { getStoryContext: () => ({}), cleanupStory: vi.fn() }; + const renderToScreen = vi.fn(); + + const render = new StoryRender( + new Channel({}), + store as any, + renderToScreen as any, + {} as any, + entry.id, + 'story', + { autoplay: true }, + story as any + ); + + renderToScreen.mockImplementation(() => teardownAndWaitForReload(render)); + + await render.renderToElement({} as any); + + expect(renderToScreen).toHaveBeenCalledOnce(); + expect(store.cleanupStory).toHaveBeenCalledOnce(); + expect(window.location.reload).toHaveBeenCalledOnce(); + }); + + it('reloads the page when tearing down during playing', async () => { + const story = { + id: 'id', + title: 'title', + name: 'name', + tags: [], + applyLoaders: vi.fn(), + unboundStoryFn: vi.fn(), + playFunction: vi.fn(), + prepareContext: vi.fn(), + }; + const store = { getStoryContext: () => ({}), cleanupStory: vi.fn() }; + + const render = new StoryRender( + new Channel({}), + store as any, + vi.fn() as any, + {} as any, + entry.id, + 'story', + { autoplay: true }, + story as any + ); + + story.playFunction.mockImplementation(() => teardownAndWaitForReload(render)); + + await render.renderToElement({} as any); + + expect(story.playFunction).toHaveBeenCalledOnce(); + expect(store.cleanupStory).toHaveBeenCalledOnce(); + expect(window.location.reload).toHaveBeenCalledOnce(); + }); + }); }); diff --git a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.ts b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.ts index 72b554d38cd2..f17759baf8f0 100644 --- a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.ts +++ b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.ts @@ -120,7 +120,8 @@ export class StoryRender implements Render implements Render Date: Mon, 12 Feb 2024 16:14:02 +1100 Subject: [PATCH 029/380] Don't need to semi `UPDATE_STORY_ARGS` outside of actually updating args --- .../modules/preview-web/PreviewWeb.test.ts | 41 ++++++++----------- .../preview-web/PreviewWithSelection.tsx | 7 ---- 2 files changed, 17 insertions(+), 31 deletions(-) diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts index e20af13752a6..024e4f6bbda8 100644 --- a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts @@ -208,15 +208,19 @@ describe('PreviewWeb', () => { one: 1, }); }); - it('updates args from the URL', async () => { + + it('prepares story with args from the URL', async () => { document.location.search = '?id=component-one--a&args=foo:url'; await createAndRenderPreview(); - expect(mockChannel.emit).toHaveBeenCalledWith(STORY_ARGS_UPDATED, { - storyId: 'component-one--a', - args: { foo: 'url', one: 1 }, - }); + expect(mockChannel.emit).toHaveBeenCalledWith( + STORY_PREPARED, + expect.objectContaining({ + id: 'component-one--a', + args: { foo: 'url', one: 1 }, + }) + ); }); it('allows async getProjectAnnotations', async () => { @@ -2798,20 +2802,6 @@ describe('PreviewWeb', () => { }); }); - it('emits STORY_ARGS_UPDATED with new args', async () => { - document.location.search = '?id=component-one--a'; - const preview = await createAndRenderPreview(); - mockChannel.emit.mockClear(); - - preview.onStoriesChanged({ importFn: newImportFn }); - await waitForRender(); - - expect(mockChannel.emit).toHaveBeenCalledWith(STORY_ARGS_UPDATED, { - storyId: 'component-one--a', - args: { foo: 'edited', one: 1 }, - }); - }); - it('applies loaders with story context', async () => { document.location.search = '?id=component-one--a'; const preview = await createAndRenderPreview(); @@ -3402,7 +3392,7 @@ describe('PreviewWeb', () => { }); }); - it('emits SET_STORY_ARGS with new values', async () => { + it('emits SET_PREPARED with new args', async () => { document.location.search = '?id=component-one--a'; const preview = await createAndRenderPreview(); @@ -3410,10 +3400,13 @@ describe('PreviewWeb', () => { preview.onGetProjectAnnotationsChanged({ getProjectAnnotations: newGetProjectAnnotations }); await waitForRender(); - expect(mockChannel.emit).toHaveBeenCalledWith(STORY_ARGS_UPDATED, { - storyId: 'component-one--a', - args: { foo: 'a', one: 1, global: 'added' }, - }); + expect(mockChannel.emit).toHaveBeenCalledWith( + STORY_PREPARED, + expect.objectContaining({ + id: 'component-one--a', + args: { foo: 'a', one: 1, global: 'added' }, + }) + ); }); it('calls renderToCanvas teardown', async () => { diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx b/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx index 1095ebe14620..c60382e2ace3 100644 --- a/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx +++ b/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx @@ -404,13 +404,6 @@ export class PreviewWithSelection extends Preview Date: Thu, 4 Apr 2024 21:55:33 +1100 Subject: [PATCH 030/380] Drop unused import --- .../preview-api/src/modules/preview-web/PreviewWithSelection.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx b/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx index c60382e2ace3..b183a7488ba9 100644 --- a/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx +++ b/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx @@ -5,7 +5,6 @@ import { PRELOAD_ENTRIES, PREVIEW_KEYDOWN, SET_CURRENT_STORY, - STORY_ARGS_UPDATED, STORY_CHANGED, STORY_ERRORED, STORY_MISSING, From c39272aefc673ab2d5015c37871c2ea7df0459f5 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Fri, 5 Apr 2024 12:35:43 +0200 Subject: [PATCH 031/380] remove unnecessary test --- .../modules/preview-web/PreviewWeb.test.ts | 33 ------------------- 1 file changed, 33 deletions(-) diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts index e20af13752a6..0506167666b9 100644 --- a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts @@ -2141,39 +2141,6 @@ describe('PreviewWeb', () => { window.location = { ...originalLocation, reload: originalLocation.reload }; }); - it('stops initial story after loaders if running', async () => { - const [gate, openGate] = createGate(); - componentOneExports.default.loaders[0].mockImplementationOnce(async () => gate); - - document.location.search = '?id=component-one--a'; - await new PreviewWeb(importFn, getProjectAnnotations).ready(); - await waitForRenderPhase('loading'); - - emitter.emit(SET_CURRENT_STORY, { - storyId: 'component-one--b', - viewMode: 'story', - }); - await waitForSetCurrentStory(); - await waitForRender(); - - // Now let the loader resolve - openGate({ l: 8 }); - await waitForRender(); - - // Story gets rendered with updated args - expect(projectAnnotations.renderToCanvas).toHaveBeenCalledTimes(1); - expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith( - expect.objectContaining({ - forceRemount: true, - storyContext: expect.objectContaining({ - id: 'component-one--b', - loaded: { l: 7 }, - }), - }), - 'story-element' - ); - }); - it('aborts render for initial story', async () => { const [gate, openGate] = createGate(); From 6f6fe5fc843fb5a53eb44ce012491be45a909062 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Fri, 5 Apr 2024 13:22:35 +0200 Subject: [PATCH 032/380] improve readability of StoryRender.test flow --- .../preview-web/render/StoryRender.test.ts | 58 ++++++++++++++----- 1 file changed, 42 insertions(+), 16 deletions(-) diff --git a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts index e4942c11aab8..5b000454397b 100644 --- a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts @@ -22,6 +22,7 @@ const createGate = (): [Promise, () => void] => { }); return [gate, openGate]; }; +const tick = () => new Promise((resolve) => setTimeout(resolve, 0)); window.location = { reload: vi.fn() } as any; @@ -127,18 +128,19 @@ describe('StoryRender', () => { }); it('reloads the page when tearing down during loading', async () => { + // Arrange - setup StoryRender and async gate blocking applyLoaders + const [loaderGate, openLoaderGate] = createGate(); const story = { id: 'id', title: 'title', name: 'name', tags: [], - applyLoaders: vi.fn(), + applyLoaders: vi.fn(() => loaderGate), unboundStoryFn: vi.fn(), playFunction: vi.fn(), prepareContext: vi.fn(), }; const store = { getStoryContext: () => ({}), cleanupStory: vi.fn() }; - const render = new StoryRender( new Channel({}), store as any, @@ -150,16 +152,24 @@ describe('StoryRender', () => { story as any ); - story.applyLoaders.mockImplementation(() => teardownAndWaitForReload(render)); - - await render.renderToElement({} as any); - + // Act - render, blocked by loaders, teardown + // ... Assert - window is reloaded + const renderPromise = render.renderToElement({} as any); expect(story.applyLoaders).toHaveBeenCalledOnce(); + await teardownAndWaitForReload(render); + + // Assert - everything is actually cleaned up, just in case expect(store.cleanupStory).toHaveBeenCalledOnce(); expect(window.location.reload).toHaveBeenCalledOnce(); + + // clear dangling promise + openLoaderGate(); + await renderPromise; }); it('reloads the page when tearing down during rendering', async () => { + // Arrange - setup StoryRender and async gate blocking renderToScreen + const [renderGate, openRenderGate] = createGate(); const story = { id: 'id', title: 'title', @@ -171,7 +181,7 @@ describe('StoryRender', () => { prepareContext: vi.fn(), }; const store = { getStoryContext: () => ({}), cleanupStory: vi.fn() }; - const renderToScreen = vi.fn(); + const renderToScreen = vi.fn(() => renderGate); const render = new StoryRender( new Channel({}), @@ -184,16 +194,25 @@ describe('StoryRender', () => { story as any ); - renderToScreen.mockImplementation(() => teardownAndWaitForReload(render)); - - await render.renderToElement({} as any); - + // Act - render, blocked by renderToScreen, teardown + // ... Assert - window is reloaded + const renderPromise = render.renderToElement({} as any); + await tick(); // go from 'loading' to 'rendering' phase expect(renderToScreen).toHaveBeenCalledOnce(); + await teardownAndWaitForReload(render); + + // Assert - everything is actually cleaned up, just in case expect(store.cleanupStory).toHaveBeenCalledOnce(); expect(window.location.reload).toHaveBeenCalledOnce(); + + // clear dangling promise + openRenderGate(); + await renderPromise; }); it('reloads the page when tearing down during playing', async () => { + // Arrange - setup StoryRender and async gate blocking playing + const [playGate, openPlayGate] = createGate(); const story = { id: 'id', title: 'title', @@ -201,7 +220,7 @@ describe('StoryRender', () => { tags: [], applyLoaders: vi.fn(), unboundStoryFn: vi.fn(), - playFunction: vi.fn(), + playFunction: vi.fn(() => playGate), prepareContext: vi.fn(), }; const store = { getStoryContext: () => ({}), cleanupStory: vi.fn() }; @@ -217,13 +236,20 @@ describe('StoryRender', () => { story as any ); - story.playFunction.mockImplementation(() => teardownAndWaitForReload(render)); - - await render.renderToElement({} as any); - + // Act - render, blocked by renderToScreen, teardown + // ... Assert - window is reloaded + const renderPromise = render.renderToElement({} as any); + await tick(); // go from 'loading' to 'playing' phase expect(story.playFunction).toHaveBeenCalledOnce(); + await teardownAndWaitForReload(render); + + // Assert - everything is actually cleaned up, just in case expect(store.cleanupStory).toHaveBeenCalledOnce(); expect(window.location.reload).toHaveBeenCalledOnce(); + + // clear dangling promise + openPlayGate(); + await renderPromise; }); }); }); From 1c1003411d529759f2655adbd1a050662cc3a0c5 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Fri, 5 Apr 2024 13:26:37 +0200 Subject: [PATCH 033/380] assert render phase --- .../preview-web/render/StoryRender.test.ts | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts index 5b000454397b..7974840c58c2 100644 --- a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts @@ -152,10 +152,11 @@ describe('StoryRender', () => { story as any ); - // Act - render, blocked by loaders, teardown - // ... Assert - window is reloaded + // Act - render, blocked by loaders const renderPromise = render.renderToElement({} as any); expect(story.applyLoaders).toHaveBeenCalledOnce(); + expect(render.phase).toBe('loading'); + // Act & Assert - teardown, assert window is reloaded await teardownAndWaitForReload(render); // Assert - everything is actually cleaned up, just in case @@ -194,11 +195,12 @@ describe('StoryRender', () => { story as any ); - // Act - render, blocked by renderToScreen, teardown - // ... Assert - window is reloaded + // Act - render, blocked by renderToScreen const renderPromise = render.renderToElement({} as any); await tick(); // go from 'loading' to 'rendering' phase expect(renderToScreen).toHaveBeenCalledOnce(); + expect(render.phase).toBe('rendering'); + // Act & Assert - teardown, assert window is reloaded await teardownAndWaitForReload(render); // Assert - everything is actually cleaned up, just in case @@ -236,11 +238,12 @@ describe('StoryRender', () => { story as any ); - // Act - render, blocked by renderToScreen, teardown - // ... Assert - window is reloaded + // Act - render, blocked by playFn const renderPromise = render.renderToElement({} as any); await tick(); // go from 'loading' to 'playing' phase expect(story.playFunction).toHaveBeenCalledOnce(); + expect(render.phase).toBe('playing'); + // Act & Assert - teardown, assert window is reloaded await teardownAndWaitForReload(render); // Assert - everything is actually cleaned up, just in case From 91d0f8ab4186ed4b97d4e8e0657496712b4c8224 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Fri, 5 Apr 2024 14:43:01 +0200 Subject: [PATCH 034/380] teardown on remount --- .../modules/preview-web/PreviewWeb.test.ts | 3 ++ .../preview-web/render/StoryRender.test.ts | 53 +++++++++++++++++++ .../modules/preview-web/render/StoryRender.ts | 1 + 3 files changed, 57 insertions(+) diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts index 0506167666b9..aac800d6ac52 100644 --- a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts @@ -1502,6 +1502,9 @@ describe('PreviewWeb', () => { openGate(); await waitForRenderPhase('aborted'); + // allow teardown to complete its retries + vi.runOnlyPendingTimers(); + await waitForRenderPhase('rendering'); expect(projectAnnotations.renderToCanvas).toHaveBeenCalledTimes(2); diff --git a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts index 7974840c58c2..b5223bb92f75 100644 --- a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts @@ -254,5 +254,58 @@ describe('StoryRender', () => { openPlayGate(); await renderPromise; }); + + it('reloads the page when remounting during loading', async () => { + // Arrange - setup StoryRender and async gate blocking applyLoaders + const [loaderGate, openLoaderGate] = createGate(); + const story = { + id: 'id', + title: 'title', + name: 'name', + tags: [], + applyLoaders: vi.fn(() => loaderGate), + unboundStoryFn: vi.fn(), + playFunction: vi.fn(), + prepareContext: vi.fn(), + }; + const store = { getStoryContext: () => ({}), cleanupStory: vi.fn() }; + const render = new StoryRender( + new Channel({}), + store as any, + vi.fn() as any, + {} as any, + entry.id, + 'story', + { autoplay: true }, + story as any + ); + + // Act - render, blocked by loaders + const renderPromise = render.renderToElement({} as any); + expect(story.applyLoaders).toHaveBeenCalledOnce(); + expect(render.phase).toBe('loading'); + // Act - remount + render.remount(); + + // Assert - window is reloaded, keep ticking until it happens + await new Promise((resolve) => { + setInterval(() => { + try { + expect(window.location.reload).toHaveBeenCalledOnce(); + resolve(); + } catch { + // empty catch to ignore the assertion failing + } + }, 0); + }); + + // Assert - everything is actually cleaned up, just in case + expect(store.cleanupStory).toHaveBeenCalledOnce(); + expect(window.location.reload).toHaveBeenCalledOnce(); + + // clear dangling promise + openLoaderGate(); + await renderPromise; + }); }); }); diff --git a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.ts b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.ts index f17759baf8f0..406b3deb3b95 100644 --- a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.ts +++ b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.ts @@ -275,6 +275,7 @@ export class StoryRender implements Render Date: Fri, 5 Apr 2024 19:47:59 +0200 Subject: [PATCH 035/380] simplify StoryRender tests --- .../preview-web/render/StoryRender.test.ts | 80 +++++++------------ 1 file changed, 27 insertions(+), 53 deletions(-) diff --git a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts index 7974840c58c2..57822b9de6dd 100644 --- a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts @@ -82,23 +82,6 @@ describe('StoryRender', () => { }); describe('teardown', () => { - const teardownAndWaitForReload = (render: StoryRender) => { - // 1. immediately teardown the story - render.teardown(); - - return new Promise((resolve) => { - setInterval(() => { - try { - // 2. assert that the window is reloaded and move on - expect(window.location.reload).toHaveBeenCalledOnce(); - resolve(); - } catch { - // empty catch to ignore the assertion failing - } - }, 0); - }); - }; - it('throws PREPARE_ABORTED if torndown during prepare', async () => { const [importGate, openImportGate] = createGate(); const mockStore = { @@ -129,7 +112,7 @@ describe('StoryRender', () => { it('reloads the page when tearing down during loading', async () => { // Arrange - setup StoryRender and async gate blocking applyLoaders - const [loaderGate, openLoaderGate] = createGate(); + const [loaderGate] = createGate(); const story = { id: 'id', title: 'title', @@ -152,25 +135,22 @@ describe('StoryRender', () => { story as any ); - // Act - render, blocked by loaders - const renderPromise = render.renderToElement({} as any); + // Act - render (blocked by loaders), teardown + render.renderToElement({} as any); expect(story.applyLoaders).toHaveBeenCalledOnce(); expect(render.phase).toBe('loading'); - // Act & Assert - teardown, assert window is reloaded - await teardownAndWaitForReload(render); - - // Assert - everything is actually cleaned up, just in case - expect(store.cleanupStory).toHaveBeenCalledOnce(); - expect(window.location.reload).toHaveBeenCalledOnce(); + render.teardown(); - // clear dangling promise - openLoaderGate(); - await renderPromise; + // Assert - window is reloaded + await vi.waitFor(() => { + expect(window.location.reload).toHaveBeenCalledOnce(); + expect(store.cleanupStory).toHaveBeenCalledOnce(); + }); }); it('reloads the page when tearing down during rendering', async () => { // Arrange - setup StoryRender and async gate blocking renderToScreen - const [renderGate, openRenderGate] = createGate(); + const [renderGate] = createGate(); const story = { id: 'id', title: 'title', @@ -195,26 +175,23 @@ describe('StoryRender', () => { story as any ); - // Act - render, blocked by renderToScreen - const renderPromise = render.renderToElement({} as any); + // Act - render (blocked by renderToScreen), teardown + render.renderToElement({} as any); await tick(); // go from 'loading' to 'rendering' phase expect(renderToScreen).toHaveBeenCalledOnce(); expect(render.phase).toBe('rendering'); - // Act & Assert - teardown, assert window is reloaded - await teardownAndWaitForReload(render); - - // Assert - everything is actually cleaned up, just in case - expect(store.cleanupStory).toHaveBeenCalledOnce(); - expect(window.location.reload).toHaveBeenCalledOnce(); + render.teardown(); - // clear dangling promise - openRenderGate(); - await renderPromise; + // Assert - window is reloaded + await vi.waitFor(() => { + expect(window.location.reload).toHaveBeenCalledOnce(); + expect(store.cleanupStory).toHaveBeenCalledOnce(); + }); }); it('reloads the page when tearing down during playing', async () => { // Arrange - setup StoryRender and async gate blocking playing - const [playGate, openPlayGate] = createGate(); + const [playGate] = createGate(); const story = { id: 'id', title: 'title', @@ -238,21 +215,18 @@ describe('StoryRender', () => { story as any ); - // Act - render, blocked by playFn - const renderPromise = render.renderToElement({} as any); + // Act - render (blocked by playFn), teardown + render.renderToElement({} as any); await tick(); // go from 'loading' to 'playing' phase expect(story.playFunction).toHaveBeenCalledOnce(); expect(render.phase).toBe('playing'); - // Act & Assert - teardown, assert window is reloaded - await teardownAndWaitForReload(render); - - // Assert - everything is actually cleaned up, just in case - expect(store.cleanupStory).toHaveBeenCalledOnce(); - expect(window.location.reload).toHaveBeenCalledOnce(); + render.teardown(); - // clear dangling promise - openPlayGate(); - await renderPromise; + // Assert - window is reloaded + await vi.waitFor(() => { + expect(window.location.reload).toHaveBeenCalledOnce(); + expect(store.cleanupStory).toHaveBeenCalledOnce(); + }); }); }); }); From cad8ece0b0a45d4ada5ce59e2ec60dfebd3fa259 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Fri, 5 Apr 2024 20:11:34 +0200 Subject: [PATCH 036/380] simplify StoryRender test --- .../preview-web/render/StoryRender.test.ts | 26 +++++-------------- 1 file changed, 6 insertions(+), 20 deletions(-) diff --git a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts index 4ed892760d7c..7b21484558a6 100644 --- a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts @@ -231,7 +231,7 @@ describe('StoryRender', () => { it('reloads the page when remounting during loading', async () => { // Arrange - setup StoryRender and async gate blocking applyLoaders - const [loaderGate, openLoaderGate] = createGate(); + const [loaderGate] = createGate(); const story = { id: 'id', title: 'title', @@ -255,31 +255,17 @@ describe('StoryRender', () => { ); // Act - render, blocked by loaders - const renderPromise = render.renderToElement({} as any); + render.renderToElement({} as any); expect(story.applyLoaders).toHaveBeenCalledOnce(); expect(render.phase).toBe('loading'); // Act - remount render.remount(); - // Assert - window is reloaded, keep ticking until it happens - await new Promise((resolve) => { - setInterval(() => { - try { - expect(window.location.reload).toHaveBeenCalledOnce(); - resolve(); - } catch { - // empty catch to ignore the assertion failing - } - }, 0); + // Assert - window is reloaded + await vi.waitFor(() => { + expect(window.location.reload).toHaveBeenCalledOnce(); + expect(store.cleanupStory).toHaveBeenCalledOnce(); }); - - // Assert - everything is actually cleaned up, just in case - expect(store.cleanupStory).toHaveBeenCalledOnce(); - expect(window.location.reload).toHaveBeenCalledOnce(); - - // clear dangling promise - openLoaderGate(); - await renderPromise; }); }); }); From 5a01ab13839a7526cd5d8269b7e952ae390c5162 Mon Sep 17 00:00:00 2001 From: Mario Date: Sat, 6 Apr 2024 13:57:58 +0200 Subject: [PATCH 037/380] Addon-actions: Fix falsy args printing as object - 22163 --- code/addons/actions/src/components/ActionLogger/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/addons/actions/src/components/ActionLogger/index.tsx b/code/addons/actions/src/components/ActionLogger/index.tsx index a3e48337107f..d93496f604fc 100644 --- a/code/addons/actions/src/components/ActionLogger/index.tsx +++ b/code/addons/actions/src/components/ActionLogger/index.tsx @@ -50,7 +50,7 @@ export const ActionLogger = ({ actions, onClear }: ActionLoggerProps) => ( sortObjectKeys showNonenumerable={false} name={action.data.name} - data={action.data.args || action.data} + data={action.data.args ?? action.data} /> From 1a3129313519841621f4c84d19d8185b65c50dca Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Mon, 8 Apr 2024 14:12:14 +0200 Subject: [PATCH 038/380] only rerender once when triggered multiple times while a render is pending. --- .../preview-web/render/StoryRender.test.ts | 52 +++++++++++++++++++ .../modules/preview-web/render/StoryRender.ts | 19 ++++++- 2 files changed, 70 insertions(+), 1 deletion(-) diff --git a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts index 7b21484558a6..5b4261a368c0 100644 --- a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts @@ -81,6 +81,58 @@ describe('StoryRender', () => { expect(story.playFunction).not.toHaveBeenCalled(); }); + it.only('only rerenders once when triggered multiple times while pending', async () => { + // Arrange - setup StoryRender and async gate blocking applyLoaders + const [loaderGate, openLoaderGate] = createGate(); + const story = { + id: 'id', + title: 'title', + name: 'name', + tags: [], + applyLoaders: vi.fn(() => loaderGate), + unboundStoryFn: vi.fn(), + playFunction: vi.fn(), + prepareContext: vi.fn(), + }; + const store = { getStoryContext: () => ({}), cleanupStory: vi.fn() }; + const renderToScreen = vi.fn(); + const render = new StoryRender( + new Channel({}), + store as any, + renderToScreen, + {} as any, + entry.id, + 'story', + { autoplay: true }, + story as any + ); + // Arrange - render (blocked by loaders) + render.renderToElement({} as any); + expect(story.applyLoaders).toHaveBeenCalledOnce(); + expect(render.phase).toBe('loading'); + + // Act - rerender 3x + render.rerender(); + render.rerender(); + render.rerender(); + + // Assert - still loading, not yet rendered + expect(story.applyLoaders).toHaveBeenCalledOnce(); + expect(render.phase).toBe('loading'); + expect(renderToScreen).not.toHaveBeenCalled(); + + // Act - finish loading + openLoaderGate(); + + // Assert - loaded and rendered twice, played once + await vi.waitFor(async () => { + console.log(render.phase); + expect(story.applyLoaders).toHaveBeenCalledTimes(2); + expect(renderToScreen).toHaveBeenCalledTimes(2); + expect(story.playFunction).toHaveBeenCalledOnce(); + }); + }); + describe('teardown', () => { it('throws PREPARE_ABORTED if torndown during prepare', async () => { const [importGate, openImportGate] = createGate(); diff --git a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.ts b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.ts index 406b3deb3b95..9120628623f0 100644 --- a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.ts +++ b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.ts @@ -56,6 +56,8 @@ export class StoryRender implements Render {}; @@ -268,10 +270,25 @@ export class StoryRender implements Render Date: Mon, 8 Apr 2024 16:10:26 +0200 Subject: [PATCH 039/380] add story and e2e to test rendering race conditions --- ...review-web.spec.ts => preview-api.spec.ts} | 40 ++++++++++++++++++- .../template/stories/rendering.stories.ts | 28 +++++++++++++ 2 files changed, 67 insertions(+), 1 deletion(-) rename code/e2e-tests/{preview-web.spec.ts => preview-api.spec.ts} (56%) diff --git a/code/e2e-tests/preview-web.spec.ts b/code/e2e-tests/preview-api.spec.ts similarity index 56% rename from code/e2e-tests/preview-web.spec.ts rename to code/e2e-tests/preview-api.spec.ts index b4a96c4b6001..b0f5c48ddb79 100644 --- a/code/e2e-tests/preview-web.spec.ts +++ b/code/e2e-tests/preview-api.spec.ts @@ -5,7 +5,9 @@ import { SbPage } from './util'; const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001'; const templateName = process.env.STORYBOOK_TEMPLATE_NAME || ''; -test.describe('preview-web', () => { +const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms)); + +test.describe('preview-api', () => { test.beforeEach(async ({ page }) => { await page.goto(storybookUrl); @@ -50,4 +52,40 @@ test.describe('preview-web', () => { await sbPage.previewRoot().getByRole('button').getByText('Submit').first().press('Alt+s'); await expect(sbPage.page.locator('.sidebar-container')).not.toBeVisible(); }); + + // if rerenders where interleaved the button would have rendered something like "Loading... Done. Done. Done. Done. Changed arg" + test('should only render once at a time when rapidly changing args', async ({ page }) => { + const sbPage = new SbPage(page); + await sbPage.navigateToStory('lib/preview-api/rendering', 'slow-loader'); + + const root = sbPage.previewRoot(); + + const labelControl = await sbPage.page.locator('#control-label'); + + await expect(root.getByText('Loading... Done. Click me')).toBeVisible(); + await expect(labelControl).toBeVisible(); + + await labelControl.fill(''); + await labelControl.type('Changed arg', { delay: 50 }); + await labelControl.blur(); + + await expect(root.getByText('Loading... Done. Changed arg')).toBeVisible(); + }); + + test('should reload plage when remounting while loading', async ({ page }) => { + const sbPage = new SbPage(page); + await sbPage.navigateToStory('lib/preview-api/rendering', 'slow-loader'); + + const root = sbPage.previewRoot(); + + await expect(root.getByText('Loading... Done. Click me')).toBeVisible(); + + await sbPage.page.getByRole('button', { name: 'Remount component' }).click(); + await wait(200); + await sbPage.page.getByRole('button', { name: 'Remount component' }).click(); + + // the loading spinner indicates the iframe is being fully reloaded + await expect(sbPage.previewIframe().locator('.sb-preparing-story > .sb-loader')).toBeVisible(); + await expect(root.getByText('Loading... Done. Click me')).toBeVisible(); + }); }); diff --git a/code/lib/preview-api/template/stories/rendering.stories.ts b/code/lib/preview-api/template/stories/rendering.stories.ts index 477e07137987..f21893042369 100644 --- a/code/lib/preview-api/template/stories/rendering.stories.ts +++ b/code/lib/preview-api/template/stories/rendering.stories.ts @@ -66,3 +66,31 @@ export const ChangeArgs = { await expect(button).toHaveFocus(); }, }; + +let loadedLabel = 'Initial'; + +/** + * This story demonstrates what happens when rendering (loaders) have side effects, and can possibly interleave with each other + * Triggering multiple force remounts quickly should only result in a single remount in the end + * and the label should be 'Loading... Done. Click Me' at the end. If loaders are interleaving it could result in a label of 'Loading... Done. Done. Done. Done. Click Me' + * Similarly, changing args rapidly should only cause one rerender at a time, producing the same result. + */ +export const SlowLoader = { + loaders: [ + async () => { + loadedLabel = 'Loading...'; + await new Promise((resolve) => setTimeout(resolve, 1000)); + loadedLabel += ' Done.'; + return { label: loadedLabel }; + }, + ], + decorators: [ + (storyFn: any, context: any) => + storyFn({ + args: { + ...context.args, + label: `${context.loaded.label} ${context.args.label}`, + }, + }), + ], +}; From b8f8a2f721a7feb66cc2226e8c1d4f2beb57f325 Mon Sep 17 00:00:00 2001 From: Reuben Ellis Date: Mon, 8 Apr 2024 15:27:02 -0600 Subject: [PATCH 040/380] Added a new server error for Flow Types --- .../src/errors/server-errors.test.ts | 20 ++++++++++++++++++- .../core-events/src/errors/server-errors.ts | 19 ++++++++++++++++++ .../src/argTypes/convert/flow/convert.ts | 3 ++- 3 files changed, 40 insertions(+), 2 deletions(-) diff --git a/code/lib/core-events/src/errors/server-errors.test.ts b/code/lib/core-events/src/errors/server-errors.test.ts index 184323e0cdfd..b5f984db563a 100644 --- a/code/lib/core-events/src/errors/server-errors.test.ts +++ b/code/lib/core-events/src/errors/server-errors.test.ts @@ -1,5 +1,6 @@ import { describe, it, expect } from 'vitest'; -import { WebpackCompilationError } from './server-errors'; +import dedent from 'ts-dedent'; +import { UnknownFlowArgTypesError, WebpackCompilationError } from './server-errors'; describe('WebpackCompilationError', () => { it('should correctly handle error with stats.compilation.errors', () => { @@ -14,3 +15,20 @@ describe('WebpackCompilationError', () => { expect(webpackError.data.errors[1].message).toEqual('Error 2 message'); }); }); + +describe('UnknownFlowArgTypesError', () => { + it('should correctly handle error with Flow convertSig', () => { + const type = { + name: 'signature', + type: 'number', + signature: 1, + }; + + const message = dedent`We detected an Unknown Flow Type of type {"name":"signature","type":"number","signature":1} in your configuration. + Storybook expects either a function or an object signature Flow type. + Please check the Storybook configuration and make sure it has a valid Flow type.`; + + const typeError = new UnknownFlowArgTypesError({ type }); + expect(typeError.message).toEqual(message); + }); +}); diff --git a/code/lib/core-events/src/errors/server-errors.ts b/code/lib/core-events/src/errors/server-errors.ts index efd3c929de0c..587370931354 100644 --- a/code/lib/core-events/src/errors/server-errors.ts +++ b/code/lib/core-events/src/errors/server-errors.ts @@ -604,3 +604,22 @@ export class NoStatsForViteDevError extends StorybookError { `; } } + +export class UnknownFlowArgTypesError extends StorybookError { + readonly category = Category.DOCS_TOOLS; + + readonly code = 1; + + constructor(public data: { type: object }) { + super(); + } + + template() { + return dedent`We detected an Unknown Flow Type of type ${JSON.stringify( + this.data.type + )} in your configuration. + Storybook expects either a function or an object signature Flow type. + Please check the Storybook configuration and make sure it has a valid Flow type. + `; + } +} diff --git a/code/lib/docs-tools/src/argTypes/convert/flow/convert.ts b/code/lib/docs-tools/src/argTypes/convert/flow/convert.ts index b950be171bee..0758bc8251a4 100644 --- a/code/lib/docs-tools/src/argTypes/convert/flow/convert.ts +++ b/code/lib/docs-tools/src/argTypes/convert/flow/convert.ts @@ -1,3 +1,4 @@ +import { UnknownFlowArgTypesError } from '@storybook/core-events/server-errors'; import type { SBType } from '@storybook/types'; import type { FlowType, FlowSigType, FlowLiteralType } from './types'; @@ -18,7 +19,7 @@ const convertSig = (type: FlowSigType) => { value: values, }; default: - throw new Error(`Unknown: ${type}`); + throw new UnknownFlowArgTypesError({ type: type }); } }; From d87233643ab276e2d5ef42fd4b5930f9413b0673 Mon Sep 17 00:00:00 2001 From: Reuben Ellis Date: Mon, 8 Apr 2024 15:35:38 -0600 Subject: [PATCH 041/380] Update text --- code/lib/core-events/src/errors/server-errors.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/core-events/src/errors/server-errors.test.ts b/code/lib/core-events/src/errors/server-errors.test.ts index b5f984db563a..5c80de6a9e4a 100644 --- a/code/lib/core-events/src/errors/server-errors.test.ts +++ b/code/lib/core-events/src/errors/server-errors.test.ts @@ -26,7 +26,7 @@ describe('UnknownFlowArgTypesError', () => { const message = dedent`We detected an Unknown Flow Type of type {"name":"signature","type":"number","signature":1} in your configuration. Storybook expects either a function or an object signature Flow type. - Please check the Storybook configuration and make sure it has a valid Flow type.`; + Please check the Storybook configuration and ensure it has a valid Flow type.`; const typeError = new UnknownFlowArgTypesError({ type }); expect(typeError.message).toEqual(message); From 9fab232eb27798fa8059179656c431b2f6c8b01b Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Mon, 8 Apr 2024 23:55:11 +0200 Subject: [PATCH 042/380] fix tests --- .../src/modules/preview-web/render/StoryRender.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts index 5b4261a368c0..d9c5bdcc0863 100644 --- a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts @@ -81,7 +81,7 @@ describe('StoryRender', () => { expect(story.playFunction).not.toHaveBeenCalled(); }); - it.only('only rerenders once when triggered multiple times while pending', async () => { + it('only rerenders once when triggered multiple times while pending', async () => { // Arrange - setup StoryRender and async gate blocking applyLoaders const [loaderGate, openLoaderGate] = createGate(); const story = { From 83554ad27849c0a8dd62cbc5bea4b7ff2d352202 Mon Sep 17 00:00:00 2001 From: Reuben Ellis Date: Mon, 8 Apr 2024 19:01:55 -0600 Subject: [PATCH 043/380] Updated the type and added a better description --- code/lib/core-events/src/errors/server-errors.test.ts | 10 +++++----- code/lib/core-events/src/errors/server-errors.ts | 10 ++++------ .../src/argTypes/convert/typescript/convert.ts | 3 ++- 3 files changed, 11 insertions(+), 12 deletions(-) diff --git a/code/lib/core-events/src/errors/server-errors.test.ts b/code/lib/core-events/src/errors/server-errors.test.ts index 5c80de6a9e4a..b50124c16a8f 100644 --- a/code/lib/core-events/src/errors/server-errors.test.ts +++ b/code/lib/core-events/src/errors/server-errors.test.ts @@ -1,6 +1,6 @@ import { describe, it, expect } from 'vitest'; import dedent from 'ts-dedent'; -import { UnknownFlowArgTypesError, WebpackCompilationError } from './server-errors'; +import { UnknownArgTypesError, WebpackCompilationError } from './server-errors'; describe('WebpackCompilationError', () => { it('should correctly handle error with stats.compilation.errors', () => { @@ -24,11 +24,11 @@ describe('UnknownFlowArgTypesError', () => { signature: 1, }; - const message = dedent`We detected an Unknown Flow Type of type {"name":"signature","type":"number","signature":1} in your configuration. - Storybook expects either a function or an object signature Flow type. - Please check the Storybook configuration and ensure it has a valid Flow type.`; + const message = dedent`We detected a type {"name":"signature","type":"number","signature":1} in your configuration. + Your custom type does not match the TSFuncSigType or TSObjectSigType + Please check your Storybook configuration and ensure you have defined a valid type.`; - const typeError = new UnknownFlowArgTypesError({ type }); + const typeError = new UnknownArgTypesError({ type }); expect(typeError.message).toEqual(message); }); }); diff --git a/code/lib/core-events/src/errors/server-errors.ts b/code/lib/core-events/src/errors/server-errors.ts index 587370931354..8690728ab3e3 100644 --- a/code/lib/core-events/src/errors/server-errors.ts +++ b/code/lib/core-events/src/errors/server-errors.ts @@ -605,7 +605,7 @@ export class NoStatsForViteDevError extends StorybookError { } } -export class UnknownFlowArgTypesError extends StorybookError { +export class UnknownArgTypesError extends StorybookError { readonly category = Category.DOCS_TOOLS; readonly code = 1; @@ -615,11 +615,9 @@ export class UnknownFlowArgTypesError extends StorybookError { } template() { - return dedent`We detected an Unknown Flow Type of type ${JSON.stringify( - this.data.type - )} in your configuration. - Storybook expects either a function or an object signature Flow type. - Please check the Storybook configuration and make sure it has a valid Flow type. + return dedent`We detected a type ${JSON.stringify(this.data.type)} in your configuration. + Your custom type does not match the TSFuncSigType or TSObjectSigType + Please check your Storybook configuration and ensure you have defined a valid type. `; } } diff --git a/code/lib/docs-tools/src/argTypes/convert/typescript/convert.ts b/code/lib/docs-tools/src/argTypes/convert/typescript/convert.ts index 95436dfcb567..d05b5a7e1bea 100644 --- a/code/lib/docs-tools/src/argTypes/convert/typescript/convert.ts +++ b/code/lib/docs-tools/src/argTypes/convert/typescript/convert.ts @@ -1,3 +1,4 @@ +import { UnknownArgTypesError } from '@storybook/core-events/server-errors'; import type { SBType } from '@storybook/types'; import type { TSType, TSSigType } from './types'; import { parseLiteral } from '../utils'; @@ -16,7 +17,7 @@ const convertSig = (type: TSSigType) => { value: values, }; default: - throw new Error(`Unknown: ${type}`); + throw new UnknownArgTypesError({ type }); } }; From 0c6f1fdeb8d288b48070b8b52c9b03c0cfd784be Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Tue, 9 Apr 2024 12:24:54 +0200 Subject: [PATCH 044/380] clearer loading label --- code/e2e-tests/preview-api.spec.ts | 10 +++++----- .../preview-api/template/stories/rendering.stories.ts | 4 ++-- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/code/e2e-tests/preview-api.spec.ts b/code/e2e-tests/preview-api.spec.ts index b0f5c48ddb79..662a638bc84c 100644 --- a/code/e2e-tests/preview-api.spec.ts +++ b/code/e2e-tests/preview-api.spec.ts @@ -53,7 +53,7 @@ test.describe('preview-api', () => { await expect(sbPage.page.locator('.sidebar-container')).not.toBeVisible(); }); - // if rerenders where interleaved the button would have rendered something like "Loading... Done. Done. Done. Done. Changed arg" + // if rerenders were interleaved the button would have rendered "Error: Interleaved loaders. Changed arg" test('should only render once at a time when rapidly changing args', async ({ page }) => { const sbPage = new SbPage(page); await sbPage.navigateToStory('lib/preview-api/rendering', 'slow-loader'); @@ -62,14 +62,14 @@ test.describe('preview-api', () => { const labelControl = await sbPage.page.locator('#control-label'); - await expect(root.getByText('Loading... Done. Click me')).toBeVisible(); + await expect(root.getByText('Loaded. Click me')).toBeVisible(); await expect(labelControl).toBeVisible(); await labelControl.fill(''); await labelControl.type('Changed arg', { delay: 50 }); await labelControl.blur(); - await expect(root.getByText('Loading... Done. Changed arg')).toBeVisible(); + await expect(root.getByText('Loaded. Changed arg')).toBeVisible(); }); test('should reload plage when remounting while loading', async ({ page }) => { @@ -78,7 +78,7 @@ test.describe('preview-api', () => { const root = sbPage.previewRoot(); - await expect(root.getByText('Loading... Done. Click me')).toBeVisible(); + await expect(root.getByText('Loaded. Click me')).toBeVisible(); await sbPage.page.getByRole('button', { name: 'Remount component' }).click(); await wait(200); @@ -86,6 +86,6 @@ test.describe('preview-api', () => { // the loading spinner indicates the iframe is being fully reloaded await expect(sbPage.previewIframe().locator('.sb-preparing-story > .sb-loader')).toBeVisible(); - await expect(root.getByText('Loading... Done. Click me')).toBeVisible(); + await expect(root.getByText('Loaded. Click me')).toBeVisible(); }); }); diff --git a/code/lib/preview-api/template/stories/rendering.stories.ts b/code/lib/preview-api/template/stories/rendering.stories.ts index f21893042369..cfa655bf7b11 100644 --- a/code/lib/preview-api/template/stories/rendering.stories.ts +++ b/code/lib/preview-api/template/stories/rendering.stories.ts @@ -72,7 +72,7 @@ let loadedLabel = 'Initial'; /** * This story demonstrates what happens when rendering (loaders) have side effects, and can possibly interleave with each other * Triggering multiple force remounts quickly should only result in a single remount in the end - * and the label should be 'Loading... Done. Click Me' at the end. If loaders are interleaving it could result in a label of 'Loading... Done. Done. Done. Done. Click Me' + * and the label should be 'Loaded. Click Me' at the end. If loaders are interleaving it would result in a label of 'Error: Interleaved loaders. Click Me' * Similarly, changing args rapidly should only cause one rerender at a time, producing the same result. */ export const SlowLoader = { @@ -80,7 +80,7 @@ export const SlowLoader = { async () => { loadedLabel = 'Loading...'; await new Promise((resolve) => setTimeout(resolve, 1000)); - loadedLabel += ' Done.'; + loadedLabel = loadedLabel === 'Loading...' ? 'Loaded.' : 'Error: Interleaved loaders.'; return { label: loadedLabel }; }, ], From 0414d507f21596ca26dc0b88d7640a3d91401764 Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Tue, 9 Apr 2024 13:50:40 +0200 Subject: [PATCH 045/380] Move Modal component from addon-onboarding to @storybook/components, refactor its API for simplicity and use it for SaveFromControls --- .../src/components/Modal/Modal.styled.tsx | 50 --- .../features/WelcomeModal/WelcomeModal.tsx | 48 ++- .../WriteStoriesModal/WriteStoriesModal.tsx | 368 +++++++++--------- .../ArgsTable/SaveFromControls.stories.tsx | 20 +- .../components/ArgsTable/SaveFromControls.tsx | 151 ++++--- code/ui/components/package.json | 1 + .../src/components/Modal/Modal.stories.tsx | 68 ++-- .../src/components/Modal/Modal.styled.tsx | 105 +++++ .../src/components/Modal/Modal.tsx | 31 +- code/ui/components/src/index.ts | 1 + code/ui/manager/src/globals/exports.ts | 1 + code/yarn.lock | 1 + 12 files changed, 458 insertions(+), 387 deletions(-) delete mode 100644 code/addons/onboarding/src/components/Modal/Modal.styled.tsx rename code/{addons/onboarding => ui/components}/src/components/Modal/Modal.stories.tsx (64%) create mode 100644 code/ui/components/src/components/Modal/Modal.styled.tsx rename code/{addons/onboarding => ui/components}/src/components/Modal/Modal.tsx (60%) diff --git a/code/addons/onboarding/src/components/Modal/Modal.styled.tsx b/code/addons/onboarding/src/components/Modal/Modal.styled.tsx deleted file mode 100644 index 42cf6537dd36..000000000000 --- a/code/addons/onboarding/src/components/Modal/Modal.styled.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import { css, styled } from '@storybook/theming'; -import * as Dialog from '@radix-ui/react-dialog'; -import React from 'react'; - -export const StyledOverlay = styled.div` - background-color: rgba(27, 28, 29, 0.48); - position: fixed; - inset: 0px; - width: 100%; - height: 100%; - z-index: 10; -`; - -export const StyledContent = styled.div<{ - width: number; - height: number; -}>( - ({ width, height }) => css` - background-color: white; - border-radius: 6px; - box-shadow: rgba(14, 18, 22, 0.35) 0px 10px 38px -10px; - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: ${width ?? 740}px; - height: ${height ? `${height}px` : 'auto'}; - max-width: calc(100% - 40px); - max-height: 85vh; - overflow: hidden; - z-index: 11; - - &:focus-visible { - outline: none; - } - ` -); - -export const ContentWrapper = React.forwardRef< - HTMLDivElement, - React.ComponentProps & React.ComponentProps ->(function ContentWrapper({ width, height, children, ...contentProps }, ref) { - return ( - - - {children} - - - ); -}); diff --git a/code/addons/onboarding/src/features/WelcomeModal/WelcomeModal.tsx b/code/addons/onboarding/src/features/WelcomeModal/WelcomeModal.tsx index 9459529970e9..c971eecfa22f 100644 --- a/code/addons/onboarding/src/features/WelcomeModal/WelcomeModal.tsx +++ b/code/addons/onboarding/src/features/WelcomeModal/WelcomeModal.tsx @@ -1,8 +1,8 @@ +import { Modal } from '@storybook/components'; import type { FC } from 'react'; import React from 'react'; import { Button } from '../../components/Button/Button'; -import { Modal } from '../../components/Modal/Modal'; import { StorybookLogo } from './StorybookLogo'; import { ModalContentWrapper, @@ -26,30 +26,28 @@ export const WelcomeModal: FC = ({ onProceed, skipOnboarding return (
- {({ Close }) => ( - - - - Welcome to Storybook - - Storybook helps you develop UI components faster. Learn the basics in a few simple - steps. - - - - - Skip tour - - - - - - - - - )} + + + + Welcome to Storybook + + Storybook helps you develop UI components faster. Learn the basics in a few simple + steps. + + + + + Skip tour + + + + + + + +
); diff --git a/code/addons/onboarding/src/features/WriteStoriesModal/WriteStoriesModal.tsx b/code/addons/onboarding/src/features/WriteStoriesModal/WriteStoriesModal.tsx index b456b02240c9..7bfb4ea3a2e9 100644 --- a/code/addons/onboarding/src/features/WriteStoriesModal/WriteStoriesModal.tsx +++ b/code/addons/onboarding/src/features/WriteStoriesModal/WriteStoriesModal.tsx @@ -1,6 +1,4 @@ import React, { useCallback, useState, type FC } from 'react'; -import { Button } from '../../components/Button/Button'; -import { Modal } from '../../components/Modal/Modal'; import useMeasure from 'react-use-measure'; import { Background, @@ -17,6 +15,7 @@ import { SpanHighlight, Step2Text, } from './WriteStoriesModal.styled'; +import { Button } from '../../components/Button/Button'; import { SyntaxHighlighter } from '../../components/SyntaxHighlighter/SyntaxHighlighter'; import { List } from '../../components/List/List'; import { ListItem } from '../../components/List/ListItem/ListItem'; @@ -31,6 +30,7 @@ import { STORYBOOK_ADDON_ONBOARDING_CHANNEL } from '../../constants'; import { useTheme } from '@storybook/theming'; import type { CodeSnippets } from './code/types'; import { BookmarkHollowIcon, CrossIcon } from '@storybook/icons'; +import { Modal } from '@storybook/components'; // TODO: Add warning if backdropBoundary && !warningButtonStatus?.data is not true. // backdropBoundary && !warningButtonStatus?.data @@ -92,200 +92,198 @@ export const WriteStoriesModal: FC = ({ return ( - {({ Title, Description, Close }) => ( - - {codeSnippets ? ( - - ) : null} - {step === 'customStory' && backdropBoundary && !warningButtonStatus?.data && ( - - )} -
-
- - <ModalTitle> - <BookmarkHollowIcon width={13} /> - <span>How to write a story</span> - </ModalTitle> - - - - -
- - - {step === 'imports' && ( - <> -
-

Imports

- {isJavascript ? ( -

Import a component. In this case, the Button component.

- ) : ( - <> -

- First, import Meta and{' '} - StoryObj for type safety and - autocompletion in TypeScript stories. -

-

Next, import a component. In this case, the Button component.

- - )} -
- + )} +
+
+ + + + How to write a story + + + + + +
+ + + {step === 'imports' && ( + <> +
+

Imports

+ {isJavascript ? ( +

Import a component. In this case, the Button component.

+ ) : ( + <> +

+ First, import Meta and{' '} + StoryObj for type safety and autocompletion + in TypeScript stories. +

+

Next, import a component. In this case, the Button component.

+ + )} +
+ + + )} + {step === 'meta' && ( + <> +
+

Meta

+

+ The default export, Meta, contains metadata about this component's stories. + The title field (optional) controls where stories appear in the sidebar. +

+ Title property pointing to Storybook's sidebar +
+ + - - )} - {step === 'meta' && ( - <> -
-

Meta

-

- The default export, Meta, contains metadata about this component's stories. - The title field (optional) controls where stories appear in the sidebar. -

- Title property pointing to Storybook's sidebar -
- - - - - - )} - {step === 'story' && ( - <> -
-

Story

-

- Each named export is a story. Its contents specify how the story is rendered - in addition to other configuration options. -

- Story export pointing to the sidebar entry of the story -
- - - - - - )} - {step === 'args' && ( + + + + )} + {step === 'story' && ( + <> +
+

Story

+

+ Each named export is a story. Its contents specify how the story is rendered + in addition to other configuration options. +

+ Story export pointing to the sidebar entry of the story +
+ + + + + + )} + {step === 'args' && ( + <> +
+

Args

+

+ Args are inputs that are passed to the component, which Storybook uses to + render the component in different states. In React, args = props. They also + specify the initial control values for the story. +

+ Args mapped to their controls in Storybook +
+ + + + + + )} + {step === 'customStory' && + (!warningButtonStatus?.error ? ( <>
-

Args

+

Create your first story

- Args are inputs that are passed to the component, which Storybook uses to - render the component in different states. In React, args = props. They also - specify the initial control values for the story. + Now it's your turn. See how easy it is to create your first story by + following these steps below.

- Args mapped to their controls in Storybook + + + Copy the Warning story. + + + + Open the Button story in your current working directory. + + {buttonPath?.data && ( + // Replace '/' by '/' to properly break line + + {buttonPath.data.replaceAll('/', '/โ€‹').replaceAll('\\', '\\โ€‹')} + + )} + + + Paste it at the bottom of the file and save. + +
- - + {warningButtonStatus?.data ? ( + + ) : null} - )} - {step === 'customStory' && - (!warningButtonStatus?.error ? ( - <> -
-

Create your first story

-

- Now it's your turn. See how easy it is to create your first story by - following these steps below. -

- - - Copy the Warning story. - - - - Open the Button story in your current working directory. - - {buttonPath?.data && ( - // Replace '/' by '/' to properly break line - - {buttonPath.data.replaceAll('/', '/โ€‹').replaceAll('\\', '\\โ€‹')} - - )} - - - Paste it at the bottom of the file and save. - - -
- - - {warningButtonStatus?.data ? ( - - ) : null} - - - ) : null)} - - - - - - - -
- - )} + ) : null)} + + + + + + + +
+ ); }; diff --git a/code/ui/blocks/src/components/ArgsTable/SaveFromControls.stories.tsx b/code/ui/blocks/src/components/ArgsTable/SaveFromControls.stories.tsx index 37acbec5ff70..39204f2d2488 100644 --- a/code/ui/blocks/src/components/ArgsTable/SaveFromControls.stories.tsx +++ b/code/ui/blocks/src/components/ArgsTable/SaveFromControls.stories.tsx @@ -2,7 +2,7 @@ import { action } from '@storybook/addon-actions'; import type { Meta, StoryObj } from '@storybook/react'; import { SaveFromControls } from './SaveFromControls'; -import { expect, fn, userEvent, within } from '@storybook/test'; +import { expect, fireEvent, fn, userEvent, waitFor, within } from '@storybook/test'; const meta = { component: SaveFromControls, @@ -24,21 +24,23 @@ export const Default: Story = {}; export const Creating: Story = { play: async ({ canvasElement }) => { - const createButton = await within(canvasElement).findByRole('button', { name: /create/i }); - await userEvent.click(createButton); + const createButton = await within(canvasElement).findByRole('button', { name: /Create/i }); + await fireEvent.click(createButton); }, }; export const Created: Story = { play: async (context) => { await Creating.play(context); - const { canvasElement, args } = context; - const input = await within(canvasElement).findByRole('textbox'); - await userEvent.type(input, 'MyNewStory'); - const submitButton = await within(canvasElement).findByRole('button', { name: /save/i }); - await userEvent.click(submitButton); + await waitFor(async () => { + const dialog = await within(document.body).findByRole('dialog'); + const input = await within(dialog).findByRole('textbox'); + await userEvent.type(input, 'MyNewStory'); + const submitButton = await within(dialog).findByRole('button', { name: /Create/i }); + await userEvent.click(submitButton); + }); - await expect(args.createStory).toHaveBeenCalledWith('MyNewStory'); + await expect(context.args.createStory).toHaveBeenCalledWith('MyNewStory'); }, }; diff --git a/code/ui/blocks/src/components/ArgsTable/SaveFromControls.tsx b/code/ui/blocks/src/components/ArgsTable/SaveFromControls.tsx index 3e7abf5b4ab7..5332ff7632f9 100644 --- a/code/ui/blocks/src/components/ArgsTable/SaveFromControls.tsx +++ b/code/ui/blocks/src/components/ArgsTable/SaveFromControls.tsx @@ -1,4 +1,12 @@ -import { Bar as BaseBar, IconButton, TooltipNote, WithTooltip, Form } from '@storybook/components'; +import { + Bar as BaseBar, + Button, + Form, + IconButton, + Modal, + TooltipNote, + WithTooltip, +} from '@storybook/components'; import { AddIcon, CheckIcon, UndoIcon } from '@storybook/icons'; import { keyframes, styled } from '@storybook/theming'; import React from 'react'; @@ -48,18 +56,7 @@ const Label = styled.div({ }, }); -const InlineForm = styled(Form)({ - display: 'flex', - alignItems: 'center', - gap: 2, - width: 'auto', -}); - -const InlineInput = styled(Form.Input)(({ theme }) => ({ - height: 28, - minHeight: 28, - marginRight: 4, - +const ModalInput = styled(Form.Input)(({ theme }) => ({ '::placeholder': { color: theme.color.mediumdark, }, @@ -115,9 +112,6 @@ export const SaveFromControls = ({ saveStory, createStory, resetArgs }: SaveFrom setCreating(false); }, 1000); }; - const onCancelForm = () => { - setCreating(false); - }; return ( @@ -128,68 +122,73 @@ export const SaveFromControls = ({ saveStory, createStory, resetArgs }: SaveFrom - {creating ? ( - - - - Save + + } + > + + + + + + + } + > + + + - - Cancel + + + } + > + resetArgs()}> + + Reset - - ) : ( - - } - > - - - - - - - } - > - - - - - - - } - > - resetArgs()}> - - Reset - - - - )} + + + + +
+ + + Create new story + + This will add a new story to your existing stories file. + + + + + + + + + + +
+ ); diff --git a/code/ui/components/package.json b/code/ui/components/package.json index 7fecbf93625a..d42b97f87749 100644 --- a/code/ui/components/package.json +++ b/code/ui/components/package.json @@ -59,6 +59,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { + "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-slot": "^1.0.2", "@storybook/client-logger": "workspace:*", "@storybook/csf": "^0.1.2", diff --git a/code/addons/onboarding/src/components/Modal/Modal.stories.tsx b/code/ui/components/src/components/Modal/Modal.stories.tsx similarity index 64% rename from code/addons/onboarding/src/components/Modal/Modal.stories.tsx rename to code/ui/components/src/components/Modal/Modal.stories.tsx index 527aa87d4323..0c2add0dbe2e 100644 --- a/code/addons/onboarding/src/components/Modal/Modal.stories.tsx +++ b/code/ui/components/src/components/Modal/Modal.stories.tsx @@ -3,6 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { userEvent, within, expect } from '@storybook/test'; import { Modal } from './Modal'; +import { Button } from '../Button/Button'; const meta: Meta = { component: Modal, @@ -24,12 +25,10 @@ export const Default: Story = { return ( <> - {({ Close }) => ( -
-
Hello world!
- setOpen(false)}>Close -
- )} +
+
Hello world!
+ setOpen(false)}>Close +
@@ -54,12 +53,10 @@ export const FixedWidth: Story = { return ( <> - {({ Close }) => ( -
-
Hello world!
- setOpen(false)}>Close -
- )} +
+
Hello world!
+ setOpen(false)}>Close +
@@ -84,12 +81,10 @@ export const FixedHeight: Story = { return ( <> - {({ Close }) => ( -
-
Hello world!
- setOpen(false)}>Close -
- )} +
+
Hello world!
+ setOpen(false)}>Close +
@@ -115,12 +110,10 @@ export const FixedWidthAndHeight: Story = { return ( <> - {({ Close }) => ( -
-
Hello world!
- setOpen(false)}>Close -
- )} +
+
Hello world!
+ setOpen(false)}>Close +
@@ -133,3 +126,30 @@ export const FixedWidthAndHeight: Story = { await expect(canvas.findByText('Hello world!')).resolves.toBeInTheDocument(); }, }; + +export const StyledComponents = { + render: () => ( + + + + Hello + Lorem ipsum dolor sit amet. + + + + One + Two + + Right + + Another section + + + + + + + + + ), +}; diff --git a/code/ui/components/src/components/Modal/Modal.styled.tsx b/code/ui/components/src/components/Modal/Modal.styled.tsx new file mode 100644 index 000000000000..9a4c53e8cb22 --- /dev/null +++ b/code/ui/components/src/components/Modal/Modal.styled.tsx @@ -0,0 +1,105 @@ +import { keyframes, styled } from '@storybook/theming'; +import * as Dialog from '@radix-ui/react-dialog'; +import React from 'react'; + +import { IconButton } from '../IconButton/IconButton'; +import { CrossIcon } from '@storybook/icons'; + +const fadeIn = keyframes({ + from: { opacity: 0 }, + to: { opacity: 1 }, +}); + +const zoomIn = keyframes({ + from: { + opacity: 0, + transform: 'translate(-50%, -50%) scale(0.9)', + }, + to: { + opacity: 1, + transform: 'translate(-50%, -50%) scale(1)', + }, +}); + +export const Overlay = styled.div({ + backgroundColor: 'rgba(27, 28, 29, 0.2)', + position: 'fixed', + inset: 0, + width: '100%', + height: '100%', + zIndex: 10, + animation: `${fadeIn} 200ms forwards`, +}); + +export const Container = styled.div<{ width?: number; height?: number }>(({ width, height }) => ({ + backgroundColor: 'white', + borderRadius: 6, + boxShadow: 'rgba(14, 18, 22, 0.35) 0px 10px 38px -10px', + position: 'fixed', + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', + width: width ?? 740, + height: height ?? 'auto', + maxWidth: 'calc(100% - 40px)', + maxHeight: '85vh', + overflow: 'hidden', + zIndex: 11, + animation: `${zoomIn} 200ms forwards`, + + '&:focus-visible': { + outline: 'none', + }, +})); + +export const CloseButton = (props: React.ComponentProps) => ( + + + + + +); + +export const Content = styled.div({ + display: 'flex', + flexDirection: 'column', + margin: 16, + gap: 16, +}); + +export const Row = styled.div({ + display: 'flex', + justifyContent: 'space-between', + gap: 16, +}); + +export const Col = styled.div({ + display: 'flex', + flexDirection: 'column', + gap: 4, +}); + +export const Header = (props: React.ComponentProps) => ( + + + + +); + +export const Title = styled(Dialog.Title)(({ theme }) => ({ + margin: 0, + fontSize: theme.typography.size.s3, + fontWeight: theme.typography.weight.bold, +})); + +export const Description = styled(Dialog.Description)(({ theme }) => ({ + margin: 0, + fontSize: theme.typography.size.s2, + color: theme.color.mediumdark, +})); + +export const Actions = styled.div({ + display: 'flex', + flexDirection: 'row-reverse', + gap: 8, +}); diff --git a/code/addons/onboarding/src/components/Modal/Modal.tsx b/code/ui/components/src/components/Modal/Modal.tsx similarity index 60% rename from code/addons/onboarding/src/components/Modal/Modal.tsx rename to code/ui/components/src/components/Modal/Modal.tsx index 4c8bd9bec66d..ab9b59a27693 100644 --- a/code/addons/onboarding/src/components/Modal/Modal.tsx +++ b/code/ui/components/src/components/Modal/Modal.tsx @@ -1,17 +1,13 @@ import React from 'react'; import * as Dialog from '@radix-ui/react-dialog'; -import { ContentWrapper, StyledOverlay } from './Modal.styled'; +import * as Components from './Modal.styled'; -type ContentProps = React.ComponentProps; +type ContentProps = React.ComponentProps; interface ModalProps extends Omit, 'children'> { width?: number; height?: number; - children: (props: { - Title: typeof Dialog.Title; - Description: typeof Dialog.Description; - Close: typeof Dialog.Close; - }) => React.ReactNode; + children: React.ReactNode; onEscapeKeyDown?: ContentProps['onEscapeKeyDown']; onInteractOutside?: ContentProps['onInteractOutside']; } @@ -20,7 +16,7 @@ export const initial = { opacity: 0 }; export const animate = { opacity: 1, transition: { duration: 0.3 } }; export const exit = { opacity: 0, transition: { duration: 0.3 } }; -export function Modal({ +function BaseModal({ children, width, height, @@ -32,21 +28,20 @@ export function Modal({ - + - - {children({ - Title: Dialog.Title, - Description: Dialog.Description, - Close: Dialog.Close, - })} - + + {children} + + ); } + +export const Modal = Object.assign(BaseModal, Components, { Dialog }); diff --git a/code/ui/components/src/index.ts b/code/ui/components/src/index.ts index ffe4a08d699f..372a684c315d 100644 --- a/code/ui/components/src/index.ts +++ b/code/ui/components/src/index.ts @@ -42,6 +42,7 @@ export { createCopyToClipboardFunction } from './components/syntaxhighlighter/sy // UI export { ActionBar } from './components/ActionBar/ActionBar'; +export { Modal } from './components/Modal/Modal'; export { Spaced } from './components/spaced/Spaced'; export { Placeholder } from './components/placeholder/placeholder'; export { ScrollArea } from './components/ScrollArea/ScrollArea'; diff --git a/code/ui/manager/src/globals/exports.ts b/code/ui/manager/src/globals/exports.ts index 73881b9b5919..ecc5c47ede3f 100644 --- a/code/ui/manager/src/globals/exports.ts +++ b/code/ui/manager/src/globals/exports.ts @@ -86,6 +86,7 @@ export default { 'Link', 'ListItem', 'Loader', + 'Modal', 'OL', 'P', 'Placeholder', diff --git a/code/yarn.lock b/code/yarn.lock index 472dd503b241..8ede4c413982 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5479,6 +5479,7 @@ __metadata: resolution: "@storybook/components@workspace:ui/components" dependencies: "@popperjs/core": "npm:^2.6.0" + "@radix-ui/react-dialog": "npm:^1.0.5" "@radix-ui/react-scroll-area": "npm:^1.0.5" "@radix-ui/react-slot": "npm:^1.0.2" "@storybook/client-logger": "workspace:*" From b9c48bedcd489e689c51cebc2716b452a050b85b Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Tue, 9 Apr 2024 14:14:46 +0200 Subject: [PATCH 046/380] dont enqueue rerender during playing --- .../src/modules/preview-web/render/StoryRender.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.ts b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.ts index 9120628623f0..74e88bfecd2c 100644 --- a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.ts +++ b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.ts @@ -280,11 +280,13 @@ export class StoryRender implements Render Date: Mon, 8 Apr 2024 14:43:07 +0200 Subject: [PATCH 047/380] Add helper function to create story file for TypeScript projects --- .../new-story-templates/typescript.test.ts | 54 +++++++++++++++++++ .../utils/new-story-templates/typescript.ts | 32 +++++++++++ 2 files changed, 86 insertions(+) create mode 100644 code/addons/controls/src/utils/new-story-templates/typescript.test.ts create mode 100644 code/addons/controls/src/utils/new-story-templates/typescript.ts diff --git a/code/addons/controls/src/utils/new-story-templates/typescript.test.ts b/code/addons/controls/src/utils/new-story-templates/typescript.test.ts new file mode 100644 index 000000000000..fe80df729713 --- /dev/null +++ b/code/addons/controls/src/utils/new-story-templates/typescript.test.ts @@ -0,0 +1,54 @@ +import { describe, expect, it } from 'vitest'; +import { getTypeScriptTemplateForNewStoryFile } from './typescript'; + +describe('typescript', () => { + it('should return a TypeScript template with a default import', () => { + const result = getTypeScriptTemplateForNewStoryFile({ + basename: 'foo', + componentExportName: 'default', + default: true, + frameworkPackageName: '@storybook/nextjs', + exportedStoryName: 'Default', + }); + + expect(result).toMatchInlineSnapshot(` + "import Component from './foo'; + import type { Meta, StoryObj } from '@storybook/nextjs'; + + const meta = { + component: Component + } satisfies Meta + + export default meta; + + type Story = StoryObj; + + export const Default: Story = {}" + `); + }); + + it('should return a TypeScript template with a named import', () => { + const result = getTypeScriptTemplateForNewStoryFile({ + basename: 'foo', + componentExportName: 'Example', + default: false, + frameworkPackageName: '@storybook/nextjs', + exportedStoryName: 'Default', + }); + + expect(result).toMatchInlineSnapshot(` + "import { Example } from './foo'; + import type { Meta, StoryObj } from '@storybook/nextjs'; + + const meta = { + component: Example + } satisfies Meta + + export default meta; + + type Story = StoryObj; + + export const Default: Story = {}" + `); + }); +}); diff --git a/code/addons/controls/src/utils/new-story-templates/typescript.ts b/code/addons/controls/src/utils/new-story-templates/typescript.ts new file mode 100644 index 000000000000..8e0093cf7858 --- /dev/null +++ b/code/addons/controls/src/utils/new-story-templates/typescript.ts @@ -0,0 +1,32 @@ +import dedent from 'ts-dedent'; + +export function getTypeScriptTemplateForNewStoryFile(data: { + /** The components file name without the extension */ + basename: string; + componentExportName: string; + default: boolean; + /** The framework package name, e.g. @storybook/nextjs */ + frameworkPackageName: string; + /** The exported name of the default story */ + exportedStoryName: string; +}) { + const importName = data.default ? 'Component' : data.componentExportName; + const importStatement = data.default + ? `import ${importName} from './${data.basename}'` + : `import { ${importName} } from './${data.basename}'`; + + return dedent` + ${importStatement}; + import type { Meta, StoryObj } from '${data.frameworkPackageName}'; + + const meta = { + component: ${importName} + } satisfies Meta + + export default meta; + + type Story = StoryObj; + + export const ${data.exportedStoryName}: Story = {} + `; +} From 62a9415f39fdeb57de21afbdb111568c1a0e02d7 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 8 Apr 2024 14:43:19 +0200 Subject: [PATCH 048/380] Add helper function to create story file for JavaScript projects --- .../new-story-templates/javascript.test.ts | 46 +++++++++++++++++++ .../utils/new-story-templates/javascript.ts | 27 +++++++++++ 2 files changed, 73 insertions(+) create mode 100644 code/addons/controls/src/utils/new-story-templates/javascript.test.ts create mode 100644 code/addons/controls/src/utils/new-story-templates/javascript.ts diff --git a/code/addons/controls/src/utils/new-story-templates/javascript.test.ts b/code/addons/controls/src/utils/new-story-templates/javascript.test.ts new file mode 100644 index 000000000000..efebd20773b2 --- /dev/null +++ b/code/addons/controls/src/utils/new-story-templates/javascript.test.ts @@ -0,0 +1,46 @@ +import { describe, expect, it } from 'vitest'; +import { getJavaScriptTemplateForNewStoryFile } from './javascript'; + +describe('javascript', () => { + it('should return a TypeScript template with a default import', () => { + const result = getJavaScriptTemplateForNewStoryFile({ + basename: 'foo', + componentExportName: 'default', + default: true, + exportedStoryName: 'Default', + }); + + expect(result).toMatchInlineSnapshot(` + "import Component from './foo'; + + const meta = { + component: Component + } + + export default meta; + + export const Default = {}" + `); + }); + + it('should return a TypeScript template with a named import', () => { + const result = getJavaScriptTemplateForNewStoryFile({ + basename: 'foo', + componentExportName: 'Example', + default: false, + exportedStoryName: 'Default', + }); + + expect(result).toMatchInlineSnapshot(` + "import { Example } from './foo'; + + const meta = { + component: Example + } + + export default meta; + + export const Default = {}" + `); + }); +}); diff --git a/code/addons/controls/src/utils/new-story-templates/javascript.ts b/code/addons/controls/src/utils/new-story-templates/javascript.ts new file mode 100644 index 000000000000..165ea18506ff --- /dev/null +++ b/code/addons/controls/src/utils/new-story-templates/javascript.ts @@ -0,0 +1,27 @@ +import dedent from 'ts-dedent'; + +export function getJavaScriptTemplateForNewStoryFile(data: { + /** The components file name without the extension */ + basename: string; + componentExportName: string; + default: boolean; + /** The exported name of the default story */ + exportedStoryName: string; +}) { + const importName = data.default ? 'Component' : data.componentExportName; + const importStatement = data.default + ? `import ${importName} from './${data.basename}';` + : `import { ${importName} } from './${data.basename}';`; + + return dedent` + ${importStatement} + + const meta = { + component: ${importName} + } + + export default meta; + + export const ${data.exportedStoryName} = {} + `; +} From 82121c79081f3dfaddade4a673b71f6be629c56c Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 8 Apr 2024 15:27:21 +0200 Subject: [PATCH 049/380] Create channel to create a new story --- code/addons/controls/package.json | 2 +- code/lib/core-events/src/index.ts | 4 + .../create-new-story-channel.test.ts | 162 ++++++++++++++++++ .../create-new-story-channel.ts | 103 +++++++++++ .../src/utils/get-new-story-file.test.ts | 82 +++++++++ .../src/utils/get-new-story-file.ts | 56 ++++++ .../new-story-templates/javascript.test.ts | 0 .../utils/new-story-templates/javascript.ts | 0 .../new-story-templates/typescript.test.ts | 0 .../utils/new-story-templates/typescript.ts | 0 code/yarn.lock | 2 +- 11 files changed, 409 insertions(+), 2 deletions(-) create mode 100644 code/lib/core-server/src/server-channel/create-new-story-channel.test.ts create mode 100644 code/lib/core-server/src/server-channel/create-new-story-channel.ts create mode 100644 code/lib/core-server/src/utils/get-new-story-file.test.ts create mode 100644 code/lib/core-server/src/utils/get-new-story-file.ts rename code/{addons/controls => lib/core-server}/src/utils/new-story-templates/javascript.test.ts (100%) rename code/{addons/controls => lib/core-server}/src/utils/new-story-templates/javascript.ts (100%) rename code/{addons/controls => lib/core-server}/src/utils/new-story-templates/typescript.test.ts (100%) rename code/{addons/controls => lib/core-server}/src/utils/new-story-templates/typescript.ts (100%) diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json index d13ea6560843..c0e43b6e5001 100644 --- a/code/addons/controls/package.json +++ b/code/addons/controls/package.json @@ -53,6 +53,7 @@ "dependencies": { "@storybook/blocks": "workspace:*", "lodash": "^4.17.21", + "slash": "^5.0.0", "ts-dedent": "^2.0.0" }, "devDependencies": { @@ -61,7 +62,6 @@ "@storybook/core-common": "workspace:*", "@storybook/manager-api": "workspace:*", "@storybook/node-logger": "workspace:*", - "@storybook/preview-api": "workspace:*", "@storybook/theming": "workspace:*", "@storybook/types": "workspace:*", "react": "^18.2.0", diff --git a/code/lib/core-events/src/index.ts b/code/lib/core-events/src/index.ts index 82978a994d07..ec6bd134be33 100644 --- a/code/lib/core-events/src/index.ts +++ b/code/lib/core-events/src/index.ts @@ -75,6 +75,8 @@ enum events { TELEMETRY_ERROR = 'telemetryError', FILE_COMPONENT_SEARCH = 'fileComponentSearch', FILE_COMPONENT_SEARCH_RESULT = 'fileComponentSearchResult', + CREATE_NEW_STORYFILE = 'createNewStoryfile', + CREATE_NEW_STORYFILE_RESULT = 'createNewStoryfileResult', } // Enables: `import Events from ...` @@ -86,6 +88,8 @@ export const { CHANNEL_WS_DISCONNECT, CHANNEL_CREATED, CONFIG_ERROR, + CREATE_NEW_STORYFILE, + CREATE_NEW_STORYFILE_RESULT, CURRENT_STORY_WAS_SET, DOCS_PREPARED, DOCS_RENDERED, diff --git a/code/lib/core-server/src/server-channel/create-new-story-channel.test.ts b/code/lib/core-server/src/server-channel/create-new-story-channel.test.ts new file mode 100644 index 000000000000..b725ed036946 --- /dev/null +++ b/code/lib/core-server/src/server-channel/create-new-story-channel.test.ts @@ -0,0 +1,162 @@ +import { describe, it, expect, vi, beforeEach } from 'vitest'; +import { getStoryId, initCreateNewStoryChannel } from './create-new-story-channel'; +import path from 'path'; +import type { ChannelTransport } from '@storybook/channels'; +import { Channel } from '@storybook/channels'; +import { CREATE_NEW_STORYFILE, CREATE_NEW_STORYFILE_RESULT } from '@storybook/core-events'; + +vi.mock('@storybook/core-common', async (importOriginal) => { + const actual = await importOriginal(); + return { + ...actual, + getProjectRoot: vi.fn().mockReturnValue(require('path').join(__dirname)), + }; +}); + +const mockFs = vi.hoisted(() => { + return { + writeFileSync: vi.fn(), + }; +}); + +vi.mock('fs', async (importOriginal) => { + const actual = await importOriginal(); + return { + default: { + ...actual, + writeFileSync: mockFs.writeFileSync, + }, + }; +}); + +describe('createNewStoryChannel', () => { + const transport = { setHandler: vi.fn(), send: vi.fn() } satisfies ChannelTransport; + const mockChannel = new Channel({ transport }); + const createNewStoryFileEventListener = vi.fn(); + + beforeEach(() => { + transport.setHandler.mockClear(); + transport.send.mockClear(); + createNewStoryFileEventListener.mockClear(); + }); + + describe('getStoryId', () => { + it('should return the storyId', async () => { + const cwd = process.cwd(); + const options = { + configDir: path.join(cwd, '.storybook'), + presets: { + apply: (val: string) => { + if (val === 'stories') { + return Promise.resolve(['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)']); + } + }, + }, + } as any; + const storyFilePath = path.join(cwd, 'src', 'components', 'stories', 'Page1.stories.ts'); + const exportedStoryName = 'Default'; + + const storyId = await getStoryId(options, storyFilePath, exportedStoryName); + + expect(storyId).toBe('components-stories-page1--default'); + }); + + it('should throw an error if the storyId cannot be calculated', async () => { + const cwd = process.cwd(); + const options = { + configDir: path.join(cwd, '.storybook'), + presets: { + apply: (val: string) => { + if (val === 'stories') { + return Promise.resolve(['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)']); + } + }, + }, + } as any; + const storyFilePath = path.join(cwd, 'not-covered-path', 'stories', 'Page1.stories.ts'); + const exportedStoryName = 'Default'; + + await expect(() => + getStoryId(options, storyFilePath, exportedStoryName) + ).rejects.toThrowError(); + }); + }); + + describe('initCreateNewStoryChannel', () => { + it('should emit an event with a story id', async () => { + mockChannel.addListener(CREATE_NEW_STORYFILE_RESULT, createNewStoryFileEventListener); + const cwd = process.cwd(); + + initCreateNewStoryChannel(mockChannel, { + configDir: path.join(cwd, '.storybook'), + presets: { + apply: (val: string) => { + if (val === 'framework') { + return Promise.resolve('@storybook/nextjs'); + } + if (val === 'stories') { + return Promise.resolve(['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)']); + } + }, + }, + } as any); + + mockChannel.emit(CREATE_NEW_STORYFILE, { + filepath: 'src/components/Page.jsx', + componentExportName: 'Page', + default: true, + }); + + await vi.waitFor(() => { + expect(createNewStoryFileEventListener).toHaveBeenCalled(); + }); + + expect(createNewStoryFileEventListener).toHaveBeenCalledWith({ + error: null, + result: { + storyId: 'server-channel-src-components-page--default', + }, + success: true, + }); + }); + + it('should emit an error event if an error occurs', async () => { + mockChannel.addListener(CREATE_NEW_STORYFILE_RESULT, createNewStoryFileEventListener); + const cwd = process.cwd(); + + mockFs.writeFileSync.mockImplementation(() => { + throw new Error('Failed to write file'); + }); + + initCreateNewStoryChannel(mockChannel, { + configDir: path.join(cwd, '.storybook'), + presets: { + apply: (val: string) => { + if (val === 'framework') { + return Promise.resolve('@storybook/nextjs'); + } + if (val === 'stories') { + return Promise.resolve(['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)']); + } + }, + }, + } as any); + + mockChannel.emit(CREATE_NEW_STORYFILE, { + filepath: 'src/components/Page.jsx', + componentExportName: 'Page', + default: true, + }); + + await vi.waitFor(() => { + expect(createNewStoryFileEventListener).toHaveBeenCalled(); + }); + + expect(createNewStoryFileEventListener).toHaveBeenCalledWith({ + error: 'An error occurred while creating a new story:\nFailed to write file', + result: null, + success: false, + }); + }); + }); +}); diff --git a/code/lib/core-server/src/server-channel/create-new-story-channel.ts b/code/lib/core-server/src/server-channel/create-new-story-channel.ts new file mode 100644 index 000000000000..180589ea8ce2 --- /dev/null +++ b/code/lib/core-server/src/server-channel/create-new-story-channel.ts @@ -0,0 +1,103 @@ +import type { Options } from '@storybook/types'; +import type { Channel } from '@storybook/channels'; +import { CREATE_NEW_STORYFILE, CREATE_NEW_STORYFILE_RESULT } from '@storybook/core-events'; +import dedent from 'ts-dedent'; +import { normalizeStories, normalizeStoryPath } from '@storybook/core-common'; +import path from 'path'; +import fs from 'fs'; +import { storyNameFromExport, toId } from '@storybook/csf'; +import slash from 'slash'; +import { userOrAutoTitleFromSpecifier } from '@storybook/preview-api'; +import { getNewStoryFile } from '../utils/get-new-story-file'; + +interface Data { + // The filepath of the component for which the Story should be generated for (relative to the project root) + filepath: string; + // The name of the exported component + componentExportName: string; + // is default export + default: boolean; +} + +interface Result { + success: true | false; + result: null | { + storyId: string; + }; + error: null | string; +} + +export function initCreateNewStoryChannel(channel: Channel, options: Options) { + /** + * Listens for events to create a new storyfile + */ + channel.on(CREATE_NEW_STORYFILE, async (data: Data) => { + try { + const { storyFilePath, exportedStoryName, storyFileContent } = await getNewStoryFile( + data, + options + ); + + fs.writeFileSync(storyFilePath, storyFileContent, { + encoding: 'utf-8', + }); + + const storyId = await getStoryId(options, storyFilePath, exportedStoryName); + + channel.emit(CREATE_NEW_STORYFILE_RESULT, { + success: true, + result: { + storyId, + }, + error: null, + } satisfies Result); + } catch (e: any) { + channel.emit(CREATE_NEW_STORYFILE_RESULT, { + success: false, + result: null, + error: dedent` + An error occurred while creating a new story: + ${e?.message} + `, + } satisfies Result); + } + }); + + return channel; +} + +export async function getStoryId( + options: Options, + storyFilePath: string, + exportedStoryName: string +) { + const stories = await options.presets.apply('stories', [], options); + + const workingDir = process.cwd(); + + const normalizedStories = normalizeStories(stories, { + configDir: options.configDir, + workingDir, + }); + + const relativePath = path.relative(workingDir, storyFilePath); + const importPath = slash(normalizeStoryPath(relativePath)); + + const autoTitle = normalizedStories + .map((normalizeStory) => userOrAutoTitleFromSpecifier(importPath, normalizeStory)) + .filter(Boolean)[0]; + + if (autoTitle === undefined) { + // eslint-disable-next-line local-rules/no-uncategorized-errors + throw new Error(dedent` + The generation of your new Story file was successful! But it seems that we are unable to index it. + Please make sure that the new Story file is matched by the 'stories' glob pattern in your Storybook configuration. + The location of the new Story file is: ${relativePath} + `); + } + + const storyName = storyNameFromExport(exportedStoryName); + const storyId = toId(autoTitle as string, storyName); + + return storyId; +} diff --git a/code/lib/core-server/src/utils/get-new-story-file.test.ts b/code/lib/core-server/src/utils/get-new-story-file.test.ts new file mode 100644 index 000000000000..96533d243ed3 --- /dev/null +++ b/code/lib/core-server/src/utils/get-new-story-file.test.ts @@ -0,0 +1,82 @@ +import { describe, expect, it, vi } from 'vitest'; +import { getNewStoryFile } from './get-new-story-file'; +import path from 'path'; + +vi.mock('@storybook/core-common', async (importOriginal) => { + const actual = await importOriginal(); + return { + ...actual, + getProjectRoot: vi.fn().mockReturnValue(require('path').join(__dirname)), + }; +}); + +describe('get-new-story-file', () => { + it('should create a new story file (TypeScript)', async () => { + const { exportedStoryName, storyFileContent, storyFilePath } = await getNewStoryFile( + { + filepath: 'src/components/Page.tsx', + componentExportName: 'Page', + default: false, + }, + { + presets: { + apply: (val: string) => { + if (val === 'framework') { + return Promise.resolve('@storybook/nextjs'); + } + }, + }, + } as any + ); + + expect(exportedStoryName).toBe('Default'); + expect(storyFileContent).toMatchInlineSnapshot(` + "import { Page } from './Page'; + import type { Meta, StoryObj } from '@storybook/nextjs'; + + const meta = { + component: Page + } satisfies Meta + + export default meta; + + type Story = StoryObj; + + export const Default: Story = {}" + `); + expect(storyFilePath).toBe(path.join(__dirname, 'src', 'components', 'Page.stories.tsx')); + }); + + it('should create a new story file (JavaScript)', async () => { + const { exportedStoryName, storyFileContent, storyFilePath } = await getNewStoryFile( + { + filepath: 'src/components/Page.jsx', + componentExportName: 'Page', + default: true, + }, + { + presets: { + apply: (val: string) => { + if (val === 'framework') { + return Promise.resolve('@storybook/nextjs'); + } + }, + }, + } as any + ); + + expect(exportedStoryName).toBe('Default'); + expect(storyFileContent).toMatchInlineSnapshot(` + "import Component from './Page'; + + const meta = { + component: Component + } + + export default meta; + + export const Default = {}" + `); + expect(storyFilePath).toBe(path.join(__dirname, 'src', 'components', 'Page.stories.jsx')); + }); +}); diff --git a/code/lib/core-server/src/utils/get-new-story-file.ts b/code/lib/core-server/src/utils/get-new-story-file.ts new file mode 100644 index 000000000000..0c561a01e1d9 --- /dev/null +++ b/code/lib/core-server/src/utils/get-new-story-file.ts @@ -0,0 +1,56 @@ +import type { Options } from '@storybook/types'; +import { getFrameworkName, getProjectRoot } from '@storybook/core-common'; +import path from 'path'; +import fs from 'fs'; +import { getTypeScriptTemplateForNewStoryFile } from './new-story-templates/typescript'; +import { getJavaScriptTemplateForNewStoryFile } from './new-story-templates/javascript'; + +interface Data { + filepath: string; + componentExportName: string; + default: boolean; +} + +export async function getNewStoryFile( + { filepath, componentExportName, default: isDefault }: Data, + options: Options +) { + const isTypescript = /\.(ts|tsx|mts|cts)$/.test(filepath); + const cwd = getProjectRoot(); + + const frameworkPackage = await getFrameworkName(options); + + const basename = path.basename(filepath); + const extension = path.extname(filepath); + const basenameWithoutExtension = basename.replace(extension, ''); + const dirname = path.dirname(filepath); + + const storyFileExtension = isTypescript ? 'tsx' : 'jsx'; + const storyFileName = `${basenameWithoutExtension}.stories.${storyFileExtension}`; + const alternativeStoryFileName = `${basenameWithoutExtension}.${componentExportName}.stories.${storyFileExtension}`; + + const exportedStoryName = 'Default'; + + const storyFileContent = isTypescript + ? getTypeScriptTemplateForNewStoryFile({ + basename: basenameWithoutExtension, + componentExportName: componentExportName, + default: isDefault, + frameworkPackageName: frameworkPackage, + exportedStoryName, + }) + : getJavaScriptTemplateForNewStoryFile({ + basename: basenameWithoutExtension, + componentExportName: componentExportName, + default: isDefault, + exportedStoryName, + }); + + const doesStoryFileExist = fs.existsSync(path.join(cwd, filepath)); + + const storyFilePath = doesStoryFileExist + ? path.join(cwd, dirname, alternativeStoryFileName) + : path.join(cwd, dirname, storyFileName); + + return { storyFilePath, exportedStoryName, storyFileContent }; +} diff --git a/code/addons/controls/src/utils/new-story-templates/javascript.test.ts b/code/lib/core-server/src/utils/new-story-templates/javascript.test.ts similarity index 100% rename from code/addons/controls/src/utils/new-story-templates/javascript.test.ts rename to code/lib/core-server/src/utils/new-story-templates/javascript.test.ts diff --git a/code/addons/controls/src/utils/new-story-templates/javascript.ts b/code/lib/core-server/src/utils/new-story-templates/javascript.ts similarity index 100% rename from code/addons/controls/src/utils/new-story-templates/javascript.ts rename to code/lib/core-server/src/utils/new-story-templates/javascript.ts diff --git a/code/addons/controls/src/utils/new-story-templates/typescript.test.ts b/code/lib/core-server/src/utils/new-story-templates/typescript.test.ts similarity index 100% rename from code/addons/controls/src/utils/new-story-templates/typescript.test.ts rename to code/lib/core-server/src/utils/new-story-templates/typescript.test.ts diff --git a/code/addons/controls/src/utils/new-story-templates/typescript.ts b/code/lib/core-server/src/utils/new-story-templates/typescript.ts similarity index 100% rename from code/addons/controls/src/utils/new-story-templates/typescript.ts rename to code/lib/core-server/src/utils/new-story-templates/typescript.ts diff --git a/code/yarn.lock b/code/yarn.lock index 7be8a5f1fd96..56ddebe3ade7 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -4793,12 +4793,12 @@ __metadata: "@storybook/core-common": "workspace:*" "@storybook/manager-api": "workspace:*" "@storybook/node-logger": "workspace:*" - "@storybook/preview-api": "workspace:*" "@storybook/theming": "workspace:*" "@storybook/types": "workspace:*" lodash: "npm:^4.17.21" react: "npm:^18.2.0" react-dom: "npm:^18.2.0" + slash: "npm:^5.0.0" ts-dedent: "npm:^2.0.0" languageName: unknown linkType: soft From 51ef2d4a40282c9c6eca1a2002218a79d1b7c5f2 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 8 Apr 2024 16:53:08 +0200 Subject: [PATCH 050/380] Fix TypeScript story file template --- .../src/utils/new-story-templates/typescript.test.ts | 10 ++++++---- .../src/utils/new-story-templates/typescript.ts | 3 ++- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/code/lib/core-server/src/utils/new-story-templates/typescript.test.ts b/code/lib/core-server/src/utils/new-story-templates/typescript.test.ts index fe80df729713..58535aaea2c7 100644 --- a/code/lib/core-server/src/utils/new-story-templates/typescript.test.ts +++ b/code/lib/core-server/src/utils/new-story-templates/typescript.test.ts @@ -12,8 +12,9 @@ describe('typescript', () => { }); expect(result).toMatchInlineSnapshot(` - "import Component from './foo'; - import type { Meta, StoryObj } from '@storybook/nextjs'; + "import type { Meta, StoryObj } from '@storybook/nextjs'; + + import Component from './foo'; const meta = { component: Component @@ -37,8 +38,9 @@ describe('typescript', () => { }); expect(result).toMatchInlineSnapshot(` - "import { Example } from './foo'; - import type { Meta, StoryObj } from '@storybook/nextjs'; + "import type { Meta, StoryObj } from '@storybook/nextjs'; + + import { Example } from './foo'; const meta = { component: Example diff --git a/code/lib/core-server/src/utils/new-story-templates/typescript.ts b/code/lib/core-server/src/utils/new-story-templates/typescript.ts index 8e0093cf7858..7be9b29880ba 100644 --- a/code/lib/core-server/src/utils/new-story-templates/typescript.ts +++ b/code/lib/core-server/src/utils/new-story-templates/typescript.ts @@ -16,9 +16,10 @@ export function getTypeScriptTemplateForNewStoryFile(data: { : `import { ${importName} } from './${data.basename}'`; return dedent` - ${importStatement}; import type { Meta, StoryObj } from '${data.frameworkPackageName}'; + ${importStatement}; + const meta = { component: ${importName} } satisfies Meta From 4dc8bf4f3b78ede366adc0a6d61e60202332f642 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 8 Apr 2024 16:55:29 +0200 Subject: [PATCH 051/380] Register create-new-story-channel --- code/lib/core-server/src/presets/common-preset.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/code/lib/core-server/src/presets/common-preset.ts b/code/lib/core-server/src/presets/common-preset.ts index fbc39465aad4..f06e050f958d 100644 --- a/code/lib/core-server/src/presets/common-preset.ts +++ b/code/lib/core-server/src/presets/common-preset.ts @@ -35,6 +35,7 @@ import { parseStaticDir } from '../utils/server-statics'; import { defaultStaticDirs } from '../utils/constants'; import { sendTelemetryError } from '../withTelemetry'; import { initFileSearchChannel } from '../server-channel/file-search-channel'; +import { initCreateNewStoryChannel } from '../server-channel/create-new-story-channel'; const interpolate = (string: string, data: Record = {}) => Object.entries(data).reduce((acc, [k, v]) => acc.replace(new RegExp(`%${k}%`, 'g'), v), string); @@ -342,6 +343,7 @@ export const experimental_serverChannel = async ( }); initFileSearchChannel(channel, options); + initCreateNewStoryChannel(channel, options); return channel; }; From bc96f3917f13bc9981fcca810726f5bb63bb37dd Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Tue, 9 Apr 2024 09:32:12 +0200 Subject: [PATCH 052/380] Final refactorings --- .../create-new-story-channel.test.ts | 54 +++---------------- .../create-new-story-channel.ts | 48 ++--------------- .../src/utils/get-new-story-file.test.ts | 5 +- .../src/utils/get-story-id.test.ts | 45 ++++++++++++++++ .../lib/core-server/src/utils/get-story-id.ts | 44 +++++++++++++++ 5 files changed, 102 insertions(+), 94 deletions(-) create mode 100644 code/lib/core-server/src/utils/get-story-id.test.ts create mode 100644 code/lib/core-server/src/utils/get-story-id.ts diff --git a/code/lib/core-server/src/server-channel/create-new-story-channel.test.ts b/code/lib/core-server/src/server-channel/create-new-story-channel.test.ts index b725ed036946..0898c9fab2b2 100644 --- a/code/lib/core-server/src/server-channel/create-new-story-channel.test.ts +++ b/code/lib/core-server/src/server-channel/create-new-story-channel.test.ts @@ -1,5 +1,5 @@ import { describe, it, expect, vi, beforeEach } from 'vitest'; -import { getStoryId, initCreateNewStoryChannel } from './create-new-story-channel'; +import { initCreateNewStoryChannel } from './create-new-story-channel'; import path from 'path'; import type { ChannelTransport } from '@storybook/channels'; import { Channel } from '@storybook/channels'; @@ -15,16 +15,16 @@ vi.mock('@storybook/core-common', async (importOriginal) => { const mockFs = vi.hoisted(() => { return { - writeFileSync: vi.fn(), + writeFile: vi.fn(), }; }); -vi.mock('fs', async (importOriginal) => { - const actual = await importOriginal(); +vi.mock('fs/promises', async (importOriginal) => { + const actual = await importOriginal(); return { default: { ...actual, - writeFileSync: mockFs.writeFileSync, + writeFile: mockFs.writeFile, }, }; }); @@ -40,48 +40,6 @@ describe('createNewStoryChannel', () => { createNewStoryFileEventListener.mockClear(); }); - describe('getStoryId', () => { - it('should return the storyId', async () => { - const cwd = process.cwd(); - const options = { - configDir: path.join(cwd, '.storybook'), - presets: { - apply: (val: string) => { - if (val === 'stories') { - return Promise.resolve(['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)']); - } - }, - }, - } as any; - const storyFilePath = path.join(cwd, 'src', 'components', 'stories', 'Page1.stories.ts'); - const exportedStoryName = 'Default'; - - const storyId = await getStoryId(options, storyFilePath, exportedStoryName); - - expect(storyId).toBe('components-stories-page1--default'); - }); - - it('should throw an error if the storyId cannot be calculated', async () => { - const cwd = process.cwd(); - const options = { - configDir: path.join(cwd, '.storybook'), - presets: { - apply: (val: string) => { - if (val === 'stories') { - return Promise.resolve(['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)']); - } - }, - }, - } as any; - const storyFilePath = path.join(cwd, 'not-covered-path', 'stories', 'Page1.stories.ts'); - const exportedStoryName = 'Default'; - - await expect(() => - getStoryId(options, storyFilePath, exportedStoryName) - ).rejects.toThrowError(); - }); - }); - describe('initCreateNewStoryChannel', () => { it('should emit an event with a story id', async () => { mockChannel.addListener(CREATE_NEW_STORYFILE_RESULT, createNewStoryFileEventListener); @@ -124,7 +82,7 @@ describe('createNewStoryChannel', () => { mockChannel.addListener(CREATE_NEW_STORYFILE_RESULT, createNewStoryFileEventListener); const cwd = process.cwd(); - mockFs.writeFileSync.mockImplementation(() => { + mockFs.writeFile.mockImplementation(() => { throw new Error('Failed to write file'); }); diff --git a/code/lib/core-server/src/server-channel/create-new-story-channel.ts b/code/lib/core-server/src/server-channel/create-new-story-channel.ts index 180589ea8ce2..5a6cc70648e5 100644 --- a/code/lib/core-server/src/server-channel/create-new-story-channel.ts +++ b/code/lib/core-server/src/server-channel/create-new-story-channel.ts @@ -2,13 +2,9 @@ import type { Options } from '@storybook/types'; import type { Channel } from '@storybook/channels'; import { CREATE_NEW_STORYFILE, CREATE_NEW_STORYFILE_RESULT } from '@storybook/core-events'; import dedent from 'ts-dedent'; -import { normalizeStories, normalizeStoryPath } from '@storybook/core-common'; -import path from 'path'; -import fs from 'fs'; -import { storyNameFromExport, toId } from '@storybook/csf'; -import slash from 'slash'; -import { userOrAutoTitleFromSpecifier } from '@storybook/preview-api'; +import fs from 'fs/promises'; import { getNewStoryFile } from '../utils/get-new-story-file'; +import { getStoryId } from '../utils/get-story-id'; interface Data { // The filepath of the component for which the Story should be generated for (relative to the project root) @@ -38,11 +34,11 @@ export function initCreateNewStoryChannel(channel: Channel, options: Options) { options ); - fs.writeFileSync(storyFilePath, storyFileContent, { + await fs.writeFile(storyFilePath, storyFileContent, { encoding: 'utf-8', }); - const storyId = await getStoryId(options, storyFilePath, exportedStoryName); + const storyId = await getStoryId({ storyFilePath, exportedStoryName }, options); channel.emit(CREATE_NEW_STORYFILE_RESULT, { success: true, @@ -65,39 +61,3 @@ export function initCreateNewStoryChannel(channel: Channel, options: Options) { return channel; } - -export async function getStoryId( - options: Options, - storyFilePath: string, - exportedStoryName: string -) { - const stories = await options.presets.apply('stories', [], options); - - const workingDir = process.cwd(); - - const normalizedStories = normalizeStories(stories, { - configDir: options.configDir, - workingDir, - }); - - const relativePath = path.relative(workingDir, storyFilePath); - const importPath = slash(normalizeStoryPath(relativePath)); - - const autoTitle = normalizedStories - .map((normalizeStory) => userOrAutoTitleFromSpecifier(importPath, normalizeStory)) - .filter(Boolean)[0]; - - if (autoTitle === undefined) { - // eslint-disable-next-line local-rules/no-uncategorized-errors - throw new Error(dedent` - The generation of your new Story file was successful! But it seems that we are unable to index it. - Please make sure that the new Story file is matched by the 'stories' glob pattern in your Storybook configuration. - The location of the new Story file is: ${relativePath} - `); - } - - const storyName = storyNameFromExport(exportedStoryName); - const storyId = toId(autoTitle as string, storyName); - - return storyId; -} diff --git a/code/lib/core-server/src/utils/get-new-story-file.test.ts b/code/lib/core-server/src/utils/get-new-story-file.test.ts index 96533d243ed3..9886cd56bc35 100644 --- a/code/lib/core-server/src/utils/get-new-story-file.test.ts +++ b/code/lib/core-server/src/utils/get-new-story-file.test.ts @@ -31,8 +31,9 @@ describe('get-new-story-file', () => { expect(exportedStoryName).toBe('Default'); expect(storyFileContent).toMatchInlineSnapshot(` - "import { Page } from './Page'; - import type { Meta, StoryObj } from '@storybook/nextjs'; + "import type { Meta, StoryObj } from '@storybook/nextjs'; + + import { Page } from './Page'; const meta = { component: Page diff --git a/code/lib/core-server/src/utils/get-story-id.test.ts b/code/lib/core-server/src/utils/get-story-id.test.ts new file mode 100644 index 000000000000..4fb0230bc21e --- /dev/null +++ b/code/lib/core-server/src/utils/get-story-id.test.ts @@ -0,0 +1,45 @@ +import path from 'path'; +import { describe, expect, it } from 'vitest'; +import { getStoryId } from './get-story-id'; + +describe('getStoryId', () => { + it('should return the storyId', async () => { + const cwd = process.cwd(); + const options = { + configDir: path.join(cwd, '.storybook'), + presets: { + apply: (val: string) => { + if (val === 'stories') { + return Promise.resolve(['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)']); + } + }, + }, + } as any; + const storyFilePath = path.join(cwd, 'src', 'components', 'stories', 'Page1.stories.ts'); + const exportedStoryName = 'Default'; + + const storyId = await getStoryId({ storyFilePath, exportedStoryName }, options); + + expect(storyId).toBe('components-stories-page1--default'); + }); + + it('should throw an error if the storyId cannot be calculated', async () => { + const cwd = process.cwd(); + const options = { + configDir: path.join(cwd, '.storybook'), + presets: { + apply: (val: string) => { + if (val === 'stories') { + return Promise.resolve(['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)']); + } + }, + }, + } as any; + const storyFilePath = path.join(cwd, 'not-covered-path', 'stories', 'Page1.stories.ts'); + const exportedStoryName = 'Default'; + + await expect(() => + getStoryId({ storyFilePath, exportedStoryName }, options) + ).rejects.toThrowError(); + }); +}); diff --git a/code/lib/core-server/src/utils/get-story-id.ts b/code/lib/core-server/src/utils/get-story-id.ts new file mode 100644 index 000000000000..299a9eadaaf5 --- /dev/null +++ b/code/lib/core-server/src/utils/get-story-id.ts @@ -0,0 +1,44 @@ +import type { Options } from '@storybook/types'; +import dedent from 'ts-dedent'; +import { normalizeStories, normalizeStoryPath } from '@storybook/core-common'; +import path from 'path'; +import { storyNameFromExport, toId } from '@storybook/csf'; +import slash from 'slash'; +import { userOrAutoTitleFromSpecifier } from '@storybook/preview-api'; + +interface Data { + storyFilePath: string; + exportedStoryName: string; +} + +export async function getStoryId(data: Data, options: Options) { + const stories = await options.presets.apply('stories', [], options); + + const workingDir = process.cwd(); + + const normalizedStories = normalizeStories(stories, { + configDir: options.configDir, + workingDir, + }); + + const relativePath = path.relative(workingDir, data.storyFilePath); + const importPath = slash(normalizeStoryPath(relativePath)); + + const autoTitle = normalizedStories + .map((normalizeStory) => userOrAutoTitleFromSpecifier(importPath, normalizeStory)) + .filter(Boolean)[0]; + + if (autoTitle === undefined) { + // eslint-disable-next-line local-rules/no-uncategorized-errors + throw new Error(dedent` + The generation of your new Story file was successful! But it seems that we are unable to index it. + Please make sure that the new Story file is matched by the 'stories' glob pattern in your Storybook configuration. + The location of the new Story file is: ${relativePath} + `); + } + + const storyName = storyNameFromExport(data.exportedStoryName); + const storyId = toId(autoTitle as string, storyName); + + return storyId; +} From 520f6cde87c1128350d7b603d221dd038288ab31 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Tue, 9 Apr 2024 15:21:26 +0200 Subject: [PATCH 053/380] Fix tests on Windows --- .../src/server-channel/create-new-story-channel.test.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/lib/core-server/src/server-channel/create-new-story-channel.test.ts b/code/lib/core-server/src/server-channel/create-new-story-channel.test.ts index 0898c9fab2b2..81d53f200d82 100644 --- a/code/lib/core-server/src/server-channel/create-new-story-channel.test.ts +++ b/code/lib/core-server/src/server-channel/create-new-story-channel.test.ts @@ -9,7 +9,7 @@ vi.mock('@storybook/core-common', async (importOriginal) => { const actual = await importOriginal(); return { ...actual, - getProjectRoot: vi.fn().mockReturnValue(require('path').join(__dirname)), + getProjectRoot: vi.fn().mockReturnValue(process.cwd()), }; }); @@ -72,7 +72,7 @@ describe('createNewStoryChannel', () => { expect(createNewStoryFileEventListener).toHaveBeenCalledWith({ error: null, result: { - storyId: 'server-channel-src-components-page--default', + storyId: 'components-page--default', }, success: true, }); From 68de9efc86541b75dc337195641e2ae30aaba8da Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Tue, 9 Apr 2024 17:10:05 +0200 Subject: [PATCH 054/380] No need for 'forwards' modifier --- code/ui/components/src/components/Modal/Modal.styled.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/ui/components/src/components/Modal/Modal.styled.tsx b/code/ui/components/src/components/Modal/Modal.styled.tsx index 9a4c53e8cb22..c62722265399 100644 --- a/code/ui/components/src/components/Modal/Modal.styled.tsx +++ b/code/ui/components/src/components/Modal/Modal.styled.tsx @@ -28,7 +28,7 @@ export const Overlay = styled.div({ width: '100%', height: '100%', zIndex: 10, - animation: `${fadeIn} 200ms forwards`, + animation: `${fadeIn} 200ms`, }); export const Container = styled.div<{ width?: number; height?: number }>(({ width, height }) => ({ @@ -45,7 +45,7 @@ export const Container = styled.div<{ width?: number; height?: number }>(({ widt maxHeight: '85vh', overflow: 'hidden', zIndex: 11, - animation: `${zoomIn} 200ms forwards`, + animation: `${zoomIn} 200ms`, '&:focus-visible': { outline: 'none', From 0e52759f075a42884a07012009586caf8f15fce6 Mon Sep 17 00:00:00 2001 From: shuta13 Date: Wed, 10 Apr 2024 12:44:14 +0900 Subject: [PATCH 055/380] fix: move sharp into optional deps --- code/frameworks/nextjs/package.json | 4 +- .../nextjs/src/next-image-loader-stub.ts | 32 +- code/yarn.lock | 454 ++++++++++-------- 3 files changed, 288 insertions(+), 202 deletions(-) diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index b918ba86c2a0..7e3f13934fb6 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -114,7 +114,6 @@ "resolve-url-loader": "^5.0.0", "sass-loader": "^12.4.0", "semver": "^7.3.5", - "sharp": "^0.32.6", "style-loader": "^3.3.1", "styled-jsx": "5.1.1", "ts-dedent": "^2.0.0", @@ -132,6 +131,9 @@ "typescript": "^5.3.2", "webpack": "^5.65.0" }, + "optionalDependencies": { + "sharp": "^0.33.3" + }, "peerDependencies": { "next": "^13.5.0 || ^14.0.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0", diff --git a/code/frameworks/nextjs/src/next-image-loader-stub.ts b/code/frameworks/nextjs/src/next-image-loader-stub.ts index 6f69e8e274d3..464b03797dc0 100644 --- a/code/frameworks/nextjs/src/next-image-loader-stub.ts +++ b/code/frameworks/nextjs/src/next-image-loader-stub.ts @@ -2,7 +2,6 @@ import { interpolateName } from 'loader-utils'; import imageSizeOf from 'image-size'; import type { RawLoaderDefinition } from 'webpack'; import type { NextConfig } from 'next'; -import sharp from 'sharp'; import { cpus } from 'os'; interface LoaderOptions { @@ -10,10 +9,19 @@ interface LoaderOptions { nextConfig: NextConfig; } -if (sharp.concurrency() > 1) { - // Reducing concurrency reduces the memory usage too. - const divisor = process.env.NODE_ENV === 'development' ? 4 : 2; - sharp.concurrency(Math.floor(Math.max(cpus().length / divisor, 1))); +let sharp: typeof import('sharp') | undefined; + +try { + sharp = require('sharp'); + if (sharp && sharp.concurrency() > 1) { + // Reducing concurrency reduces the memory usage too. + const divisor = process.env.NODE_ENV === 'development' ? 4 : 2; + sharp.concurrency(Math.floor(Math.max(cpus().length / divisor, 1))); + } +} catch (e) { + console.warn( + 'You have to install sharp in order to use image optimization features in Next.js. AVIF support is also disabled.' + ); } const nextImageLoaderStub: RawLoaderDefinition = async function NextImageLoader( @@ -37,10 +45,16 @@ const nextImageLoaderStub: RawLoaderDefinition = async function N let height; if (extension === 'avif') { - const transformer = sharp(content); - const result = await transformer.metadata(); - width = result.width; - height = result.height; + if (sharp) { + const transformer = sharp(content); + const result = await transformer.metadata(); + width = result.width; + height = result.height; + } else { + throw new Error( + 'You have to install sharp in order to use image optimization features in Next.js.' + ); + } } else { const result = imageSizeOf(this.resourcePath); width = result.width; diff --git a/code/yarn.lock b/code/yarn.lock index 7be8a5f1fd96..831b37de985a 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -2213,6 +2213,15 @@ __metadata: languageName: node linkType: hard +"@emnapi/runtime@npm:^1.1.0": + version: 1.1.1 + resolution: "@emnapi/runtime@npm:1.1.1" + dependencies: + tslib: "npm:^2.4.0" + checksum: 10c0/c11ee57abf0ec643e64ccdace4b4fcc0b0c7b1117a191f969e84ae3669841aa90d2c17fa35b73f5a66fc0c843c8caca7bf11187faaeaa526bcfb7dbfb9b85de9 + languageName: node + linkType: hard + "@emotion/babel-plugin@npm:^11.11.0": version: 11.11.0 resolution: "@emotion/babel-plugin@npm:11.11.0" @@ -3143,6 +3152,181 @@ __metadata: languageName: node linkType: hard +"@img/sharp-darwin-arm64@npm:0.33.3": + version: 0.33.3 + resolution: "@img/sharp-darwin-arm64@npm:0.33.3" + dependencies: + "@img/sharp-libvips-darwin-arm64": "npm:1.0.2" + dependenciesMeta: + "@img/sharp-libvips-darwin-arm64": + optional: true + conditions: os=darwin & cpu=arm64 + languageName: node + linkType: hard + +"@img/sharp-darwin-x64@npm:0.33.3": + version: 0.33.3 + resolution: "@img/sharp-darwin-x64@npm:0.33.3" + dependencies: + "@img/sharp-libvips-darwin-x64": "npm:1.0.2" + dependenciesMeta: + "@img/sharp-libvips-darwin-x64": + optional: true + conditions: os=darwin & cpu=x64 + languageName: node + linkType: hard + +"@img/sharp-libvips-darwin-arm64@npm:1.0.2": + version: 1.0.2 + resolution: "@img/sharp-libvips-darwin-arm64@npm:1.0.2" + conditions: os=darwin & cpu=arm64 + languageName: node + linkType: hard + +"@img/sharp-libvips-darwin-x64@npm:1.0.2": + version: 1.0.2 + resolution: "@img/sharp-libvips-darwin-x64@npm:1.0.2" + conditions: os=darwin & cpu=x64 + languageName: node + linkType: hard + +"@img/sharp-libvips-linux-arm64@npm:1.0.2": + version: 1.0.2 + resolution: "@img/sharp-libvips-linux-arm64@npm:1.0.2" + conditions: os=linux & cpu=arm64 & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-libvips-linux-arm@npm:1.0.2": + version: 1.0.2 + resolution: "@img/sharp-libvips-linux-arm@npm:1.0.2" + conditions: os=linux & cpu=arm & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-libvips-linux-s390x@npm:1.0.2": + version: 1.0.2 + resolution: "@img/sharp-libvips-linux-s390x@npm:1.0.2" + conditions: os=linux & cpu=s390x & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-libvips-linux-x64@npm:1.0.2": + version: 1.0.2 + resolution: "@img/sharp-libvips-linux-x64@npm:1.0.2" + conditions: os=linux & cpu=x64 & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-libvips-linuxmusl-arm64@npm:1.0.2": + version: 1.0.2 + resolution: "@img/sharp-libvips-linuxmusl-arm64@npm:1.0.2" + conditions: os=linux & cpu=arm64 & libc=musl + languageName: node + linkType: hard + +"@img/sharp-libvips-linuxmusl-x64@npm:1.0.2": + version: 1.0.2 + resolution: "@img/sharp-libvips-linuxmusl-x64@npm:1.0.2" + conditions: os=linux & cpu=x64 & libc=musl + languageName: node + linkType: hard + +"@img/sharp-linux-arm64@npm:0.33.3": + version: 0.33.3 + resolution: "@img/sharp-linux-arm64@npm:0.33.3" + dependencies: + "@img/sharp-libvips-linux-arm64": "npm:1.0.2" + dependenciesMeta: + "@img/sharp-libvips-linux-arm64": + optional: true + conditions: os=linux & cpu=arm64 & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-linux-arm@npm:0.33.3": + version: 0.33.3 + resolution: "@img/sharp-linux-arm@npm:0.33.3" + dependencies: + "@img/sharp-libvips-linux-arm": "npm:1.0.2" + dependenciesMeta: + "@img/sharp-libvips-linux-arm": + optional: true + conditions: os=linux & cpu=arm & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-linux-s390x@npm:0.33.3": + version: 0.33.3 + resolution: "@img/sharp-linux-s390x@npm:0.33.3" + dependencies: + "@img/sharp-libvips-linux-s390x": "npm:1.0.2" + dependenciesMeta: + "@img/sharp-libvips-linux-s390x": + optional: true + conditions: os=linux & cpu=s390x & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-linux-x64@npm:0.33.3": + version: 0.33.3 + resolution: "@img/sharp-linux-x64@npm:0.33.3" + dependencies: + "@img/sharp-libvips-linux-x64": "npm:1.0.2" + dependenciesMeta: + "@img/sharp-libvips-linux-x64": + optional: true + conditions: os=linux & cpu=x64 & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-linuxmusl-arm64@npm:0.33.3": + version: 0.33.3 + resolution: "@img/sharp-linuxmusl-arm64@npm:0.33.3" + dependencies: + "@img/sharp-libvips-linuxmusl-arm64": "npm:1.0.2" + dependenciesMeta: + "@img/sharp-libvips-linuxmusl-arm64": + optional: true + conditions: os=linux & cpu=arm64 & libc=musl + languageName: node + linkType: hard + +"@img/sharp-linuxmusl-x64@npm:0.33.3": + version: 0.33.3 + resolution: "@img/sharp-linuxmusl-x64@npm:0.33.3" + dependencies: + "@img/sharp-libvips-linuxmusl-x64": "npm:1.0.2" + dependenciesMeta: + "@img/sharp-libvips-linuxmusl-x64": + optional: true + conditions: os=linux & cpu=x64 & libc=musl + languageName: node + linkType: hard + +"@img/sharp-wasm32@npm:0.33.3": + version: 0.33.3 + resolution: "@img/sharp-wasm32@npm:0.33.3" + dependencies: + "@emnapi/runtime": "npm:^1.1.0" + conditions: cpu=wasm32 + languageName: node + linkType: hard + +"@img/sharp-win32-ia32@npm:0.33.3": + version: 0.33.3 + resolution: "@img/sharp-win32-ia32@npm:0.33.3" + conditions: os=win32 & cpu=ia32 + languageName: node + linkType: hard + +"@img/sharp-win32-x64@npm:0.33.3": + version: 0.33.3 + resolution: "@img/sharp-win32-x64@npm:0.33.3" + conditions: os=win32 & cpu=x64 + languageName: node + linkType: hard + "@isaacs/cliui@npm:^8.0.2": version: 8.0.2 resolution: "@isaacs/cliui@npm:8.0.2" @@ -5971,7 +6155,7 @@ __metadata: resolve-url-loader: "npm:^5.0.0" sass-loader: "npm:^12.4.0" semver: "npm:^7.3.5" - sharp: "npm:^0.32.6" + sharp: "npm:^0.33.3" style-loader: "npm:^3.3.1" styled-jsx: "npm:5.1.1" ts-dedent: "npm:^2.0.0" @@ -5984,6 +6168,9 @@ __metadata: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 webpack: ^5.0.0 + dependenciesMeta: + sharp: + optional: true peerDependenciesMeta: typescript: optional: true @@ -10000,13 +10187,6 @@ __metadata: languageName: node linkType: hard -"b4a@npm:^1.6.4": - version: 1.6.4 - resolution: "b4a@npm:1.6.4" - checksum: 10c0/a0af707430c3643fd8d9418c732849d3626f1c9281489e021fcad969fb4808fb9f67b224de36b59c9c3b5a13d853482fee0c0eb53f7aec12d540fa67f63648b6 - languageName: node - linkType: hard - "babel-core@npm:^7.0.0-bridge.0": version: 7.0.0-bridge.0 resolution: "babel-core@npm:7.0.0-bridge.0" @@ -12522,13 +12702,6 @@ __metadata: languageName: node linkType: hard -"deep-extend@npm:^0.6.0": - version: 0.6.0 - resolution: "deep-extend@npm:0.6.0" - checksum: 10c0/1c6b0abcdb901e13a44c7d699116d3d4279fdb261983122a3783e7273844d5f2537dc2e1c454a23fcf645917f93fbf8d07101c1d03c015a87faa662755212566 - languageName: node - linkType: hard - "deep-is@npm:^0.1.3": version: 0.1.4 resolution: "deep-is@npm:0.1.4" @@ -12745,10 +12918,10 @@ __metadata: languageName: node linkType: hard -"detect-libc@npm:^2.0.0, detect-libc@npm:^2.0.2": - version: 2.0.2 - resolution: "detect-libc@npm:2.0.2" - checksum: 10c0/a9f4ffcd2701525c589617d98afe5a5d0676c8ea82bcc4ed6f3747241b79f781d36437c59a5e855254c864d36a3e9f8276568b6b531c28d6e53b093a15703f11 +"detect-libc@npm:^2.0.3": + version: 2.0.3 + resolution: "detect-libc@npm:2.0.3" + checksum: 10c0/88095bda8f90220c95f162bf92cad70bd0e424913e655c20578600e35b91edc261af27531cf160a331e185c0ced93944bc7e09939143225f56312d7fd800fdb7 languageName: node linkType: hard @@ -14571,13 +14744,6 @@ __metadata: languageName: node linkType: hard -"expand-template@npm:^2.0.3": - version: 2.0.3 - resolution: "expand-template@npm:2.0.3" - checksum: 10c0/1c9e7afe9acadf9d373301d27f6a47b34e89b3391b1ef38b7471d381812537ef2457e620ae7f819d2642ce9c43b189b3583813ec395e2938319abe356a9b2f51 - languageName: node - linkType: hard - "expand-tilde@npm:^2.0.2": version: 2.0.2 resolution: "expand-tilde@npm:2.0.2" @@ -14707,13 +14873,6 @@ __metadata: languageName: node linkType: hard -"fast-fifo@npm:^1.1.0, fast-fifo@npm:^1.2.0": - version: 1.3.2 - resolution: "fast-fifo@npm:1.3.2" - checksum: 10c0/d53f6f786875e8b0529f784b59b4b05d4b5c31c651710496440006a398389a579c8dbcd2081311478b5bf77f4b0b21de69109c5a4eabea9d8e8783d1eb864e4c - languageName: node - linkType: hard - "fast-glob@npm:3.2.7": version: 3.2.7 resolution: "fast-glob@npm:3.2.7" @@ -15764,13 +15923,6 @@ __metadata: languageName: node linkType: hard -"github-from-package@npm:0.0.0": - version: 0.0.0 - resolution: "github-from-package@npm:0.0.0" - checksum: 10c0/737ee3f52d0a27e26332cde85b533c21fcdc0b09fb716c3f8e522cfaa9c600d4a631dec9fcde179ec9d47cca89017b7848ed4d6ae6b6b78f936c06825b1fcc12 - languageName: node - linkType: hard - "github-release-from-changelog@npm:^2.1.1": version: 2.1.1 resolution: "github-release-from-changelog@npm:2.1.1" @@ -17011,7 +17163,7 @@ __metadata: languageName: node linkType: hard -"ini@npm:^1.3.4, ini@npm:^1.3.5, ini@npm:~1.3.0": +"ini@npm:^1.3.4, ini@npm:^1.3.5": version: 1.3.8 resolution: "ini@npm:1.3.8" checksum: 10c0/ec93838d2328b619532e4f1ff05df7909760b6f66d9c9e2ded11e5c1897d6f2f9980c54dd638f88654b00919ce31e827040631eab0a3969e4d1abefa0719516a @@ -20555,7 +20707,7 @@ __metadata: languageName: node linkType: hard -"minimist@npm:^1.0.0, minimist@npm:^1.2.0, minimist@npm:^1.2.3, minimist@npm:^1.2.5, minimist@npm:^1.2.6, minimist@npm:^1.2.8": +"minimist@npm:^1.0.0, minimist@npm:^1.2.0, minimist@npm:^1.2.5, minimist@npm:^1.2.6, minimist@npm:^1.2.8": version: 1.2.8 resolution: "minimist@npm:1.2.8" checksum: 10c0/19d3fcdca050087b84c2029841a093691a91259a47def2f18222f41e7645a0b7c44ef4b40e88a1e58a40c84d2ef0ee6047c55594d298146d0eb3f6b737c20ce6 @@ -20690,7 +20842,7 @@ __metadata: languageName: node linkType: hard -"mkdirp-classic@npm:^0.5.2, mkdirp-classic@npm:^0.5.3": +"mkdirp-classic@npm:^0.5.2": version: 0.5.3 resolution: "mkdirp-classic@npm:0.5.3" checksum: 10c0/95371d831d196960ddc3833cc6907e6b8f67ac5501a6582f47dfae5eb0f092e9f8ce88e0d83afcae95d6e2b61a01741ba03714eeafb6f7a6e9dcc158ac85b168 @@ -20871,13 +21023,6 @@ __metadata: languageName: node linkType: hard -"napi-build-utils@npm:^1.0.1": - version: 1.0.2 - resolution: "napi-build-utils@npm:1.0.2" - checksum: 10c0/37fd2cd0ff2ad20073ce78d83fd718a740d568b225924e753ae51cb69d68f330c80544d487e5e5bd18e28702ed2ca469c2424ad948becd1862c1b0209542b2e9 - languageName: node - linkType: hard - "natural-compare@npm:^1.4.0": version: 1.4.0 resolution: "natural-compare@npm:1.4.0" @@ -20995,15 +21140,6 @@ __metadata: languageName: node linkType: hard -"node-abi@npm:^3.3.0": - version: 3.51.0 - resolution: "node-abi@npm:3.51.0" - dependencies: - semver: "npm:^7.3.5" - checksum: 10c0/2f0a56a9923bd21ff13650b6e8d2caebda211795761b40ae0ec3ea08e6687f6722535302cde87c928d6959a6afec196db3c54f8ae2db0bbaa401459dcf0f073c - languageName: node - linkType: hard - "node-abort-controller@npm:^3.0.1": version: 3.1.1 resolution: "node-abort-controller@npm:3.1.1" @@ -21020,15 +21156,6 @@ __metadata: languageName: node linkType: hard -"node-addon-api@npm:^6.1.0": - version: 6.1.0 - resolution: "node-addon-api@npm:6.1.0" - dependencies: - node-gyp: "npm:latest" - checksum: 10c0/d2699c4ad15740fd31482a3b6fca789af7723ab9d393adc6ac45250faaee72edad8f0b10b2b9d087df0de93f1bdc16d97afdd179b26b9ebc9ed68b569faa4bac - languageName: node - linkType: hard - "node-cleanup@npm:^2.1.2": version: 2.1.2 resolution: "node-cleanup@npm:2.1.2" @@ -22859,28 +22986,6 @@ __metadata: languageName: node linkType: hard -"prebuild-install@npm:^7.1.1": - version: 7.1.1 - resolution: "prebuild-install@npm:7.1.1" - dependencies: - detect-libc: "npm:^2.0.0" - expand-template: "npm:^2.0.3" - github-from-package: "npm:0.0.0" - minimist: "npm:^1.2.3" - mkdirp-classic: "npm:^0.5.3" - napi-build-utils: "npm:^1.0.1" - node-abi: "npm:^3.3.0" - pump: "npm:^3.0.0" - rc: "npm:^1.2.7" - simple-get: "npm:^4.0.0" - tar-fs: "npm:^2.0.0" - tunnel-agent: "npm:^0.6.0" - bin: - prebuild-install: bin.js - checksum: 10c0/6dc70f36b0f4adcb2fe0ed38d874ab28b571fb1a9725d769e8ba3f64a15831e58462de09f3e6e64569bcc4a3e03b9328b56faa0d45fe10ae1574478814536c76 - languageName: node - linkType: hard - "prelude-ls@npm:^1.2.1": version: 1.2.1 resolution: "prelude-ls@npm:1.2.1" @@ -23386,13 +23491,6 @@ __metadata: languageName: node linkType: hard -"queue-tick@npm:^1.0.1": - version: 1.0.1 - resolution: "queue-tick@npm:1.0.1" - checksum: 10c0/0db998e2c9b15215317dbcf801e9b23e6bcde4044e115155dae34f8e7454b9a783f737c9a725528d677b7a66c775eb7a955cf144fe0b87f62b575ce5bfd515a9 - languageName: node - linkType: hard - "queue@npm:6.0.2": version: 6.0.2 resolution: "queue@npm:6.0.2" @@ -23474,20 +23572,6 @@ __metadata: languageName: node linkType: hard -"rc@npm:^1.2.7": - version: 1.2.8 - resolution: "rc@npm:1.2.8" - dependencies: - deep-extend: "npm:^0.6.0" - ini: "npm:~1.3.0" - minimist: "npm:^1.2.0" - strip-json-comments: "npm:~2.0.1" - bin: - rc: ./cli.js - checksum: 10c0/24a07653150f0d9ac7168e52943cc3cb4b7a22c0e43c7dff3219977c2fdca5a2760a304a029c20811a0e79d351f57d46c9bde216193a0f73978496afc2b85b15 - languageName: node - linkType: hard - "react-colorful@npm:^5.1.2": version: 5.6.1 resolution: "react-colorful@npm:5.6.1" @@ -25306,7 +25390,7 @@ __metadata: languageName: node linkType: hard -"semver@npm:7.6.0, semver@npm:^7.0.0, semver@npm:^7.1.1, semver@npm:^7.2.1, semver@npm:^7.3.4, semver@npm:^7.3.5, semver@npm:^7.3.7, semver@npm:^7.3.8, semver@npm:^7.5.3, semver@npm:^7.5.4": +"semver@npm:7.6.0, semver@npm:^7.0.0, semver@npm:^7.1.1, semver@npm:^7.2.1, semver@npm:^7.3.4, semver@npm:^7.3.5, semver@npm:^7.3.7, semver@npm:^7.3.8, semver@npm:^7.5.3, semver@npm:^7.5.4, semver@npm:^7.6.0": version: 7.6.0 resolution: "semver@npm:7.6.0" dependencies: @@ -25477,20 +25561,72 @@ __metadata: languageName: node linkType: hard -"sharp@npm:^0.32.6": - version: 0.32.6 - resolution: "sharp@npm:0.32.6" - dependencies: +"sharp@npm:^0.33.3": + version: 0.33.3 + resolution: "sharp@npm:0.33.3" + dependencies: + "@img/sharp-darwin-arm64": "npm:0.33.3" + "@img/sharp-darwin-x64": "npm:0.33.3" + "@img/sharp-libvips-darwin-arm64": "npm:1.0.2" + "@img/sharp-libvips-darwin-x64": "npm:1.0.2" + "@img/sharp-libvips-linux-arm": "npm:1.0.2" + "@img/sharp-libvips-linux-arm64": "npm:1.0.2" + "@img/sharp-libvips-linux-s390x": "npm:1.0.2" + "@img/sharp-libvips-linux-x64": "npm:1.0.2" + "@img/sharp-libvips-linuxmusl-arm64": "npm:1.0.2" + "@img/sharp-libvips-linuxmusl-x64": "npm:1.0.2" + "@img/sharp-linux-arm": "npm:0.33.3" + "@img/sharp-linux-arm64": "npm:0.33.3" + "@img/sharp-linux-s390x": "npm:0.33.3" + "@img/sharp-linux-x64": "npm:0.33.3" + "@img/sharp-linuxmusl-arm64": "npm:0.33.3" + "@img/sharp-linuxmusl-x64": "npm:0.33.3" + "@img/sharp-wasm32": "npm:0.33.3" + "@img/sharp-win32-ia32": "npm:0.33.3" + "@img/sharp-win32-x64": "npm:0.33.3" color: "npm:^4.2.3" - detect-libc: "npm:^2.0.2" - node-addon-api: "npm:^6.1.0" - node-gyp: "npm:latest" - prebuild-install: "npm:^7.1.1" - semver: "npm:^7.5.4" - simple-get: "npm:^4.0.1" - tar-fs: "npm:^3.0.4" - tunnel-agent: "npm:^0.6.0" - checksum: 10c0/f6a756fec5051ef2f9341e0543cde1da4e822982dd5398010baad92e2262bd177e08b753eb19b2fbee30f2fcb0e8756f24088fafc48293a364e9a8f8dc65a300 + detect-libc: "npm:^2.0.3" + semver: "npm:^7.6.0" + dependenciesMeta: + "@img/sharp-darwin-arm64": + optional: true + "@img/sharp-darwin-x64": + optional: true + "@img/sharp-libvips-darwin-arm64": + optional: true + "@img/sharp-libvips-darwin-x64": + optional: true + "@img/sharp-libvips-linux-arm": + optional: true + "@img/sharp-libvips-linux-arm64": + optional: true + "@img/sharp-libvips-linux-s390x": + optional: true + "@img/sharp-libvips-linux-x64": + optional: true + "@img/sharp-libvips-linuxmusl-arm64": + optional: true + "@img/sharp-libvips-linuxmusl-x64": + optional: true + "@img/sharp-linux-arm": + optional: true + "@img/sharp-linux-arm64": + optional: true + "@img/sharp-linux-s390x": + optional: true + "@img/sharp-linux-x64": + optional: true + "@img/sharp-linuxmusl-arm64": + optional: true + "@img/sharp-linuxmusl-x64": + optional: true + "@img/sharp-wasm32": + optional: true + "@img/sharp-win32-ia32": + optional: true + "@img/sharp-win32-x64": + optional: true + checksum: 10c0/12f5203426595b4e64c807162a6d52358b591d25fbb414a51fe38861584759fba38485be951ed98d15be3dfe21f2def5336f78ca35bf8bbd22d88cc78ca03f2a languageName: node linkType: hard @@ -25588,24 +25724,6 @@ __metadata: languageName: node linkType: hard -"simple-concat@npm:^1.0.0": - version: 1.0.1 - resolution: "simple-concat@npm:1.0.1" - checksum: 10c0/62f7508e674414008910b5397c1811941d457dfa0db4fd5aa7fa0409eb02c3609608dfcd7508cace75b3a0bf67a2a77990711e32cd213d2c76f4fd12ee86d776 - languageName: node - linkType: hard - -"simple-get@npm:^4.0.0, simple-get@npm:^4.0.1": - version: 4.0.1 - resolution: "simple-get@npm:4.0.1" - dependencies: - decompress-response: "npm:^6.0.0" - once: "npm:^1.3.1" - simple-concat: "npm:^1.0.0" - checksum: 10c0/b0649a581dbca741babb960423248899203165769747142033479a7dc5e77d7b0fced0253c731cd57cf21e31e4d77c9157c3069f4448d558ebc96cf9e1eebcf0 - languageName: node - linkType: hard - "simple-swizzle@npm:^0.2.2": version: 0.2.2 resolution: "simple-swizzle@npm:0.2.2" @@ -26157,16 +26275,6 @@ __metadata: languageName: node linkType: hard -"streamx@npm:^2.15.0": - version: 2.15.1 - resolution: "streamx@npm:2.15.1" - dependencies: - fast-fifo: "npm:^1.1.0" - queue-tick: "npm:^1.0.1" - checksum: 10c0/e3b0e997726a2a499e1069efea7d720e54fc262011dfcb32e6704f90b5a31bb55b8f48964649d787be03d8718dcf9aa413d24ce48823d92fcbad06a3c337ec61 - languageName: node - linkType: hard - "strict-uri-encode@npm:^2.0.0": version: 2.0.0 resolution: "strict-uri-encode@npm:2.0.0" @@ -26397,13 +26505,6 @@ __metadata: languageName: node linkType: hard -"strip-json-comments@npm:~2.0.1": - version: 2.0.1 - resolution: "strip-json-comments@npm:2.0.1" - checksum: 10c0/b509231cbdee45064ff4f9fd73609e2bcc4e84a4d508e9dd0f31f70356473fde18abfb5838c17d56fb236f5a06b102ef115438de0600b749e818a35fbbc48c43 - languageName: node - linkType: hard - "strip-literal@npm:^1.3.0": version: 1.3.0 resolution: "strip-literal@npm:1.3.0" @@ -26751,7 +26852,7 @@ __metadata: languageName: node linkType: hard -"tar-fs@npm:^2.0.0, tar-fs@npm:^2.1.1": +"tar-fs@npm:^2.1.1": version: 2.1.1 resolution: "tar-fs@npm:2.1.1" dependencies: @@ -26763,17 +26864,6 @@ __metadata: languageName: node linkType: hard -"tar-fs@npm:^3.0.4": - version: 3.0.4 - resolution: "tar-fs@npm:3.0.4" - dependencies: - mkdirp-classic: "npm:^0.5.2" - pump: "npm:^3.0.0" - tar-stream: "npm:^3.1.5" - checksum: 10c0/120f026d891e5b4f7147a5ae5816e3a9b7f2c5b4ca61714dab3fe1244961607dccca40c11cafc584e625838c57d1308da5bb28b13d70b85ab566bc4c9f1c88b1 - languageName: node - linkType: hard - "tar-stream@npm:^2.1.4, tar-stream@npm:~2.2.0": version: 2.2.0 resolution: "tar-stream@npm:2.2.0" @@ -26787,17 +26877,6 @@ __metadata: languageName: node linkType: hard -"tar-stream@npm:^3.1.5": - version: 3.1.6 - resolution: "tar-stream@npm:3.1.6" - dependencies: - b4a: "npm:^1.6.4" - fast-fifo: "npm:^1.2.0" - streamx: "npm:^2.15.0" - checksum: 10c0/7d52d1a56eb25b8434c9544becb737eb6c4f0ed19d205e739fdd2537ad8d1d623a6c93f7f8e58d9028cb0cdf86c0d8b67164e070cd1702cc78b8ab7cba0f3702 - languageName: node - linkType: hard - "tar@npm:^6.1.11, tar@npm:^6.1.2, tar@npm:^6.2.0": version: 6.2.0 resolution: "tar@npm:6.2.0" @@ -27410,15 +27489,6 @@ __metadata: languageName: node linkType: hard -"tunnel-agent@npm:^0.6.0": - version: 0.6.0 - resolution: "tunnel-agent@npm:0.6.0" - dependencies: - safe-buffer: "npm:^5.0.1" - checksum: 10c0/4c7a1b813e7beae66fdbf567a65ec6d46313643753d0beefb3c7973d66fcec3a1e7f39759f0a0b4465883499c6dc8b0750ab8b287399af2e583823e40410a17a - languageName: node - linkType: hard - "tween-functions@npm:^1.2.0": version: 1.2.0 resolution: "tween-functions@npm:1.2.0" From 9fbf59b4d22bae9c76c2a3f0603a4689619522e4 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 10 Apr 2024 09:58:26 +0200 Subject: [PATCH 056/380] find the AST node successfully --- .../lib/core-server/src/utils/get-story-id.ts | 44 ++++++++++++++++++ .../src/utils/save-from-controls.ts | 38 +++++++++++---- code/ui/.storybook/manager.tsx | 46 ++++++++++++++++++- code/ui/manager/src/globals/exports.ts | 2 + 4 files changed, 120 insertions(+), 10 deletions(-) create mode 100644 code/lib/core-server/src/utils/get-story-id.ts diff --git a/code/lib/core-server/src/utils/get-story-id.ts b/code/lib/core-server/src/utils/get-story-id.ts new file mode 100644 index 000000000000..299a9eadaaf5 --- /dev/null +++ b/code/lib/core-server/src/utils/get-story-id.ts @@ -0,0 +1,44 @@ +import type { Options } from '@storybook/types'; +import dedent from 'ts-dedent'; +import { normalizeStories, normalizeStoryPath } from '@storybook/core-common'; +import path from 'path'; +import { storyNameFromExport, toId } from '@storybook/csf'; +import slash from 'slash'; +import { userOrAutoTitleFromSpecifier } from '@storybook/preview-api'; + +interface Data { + storyFilePath: string; + exportedStoryName: string; +} + +export async function getStoryId(data: Data, options: Options) { + const stories = await options.presets.apply('stories', [], options); + + const workingDir = process.cwd(); + + const normalizedStories = normalizeStories(stories, { + configDir: options.configDir, + workingDir, + }); + + const relativePath = path.relative(workingDir, data.storyFilePath); + const importPath = slash(normalizeStoryPath(relativePath)); + + const autoTitle = normalizedStories + .map((normalizeStory) => userOrAutoTitleFromSpecifier(importPath, normalizeStory)) + .filter(Boolean)[0]; + + if (autoTitle === undefined) { + // eslint-disable-next-line local-rules/no-uncategorized-errors + throw new Error(dedent` + The generation of your new Story file was successful! But it seems that we are unable to index it. + Please make sure that the new Story file is matched by the 'stories' glob pattern in your Storybook configuration. + The location of the new Story file is: ${relativePath} + `); + } + + const storyName = storyNameFromExport(data.exportedStoryName); + const storyId = toId(autoTitle as string, storyName); + + return storyId; +} diff --git a/code/lib/core-server/src/utils/save-from-controls.ts b/code/lib/core-server/src/utils/save-from-controls.ts index 9b14ed0295dd..2ebeea309fbe 100644 --- a/code/lib/core-server/src/utils/save-from-controls.ts +++ b/code/lib/core-server/src/utils/save-from-controls.ts @@ -1,8 +1,10 @@ +/* eslint-disable no-underscore-dangle */ import type { CoreConfig } from '@storybook/types'; import type { Channel } from '@storybook/channels'; import { SAVE_STORY_REQUEST, SAVE_STORY_RESULT } from '@storybook/core-events'; import type { OptionsWithRequiredCache } from './whats-new'; import { readCsf, writeCsf } from '@storybook/csf-tools'; +import { join } from 'path'; // import { sendTelemetryError } from '../withTelemetry'; interface RequestSaveStoryPayload { @@ -13,7 +15,7 @@ interface RequestSaveStoryPayload { // The updated list of set args args: Record; // The exported name of the Story -> This information doesn't exist in the index.json yet. - name: string; + name?: string; } export function initializeSaveFromControls( @@ -22,32 +24,50 @@ export function initializeSaveFromControls( coreOptions: CoreConfig ) { channel.on(SAVE_STORY_REQUEST, async (data: RequestSaveStoryPayload) => { + console.log('SAVE_STORY_REQUEST', data); + const id = data.id.split('--')[1]; try { + const location = join(process.cwd(), data.importPath); + console.log({ location }); // open the story file - const csf = await readCsf(data.importPath, { makeTitle: () => data.name }); + const csf = await readCsf(location, { + makeTitle: (userTitle: string) => userTitle, + }); + const parsed = csf.parse(); + // console.log(parsed._stories); // find the AST node for the story - const found = !!parsed.stories.find((s) => s.id === data.id); - let node = csf.getStoryExport(data.id); + + const [name, result] = + Object.entries(parsed._stories).find(([key, value]) => value.id.endsWith(`--${id}`)) || []; + + console.log({ name, result }); + let node; // if none can be found, create one - if (!found) { - // @ts-expect-error (TODO) + if (!name) { node = undefined; throw new Error(`creation of new story: not yet implemented`); + } else { + node = csf.getStoryExport(name); } // modify the AST node with the new args // node + console.log({ node }); // save the file - await writeCsf(csf); + await writeCsf(csf, location); channel.emit(SAVE_STORY_RESULT, { id: data.id, success: true }); - } catch (e) { + } catch (e: any) { // sendTelemetryError(channel, e); - channel.emit(SAVE_STORY_RESULT, { id: data.id, success: false }); + channel.emit(SAVE_STORY_RESULT, { + id: data.id, + success: false, + error: e.stack || e.message || e.toString(), + }); } }); } diff --git a/code/ui/.storybook/manager.tsx b/code/ui/.storybook/manager.tsx index 7cdbda8d32e9..49962eefa8d1 100644 --- a/code/ui/.storybook/manager.tsx +++ b/code/ui/.storybook/manager.tsx @@ -1,9 +1,53 @@ import React from 'react'; -import { addons, types } from '@storybook/manager-api'; +import { addons, types, useArgs } from '@storybook/manager-api'; import startCase from 'lodash/startCase.js'; +import { add } from 'lodash'; +import { SAVE_STORY_REQUEST } from '@storybook/core-events'; +import { satisfies } from 'semver'; addons.setConfig({ sidebar: { renderLabel: ({ name, type }) => (type === 'story' ? name : startCase(name)), }, }); + +interface RequestSaveStoryPayload { + // The id of the request. It might be simply the story Title + id: string; + // The path of the Story + importPath: string; + // The updated list of set args + args: Record; + // The exported name of the Story -> This information doesn't exist in the index.json yet. + name: string; +} + +addons.register('my-addon', (api) => { + addons.add('my-addon/panel', { + type: types.PANEL, + title: 'My Addon', + render: ({ active }) => { + const [args] = useArgs(); + + return active ? ( +
+ +
+ ) : null; + }, + }); +}); diff --git a/code/ui/manager/src/globals/exports.ts b/code/ui/manager/src/globals/exports.ts index 73881b9b5919..124d0a0cd64e 100644 --- a/code/ui/manager/src/globals/exports.ts +++ b/code/ui/manager/src/globals/exports.ts @@ -148,6 +148,8 @@ export default { 'REQUEST_WHATS_NEW_DATA', 'RESET_STORY_ARGS', 'RESULT_WHATS_NEW_DATA', + 'SAVE_STORY_REQUEST', + 'SAVE_STORY_RESULT', 'SELECT_STORY', 'SET_CONFIG', 'SET_CURRENT_STORY', From 9c8864ec5eddf8bd3a060667f48dc129ec5c1595 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 10 Apr 2024 10:16:16 +0200 Subject: [PATCH 057/380] cleanup --- .../core-server/src/utils/save-from-controls.ts | 15 ++++++--------- code/ui/.storybook/manager.tsx | 10 +++++++++- 2 files changed, 15 insertions(+), 10 deletions(-) diff --git a/code/lib/core-server/src/utils/save-from-controls.ts b/code/lib/core-server/src/utils/save-from-controls.ts index 2ebeea309fbe..92fccee89a40 100644 --- a/code/lib/core-server/src/utils/save-from-controls.ts +++ b/code/lib/core-server/src/utils/save-from-controls.ts @@ -24,28 +24,24 @@ export function initializeSaveFromControls( coreOptions: CoreConfig ) { channel.on(SAVE_STORY_REQUEST, async (data: RequestSaveStoryPayload) => { - console.log('SAVE_STORY_REQUEST', data); const id = data.id.split('--')[1]; try { const location = join(process.cwd(), data.importPath); - console.log({ location }); + // open the story file const csf = await readCsf(location, { makeTitle: (userTitle: string) => userTitle, }); const parsed = csf.parse(); - // console.log(parsed._stories); - - // find the AST node for the story - const [name, result] = + // find the export_name for the id + const [name] = Object.entries(parsed._stories).find(([key, value]) => value.id.endsWith(`--${id}`)) || []; - console.log({ name, result }); let node; - // if none can be found, create one + // find the AST node for the export_name, if none can be found, create a new story if (!name) { node = undefined; throw new Error(`creation of new story: not yet implemented`); @@ -54,7 +50,6 @@ export function initializeSaveFromControls( } // modify the AST node with the new args - // node console.log({ node }); // save the file @@ -68,6 +63,8 @@ export function initializeSaveFromControls( success: false, error: e.stack || e.message || e.toString(), }); + + console.error(e.stack || e.message || e.toString()); } }); } diff --git a/code/ui/.storybook/manager.tsx b/code/ui/.storybook/manager.tsx index 49962eefa8d1..75e5201f68a0 100644 --- a/code/ui/.storybook/manager.tsx +++ b/code/ui/.storybook/manager.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { addons, types, useArgs } from '@storybook/manager-api'; import startCase from 'lodash/startCase.js'; import { add } from 'lodash'; -import { SAVE_STORY_REQUEST } from '@storybook/core-events'; +import { SAVE_STORY_REQUEST, SAVE_STORY_RESULT } from '@storybook/core-events'; import { satisfies } from 'semver'; addons.setConfig({ @@ -23,6 +23,14 @@ interface RequestSaveStoryPayload { } addons.register('my-addon', (api) => { + api.on(SAVE_STORY_RESULT, (data) => { + if (data.error) { + api.addNotification({ + content: { headline: `Error saving story`, subHeadline: ` ${data.error}` }, + id: 'save-story-error', + }); + } + }); addons.add('my-addon/panel', { type: types.PANEL, title: 'My Addon', From 7bd6ecede4a5d5f3bc7a2222b108a52803985f35 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 10 Apr 2024 10:17:22 +0200 Subject: [PATCH 058/380] Fix error message in save-from-controls.ts --- code/lib/core-server/src/utils/save-from-controls.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/core-server/src/utils/save-from-controls.ts b/code/lib/core-server/src/utils/save-from-controls.ts index 92fccee89a40..48899f1ec5d3 100644 --- a/code/lib/core-server/src/utils/save-from-controls.ts +++ b/code/lib/core-server/src/utils/save-from-controls.ts @@ -61,7 +61,7 @@ export function initializeSaveFromControls( channel.emit(SAVE_STORY_RESULT, { id: data.id, success: false, - error: e.stack || e.message || e.toString(), + error: `writing to CSF-file failed, is it a valid CSF-file?`, }); console.error(e.stack || e.message || e.toString()); From 154adcaae3245e1708b7e4d0e745f80bbf33e8e9 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 10 Apr 2024 10:22:58 +0200 Subject: [PATCH 059/380] Add notification icons for save story success and error --- code/ui/.storybook/manager.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/code/ui/.storybook/manager.tsx b/code/ui/.storybook/manager.tsx index 75e5201f68a0..d7a53b88ea81 100644 --- a/code/ui/.storybook/manager.tsx +++ b/code/ui/.storybook/manager.tsx @@ -1,9 +1,9 @@ import React from 'react'; import { addons, types, useArgs } from '@storybook/manager-api'; import startCase from 'lodash/startCase.js'; -import { add } from 'lodash'; import { SAVE_STORY_REQUEST, SAVE_STORY_RESULT } from '@storybook/core-events'; -import { satisfies } from 'semver'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { CheckIcon, AlertIcon } from '@storybook/icons'; addons.setConfig({ sidebar: { @@ -28,6 +28,14 @@ addons.register('my-addon', (api) => { api.addNotification({ content: { headline: `Error saving story`, subHeadline: ` ${data.error}` }, id: 'save-story-error', + icon: , + }); + } else { + api.addNotification({ + content: { headline: `Story saved`, subHeadline: ` ${data.id}` }, + duration: 2000, + icon: , + id: 'save-story-success', }); } }); From 22920d450bed4c602eebfa77810cb149943d2e60 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 10 Apr 2024 10:39:24 +0200 Subject: [PATCH 060/380] wip --- .../core-server/src/presets/common-preset.ts | 2 +- .../save-from-controls.ts | 2 +- .../update-args-in-csf-file.test.ts | 14 ++++++++ .../update-args-in-csf-file.ts | 32 +++++++++++++++++++ 4 files changed, 48 insertions(+), 2 deletions(-) rename code/lib/core-server/src/utils/{ => save-from-controls}/save-from-controls.ts (97%) create mode 100644 code/lib/core-server/src/utils/save-from-controls/update-args-in-csf-file.test.ts create mode 100644 code/lib/core-server/src/utils/save-from-controls/update-args-in-csf-file.ts diff --git a/code/lib/core-server/src/presets/common-preset.ts b/code/lib/core-server/src/presets/common-preset.ts index 0153eb7b529f..7c693a7ee659 100644 --- a/code/lib/core-server/src/presets/common-preset.ts +++ b/code/lib/core-server/src/presets/common-preset.ts @@ -24,7 +24,7 @@ import { parseStaticDir } from '../utils/server-statics'; import { defaultStaticDirs } from '../utils/constants'; import type { OptionsWithRequiredCache } from '../utils/whats-new'; import { initializeWhatsNew } from '../utils/whats-new'; -import { initializeSaveFromControls } from '../utils/save-from-controls'; +import { initializeSaveFromControls } from '../utils/save-from-controls/save-from-controls'; const interpolate = (string: string, data: Record = {}) => Object.entries(data).reduce((acc, [k, v]) => acc.replace(new RegExp(`%${k}%`, 'g'), v), string); diff --git a/code/lib/core-server/src/utils/save-from-controls.ts b/code/lib/core-server/src/utils/save-from-controls/save-from-controls.ts similarity index 97% rename from code/lib/core-server/src/utils/save-from-controls.ts rename to code/lib/core-server/src/utils/save-from-controls/save-from-controls.ts index 48899f1ec5d3..18ff90195e7b 100644 --- a/code/lib/core-server/src/utils/save-from-controls.ts +++ b/code/lib/core-server/src/utils/save-from-controls/save-from-controls.ts @@ -2,7 +2,7 @@ import type { CoreConfig } from '@storybook/types'; import type { Channel } from '@storybook/channels'; import { SAVE_STORY_REQUEST, SAVE_STORY_RESULT } from '@storybook/core-events'; -import type { OptionsWithRequiredCache } from './whats-new'; +import type { OptionsWithRequiredCache } from '../whats-new'; import { readCsf, writeCsf } from '@storybook/csf-tools'; import { join } from 'path'; // import { sendTelemetryError } from '../withTelemetry'; diff --git a/code/lib/core-server/src/utils/save-from-controls/update-args-in-csf-file.test.ts b/code/lib/core-server/src/utils/save-from-controls/update-args-in-csf-file.test.ts new file mode 100644 index 000000000000..f638a368a48c --- /dev/null +++ b/code/lib/core-server/src/utils/save-from-controls/update-args-in-csf-file.test.ts @@ -0,0 +1,14 @@ +import { describe, test, expect } from 'vitest'; +import { readCsf, babelPrint } from '@storybook/csf-tools'; +import { readFile } from 'fs/promises'; + +describe('success', () => { + test('should return success', async () => { + const before = await readFile('path/to/file', 'utf-8'); + const CSF = await readCsf('path/to/file', { makeTitle: (userTitle: string) => userTitle }); + + const parsed = CSF.parse(); + + // parsed._stories + }); +}); diff --git a/code/lib/core-server/src/utils/save-from-controls/update-args-in-csf-file.ts b/code/lib/core-server/src/utils/save-from-controls/update-args-in-csf-file.ts new file mode 100644 index 000000000000..947e70d2a02a --- /dev/null +++ b/code/lib/core-server/src/utils/save-from-controls/update-args-in-csf-file.ts @@ -0,0 +1,32 @@ +import type * as t from '@babel/types'; +import * as traverse from '@babel/traverse'; + +export const updateArgsInCsfFile = async (node: t.Node, args: Record) => { + traverse.default(node, { + ObjectExpression(path) { + const properties = path.get('properties'); + properties.forEach((property) => { + if (property.isObjectProperty()) { + const key = property.get('key'); + if (key.isIdentifier() && key.node.name === 'args') { + const value = property.get('value'); + if (value.isObjectExpression()) { + args = { + ...args, + ...value.node.properties.reduce((acc, prop) => { + if (prop.type === 'ObjectProperty') { + const k = prop.key; + if (k.type === 'Identifier') { + acc[k.name] = prop.value; + } + } + return acc; + }, {}), + }; + } + } + } + }); + }, + }); +}; From d712b5ca9f079d9bdf3ca9d6f8584551675f60de Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Wed, 10 Apr 2024 10:56:34 +0200 Subject: [PATCH 061/380] Implement beforeEach --- code/addons/links/package.json | 2 +- code/lib/codemod/package.json | 2 +- code/lib/core-server/package.json | 2 +- code/lib/csf-tools/package.json | 2 +- code/lib/manager-api/package.json | 2 +- code/lib/preview-api/package.json | 2 +- .../src/modules/store/csf/composeConfigs.ts | 1 + .../store/csf/normalizeProjectAnnotations.ts | 2 + .../src/modules/store/csf/normalizeStory.ts | 5 +++ .../src/modules/store/csf/prepareStory.ts | 13 ++++++ code/lib/source-loader/package.json | 2 +- code/lib/types/package.json | 2 +- code/package.json | 2 +- code/renderers/server/package.json | 2 +- code/ui/blocks/package.json | 2 +- code/ui/components/package.json | 2 +- code/yarn.lock | 42 +++++++++---------- 17 files changed, 54 insertions(+), 33 deletions(-) diff --git a/code/addons/links/package.json b/code/addons/links/package.json index fe80a6e7e176..9a5d6bd5478e 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -67,7 +67,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { - "@storybook/csf": "^0.1.2", + "@storybook/csf": "0.1.4--canary.82.941efd8.0", "@storybook/global": "^5.0.0", "ts-dedent": "^2.0.0" }, diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index fb16575f724e..c779463f6fab 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -57,7 +57,7 @@ "@babel/core": "^7.23.2", "@babel/preset-env": "^7.23.2", "@babel/types": "^7.23.0", - "@storybook/csf": "^0.1.2", + "@storybook/csf": "0.1.4--canary.82.941efd8.0", "@storybook/csf-tools": "workspace:*", "@storybook/node-logger": "workspace:*", "@storybook/types": "workspace:*", diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index 3ca426d6bfb0..4651e33ad50d 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -62,7 +62,7 @@ "@storybook/channels": "workspace:*", "@storybook/core-common": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "^0.1.2", + "@storybook/csf": "0.1.4--canary.82.941efd8.0", "@storybook/csf-tools": "workspace:*", "@storybook/docs-mdx": "3.0.0", "@storybook/global": "^5.0.0", diff --git a/code/lib/csf-tools/package.json b/code/lib/csf-tools/package.json index 2b0affad76f0..d2c46c488401 100644 --- a/code/lib/csf-tools/package.json +++ b/code/lib/csf-tools/package.json @@ -46,7 +46,7 @@ "@babel/parser": "^7.23.0", "@babel/traverse": "^7.23.2", "@babel/types": "^7.23.0", - "@storybook/csf": "^0.1.2", + "@storybook/csf": "0.1.4--canary.82.941efd8.0", "@storybook/types": "workspace:*", "fs-extra": "^11.1.0", "recast": "^0.23.5", diff --git a/code/lib/manager-api/package.json b/code/lib/manager-api/package.json index 8b48054b414f..88f920aa794e 100644 --- a/code/lib/manager-api/package.json +++ b/code/lib/manager-api/package.json @@ -47,7 +47,7 @@ "@storybook/channels": "workspace:*", "@storybook/client-logger": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "^0.1.2", + "@storybook/csf": "0.1.4--canary.82.941efd8.0", "@storybook/global": "^5.0.0", "@storybook/icons": "^1.2.5", "@storybook/router": "workspace:*", diff --git a/code/lib/preview-api/package.json b/code/lib/preview-api/package.json index 74c00aad57c9..7a53ee32cbb5 100644 --- a/code/lib/preview-api/package.json +++ b/code/lib/preview-api/package.json @@ -47,7 +47,7 @@ "@storybook/channels": "workspace:*", "@storybook/client-logger": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "^0.1.2", + "@storybook/csf": "0.1.4--canary.82.941efd8.0", "@storybook/global": "^5.0.0", "@storybook/types": "workspace:*", "@types/qs": "^6.9.5", diff --git a/code/lib/preview-api/src/modules/store/csf/composeConfigs.ts b/code/lib/preview-api/src/modules/store/csf/composeConfigs.ts index e5785a6a3f01..12bf9fc9e050 100644 --- a/code/lib/preview-api/src/modules/store/csf/composeConfigs.ts +++ b/code/lib/preview-api/src/modules/store/csf/composeConfigs.ts @@ -58,6 +58,7 @@ export function composeConfigs( globals: getObjectField(moduleExportList, 'globals'), globalTypes: getObjectField(moduleExportList, 'globalTypes'), loaders: getArrayField(moduleExportList, 'loaders'), + beforeEach: getArrayField(moduleExportList, 'beforeEach'), render: getSingletonField(moduleExportList, 'render'), renderToCanvas: getSingletonField(moduleExportList, 'renderToCanvas'), renderToDOM: getSingletonField(moduleExportList, 'renderToDOM'), // deprecated diff --git a/code/lib/preview-api/src/modules/store/csf/normalizeProjectAnnotations.ts b/code/lib/preview-api/src/modules/store/csf/normalizeProjectAnnotations.ts index e2e6a88db31e..60cca0023352 100644 --- a/code/lib/preview-api/src/modules/store/csf/normalizeProjectAnnotations.ts +++ b/code/lib/preview-api/src/modules/store/csf/normalizeProjectAnnotations.ts @@ -16,6 +16,7 @@ export function normalizeProjectAnnotations({ argTypesEnhancers, decorators, loaders, + beforeEach, ...annotations }: ProjectAnnotations): NormalizedProjectAnnotations { return { @@ -23,6 +24,7 @@ export function normalizeProjectAnnotations({ ...(globalTypes && { globalTypes: normalizeInputTypes(globalTypes) }), decorators: normalizeArrays(decorators), loaders: normalizeArrays(loaders), + beforeEach: normalizeArrays(beforeEach), argTypesEnhancers: [ ...(argTypesEnhancers || []), inferArgTypes, diff --git a/code/lib/preview-api/src/modules/store/csf/normalizeStory.ts b/code/lib/preview-api/src/modules/store/csf/normalizeStory.ts index 9a96bc4a332e..fc228251d82e 100644 --- a/code/lib/preview-api/src/modules/store/csf/normalizeStory.ts +++ b/code/lib/preview-api/src/modules/store/csf/normalizeStory.ts @@ -54,6 +54,10 @@ export function normalizeStory( const args = { ...story?.args, ...storyObject.args }; const argTypes = { ...(story?.argTypes as ArgTypes), ...(storyObject.argTypes as ArgTypes) }; const loaders = [...normalizeArrays(storyObject.loaders), ...normalizeArrays(story?.loaders)]; + const beforeEach = [ + ...normalizeArrays(storyObject.beforeEach), + ...normalizeArrays(story?.beforeEach), + ]; const { render, play, tags = [] } = storyObject; // eslint-disable-next-line no-underscore-dangle @@ -68,6 +72,7 @@ export function normalizeStory( args, argTypes: normalizeInputTypes(argTypes), loaders, + beforeEach, ...(render && { render }), ...(userStoryFn && { userStoryFn }), ...(play && { play }), diff --git a/code/lib/preview-api/src/modules/store/csf/prepareStory.ts b/code/lib/preview-api/src/modules/store/csf/prepareStory.ts index 0e5ea37500cd..96ade956ea05 100644 --- a/code/lib/preview-api/src/modules/store/csf/prepareStory.ts +++ b/code/lib/preview-api/src/modules/store/csf/prepareStory.ts @@ -65,6 +65,19 @@ export function prepareStory( const loaded: Record = Object.assign({}, ...loadResults); updatedContext = { ...updatedContext, loaded: { ...updatedContext.loaded, ...loaded } }; } + + // TODO: What to do with those? + const cleanups = new Array<() => unknown>(); + for (const beforeEach of [ + ...normalizeArrays(projectAnnotations.beforeEach), + ...normalizeArrays(componentAnnotations.beforeEach), + ...normalizeArrays(storyAnnotations.beforeEach), + ]) { + const cleanup = await beforeEach(updatedContext); + if (cleanup) { + cleanups.push(cleanup); + } + } return updatedContext; }; diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index 54c5bb179319..887cdd991197 100644 --- a/code/lib/source-loader/package.json +++ b/code/lib/source-loader/package.json @@ -45,7 +45,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/csf": "^0.1.2", + "@storybook/csf": "0.1.4--canary.82.941efd8.0", "@storybook/types": "workspace:*", "estraverse": "^5.2.0", "lodash": "^4.17.21", diff --git a/code/lib/types/package.json b/code/lib/types/package.json index d3f6b1dd7217..ae17e6f42abb 100644 --- a/code/lib/types/package.json +++ b/code/lib/types/package.json @@ -49,7 +49,7 @@ "file-system-cache": "2.3.0" }, "devDependencies": { - "@storybook/csf": "^0.1.2", + "@storybook/csf": "0.1.4--canary.82.941efd8.0", "@types/fs-extra": "^11.0.1", "@types/node": "^18.0.0", "typescript": "^5.3.2" diff --git a/code/package.json b/code/package.json index 399bf6dd0b11..cc041241fd05 100644 --- a/code/package.json +++ b/code/package.json @@ -127,7 +127,7 @@ "@storybook/core-events": "workspace:*", "@storybook/core-server": "workspace:*", "@storybook/core-webpack": "workspace:*", - "@storybook/csf": "^0.1.2", + "@storybook/csf": "0.1.4--canary.82.941efd8.0", "@storybook/csf-plugin": "workspace:*", "@storybook/csf-tools": "workspace:*", "@storybook/docs-tools": "workspace:*", diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json index 8d81e4f749cc..21273de7423e 100644 --- a/code/renderers/server/package.json +++ b/code/renderers/server/package.json @@ -46,7 +46,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/csf": "^0.1.2", + "@storybook/csf": "0.1.4--canary.82.941efd8.0", "@storybook/csf-tools": "workspace:*", "@storybook/global": "^5.0.0", "@storybook/preview-api": "workspace:*", diff --git a/code/ui/blocks/package.json b/code/ui/blocks/package.json index e132238b4fe3..8cf6fe475bf7 100644 --- a/code/ui/blocks/package.json +++ b/code/ui/blocks/package.json @@ -48,7 +48,7 @@ "@storybook/client-logger": "workspace:*", "@storybook/components": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "^0.1.2", + "@storybook/csf": "0.1.4--canary.82.941efd8.0", "@storybook/docs-tools": "workspace:*", "@storybook/global": "^5.0.0", "@storybook/icons": "^1.2.5", diff --git a/code/ui/components/package.json b/code/ui/components/package.json index 3ea8cec3af85..c7086603a7a5 100644 --- a/code/ui/components/package.json +++ b/code/ui/components/package.json @@ -61,7 +61,7 @@ "dependencies": { "@radix-ui/react-slot": "^1.0.2", "@storybook/client-logger": "workspace:*", - "@storybook/csf": "^0.1.2", + "@storybook/csf": "0.1.4--canary.82.941efd8.0", "@storybook/global": "^5.0.0", "@storybook/icons": "^1.2.5", "@storybook/theming": "workspace:*", diff --git a/code/yarn.lock b/code/yarn.lock index f4deb1517325..f4e9a440a185 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -4940,7 +4940,7 @@ __metadata: dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:0.1.4--canary.82.941efd8.0" "@storybook/global": "npm:^5.0.0" "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" @@ -5208,7 +5208,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:0.1.4--canary.82.941efd8.0" "@storybook/docs-tools": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" @@ -5439,7 +5439,7 @@ __metadata: "@babel/core": "npm:^7.23.2" "@babel/preset-env": "npm:^7.23.2" "@babel/types": "npm:^7.23.0" - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:0.1.4--canary.82.941efd8.0" "@storybook/csf-tools": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/types": "workspace:*" @@ -5475,7 +5475,7 @@ __metadata: "@radix-ui/react-scroll-area": "npm:^1.0.5" "@radix-ui/react-slot": "npm:^1.0.2" "@storybook/client-logger": "workspace:*" - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:0.1.4--canary.82.941efd8.0" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" "@storybook/test": "workspace:*" @@ -5568,7 +5568,7 @@ __metadata: "@storybook/channels": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:0.1.4--canary.82.941efd8.0" "@storybook/csf-tools": "workspace:*" "@storybook/docs-mdx": "npm:3.0.0" "@storybook/global": "npm:^5.0.0" @@ -5648,7 +5648,7 @@ __metadata: "@babel/parser": "npm:^7.23.0" "@babel/traverse": "npm:^7.23.2" "@babel/types": "npm:^7.23.0" - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:0.1.4--canary.82.941efd8.0" "@storybook/types": "workspace:*" "@types/fs-extra": "npm:^11.0.1" "@types/js-yaml": "npm:^4.0.5" @@ -5660,6 +5660,15 @@ __metadata: languageName: unknown linkType: soft +"@storybook/csf@npm:0.1.4--canary.82.941efd8.0": + version: 0.1.4--canary.82.941efd8.0 + resolution: "@storybook/csf@npm:0.1.4--canary.82.941efd8.0" + dependencies: + type-fest: "npm:^2.19.0" + checksum: 10c0/73eca2cf2ae69061ea68db6b5c8fd663615c3f5f9f802ed51aba47cb9a4f50d294959b0d1a90045252c9380512dbb8d9840b88c4c26d49b61d04ed0b6581bedf + languageName: node + linkType: hard + "@storybook/csf@npm:^0.0.1": version: 0.0.1 resolution: "@storybook/csf@npm:0.0.1" @@ -5669,15 +5678,6 @@ __metadata: languageName: node linkType: hard -"@storybook/csf@npm:^0.1.2": - version: 0.1.2 - resolution: "@storybook/csf@npm:0.1.2" - dependencies: - type-fest: "npm:^2.19.0" - checksum: 10c0/b51a55292e5d2af8b1d135a28ecaa94f8860ddfedcb393adfa2cca1ee23853156066f737d8be1cb5412f572781aa525dc0b2f6e4a6f6ce805489f0149efe837c - languageName: node - linkType: hard - "@storybook/docs-mdx@npm:3.0.0": version: 3.0.0 resolution: "@storybook/docs-mdx@npm:3.0.0" @@ -5845,7 +5845,7 @@ __metadata: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:0.1.4--canary.82.941efd8.0" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" "@storybook/router": "workspace:*" @@ -6177,7 +6177,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:0.1.4--canary.82.941efd8.0" "@storybook/global": "npm:^5.0.0" "@storybook/types": "workspace:*" "@types/qs": "npm:^6.9.5" @@ -6362,7 +6362,7 @@ __metadata: "@storybook/core-events": "workspace:*" "@storybook/core-server": "workspace:*" "@storybook/core-webpack": "workspace:*" - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:0.1.4--canary.82.941efd8.0" "@storybook/csf-plugin": "workspace:*" "@storybook/csf-tools": "workspace:*" "@storybook/docs-tools": "workspace:*" @@ -6517,7 +6517,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/server@workspace:renderers/server" dependencies: - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:0.1.4--canary.82.941efd8.0" "@storybook/csf-tools": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/preview-api": "workspace:*" @@ -6534,7 +6534,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/source-loader@workspace:lib/source-loader" dependencies: - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:0.1.4--canary.82.941efd8.0" "@storybook/types": "workspace:*" estraverse: "npm:^5.2.0" lodash: "npm:^4.17.21" @@ -6712,7 +6712,7 @@ __metadata: resolution: "@storybook/types@workspace:lib/types" dependencies: "@storybook/channels": "workspace:*" - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:0.1.4--canary.82.941efd8.0" "@types/express": "npm:^4.7.0" "@types/fs-extra": "npm:^11.0.1" "@types/node": "npm:^18.0.0" From b459208498c24f58c762baea8c6de7e83c4ae761 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Fri, 5 Apr 2024 13:09:21 +0200 Subject: [PATCH 062/380] Next.js: Add next/headers mocks --- code/frameworks/nextjs/package.json | 3 + code/frameworks/nextjs/src/headers/cookies.ts | 111 ++++++++++++++++++ code/frameworks/nextjs/src/headers/headers.ts | 104 ++++++++++++++++ code/frameworks/nextjs/src/headers/index.ts | 2 + code/frameworks/nextjs/src/headers/webpack.ts | 9 ++ code/frameworks/nextjs/src/preset.ts | 2 + code/frameworks/nextjs/src/preview.tsx | 6 + .../NextHeader.stories.tsx | 13 ++ .../stories_nextjs-default-ts/NextHeader.tsx | 20 ++++ code/yarn.lock | 1 + 10 files changed, 271 insertions(+) create mode 100644 code/frameworks/nextjs/src/headers/cookies.ts create mode 100644 code/frameworks/nextjs/src/headers/headers.ts create mode 100644 code/frameworks/nextjs/src/headers/index.ts create mode 100644 code/frameworks/nextjs/src/headers/webpack.ts create mode 100644 code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.stories.tsx create mode 100644 code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.tsx diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index b918ba86c2a0..7689995156d5 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -47,6 +47,7 @@ "require": "./dist/next-image-loader-stub.js", "import": "./dist/next-image-loader-stub.mjs" }, + "./headers": "./dist/headers/index.mjs", "./package.json": "./package.json" }, "main": "dist/index.js", @@ -97,6 +98,7 @@ "@storybook/preset-react-webpack": "workspace:*", "@storybook/preview-api": "workspace:*", "@storybook/react": "workspace:*", + "@storybook/test": "workspace:*", "@storybook/types": "workspace:*", "@types/node": "^18.0.0", "@types/semver": "^7.3.4", @@ -158,6 +160,7 @@ "./src/index.ts", "./src/preset.ts", "./src/preview.tsx", + "./src/headers/index.ts", "./src/next-image-loader-stub.ts", "./src/images/decorator.tsx", "./src/images/next-legacy-image.tsx", diff --git a/code/frameworks/nextjs/src/headers/cookies.ts b/code/frameworks/nextjs/src/headers/cookies.ts new file mode 100644 index 000000000000..77124fb73339 --- /dev/null +++ b/code/frameworks/nextjs/src/headers/cookies.ts @@ -0,0 +1,111 @@ +/* eslint-disable no-underscore-dangle */ +import { fn } from '@storybook/test'; +import { headers } from './headers'; +import { + parseCookie, + stringifyCookie, + type RequestCookie, +} from 'next/dist/compiled/@edge-runtime/cookies'; + +// Mostly copied from https://github.com/vercel/edge-runtime/blob/c25e2ded39104e2a3be82efc08baf8dc8fb436b3/packages/cookies/src/request-cookies.ts#L7 +class CookieStore { + /** @internal */ + readonly _headers?: Headers; + + store = new Map(); + + _parsed: Map = new Map(); + + constructor(requestHeaders?: Headers) { + this._headers = requestHeaders; + const header = requestHeaders?.get('cookie'); + if (header) { + const parsed = parseCookie(header); + for (const [name, value] of parsed) { + this._parsed.set(name, { name, value }); + } + } + } + + /** @internal */ + mockRestore = () => { + this.clear(); + }; + + get size(): number { + return this._parsed.size; + } + + get = fn((...args: [name: string] | [RequestCookie]) => { + const name = typeof args[0] === 'string' ? args[0] : args[0].name; + return this._parsed.get(name); + }).mockName('cookies().get'); + + getAll = fn((...args: [name: string] | [RequestCookie] | []) => { + const all = Array.from(this._parsed); + if (!args.length) { + return all.map(([_, value]) => value); + } + + const name = typeof args[0] === 'string' ? args[0] : args[0]?.name; + return all.filter(([n]) => n === name).map(([_, value]) => value); + }).mockName('cookies().getAll'); + + has = fn((name: string) => { + return this._parsed.has(name); + }).mockName('cookies().has'); + + set = fn((...args: [key: string, value: string] | [options: RequestCookie]): this => { + const [name, value] = args.length === 1 ? [args[0].name, args[0].value] : args; + + const map = this._parsed; + map.set(name, { name, value }); + + this._headers?.set( + 'cookie', + Array.from(map) + .map(([_, v]) => stringifyCookie(v)) + .join('; ') + ); + return this; + }).mockName('cookies().set'); + + /** + * Delete the cookies matching the passed name or names in the request. + */ + delete = fn( + ( + /** Name or names of the cookies to be deleted */ + names: string | string[] + ): boolean | boolean[] => { + const map = this._parsed; + const result = !Array.isArray(names) + ? map.delete(names) + : names.map((name) => map.delete(name)); + this._headers?.set( + 'cookie', + Array.from(map) + .map(([_, value]) => stringifyCookie(value)) + .join('; ') + ); + return result; + } + ).mockName('cookies().delete'); + + /** + * Delete all the cookies in the cookies in the request. + */ + clear = fn((): this => { + this.delete(Array.from(this._parsed.keys())); + return this; + }).mockName('cookies().clear'); +} + +let cookieStore: CookieStore; + +export const cookies = (): CookieStore => { + if (!cookieStore) { + cookieStore = new CookieStore(headers()); + } + return cookieStore; +}; diff --git a/code/frameworks/nextjs/src/headers/headers.ts b/code/frameworks/nextjs/src/headers/headers.ts new file mode 100644 index 000000000000..c1ddc679a337 --- /dev/null +++ b/code/frameworks/nextjs/src/headers/headers.ts @@ -0,0 +1,104 @@ +import { fn } from '@storybook/test'; +import type { IncomingHttpHeaders } from 'http'; + +// Mostly copied from https://github.com/vercel/next.js/blob/763b9a660433ec5278a10e59d7ae89d4010ba212/packages/next/src/server/web/spec-extension/adapters/headers.ts#L20 +export class HeadersStore extends Headers { + private readonly headers: IncomingHttpHeaders = {}; + + /** @internal */ + mockRestore = () => { + this.forEach((key) => this.delete(key)); + }; + + /** + * Merges a header value into a string. This stores multiple values as an + * array, so we need to merge them into a string. + * + * @param value a header value + * @returns a merged header value (a string) + */ + private merge(value: string | string[]): string { + if (Array.isArray(value)) return value.join(', '); + + return value; + } + + public append = fn((name: string, value: string): void => { + const existing = this.headers[name]; + if (typeof existing === 'string') { + this.headers[name] = [existing, value]; + } else if (Array.isArray(existing)) { + existing.push(value); + } else { + this.headers[name] = value; + } + }).mockName('headers().append'); + + public delete = fn((name: string) => { + delete this.headers[name]; + }).mockName('headers().delete'); + + public get = fn((name: string): string | null => { + const value = this.headers[name]; + if (typeof value !== 'undefined') return this.merge(value); + + return null; + }).mockName('headers().get'); + + public has = fn((name: string): boolean => { + return typeof this.headers[name] !== 'undefined'; + }).mockName('headers().has'); + + public set = fn((name: string, value: string): void => { + this.headers[name] = value; + }).mockName('headers().set'); + + public forEach = fn( + (callbackfn: (value: string, name: string, parent: Headers) => void, thisArg?: any): void => { + for (const [name, value] of this.entries()) { + callbackfn.call(thisArg, value, name, this); + } + } + ).mockName('headers().forEach'); + + public *entries(): IterableIterator<[string, string]> { + for (const key of Object.keys(this.headers)) { + const name = key.toLowerCase(); + // We assert here that this is a string because we got it from the + // Object.keys() call above. + const value = this.get(name) as string; + + yield [name, value] as [string, string]; + } + } + + public *keys(): IterableIterator { + for (const key of Object.keys(this.headers)) { + const name = key.toLowerCase(); + yield name; + } + } + + public *values(): IterableIterator { + for (const key of Object.keys(this.headers)) { + // We assert here that this is a string because we got it from the + // Object.keys() call above. + const value = this.get(key) as string; + + yield value; + } + } + + public [Symbol.iterator](): IterableIterator<[string, string]> { + return this.entries(); + } +} + +let headerStore: HeadersStore; + +export const headers = (): HeadersStore => { + if (!headerStore) { + headerStore = new HeadersStore(); + } + return headerStore; +}; diff --git a/code/frameworks/nextjs/src/headers/index.ts b/code/frameworks/nextjs/src/headers/index.ts new file mode 100644 index 000000000000..160b2e6f37f7 --- /dev/null +++ b/code/frameworks/nextjs/src/headers/index.ts @@ -0,0 +1,2 @@ +export * from './headers'; +export * from './cookies'; diff --git a/code/frameworks/nextjs/src/headers/webpack.ts b/code/frameworks/nextjs/src/headers/webpack.ts new file mode 100644 index 000000000000..794a89adc1fe --- /dev/null +++ b/code/frameworks/nextjs/src/headers/webpack.ts @@ -0,0 +1,9 @@ +import type { Configuration as WebpackConfig } from 'webpack'; + +export const configureNextHeaders = (baseConfig: WebpackConfig): void => { + const resolve = baseConfig.resolve ?? {}; + resolve.alias = { + ...resolve.alias, + 'next/headers': require.resolve('@storybook/nextjs/headers'), + }; +}; diff --git a/code/frameworks/nextjs/src/preset.ts b/code/frameworks/nextjs/src/preset.ts index e76db8104d1b..855dd3961582 100644 --- a/code/frameworks/nextjs/src/preset.ts +++ b/code/frameworks/nextjs/src/preset.ts @@ -23,6 +23,7 @@ import { configureBabelLoader } from './babel/loader'; import { configureFastRefresh } from './fastRefresh/webpack'; import { configureAliases } from './aliases/webpack'; import { logger } from '@storybook/node-logger'; +import { configureNextHeaders } from './headers/webpack'; export const addons: PresetProperty<'addons'> = [ dirname(require.resolve(join('@storybook/preset-react-webpack', 'package.json'))), @@ -134,6 +135,7 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig, configureStyledJsx(baseConfig); configureNodePolyfills(baseConfig); configureAliases(baseConfig); + configureNextHeaders(baseConfig); if (isDevelopment) { configureFastRefresh(baseConfig); diff --git a/code/frameworks/nextjs/src/preview.tsx b/code/frameworks/nextjs/src/preview.tsx index 9f30af9d787d..0d0b30f9d3ac 100644 --- a/code/frameworks/nextjs/src/preview.tsx +++ b/code/frameworks/nextjs/src/preview.tsx @@ -4,6 +4,7 @@ import { ImageDecorator } from './images/decorator'; import { RouterDecorator } from './routing/decorator'; import { StyledJsxDecorator } from './styledJsx/decorator'; import { HeadManagerDecorator } from './head-manager/decorator'; +import { cookies, headers } from './headers'; function addNextHeadCount() { const meta = document.createElement('meta'); @@ -21,6 +22,11 @@ export const decorators: Addon_DecoratorFunction[] = [ HeadManagerDecorator, ]; +export const loaders = async () => { + cookies().mockRestore(); + headers().mockRestore(); +}; + export const parameters = { docs: { source: { diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.stories.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.stories.tsx new file mode 100644 index 000000000000..f62323bff6f2 --- /dev/null +++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.stories.tsx @@ -0,0 +1,13 @@ +import NextHeader from './NextHeader'; +import { cookies, headers } from '@storybook/nextjs/headers'; + +export default { + component: NextHeader, +}; + +export const Default = { + loaders: async () => { + cookies().set('fullName', 'Jane Doe'); + headers().set('timezone', 'Central European Summer Time'); + }, +}; diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.tsx new file mode 100644 index 000000000000..e5f80e4b0e96 --- /dev/null +++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import { cookies, headers } from 'next/headers'; + +export default function Component() { + return ( + <> +

Headers:

+
+

Name: "timezone"

+

Value: "{headers().get('timezone')}"

+
+ +

Cookies:

+
+

Name: "fullName"

+

Value: "{JSON.stringify(cookies().get('fullName'))}"

+
+ + ); +} diff --git a/code/yarn.lock b/code/yarn.lock index bbfe0f55b128..aa1315007109 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5948,6 +5948,7 @@ __metadata: "@storybook/preset-react-webpack": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/react": "workspace:*" + "@storybook/test": "workspace:*" "@storybook/types": "workspace:*" "@types/babel__core": "npm:^7" "@types/babel__plugin-transform-runtime": "npm:^7" From e881b95ff9a4c4f5c6c60b827894b4e7a52377ef Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Fri, 5 Apr 2024 13:09:49 +0200 Subject: [PATCH 063/380] temporarily prebundle @testing-library/dom --- code/lib/test/package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/code/lib/test/package.json b/code/lib/test/package.json index 24379945cc57..08e71286c31c 100644 --- a/code/lib/test/package.json +++ b/code/lib/test/package.json @@ -69,7 +69,6 @@ "./src/index.ts" ], "noExternal": [ - "@testing-library/dom", "@testing-library/jest-dom", "@testing-library/user-event", "chai" From 00d5614a8d222e6f211d129da18cfc2e594cf45b Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Fri, 5 Apr 2024 17:34:03 +0200 Subject: [PATCH 064/380] address review comments --- code/frameworks/nextjs/src/headers/cookies.ts | 48 ++++++++++++------- code/frameworks/nextjs/src/headers/headers.ts | 11 ++++- .../NextHeader.stories.tsx | 21 ++++++-- .../stories_nextjs-default-ts/NextHeader.tsx | 39 +++++++++++---- code/lib/test/package.json | 1 + 5 files changed, 88 insertions(+), 32 deletions(-) diff --git a/code/frameworks/nextjs/src/headers/cookies.ts b/code/frameworks/nextjs/src/headers/cookies.ts index 77124fb73339..0335527367fc 100644 --- a/code/frameworks/nextjs/src/headers/cookies.ts +++ b/code/frameworks/nextjs/src/headers/cookies.ts @@ -1,22 +1,28 @@ /* eslint-disable no-underscore-dangle */ import { fn } from '@storybook/test'; +import type { HeadersStore } from './headers'; import { headers } from './headers'; +import type { RequestCookies } from 'next/dist/compiled/@edge-runtime/cookies'; import { parseCookie, stringifyCookie, type RequestCookie, } from 'next/dist/compiled/@edge-runtime/cookies'; +const stringifyCookies = (map: Map) => { + return Array.from(map) + .map(([_, v]) => stringifyCookie(v).replace(/; /, '')) + .join('; '); +}; + // Mostly copied from https://github.com/vercel/edge-runtime/blob/c25e2ded39104e2a3be82efc08baf8dc8fb436b3/packages/cookies/src/request-cookies.ts#L7 -class CookieStore { +class CookieStore implements RequestCookies { /** @internal */ - readonly _headers?: Headers; - - store = new Map(); + private readonly _headers: HeadersStore; _parsed: Map = new Map(); - constructor(requestHeaders?: Headers) { + constructor(requestHeaders: HeadersStore) { this._headers = requestHeaders; const header = requestHeaders?.get('cookie'); if (header) { @@ -27,9 +33,14 @@ class CookieStore { } } + [Symbol.iterator]() { + return this._parsed[Symbol.iterator](); + } + /** @internal */ mockRestore = () => { this.clear(); + this._headers.mockRestore(); }; get size(): number { @@ -61,12 +72,7 @@ class CookieStore { const map = this._parsed; map.set(name, { name, value }); - this._headers?.set( - 'cookie', - Array.from(map) - .map(([_, v]) => stringifyCookie(v)) - .join('; ') - ); + this._headers.set('cookie', stringifyCookies(map)); return this; }).mockName('cookies().set'); @@ -82,12 +88,7 @@ class CookieStore { const result = !Array.isArray(names) ? map.delete(names) : names.map((name) => map.delete(name)); - this._headers?.set( - 'cookie', - Array.from(map) - .map(([_, value]) => stringifyCookie(value)) - .join('; ') - ); + this._headers.set('cookie', stringifyCookies(map)); return result; } ).mockName('cookies().delete'); @@ -99,6 +100,19 @@ class CookieStore { this.delete(Array.from(this._parsed.keys())); return this; }).mockName('cookies().clear'); + + /** + * Format the cookies in the request as a string for logging + */ + [Symbol.for('edge-runtime.inspect.custom')]() { + return `RequestCookies ${JSON.stringify(Object.fromEntries(this._parsed))}`; + } + + toString() { + return [...this._parsed.values()] + .map((v) => `${v.name}=${encodeURIComponent(v.value)}`) + .join('; '); + } } let cookieStore: CookieStore; diff --git a/code/frameworks/nextjs/src/headers/headers.ts b/code/frameworks/nextjs/src/headers/headers.ts index c1ddc679a337..386574054d90 100644 --- a/code/frameworks/nextjs/src/headers/headers.ts +++ b/code/frameworks/nextjs/src/headers/headers.ts @@ -1,9 +1,13 @@ import { fn } from '@storybook/test'; +import { action } from '@storybook/addon-actions'; import type { IncomingHttpHeaders } from 'http'; +import type { HeadersAdapter } from 'next/dist/server/web/spec-extension/adapters/headers'; // Mostly copied from https://github.com/vercel/next.js/blob/763b9a660433ec5278a10e59d7ae89d4010ba212/packages/next/src/server/web/spec-extension/adapters/headers.ts#L20 -export class HeadersStore extends Headers { - private readonly headers: IncomingHttpHeaders = {}; +// @ts-expect-error unfortunately the headers property is private (and not protected) in HeadersAdapter +// and we can't access it so we need to redefine it, but that clashes with the type, hence the ts-expect-error comment. +export class HeadersStore extends Headers implements HeadersAdapter { + private headers: IncomingHttpHeaders = {}; /** @internal */ mockRestore = () => { @@ -32,6 +36,7 @@ export class HeadersStore extends Headers { } else { this.headers[name] = value; } + action('append')(name, value); }).mockName('headers().append'); public delete = fn((name: string) => { @@ -51,6 +56,8 @@ export class HeadersStore extends Headers { public set = fn((name: string, value: string): void => { this.headers[name] = value; + console.log({ name, value }); + action('set')(name, value); }).mockName('headers().set'); public forEach = fn( diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.stories.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.stories.tsx index f62323bff6f2..fe7c8ed9f34a 100644 --- a/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.stories.tsx +++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.stories.tsx @@ -1,13 +1,28 @@ import NextHeader from './NextHeader'; +import type { Meta } from '@storybook/react'; +import type { StoryObj } from '@storybook/react'; +import { expect, userEvent, within } from '@storybook/test'; import { cookies, headers } from '@storybook/nextjs/headers'; export default { component: NextHeader, -}; +} as Meta; + +type Story = StoryObj; -export const Default = { +export const Default: Story = { loaders: async () => { - cookies().set('fullName', 'Jane Doe'); + cookies().set('firstName', 'Jane'); + cookies().set({ + name: 'lastName', + value: 'Doe', + }); headers().set('timezone', 'Central European Summer Time'); }, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + const submitButton = await canvas.findByRole('button'); + await userEvent.click(submitButton); + expect(headers().get('cookie')).toContain('user-id=encrypted-id'); + }, }; diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.tsx index e5f80e4b0e96..bb70c020699c 100644 --- a/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.tsx +++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.tsx @@ -1,20 +1,39 @@ import React from 'react'; import { cookies, headers } from 'next/headers'; -export default function Component() { +export default async function Component() { + async function handleClick() { + 'use server'; + cookies().set('user-id', 'encrypted-id'); + } + return ( <> +

Cookies:

+ {cookies() + .getAll() + .map(({ name, value }) => { + return ( +

+ Name: {name} + Value: {value} +

+ ); + })} +

Headers:

-
-

Name: "timezone"

-

Value: "{headers().get('timezone')}"

-
+ {Array.from(headers()).map(([name, value]: [string, string]) => { + return ( +

+ Name: {name} + Value: {value} +

+ ); + })} -

Cookies:

-
-

Name: "fullName"

-

Value: "{JSON.stringify(cookies().get('fullName'))}"

-
+
+ +
); } diff --git a/code/lib/test/package.json b/code/lib/test/package.json index 08e71286c31c..24379945cc57 100644 --- a/code/lib/test/package.json +++ b/code/lib/test/package.json @@ -69,6 +69,7 @@ "./src/index.ts" ], "noExternal": [ + "@testing-library/dom", "@testing-library/jest-dom", "@testing-library/user-event", "chai" From ec0e0afdcea090b1ffc73c461dc54131fbadd7c1 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Mon, 8 Apr 2024 12:44:20 +0200 Subject: [PATCH 065/380] cleanup --- code/frameworks/nextjs/src/headers/headers.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/code/frameworks/nextjs/src/headers/headers.ts b/code/frameworks/nextjs/src/headers/headers.ts index 386574054d90..e4b0696c00d2 100644 --- a/code/frameworks/nextjs/src/headers/headers.ts +++ b/code/frameworks/nextjs/src/headers/headers.ts @@ -1,5 +1,4 @@ import { fn } from '@storybook/test'; -import { action } from '@storybook/addon-actions'; import type { IncomingHttpHeaders } from 'http'; import type { HeadersAdapter } from 'next/dist/server/web/spec-extension/adapters/headers'; @@ -36,7 +35,6 @@ export class HeadersStore extends Headers implements HeadersAdapter { } else { this.headers[name] = value; } - action('append')(name, value); }).mockName('headers().append'); public delete = fn((name: string) => { @@ -56,8 +54,6 @@ export class HeadersStore extends Headers implements HeadersAdapter { public set = fn((name: string, value: string): void => { this.headers[name] = value; - console.log({ name, value }); - action('set')(name, value); }).mockName('headers().set'); public forEach = fn( From b95a503edad1945c2becbbfeeb5f6a3fd0949187 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 9 Apr 2024 14:06:29 +0200 Subject: [PATCH 066/380] Update package.json and jest.config.js for next/headers alias --- code/frameworks/nextjs/package.json | 6 +- code/frameworks/nextjs/src/headers/webpack.ts | 9 +- .../nextjs/jest.config.js | 4 + .../nextjs/stories/NextHeader.stories.tsx | 28 +++ .../nextjs/stories/NextHeader.tsx | 36 +++ .../portable-stories.test.tsx.snap | 94 +++++++ .../nextjs/stories/portable-stories.test.tsx | 2 + .../nextjs/yarn.lock | 229 +++++++++--------- 8 files changed, 292 insertions(+), 116 deletions(-) create mode 100644 test-storybooks/portable-stories-kitchen-sink/nextjs/stories/NextHeader.stories.tsx create mode 100644 test-storybooks/portable-stories-kitchen-sink/nextjs/stories/NextHeader.tsx diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 7689995156d5..ed1946d4a6ce 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -47,7 +47,11 @@ "require": "./dist/next-image-loader-stub.js", "import": "./dist/next-image-loader-stub.mjs" }, - "./headers": "./dist/headers/index.mjs", + "./headers": { + "types": "./dist/headers/index.d.ts", + "require": "./dist/headers/index.js", + "import": "./dist/headers/index.mjs" + }, "./package.json": "./package.json" }, "main": "dist/index.js", diff --git a/code/frameworks/nextjs/src/headers/webpack.ts b/code/frameworks/nextjs/src/headers/webpack.ts index 794a89adc1fe..8f2d63a165ca 100644 --- a/code/frameworks/nextjs/src/headers/webpack.ts +++ b/code/frameworks/nextjs/src/headers/webpack.ts @@ -1,9 +1,16 @@ +import { dirname, join } from 'path'; import type { Configuration as WebpackConfig } from 'webpack'; export const configureNextHeaders = (baseConfig: WebpackConfig): void => { const resolve = baseConfig.resolve ?? {}; + const headersPath = join( + dirname(require.resolve('@storybook/nextjs/package.json')), + '/dist/headers/index.mjs' + ); + resolve.alias = { ...resolve.alias, - 'next/headers': require.resolve('@storybook/nextjs/headers'), + 'next/headers': headersPath, + '@storybook/nextjs/headers': headersPath, }; }; diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/jest.config.js b/test-storybooks/portable-stories-kitchen-sink/nextjs/jest.config.js index 5689702fae31..1869752aaa5d 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/jest.config.js +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/jest.config.js @@ -11,6 +11,10 @@ const customJestConfig = { testEnvironment: 'jsdom', // Add more setup options before each test is run setupFilesAfterEnv: ['./jest.setup.ts'], + // TODO add docs about this: alias next/headers to @storybook/nextjs/headers + moduleNameMapper: { + '^next/headers$': '@storybook/nextjs/headers', + }, }; // createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/NextHeader.stories.tsx b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/NextHeader.stories.tsx new file mode 100644 index 000000000000..d6b0cf7f922b --- /dev/null +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/NextHeader.stories.tsx @@ -0,0 +1,28 @@ +import type { Meta } from '@storybook/react'; +import type { StoryObj } from '@storybook/react'; +import { expect, userEvent, within } from '@storybook/test'; +import { cookies, headers } from '@storybook/nextjs/headers'; +import NextHeader from './NextHeader'; + +export default { + component: NextHeader, +} as Meta; + +type Story = StoryObj; + +export const Default: Story = { + loaders: async () => { + cookies().set('firstName', 'Jane'); + cookies().set({ + name: 'lastName', + value: 'Doe', + }); + headers().set('timezone', 'Central European Summer Time'); + }, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + const submitButton = await canvas.findByRole('button'); + await userEvent.click(submitButton); + expect(headers().get('cookie')).toContain('user-id=encrypted-id'); + }, +}; diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/NextHeader.tsx b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/NextHeader.tsx new file mode 100644 index 000000000000..8321a9820141 --- /dev/null +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/NextHeader.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import { cookies, headers } from 'next/headers'; + +export default function Component() { + function handleClick() { + cookies().set('user-id', 'encrypted-id'); + } + + return ( + <> +

Cookies:

+ {cookies() + .getAll() + .map(({ name, value }) => { + return ( +

+ Name: {name} + Value: {value} +

+ ); + })} + +

Headers:

+ {Array.from(headers()).map(([name, value]: [string, string]) => { + return ( +

+ Name: {name} + Value: {value} +

+ ); + })} + + + + ); +} diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/__snapshots__/portable-stories.test.tsx.snap b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/__snapshots__/portable-stories.test.tsx.snap index 18101d01d48d..7f5212f2f6a3 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/__snapshots__/portable-stories.test.tsx.snap +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/__snapshots__/portable-stories.test.tsx.snap @@ -729,6 +729,100 @@ exports[`renders navigationStories stories renders Default 1`] = ` `; +exports[`renders nextHeaderStories stories renders Default 1`] = ` + +
+
+ Global Decorator +
+

+ Cookies: +

+

+ + Name: + + + + firstName + + + Value: + + + + Jane + +

+

+ + Name: + + + + lastName + + + Value: + + + + Doe + +

+

+ Headers: +

+

+ + Name: + + + + cookie + + + Value: + + + + firstName=Jane; lastName=Doe + +

+

+ + Name: + + + + timezone + + + Value: + + + + Central European Summer Time + +

+ +
+
+ +`; + exports[`renders routerStories stories renders Default 1`] = `
diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/portable-stories.test.tsx b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/portable-stories.test.tsx index c17fd43fc746..d6789edde932 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/portable-stories.test.tsx +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/portable-stories.test.tsx @@ -11,6 +11,7 @@ import * as styledJsxStories from './StyledJsx.stories'; import * as dynamicImportStories from './DynamicImport.stories'; import * as fontStories from './Font.stories'; import * as headStories from './Head.stories'; +import * as nextHeaderStories from './NextHeader.stories'; import * as getImagePropsStories from './GetImageProps.stories'; // example with composeStories, returns an object with all stories composed with args/decorators @@ -30,6 +31,7 @@ const runTests = (name: string, storiesModule: any) => { // // example with composeStory, returns a single story composed with args/decorators describe('renders', () => { + runTests('nextHeaderStories', nextHeaderStories); runTests('navigationStories', navigationStories); runTests('linkStories', linkStories); runTests('routerStories', routerStories); diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock b/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock index e621c6f62567..c9002d189472 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock @@ -2378,8 +2378,8 @@ __metadata: linkType: hard "@storybook/addon-actions@file:../../../code/addons/actions::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/addon-actions@file:../../../code/addons/actions#../../../code/addons/actions::hash=e88010&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/addon-actions@file:../../../code/addons/actions#../../../code/addons/actions::hash=65179b&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-events": "workspace:*" "@storybook/global": "npm:^5.0.0" @@ -2387,18 +2387,18 @@ __metadata: dequal: "npm:^2.0.2" polished: "npm:^4.2.2" uuid: "npm:^9.0.0" - checksum: 10/9e15238cca3e78b2e24c8cd78c10bc7541a467c0d495bc64312d1e963e5085c049167650e55a6d049340f2a9c552751e2655fabcd320cd7b6b78415c77808aac + checksum: 10/9ed534d56ffd4ae256837a80af482961a5881624cb85eb46983e913497bbdcd8c441deac96ea76bf99eb1f7b0fb523b60a7eec4059a78eadf00e92aa6bf977b3 languageName: node linkType: hard "@storybook/addon-backgrounds@file:../../../code/addons/backgrounds::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/addon-backgrounds@file:../../../code/addons/backgrounds#../../../code/addons/backgrounds::hash=ae8cf2&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/addon-backgrounds@file:../../../code/addons/backgrounds#../../../code/addons/backgrounds::hash=026986&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" memoizerific: "npm:^1.11.3" ts-dedent: "npm:^2.0.0" - checksum: 10/73e820d4ee0c7fc6b3c0c6c92783617ed516d558f00b9dbd6573fad96dd4069f93a5a5b895eda32972266595de8cd48fbda061d28e0b4d30756ed831556942f4 + checksum: 10/99d407bf5df62a7e85233e5a484ec0801ed309c3b910af79c65bbcceabeb1a7e8619c89178ada8ea20c1dae9196d559dbd75905732fe6a181374bf8c8d305993 languageName: node linkType: hard @@ -2418,8 +2418,8 @@ __metadata: linkType: hard "@storybook/addon-docs@file:../../../code/addons/docs::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/addon-docs@file:../../../code/addons/docs#../../../code/addons/docs::hash=20043e&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/addon-docs@file:../../../code/addons/docs#../../../code/addons/docs::hash=58d358&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@babel/core": "npm:^7.12.3" "@mdx-js/react": "npm:^3.0.0" @@ -2441,13 +2441,13 @@ __metadata: rehype-external-links: "npm:^3.0.0" rehype-slug: "npm:^6.0.0" ts-dedent: "npm:^2.0.0" - checksum: 10/4e28ead6b979994717c2184eb2b8a38297ef363bd4289e932d0d72af09783edbb87e0cd706223517b90f9b5cb9d6b8fccd91d74295b4259d9d0d76d6bb75c1c5 + checksum: 10/e794088e3f6cdad1c5ea178ab7d07db27da5729bbb380bee957a46d185f19125ad91519d56d2a3d68b7d60afd9e31a9a72edb2f24f5ba68866a531a25e97ef35 languageName: node linkType: hard "@storybook/addon-essentials@file:../../../code/addons/essentials::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/addon-essentials@file:../../../code/addons/essentials#../../../code/addons/essentials::hash=516d29&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/addon-essentials@file:../../../code/addons/essentials#../../../code/addons/essentials::hash=5092fe&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/addon-actions": "workspace:*" "@storybook/addon-backgrounds": "workspace:*" @@ -2463,22 +2463,22 @@ __metadata: "@storybook/node-logger": "workspace:*" "@storybook/preview-api": "workspace:*" ts-dedent: "npm:^2.0.0" - checksum: 10/a112d664bbbb4e027c3302ddc47f41a94c8b77b31282e927d3c639388cf8c475c5be21c0311d9c7e3e042e4571367641f257818cb42b48de3809ca06bbbaeef0 + checksum: 10/6e482c766038f53305099b1cad8195bb546bb2b18a701b2f85491e9c5393e39e715b6505672ffb36616d5ae5baa9f06d16dd6f4a86d3faa31ee550d045a4bc57 languageName: node linkType: hard "@storybook/addon-highlight@file:../../../code/addons/highlight::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/addon-highlight@file:../../../code/addons/highlight#../../../code/addons/highlight::hash=1b0e4c&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/addon-highlight@file:../../../code/addons/highlight#../../../code/addons/highlight::hash=a69c2f&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" - checksum: 10/2dbc0b704c71ed09839d4a2cef0758e47f67b7864d1963d2a41a56cf71d90a73fdb1934fe35f6b4457036894149cb1bc7acbffa5dc46744a1dbf7968dd626648 + checksum: 10/e61e168997b91f2ab729f02de3e186a26c697c0851d188d7ece1ec145fcd84c7fea3cd3fac3608269bb4944c9b4e13436493f65ddf8c0a808e30bb5ece70d9f3 languageName: node linkType: hard "@storybook/addon-interactions@file:../../../code/addons/interactions::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/addon-interactions@file:../../../code/addons/interactions#../../../code/addons/interactions::hash=08cdfe&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/addon-interactions@file:../../../code/addons/interactions#../../../code/addons/interactions::hash=3e90ca&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" "@storybook/instrumenter": "workspace:*" @@ -2486,49 +2486,49 @@ __metadata: "@storybook/types": "workspace:*" polished: "npm:^4.2.2" ts-dedent: "npm:^2.2.0" - checksum: 10/3614ecd2a3265ac36e540416030ec9435fc41127fcdd4e457c52099193f0aeb6553cf56bef179cf2d13053b68843869ddab2c7863dd6b69280375dd3f5c64603 + checksum: 10/18c21704ebc20d55fe75e735f89e8c5926b6fe3a44e7025de16d666cf3c6435e9fc19ada8dc3714f4406ce1f3b3117120610c7c8bcfefb86c913a6bbf14f668a languageName: node linkType: hard "@storybook/addon-measure@file:../../../code/addons/measure::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/addon-measure@file:../../../code/addons/measure#../../../code/addons/measure::hash=fcfca4&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/addon-measure@file:../../../code/addons/measure#../../../code/addons/measure::hash=086736&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" tiny-invariant: "npm:^1.3.1" - checksum: 10/74778d016ac62b314e1029419403c29d0218ba08e061bb51da6a273e1ffbc89675739dac85f2c7cc8f28552847410996ebcad6513074ea1fbf7eb571a2c6582b + checksum: 10/3f9a7ddab76235f46cfaa96386074964a311908344e5a4617025dcbab610742e48672b8f236a0d4a5c254273ae4b959ef9114bf31e22ebfcae085c17309c2f47 languageName: node linkType: hard "@storybook/addon-outline@file:../../../code/addons/outline::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/addon-outline@file:../../../code/addons/outline#../../../code/addons/outline::hash=df13d0&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/addon-outline@file:../../../code/addons/outline#../../../code/addons/outline::hash=c2049c&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" ts-dedent: "npm:^2.0.0" - checksum: 10/c2ee4e8e4fb74916918bc16c1a76f24f88c8313aec39b8f8cee5c53c3c1e9e9808ab82f236cf53da416d985bdcf8104f3e896401d8d3f3390b6f15c43ae30731 + checksum: 10/6935af0b38fdb46c5bee74c22a170b2f10ffcbff14ee039ddc8488f3b6eb1c2d3f11c35c9761eaa8ddfafe3fecaef3ace12a5a30610fc4d1c9a5b161d7fbba53 languageName: node linkType: hard "@storybook/addon-toolbars@file:../../../code/addons/toolbars::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/addon-toolbars@file:../../../code/addons/toolbars#../../../code/addons/toolbars::hash=16af1f&locator=portable-stories-nextjs%40workspace%3A." - checksum: 10/aa26ca213d4191b2af638a44841d2cab0034092b27c426879be7037c3f2f3cfd9dcd668dbc15824e9129b002e9babb9b78638abb42f4c0e5a26070d24c35eb43 + version: 8.1.0-alpha.6 + resolution: "@storybook/addon-toolbars@file:../../../code/addons/toolbars#../../../code/addons/toolbars::hash=7413c4&locator=portable-stories-nextjs%40workspace%3A." + checksum: 10/a428f3c5b3530cd56c81c83a7e05c2f364a75a7e358dbd9f082eb1b88b875a5e721db0cb7050f1ac48117ed0d4b95a8b35e07e8f3e4b17e6cdd0076a4d959bc7 languageName: node linkType: hard "@storybook/addon-viewport@file:../../../code/addons/viewport::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/addon-viewport@file:../../../code/addons/viewport#../../../code/addons/viewport::hash=bb6a19&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/addon-viewport@file:../../../code/addons/viewport#../../../code/addons/viewport::hash=57d9d2&locator=portable-stories-nextjs%40workspace%3A." dependencies: memoizerific: "npm:^1.11.3" - checksum: 10/02aaa2b1d56d2f348712b49be2f034c7875b2e8ab5afd431785c25d089b42a1c103059335790b54e655ae38048dfdefe2d6ef8db0af1ee7182e314d1852fa94e + checksum: 10/752aa713b8b924944dbf1b3b904dd31e4508651ef9b8437dc3a60444890f760a7f76fcbbe80037c0f8e790e31a37d062aa6aa27182c1cd0784eba000745a44f2 languageName: node linkType: hard "@storybook/blocks@file:../../../code/ui/blocks::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/blocks@file:../../../code/ui/blocks#../../../code/ui/blocks::hash=11aaa5&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/blocks@file:../../../code/ui/blocks#../../../code/ui/blocks::hash=07fbe6&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" @@ -2562,13 +2562,13 @@ __metadata: optional: true react-dom: optional: true - checksum: 10/edb8ff4f8f87654a18a45368043f272c26a4b8d04ef8ac4c6c67893c503fff1af666d62de426f56ce0eafc93db39763519140b08b3cf1734f3687c20ceeaec6c + checksum: 10/b20b19cd047db66bc11227d9c64d66285b29d34da8c085d675c948355edc0a66e36b08bd95626536ad15ce970461c19528326a38f083c8533a9aeb3223fca6ee languageName: node linkType: hard "@storybook/builder-manager@file:../../../code/builders/builder-manager::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/builder-manager@file:../../../code/builders/builder-manager#../../../code/builders/builder-manager::hash=40c69f&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/builder-manager@file:../../../code/builders/builder-manager#../../../code/builders/builder-manager::hash=727c53&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@fal-works/esbuild-plugin-global-externals": "npm:^2.1.2" "@storybook/core-common": "workspace:*" @@ -2584,13 +2584,13 @@ __metadata: fs-extra: "npm:^11.1.0" process: "npm:^0.11.10" util: "npm:^0.12.4" - checksum: 10/92ae16c32ced613cd0a603ff2f139356c1bf81f2aae2268ef6de2ca6345cb7e7de49b6aea356c7828d752efb05fff3c14ef949ab58dffe1ae08979a37524ff6c + checksum: 10/1e3f751ec4dd12ca12d8a3190fb104644041cd08fb4c1548567105dabea9c20af0d25e19333e9c9da51225e0dd5159c2d2614cb3ac78b6f6b2e06c866f543eaf languageName: node linkType: hard "@storybook/builder-webpack5@file:../../../code/builders/builder-webpack5::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/builder-webpack5@file:../../../code/builders/builder-webpack5#../../../code/builders/builder-webpack5::hash=5fa617&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/builder-webpack5@file:../../../code/builders/builder-webpack5#../../../code/builders/builder-webpack5::hash=ad9e5e&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" @@ -2629,20 +2629,20 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 10/8576dca36ea1621e2b7c1723b4729a96d648a54c372175081a11763ad346ba1209a02fb6819beae592a0cc6a69a55cab44f47e92a05ce8552ca729434520a836 + checksum: 10/1dbbad195f6f0cb506b0b693c825c494f1a88cd71ca7784b06e0410f080468cac67d35adff1bc6f785b3f7d55cfe8e794684df01b4f440799955f0e787d8963a languageName: node linkType: hard "@storybook/channels@file:../../../code/lib/channels::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/channels@file:../../../code/lib/channels#../../../code/lib/channels::hash=dc1f24&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/channels@file:../../../code/lib/channels#../../../code/lib/channels::hash=78c3de&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" "@storybook/global": "npm:^5.0.0" telejson: "npm:^7.2.0" tiny-invariant: "npm:^1.3.1" - checksum: 10/fa9b6ab69319c46e17a6b9eb3fee4bb3ef12d12c02ee068077a920e9aa08df7fb9b666fafd4c67b686a330f5a37488c2e504427dd748accd7fb76f7cc21dbf3e + checksum: 10/d161eff9c0218c7a6628e44dceed5299b253f997fc36fd344a428937b901a3f0755a067240394636ca0e33611848cfc4b43e07a259f4232a7ea3c409418da5fc languageName: node linkType: hard @@ -2694,17 +2694,17 @@ __metadata: linkType: hard "@storybook/client-logger@file:../../../code/lib/client-logger::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/client-logger@file:../../../code/lib/client-logger#../../../code/lib/client-logger::hash=c3badc&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/client-logger@file:../../../code/lib/client-logger#../../../code/lib/client-logger::hash=54f3a6&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" - checksum: 10/3b4619cefc5256d914bddae60d853762addb185eb0dbd4052bb4aae9db3b59f3ca2db3a1bbf7e81547a4e047415f52c1f8b9208717741a6d332d47f99d1ed7c0 + checksum: 10/234fc62dd3bbf8350049d6b149d035eae31b804dd6b8ef175c84ac7bc7ef32943976197a204f4d059952d47de3b97c56a8d2238f0bebcd10e29665b112ba0e1f languageName: node linkType: hard "@storybook/codemod@file:../../../code/lib/codemod::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/codemod@file:../../../code/lib/codemod#../../../code/lib/codemod::hash=34bae5&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/codemod@file:../../../code/lib/codemod#../../../code/lib/codemod::hash=a56758&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@babel/core": "npm:^7.23.2" "@babel/preset-env": "npm:^7.23.2" @@ -2721,13 +2721,13 @@ __metadata: prettier: "npm:^3.1.1" recast: "npm:^0.23.5" tiny-invariant: "npm:^1.3.1" - checksum: 10/004e68f27b836994ae7cf798d05e4e71230230b3d2bb23237ba60f91930db9ad213eb4a1fdf99d66bb2ce27b4dc2c8603b3eeacc8d3350975321bb207f0076b2 + checksum: 10/281ccf2a77c876f5c76629a2d40c19c90d5c5244acb1bb0480e8317c79a1d71e52cae72d542368b0b3192f8775b8dc380141d0ba8ecfc3677970ac43de5eab4f languageName: node linkType: hard "@storybook/components@file:../../../code/ui/components::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/components@file:../../../code/ui/components#../../../code/ui/components::hash=3b9d9f&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/components@file:../../../code/ui/components#../../../code/ui/components::hash=df917d&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@radix-ui/react-slot": "npm:^1.0.2" "@storybook/client-logger": "workspace:*" @@ -2741,7 +2741,7 @@ __metadata: peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: 10/a3580c09bb4fb59402e496a50334f00f9bcf426af95499c351c5ca186b2eed7bf3f35afc88ffe1ea626886fddef4be415cc929ece95827a6a3989f33d7203bce + checksum: 10/70d228121e8d87efe766d01665df20448f310c0413edf80d7496ad887e876c7d24bae7786c89a0746d2b1fced8d89f1c7d5a20d52d39bbeee0de269512232b0c languageName: node linkType: hard @@ -2782,17 +2782,17 @@ __metadata: linkType: hard "@storybook/core-events@file:../../../code/lib/core-events::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/core-events@file:../../../code/lib/core-events#../../../code/lib/core-events::hash=398882&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/core-events@file:../../../code/lib/core-events#../../../code/lib/core-events::hash=00e230&locator=portable-stories-nextjs%40workspace%3A." dependencies: ts-dedent: "npm:^2.0.0" - checksum: 10/4b324946e1c4a859417f99a67f0033696d43ed699c7b6715c136455039cbafb23079ac1e49ca5f8b3891abb9fd91f5dd33dbe6873f566ea722da4a111ebad830 + checksum: 10/04b637e0c32d0cf6b8b7f13a9c3366ae2f8d1881ac1e0024cb2d02cf4f38052a2655676c67876644c81fd4c351ebbf138afb6873d2449d3b8bcbecf4596b22b5 languageName: node linkType: hard "@storybook/core-server@file:../../../code/lib/core-server::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/core-server@file:../../../code/lib/core-server#../../../code/lib/core-server::hash=be7821&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/core-server@file:../../../code/lib/core-server#../../../code/lib/core-server::hash=6e21ef&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@aw-web-design/x-default-browser": "npm:1.4.126" "@babel/core": "npm:^7.23.9" @@ -2837,36 +2837,36 @@ __metadata: util-deprecate: "npm:^1.0.2" watchpack: "npm:^2.2.0" ws: "npm:^8.2.3" - checksum: 10/e479f05a9461416849ffa168f31a3cb1b3584b6521e618e9478d92f1061dcfc67e80f80ed29315a72e1ea19552ed475a890194597c2bba4eaf9c3d313ca507d1 + checksum: 10/052920abcb3352dc422ed230cda74a60996475600ce4bf23e0566dfeb25d2b5b86e7d84a19a47240b518a067bd74dec1bfae7674d68b3c59099c0ebd16e588d7 languageName: node linkType: hard "@storybook/core-webpack@file:../../../code/lib/core-webpack::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/core-webpack@file:../../../code/lib/core-webpack#../../../code/lib/core-webpack::hash=149c77&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/core-webpack@file:../../../code/lib/core-webpack#../../../code/lib/core-webpack::hash=a48486&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-common": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/types": "workspace:*" "@types/node": "npm:^18.0.0" ts-dedent: "npm:^2.0.0" - checksum: 10/1280b36bad4121176016ff5d7c9c4677361ac6aa61d0319daf9812ca29bba2bb52a5acd9696a7cc749b4559e2e459808bbb97aaa75dc00d3a1a355367f58beeb + checksum: 10/f605ac68389a0ea374291444486bf82be36f01bf75ff1756bbc0d7de2a836095a695a072cdc14fbd941d4f49745cc775e3e02b29b9ed42065902e2fdd8091835 languageName: node linkType: hard "@storybook/csf-plugin@file:../../../code/lib/csf-plugin::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/csf-plugin@file:../../../code/lib/csf-plugin#../../../code/lib/csf-plugin::hash=82231f&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/csf-plugin@file:../../../code/lib/csf-plugin#../../../code/lib/csf-plugin::hash=786030&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/csf-tools": "workspace:*" unplugin: "npm:^1.3.1" - checksum: 10/de0d6aa14f4317ddeaf95d2fb481c9ca074d324a2d234f9f6faccf60f5e2980c4100732532071a4cdd57cb9036e6d1a119ffa2eaf0133f53a399fbeb974cd6a3 + checksum: 10/76d71cc728d93f09e0869a052b131c8b2d2307355c09c4396706e61b948c63fe7991110e8a1e6eb91f7802fe2030b53070292067adf2496f8924326f36c760f8 languageName: node linkType: hard "@storybook/csf-tools@file:../../../code/lib/csf-tools::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/csf-tools@file:../../../code/lib/csf-tools#../../../code/lib/csf-tools::hash=add4b8&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/csf-tools@file:../../../code/lib/csf-tools#../../../code/lib/csf-tools::hash=edd208&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@babel/generator": "npm:^7.23.0" "@babel/parser": "npm:^7.23.0" @@ -2877,7 +2877,7 @@ __metadata: fs-extra: "npm:^11.1.0" recast: "npm:^0.23.5" ts-dedent: "npm:^2.0.0" - checksum: 10/ecd61bff068425cfa58dc33ea9a6f11c2952a1be42309980af22a1ae6bbe80cc9dfaab90b0d7ebd7c42ef8264fdd2176e85a70bf296239adec6b04223d425291 + checksum: 10/d0205249b09db44b07382c14308e54bf527cf4f872a7ce5769486fb2099455fad045c7098c4faf133f8cf43c94fdc082f91c9165856fe6d98993553213f2a6f3 languageName: node linkType: hard @@ -2907,8 +2907,8 @@ __metadata: linkType: hard "@storybook/docs-tools@file:../../../code/lib/docs-tools::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/docs-tools@file:../../../code/lib/docs-tools#../../../code/lib/docs-tools::hash=64b2ff&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/docs-tools@file:../../../code/lib/docs-tools#../../../code/lib/docs-tools::hash=40a697&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-common": "workspace:*" "@storybook/preview-api": "workspace:*" @@ -2917,7 +2917,7 @@ __metadata: assert: "npm:^2.1.0" doctrine: "npm:^3.0.0" lodash: "npm:^4.17.21" - checksum: 10/3b50a5959d8fbd8e71b5341e9d57b0da51ad4292b9252b7e218b98c59b9a9f889eb7fcae8f51661cb3b58c33b11e79e46c0594caa9b4aaee262794cdf8188e03 + checksum: 10/5b0d4e375559fa833a2d206469993635b41a134d7ec2c20b5dcac7c5919c598134148ed10848773ce294e7a82af472090d790a09d207022627da1a6220972437 languageName: node linkType: hard @@ -2939,8 +2939,8 @@ __metadata: linkType: hard "@storybook/instrumenter@file:../../../code/lib/instrumenter::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/instrumenter@file:../../../code/lib/instrumenter#../../../code/lib/instrumenter::hash=56e904&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/instrumenter@file:../../../code/lib/instrumenter#../../../code/lib/instrumenter::hash=9f8861&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" @@ -2949,13 +2949,13 @@ __metadata: "@storybook/preview-api": "workspace:*" "@vitest/utils": "npm:^1.3.1" util: "npm:^0.12.4" - checksum: 10/1a320261c9124db9c502de624acae1e098dc8bb0ab6813b377fed432eafb1f732ad0808f2164bcfbdd0b1aefed6b894f7058a9ea8e796fc123d9f3afe4ac6df7 + checksum: 10/5328defaee67eb906c05673839abbf388cca0ddb2e66f1eb5fad6c8bca89a8b9df122d5e1b2ab409670f245e37744c3433e1c92c49ad9116fa981c80feac51b3 languageName: node linkType: hard "@storybook/manager-api@file:../../../code/lib/manager-api::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/manager-api@file:../../../code/lib/manager-api#../../../code/lib/manager-api::hash=92b465&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/manager-api@file:../../../code/lib/manager-api#../../../code/lib/manager-api::hash=73f66e&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" @@ -2972,20 +2972,20 @@ __metadata: store2: "npm:^2.14.2" telejson: "npm:^7.2.0" ts-dedent: "npm:^2.0.0" - checksum: 10/a2580bef8fa439ce74a2e9f7c4f1642bd94a508ea31b8f9876e0d8a856f2d8dc78d6e8d942fb4c5d482f91c482708f3cf42708fe05807899fd8a5a1fc9254171 + checksum: 10/16915e26260d957b65691178ffc5b57550b2750e6be44407885673e2df4f4e532cb513844405179e6cba0ae22e0f6d76811c741c0d4ff424703e4e78339c03c1 languageName: node linkType: hard "@storybook/manager@file:../../../code/ui/manager::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/manager@file:../../../code/ui/manager#../../../code/ui/manager::hash=4b786e&locator=portable-stories-nextjs%40workspace%3A." - checksum: 10/8415ceca059644634f0c46e2536713c5f889a4e949a73fc5502ac9bc4c3fc1562ec9633a2910053cff233a06e90279dd1b4a8f6a63c0ae98459224046a2fac7e + version: 8.1.0-alpha.6 + resolution: "@storybook/manager@file:../../../code/ui/manager#../../../code/ui/manager::hash=ca1cc8&locator=portable-stories-nextjs%40workspace%3A." + checksum: 10/b99169a99791cda6a1eb5e34a00aff80433a8d8a2af0766035da5eca4a6f36be2dc885ed8f2ca4955aa913dcd80b7a3d0641cd5f0dabd2f5e91d2f87fa5fc7bd languageName: node linkType: hard "@storybook/nextjs@file:../../../code/frameworks/nextjs::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/nextjs@file:../../../code/frameworks/nextjs#../../../code/frameworks/nextjs::hash=07534e&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/nextjs@file:../../../code/frameworks/nextjs#../../../code/frameworks/nextjs::hash=06106f&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@babel/core": "npm:^7.23.2" "@babel/plugin-syntax-bigint": "npm:^7.8.3" @@ -3009,6 +3009,7 @@ __metadata: "@storybook/preset-react-webpack": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/react": "workspace:*" + "@storybook/test": "workspace:*" "@storybook/types": "workspace:*" "@types/node": "npm:^18.0.0" "@types/semver": "npm:^7.3.4" @@ -3042,20 +3043,20 @@ __metadata: optional: true webpack: optional: true - checksum: 10/fe6e9c489eea6455ff7e5021777715a157b70ac54cf2e85f1f73d8afd5a55e964a08ebda581172d51fb3f4a6a2c33b48f2299ba24e54bdd7d65a11bfd6c96863 + checksum: 10/65a8ba601d1ab74a5b8af2e4399629e6cb1715a3003828664264792eabf68b403d15251287a819d930c25b612325ff58eb1fe603036f65f51d51682501672f6e languageName: node linkType: hard "@storybook/node-logger@file:../../../code/lib/node-logger::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/node-logger@file:../../../code/lib/node-logger#../../../code/lib/node-logger::hash=ee9425&locator=portable-stories-nextjs%40workspace%3A." - checksum: 10/2cef663554d4c27c7e49d51432e53d7a847c1ad5072ef479201b648a61a5d039f136451583175b0798fcacee2a1bd824fd6ca0eb3a87f6a81ebca26170821ef7 + version: 8.1.0-alpha.6 + resolution: "@storybook/node-logger@file:../../../code/lib/node-logger#../../../code/lib/node-logger::hash=0d0b98&locator=portable-stories-nextjs%40workspace%3A." + checksum: 10/a3370020de702f0645ebe90da5e61d2a5d04bf719f6cda3b4c09e2b3f377c49a3d2c922175d2909d00fae0b7ef9453ac6f7ffee14399bd18ae3a6f9783736504 languageName: node linkType: hard "@storybook/preset-react-webpack@file:../../../code/presets/react-webpack::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/preset-react-webpack@file:../../../code/presets/react-webpack#../../../code/presets/react-webpack::hash=b3541b&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/preset-react-webpack@file:../../../code/presets/react-webpack#../../../code/presets/react-webpack::hash=72b9b2&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-webpack": "workspace:*" "@storybook/docs-tools": "workspace:*" @@ -3078,13 +3079,13 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 10/eebfdb7f679a3909d2d7905b2b83acc4ef359c1d4c78048128725c2fce667725c75588fc9d89eaf28998df6f5a6daeee36ff2dee570aa4210b3a92bc83d84ff9 + checksum: 10/f0304ce896fb0dc5d0aa170b82a567daccf7d2f45425da0c8ed9136d6f4ec0acd544474e37933145c639bd706e6846f8ec6d766a04b6a92cb00420f9fb498865 languageName: node linkType: hard "@storybook/preview-api@file:../../../code/lib/preview-api::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/preview-api@file:../../../code/lib/preview-api#../../../code/lib/preview-api::hash=249991&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/preview-api@file:../../../code/lib/preview-api#../../../code/lib/preview-api::hash=8ed046&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" @@ -3100,14 +3101,14 @@ __metadata: tiny-invariant: "npm:^1.3.1" ts-dedent: "npm:^2.0.0" util-deprecate: "npm:^1.0.2" - checksum: 10/8c479853d76c40af94ce80270579f312989465d3e9ba72bbf91d244e58ecbd1d096892ccb739af223600b36e6e585505a59fd103266da99ee6d03421fec654c2 + checksum: 10/d5a6dc59d0cf9660869c7059567ffe09e1d590835aa781a5a94fc109ae67ae961f82db05a5e983b209e76a595ef3b9669f25897a174701fbcd2846a321ddd8e6 languageName: node linkType: hard "@storybook/preview@file:../../../code/lib/preview::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/preview@file:../../../code/lib/preview#../../../code/lib/preview::hash=0b541b&locator=portable-stories-nextjs%40workspace%3A." - checksum: 10/a8cccf3680dd96e3855c2ebba9eaa66b37bc142023fbdf189ccd60053bb883d201a02bceda3f5682e9fc3878ceebe474a483f110e05caf365f8a2f632ac24aba + version: 8.1.0-alpha.6 + resolution: "@storybook/preview@file:../../../code/lib/preview#../../../code/lib/preview::hash=1b46c6&locator=portable-stories-nextjs%40workspace%3A." + checksum: 10/6f32462ffef399955e23eda2f74ab4de1187eb9f81490207002fd36cb1801ad7f34cc7a86de10613f0a971c0dad8d7b9790b593fed87b994257b87a5874c7db2 languageName: node linkType: hard @@ -3130,18 +3131,18 @@ __metadata: linkType: hard "@storybook/react-dom-shim@file:../../../code/lib/react-dom-shim::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/react-dom-shim@file:../../../code/lib/react-dom-shim#../../../code/lib/react-dom-shim::hash=b5101f&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/react-dom-shim@file:../../../code/lib/react-dom-shim#../../../code/lib/react-dom-shim::hash=cb4d21&locator=portable-stories-nextjs%40workspace%3A." peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: 10/2c271219da5c20c6a952df9b07313652bf67f00e426370b9bbf93c9b890f7438c24fe005e3cde6c2eeae648f4bd8928b6ec58c40e07299b5be9dc3eec532d75a + checksum: 10/fd2ab770da0b3450f92cad74f068d297cba56d51730987c2e9a866a01b3507335d913ba705e0c39bd53050f6de3415a6fb5fe32e25f01c246df05de76c888d01 languageName: node linkType: hard "@storybook/react@file:../../../code/renderers/react::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/react@file:../../../code/renderers/react#../../../code/renderers/react::hash=074121&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/react@file:../../../code/renderers/react#../../../code/renderers/react::hash=feef2f&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" "@storybook/docs-tools": "workspace:*" @@ -3171,24 +3172,24 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 10/82db446f16311861c75d9aab37d5db52f2e8c3d015e033fc7f723895609431e9fa8e741c0e634f6b0548fdf3f4d7fb740781d146e3ed9d37495d4f95abfbd641 + checksum: 10/c302a3188a07344a4ed6ff1d5e563eecba774f766433ee6c00a8db0817002cd228d2163247e8a7f0e77930aeb654ccaca2d4240f34aec578de6e1914c1d5ad3f languageName: node linkType: hard "@storybook/router@file:../../../code/lib/router::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/router@file:../../../code/lib/router#../../../code/lib/router::hash=7a6ed9&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/router@file:../../../code/lib/router#../../../code/lib/router::hash=12e846&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" memoizerific: "npm:^1.11.3" qs: "npm:^6.10.0" - checksum: 10/3cef95a81959cc85dd6e43966f0c10b32f29b592e354088b76369b29a357db83d5eb35a637f90b5120222543f65b139de3ba865eb806b565de3525285c8ac846 + checksum: 10/211a8eb4828a583ef4b882860a8eebdc9d20e79b576e46f2a53f9b87cfda6c6d95de53344cfdb767bdf64c465f55b70ffe7b2e85a800443ea8867f937bd6f452 languageName: node linkType: hard "@storybook/telemetry@file:../../../code/lib/telemetry::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/telemetry@file:../../../code/lib/telemetry#../../../code/lib/telemetry::hash=6e2d8d&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/telemetry@file:../../../code/lib/telemetry#../../../code/lib/telemetry::hash=23a3d9&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-common": "workspace:*" @@ -3198,13 +3199,13 @@ __metadata: fetch-retry: "npm:^5.0.2" fs-extra: "npm:^11.1.0" read-pkg-up: "npm:^7.0.1" - checksum: 10/eb476498e119b62ac7fc0e06073cc440902ffc859b0f49bb2a6072d3ef949033cd4b675cb93b8847f2b5dd9bfe9ae1e9ee191ff9de5898a32ab873dcdeb1d6eb + checksum: 10/609dd2f7509d5b8611fead6e310e485dbd0ee4ad9c02d75c7cd66be068fbecb77e2f95f8b7879c01b2767b1e566031e9eae5c616ce36fab23df92d7d6d5f05fc languageName: node linkType: hard "@storybook/test@file:../../../code/lib/test::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/test@file:../../../code/lib/test#../../../code/lib/test::hash=45d0f8&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/test@file:../../../code/lib/test#../../../code/lib/test::hash=b5fbc8&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" @@ -3217,13 +3218,13 @@ __metadata: "@vitest/spy": "npm:^1.3.1" chai: "npm:^4.4.1" util: "npm:^0.12.4" - checksum: 10/6101f14b80197cb9a500e4a7872f873abc7c93f6946e5890b2d49b77c503c52ff7b7a4125fb2263466fd0345754c64538a41be6222364660b35e33cc2b549ce9 + checksum: 10/47a026e105e8e42c6942b48d87bf8d96310a8507da9a2f6f923aa3dbb45a75846d59779d2e69b66a3fddbfe355de1e00dd49f8753b4b04939cc755127149f4b8 languageName: node linkType: hard "@storybook/theming@file:../../../code/lib/theming::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/theming@file:../../../code/lib/theming#../../../code/lib/theming::hash=acc5fc&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/theming@file:../../../code/lib/theming#../../../code/lib/theming::hash=cf2697&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@emotion/use-insertion-effect-with-fallbacks": "npm:^1.0.1" "@storybook/client-logger": "workspace:*" @@ -3237,7 +3238,7 @@ __metadata: optional: true react-dom: optional: true - checksum: 10/95ee62ab3810f96e3d16924110bc2a267973e32b67b1cd08b57e6111616f8d488c9cfd8f354bda8ee3db343437b8acdaa5f9ee923671b8783efbcffc4fc3397c + checksum: 10/c87b12f79a54319df221805988e5da6955265e1a76f67daba34c401959ca0d12c77b19a53c5ed824782979b09f19eec774e68f6d9bd126e0d0640d8197a2d381 languageName: node linkType: hard @@ -12068,14 +12069,14 @@ __metadata: linkType: hard "storybook@file:../../../code/lib/cli-storybook::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "storybook@file:../../../code/lib/cli-storybook#../../../code/lib/cli-storybook::hash=6f2e56&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "storybook@file:../../../code/lib/cli-storybook#../../../code/lib/cli-storybook::hash=f0c1b6&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/cli": "workspace:*" bin: sb: ./index.js storybook: ./index.js - checksum: 10/d2acea2b4b4a262aab8a97f90847cb53f62e004b1c18d2f583983f43bf781ef5f3cb2a0cec84b8ac00c8ad0f030982f5cb07643c078bccf403a629986d66871d + checksum: 10/941843aa4b11da491079c9ee193117cf88153d3836dc58771c7a4f743779e88ed941157d55101925d7fd372fdb9d2160e4b156f4e30227e3785525311f75d93d languageName: node linkType: hard From 594c9c3347284fc0dec3eb32afe79dccb0c5b5f5 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 9 Apr 2024 14:35:39 +0200 Subject: [PATCH 067/380] Update package.json and jest.config.js for next/headers alias --- code/frameworks/nextjs/package.json | 3 +++ code/frameworks/nextjs/src/headers/cookies.ts | 6 ++++-- code/frameworks/nextjs/src/preview.tsx | 5 ++++- .../portable-stories-kitchen-sink/nextjs/yarn.lock | 4 ++-- 4 files changed, 13 insertions(+), 5 deletions(-) diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index ed1946d4a6ce..1501ff6f23a0 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -64,6 +64,9 @@ ], "dist/image-context": [ "dist/image-context.d.ts" + ], + "headers": [ + "dist/headers/index.d.ts" ] } }, diff --git a/code/frameworks/nextjs/src/headers/cookies.ts b/code/frameworks/nextjs/src/headers/cookies.ts index 0335527367fc..5b6117d5a86b 100644 --- a/code/frameworks/nextjs/src/headers/cookies.ts +++ b/code/frameworks/nextjs/src/headers/cookies.ts @@ -1,13 +1,15 @@ /* eslint-disable no-underscore-dangle */ import { fn } from '@storybook/test'; -import type { HeadersStore } from './headers'; -import { headers } from './headers'; import type { RequestCookies } from 'next/dist/compiled/@edge-runtime/cookies'; import { parseCookie, stringifyCookie, type RequestCookie, } from 'next/dist/compiled/@edge-runtime/cookies'; +// We need this import to be a singleton, and because it's used in multiple entrypoints +// both in ESM and CJS, importing it via the package name instead of having a local import +// is the only way to achieve it actually being a singleton +import { headers, type HeadersStore } from '@storybook/nextjs/headers'; const stringifyCookies = (map: Map) => { return Array.from(map) diff --git a/code/frameworks/nextjs/src/preview.tsx b/code/frameworks/nextjs/src/preview.tsx index 0d0b30f9d3ac..7181a948e4ab 100644 --- a/code/frameworks/nextjs/src/preview.tsx +++ b/code/frameworks/nextjs/src/preview.tsx @@ -4,7 +4,10 @@ import { ImageDecorator } from './images/decorator'; import { RouterDecorator } from './routing/decorator'; import { StyledJsxDecorator } from './styledJsx/decorator'; import { HeadManagerDecorator } from './head-manager/decorator'; -import { cookies, headers } from './headers'; +// We need this import to be a singleton, and because it's used in multiple entrypoints +// both in ESM and CJS, importing it via the package name instead of having a local import +// is the only way to achieve it actually being a singleton +import { cookies, headers } from '@storybook/nextjs/headers'; function addNextHeadCount() { const meta = document.createElement('meta'); diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock b/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock index c9002d189472..b67bf0e79b9a 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock @@ -2985,7 +2985,7 @@ __metadata: "@storybook/nextjs@file:../../../code/frameworks/nextjs::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/nextjs@file:../../../code/frameworks/nextjs#../../../code/frameworks/nextjs::hash=06106f&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/nextjs@file:../../../code/frameworks/nextjs#../../../code/frameworks/nextjs::hash=449323&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@babel/core": "npm:^7.23.2" "@babel/plugin-syntax-bigint": "npm:^7.8.3" @@ -3043,7 +3043,7 @@ __metadata: optional: true webpack: optional: true - checksum: 10/65a8ba601d1ab74a5b8af2e4399629e6cb1715a3003828664264792eabf68b403d15251287a819d930c25b612325ff58eb1fe603036f65f51d51682501672f6e + checksum: 10/cca75d58487e2dcba461dc15fb913f2ec60afa0fddbd0038eba3983f5286fa6555ab4c00e94b6eb1048fad85656a88fb7e5fd6534ec0907c3c46049ace5551dc languageName: node linkType: hard From d1fcfd5c3b751a8d590c3bdf2ad9bff7f3162be8 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 9 Apr 2024 15:11:35 +0200 Subject: [PATCH 068/380] Add explanation to webpack alias --- code/frameworks/nextjs/src/headers/webpack.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/code/frameworks/nextjs/src/headers/webpack.ts b/code/frameworks/nextjs/src/headers/webpack.ts index 8f2d63a165ca..9e78fc459cac 100644 --- a/code/frameworks/nextjs/src/headers/webpack.ts +++ b/code/frameworks/nextjs/src/headers/webpack.ts @@ -3,6 +3,8 @@ import type { Configuration as WebpackConfig } from 'webpack'; export const configureNextHeaders = (baseConfig: WebpackConfig): void => { const resolve = baseConfig.resolve ?? {}; + // Use headersPath for both next/headers and @storybook/nextjs/headers imports + // to make sure they all serve the MJS version of the file const headersPath = join( dirname(require.resolve('@storybook/nextjs/package.json')), '/dist/headers/index.mjs' From 3209c59b5806dfa284c4c223934953741f52fc4f Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 10 Apr 2024 10:19:40 +0200 Subject: [PATCH 069/380] fix type generation --- code/frameworks/nextjs/package.json | 3 ++- code/frameworks/nextjs/src/headers/cookies.ts | 2 ++ code/frameworks/nextjs/src/preview.tsx | 7 +++++-- 3 files changed, 9 insertions(+), 3 deletions(-) diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 1501ff6f23a0..7175bb476a05 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -166,8 +166,9 @@ "./src/image-context.ts", "./src/index.ts", "./src/preset.ts", + "./src/headers/cookies.ts", + "./src/headers/headers.ts", "./src/preview.tsx", - "./src/headers/index.ts", "./src/next-image-loader-stub.ts", "./src/images/decorator.tsx", "./src/images/next-legacy-image.tsx", diff --git a/code/frameworks/nextjs/src/headers/cookies.ts b/code/frameworks/nextjs/src/headers/cookies.ts index 5b6117d5a86b..d7c9524ac43f 100644 --- a/code/frameworks/nextjs/src/headers/cookies.ts +++ b/code/frameworks/nextjs/src/headers/cookies.ts @@ -9,6 +9,8 @@ import { // We need this import to be a singleton, and because it's used in multiple entrypoints // both in ESM and CJS, importing it via the package name instead of having a local import // is the only way to achieve it actually being a singleton +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore we must ignore types here as during compilation they are not generated yet import { headers, type HeadersStore } from '@storybook/nextjs/headers'; const stringifyCookies = (map: Map) => { diff --git a/code/frameworks/nextjs/src/preview.tsx b/code/frameworks/nextjs/src/preview.tsx index 7181a948e4ab..0bb931dbd85e 100644 --- a/code/frameworks/nextjs/src/preview.tsx +++ b/code/frameworks/nextjs/src/preview.tsx @@ -1,12 +1,15 @@ -import type { Addon_DecoratorFunction } from '@storybook/types'; +import type { Addon_DecoratorFunction, Addon_LoaderFunction } from '@storybook/types'; import './config/preview'; import { ImageDecorator } from './images/decorator'; import { RouterDecorator } from './routing/decorator'; import { StyledJsxDecorator } from './styledJsx/decorator'; import { HeadManagerDecorator } from './head-manager/decorator'; + // We need this import to be a singleton, and because it's used in multiple entrypoints // both in ESM and CJS, importing it via the package name instead of having a local import // is the only way to achieve it actually being a singleton +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore we must ignore types here as during compilation they are not generated yet import { cookies, headers } from '@storybook/nextjs/headers'; function addNextHeadCount() { @@ -25,7 +28,7 @@ export const decorators: Addon_DecoratorFunction[] = [ HeadManagerDecorator, ]; -export const loaders = async () => { +export const loaders: Addon_LoaderFunction = async () => { cookies().mockRestore(); headers().mockRestore(); }; From 6220e9365d1d9ec6c35b32be633674852d6a381c Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 10 Apr 2024 11:04:06 +0200 Subject: [PATCH 070/380] add more spies --- code/frameworks/nextjs/src/headers/headers.ts | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/code/frameworks/nextjs/src/headers/headers.ts b/code/frameworks/nextjs/src/headers/headers.ts index e4b0696c00d2..46f30fe0c171 100644 --- a/code/frameworks/nextjs/src/headers/headers.ts +++ b/code/frameworks/nextjs/src/headers/headers.ts @@ -64,25 +64,25 @@ export class HeadersStore extends Headers implements HeadersAdapter { } ).mockName('headers().forEach'); - public *entries(): IterableIterator<[string, string]> { + public entries = fn(function* (this: HeadersStore): IterableIterator<[string, string]> { for (const key of Object.keys(this.headers)) { const name = key.toLowerCase(); // We assert here that this is a string because we got it from the // Object.keys() call above. const value = this.get(name) as string; - yield [name, value] as [string, string]; + yield [name, value]; } - } + }).mockName('headers().entries'); - public *keys(): IterableIterator { + public keys = fn(function* (this: HeadersStore): IterableIterator { for (const key of Object.keys(this.headers)) { const name = key.toLowerCase(); yield name; } - } + }).mockName('headers().keys'); - public *values(): IterableIterator { + public values = fn(function* (this: HeadersStore): IterableIterator { for (const key of Object.keys(this.headers)) { // We assert here that this is a string because we got it from the // Object.keys() call above. @@ -90,7 +90,7 @@ export class HeadersStore extends Headers implements HeadersAdapter { yield value; } - } + }).mockName('headers().values'); public [Symbol.iterator](): IterableIterator<[string, string]> { return this.entries(); From 57d2ec396c309a82d0e5f8abb813993a187a4351 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 10 Apr 2024 11:07:43 +0200 Subject: [PATCH 071/380] fix entrypoint --- code/frameworks/nextjs/package.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 7175bb476a05..83f28e8756e3 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -166,8 +166,7 @@ "./src/image-context.ts", "./src/index.ts", "./src/preset.ts", - "./src/headers/cookies.ts", - "./src/headers/headers.ts", + "./src/headers/index.ts", "./src/preview.tsx", "./src/next-image-loader-stub.ts", "./src/images/decorator.tsx", From 14d4f0f4d54de13fe67e573ffbefe76548de99bc Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 10 Apr 2024 11:07:58 +0200 Subject: [PATCH 072/380] improve tests --- .../NextHeader.stories.tsx | 26 ++++++++++++++++--- .../stories_nextjs-default-ts/NextHeader.tsx | 2 +- 2 files changed, 23 insertions(+), 5 deletions(-) diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.stories.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.stories.tsx index fe7c8ed9f34a..4ef5a3d7466b 100644 --- a/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.stories.tsx +++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.stories.tsx @@ -19,10 +19,28 @@ export const Default: Story = { }); headers().set('timezone', 'Central European Summer Time'); }, - play: async ({ canvasElement }) => { + play: async ({ canvasElement, step }) => { const canvas = within(canvasElement); - const submitButton = await canvas.findByRole('button'); - await userEvent.click(submitButton); - expect(headers().get('cookie')).toContain('user-id=encrypted-id'); + const headersMock = headers(); + const cookiesMock = cookies(); + await step('Cookie and header store apis are called upon rendering', async () => { + await expect(cookiesMock.getAll).toHaveBeenCalled(); + await expect(headersMock.entries).toHaveBeenCalled(); + }); + + await step('Upon clicking on submit, the user-id cookie is set', async () => { + const submitButton = await canvas.findByRole('button'); + await userEvent.click(submitButton); + + await expect(cookiesMock.set).toHaveBeenCalledWith('user-id', 'encrypted-id'); + }); + + await step('The user-id cookie is available in cookie and header stores', async () => { + await expect(headersMock.get('cookie')).toContain('user-id=encrypted-id'); + await expect(cookiesMock.get('user-id')).toEqual({ + name: 'user-id', + value: 'encrypted-id', + }); + }); }, }; diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.tsx index bb70c020699c..b93c9611c774 100644 --- a/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.tsx +++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.tsx @@ -22,7 +22,7 @@ export default async function Component() { })}

Headers:

- {Array.from(headers()).map(([name, value]: [string, string]) => { + {Array.from(headers().entries()).map(([name, value]: [string, string]) => { return (

Name: {name} From 34ca025f5b897fc6f3c5b8a568de7fae6220a8cc Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 10 Apr 2024 11:09:49 +0200 Subject: [PATCH 073/380] Change entrypoint to `@storybook/nextjs/headers.mock` --- code/frameworks/nextjs/package.json | 4 ++-- code/frameworks/nextjs/src/headers/cookies.ts | 2 +- code/frameworks/nextjs/src/headers/webpack.ts | 2 +- code/frameworks/nextjs/src/preview.tsx | 2 +- .../template/stories_nextjs-default-ts/NextHeader.stories.tsx | 2 +- .../portable-stories-kitchen-sink/nextjs/jest.config.js | 2 +- .../nextjs/stories/NextHeader.stories.tsx | 2 +- 7 files changed, 8 insertions(+), 8 deletions(-) diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 83f28e8756e3..e30984136eae 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -47,7 +47,7 @@ "require": "./dist/next-image-loader-stub.js", "import": "./dist/next-image-loader-stub.mjs" }, - "./headers": { + "./headers.mock": { "types": "./dist/headers/index.d.ts", "require": "./dist/headers/index.js", "import": "./dist/headers/index.mjs" @@ -65,7 +65,7 @@ "dist/image-context": [ "dist/image-context.d.ts" ], - "headers": [ + "headers.mock": [ "dist/headers/index.d.ts" ] } diff --git a/code/frameworks/nextjs/src/headers/cookies.ts b/code/frameworks/nextjs/src/headers/cookies.ts index d7c9524ac43f..13bc7779d3ef 100644 --- a/code/frameworks/nextjs/src/headers/cookies.ts +++ b/code/frameworks/nextjs/src/headers/cookies.ts @@ -11,7 +11,7 @@ import { // is the only way to achieve it actually being a singleton // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore we must ignore types here as during compilation they are not generated yet -import { headers, type HeadersStore } from '@storybook/nextjs/headers'; +import { headers, type HeadersStore } from '@storybook/nextjs/headers.mock'; const stringifyCookies = (map: Map) => { return Array.from(map) diff --git a/code/frameworks/nextjs/src/headers/webpack.ts b/code/frameworks/nextjs/src/headers/webpack.ts index 9e78fc459cac..fceb5049f6d2 100644 --- a/code/frameworks/nextjs/src/headers/webpack.ts +++ b/code/frameworks/nextjs/src/headers/webpack.ts @@ -13,6 +13,6 @@ export const configureNextHeaders = (baseConfig: WebpackConfig): void => { resolve.alias = { ...resolve.alias, 'next/headers': headersPath, - '@storybook/nextjs/headers': headersPath, + '@storybook/nextjs/headers.mock': headersPath, }; }; diff --git a/code/frameworks/nextjs/src/preview.tsx b/code/frameworks/nextjs/src/preview.tsx index 0bb931dbd85e..7fb164d1f0de 100644 --- a/code/frameworks/nextjs/src/preview.tsx +++ b/code/frameworks/nextjs/src/preview.tsx @@ -10,7 +10,7 @@ import { HeadManagerDecorator } from './head-manager/decorator'; // is the only way to achieve it actually being a singleton // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore we must ignore types here as during compilation they are not generated yet -import { cookies, headers } from '@storybook/nextjs/headers'; +import { cookies, headers } from '@storybook/nextjs/headers.mock'; function addNextHeadCount() { const meta = document.createElement('meta'); diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.stories.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.stories.tsx index 4ef5a3d7466b..d8abfe11bdd1 100644 --- a/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.stories.tsx +++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.stories.tsx @@ -2,7 +2,7 @@ import NextHeader from './NextHeader'; import type { Meta } from '@storybook/react'; import type { StoryObj } from '@storybook/react'; import { expect, userEvent, within } from '@storybook/test'; -import { cookies, headers } from '@storybook/nextjs/headers'; +import { cookies, headers } from '@storybook/nextjs/headers.mock'; export default { component: NextHeader, diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/jest.config.js b/test-storybooks/portable-stories-kitchen-sink/nextjs/jest.config.js index 1869752aaa5d..deb85e5a4b0e 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/jest.config.js +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/jest.config.js @@ -13,7 +13,7 @@ const customJestConfig = { setupFilesAfterEnv: ['./jest.setup.ts'], // TODO add docs about this: alias next/headers to @storybook/nextjs/headers moduleNameMapper: { - '^next/headers$': '@storybook/nextjs/headers', + '^next/headers$': '@storybook/nextjs/headers.mock', }, }; diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/NextHeader.stories.tsx b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/NextHeader.stories.tsx index d6b0cf7f922b..edbe082ef0f0 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/NextHeader.stories.tsx +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/NextHeader.stories.tsx @@ -1,7 +1,7 @@ import type { Meta } from '@storybook/react'; import type { StoryObj } from '@storybook/react'; import { expect, userEvent, within } from '@storybook/test'; -import { cookies, headers } from '@storybook/nextjs/headers'; +import { cookies, headers } from '@storybook/nextjs/headers.mock'; import NextHeader from './NextHeader'; export default { From 5c20e9514414e465eb7bd68903b00cc4266d5b4f Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 10 Apr 2024 11:12:21 +0200 Subject: [PATCH 074/380] update portable stories test --- .../nextjs/stories/NextHeader.stories.tsx | 26 +++- .../nextjs/yarn.lock | 144 +++++++++--------- 2 files changed, 94 insertions(+), 76 deletions(-) diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/NextHeader.stories.tsx b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/NextHeader.stories.tsx index edbe082ef0f0..1c75f64375ea 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/NextHeader.stories.tsx +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/NextHeader.stories.tsx @@ -19,10 +19,28 @@ export const Default: Story = { }); headers().set('timezone', 'Central European Summer Time'); }, - play: async ({ canvasElement }) => { + play: async ({ canvasElement, step }) => { const canvas = within(canvasElement); - const submitButton = await canvas.findByRole('button'); - await userEvent.click(submitButton); - expect(headers().get('cookie')).toContain('user-id=encrypted-id'); + const headersMock = headers(); + const cookiesMock = cookies(); + await step('Cookie and header store apis are called upon rendering', async () => { + await expect(cookiesMock.getAll).toHaveBeenCalled(); + await expect(headersMock.entries).toHaveBeenCalled(); + }); + + await step('Upon clicking on submit, the user-id cookie is set', async () => { + const submitButton = await canvas.findByRole('button'); + await userEvent.click(submitButton); + + await expect(cookiesMock.set).toHaveBeenCalledWith('user-id', 'encrypted-id'); + }); + + await step('The user-id cookie is available in cookie and header stores', async () => { + await expect(headersMock.get('cookie')).toContain('user-id=encrypted-id'); + await expect(cookiesMock.get('user-id')).toEqual({ + name: 'user-id', + value: 'encrypted-id', + }); + }); }, }; diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock b/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock index b67bf0e79b9a..7b54b424d5b9 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock @@ -2379,7 +2379,7 @@ __metadata: "@storybook/addon-actions@file:../../../code/addons/actions::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/addon-actions@file:../../../code/addons/actions#../../../code/addons/actions::hash=65179b&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/addon-actions@file:../../../code/addons/actions#../../../code/addons/actions::hash=99649f&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-events": "workspace:*" "@storybook/global": "npm:^5.0.0" @@ -2387,18 +2387,18 @@ __metadata: dequal: "npm:^2.0.2" polished: "npm:^4.2.2" uuid: "npm:^9.0.0" - checksum: 10/9ed534d56ffd4ae256837a80af482961a5881624cb85eb46983e913497bbdcd8c441deac96ea76bf99eb1f7b0fb523b60a7eec4059a78eadf00e92aa6bf977b3 + checksum: 10/79a14c7a74591e404e5ec22c2b6c9eaa03dd48bf3316470dd2642e3c70abd7c90b168fd350e729b617967c7d759df2ef0107534d218d1138b12e737c8a3e888e languageName: node linkType: hard "@storybook/addon-backgrounds@file:../../../code/addons/backgrounds::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/addon-backgrounds@file:../../../code/addons/backgrounds#../../../code/addons/backgrounds::hash=026986&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/addon-backgrounds@file:../../../code/addons/backgrounds#../../../code/addons/backgrounds::hash=bbac2f&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" memoizerific: "npm:^1.11.3" ts-dedent: "npm:^2.0.0" - checksum: 10/99d407bf5df62a7e85233e5a484ec0801ed309c3b910af79c65bbcceabeb1a7e8619c89178ada8ea20c1dae9196d559dbd75905732fe6a181374bf8c8d305993 + checksum: 10/aaae35c1f570d788cded175bad9b07ce9826023fa320e6d276c62678953d07cfe98f636005d7ce0456d0b5df699e16377317edcfdb7d304d3b05cc4d1683bb72 languageName: node linkType: hard @@ -2419,7 +2419,7 @@ __metadata: "@storybook/addon-docs@file:../../../code/addons/docs::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/addon-docs@file:../../../code/addons/docs#../../../code/addons/docs::hash=58d358&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/addon-docs@file:../../../code/addons/docs#../../../code/addons/docs::hash=c90446&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@babel/core": "npm:^7.12.3" "@mdx-js/react": "npm:^3.0.0" @@ -2441,13 +2441,13 @@ __metadata: rehype-external-links: "npm:^3.0.0" rehype-slug: "npm:^6.0.0" ts-dedent: "npm:^2.0.0" - checksum: 10/e794088e3f6cdad1c5ea178ab7d07db27da5729bbb380bee957a46d185f19125ad91519d56d2a3d68b7d60afd9e31a9a72edb2f24f5ba68866a531a25e97ef35 + checksum: 10/6cb03b37a894e2a563a67bcc1179194a7e48f202ed438763cce7b6255697fd6dd192607076dad6503d7be4a1d094daf9d18daf50b8aebae71ededfe020f151f1 languageName: node linkType: hard "@storybook/addon-essentials@file:../../../code/addons/essentials::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/addon-essentials@file:../../../code/addons/essentials#../../../code/addons/essentials::hash=5092fe&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/addon-essentials@file:../../../code/addons/essentials#../../../code/addons/essentials::hash=584ec5&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/addon-actions": "workspace:*" "@storybook/addon-backgrounds": "workspace:*" @@ -2463,22 +2463,22 @@ __metadata: "@storybook/node-logger": "workspace:*" "@storybook/preview-api": "workspace:*" ts-dedent: "npm:^2.0.0" - checksum: 10/6e482c766038f53305099b1cad8195bb546bb2b18a701b2f85491e9c5393e39e715b6505672ffb36616d5ae5baa9f06d16dd6f4a86d3faa31ee550d045a4bc57 + checksum: 10/986829238ed66c8818ab27995effd47614c4182aa326e70de645d38babf58f2cab76c7a2f1825a34cecab07ca78ca2bb5e69938da2dec3bb9837905f7e43ec9b languageName: node linkType: hard "@storybook/addon-highlight@file:../../../code/addons/highlight::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/addon-highlight@file:../../../code/addons/highlight#../../../code/addons/highlight::hash=a69c2f&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/addon-highlight@file:../../../code/addons/highlight#../../../code/addons/highlight::hash=291b82&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" - checksum: 10/e61e168997b91f2ab729f02de3e186a26c697c0851d188d7ece1ec145fcd84c7fea3cd3fac3608269bb4944c9b4e13436493f65ddf8c0a808e30bb5ece70d9f3 + checksum: 10/ecf6c7aecffb3b61cd08468d9a8f0f67b191ff8c4d9df0022b077f3e0cb6a42b109a8d844745c14a62ae740131708c606b3b5e359fbf5921559b0e02a85cc686 languageName: node linkType: hard "@storybook/addon-interactions@file:../../../code/addons/interactions::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/addon-interactions@file:../../../code/addons/interactions#../../../code/addons/interactions::hash=3e90ca&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/addon-interactions@file:../../../code/addons/interactions#../../../code/addons/interactions::hash=e7e04a&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" "@storybook/instrumenter": "workspace:*" @@ -2486,43 +2486,43 @@ __metadata: "@storybook/types": "workspace:*" polished: "npm:^4.2.2" ts-dedent: "npm:^2.2.0" - checksum: 10/18c21704ebc20d55fe75e735f89e8c5926b6fe3a44e7025de16d666cf3c6435e9fc19ada8dc3714f4406ce1f3b3117120610c7c8bcfefb86c913a6bbf14f668a + checksum: 10/c66d7db9c1356903d444211962054b0a692a56f7ed5debcaa1f2e40fd57575975b8de86c2fb3be3a140e69cdc8f36b25f81be6e2ca55fb4facf826694d8be65f languageName: node linkType: hard "@storybook/addon-measure@file:../../../code/addons/measure::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/addon-measure@file:../../../code/addons/measure#../../../code/addons/measure::hash=086736&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/addon-measure@file:../../../code/addons/measure#../../../code/addons/measure::hash=43b2ca&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" tiny-invariant: "npm:^1.3.1" - checksum: 10/3f9a7ddab76235f46cfaa96386074964a311908344e5a4617025dcbab610742e48672b8f236a0d4a5c254273ae4b959ef9114bf31e22ebfcae085c17309c2f47 + checksum: 10/ce880ee3acae8c6a5994a5905724040f1cb9b7a1c1654c6ab6dfec0f61298db78afc78309aa966eecf1dbdc2e59f48cb2108c7514305ca701eeb19262477bfc8 languageName: node linkType: hard "@storybook/addon-outline@file:../../../code/addons/outline::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/addon-outline@file:../../../code/addons/outline#../../../code/addons/outline::hash=c2049c&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/addon-outline@file:../../../code/addons/outline#../../../code/addons/outline::hash=772f7e&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" ts-dedent: "npm:^2.0.0" - checksum: 10/6935af0b38fdb46c5bee74c22a170b2f10ffcbff14ee039ddc8488f3b6eb1c2d3f11c35c9761eaa8ddfafe3fecaef3ace12a5a30610fc4d1c9a5b161d7fbba53 + checksum: 10/17d761b1298d08adc15d65dfb3efb91440cc73e6828ab7ee290703e36f9c2756546a99220119c15d03697c5ac2b71ccdd7b98fba4ebb87faab9caf9ba053dbdc languageName: node linkType: hard "@storybook/addon-toolbars@file:../../../code/addons/toolbars::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/addon-toolbars@file:../../../code/addons/toolbars#../../../code/addons/toolbars::hash=7413c4&locator=portable-stories-nextjs%40workspace%3A." - checksum: 10/a428f3c5b3530cd56c81c83a7e05c2f364a75a7e358dbd9f082eb1b88b875a5e721db0cb7050f1ac48117ed0d4b95a8b35e07e8f3e4b17e6cdd0076a4d959bc7 + resolution: "@storybook/addon-toolbars@file:../../../code/addons/toolbars#../../../code/addons/toolbars::hash=ce7192&locator=portable-stories-nextjs%40workspace%3A." + checksum: 10/fd28942b5da079e25cd778e7b134b34e07289044553622b1a1636e7e2da5075ddf16f66934619eb7ba3514d98425102365ea8dd8cebbf17fec4bb6849ef38ec5 languageName: node linkType: hard "@storybook/addon-viewport@file:../../../code/addons/viewport::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/addon-viewport@file:../../../code/addons/viewport#../../../code/addons/viewport::hash=57d9d2&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/addon-viewport@file:../../../code/addons/viewport#../../../code/addons/viewport::hash=1fd57e&locator=portable-stories-nextjs%40workspace%3A." dependencies: memoizerific: "npm:^1.11.3" - checksum: 10/752aa713b8b924944dbf1b3b904dd31e4508651ef9b8437dc3a60444890f760a7f76fcbbe80037c0f8e790e31a37d062aa6aa27182c1cd0784eba000745a44f2 + checksum: 10/00e25bcdc41c2ac49405c62004b0946ca24f73ee7d65678ea25ddd222ac44e44ed6716ab6c66d6743b8dd4bb89123cce0edd4bafb14883257cb133f3a8a4198a languageName: node linkType: hard @@ -2568,7 +2568,7 @@ __metadata: "@storybook/builder-manager@file:../../../code/builders/builder-manager::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/builder-manager@file:../../../code/builders/builder-manager#../../../code/builders/builder-manager::hash=727c53&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/builder-manager@file:../../../code/builders/builder-manager#../../../code/builders/builder-manager::hash=875996&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@fal-works/esbuild-plugin-global-externals": "npm:^2.1.2" "@storybook/core-common": "workspace:*" @@ -2584,13 +2584,13 @@ __metadata: fs-extra: "npm:^11.1.0" process: "npm:^0.11.10" util: "npm:^0.12.4" - checksum: 10/1e3f751ec4dd12ca12d8a3190fb104644041cd08fb4c1548567105dabea9c20af0d25e19333e9c9da51225e0dd5159c2d2614cb3ac78b6f6b2e06c866f543eaf + checksum: 10/b776c568ef58940649b06b746b4002b221b88b0c9c4d56bb136b8997cfa88f77e3a05954c59c815ca2ecf19285607e2ef717198f42c11dac2235ed6b01a07c9d languageName: node linkType: hard "@storybook/builder-webpack5@file:../../../code/builders/builder-webpack5::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/builder-webpack5@file:../../../code/builders/builder-webpack5#../../../code/builders/builder-webpack5::hash=ad9e5e&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/builder-webpack5@file:../../../code/builders/builder-webpack5#../../../code/builders/builder-webpack5::hash=983659&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" @@ -2629,20 +2629,20 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 10/1dbbad195f6f0cb506b0b693c825c494f1a88cd71ca7784b06e0410f080468cac67d35adff1bc6f785b3f7d55cfe8e794684df01b4f440799955f0e787d8963a + checksum: 10/f84f41cd8ac80376ba603f4bb58da565f2b0e95ed37593279d85c4e5573de64633f10b7c6f2bd399f6d40057f1c97934760b969326520250f6de5efd07ac967b languageName: node linkType: hard "@storybook/channels@file:../../../code/lib/channels::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/channels@file:../../../code/lib/channels#../../../code/lib/channels::hash=78c3de&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/channels@file:../../../code/lib/channels#../../../code/lib/channels::hash=3a33a2&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" "@storybook/global": "npm:^5.0.0" telejson: "npm:^7.2.0" tiny-invariant: "npm:^1.3.1" - checksum: 10/d161eff9c0218c7a6628e44dceed5299b253f997fc36fd344a428937b901a3f0755a067240394636ca0e33611848cfc4b43e07a259f4232a7ea3c409418da5fc + checksum: 10/cda1b155f07fdac919a29e5a5287ae33ef4b3ed9c5c9816c29e17e3aa0dd788dc59da8775c40341ebcbd426ecf4f9ab629949dfe945834f48db7ca6053c062f1 languageName: node linkType: hard @@ -2695,16 +2695,16 @@ __metadata: "@storybook/client-logger@file:../../../code/lib/client-logger::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/client-logger@file:../../../code/lib/client-logger#../../../code/lib/client-logger::hash=54f3a6&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/client-logger@file:../../../code/lib/client-logger#../../../code/lib/client-logger::hash=f3ac76&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" - checksum: 10/234fc62dd3bbf8350049d6b149d035eae31b804dd6b8ef175c84ac7bc7ef32943976197a204f4d059952d47de3b97c56a8d2238f0bebcd10e29665b112ba0e1f + checksum: 10/00b5cfade208483f5ec85c8aa59cabf402502a4cf1d9c3ee24a311a396e65ce97f0a3d4356aac9f413c8d84c9804ccb07aaeda6f3d553799e6e036960f4a2fbe languageName: node linkType: hard "@storybook/codemod@file:../../../code/lib/codemod::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/codemod@file:../../../code/lib/codemod#../../../code/lib/codemod::hash=a56758&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/codemod@file:../../../code/lib/codemod#../../../code/lib/codemod::hash=13e51b&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@babel/core": "npm:^7.23.2" "@babel/preset-env": "npm:^7.23.2" @@ -2721,13 +2721,13 @@ __metadata: prettier: "npm:^3.1.1" recast: "npm:^0.23.5" tiny-invariant: "npm:^1.3.1" - checksum: 10/281ccf2a77c876f5c76629a2d40c19c90d5c5244acb1bb0480e8317c79a1d71e52cae72d542368b0b3192f8775b8dc380141d0ba8ecfc3677970ac43de5eab4f + checksum: 10/5cfc52e72455178e503ff226dd3fa1a0917e7f14a86f58b914aa5971f5288e45b68246b0d550169a9af941d5bdb2293c160831de4c466894ddabb609092dbace languageName: node linkType: hard "@storybook/components@file:../../../code/ui/components::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/components@file:../../../code/ui/components#../../../code/ui/components::hash=df917d&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/components@file:../../../code/ui/components#../../../code/ui/components::hash=2c348b&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@radix-ui/react-slot": "npm:^1.0.2" "@storybook/client-logger": "workspace:*" @@ -2741,7 +2741,7 @@ __metadata: peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: 10/70d228121e8d87efe766d01665df20448f310c0413edf80d7496ad887e876c7d24bae7786c89a0746d2b1fced8d89f1c7d5a20d52d39bbeee0de269512232b0c + checksum: 10/5ca7607bebb485e1dbb5c26f5dc3482e661d1646381be3ae26284c1e82cb0e2de51e05f5c4272ebe4d5fa6536aecb8dcd46e3da871aad90ba67a2e7e8987d278 languageName: node linkType: hard @@ -2783,16 +2783,16 @@ __metadata: "@storybook/core-events@file:../../../code/lib/core-events::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/core-events@file:../../../code/lib/core-events#../../../code/lib/core-events::hash=00e230&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/core-events@file:../../../code/lib/core-events#../../../code/lib/core-events::hash=840150&locator=portable-stories-nextjs%40workspace%3A." dependencies: ts-dedent: "npm:^2.0.0" - checksum: 10/04b637e0c32d0cf6b8b7f13a9c3366ae2f8d1881ac1e0024cb2d02cf4f38052a2655676c67876644c81fd4c351ebbf138afb6873d2449d3b8bcbecf4596b22b5 + checksum: 10/ccfa4397af9c114f401ac87d232f66c0cb37e7ee104647b36dd34e7bf598ff7e3a22fb18a6fb9d1529cef35f053056e34fa3f7626e62c5e133d31bd58fd6b5cb languageName: node linkType: hard "@storybook/core-server@file:../../../code/lib/core-server::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/core-server@file:../../../code/lib/core-server#../../../code/lib/core-server::hash=6e21ef&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/core-server@file:../../../code/lib/core-server#../../../code/lib/core-server::hash=2c034c&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@aw-web-design/x-default-browser": "npm:1.4.126" "@babel/core": "npm:^7.23.9" @@ -2837,36 +2837,36 @@ __metadata: util-deprecate: "npm:^1.0.2" watchpack: "npm:^2.2.0" ws: "npm:^8.2.3" - checksum: 10/052920abcb3352dc422ed230cda74a60996475600ce4bf23e0566dfeb25d2b5b86e7d84a19a47240b518a067bd74dec1bfae7674d68b3c59099c0ebd16e588d7 + checksum: 10/83c58dfa24e67e8ea10107858e723eebe3ebafa17580fbe9526022e02d1ba2467ef5e75ba3b303436c470a7151f183ad2d781b4cef1201a73cdf8f10d317cc57 languageName: node linkType: hard "@storybook/core-webpack@file:../../../code/lib/core-webpack::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/core-webpack@file:../../../code/lib/core-webpack#../../../code/lib/core-webpack::hash=a48486&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/core-webpack@file:../../../code/lib/core-webpack#../../../code/lib/core-webpack::hash=d17dda&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-common": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/types": "workspace:*" "@types/node": "npm:^18.0.0" ts-dedent: "npm:^2.0.0" - checksum: 10/f605ac68389a0ea374291444486bf82be36f01bf75ff1756bbc0d7de2a836095a695a072cdc14fbd941d4f49745cc775e3e02b29b9ed42065902e2fdd8091835 + checksum: 10/2e56db38374ec96f01c00c0fa4c8a9090c1db1d56c8c611a93d1a0c60769aa6a2c751ed29fa6c3a3a7adbf99d457287908e8e01ee1848ab6c59f6837934d81bf languageName: node linkType: hard "@storybook/csf-plugin@file:../../../code/lib/csf-plugin::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/csf-plugin@file:../../../code/lib/csf-plugin#../../../code/lib/csf-plugin::hash=786030&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/csf-plugin@file:../../../code/lib/csf-plugin#../../../code/lib/csf-plugin::hash=5ec6ec&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/csf-tools": "workspace:*" unplugin: "npm:^1.3.1" - checksum: 10/76d71cc728d93f09e0869a052b131c8b2d2307355c09c4396706e61b948c63fe7991110e8a1e6eb91f7802fe2030b53070292067adf2496f8924326f36c760f8 + checksum: 10/592fd4a3cc9af877bce352c7ad61aaf442b2b65dfcb9f27cbd3d6f29d48649f1c3d001fb68d4abdea376b57c277f25ccd25f41e6d6d23780ae4e498daaf37014 languageName: node linkType: hard "@storybook/csf-tools@file:../../../code/lib/csf-tools::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/csf-tools@file:../../../code/lib/csf-tools#../../../code/lib/csf-tools::hash=edd208&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/csf-tools@file:../../../code/lib/csf-tools#../../../code/lib/csf-tools::hash=69584a&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@babel/generator": "npm:^7.23.0" "@babel/parser": "npm:^7.23.0" @@ -2877,7 +2877,7 @@ __metadata: fs-extra: "npm:^11.1.0" recast: "npm:^0.23.5" ts-dedent: "npm:^2.0.0" - checksum: 10/d0205249b09db44b07382c14308e54bf527cf4f872a7ce5769486fb2099455fad045c7098c4faf133f8cf43c94fdc082f91c9165856fe6d98993553213f2a6f3 + checksum: 10/7fce79866ace04b9a2bc78a66a03e27e6e770b4279e1b40c08634bce01eb57be22f5f192f73c6a65cc959c8910f63a3d35e31a71fe3ac821aea095722e324710 languageName: node linkType: hard @@ -2908,7 +2908,7 @@ __metadata: "@storybook/docs-tools@file:../../../code/lib/docs-tools::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/docs-tools@file:../../../code/lib/docs-tools#../../../code/lib/docs-tools::hash=40a697&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/docs-tools@file:../../../code/lib/docs-tools#../../../code/lib/docs-tools::hash=4be280&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-common": "workspace:*" "@storybook/preview-api": "workspace:*" @@ -2917,7 +2917,7 @@ __metadata: assert: "npm:^2.1.0" doctrine: "npm:^3.0.0" lodash: "npm:^4.17.21" - checksum: 10/5b0d4e375559fa833a2d206469993635b41a134d7ec2c20b5dcac7c5919c598134148ed10848773ce294e7a82af472090d790a09d207022627da1a6220972437 + checksum: 10/121355441e903b87a0b9e590eca45a9b355af949148da6d23434f59b2aa753f00e0ffb8bc625d4ca91cf01e5e9782caceb561537d62729a2b2e240b6e640a0f4 languageName: node linkType: hard @@ -2940,7 +2940,7 @@ __metadata: "@storybook/instrumenter@file:../../../code/lib/instrumenter::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/instrumenter@file:../../../code/lib/instrumenter#../../../code/lib/instrumenter::hash=9f8861&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/instrumenter@file:../../../code/lib/instrumenter#../../../code/lib/instrumenter::hash=ffe9d7&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" @@ -2949,13 +2949,13 @@ __metadata: "@storybook/preview-api": "workspace:*" "@vitest/utils": "npm:^1.3.1" util: "npm:^0.12.4" - checksum: 10/5328defaee67eb906c05673839abbf388cca0ddb2e66f1eb5fad6c8bca89a8b9df122d5e1b2ab409670f245e37744c3433e1c92c49ad9116fa981c80feac51b3 + checksum: 10/84948fcfafe05e5934117e6c514a1788f9d146d28f749c11313e5f65c60f3f20be0e659e97f14a6b5ce405b01afa4941571f644a9cb88d8b3a956c2c79413723 languageName: node linkType: hard "@storybook/manager-api@file:../../../code/lib/manager-api::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/manager-api@file:../../../code/lib/manager-api#../../../code/lib/manager-api::hash=73f66e&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/manager-api@file:../../../code/lib/manager-api#../../../code/lib/manager-api::hash=3e3312&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" @@ -2972,20 +2972,20 @@ __metadata: store2: "npm:^2.14.2" telejson: "npm:^7.2.0" ts-dedent: "npm:^2.0.0" - checksum: 10/16915e26260d957b65691178ffc5b57550b2750e6be44407885673e2df4f4e532cb513844405179e6cba0ae22e0f6d76811c741c0d4ff424703e4e78339c03c1 + checksum: 10/dcc92a7797ccf0f986ef2eb9077884799e4cc92603ca52a69071b4943ca149fd17d771c64bd1fd474c8287b4bda5385c7b24bada7acc9f7413deac152ec32157 languageName: node linkType: hard "@storybook/manager@file:../../../code/ui/manager::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/manager@file:../../../code/ui/manager#../../../code/ui/manager::hash=ca1cc8&locator=portable-stories-nextjs%40workspace%3A." - checksum: 10/b99169a99791cda6a1eb5e34a00aff80433a8d8a2af0766035da5eca4a6f36be2dc885ed8f2ca4955aa913dcd80b7a3d0641cd5f0dabd2f5e91d2f87fa5fc7bd + resolution: "@storybook/manager@file:../../../code/ui/manager#../../../code/ui/manager::hash=257346&locator=portable-stories-nextjs%40workspace%3A." + checksum: 10/cdfcb34cdfaa7b7fbd388c54f2ecc85e0b4276ba1d915cc4b36dfcdd9ab8c5391815ae502089aa77e5dad8e51a064f86771969f20e9d10b5b14973d8e4e80a8b languageName: node linkType: hard "@storybook/nextjs@file:../../../code/frameworks/nextjs::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/nextjs@file:../../../code/frameworks/nextjs#../../../code/frameworks/nextjs::hash=449323&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/nextjs@file:../../../code/frameworks/nextjs#../../../code/frameworks/nextjs::hash=a5b14e&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@babel/core": "npm:^7.23.2" "@babel/plugin-syntax-bigint": "npm:^7.8.3" @@ -3043,20 +3043,20 @@ __metadata: optional: true webpack: optional: true - checksum: 10/cca75d58487e2dcba461dc15fb913f2ec60afa0fddbd0038eba3983f5286fa6555ab4c00e94b6eb1048fad85656a88fb7e5fd6534ec0907c3c46049ace5551dc + checksum: 10/86d287d5088a26adabce7b6ca5e56eebedf44df95bd07b1085253e095bea2d1d54898eed384ff7ca75866b00ffa36dd0a0c8f252edc1b4feb48725b6ca2ca851 languageName: node linkType: hard "@storybook/node-logger@file:../../../code/lib/node-logger::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/node-logger@file:../../../code/lib/node-logger#../../../code/lib/node-logger::hash=0d0b98&locator=portable-stories-nextjs%40workspace%3A." - checksum: 10/a3370020de702f0645ebe90da5e61d2a5d04bf719f6cda3b4c09e2b3f377c49a3d2c922175d2909d00fae0b7ef9453ac6f7ffee14399bd18ae3a6f9783736504 + resolution: "@storybook/node-logger@file:../../../code/lib/node-logger#../../../code/lib/node-logger::hash=0d5379&locator=portable-stories-nextjs%40workspace%3A." + checksum: 10/ba3b49b55a325ec5d885898e5cd61370c19ad27a54315025c315bb08b6a09a64cfd3097748225be1f4b07aad42245a239ac9ba6e957c854ebb48718a43e5c215 languageName: node linkType: hard "@storybook/preset-react-webpack@file:../../../code/presets/react-webpack::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/preset-react-webpack@file:../../../code/presets/react-webpack#../../../code/presets/react-webpack::hash=72b9b2&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/preset-react-webpack@file:../../../code/presets/react-webpack#../../../code/presets/react-webpack::hash=3c5b01&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-webpack": "workspace:*" "@storybook/docs-tools": "workspace:*" @@ -3079,13 +3079,13 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 10/f0304ce896fb0dc5d0aa170b82a567daccf7d2f45425da0c8ed9136d6f4ec0acd544474e37933145c639bd706e6846f8ec6d766a04b6a92cb00420f9fb498865 + checksum: 10/3baffd6ce4e642f852c370ccd4ae8098a5e730f4493ce43c8414f0b44e59c8bc8a99d9975cf5149b655f1808e54d274754044f45983b9f1be7c9a28f00931ac2 languageName: node linkType: hard "@storybook/preview-api@file:../../../code/lib/preview-api::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/preview-api@file:../../../code/lib/preview-api#../../../code/lib/preview-api::hash=8ed046&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/preview-api@file:../../../code/lib/preview-api#../../../code/lib/preview-api::hash=2e825a&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" @@ -3101,14 +3101,14 @@ __metadata: tiny-invariant: "npm:^1.3.1" ts-dedent: "npm:^2.0.0" util-deprecate: "npm:^1.0.2" - checksum: 10/d5a6dc59d0cf9660869c7059567ffe09e1d590835aa781a5a94fc109ae67ae961f82db05a5e983b209e76a595ef3b9669f25897a174701fbcd2846a321ddd8e6 + checksum: 10/8cb6df33b082d43c40daa182241aef50e583fc3c45d954730df0fbf305645926b2904b5177661a7a6294969014bda8c647f24960afd6114333e7c4bb00caa869 languageName: node linkType: hard "@storybook/preview@file:../../../code/lib/preview::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/preview@file:../../../code/lib/preview#../../../code/lib/preview::hash=1b46c6&locator=portable-stories-nextjs%40workspace%3A." - checksum: 10/6f32462ffef399955e23eda2f74ab4de1187eb9f81490207002fd36cb1801ad7f34cc7a86de10613f0a971c0dad8d7b9790b593fed87b994257b87a5874c7db2 + resolution: "@storybook/preview@file:../../../code/lib/preview#../../../code/lib/preview::hash=dccd68&locator=portable-stories-nextjs%40workspace%3A." + checksum: 10/834521c05fe7496e5d411dd9dc8cd3d2e3902bd101fcfe9e1caa2bace894fb6698d035fd190072a3cf2e294c86324315f30732c16bc30f75a1307feab53c16d1 languageName: node linkType: hard @@ -3132,17 +3132,17 @@ __metadata: "@storybook/react-dom-shim@file:../../../code/lib/react-dom-shim::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/react-dom-shim@file:../../../code/lib/react-dom-shim#../../../code/lib/react-dom-shim::hash=cb4d21&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/react-dom-shim@file:../../../code/lib/react-dom-shim#../../../code/lib/react-dom-shim::hash=062b74&locator=portable-stories-nextjs%40workspace%3A." peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: 10/fd2ab770da0b3450f92cad74f068d297cba56d51730987c2e9a866a01b3507335d913ba705e0c39bd53050f6de3415a6fb5fe32e25f01c246df05de76c888d01 + checksum: 10/ba63271a1f2d663cd53354798c490d306787b8033586a1062175b89fe4409759cbc959aa34dad12ff8f9bf2e9c141a391784eda81f23cbc9d13495128c9e1611 languageName: node linkType: hard "@storybook/react@file:../../../code/renderers/react::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/react@file:../../../code/renderers/react#../../../code/renderers/react::hash=feef2f&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/react@file:../../../code/renderers/react#../../../code/renderers/react::hash=f60a6b&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" "@storybook/docs-tools": "workspace:*" @@ -3172,24 +3172,24 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 10/c302a3188a07344a4ed6ff1d5e563eecba774f766433ee6c00a8db0817002cd228d2163247e8a7f0e77930aeb654ccaca2d4240f34aec578de6e1914c1d5ad3f + checksum: 10/aa5c6739bfda7f26dcf2155cc61cc02c7387046fd3f1ef0029fa851b56024e5c81e69ef11c7a3f167bf66715161586abc2e29bbcdd5e3ea4ff9f0a34bbdac095 languageName: node linkType: hard "@storybook/router@file:../../../code/lib/router::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/router@file:../../../code/lib/router#../../../code/lib/router::hash=12e846&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/router@file:../../../code/lib/router#../../../code/lib/router::hash=f3d914&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" memoizerific: "npm:^1.11.3" qs: "npm:^6.10.0" - checksum: 10/211a8eb4828a583ef4b882860a8eebdc9d20e79b576e46f2a53f9b87cfda6c6d95de53344cfdb767bdf64c465f55b70ffe7b2e85a800443ea8867f937bd6f452 + checksum: 10/ae4218eb5cb26c1fd31b334a5431a228a4fd6f30bff1e4feb68c188317ceece7b91510c0c98c4a2d4fe419baebb2da21ea03d65dfe5123257befdb8ad9e0770c languageName: node linkType: hard "@storybook/telemetry@file:../../../code/lib/telemetry::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/telemetry@file:../../../code/lib/telemetry#../../../code/lib/telemetry::hash=23a3d9&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/telemetry@file:../../../code/lib/telemetry#../../../code/lib/telemetry::hash=ef1a5d&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-common": "workspace:*" @@ -3199,13 +3199,13 @@ __metadata: fetch-retry: "npm:^5.0.2" fs-extra: "npm:^11.1.0" read-pkg-up: "npm:^7.0.1" - checksum: 10/609dd2f7509d5b8611fead6e310e485dbd0ee4ad9c02d75c7cd66be068fbecb77e2f95f8b7879c01b2767b1e566031e9eae5c616ce36fab23df92d7d6d5f05fc + checksum: 10/b4d3d4aa974ea59a259584466abf9dc7ca07b926833e8e4cd53e43bd47a37ead871f2f4458cc2f8d3c9776e41b3daac9a1fe3363d210190b4d45585de86453f7 languageName: node linkType: hard "@storybook/test@file:../../../code/lib/test::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/test@file:../../../code/lib/test#../../../code/lib/test::hash=b5fbc8&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/test@file:../../../code/lib/test#../../../code/lib/test::hash=cd3c93&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" @@ -3218,13 +3218,13 @@ __metadata: "@vitest/spy": "npm:^1.3.1" chai: "npm:^4.4.1" util: "npm:^0.12.4" - checksum: 10/47a026e105e8e42c6942b48d87bf8d96310a8507da9a2f6f923aa3dbb45a75846d59779d2e69b66a3fddbfe355de1e00dd49f8753b4b04939cc755127149f4b8 + checksum: 10/783d04972494921194bbf60ba366dd62c81340257671acdb2693156dc64c709c64a51efc5fcf528c5a43d11167b2193d4582d24e5012e86407b64fbeda4c1c66 languageName: node linkType: hard "@storybook/theming@file:../../../code/lib/theming::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/theming@file:../../../code/lib/theming#../../../code/lib/theming::hash=cf2697&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/theming@file:../../../code/lib/theming#../../../code/lib/theming::hash=9cc340&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@emotion/use-insertion-effect-with-fallbacks": "npm:^1.0.1" "@storybook/client-logger": "workspace:*" @@ -3238,7 +3238,7 @@ __metadata: optional: true react-dom: optional: true - checksum: 10/c87b12f79a54319df221805988e5da6955265e1a76f67daba34c401959ca0d12c77b19a53c5ed824782979b09f19eec774e68f6d9bd126e0d0640d8197a2d381 + checksum: 10/e64850170fec111310877caa5a994ad53c9e072f324d0871d98e34f7d30688dadd7b24914441b3c50f3e9dc3f80909c60fa292e61f7fe6b257a6e19521a6c8e1 languageName: node linkType: hard From d9a4ab1c2c7c9f6c7248ad25f5047557996e3db8 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Wed, 10 Apr 2024 11:18:12 +0200 Subject: [PATCH 075/380] Use beforeEach in test --- .../actions/template/stories/spies.stories.ts | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/code/addons/actions/template/stories/spies.stories.ts b/code/addons/actions/template/stories/spies.stories.ts index 824494bda1c9..9749cfb3e492 100644 --- a/code/addons/actions/template/stories/spies.stories.ts +++ b/code/addons/actions/template/stories/spies.stories.ts @@ -1,24 +1,24 @@ import { global as globalThis } from '@storybook/global'; import { spyOn } from '@storybook/test'; -export default { +const meta = { component: globalThis.Components.Button, - loaders() { + beforeEach() { spyOn(console, 'log').mockName('console.log'); - }, - args: { - label: 'Button', - }, - parameters: { - chromatic: { disable: true }, + console.log('first'); }, }; +export default meta; + export const ShowSpyOnInActions = { + beforeEach() { + console.log('second'); + }, args: { + label: 'Button', onClick: () => { - console.log('first'); - console.log('second'); + console.log('third'); }, }, }; From 4d452f3b80714ee810c0a9c537cd69a5f5e0bbce Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 10 Apr 2024 11:46:34 +0200 Subject: [PATCH 076/380] fix inner class context --- code/frameworks/nextjs/src/headers/headers.ts | 61 +++++++++++-------- 1 file changed, 35 insertions(+), 26 deletions(-) diff --git a/code/frameworks/nextjs/src/headers/headers.ts b/code/frameworks/nextjs/src/headers/headers.ts index 46f30fe0c171..b71bece89695 100644 --- a/code/frameworks/nextjs/src/headers/headers.ts +++ b/code/frameworks/nextjs/src/headers/headers.ts @@ -8,9 +8,12 @@ import type { HeadersAdapter } from 'next/dist/server/web/spec-extension/adapter export class HeadersStore extends Headers implements HeadersAdapter { private headers: IncomingHttpHeaders = {}; - /** @internal */ + /** Used to restore the mocks. Called internally by @storybook/nextjs + * to ensure that the mocks are restored between stories. + * @internal + * */ mockRestore = () => { - this.forEach((key) => this.delete(key)); + this.forEach((key: string) => this.delete(key)); }; /** @@ -64,33 +67,39 @@ export class HeadersStore extends Headers implements HeadersAdapter { } ).mockName('headers().forEach'); - public entries = fn(function* (this: HeadersStore): IterableIterator<[string, string]> { - for (const key of Object.keys(this.headers)) { - const name = key.toLowerCase(); - // We assert here that this is a string because we got it from the - // Object.keys() call above. - const value = this.get(name) as string; + public entries = fn( + function* (this: HeadersStore): IterableIterator<[string, string]> { + for (const key of Object.keys(this.headers)) { + const name = key.toLowerCase(); + // We assert here that this is a string because we got it from the + // Object.keys() call above. + const value = this.get(name) as string; - yield [name, value]; - } - }).mockName('headers().entries'); - - public keys = fn(function* (this: HeadersStore): IterableIterator { - for (const key of Object.keys(this.headers)) { - const name = key.toLowerCase(); - yield name; - } - }).mockName('headers().keys'); + yield [name, value]; + } + }.bind(this) + ).mockName('headers().entries'); + + public keys = fn( + function* (this: HeadersStore): IterableIterator { + for (const key of Object.keys(this.headers)) { + const name = key.toLowerCase(); + yield name; + } + }.bind(this) + ).mockName('headers().keys'); - public values = fn(function* (this: HeadersStore): IterableIterator { - for (const key of Object.keys(this.headers)) { - // We assert here that this is a string because we got it from the - // Object.keys() call above. - const value = this.get(key) as string; + public values = fn( + function* (this: HeadersStore): IterableIterator { + for (const key of Object.keys(this.headers)) { + // We assert here that this is a string because we got it from the + // Object.keys() call above. + const value = this.get(key) as string; - yield value; - } - }).mockName('headers().values'); + yield value; + } + }.bind(this) + ).mockName('headers().values'); public [Symbol.iterator](): IterableIterator<[string, string]> { return this.entries(); From fbb33d122bc277cb9a90ffa364bf2a59055eb1eb Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 10 Apr 2024 11:49:12 +0200 Subject: [PATCH 077/380] Refactor cookies.ts to add internal documentation for mockRestore method --- code/frameworks/nextjs/src/headers/cookies.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/code/frameworks/nextjs/src/headers/cookies.ts b/code/frameworks/nextjs/src/headers/cookies.ts index 13bc7779d3ef..6466ad439c55 100644 --- a/code/frameworks/nextjs/src/headers/cookies.ts +++ b/code/frameworks/nextjs/src/headers/cookies.ts @@ -41,7 +41,10 @@ class CookieStore implements RequestCookies { return this._parsed[Symbol.iterator](); } - /** @internal */ + /** Used to restore the mocks. Called internally by @storybook/nextjs + * to ensure that the mocks are restored between stories. + * @internal + * */ mockRestore = () => { this.clear(); this._headers.mockRestore(); From 7db928e22c47a008d5481a86c4ea9c2d614ddd9a Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Mon, 8 Apr 2024 17:54:06 +0200 Subject: [PATCH 078/380] NextJS: Spy next/router and next/navigation useRouter hooks --- code/frameworks/nextjs/package.json | 7 +- .../nextjs/src/routing/decorator.tsx | 7 +- .../{ => navigation}/app-router-provider.tsx | 29 +----- .../nextjs/src/routing/navigation/index.ts | 47 ++++++++++ .../src/routing/page-router-provider.tsx | 69 -------------- .../nextjs/src/routing/router/index.ts | 82 ++++++++++++++++ .../routing/router/page-router-provider.tsx | 34 +++++++ .../Router.stories.jsx | 23 ++++- .../Navigation.stories.tsx | 23 ++++- .../Router.stories.tsx | 93 +++++++++++++++++++ code/yarn.lock | 1 - 11 files changed, 310 insertions(+), 105 deletions(-) rename code/frameworks/nextjs/src/routing/{ => navigation}/app-router-provider.tsx (70%) create mode 100644 code/frameworks/nextjs/src/routing/navigation/index.ts delete mode 100644 code/frameworks/nextjs/src/routing/page-router-provider.tsx create mode 100644 code/frameworks/nextjs/src/routing/router/index.ts create mode 100644 code/frameworks/nextjs/src/routing/router/page-router-provider.tsx create mode 100644 code/frameworks/nextjs/template/stories_nextjs-default-ts/Router.stories.tsx diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index e30984136eae..ad48325066c4 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -52,6 +52,8 @@ "require": "./dist/headers/index.js", "import": "./dist/headers/index.mjs" }, + "./router": "./dist/routing/router/index.mjs", + "./navigation": "./dist/routing/navigation/index.mjs", "./package.json": "./package.json" }, "main": "dist/index.js", @@ -97,7 +99,6 @@ "@babel/preset-typescript": "^7.23.2", "@babel/runtime": "^7.23.2", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11", - "@storybook/addon-actions": "workspace:*", "@storybook/builder-webpack5": "workspace:*", "@storybook/core-common": "workspace:*", "@storybook/core-events": "workspace:*", @@ -168,6 +169,8 @@ "./src/preset.ts", "./src/headers/index.ts", "./src/preview.tsx", + "./src/routing/router/index.ts", + "./src/routing/navigation/index.ts", "./src/next-image-loader-stub.ts", "./src/images/decorator.tsx", "./src/images/next-legacy-image.tsx", @@ -184,4 +187,4 @@ "platform": "node" }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17" -} +} \ No newline at end of file diff --git a/code/frameworks/nextjs/src/routing/decorator.tsx b/code/frameworks/nextjs/src/routing/decorator.tsx index 939c3ed0114b..d45f61b69c14 100644 --- a/code/frameworks/nextjs/src/routing/decorator.tsx +++ b/code/frameworks/nextjs/src/routing/decorator.tsx @@ -1,8 +1,7 @@ import * as React from 'react'; import type { Addon_StoryContext } from '@storybook/types'; -import { action } from '@storybook/addon-actions'; -import { AppRouterProvider } from './app-router-provider'; -import { PageRouterProvider } from './page-router-provider'; +import { AppRouterProvider } from './navigation/app-router-provider'; +import { PageRouterProvider } from './router/page-router-provider'; import type { RouteParams, NextAppDirectory } from './types'; const defaultRouterParams: RouteParams = { @@ -23,7 +22,6 @@ export const RouterDecorator = ( } return ( (...args: any[]) => void; routeParams: RouteParams; }; @@ -28,7 +28,6 @@ const getParallelRoutes = (segmentsList: Array): FlightRouterState => { export const AppRouterProvider: React.FC> = ({ children, - action, routeParams, }) => { const { pathname, query, segments = [], ...restRouteParams } = routeParams; @@ -55,29 +54,7 @@ export const AppRouterProvider: React.FC - { - action('nextNavigation.refresh')(); - }, - ...restRouteParams, - }} - > + { + if (!navigationAPI) { + const navigationActions = { + push: fn().mockName('nextNavigation.push'), + replace: fn().mockName('nextNavigation.replace'), + forward: fn().mockName('nextNavigation.forward'), + back: fn().mockName('nextNavigation.back'), + prefetch: fn().mockName('nextNavigation.prefetch'), + refresh: fn().mockName('nextNavigation.refresh'), + }; + + if (overrides) { + Object.keys(navigationActions).forEach((key) => { + if (key in overrides) { + (navigationActions as any)[key] = fn((...args: any[]) => { + return (overrides as any)[key](...args); + }).mockName(`nextNavigation.${key}`); + } + }); + } + + navigationAPI = navigationActions; + } + + return navigationAPI; +}; + +export const useRouter = () => { + if (!navigationAPI) { + // TODO: improve error message + throw new Error('The router mock was not created yet. This is probably a bug.'); + } + + return navigationAPI; +}; diff --git a/code/frameworks/nextjs/src/routing/page-router-provider.tsx b/code/frameworks/nextjs/src/routing/page-router-provider.tsx deleted file mode 100644 index 066e7f32b3fd..000000000000 --- a/code/frameworks/nextjs/src/routing/page-router-provider.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import type { Globals } from '@storybook/csf'; -import { RouterContext } from 'next/dist/shared/lib/router-context.shared-runtime'; -import type { PropsWithChildren } from 'react'; -import React from 'react'; -import type { RouteParams } from './types'; - -type PageRouterProviderProps = { - action: (name: string) => (...args: any[]) => void; - routeParams: RouteParams; - globals: Globals; -}; - -export const PageRouterProvider: React.FC> = ({ - children, - action, - routeParams, - globals, -}) => ( - - {children} - -); diff --git a/code/frameworks/nextjs/src/routing/router/index.ts b/code/frameworks/nextjs/src/routing/router/index.ts new file mode 100644 index 000000000000..7c0253147385 --- /dev/null +++ b/code/frameworks/nextjs/src/routing/router/index.ts @@ -0,0 +1,82 @@ +import type { Mock } from '@storybook/test'; +import { fn } from '@storybook/test'; +import type { NextRouter } from 'next/router'; + +let routerAPI: { + push: Mock; + replace: Mock; + reload: Mock; + back: Mock; + forward: Mock; + prefetch: Mock; + beforePopState: Mock; + events: { + on: Mock; + off: Mock; + emit: Mock; + }; +}; + +export const createRouter = ({ overrides }: { overrides?: Partial }) => { + if (!routerAPI) { + const routerActions: Partial = { + push: fn((..._args: any[]) => { + return Promise.resolve(true); + }).mockName('nextRouter.push'), + replace: fn((..._args: any[]) => { + return Promise.resolve(true); + }).mockName('nextRouter.replace'), + reload: fn((..._args: any[]) => {}).mockName('nextRouter.reload'), + back: fn((..._args: any[]) => {}).mockName('nextRouter.back'), + forward: fn(() => {}).mockName('nextRouter.forward'), + prefetch: fn((..._args: any[]) => { + return Promise.resolve(); + }).mockName('nextRouter.prefetch'), + beforePopState: fn((..._args: any[]) => {}).mockName('nextRouter.beforePopState'), + }; + + const routerEvents: Partial = { + events: { + on: fn((..._args: any[]) => {}).mockName('nextRouter.events.on'), + off: fn((..._args: any[]) => {}).mockName('nextRouter.events.off'), + emit: fn((..._args: any[]) => {}).mockName('nextRouter.events.emit'), + }, + }; + + if (overrides) { + Object.keys(routerActions).forEach((key) => { + if (key in overrides) { + (routerActions as any)[key] = fn((...args: any[]) => { + return (overrides as any)[key](...args); + }).mockName(`nextRouter.${key}`); + } + }); + } + + if (overrides?.events) { + Object.keys(routerEvents.events!).forEach((key) => { + if (key in routerEvents.events!) { + (routerEvents.events as any)[key] = fn((...args: any[]) => { + return (overrides.events as any)[key](...args); + }).mockName(`nextRouter.events.${key}`); + } + }); + } + + routerAPI = { + ...routerActions, + // @ts-expect-error TODO improve typings + events: routerEvents.events, + }; + } + + return routerAPI; +}; + +export const useRouter = () => { + if (!routerAPI) { + throw new Error('Router not created yet'); + } + + return routerAPI; +}; diff --git a/code/frameworks/nextjs/src/routing/router/page-router-provider.tsx b/code/frameworks/nextjs/src/routing/router/page-router-provider.tsx new file mode 100644 index 000000000000..99dcf4924ba3 --- /dev/null +++ b/code/frameworks/nextjs/src/routing/router/page-router-provider.tsx @@ -0,0 +1,34 @@ +import type { Globals } from '@storybook/csf'; +import { RouterContext } from 'next/dist/shared/lib/router-context.shared-runtime'; +import type { PropsWithChildren } from 'react'; +import React from 'react'; +import type { RouteParams } from '../types'; +import { createRouter } from './index'; + +type PageRouterProviderProps = { + routeParams: RouteParams; + globals: Globals; +}; + +export const PageRouterProvider: React.FC> = ({ + children, + routeParams, + globals, +}) => ( + + {children} + +); diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-js/Router.stories.jsx b/code/frameworks/nextjs/template/stories_nextjs-default-js/Router.stories.jsx index 2ea7511a2f4e..ceee12ad3666 100644 --- a/code/frameworks/nextjs/template/stories_nextjs-default-js/Router.stories.jsx +++ b/code/frameworks/nextjs/template/stories_nextjs-default-js/Router.stories.jsx @@ -1,3 +1,5 @@ +import { expect, within, userEvent } from '@storybook/test'; +import { useRouter as useRouterMock } from '@storybook/nextjs/router'; import { useRouter } from 'next/router'; import React from 'react'; @@ -61,9 +63,28 @@ export default { query: { foo: 'bar', }, + prefetch: () => { + console.log('custom prefetch'); + }, }, }, }, }; -export const Default = {}; +export const Default = { + play: async ({ canvasElement, step }) => { + const canvas = within(canvasElement); + + await step('Asserts whether forward hook is called', async () => { + const forwardBtn = await canvas.findByText('Go forward'); + await userEvent.click(forwardBtn); + await expect(useRouterMock().forward).toHaveBeenCalled(); + }); + + await step('Asserts whether custom prefetch hook is called', async () => { + const prefetchBtn = await canvas.findByText('Prefetch'); + await userEvent.click(prefetchBtn); + await expect(useRouterMock().prefetch).toHaveBeenCalledWith('/prefetched-html'); + }); + }, +}; diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Navigation.stories.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/Navigation.stories.tsx index 6287d5ae2a73..79520290c716 100644 --- a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Navigation.stories.tsx +++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/Navigation.stories.tsx @@ -2,6 +2,8 @@ import { useRouter, usePathname, useSearchParams } from 'next/navigation'; import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; +import { expect, userEvent, within } from '@storybook/test'; +import { useRouter as useRouterMock } from '@storybook/nextjs/navigation'; function Component() { const router = useRouter(); @@ -73,9 +75,28 @@ export default { query: { foo: 'bar', }, + prefetch: () => { + console.log('custom prefetch'); + }, }, }, }, } as Meta; -export const Default: StoryObj = {}; +export const Default: StoryObj = { + play: async ({ canvasElement, step }) => { + const canvas = within(canvasElement); + + await step('Asserts whether forward hook is called', async () => { + const forwardBtn = await canvas.findByText('Go forward'); + await userEvent.click(forwardBtn); + await expect(useRouterMock().forward).toHaveBeenCalled(); + }); + + await step('Asserts whether custom prefetch hook is called', async () => { + const prefetchBtn = await canvas.findByText('Prefetch'); + await userEvent.click(prefetchBtn); + await expect(useRouterMock().prefetch).toHaveBeenCalledWith('/prefetched-html'); + }); + }, +}; diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Router.stories.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/Router.stories.tsx new file mode 100644 index 000000000000..0319e17efa02 --- /dev/null +++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/Router.stories.tsx @@ -0,0 +1,93 @@ +import React from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; +import { expect, within, userEvent } from '@storybook/test'; +import { useRouter as useRouterMock } from '@storybook/nextjs/router'; +import { useRouter } from 'next/router'; + +function Component() { + const router = useRouter(); + const searchParams = router.query; + + const routerActions = [ + { + cb: () => router.back(), + name: 'Go back', + }, + { + cb: () => router.forward(), + name: 'Go forward', + }, + { + cb: () => router.prefetch('/prefetched-html'), + name: 'Prefetch', + }, + { + // @ts-expect-error (old API) + cb: () => router.push('/push-html', { forceOptimisticNavigation: true }), + name: 'Push HTML', + }, + { + // @ts-expect-error (old API) + cb: () => router.replace('/replaced-html', { forceOptimisticNavigation: true }), + name: 'Replace', + }, + ]; + + return ( +

+
pathname: {router.pathname}
+
+ searchparams:{' '} +
    + {Object.entries(searchParams).map(([key, value]) => ( +
  • + {key}: {value} +
    • + ))} +
+
+ {routerActions.map(({ cb, name }) => ( +
+ +
+ ))} +
+ ); +} + +export default { + component: Component, + parameters: { + nextjs: { + router: { + pathname: '/hello', + query: { + foo: 'bar', + }, + prefetch: () => { + console.log('custom prefetch'); + }, + }, + }, + }, +} as Meta; + +export const Default: StoryObj = { + play: async ({ canvasElement, step }) => { + const canvas = within(canvasElement); + + await step('Asserts whether forward hook is called', async () => { + const forwardBtn = await canvas.findByText('Go forward'); + await userEvent.click(forwardBtn); + await expect(useRouterMock().forward).toHaveBeenCalled(); + }); + + await step('Asserts whether custom prefetch hook is called', async () => { + const prefetchBtn = await canvas.findByText('Prefetch'); + await userEvent.click(prefetchBtn); + await expect(useRouterMock().prefetch).toHaveBeenCalledWith('/prefetched-html'); + }); + }, +}; diff --git a/code/yarn.lock b/code/yarn.lock index aa1315007109..a0839ce820a0 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5940,7 +5940,6 @@ __metadata: "@babel/runtime": "npm:^7.23.2" "@babel/types": "npm:^7.23.0" "@pmmmwh/react-refresh-webpack-plugin": "npm:^0.5.11" - "@storybook/addon-actions": "workspace:*" "@storybook/builder-webpack5": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" From 501301a4072734e9e610da70bc86d26f553ac0e6 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 9 Apr 2024 11:13:37 +0200 Subject: [PATCH 079/380] fix default Router mock export, add improvements --- .../nextjs/src/routing/navigation/index.ts | 8 +-- .../nextjs/src/routing/router/index.ts | 49 +++++++++++++------ .../routing/router/page-router-provider.tsx | 12 +---- .../Router.stories.tsx | 10 +++- .../core-events/src/errors/preview-errors.ts | 17 +++++++ 5 files changed, 67 insertions(+), 29 deletions(-) diff --git a/code/frameworks/nextjs/src/routing/navigation/index.ts b/code/frameworks/nextjs/src/routing/navigation/index.ts index 3c9a84f4df92..23e34cb0c190 100644 --- a/code/frameworks/nextjs/src/routing/navigation/index.ts +++ b/code/frameworks/nextjs/src/routing/navigation/index.ts @@ -1,5 +1,6 @@ import type { Mock } from '@storybook/test'; import { fn } from '@storybook/test'; +import { NextjsRouterMocksNotAvailable } from '@storybook/core-events/preview-errors'; let navigationAPI: { push: Mock; @@ -10,7 +11,7 @@ let navigationAPI: { refresh: Mock; }; -export const createNavigation = ({ overrides }: { overrides?: any }) => { +export const createNavigation = (overrides: any) => { if (!navigationAPI) { const navigationActions = { push: fn().mockName('nextNavigation.push'), @@ -39,8 +40,9 @@ export const createNavigation = ({ overrides }: { overrides?: any }) => { export const useRouter = () => { if (!navigationAPI) { - // TODO: improve error message - throw new Error('The router mock was not created yet. This is probably a bug.'); + throw new NextjsRouterMocksNotAvailable({ + importType: 'next/navigation', + }); } return navigationAPI; diff --git a/code/frameworks/nextjs/src/routing/router/index.ts b/code/frameworks/nextjs/src/routing/router/index.ts index 7c0253147385..5332c4111d74 100644 --- a/code/frameworks/nextjs/src/routing/router/index.ts +++ b/code/frameworks/nextjs/src/routing/router/index.ts @@ -1,6 +1,20 @@ import type { Mock } from '@storybook/test'; import { fn } from '@storybook/test'; +import { NextjsRouterMocksNotAvailable } from '@storybook/core-events/preview-errors'; import type { NextRouter } from 'next/router'; +import singletonRouter from 'next/router'; + +const defaultRouterState = { + route: '/', + asPath: '/', + basePath: '/', + pathname: '/', + query: {}, + isFallback: false, + isLocaleDomain: false, + isReady: true, + isPreview: false, +}; let routerAPI: { push: Mock; @@ -15,9 +29,9 @@ let routerAPI: { off: Mock; emit: Mock; }; -}; +} & typeof defaultRouterState; -export const createRouter = ({ overrides }: { overrides?: Partial }) => { +export const createRouter = (overrides?: Partial) => { if (!routerAPI) { const routerActions: Partial = { push: fn((..._args: any[]) => { @@ -35,12 +49,10 @@ export const createRouter = ({ overrides }: { overrides?: Partial }) beforePopState: fn((..._args: any[]) => {}).mockName('nextRouter.beforePopState'), }; - const routerEvents: Partial = { - events: { - on: fn((..._args: any[]) => {}).mockName('nextRouter.events.on'), - off: fn((..._args: any[]) => {}).mockName('nextRouter.events.off'), - emit: fn((..._args: any[]) => {}).mockName('nextRouter.events.emit'), - }, + const routerEvents: NextRouter['events'] = { + on: fn((..._args: any[]) => {}).mockName('nextRouter.events.on'), + off: fn((..._args: any[]) => {}).mockName('nextRouter.events.off'), + emit: fn((..._args: any[]) => {}).mockName('nextRouter.events.emit'), }; if (overrides) { @@ -54,9 +66,9 @@ export const createRouter = ({ overrides }: { overrides?: Partial }) } if (overrides?.events) { - Object.keys(routerEvents.events!).forEach((key) => { - if (key in routerEvents.events!) { - (routerEvents.events as any)[key] = fn((...args: any[]) => { + Object.keys(routerEvents).forEach((key) => { + if (key in routerEvents) { + (routerEvents as any)[key] = fn((...args: any[]) => { return (overrides.events as any)[key](...args); }).mockName(`nextRouter.events.${key}`); } @@ -64,18 +76,27 @@ export const createRouter = ({ overrides }: { overrides?: Partial }) } routerAPI = { + ...defaultRouterState, + ...overrides, ...routerActions, // @ts-expect-error TODO improve typings - events: routerEvents.events, + events: routerEvents, }; + + // overwrite the singleton router from next/router + singletonRouter.router = routerAPI as any; + singletonRouter.readyCallbacks.forEach((cb) => cb()); + singletonRouter.readyCallbacks = []; } - return routerAPI; + return routerAPI as unknown as NextRouter; }; export const useRouter = () => { if (!routerAPI) { - throw new Error('Router not created yet'); + throw new NextjsRouterMocksNotAvailable({ + importType: 'next/router', + }); } return routerAPI; diff --git a/code/frameworks/nextjs/src/routing/router/page-router-provider.tsx b/code/frameworks/nextjs/src/routing/router/page-router-provider.tsx index 99dcf4924ba3..abd948d0d9dd 100644 --- a/code/frameworks/nextjs/src/routing/router/page-router-provider.tsx +++ b/code/frameworks/nextjs/src/routing/router/page-router-provider.tsx @@ -16,18 +16,10 @@ export const PageRouterProvider: React.FC ( {children} diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Router.stories.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/Router.stories.tsx index 0319e17efa02..ea524e55f9b8 100644 --- a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Router.stories.tsx +++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/Router.stories.tsx @@ -77,17 +77,23 @@ export default { export const Default: StoryObj = { play: async ({ canvasElement, step }) => { const canvas = within(canvasElement); + const routerMock = useRouterMock(); + + await step('Router property overrides should be available', async () => { + await expect(routerMock.pathname).toBe('/hello'); + await expect(routerMock.query).toEqual({ foo: 'bar' }); + }); await step('Asserts whether forward hook is called', async () => { const forwardBtn = await canvas.findByText('Go forward'); await userEvent.click(forwardBtn); - await expect(useRouterMock().forward).toHaveBeenCalled(); + await expect(routerMock.forward).toHaveBeenCalled(); }); await step('Asserts whether custom prefetch hook is called', async () => { const prefetchBtn = await canvas.findByText('Prefetch'); await userEvent.click(prefetchBtn); - await expect(useRouterMock().prefetch).toHaveBeenCalledWith('/prefetched-html'); + await expect(routerMock.prefetch).toHaveBeenCalledWith('/prefetched-html'); }); }, }; diff --git a/code/lib/core-events/src/errors/preview-errors.ts b/code/lib/core-events/src/errors/preview-errors.ts index fb33c42688b3..0872718a03c1 100644 --- a/code/lib/core-events/src/errors/preview-errors.ts +++ b/code/lib/core-events/src/errors/preview-errors.ts @@ -27,6 +27,7 @@ export enum Category { RENDERER_VUE = 'RENDERER_VUE', RENDERER_VUE3 = 'RENDERER_VUE3', RENDERER_WEB_COMPONENTS = 'RENDERER_WEB-COMPONENTS', + FRAMEWORK_NEXTJS = 'FRAMEWORK_NEXTJS', } export class MissingStoryAfterHmrError extends StorybookError { @@ -235,3 +236,19 @@ export class StoryStoreAccessedBeforeInitializationError extends StorybookError remove access to the store entirely`; } } + +export class NextjsRouterMocksNotAvailable extends StorybookError { + readonly category = Category.FRAMEWORK_NEXTJS; + + readonly code = 1; + + constructor(public data: { importType: string }) { + super(); + } + + template() { + return dedent` + Tried to access router mocks from ${this.data.importType} but they were not created yet. You might be running code in an unsupported environment. + `; + } +} From a6de166b3620d294a93dcd72b3b3bcd9ae496c0a Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 9 Apr 2024 11:17:30 +0200 Subject: [PATCH 080/380] add portable stories tests --- code/frameworks/nextjs/package.json | 12 ++++++-- .../Navigation.stories.tsx | 5 ++-- .../nextjs/stories/Navigation.stories.tsx | 24 ++++++++++++++- .../nextjs/stories/Router.stories.tsx | 30 +++++++++++++++++-- .../nextjs/stories/portable-stories.test.tsx | 2 +- .../nextjs/yarn.lock | 1 - 6 files changed, 64 insertions(+), 10 deletions(-) diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index ad48325066c4..24a235df9501 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -52,8 +52,16 @@ "require": "./dist/headers/index.js", "import": "./dist/headers/index.mjs" }, - "./router": "./dist/routing/router/index.mjs", - "./navigation": "./dist/routing/navigation/index.mjs", + "./router": { + "types": "./dist/routing/router/index.d.ts", + "require": "./dist/routing/router/index.js", + "import": "./dist/routing/router/index.mjs" + }, + "./navigation": { + "types": "./dist/routing/navigation/index.d.ts", + "require": "./dist/routing/navigation/index.js", + "import": "./dist/routing/navigation/index.mjs" + }, "./package.json": "./package.json" }, "main": "dist/index.js", diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Navigation.stories.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/Navigation.stories.tsx index 79520290c716..1049d345c6d4 100644 --- a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Navigation.stories.tsx +++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/Navigation.stories.tsx @@ -86,17 +86,18 @@ export default { export const Default: StoryObj = { play: async ({ canvasElement, step }) => { const canvas = within(canvasElement); + const routerMock = useRouterMock(); await step('Asserts whether forward hook is called', async () => { const forwardBtn = await canvas.findByText('Go forward'); await userEvent.click(forwardBtn); - await expect(useRouterMock().forward).toHaveBeenCalled(); + await expect(routerMock.forward).toHaveBeenCalled(); }); await step('Asserts whether custom prefetch hook is called', async () => { const prefetchBtn = await canvas.findByText('Prefetch'); await userEvent.click(prefetchBtn); - await expect(useRouterMock().prefetch).toHaveBeenCalledWith('/prefetched-html'); + await expect(routerMock.prefetch).toHaveBeenCalledWith('/prefetched-html'); }); }, }; diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/Navigation.stories.tsx b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/Navigation.stories.tsx index 6287d5ae2a73..1049d345c6d4 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/Navigation.stories.tsx +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/Navigation.stories.tsx @@ -2,6 +2,8 @@ import { useRouter, usePathname, useSearchParams } from 'next/navigation'; import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; +import { expect, userEvent, within } from '@storybook/test'; +import { useRouter as useRouterMock } from '@storybook/nextjs/navigation'; function Component() { const router = useRouter(); @@ -73,9 +75,29 @@ export default { query: { foo: 'bar', }, + prefetch: () => { + console.log('custom prefetch'); + }, }, }, }, } as Meta; -export const Default: StoryObj = {}; +export const Default: StoryObj = { + play: async ({ canvasElement, step }) => { + const canvas = within(canvasElement); + const routerMock = useRouterMock(); + + await step('Asserts whether forward hook is called', async () => { + const forwardBtn = await canvas.findByText('Go forward'); + await userEvent.click(forwardBtn); + await expect(routerMock.forward).toHaveBeenCalled(); + }); + + await step('Asserts whether custom prefetch hook is called', async () => { + const prefetchBtn = await canvas.findByText('Prefetch'); + await userEvent.click(prefetchBtn); + await expect(routerMock.prefetch).toHaveBeenCalledWith('/prefetched-html'); + }); + }, +}; diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/Router.stories.tsx b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/Router.stories.tsx index 2ea7511a2f4e..0319e17efa02 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/Router.stories.tsx +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/Router.stories.tsx @@ -1,5 +1,8 @@ -import { useRouter } from 'next/router'; import React from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; +import { expect, within, userEvent } from '@storybook/test'; +import { useRouter as useRouterMock } from '@storybook/nextjs/router'; +import { useRouter } from 'next/router'; function Component() { const router = useRouter(); @@ -19,10 +22,12 @@ function Component() { name: 'Prefetch', }, { + // @ts-expect-error (old API) cb: () => router.push('/push-html', { forceOptimisticNavigation: true }), name: 'Push HTML', }, { + // @ts-expect-error (old API) cb: () => router.replace('/replaced-html', { forceOptimisticNavigation: true }), name: 'Replace', }, @@ -61,9 +66,28 @@ export default { query: { foo: 'bar', }, + prefetch: () => { + console.log('custom prefetch'); + }, }, }, }, -}; +} as Meta; -export const Default = {}; +export const Default: StoryObj = { + play: async ({ canvasElement, step }) => { + const canvas = within(canvasElement); + + await step('Asserts whether forward hook is called', async () => { + const forwardBtn = await canvas.findByText('Go forward'); + await userEvent.click(forwardBtn); + await expect(useRouterMock().forward).toHaveBeenCalled(); + }); + + await step('Asserts whether custom prefetch hook is called', async () => { + const prefetchBtn = await canvas.findByText('Prefetch'); + await userEvent.click(prefetchBtn); + await expect(useRouterMock().prefetch).toHaveBeenCalledWith('/prefetched-html'); + }); + }, +}; diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/portable-stories.test.tsx b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/portable-stories.test.tsx index d6789edde932..79684dc595e0 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/portable-stories.test.tsx +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/portable-stories.test.tsx @@ -29,7 +29,7 @@ const runTests = (name: string, storiesModule: any) => { }) } -// // example with composeStory, returns a single story composed with args/decorators +// example with composeStory, returns a single story composed with args/decorators describe('renders', () => { runTests('nextHeaderStories', nextHeaderStories); runTests('navigationStories', navigationStories); diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock b/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock index 7b54b424d5b9..46d9fd1b8d40 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock @@ -3001,7 +3001,6 @@ __metadata: "@babel/preset-typescript": "npm:^7.23.2" "@babel/runtime": "npm:^7.23.2" "@pmmmwh/react-refresh-webpack-plugin": "npm:^0.5.11" - "@storybook/addon-actions": "workspace:*" "@storybook/builder-webpack5": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" From 6037744e0729357e0012f99a8673e507c640bbc9 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 9 Apr 2024 12:27:37 +0200 Subject: [PATCH 081/380] set up mocks in loaders instead of decorators --- code/frameworks/nextjs/src/preview.tsx | 14 ++++++++++- .../nextjs/src/routing/decorator.tsx | 10 ++------ .../navigation/app-router-provider.tsx | 6 ++--- .../nextjs/src/routing/router/index.ts | 2 +- .../routing/router/page-router-provider.tsx | 24 +++---------------- .../Router.stories.tsx | 16 +++++++++---- .../core-events/src/errors/preview-errors.ts | 2 +- .../nextjs/stories/Router.stories.tsx | 20 +++++++++++++--- 8 files changed, 52 insertions(+), 42 deletions(-) diff --git a/code/frameworks/nextjs/src/preview.tsx b/code/frameworks/nextjs/src/preview.tsx index 7fb164d1f0de..7dbfb344861b 100644 --- a/code/frameworks/nextjs/src/preview.tsx +++ b/code/frameworks/nextjs/src/preview.tsx @@ -11,6 +11,8 @@ import { HeadManagerDecorator } from './head-manager/decorator'; // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore we must ignore types here as during compilation they are not generated yet import { cookies, headers } from '@storybook/nextjs/headers.mock'; +import { createRouter } from './routing/router'; +import { createNavigation } from './routing/navigation'; function addNextHeadCount() { const meta = document.createElement('meta'); @@ -28,9 +30,19 @@ export const decorators: Addon_DecoratorFunction[] = [ HeadManagerDecorator, ]; -export const loaders: Addon_LoaderFunction = async () => { +export const loaders: Addon_LoaderFunction = async ({ globals, parameters }) => { cookies().mockRestore(); headers().mockRestore(); + + const { router, appDirectory } = parameters.nextjs ?? {}; + if (appDirectory) { + createNavigation(router); + } else { + createRouter({ + locale: globals.locale, + ...router, + }); + } }; export const parameters = { diff --git a/code/frameworks/nextjs/src/routing/decorator.tsx b/code/frameworks/nextjs/src/routing/decorator.tsx index d45f61b69c14..4edd87812b3f 100644 --- a/code/frameworks/nextjs/src/routing/decorator.tsx +++ b/code/frameworks/nextjs/src/routing/decorator.tsx @@ -11,7 +11,7 @@ const defaultRouterParams: RouteParams = { export const RouterDecorator = ( Story: React.FC, - { globals, parameters }: Addon_StoryContext + { parameters }: Addon_StoryContext ): React.ReactNode => { const nextAppDirectory = (parameters.nextjs?.appDirectory as NextAppDirectory | undefined) ?? false; @@ -33,13 +33,7 @@ export const RouterDecorator = ( } return ( - + ); diff --git a/code/frameworks/nextjs/src/routing/navigation/app-router-provider.tsx b/code/frameworks/nextjs/src/routing/navigation/app-router-provider.tsx index d4fcd1501676..efd122bae7c3 100644 --- a/code/frameworks/nextjs/src/routing/navigation/app-router-provider.tsx +++ b/code/frameworks/nextjs/src/routing/navigation/app-router-provider.tsx @@ -10,7 +10,7 @@ import { } from 'next/dist/shared/lib/hooks-client-context.shared-runtime'; import type { FlightRouterState } from 'next/dist/server/app-render/types'; import type { RouteParams } from '../types'; -import { createNavigation } from './index'; +import { useRouter } from './index'; type AppRouterProviderProps = { routeParams: RouteParams; @@ -30,7 +30,7 @@ export const AppRouterProvider: React.FC { - const { pathname, query, segments = [], ...restRouteParams } = routeParams; + const { pathname, query, segments = [] } = routeParams; const tree: FlightRouterState = [pathname, { children: getParallelRoutes([...segments]) }]; @@ -54,7 +54,7 @@ export const AppRouterProvider: React.FC - + ) => { +export const createRouter = (overrides: Partial) => { if (!routerAPI) { const routerActions: Partial = { push: fn((..._args: any[]) => { diff --git a/code/frameworks/nextjs/src/routing/router/page-router-provider.tsx b/code/frameworks/nextjs/src/routing/router/page-router-provider.tsx index abd948d0d9dd..b56dd5f97e9c 100644 --- a/code/frameworks/nextjs/src/routing/router/page-router-provider.tsx +++ b/code/frameworks/nextjs/src/routing/router/page-router-provider.tsx @@ -1,26 +1,8 @@ -import type { Globals } from '@storybook/csf'; import { RouterContext } from 'next/dist/shared/lib/router-context.shared-runtime'; import type { PropsWithChildren } from 'react'; import React from 'react'; -import type { RouteParams } from '../types'; -import { createRouter } from './index'; +import { useRouter } from './index'; -type PageRouterProviderProps = { - routeParams: RouteParams; - globals: Globals; -}; - -export const PageRouterProvider: React.FC> = ({ - children, - routeParams, - globals, -}) => ( - - {children} - +export const PageRouterProvider: React.FC = ({ children }) => ( + {children} ); diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Router.stories.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/Router.stories.tsx index ea524e55f9b8..7f3a60a787f0 100644 --- a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Router.stories.tsx +++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/Router.stories.tsx @@ -2,7 +2,7 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import { expect, within, userEvent } from '@storybook/test'; import { useRouter as useRouterMock } from '@storybook/nextjs/router'; -import { useRouter } from 'next/router'; +import Router, { useRouter } from 'next/router'; function Component() { const router = useRouter(); @@ -79,11 +79,19 @@ export const Default: StoryObj = { const canvas = within(canvasElement); const routerMock = useRouterMock(); - await step('Router property overrides should be available', async () => { - await expect(routerMock.pathname).toBe('/hello'); - await expect(routerMock.query).toEqual({ foo: 'bar' }); + await step('Router property overrides should be available in useRouter fn', async () => { + await expect(Router.pathname).toBe('/hello'); + await expect(Router.query).toEqual({ foo: 'bar' }); }); + await step( + 'Router property overrides should be available in default export from next/router', + async () => { + await expect(Router.pathname).toBe('/hello'); + await expect(Router.query).toEqual({ foo: 'bar' }); + } + ); + await step('Asserts whether forward hook is called', async () => { const forwardBtn = await canvas.findByText('Go forward'); await userEvent.click(forwardBtn); diff --git a/code/lib/core-events/src/errors/preview-errors.ts b/code/lib/core-events/src/errors/preview-errors.ts index 0872718a03c1..5821e6444509 100644 --- a/code/lib/core-events/src/errors/preview-errors.ts +++ b/code/lib/core-events/src/errors/preview-errors.ts @@ -248,7 +248,7 @@ export class NextjsRouterMocksNotAvailable extends StorybookError { template() { return dedent` - Tried to access router mocks from ${this.data.importType} but they were not created yet. You might be running code in an unsupported environment. + Tried to access router mocks from "${this.data.importType}" but they were not created yet. You might be running code in an unsupported environment. `; } } diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/Router.stories.tsx b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/Router.stories.tsx index 0319e17efa02..7f3a60a787f0 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/Router.stories.tsx +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/Router.stories.tsx @@ -2,7 +2,7 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import { expect, within, userEvent } from '@storybook/test'; import { useRouter as useRouterMock } from '@storybook/nextjs/router'; -import { useRouter } from 'next/router'; +import Router, { useRouter } from 'next/router'; function Component() { const router = useRouter(); @@ -77,17 +77,31 @@ export default { export const Default: StoryObj = { play: async ({ canvasElement, step }) => { const canvas = within(canvasElement); + const routerMock = useRouterMock(); + + await step('Router property overrides should be available in useRouter fn', async () => { + await expect(Router.pathname).toBe('/hello'); + await expect(Router.query).toEqual({ foo: 'bar' }); + }); + + await step( + 'Router property overrides should be available in default export from next/router', + async () => { + await expect(Router.pathname).toBe('/hello'); + await expect(Router.query).toEqual({ foo: 'bar' }); + } + ); await step('Asserts whether forward hook is called', async () => { const forwardBtn = await canvas.findByText('Go forward'); await userEvent.click(forwardBtn); - await expect(useRouterMock().forward).toHaveBeenCalled(); + await expect(routerMock.forward).toHaveBeenCalled(); }); await step('Asserts whether custom prefetch hook is called', async () => { const prefetchBtn = await canvas.findByText('Prefetch'); await userEvent.click(prefetchBtn); - await expect(useRouterMock().prefetch).toHaveBeenCalledWith('/prefetched-html'); + await expect(routerMock.prefetch).toHaveBeenCalledWith('/prefetched-html'); }); }, }; From d229729d5bb2281dfc9f5fbe9daa476512b4c4a8 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 9 Apr 2024 14:24:19 +0200 Subject: [PATCH 082/380] Update imports to use @storybook/nextjs/router and @storybook/nextjs/navigation in nextjs package.json and source files --- code/frameworks/nextjs/package.json | 6 ++++++ code/frameworks/nextjs/src/preview.tsx | 4 ++-- .../nextjs/src/routing/navigation/app-router-provider.tsx | 5 ++++- .../nextjs/src/routing/router/page-router-provider.tsx | 5 ++++- 4 files changed, 16 insertions(+), 4 deletions(-) diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 24a235df9501..b2c0f1d13fe5 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -77,6 +77,12 @@ ], "headers.mock": [ "dist/headers/index.d.ts" + ], + "router": [ + "dist/routing/router/index.d.ts" + ], + "navigation": [ + "dist/routing/navigation/index.d.ts" ] } }, diff --git a/code/frameworks/nextjs/src/preview.tsx b/code/frameworks/nextjs/src/preview.tsx index 7dbfb344861b..32380e899684 100644 --- a/code/frameworks/nextjs/src/preview.tsx +++ b/code/frameworks/nextjs/src/preview.tsx @@ -11,8 +11,8 @@ import { HeadManagerDecorator } from './head-manager/decorator'; // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore we must ignore types here as during compilation they are not generated yet import { cookies, headers } from '@storybook/nextjs/headers.mock'; -import { createRouter } from './routing/router'; -import { createNavigation } from './routing/navigation'; +import { createRouter } from '@storybook/nextjs/router'; +import { createNavigation } from '@storybook/nextjs/navigation'; function addNextHeadCount() { const meta = document.createElement('meta'); diff --git a/code/frameworks/nextjs/src/routing/navigation/app-router-provider.tsx b/code/frameworks/nextjs/src/routing/navigation/app-router-provider.tsx index efd122bae7c3..e34759453be2 100644 --- a/code/frameworks/nextjs/src/routing/navigation/app-router-provider.tsx +++ b/code/frameworks/nextjs/src/routing/navigation/app-router-provider.tsx @@ -10,7 +10,10 @@ import { } from 'next/dist/shared/lib/hooks-client-context.shared-runtime'; import type { FlightRouterState } from 'next/dist/server/app-render/types'; import type { RouteParams } from '../types'; -import { useRouter } from './index'; +// We need this import to be a singleton, and because it's used in multiple entrypoints +// both in ESM and CJS, importing it via the package name instead of having a local import +// is the only way to achieve it actually being a singleton +import { useRouter } from '@storybook/nextjs/navigation'; type AppRouterProviderProps = { routeParams: RouteParams; diff --git a/code/frameworks/nextjs/src/routing/router/page-router-provider.tsx b/code/frameworks/nextjs/src/routing/router/page-router-provider.tsx index b56dd5f97e9c..90554245d5f1 100644 --- a/code/frameworks/nextjs/src/routing/router/page-router-provider.tsx +++ b/code/frameworks/nextjs/src/routing/router/page-router-provider.tsx @@ -1,7 +1,10 @@ import { RouterContext } from 'next/dist/shared/lib/router-context.shared-runtime'; import type { PropsWithChildren } from 'react'; import React from 'react'; -import { useRouter } from './index'; +// We need this import to be a singleton, and because it's used in multiple entrypoints +// both in ESM and CJS, importing it via the package name instead of having a local import +// is the only way to achieve it actually being a singleton +import { useRouter } from '@storybook/nextjs/router'; export const PageRouterProvider: React.FC = ({ children }) => ( {children} From 4515e78c1d6968a2aac08e498b110c59b7adff98 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 2 Apr 2024 10:09:26 +0200 Subject: [PATCH 083/380] add events --- code/lib/core-events/src/index.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/code/lib/core-events/src/index.ts b/code/lib/core-events/src/index.ts index 82978a994d07..f9ad1e4a7d9f 100644 --- a/code/lib/core-events/src/index.ts +++ b/code/lib/core-events/src/index.ts @@ -75,6 +75,8 @@ enum events { TELEMETRY_ERROR = 'telemetryError', FILE_COMPONENT_SEARCH = 'fileComponentSearch', FILE_COMPONENT_SEARCH_RESULT = 'fileComponentSearchResult', + SAVE_STORY_REQUEST = 'saveStoryRequest', + SAVE_STORY_RESULT = 'saveStoryResult', } // Enables: `import Events from ...` From 22b79632b84dce79700eca7188d28916832dfc83 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 10 Apr 2024 13:01:45 +0200 Subject: [PATCH 084/380] fix singleton logic --- .../nextjs/src/routing/navigation/index.ts | 38 ++++--- .../nextjs/src/routing/router/index.ts | 100 +++++++++--------- 2 files changed, 67 insertions(+), 71 deletions(-) diff --git a/code/frameworks/nextjs/src/routing/navigation/index.ts b/code/frameworks/nextjs/src/routing/navigation/index.ts index 23e34cb0c190..804492c34d26 100644 --- a/code/frameworks/nextjs/src/routing/navigation/index.ts +++ b/code/frameworks/nextjs/src/routing/navigation/index.ts @@ -12,29 +12,27 @@ let navigationAPI: { }; export const createNavigation = (overrides: any) => { - if (!navigationAPI) { - const navigationActions = { - push: fn().mockName('nextNavigation.push'), - replace: fn().mockName('nextNavigation.replace'), - forward: fn().mockName('nextNavigation.forward'), - back: fn().mockName('nextNavigation.back'), - prefetch: fn().mockName('nextNavigation.prefetch'), - refresh: fn().mockName('nextNavigation.refresh'), - }; - - if (overrides) { - Object.keys(navigationActions).forEach((key) => { - if (key in overrides) { - (navigationActions as any)[key] = fn((...args: any[]) => { - return (overrides as any)[key](...args); - }).mockName(`nextNavigation.${key}`); - } - }); - } + const navigationActions = { + push: fn().mockName('nextNavigation.push'), + replace: fn().mockName('nextNavigation.replace'), + forward: fn().mockName('nextNavigation.forward'), + back: fn().mockName('nextNavigation.back'), + prefetch: fn().mockName('nextNavigation.prefetch'), + refresh: fn().mockName('nextNavigation.refresh'), + }; - navigationAPI = navigationActions; + if (overrides) { + Object.keys(navigationActions).forEach((key) => { + if (key in overrides) { + (navigationActions as any)[key] = fn((...args: any[]) => { + return (overrides as any)[key](...args); + }).mockName(`nextNavigation.${key}`); + } + }); } + navigationAPI = navigationActions; + return navigationAPI; }; diff --git a/code/frameworks/nextjs/src/routing/router/index.ts b/code/frameworks/nextjs/src/routing/router/index.ts index 587ab08a4791..120063353e84 100644 --- a/code/frameworks/nextjs/src/routing/router/index.ts +++ b/code/frameworks/nextjs/src/routing/router/index.ts @@ -32,62 +32,60 @@ let routerAPI: { } & typeof defaultRouterState; export const createRouter = (overrides: Partial) => { - if (!routerAPI) { - const routerActions: Partial = { - push: fn((..._args: any[]) => { - return Promise.resolve(true); - }).mockName('nextRouter.push'), - replace: fn((..._args: any[]) => { - return Promise.resolve(true); - }).mockName('nextRouter.replace'), - reload: fn((..._args: any[]) => {}).mockName('nextRouter.reload'), - back: fn((..._args: any[]) => {}).mockName('nextRouter.back'), - forward: fn(() => {}).mockName('nextRouter.forward'), - prefetch: fn((..._args: any[]) => { - return Promise.resolve(); - }).mockName('nextRouter.prefetch'), - beforePopState: fn((..._args: any[]) => {}).mockName('nextRouter.beforePopState'), - }; + const routerActions: Partial = { + push: fn((..._args: any[]) => { + return Promise.resolve(true); + }).mockName('nextRouter.push'), + replace: fn((..._args: any[]) => { + return Promise.resolve(true); + }).mockName('nextRouter.replace'), + reload: fn((..._args: any[]) => {}).mockName('nextRouter.reload'), + back: fn((..._args: any[]) => {}).mockName('nextRouter.back'), + forward: fn(() => {}).mockName('nextRouter.forward'), + prefetch: fn((..._args: any[]) => { + return Promise.resolve(); + }).mockName('nextRouter.prefetch'), + beforePopState: fn((..._args: any[]) => {}).mockName('nextRouter.beforePopState'), + }; - const routerEvents: NextRouter['events'] = { - on: fn((..._args: any[]) => {}).mockName('nextRouter.events.on'), - off: fn((..._args: any[]) => {}).mockName('nextRouter.events.off'), - emit: fn((..._args: any[]) => {}).mockName('nextRouter.events.emit'), - }; + const routerEvents: NextRouter['events'] = { + on: fn((..._args: any[]) => {}).mockName('nextRouter.events.on'), + off: fn((..._args: any[]) => {}).mockName('nextRouter.events.off'), + emit: fn((..._args: any[]) => {}).mockName('nextRouter.events.emit'), + }; - if (overrides) { - Object.keys(routerActions).forEach((key) => { - if (key in overrides) { - (routerActions as any)[key] = fn((...args: any[]) => { - return (overrides as any)[key](...args); - }).mockName(`nextRouter.${key}`); - } - }); - } + if (overrides) { + Object.keys(routerActions).forEach((key) => { + if (key in overrides) { + (routerActions as any)[key] = fn((...args: any[]) => { + return (overrides as any)[key](...args); + }).mockName(`nextRouter.${key}`); + } + }); + } - if (overrides?.events) { - Object.keys(routerEvents).forEach((key) => { - if (key in routerEvents) { - (routerEvents as any)[key] = fn((...args: any[]) => { - return (overrides.events as any)[key](...args); - }).mockName(`nextRouter.events.${key}`); - } - }); - } + if (overrides?.events) { + Object.keys(routerEvents).forEach((key) => { + if (key in routerEvents) { + (routerEvents as any)[key] = fn((...args: any[]) => { + return (overrides.events as any)[key](...args); + }).mockName(`nextRouter.events.${key}`); + } + }); + } - routerAPI = { - ...defaultRouterState, - ...overrides, - ...routerActions, - // @ts-expect-error TODO improve typings - events: routerEvents, - }; + routerAPI = { + ...defaultRouterState, + ...overrides, + ...routerActions, + // @ts-expect-error TODO improve typings + events: routerEvents, + }; - // overwrite the singleton router from next/router - singletonRouter.router = routerAPI as any; - singletonRouter.readyCallbacks.forEach((cb) => cb()); - singletonRouter.readyCallbacks = []; - } + // overwrite the singleton router from next/router + singletonRouter.router = routerAPI as any; + singletonRouter.readyCallbacks.forEach((cb) => cb()); + singletonRouter.readyCallbacks = []; return routerAPI as unknown as NextRouter; }; From ace01fd9b68fc1e71a6d6180392a8484d102fd64 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 10 Apr 2024 13:04:42 +0200 Subject: [PATCH 085/380] Update imports to use @storybook/nextjs/router.mock and @storybook/nextjs/navigation.mock --- code/frameworks/nextjs/package.json | 10 +- code/frameworks/nextjs/src/preview.tsx | 8 +- .../navigation/app-router-provider.tsx | 6 +- .../nextjs/src/routing/navigation/index.ts | 21 +-- .../nextjs/src/routing/router/index.ts | 31 +++-- .../routing/router/page-router-provider.tsx | 6 +- .../Router.stories.jsx | 25 +++- .../Navigation.stories.tsx | 4 +- .../Router.stories.tsx | 5 +- .../nextjs/stories/Navigation.stories.tsx | 4 +- .../nextjs/stories/Router.stories.tsx | 5 +- .../portable-stories.test.tsx.snap | 4 + .../nextjs/yarn.lock | 126 +++++++++--------- 13 files changed, 146 insertions(+), 109 deletions(-) diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index b2c0f1d13fe5..a9cac9d5a6ec 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -52,12 +52,12 @@ "require": "./dist/headers/index.js", "import": "./dist/headers/index.mjs" }, - "./router": { + "./router.mock": { "types": "./dist/routing/router/index.d.ts", "require": "./dist/routing/router/index.js", "import": "./dist/routing/router/index.mjs" }, - "./navigation": { + "./navigation.mock": { "types": "./dist/routing/navigation/index.d.ts", "require": "./dist/routing/navigation/index.js", "import": "./dist/routing/navigation/index.mjs" @@ -78,10 +78,10 @@ "headers.mock": [ "dist/headers/index.d.ts" ], - "router": [ + "router.mock": [ "dist/routing/router/index.d.ts" ], - "navigation": [ + "navigation.mock": [ "dist/routing/navigation/index.d.ts" ] } @@ -201,4 +201,4 @@ "platform": "node" }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17" -} \ No newline at end of file +} diff --git a/code/frameworks/nextjs/src/preview.tsx b/code/frameworks/nextjs/src/preview.tsx index 32380e899684..e65e76bf4854 100644 --- a/code/frameworks/nextjs/src/preview.tsx +++ b/code/frameworks/nextjs/src/preview.tsx @@ -11,8 +11,12 @@ import { HeadManagerDecorator } from './head-manager/decorator'; // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore we must ignore types here as during compilation they are not generated yet import { cookies, headers } from '@storybook/nextjs/headers.mock'; -import { createRouter } from '@storybook/nextjs/router'; -import { createNavigation } from '@storybook/nextjs/navigation'; +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore we must ignore types here as during compilation they are not generated yet +import { createRouter } from '@storybook/nextjs/router.mock'; +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore we must ignore types here as during compilation they are not generated yet +import { createNavigation } from '@storybook/nextjs/navigation.mock'; function addNextHeadCount() { const meta = document.createElement('meta'); diff --git a/code/frameworks/nextjs/src/routing/navigation/app-router-provider.tsx b/code/frameworks/nextjs/src/routing/navigation/app-router-provider.tsx index e34759453be2..7e26b54e050f 100644 --- a/code/frameworks/nextjs/src/routing/navigation/app-router-provider.tsx +++ b/code/frameworks/nextjs/src/routing/navigation/app-router-provider.tsx @@ -13,7 +13,9 @@ import type { RouteParams } from '../types'; // We need this import to be a singleton, and because it's used in multiple entrypoints // both in ESM and CJS, importing it via the package name instead of having a local import // is the only way to achieve it actually being a singleton -import { useRouter } from '@storybook/nextjs/navigation'; +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore we must ignore types here as during compilation they are not generated yet +import { getRouter } from '@storybook/nextjs/navigation.mock'; type AppRouterProviderProps = { routeParams: RouteParams; @@ -57,7 +59,7 @@ export const AppRouterProvider: React.FC - + { const navigationActions = { - push: fn().mockName('nextNavigation.push'), - replace: fn().mockName('nextNavigation.replace'), - forward: fn().mockName('nextNavigation.forward'), - back: fn().mockName('nextNavigation.back'), - prefetch: fn().mockName('nextNavigation.prefetch'), - refresh: fn().mockName('nextNavigation.refresh'), + push: fn().mockName('useRouter().push'), + replace: fn().mockName('useRouter().replace'), + forward: fn().mockName('useRouter().forward'), + back: fn().mockName('useRouter().back'), + prefetch: fn().mockName('useRouter().prefetch'), + refresh: fn().mockName('useRouter().refresh'), }; if (overrides) { @@ -26,7 +31,7 @@ export const createNavigation = (overrides: any) => { if (key in overrides) { (navigationActions as any)[key] = fn((...args: any[]) => { return (overrides as any)[key](...args); - }).mockName(`nextNavigation.${key}`); + }).mockName(`useRouter().${key}`); } }); } @@ -36,7 +41,7 @@ export const createNavigation = (overrides: any) => { return navigationAPI; }; -export const useRouter = () => { +export const getRouter = () => { if (!navigationAPI) { throw new NextjsRouterMocksNotAvailable({ importType: 'next/navigation', diff --git a/code/frameworks/nextjs/src/routing/router/index.ts b/code/frameworks/nextjs/src/routing/router/index.ts index 120063353e84..922ccca2e5a4 100644 --- a/code/frameworks/nextjs/src/routing/router/index.ts +++ b/code/frameworks/nextjs/src/routing/router/index.ts @@ -31,27 +31,32 @@ let routerAPI: { }; } & typeof defaultRouterState; +/** + * Creates a next/router router API mock. Used internally. + * @ignore + * @internal + * */ export const createRouter = (overrides: Partial) => { const routerActions: Partial = { push: fn((..._args: any[]) => { return Promise.resolve(true); - }).mockName('nextRouter.push'), + }).mockName('useRouter().push'), replace: fn((..._args: any[]) => { return Promise.resolve(true); - }).mockName('nextRouter.replace'), - reload: fn((..._args: any[]) => {}).mockName('nextRouter.reload'), - back: fn((..._args: any[]) => {}).mockName('nextRouter.back'), - forward: fn(() => {}).mockName('nextRouter.forward'), + }).mockName('useRouter().replace'), + reload: fn((..._args: any[]) => {}).mockName('useRouter().reload'), + back: fn((..._args: any[]) => {}).mockName('useRouter().back'), + forward: fn(() => {}).mockName('useRouter().forward'), prefetch: fn((..._args: any[]) => { return Promise.resolve(); - }).mockName('nextRouter.prefetch'), - beforePopState: fn((..._args: any[]) => {}).mockName('nextRouter.beforePopState'), + }).mockName('useRouter().prefetch'), + beforePopState: fn((..._args: any[]) => {}).mockName('useRouter().beforePopState'), }; const routerEvents: NextRouter['events'] = { - on: fn((..._args: any[]) => {}).mockName('nextRouter.events.on'), - off: fn((..._args: any[]) => {}).mockName('nextRouter.events.off'), - emit: fn((..._args: any[]) => {}).mockName('nextRouter.events.emit'), + on: fn((..._args: any[]) => {}).mockName('useRouter().events.on'), + off: fn((..._args: any[]) => {}).mockName('useRouter().events.off'), + emit: fn((..._args: any[]) => {}).mockName('useRouter().events.emit'), }; if (overrides) { @@ -59,7 +64,7 @@ export const createRouter = (overrides: Partial) => { if (key in overrides) { (routerActions as any)[key] = fn((...args: any[]) => { return (overrides as any)[key](...args); - }).mockName(`nextRouter.${key}`); + }).mockName(`useRouter().${key}`); } }); } @@ -69,7 +74,7 @@ export const createRouter = (overrides: Partial) => { if (key in routerEvents) { (routerEvents as any)[key] = fn((...args: any[]) => { return (overrides.events as any)[key](...args); - }).mockName(`nextRouter.events.${key}`); + }).mockName(`useRouter().events.${key}`); } }); } @@ -90,7 +95,7 @@ export const createRouter = (overrides: Partial) => { return routerAPI as unknown as NextRouter; }; -export const useRouter = () => { +export const getRouter = () => { if (!routerAPI) { throw new NextjsRouterMocksNotAvailable({ importType: 'next/router', diff --git a/code/frameworks/nextjs/src/routing/router/page-router-provider.tsx b/code/frameworks/nextjs/src/routing/router/page-router-provider.tsx index 90554245d5f1..e536a16db547 100644 --- a/code/frameworks/nextjs/src/routing/router/page-router-provider.tsx +++ b/code/frameworks/nextjs/src/routing/router/page-router-provider.tsx @@ -4,8 +4,10 @@ import React from 'react'; // We need this import to be a singleton, and because it's used in multiple entrypoints // both in ESM and CJS, importing it via the package name instead of having a local import // is the only way to achieve it actually being a singleton -import { useRouter } from '@storybook/nextjs/router'; +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore we must ignore types here as during compilation they are not generated yet +import { getRouter } from '@storybook/nextjs/router.mock'; export const PageRouterProvider: React.FC = ({ children }) => ( - {children} + {children} ); diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-js/Router.stories.jsx b/code/frameworks/nextjs/template/stories_nextjs-default-js/Router.stories.jsx index ceee12ad3666..9813958be952 100644 --- a/code/frameworks/nextjs/template/stories_nextjs-default-js/Router.stories.jsx +++ b/code/frameworks/nextjs/template/stories_nextjs-default-js/Router.stories.jsx @@ -1,7 +1,7 @@ -import { expect, within, userEvent } from '@storybook/test'; -import { useRouter as useRouterMock } from '@storybook/nextjs/router'; -import { useRouter } from 'next/router'; import React from 'react'; +import { expect, within, userEvent } from '@storybook/test'; +import { getRouter } from '@storybook/nextjs/router.mock'; +import Router, { useRouter } from 'next/router'; function Component() { const router = useRouter(); @@ -32,6 +32,7 @@ function Component() { return (
+
Router pathname: {Router.pathname}
pathname: {router.pathname}
searchparams:{' '} @@ -74,17 +75,31 @@ export default { export const Default = { play: async ({ canvasElement, step }) => { const canvas = within(canvasElement); + const routerMock = getRouter(); + + await step('Router property overrides should be available in useRouter fn', async () => { + await expect(Router.pathname).toBe('/hello'); + await expect(Router.query).toEqual({ foo: 'bar' }); + }); + + await step( + 'Router property overrides should be available in default export from next/router', + async () => { + await expect(Router.pathname).toBe('/hello'); + await expect(Router.query).toEqual({ foo: 'bar' }); + } + ); await step('Asserts whether forward hook is called', async () => { const forwardBtn = await canvas.findByText('Go forward'); await userEvent.click(forwardBtn); - await expect(useRouterMock().forward).toHaveBeenCalled(); + await expect(routerMock.forward).toHaveBeenCalled(); }); await step('Asserts whether custom prefetch hook is called', async () => { const prefetchBtn = await canvas.findByText('Prefetch'); await userEvent.click(prefetchBtn); - await expect(useRouterMock().prefetch).toHaveBeenCalledWith('/prefetched-html'); + await expect(routerMock.prefetch).toHaveBeenCalledWith('/prefetched-html'); }); }, }; diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Navigation.stories.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/Navigation.stories.tsx index 1049d345c6d4..c477cb785c58 100644 --- a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Navigation.stories.tsx +++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/Navigation.stories.tsx @@ -3,7 +3,7 @@ import { useRouter, usePathname, useSearchParams } from 'next/navigation'; import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import { expect, userEvent, within } from '@storybook/test'; -import { useRouter as useRouterMock } from '@storybook/nextjs/navigation'; +import { getRouter } from '@storybook/nextjs/navigation.mock'; function Component() { const router = useRouter(); @@ -86,7 +86,7 @@ export default { export const Default: StoryObj = { play: async ({ canvasElement, step }) => { const canvas = within(canvasElement); - const routerMock = useRouterMock(); + const routerMock = getRouter(); await step('Asserts whether forward hook is called', async () => { const forwardBtn = await canvas.findByText('Go forward'); diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Router.stories.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/Router.stories.tsx index 7f3a60a787f0..f5a840241fb4 100644 --- a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Router.stories.tsx +++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/Router.stories.tsx @@ -1,7 +1,7 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import { expect, within, userEvent } from '@storybook/test'; -import { useRouter as useRouterMock } from '@storybook/nextjs/router'; +import { getRouter } from '@storybook/nextjs/router.mock'; import Router, { useRouter } from 'next/router'; function Component() { @@ -35,6 +35,7 @@ function Component() { return (
+
Router pathname: {Router.pathname}
pathname: {router.pathname}
searchparams:{' '} @@ -77,7 +78,7 @@ export default { export const Default: StoryObj = { play: async ({ canvasElement, step }) => { const canvas = within(canvasElement); - const routerMock = useRouterMock(); + const routerMock = getRouter(); await step('Router property overrides should be available in useRouter fn', async () => { await expect(Router.pathname).toBe('/hello'); diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/Navigation.stories.tsx b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/Navigation.stories.tsx index 1049d345c6d4..c477cb785c58 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/Navigation.stories.tsx +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/Navigation.stories.tsx @@ -3,7 +3,7 @@ import { useRouter, usePathname, useSearchParams } from 'next/navigation'; import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import { expect, userEvent, within } from '@storybook/test'; -import { useRouter as useRouterMock } from '@storybook/nextjs/navigation'; +import { getRouter } from '@storybook/nextjs/navigation.mock'; function Component() { const router = useRouter(); @@ -86,7 +86,7 @@ export default { export const Default: StoryObj = { play: async ({ canvasElement, step }) => { const canvas = within(canvasElement); - const routerMock = useRouterMock(); + const routerMock = getRouter(); await step('Asserts whether forward hook is called', async () => { const forwardBtn = await canvas.findByText('Go forward'); diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/Router.stories.tsx b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/Router.stories.tsx index 7f3a60a787f0..f5a840241fb4 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/Router.stories.tsx +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/Router.stories.tsx @@ -1,7 +1,7 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import { expect, within, userEvent } from '@storybook/test'; -import { useRouter as useRouterMock } from '@storybook/nextjs/router'; +import { getRouter } from '@storybook/nextjs/router.mock'; import Router, { useRouter } from 'next/router'; function Component() { @@ -35,6 +35,7 @@ function Component() { return (
+
Router pathname: {Router.pathname}
pathname: {router.pathname}
searchparams:{' '} @@ -77,7 +78,7 @@ export default { export const Default: StoryObj = { play: async ({ canvasElement, step }) => { const canvas = within(canvasElement); - const routerMock = useRouterMock(); + const routerMock = getRouter(); await step('Router property overrides should be available in useRouter fn', async () => { await expect(Router.pathname).toBe('/hello'); diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/__snapshots__/portable-stories.test.tsx.snap b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/__snapshots__/portable-stories.test.tsx.snap index 7f5212f2f6a3..2b8af2b9cd59 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/__snapshots__/portable-stories.test.tsx.snap +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/__snapshots__/portable-stories.test.tsx.snap @@ -832,6 +832,10 @@ exports[`renders routerStories stories renders Default 1`] = ` Global Decorator
+
+ Router pathname: + /hello +
pathname: /hello diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock b/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock index 46d9fd1b8d40..1846f8c034a2 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock @@ -2379,7 +2379,7 @@ __metadata: "@storybook/addon-actions@file:../../../code/addons/actions::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/addon-actions@file:../../../code/addons/actions#../../../code/addons/actions::hash=99649f&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/addon-actions@file:../../../code/addons/actions#../../../code/addons/actions::hash=a58e61&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-events": "workspace:*" "@storybook/global": "npm:^5.0.0" @@ -2387,7 +2387,7 @@ __metadata: dequal: "npm:^2.0.2" polished: "npm:^4.2.2" uuid: "npm:^9.0.0" - checksum: 10/79a14c7a74591e404e5ec22c2b6c9eaa03dd48bf3316470dd2642e3c70abd7c90b168fd350e729b617967c7d759df2ef0107534d218d1138b12e737c8a3e888e + checksum: 10/448ef050488c32b161113c707a9bd3e4eb734f7a23f350d7cb05dd30927785c19b0eb1b2f01f8f5f7106e8f46dcc2cfc9496a089dee818754dc83ae5403d8ee6 languageName: node linkType: hard @@ -2403,17 +2403,13 @@ __metadata: linkType: hard "@storybook/addon-controls@file:../../../code/addons/controls::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/addon-controls@file:../../../code/addons/controls#../../../code/addons/controls::hash=358687&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/addon-controls@file:../../../code/addons/controls#../../../code/addons/controls::hash=b28ca0&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/blocks": "workspace:*" - "@storybook/core-common": "workspace:*" - cjs-module-lexer: "npm:^1.2.3" - es-module-lexer: "npm:^1.5.0" - globby: "npm:^14.0.1" lodash: "npm:^4.17.21" ts-dedent: "npm:^2.0.0" - checksum: 10/feb098e18f942562769dfdfb4afc70655f67f11e6d14acf8e3ca4cfe9a22e09e89ede9f17be6ff1c07a56bed8a6fa1961fa044137a3e7a34471345bcccd091f2 + checksum: 10/f68a13e40bda392c1abc4cee2f2294fe98f11e8b34af8213532ae14027327efbafb3c9a8d75d300a3c58fb8d036a09f349e60cd064dd8dbde504add2945bab6b languageName: node linkType: hard @@ -2478,7 +2474,7 @@ __metadata: "@storybook/addon-interactions@file:../../../code/addons/interactions::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/addon-interactions@file:../../../code/addons/interactions#../../../code/addons/interactions::hash=e7e04a&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/addon-interactions@file:../../../code/addons/interactions#../../../code/addons/interactions::hash=43a156&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" "@storybook/instrumenter": "workspace:*" @@ -2486,7 +2482,7 @@ __metadata: "@storybook/types": "workspace:*" polished: "npm:^4.2.2" ts-dedent: "npm:^2.2.0" - checksum: 10/c66d7db9c1356903d444211962054b0a692a56f7ed5debcaa1f2e40fd57575975b8de86c2fb3be3a140e69cdc8f36b25f81be6e2ca55fb4facf826694d8be65f + checksum: 10/7ab50dfb5ccfde231d5ebde1e695512c5bb3706e5fe9bc580fbf23d5298ac7685e9648fbbc5f65605779954dc2f04ac1ce799e47b387d7eaaff5c9d7e8485602 languageName: node linkType: hard @@ -2590,7 +2586,7 @@ __metadata: "@storybook/builder-webpack5@file:../../../code/builders/builder-webpack5::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/builder-webpack5@file:../../../code/builders/builder-webpack5#../../../code/builders/builder-webpack5::hash=983659&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/builder-webpack5@file:../../../code/builders/builder-webpack5#../../../code/builders/builder-webpack5::hash=c0c586&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" @@ -2629,26 +2625,26 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 10/f84f41cd8ac80376ba603f4bb58da565f2b0e95ed37593279d85c4e5573de64633f10b7c6f2bd399f6d40057f1c97934760b969326520250f6de5efd07ac967b + checksum: 10/f4fe0264184b91d9a96baf2d35fc7c7c212b516901650c852f61c2aec2e6b7d81f6828b7ca7ce34f1623bab5cd838936d5877d982df0fa75cab577af78ce79ef languageName: node linkType: hard "@storybook/channels@file:../../../code/lib/channels::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/channels@file:../../../code/lib/channels#../../../code/lib/channels::hash=3a33a2&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/channels@file:../../../code/lib/channels#../../../code/lib/channels::hash=413c8e&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" "@storybook/global": "npm:^5.0.0" telejson: "npm:^7.2.0" tiny-invariant: "npm:^1.3.1" - checksum: 10/cda1b155f07fdac919a29e5a5287ae33ef4b3ed9c5c9816c29e17e3aa0dd788dc59da8775c40341ebcbd426ecf4f9ab629949dfe945834f48db7ca6053c062f1 + checksum: 10/6091e0ca5a19b46589877a6a17cac725ef863a8cdf61d812261673e16227490f8b80fcf26daa8924dbcaad434c91118ac399f3a610c7eec5ed094e7b0dfd0947 languageName: node linkType: hard "@storybook/cli@file:../../../code/lib/cli::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/cli@file:../../../code/lib/cli#../../../code/lib/cli::hash=49e395&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/cli@file:../../../code/lib/cli#../../../code/lib/cli::hash=2914c7&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@babel/core": "npm:^7.23.0" "@babel/types": "npm:^7.23.0" @@ -2689,16 +2685,16 @@ __metadata: bin: getstorybook: ./bin/index.js sb: ./bin/index.js - checksum: 10/37be78e7b11cfb9d712f9b948e3017665fcee970e1b3a4806f3f8307ea9db7e39f4b12fa919086a53efbe4e24a5e6196b2daafb958c11145e9e5d224fa70af55 + checksum: 10/6c967c34ef47687aa6ccbc70d82f22e375be79af1bf5eec3e1163c7774b65fda69a414c0aa712039062a9f184bc84d70e7fcf713712c28d4a121cc3848a32600 languageName: node linkType: hard "@storybook/client-logger@file:../../../code/lib/client-logger::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/client-logger@file:../../../code/lib/client-logger#../../../code/lib/client-logger::hash=f3ac76&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/client-logger@file:../../../code/lib/client-logger#../../../code/lib/client-logger::hash=6408e1&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" - checksum: 10/00b5cfade208483f5ec85c8aa59cabf402502a4cf1d9c3ee24a311a396e65ce97f0a3d4356aac9f413c8d84c9804ccb07aaeda6f3d553799e6e036960f4a2fbe + checksum: 10/ff3312279cf1bcaa3fcf91149951e4b7b6cba79ddbb0f80e488126a38bf1f7ceab4ad43cf40324b5ec9c3a8a786695042bc7cd47a0ae0a4835f06dddc5fb214e languageName: node linkType: hard @@ -2727,7 +2723,7 @@ __metadata: "@storybook/components@file:../../../code/ui/components::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/components@file:../../../code/ui/components#../../../code/ui/components::hash=2c348b&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/components@file:../../../code/ui/components#../../../code/ui/components::hash=636348&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@radix-ui/react-slot": "npm:^1.0.2" "@storybook/client-logger": "workspace:*" @@ -2741,13 +2737,13 @@ __metadata: peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: 10/5ca7607bebb485e1dbb5c26f5dc3482e661d1646381be3ae26284c1e82cb0e2de51e05f5c4272ebe4d5fa6536aecb8dcd46e3da871aad90ba67a2e7e8987d278 + checksum: 10/02326f8b50631922d80cf64163abf4e723c5a1fd78c1ae1b276c95ff7992c0a826736badf1b7222038d83775b2937ef60de426aab7a6d5262a7b1152f5825abc languageName: node linkType: hard "@storybook/core-common@file:../../../code/lib/core-common::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/core-common@file:../../../code/lib/core-common#../../../code/lib/core-common::hash=55d292&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/core-common@file:../../../code/lib/core-common#../../../code/lib/core-common::hash=26f1e6&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-events": "workspace:*" "@storybook/csf-tools": "workspace:*" @@ -2777,22 +2773,22 @@ __metadata: tiny-invariant: "npm:^1.3.1" ts-dedent: "npm:^2.0.0" util: "npm:^0.12.4" - checksum: 10/e9308c3683651e2c925823e4bee0f91156ba544b0dc72ee6291810e7bd2e17690bce3f426c10d942fd5e18eb545589e5a3347cd02eb6ecceb058dad7a56bb775 + checksum: 10/7b692d71f9d170253ad376d67d364d351eff3d6f9b21fcf2471aefbf78fe4fdfb61a24f444630ad0bcbe3d560b92350271087e03f7e040cedbbfbb142ef0bc7b languageName: node linkType: hard "@storybook/core-events@file:../../../code/lib/core-events::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/core-events@file:../../../code/lib/core-events#../../../code/lib/core-events::hash=840150&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/core-events@file:../../../code/lib/core-events#../../../code/lib/core-events::hash=3d1227&locator=portable-stories-nextjs%40workspace%3A." dependencies: ts-dedent: "npm:^2.0.0" - checksum: 10/ccfa4397af9c114f401ac87d232f66c0cb37e7ee104647b36dd34e7bf598ff7e3a22fb18a6fb9d1529cef35f053056e34fa3f7626e62c5e133d31bd58fd6b5cb + checksum: 10/9ecdadbfc30f79f4ef930595681e39197e8545d32308b9e9a1829f3f67047521d44c66664386f6be62a75019abe67e5b37d08bd9ced83eeee28c0602f8bed5fa languageName: node linkType: hard "@storybook/core-server@file:../../../code/lib/core-server::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/core-server@file:../../../code/lib/core-server#../../../code/lib/core-server::hash=2c034c&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/core-server@file:../../../code/lib/core-server#../../../code/lib/core-server::hash=e5bcbd&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@aw-web-design/x-default-browser": "npm:1.4.126" "@babel/core": "npm:^7.23.9" @@ -2817,9 +2813,11 @@ __metadata: "@types/semver": "npm:^7.3.4" better-opn: "npm:^3.0.2" chalk: "npm:^4.1.0" + cjs-module-lexer: "npm:^1.2.3" cli-table3: "npm:^0.6.1" compression: "npm:^1.7.4" detect-port: "npm:^1.3.0" + es-module-lexer: "npm:^1.5.0" express: "npm:^4.17.3" fs-extra: "npm:^11.1.0" globby: "npm:^14.0.1" @@ -2837,20 +2835,20 @@ __metadata: util-deprecate: "npm:^1.0.2" watchpack: "npm:^2.2.0" ws: "npm:^8.2.3" - checksum: 10/83c58dfa24e67e8ea10107858e723eebe3ebafa17580fbe9526022e02d1ba2467ef5e75ba3b303436c470a7151f183ad2d781b4cef1201a73cdf8f10d317cc57 + checksum: 10/1f4f9495d5d3158613966a1b84f8fb19d8fcee6d05f06c885d27315cf8416fe36b18c898d577ff2a5ad72157d7f7e63171d9b49bf0191cdc45519f224e5c5ad7 languageName: node linkType: hard "@storybook/core-webpack@file:../../../code/lib/core-webpack::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/core-webpack@file:../../../code/lib/core-webpack#../../../code/lib/core-webpack::hash=d17dda&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/core-webpack@file:../../../code/lib/core-webpack#../../../code/lib/core-webpack::hash=1c6e9a&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-common": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/types": "workspace:*" "@types/node": "npm:^18.0.0" ts-dedent: "npm:^2.0.0" - checksum: 10/2e56db38374ec96f01c00c0fa4c8a9090c1db1d56c8c611a93d1a0c60769aa6a2c751ed29fa6c3a3a7adbf99d457287908e8e01ee1848ab6c59f6837934d81bf + checksum: 10/af79e1e751158c7d47475736c052cf1fd6535fbaa131168141a06eef2ed5f178165771dba4e4995a567d5d180d4af33a4e75c573153ec39a838901cbb16aa4c1 languageName: node linkType: hard @@ -2866,7 +2864,7 @@ __metadata: "@storybook/csf-tools@file:../../../code/lib/csf-tools::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/csf-tools@file:../../../code/lib/csf-tools#../../../code/lib/csf-tools::hash=69584a&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/csf-tools@file:../../../code/lib/csf-tools#../../../code/lib/csf-tools::hash=703916&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@babel/generator": "npm:^7.23.0" "@babel/parser": "npm:^7.23.0" @@ -2877,7 +2875,7 @@ __metadata: fs-extra: "npm:^11.1.0" recast: "npm:^0.23.5" ts-dedent: "npm:^2.0.0" - checksum: 10/7fce79866ace04b9a2bc78a66a03e27e6e770b4279e1b40c08634bce01eb57be22f5f192f73c6a65cc959c8910f63a3d35e31a71fe3ac821aea095722e324710 + checksum: 10/b597a467657223667710c73bcdd8d85e481a7c088e816539dd9513f2a42cb825e1d3fdd5461772d969201d2f6901280c30a9712d8711b7e12661a01d692f6871 languageName: node linkType: hard @@ -2908,7 +2906,7 @@ __metadata: "@storybook/docs-tools@file:../../../code/lib/docs-tools::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/docs-tools@file:../../../code/lib/docs-tools#../../../code/lib/docs-tools::hash=4be280&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/docs-tools@file:../../../code/lib/docs-tools#../../../code/lib/docs-tools::hash=0f1a92&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-common": "workspace:*" "@storybook/preview-api": "workspace:*" @@ -2917,7 +2915,7 @@ __metadata: assert: "npm:^2.1.0" doctrine: "npm:^3.0.0" lodash: "npm:^4.17.21" - checksum: 10/121355441e903b87a0b9e590eca45a9b355af949148da6d23434f59b2aa753f00e0ffb8bc625d4ca91cf01e5e9782caceb561537d62729a2b2e240b6e640a0f4 + checksum: 10/6efb67c748bf9616313844cc482a31b49834d7b94767a544b7a5ed9a2e2d28c3d8a945162040b09f39af3f36c5288c00a83a67166c5d6a91b38875b8ff039acd languageName: node linkType: hard @@ -2940,7 +2938,7 @@ __metadata: "@storybook/instrumenter@file:../../../code/lib/instrumenter::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/instrumenter@file:../../../code/lib/instrumenter#../../../code/lib/instrumenter::hash=ffe9d7&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/instrumenter@file:../../../code/lib/instrumenter#../../../code/lib/instrumenter::hash=da2c8f&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" @@ -2949,13 +2947,13 @@ __metadata: "@storybook/preview-api": "workspace:*" "@vitest/utils": "npm:^1.3.1" util: "npm:^0.12.4" - checksum: 10/84948fcfafe05e5934117e6c514a1788f9d146d28f749c11313e5f65c60f3f20be0e659e97f14a6b5ce405b01afa4941571f644a9cb88d8b3a956c2c79413723 + checksum: 10/a55b3615eee655ef969641128c408ad5a6f3a0196af135e4ea1aa9289b9a2c98d84b34c3a57a25ca8cf6e619faad5fe6440232097fb99ecf7fc0341395a8ce16 languageName: node linkType: hard "@storybook/manager-api@file:../../../code/lib/manager-api::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/manager-api@file:../../../code/lib/manager-api#../../../code/lib/manager-api::hash=3e3312&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/manager-api@file:../../../code/lib/manager-api#../../../code/lib/manager-api::hash=4ab1f3&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" @@ -2972,20 +2970,20 @@ __metadata: store2: "npm:^2.14.2" telejson: "npm:^7.2.0" ts-dedent: "npm:^2.0.0" - checksum: 10/dcc92a7797ccf0f986ef2eb9077884799e4cc92603ca52a69071b4943ca149fd17d771c64bd1fd474c8287b4bda5385c7b24bada7acc9f7413deac152ec32157 + checksum: 10/ef8fe488bd220f3b895d26895e5a55a9bc110ee799f062f06d3c32dfa5ccd834c04074d96d8d4dc8c41336e322b2d3a4e0f93dc518442b22a9b36ddbfc92f990 languageName: node linkType: hard "@storybook/manager@file:../../../code/ui/manager::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/manager@file:../../../code/ui/manager#../../../code/ui/manager::hash=257346&locator=portable-stories-nextjs%40workspace%3A." - checksum: 10/cdfcb34cdfaa7b7fbd388c54f2ecc85e0b4276ba1d915cc4b36dfcdd9ab8c5391815ae502089aa77e5dad8e51a064f86771969f20e9d10b5b14973d8e4e80a8b + resolution: "@storybook/manager@file:../../../code/ui/manager#../../../code/ui/manager::hash=645d43&locator=portable-stories-nextjs%40workspace%3A." + checksum: 10/9708627cc2f3a886c53dfec9402088f6b18b40ba8f472289d08c6b25c0e2e1e71871d6a79f19e57586751b287b55506c72372d1a0fab2efa89847719bf7c50f7 languageName: node linkType: hard "@storybook/nextjs@file:../../../code/frameworks/nextjs::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/nextjs@file:../../../code/frameworks/nextjs#../../../code/frameworks/nextjs::hash=a5b14e&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/nextjs@file:../../../code/frameworks/nextjs#../../../code/frameworks/nextjs::hash=e17c4a&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@babel/core": "npm:^7.23.2" "@babel/plugin-syntax-bigint": "npm:^7.8.3" @@ -3042,20 +3040,20 @@ __metadata: optional: true webpack: optional: true - checksum: 10/86d287d5088a26adabce7b6ca5e56eebedf44df95bd07b1085253e095bea2d1d54898eed384ff7ca75866b00ffa36dd0a0c8f252edc1b4feb48725b6ca2ca851 + checksum: 10/c683698db1894bd29caa5bedf5f9bef0378e5e9e391b8d986144ecc95a625bc22574fab9e60d56703975a69c558baa1d6a652eabdf5760aafb1a8f23d97798d9 languageName: node linkType: hard "@storybook/node-logger@file:../../../code/lib/node-logger::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/node-logger@file:../../../code/lib/node-logger#../../../code/lib/node-logger::hash=0d5379&locator=portable-stories-nextjs%40workspace%3A." - checksum: 10/ba3b49b55a325ec5d885898e5cd61370c19ad27a54315025c315bb08b6a09a64cfd3097748225be1f4b07aad42245a239ac9ba6e957c854ebb48718a43e5c215 + resolution: "@storybook/node-logger@file:../../../code/lib/node-logger#../../../code/lib/node-logger::hash=76992b&locator=portable-stories-nextjs%40workspace%3A." + checksum: 10/39a64d0cfc1ab16e4e808edc63fb9b5b76c038acb864b00d756260f9b5cf66116a758f6969dcc06daab8e69a8965fceef11c1d3cab8b524de1021b97dfd5b0e4 languageName: node linkType: hard "@storybook/preset-react-webpack@file:../../../code/presets/react-webpack::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/preset-react-webpack@file:../../../code/presets/react-webpack#../../../code/presets/react-webpack::hash=3c5b01&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/preset-react-webpack@file:../../../code/presets/react-webpack#../../../code/presets/react-webpack::hash=f3317c&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-webpack": "workspace:*" "@storybook/docs-tools": "workspace:*" @@ -3078,13 +3076,13 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 10/3baffd6ce4e642f852c370ccd4ae8098a5e730f4493ce43c8414f0b44e59c8bc8a99d9975cf5149b655f1808e54d274754044f45983b9f1be7c9a28f00931ac2 + checksum: 10/ee2981fac009bed8163403a304fc34ea8e6f307bd11c26dc6b9e1682e5116facfef0a1e6c59dafe179977b1f5e366912db7e6cac7530cd7074a7c2dd071bd91e languageName: node linkType: hard "@storybook/preview-api@file:../../../code/lib/preview-api::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/preview-api@file:../../../code/lib/preview-api#../../../code/lib/preview-api::hash=2e825a&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/preview-api@file:../../../code/lib/preview-api#../../../code/lib/preview-api::hash=8ed046&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" @@ -3100,14 +3098,14 @@ __metadata: tiny-invariant: "npm:^1.3.1" ts-dedent: "npm:^2.0.0" util-deprecate: "npm:^1.0.2" - checksum: 10/8cb6df33b082d43c40daa182241aef50e583fc3c45d954730df0fbf305645926b2904b5177661a7a6294969014bda8c647f24960afd6114333e7c4bb00caa869 + checksum: 10/d5a6dc59d0cf9660869c7059567ffe09e1d590835aa781a5a94fc109ae67ae961f82db05a5e983b209e76a595ef3b9669f25897a174701fbcd2846a321ddd8e6 languageName: node linkType: hard "@storybook/preview@file:../../../code/lib/preview::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/preview@file:../../../code/lib/preview#../../../code/lib/preview::hash=dccd68&locator=portable-stories-nextjs%40workspace%3A." - checksum: 10/834521c05fe7496e5d411dd9dc8cd3d2e3902bd101fcfe9e1caa2bace894fb6698d035fd190072a3cf2e294c86324315f30732c16bc30f75a1307feab53c16d1 + resolution: "@storybook/preview@file:../../../code/lib/preview#../../../code/lib/preview::hash=364559&locator=portable-stories-nextjs%40workspace%3A." + checksum: 10/cda37fa779743c888a72cc6329ce2d2d7d0171ae2c45d5854c90cf49a834c53e8334d36d95c255254440f4e6304251789f600c64a8f7925df1dc52e76aa18277 languageName: node linkType: hard @@ -3131,17 +3129,17 @@ __metadata: "@storybook/react-dom-shim@file:../../../code/lib/react-dom-shim::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/react-dom-shim@file:../../../code/lib/react-dom-shim#../../../code/lib/react-dom-shim::hash=062b74&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/react-dom-shim@file:../../../code/lib/react-dom-shim#../../../code/lib/react-dom-shim::hash=4a12a1&locator=portable-stories-nextjs%40workspace%3A." peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: 10/ba63271a1f2d663cd53354798c490d306787b8033586a1062175b89fe4409759cbc959aa34dad12ff8f9bf2e9c141a391784eda81f23cbc9d13495128c9e1611 + checksum: 10/1328cd24014a00ea7b07c2359c0d6af7fd7973a8635e1e42ff8f462524ad0961fccfc3200f25f86e1fdd75d151f2f50038db70e88c5fb4c9ff7a93cfa387d4dd languageName: node linkType: hard "@storybook/react@file:../../../code/renderers/react::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/react@file:../../../code/renderers/react#../../../code/renderers/react::hash=f60a6b&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/react@file:../../../code/renderers/react#../../../code/renderers/react::hash=e02d2f&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" "@storybook/docs-tools": "workspace:*" @@ -3171,18 +3169,18 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 10/aa5c6739bfda7f26dcf2155cc61cc02c7387046fd3f1ef0029fa851b56024e5c81e69ef11c7a3f167bf66715161586abc2e29bbcdd5e3ea4ff9f0a34bbdac095 + checksum: 10/bc3d21e78b36c3fa4133532858d0b32f1686a8227096c1079c4575cc29461e32ebeb742b74671c0c43523b738ec8186a1368036d3e9406f6e4cf561a67fc2b79 languageName: node linkType: hard "@storybook/router@file:../../../code/lib/router::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/router@file:../../../code/lib/router#../../../code/lib/router::hash=f3d914&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/router@file:../../../code/lib/router#../../../code/lib/router::hash=2f121e&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" memoizerific: "npm:^1.11.3" qs: "npm:^6.10.0" - checksum: 10/ae4218eb5cb26c1fd31b334a5431a228a4fd6f30bff1e4feb68c188317ceece7b91510c0c98c4a2d4fe419baebb2da21ea03d65dfe5123257befdb8ad9e0770c + checksum: 10/8fcccb54ade96e59e716e74c9985633d6ff4a9e025f80e83cb1c8c61443910cb3205d2b2753f7a455544b8d39be832c456db4ecff2e58753b0fd45a0f828b6b6 languageName: node linkType: hard @@ -3204,7 +3202,7 @@ __metadata: "@storybook/test@file:../../../code/lib/test::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/test@file:../../../code/lib/test#../../../code/lib/test::hash=cd3c93&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/test@file:../../../code/lib/test#../../../code/lib/test::hash=4192cc&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" @@ -3217,13 +3215,13 @@ __metadata: "@vitest/spy": "npm:^1.3.1" chai: "npm:^4.4.1" util: "npm:^0.12.4" - checksum: 10/783d04972494921194bbf60ba366dd62c81340257671acdb2693156dc64c709c64a51efc5fcf528c5a43d11167b2193d4582d24e5012e86407b64fbeda4c1c66 + checksum: 10/ae7add4394f4c590aaac487da53f0e335051560ecd18f0e831f6e62ffb15aad2299060f58e6149bf3637dd8ed48217e7ae3bd54b58a5ea35ab8fea3982aabbc2 languageName: node linkType: hard "@storybook/theming@file:../../../code/lib/theming::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/theming@file:../../../code/lib/theming#../../../code/lib/theming::hash=9cc340&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/theming@file:../../../code/lib/theming#../../../code/lib/theming::hash=f968b9&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@emotion/use-insertion-effect-with-fallbacks": "npm:^1.0.1" "@storybook/client-logger": "workspace:*" @@ -3237,18 +3235,18 @@ __metadata: optional: true react-dom: optional: true - checksum: 10/e64850170fec111310877caa5a994ad53c9e072f324d0871d98e34f7d30688dadd7b24914441b3c50f3e9dc3f80909c60fa292e61f7fe6b257a6e19521a6c8e1 + checksum: 10/e603c954ca9f8a99cb82deac40c66f1fd71d170900f6c8a4e0f3157921b6b1da6c0d644519960312eefa1def67a99c50a4e4cd6c6e92fd121d99a9fcb822f6b9 languageName: node linkType: hard "@storybook/types@file:../../../code/lib/types::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/types@file:../../../code/lib/types#../../../code/lib/types::hash=0524c9&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/types@file:../../../code/lib/types#../../../code/lib/types::hash=c292b3&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@types/express": "npm:^4.7.0" file-system-cache: "npm:2.3.0" - checksum: 10/b2835c9386c22e535e62263fe03ead9c43a1c9762b6524ed8a9b1954887e8853311d580caa7711d57a1eecc9ce30cd7cfd9d814a45723e8434397b7adced1871 + checksum: 10/66db65b0e5185de6e9df7fb239b4a45beaf5e42d1f558ae465346b850f8626909aa7d415b49ed0ba0b837219ded47021c42bffff83f13eba29867ee8eafe7b0c languageName: node linkType: hard From 3d23b0cf6b16f7c54e83a4a3e496f3b7973dca8e Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 10 Apr 2024 14:59:24 +0200 Subject: [PATCH 086/380] iteration on actually being able to add args --- .../src/utils/save-from-controls/astify.ts | 38 +++++++++++ .../save-from-controls/save-from-controls.ts | 3 +- .../update-args-in-csf-file.test.ts | 27 ++++++-- .../update-args-in-csf-file.ts | 66 +++++++++++++------ 4 files changed, 109 insertions(+), 25 deletions(-) create mode 100644 code/lib/core-server/src/utils/save-from-controls/astify.ts diff --git a/code/lib/core-server/src/utils/save-from-controls/astify.ts b/code/lib/core-server/src/utils/save-from-controls/astify.ts new file mode 100644 index 000000000000..95378a732421 --- /dev/null +++ b/code/lib/core-server/src/utils/save-from-controls/astify.ts @@ -0,0 +1,38 @@ +import * as t from '@babel/types'; +import * as babylon from '@babel/parser'; +import traverse from '@babel/traverse'; + +export function astify(literal: T) { + if (literal === null) { + return t.nullLiteral(); + } + switch (typeof literal) { + case 'function': + const ast = babylon.parse(literal.toString(), { + allowReturnOutsideFunction: true, + allowSuperOutsideMethod: true, + }); + return traverse.removeProperties(ast); + case 'number': + return t.numericLiteral(literal); + case 'string': + return t.stringLiteral(literal); + case 'boolean': + return t.booleanLiteral(literal); + case 'undefined': + return t.unaryExpression('void', t.numericLiteral(0), true); + default: + if (Array.isArray(literal)) { + return t.arrayExpression(literal.map(astify)); + } + return t.objectExpression( + Object.keys(literal) + .filter((k) => { + return typeof literal[k] !== 'undefined'; + }) + .map((k) => { + return t.objectProperty(t.stringLiteral(k), astify(literal[k])); + }) + ); + } +} diff --git a/code/lib/core-server/src/utils/save-from-controls/save-from-controls.ts b/code/lib/core-server/src/utils/save-from-controls/save-from-controls.ts index 18ff90195e7b..7ac906c16fdb 100644 --- a/code/lib/core-server/src/utils/save-from-controls/save-from-controls.ts +++ b/code/lib/core-server/src/utils/save-from-controls/save-from-controls.ts @@ -5,6 +5,7 @@ import { SAVE_STORY_REQUEST, SAVE_STORY_RESULT } from '@storybook/core-events'; import type { OptionsWithRequiredCache } from '../whats-new'; import { readCsf, writeCsf } from '@storybook/csf-tools'; import { join } from 'path'; +import { updateArgsInCsfFile } from './update-args-in-csf-file'; // import { sendTelemetryError } from '../withTelemetry'; interface RequestSaveStoryPayload { @@ -50,7 +51,7 @@ export function initializeSaveFromControls( } // modify the AST node with the new args - console.log({ node }); + updateArgsInCsfFile(node, data.args); // save the file await writeCsf(csf, location); diff --git a/code/lib/core-server/src/utils/save-from-controls/update-args-in-csf-file.test.ts b/code/lib/core-server/src/utils/save-from-controls/update-args-in-csf-file.test.ts index f638a368a48c..c44e4d15fe7a 100644 --- a/code/lib/core-server/src/utils/save-from-controls/update-args-in-csf-file.test.ts +++ b/code/lib/core-server/src/utils/save-from-controls/update-args-in-csf-file.test.ts @@ -1,14 +1,33 @@ +/* eslint-disable no-underscore-dangle */ import { describe, test, expect } from 'vitest'; -import { readCsf, babelPrint } from '@storybook/csf-tools'; +import { readCsf, printCsf } from '@storybook/csf-tools'; +import { join } from 'path'; +import { getProjectRoot } from '@storybook/core-common'; + +import { updateArgsInCsfFile } from './update-args-in-csf-file'; import { readFile } from 'fs/promises'; +const makeTitle = (userTitle: string) => userTitle; + +const FILES = { + tab: join(getProjectRoot(), 'code/ui/components/src/components/tabs/tabs.stories.tsx'), +}; + +// console.log(FILES); + describe('success', () => { test('should return success', async () => { - const before = await readFile('path/to/file', 'utf-8'); - const CSF = await readCsf('path/to/file', { makeTitle: (userTitle: string) => userTitle }); + const before = await readFile(FILES.tab, 'utf-8'); + const CSF = await readCsf(FILES.tab, { makeTitle }); const parsed = CSF.parse(); + const names = Object.keys(parsed._stories); + const nodes = names.map((name) => CSF.getStoryExport(name)); + + updateArgsInCsfFile(nodes[0], { active: true, selected: 'test1' }); + + const after = printCsf(parsed); - // parsed._stories + expect(after.code).not.toBe(before); }); }); diff --git a/code/lib/core-server/src/utils/save-from-controls/update-args-in-csf-file.ts b/code/lib/core-server/src/utils/save-from-controls/update-args-in-csf-file.ts index 947e70d2a02a..b4e3f3bb1c67 100644 --- a/code/lib/core-server/src/utils/save-from-controls/update-args-in-csf-file.ts +++ b/code/lib/core-server/src/utils/save-from-controls/update-args-in-csf-file.ts @@ -1,32 +1,58 @@ -import type * as t from '@babel/types'; +import * as t from '@babel/types'; import * as traverse from '@babel/traverse'; +import { astify } from './astify'; + +export const updateArgsInCsfFile = async (node: t.Node, input: Record) => { + let found = false; + const args = Object.fromEntries( + Object.entries(input).map(([k, v]) => { + return [k, astify(v)]; + }) + ); -export const updateArgsInCsfFile = async (node: t.Node, args: Record) => { traverse.default(node, { ObjectExpression(path) { + if (found) { + return; + } + + found = true; const properties = path.get('properties'); - properties.forEach((property) => { + const argsProperty = properties.find((property) => { if (property.isObjectProperty()) { const key = property.get('key'); - if (key.isIdentifier() && key.node.name === 'args') { - const value = property.get('value'); - if (value.isObjectExpression()) { - args = { - ...args, - ...value.node.properties.reduce((acc, prop) => { - if (prop.type === 'ObjectProperty') { - const k = prop.key; - if (k.type === 'Identifier') { - acc[k.name] = prop.value; - } - } - return acc; - }, {}), - }; - } - } + return key.isIdentifier() && key.node.name === 'args'; } + return false; }); + + if (argsProperty) { + const v = argsProperty.get('value'); + if (t.isObjectExpression(v)) { + argsProperty.replaceWith( + t.objectProperty( + t.identifier('args'), + t.objectExpression( + Object.entries(args).map(([key, value]) => + t.objectProperty(t.identifier(key), value) + ) + ) + ) + ); + } + } else { + path.pushContainer( + 'properties', + t.objectProperty( + t.identifier('args'), + t.objectExpression( + Object.entries(args).map(([key, value]) => t.objectProperty(t.identifier(key), value)) + ) + ) + ); + } }, + + noScope: true, }); }; From 5cee5e7c63dab36df28188f44342e36032ace8cc Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 10 Apr 2024 15:12:29 +0200 Subject: [PATCH 087/380] Apply requested changes --- code/addons/controls/package.json | 2 +- .../create-new-story-channel.ts | 24 +++--------- .../src/utils/get-new-story-file.test.ts | 20 +++++----- .../src/utils/get-new-story-file.ts | 37 ++++++++++--------- .../lib/core-server/src/utils/get-story-id.ts | 16 ++++---- .../new-story-templates/javascript.test.ts | 24 ++++++------ .../utils/new-story-templates/javascript.ts | 24 ++++++------ .../new-story-templates/typescript.test.ts | 20 +++++----- .../utils/new-story-templates/typescript.ts | 24 ++++++------ code/lib/core-server/src/utils/posix.test.ts | 9 +++++ code/lib/core-server/src/utils/posix.ts | 7 ++++ code/yarn.lock | 2 +- 12 files changed, 110 insertions(+), 99 deletions(-) create mode 100644 code/lib/core-server/src/utils/posix.test.ts create mode 100644 code/lib/core-server/src/utils/posix.ts diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json index c0e43b6e5001..d13ea6560843 100644 --- a/code/addons/controls/package.json +++ b/code/addons/controls/package.json @@ -53,7 +53,6 @@ "dependencies": { "@storybook/blocks": "workspace:*", "lodash": "^4.17.21", - "slash": "^5.0.0", "ts-dedent": "^2.0.0" }, "devDependencies": { @@ -62,6 +61,7 @@ "@storybook/core-common": "workspace:*", "@storybook/manager-api": "workspace:*", "@storybook/node-logger": "workspace:*", + "@storybook/preview-api": "workspace:*", "@storybook/theming": "workspace:*", "@storybook/types": "workspace:*", "react": "^18.2.0", diff --git a/code/lib/core-server/src/server-channel/create-new-story-channel.ts b/code/lib/core-server/src/server-channel/create-new-story-channel.ts index 5a6cc70648e5..7546c5910a70 100644 --- a/code/lib/core-server/src/server-channel/create-new-story-channel.ts +++ b/code/lib/core-server/src/server-channel/create-new-story-channel.ts @@ -1,19 +1,12 @@ import type { Options } from '@storybook/types'; import type { Channel } from '@storybook/channels'; import { CREATE_NEW_STORYFILE, CREATE_NEW_STORYFILE_RESULT } from '@storybook/core-events'; -import dedent from 'ts-dedent'; -import fs from 'fs/promises'; +import fs from 'node:fs/promises'; +import type { NewStoryData } from '../utils/get-new-story-file'; import { getNewStoryFile } from '../utils/get-new-story-file'; import { getStoryId } from '../utils/get-story-id'; -interface Data { - // The filepath of the component for which the Story should be generated for (relative to the project root) - filepath: string; - // The name of the exported component - componentExportName: string; - // is default export - default: boolean; -} +interface CreateNewStoryPayload extends NewStoryData {} interface Result { success: true | false; @@ -27,16 +20,14 @@ export function initCreateNewStoryChannel(channel: Channel, options: Options) { /** * Listens for events to create a new storyfile */ - channel.on(CREATE_NEW_STORYFILE, async (data: Data) => { + channel.on(CREATE_NEW_STORYFILE, async (data: CreateNewStoryPayload) => { try { const { storyFilePath, exportedStoryName, storyFileContent } = await getNewStoryFile( data, options ); - await fs.writeFile(storyFilePath, storyFileContent, { - encoding: 'utf-8', - }); + await fs.writeFile(storyFilePath, storyFileContent, 'utf-8'); const storyId = await getStoryId({ storyFilePath, exportedStoryName }, options); @@ -51,10 +42,7 @@ export function initCreateNewStoryChannel(channel: Channel, options: Options) { channel.emit(CREATE_NEW_STORYFILE_RESULT, { success: false, result: null, - error: dedent` - An error occurred while creating a new story: - ${e?.message} - `, + error: `An error occurred while creating a new story:\n${e?.message}`, } satisfies Result); } }); diff --git a/code/lib/core-server/src/utils/get-new-story-file.test.ts b/code/lib/core-server/src/utils/get-new-story-file.test.ts index 9886cd56bc35..750ea322b264 100644 --- a/code/lib/core-server/src/utils/get-new-story-file.test.ts +++ b/code/lib/core-server/src/utils/get-new-story-file.test.ts @@ -14,9 +14,9 @@ describe('get-new-story-file', () => { it('should create a new story file (TypeScript)', async () => { const { exportedStoryName, storyFileContent, storyFilePath } = await getNewStoryFile( { - filepath: 'src/components/Page.tsx', + componentFilePath: 'src/components/Page.tsx', componentExportName: 'Page', - default: false, + componentIsDefaultExport: false, }, { presets: { @@ -36,14 +36,14 @@ describe('get-new-story-file', () => { import { Page } from './Page'; const meta = { - component: Page - } satisfies Meta + component: Page, + } satisfies Meta; export default meta; type Story = StoryObj; - export const Default: Story = {}" + export const Default: Story = {};" `); expect(storyFilePath).toBe(path.join(__dirname, 'src', 'components', 'Page.stories.tsx')); }); @@ -51,9 +51,9 @@ describe('get-new-story-file', () => { it('should create a new story file (JavaScript)', async () => { const { exportedStoryName, storyFileContent, storyFilePath } = await getNewStoryFile( { - filepath: 'src/components/Page.jsx', + componentFilePath: 'src/components/Page.jsx', componentExportName: 'Page', - default: true, + componentIsDefaultExport: true, }, { presets: { @@ -71,12 +71,12 @@ describe('get-new-story-file', () => { "import Component from './Page'; const meta = { - component: Component - } + component: Component, + }; export default meta; - export const Default = {}" + export const Default = {};" `); expect(storyFilePath).toBe(path.join(__dirname, 'src', 'components', 'Page.stories.jsx')); }); diff --git a/code/lib/core-server/src/utils/get-new-story-file.ts b/code/lib/core-server/src/utils/get-new-story-file.ts index 0c561a01e1d9..fc302f13e8d1 100644 --- a/code/lib/core-server/src/utils/get-new-story-file.ts +++ b/code/lib/core-server/src/utils/get-new-story-file.ts @@ -5,25 +5,28 @@ import fs from 'fs'; import { getTypeScriptTemplateForNewStoryFile } from './new-story-templates/typescript'; import { getJavaScriptTemplateForNewStoryFile } from './new-story-templates/javascript'; -interface Data { - filepath: string; +export interface NewStoryData { + // The filepath of the component for which the Story should be generated for (relative to the project root) + componentFilePath: string; + // The name of the exported component componentExportName: string; - default: boolean; + // is default export + componentIsDefaultExport: boolean; } export async function getNewStoryFile( - { filepath, componentExportName, default: isDefault }: Data, + { componentFilePath, componentExportName, componentIsDefaultExport }: NewStoryData, options: Options ) { - const isTypescript = /\.(ts|tsx|mts|cts)$/.test(filepath); + const isTypescript = /\.(ts|tsx|mts|cts)$/.test(componentFilePath); const cwd = getProjectRoot(); - const frameworkPackage = await getFrameworkName(options); + const frameworkPackageName = await getFrameworkName(options); - const basename = path.basename(filepath); - const extension = path.extname(filepath); + const basename = path.basename(componentFilePath); + const extension = path.extname(componentFilePath); const basenameWithoutExtension = basename.replace(extension, ''); - const dirname = path.dirname(filepath); + const dirname = path.dirname(componentFilePath); const storyFileExtension = isTypescript ? 'tsx' : 'jsx'; const storyFileName = `${basenameWithoutExtension}.stories.${storyFileExtension}`; @@ -33,20 +36,20 @@ export async function getNewStoryFile( const storyFileContent = isTypescript ? getTypeScriptTemplateForNewStoryFile({ - basename: basenameWithoutExtension, - componentExportName: componentExportName, - default: isDefault, - frameworkPackageName: frameworkPackage, + basenameWithoutExtension, + componentExportName, + componentIsDefaultExport, + frameworkPackageName, exportedStoryName, }) : getJavaScriptTemplateForNewStoryFile({ - basename: basenameWithoutExtension, - componentExportName: componentExportName, - default: isDefault, + basenameWithoutExtension, + componentExportName, + componentIsDefaultExport, exportedStoryName, }); - const doesStoryFileExist = fs.existsSync(path.join(cwd, filepath)); + const doesStoryFileExist = fs.existsSync(path.join(cwd, componentFilePath)); const storyFilePath = doesStoryFileExist ? path.join(cwd, dirname, alternativeStoryFileName) diff --git a/code/lib/core-server/src/utils/get-story-id.ts b/code/lib/core-server/src/utils/get-story-id.ts index 299a9eadaaf5..acfbce990853 100644 --- a/code/lib/core-server/src/utils/get-story-id.ts +++ b/code/lib/core-server/src/utils/get-story-id.ts @@ -3,15 +3,15 @@ import dedent from 'ts-dedent'; import { normalizeStories, normalizeStoryPath } from '@storybook/core-common'; import path from 'path'; import { storyNameFromExport, toId } from '@storybook/csf'; -import slash from 'slash'; import { userOrAutoTitleFromSpecifier } from '@storybook/preview-api'; +import { posix } from './posix'; -interface Data { +interface StoryIdData { storyFilePath: string; exportedStoryName: string; } -export async function getStoryId(data: Data, options: Options) { +export async function getStoryId(data: StoryIdData, options: Options) { const stories = await options.presets.apply('stories', [], options); const workingDir = process.cwd(); @@ -22,7 +22,7 @@ export async function getStoryId(data: Data, options: Options) { }); const relativePath = path.relative(workingDir, data.storyFilePath); - const importPath = slash(normalizeStoryPath(relativePath)); + const importPath = posix(normalizeStoryPath(relativePath)); const autoTitle = normalizedStories .map((normalizeStory) => userOrAutoTitleFromSpecifier(importPath, normalizeStory)) @@ -31,10 +31,10 @@ export async function getStoryId(data: Data, options: Options) { if (autoTitle === undefined) { // eslint-disable-next-line local-rules/no-uncategorized-errors throw new Error(dedent` - The generation of your new Story file was successful! But it seems that we are unable to index it. - Please make sure that the new Story file is matched by the 'stories' glob pattern in your Storybook configuration. - The location of the new Story file is: ${relativePath} - `); + The generation of your new Story file was successful but it seems that we are unable to index it. + Please make sure that the new Story file is matched by the 'stories' glob pattern in your Storybook configuration. + The location of the new Story file is: ${relativePath} + `); } const storyName = storyNameFromExport(data.exportedStoryName); diff --git a/code/lib/core-server/src/utils/new-story-templates/javascript.test.ts b/code/lib/core-server/src/utils/new-story-templates/javascript.test.ts index efebd20773b2..2d6dc4d3f0ea 100644 --- a/code/lib/core-server/src/utils/new-story-templates/javascript.test.ts +++ b/code/lib/core-server/src/utils/new-story-templates/javascript.test.ts @@ -4,9 +4,9 @@ import { getJavaScriptTemplateForNewStoryFile } from './javascript'; describe('javascript', () => { it('should return a TypeScript template with a default import', () => { const result = getJavaScriptTemplateForNewStoryFile({ - basename: 'foo', + basenameWithoutExtension: 'foo', componentExportName: 'default', - default: true, + componentIsDefaultExport: true, exportedStoryName: 'Default', }); @@ -14,20 +14,20 @@ describe('javascript', () => { "import Component from './foo'; const meta = { - component: Component - } - + component: Component, + }; + export default meta; - - export const Default = {}" + + export const Default = {};" `); }); it('should return a TypeScript template with a named import', () => { const result = getJavaScriptTemplateForNewStoryFile({ - basename: 'foo', + basenameWithoutExtension: 'foo', componentExportName: 'Example', - default: false, + componentIsDefaultExport: false, exportedStoryName: 'Default', }); @@ -35,12 +35,12 @@ describe('javascript', () => { "import { Example } from './foo'; const meta = { - component: Example - } + component: Example, + }; export default meta; - export const Default = {}" + export const Default = {};" `); }); }); diff --git a/code/lib/core-server/src/utils/new-story-templates/javascript.ts b/code/lib/core-server/src/utils/new-story-templates/javascript.ts index 165ea18506ff..5563f9faa1b8 100644 --- a/code/lib/core-server/src/utils/new-story-templates/javascript.ts +++ b/code/lib/core-server/src/utils/new-story-templates/javascript.ts @@ -1,27 +1,29 @@ import dedent from 'ts-dedent'; -export function getJavaScriptTemplateForNewStoryFile(data: { +interface JavaScriptTemplateData { /** The components file name without the extension */ - basename: string; + basenameWithoutExtension: string; componentExportName: string; - default: boolean; + componentIsDefaultExport: boolean; /** The exported name of the default story */ exportedStoryName: string; -}) { - const importName = data.default ? 'Component' : data.componentExportName; - const importStatement = data.default - ? `import ${importName} from './${data.basename}';` - : `import { ${importName} } from './${data.basename}';`; +} + +export function getJavaScriptTemplateForNewStoryFile(data: JavaScriptTemplateData) { + const importName = data.componentIsDefaultExport ? 'Component' : data.componentExportName; + const importStatement = data.componentIsDefaultExport + ? `import ${importName} from './${data.basenameWithoutExtension}';` + : `import { ${importName} } from './${data.basenameWithoutExtension}';`; return dedent` ${importStatement} const meta = { - component: ${importName} - } + component: ${importName}, + }; export default meta; - export const ${data.exportedStoryName} = {} + export const ${data.exportedStoryName} = {}; `; } diff --git a/code/lib/core-server/src/utils/new-story-templates/typescript.test.ts b/code/lib/core-server/src/utils/new-story-templates/typescript.test.ts index 58535aaea2c7..05cd39cca9f8 100644 --- a/code/lib/core-server/src/utils/new-story-templates/typescript.test.ts +++ b/code/lib/core-server/src/utils/new-story-templates/typescript.test.ts @@ -4,9 +4,9 @@ import { getTypeScriptTemplateForNewStoryFile } from './typescript'; describe('typescript', () => { it('should return a TypeScript template with a default import', () => { const result = getTypeScriptTemplateForNewStoryFile({ - basename: 'foo', + basenameWithoutExtension: 'foo', componentExportName: 'default', - default: true, + componentIsDefaultExport: true, frameworkPackageName: '@storybook/nextjs', exportedStoryName: 'Default', }); @@ -17,22 +17,22 @@ describe('typescript', () => { import Component from './foo'; const meta = { - component: Component - } satisfies Meta + component: Component, + } satisfies Meta; export default meta; type Story = StoryObj; - export const Default: Story = {}" + export const Default: Story = {};" `); }); it('should return a TypeScript template with a named import', () => { const result = getTypeScriptTemplateForNewStoryFile({ - basename: 'foo', + basenameWithoutExtension: 'foo', componentExportName: 'Example', - default: false, + componentIsDefaultExport: false, frameworkPackageName: '@storybook/nextjs', exportedStoryName: 'Default', }); @@ -43,14 +43,14 @@ describe('typescript', () => { import { Example } from './foo'; const meta = { - component: Example - } satisfies Meta + component: Example, + } satisfies Meta; export default meta; type Story = StoryObj; - export const Default: Story = {}" + export const Default: Story = {};" `); }); }); diff --git a/code/lib/core-server/src/utils/new-story-templates/typescript.ts b/code/lib/core-server/src/utils/new-story-templates/typescript.ts index 7be9b29880ba..38e9ffbe6e4f 100644 --- a/code/lib/core-server/src/utils/new-story-templates/typescript.ts +++ b/code/lib/core-server/src/utils/new-story-templates/typescript.ts @@ -1,19 +1,21 @@ import dedent from 'ts-dedent'; -export function getTypeScriptTemplateForNewStoryFile(data: { +interface TypeScriptTemplateData { /** The components file name without the extension */ - basename: string; + basenameWithoutExtension: string; componentExportName: string; - default: boolean; + componentIsDefaultExport: boolean; /** The framework package name, e.g. @storybook/nextjs */ frameworkPackageName: string; /** The exported name of the default story */ exportedStoryName: string; -}) { - const importName = data.default ? 'Component' : data.componentExportName; - const importStatement = data.default - ? `import ${importName} from './${data.basename}'` - : `import { ${importName} } from './${data.basename}'`; +} + +export function getTypeScriptTemplateForNewStoryFile(data: TypeScriptTemplateData) { + const importName = data.componentIsDefaultExport ? 'Component' : data.componentExportName; + const importStatement = data.componentIsDefaultExport + ? `import ${importName} from './${data.basenameWithoutExtension}'` + : `import { ${importName} } from './${data.basenameWithoutExtension}'`; return dedent` import type { Meta, StoryObj } from '${data.frameworkPackageName}'; @@ -21,13 +23,13 @@ export function getTypeScriptTemplateForNewStoryFile(data: { ${importStatement}; const meta = { - component: ${importName} - } satisfies Meta + component: ${importName}, + } satisfies Meta; export default meta; type Story = StoryObj; - export const ${data.exportedStoryName}: Story = {} + export const ${data.exportedStoryName}: Story = {}; `; } diff --git a/code/lib/core-server/src/utils/posix.test.ts b/code/lib/core-server/src/utils/posix.test.ts new file mode 100644 index 000000000000..23c8d2ca3bec --- /dev/null +++ b/code/lib/core-server/src/utils/posix.test.ts @@ -0,0 +1,9 @@ +import { describe, expect, it } from 'vitest'; +import { posix } from './posix'; + +describe('posix', () => { + it('should replace backslashes with forward slashes', () => { + expect(posix('src\\components\\Page.tsx', '\\')).toBe('src/components/Page.tsx'); + expect(posix('src\\\\components\\\\Page.tsx', '\\\\')).toBe('src/components/Page.tsx'); + }); +}); diff --git a/code/lib/core-server/src/utils/posix.ts b/code/lib/core-server/src/utils/posix.ts new file mode 100644 index 000000000000..d9b8224cdde5 --- /dev/null +++ b/code/lib/core-server/src/utils/posix.ts @@ -0,0 +1,7 @@ +import path from 'node:path'; + +/** + * Replaces the path separator with forward slashes + */ +export const posix = (localPath: string, sep: string = path.sep) => + localPath.split(sep).filter(Boolean).join(path.posix.sep); diff --git a/code/yarn.lock b/code/yarn.lock index 56ddebe3ade7..7be8a5f1fd96 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -4793,12 +4793,12 @@ __metadata: "@storybook/core-common": "workspace:*" "@storybook/manager-api": "workspace:*" "@storybook/node-logger": "workspace:*" + "@storybook/preview-api": "workspace:*" "@storybook/theming": "workspace:*" "@storybook/types": "workspace:*" lodash: "npm:^4.17.21" react: "npm:^18.2.0" react-dom: "npm:^18.2.0" - slash: "npm:^5.0.0" ts-dedent: "npm:^2.0.0" languageName: unknown linkType: soft From 674a336295634837a5cb21e708694b344ad958ec Mon Sep 17 00:00:00 2001 From: Reuben Ellis Date: Wed, 10 Apr 2024 07:34:58 -0600 Subject: [PATCH 088/380] Update import statement --- code/lib/docs-tools/src/argTypes/convert/flow/convert.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/lib/docs-tools/src/argTypes/convert/flow/convert.ts b/code/lib/docs-tools/src/argTypes/convert/flow/convert.ts index 0758bc8251a4..de3966467646 100644 --- a/code/lib/docs-tools/src/argTypes/convert/flow/convert.ts +++ b/code/lib/docs-tools/src/argTypes/convert/flow/convert.ts @@ -1,4 +1,4 @@ -import { UnknownFlowArgTypesError } from '@storybook/core-events/server-errors'; +import { UnknownArgTypesError } from '@storybook/core-events/server-errors'; import type { SBType } from '@storybook/types'; import type { FlowType, FlowSigType, FlowLiteralType } from './types'; @@ -19,7 +19,7 @@ const convertSig = (type: FlowSigType) => { value: values, }; default: - throw new UnknownFlowArgTypesError({ type: type }); + throw new UnknownArgTypesError({ type: type }); } }; From b468667360a4a77697e270fc1eefa3d894051bbc Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Wed, 10 Apr 2024 16:03:45 +0200 Subject: [PATCH 089/380] Refactor cookies/headers a bit --- code/frameworks/nextjs/src/headers/cookies.ts | 30 ++--- code/frameworks/nextjs/src/headers/headers.ts | 31 ++--- code/frameworks/nextjs/src/preview.tsx | 5 - .../nextjs/yarn.lock | 126 +++++++++--------- 4 files changed, 90 insertions(+), 102 deletions(-) diff --git a/code/frameworks/nextjs/src/headers/cookies.ts b/code/frameworks/nextjs/src/headers/cookies.ts index 6466ad439c55..75022baaea26 100644 --- a/code/frameworks/nextjs/src/headers/cookies.ts +++ b/code/frameworks/nextjs/src/headers/cookies.ts @@ -20,7 +20,7 @@ const stringifyCookies = (map: Map) => { }; // Mostly copied from https://github.com/vercel/edge-runtime/blob/c25e2ded39104e2a3be82efc08baf8dc8fb436b3/packages/cookies/src/request-cookies.ts#L7 -class CookieStore implements RequestCookies { +class RequestCookiesMock implements RequestCookies { /** @internal */ private readonly _headers: HeadersStore; @@ -41,15 +41,6 @@ class CookieStore implements RequestCookies { return this._parsed[Symbol.iterator](); } - /** Used to restore the mocks. Called internally by @storybook/nextjs - * to ensure that the mocks are restored between stories. - * @internal - * */ - mockRestore = () => { - this.clear(); - this._headers.mockRestore(); - }; - get size(): number { return this._parsed.size; } @@ -122,11 +113,20 @@ class CookieStore implements RequestCookies { } } -let cookieStore: CookieStore; +let requestCookiesMock: RequestCookiesMock; -export const cookies = (): CookieStore => { - if (!cookieStore) { - cookieStore = new CookieStore(headers()); +export const cookies = fn(() => { + if (!requestCookiesMock) { + requestCookiesMock = new RequestCookiesMock(headers()); } - return cookieStore; + return requestCookiesMock; +}); + +const originalRestore = cookies.mockRestore.bind(null); + +// will be called automatically by the test loader +cookies.mockRestore = () => { + originalRestore(); + headers.mockRestore(); + requestCookiesMock = new RequestCookiesMock(headers()); }; diff --git a/code/frameworks/nextjs/src/headers/headers.ts b/code/frameworks/nextjs/src/headers/headers.ts index b71bece89695..13d55b95e7d4 100644 --- a/code/frameworks/nextjs/src/headers/headers.ts +++ b/code/frameworks/nextjs/src/headers/headers.ts @@ -5,17 +5,9 @@ import type { HeadersAdapter } from 'next/dist/server/web/spec-extension/adapter // Mostly copied from https://github.com/vercel/next.js/blob/763b9a660433ec5278a10e59d7ae89d4010ba212/packages/next/src/server/web/spec-extension/adapters/headers.ts#L20 // @ts-expect-error unfortunately the headers property is private (and not protected) in HeadersAdapter // and we can't access it so we need to redefine it, but that clashes with the type, hence the ts-expect-error comment. -export class HeadersStore extends Headers implements HeadersAdapter { +export class HeadersAdapterMock extends Headers implements HeadersAdapter { private headers: IncomingHttpHeaders = {}; - /** Used to restore the mocks. Called internally by @storybook/nextjs - * to ensure that the mocks are restored between stories. - * @internal - * */ - mockRestore = () => { - this.forEach((key: string) => this.delete(key)); - }; - /** * Merges a header value into a string. This stores multiple values as an * array, so we need to merge them into a string. @@ -68,7 +60,7 @@ export class HeadersStore extends Headers implements HeadersAdapter { ).mockName('headers().forEach'); public entries = fn( - function* (this: HeadersStore): IterableIterator<[string, string]> { + function* (this: HeadersAdapterMock): IterableIterator<[string, string]> { for (const key of Object.keys(this.headers)) { const name = key.toLowerCase(); // We assert here that this is a string because we got it from the @@ -81,7 +73,7 @@ export class HeadersStore extends Headers implements HeadersAdapter { ).mockName('headers().entries'); public keys = fn( - function* (this: HeadersStore): IterableIterator { + function* (this: HeadersAdapterMock): IterableIterator { for (const key of Object.keys(this.headers)) { const name = key.toLowerCase(); yield name; @@ -90,7 +82,7 @@ export class HeadersStore extends Headers implements HeadersAdapter { ).mockName('headers().keys'); public values = fn( - function* (this: HeadersStore): IterableIterator { + function* (this: HeadersAdapterMock): IterableIterator { for (const key of Object.keys(this.headers)) { // We assert here that this is a string because we got it from the // Object.keys() call above. @@ -106,11 +98,14 @@ export class HeadersStore extends Headers implements HeadersAdapter { } } -let headerStore: HeadersStore; +let headersAdapterMock: HeadersAdapterMock; -export const headers = (): HeadersStore => { - if (!headerStore) { - headerStore = new HeadersStore(); - } - return headerStore; +export const headers = () => { + if (!headersAdapterMock) headersAdapterMock = new HeadersAdapterMock(); + return headersAdapterMock; +}; + +// This fn is called by ./cookies to restore the headers in the right order +headers.mockRestore = () => { + headersAdapterMock = new HeadersAdapterMock(); }; diff --git a/code/frameworks/nextjs/src/preview.tsx b/code/frameworks/nextjs/src/preview.tsx index 7fb164d1f0de..cb4800a20a35 100644 --- a/code/frameworks/nextjs/src/preview.tsx +++ b/code/frameworks/nextjs/src/preview.tsx @@ -28,11 +28,6 @@ export const decorators: Addon_DecoratorFunction[] = [ HeadManagerDecorator, ]; -export const loaders: Addon_LoaderFunction = async () => { - cookies().mockRestore(); - headers().mockRestore(); -}; - export const parameters = { docs: { source: { diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock b/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock index 7b54b424d5b9..ecd18b4c87b1 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock @@ -2379,7 +2379,7 @@ __metadata: "@storybook/addon-actions@file:../../../code/addons/actions::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/addon-actions@file:../../../code/addons/actions#../../../code/addons/actions::hash=99649f&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/addon-actions@file:../../../code/addons/actions#../../../code/addons/actions::hash=a58e61&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-events": "workspace:*" "@storybook/global": "npm:^5.0.0" @@ -2387,7 +2387,7 @@ __metadata: dequal: "npm:^2.0.2" polished: "npm:^4.2.2" uuid: "npm:^9.0.0" - checksum: 10/79a14c7a74591e404e5ec22c2b6c9eaa03dd48bf3316470dd2642e3c70abd7c90b168fd350e729b617967c7d759df2ef0107534d218d1138b12e737c8a3e888e + checksum: 10/448ef050488c32b161113c707a9bd3e4eb734f7a23f350d7cb05dd30927785c19b0eb1b2f01f8f5f7106e8f46dcc2cfc9496a089dee818754dc83ae5403d8ee6 languageName: node linkType: hard @@ -2403,17 +2403,13 @@ __metadata: linkType: hard "@storybook/addon-controls@file:../../../code/addons/controls::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/addon-controls@file:../../../code/addons/controls#../../../code/addons/controls::hash=358687&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/addon-controls@file:../../../code/addons/controls#../../../code/addons/controls::hash=b28ca0&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/blocks": "workspace:*" - "@storybook/core-common": "workspace:*" - cjs-module-lexer: "npm:^1.2.3" - es-module-lexer: "npm:^1.5.0" - globby: "npm:^14.0.1" lodash: "npm:^4.17.21" ts-dedent: "npm:^2.0.0" - checksum: 10/feb098e18f942562769dfdfb4afc70655f67f11e6d14acf8e3ca4cfe9a22e09e89ede9f17be6ff1c07a56bed8a6fa1961fa044137a3e7a34471345bcccd091f2 + checksum: 10/f68a13e40bda392c1abc4cee2f2294fe98f11e8b34af8213532ae14027327efbafb3c9a8d75d300a3c58fb8d036a09f349e60cd064dd8dbde504add2945bab6b languageName: node linkType: hard @@ -2478,7 +2474,7 @@ __metadata: "@storybook/addon-interactions@file:../../../code/addons/interactions::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/addon-interactions@file:../../../code/addons/interactions#../../../code/addons/interactions::hash=e7e04a&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/addon-interactions@file:../../../code/addons/interactions#../../../code/addons/interactions::hash=43a156&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" "@storybook/instrumenter": "workspace:*" @@ -2486,7 +2482,7 @@ __metadata: "@storybook/types": "workspace:*" polished: "npm:^4.2.2" ts-dedent: "npm:^2.2.0" - checksum: 10/c66d7db9c1356903d444211962054b0a692a56f7ed5debcaa1f2e40fd57575975b8de86c2fb3be3a140e69cdc8f36b25f81be6e2ca55fb4facf826694d8be65f + checksum: 10/7ab50dfb5ccfde231d5ebde1e695512c5bb3706e5fe9bc580fbf23d5298ac7685e9648fbbc5f65605779954dc2f04ac1ce799e47b387d7eaaff5c9d7e8485602 languageName: node linkType: hard @@ -2590,7 +2586,7 @@ __metadata: "@storybook/builder-webpack5@file:../../../code/builders/builder-webpack5::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/builder-webpack5@file:../../../code/builders/builder-webpack5#../../../code/builders/builder-webpack5::hash=983659&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/builder-webpack5@file:../../../code/builders/builder-webpack5#../../../code/builders/builder-webpack5::hash=c0c586&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" @@ -2629,26 +2625,26 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 10/f84f41cd8ac80376ba603f4bb58da565f2b0e95ed37593279d85c4e5573de64633f10b7c6f2bd399f6d40057f1c97934760b969326520250f6de5efd07ac967b + checksum: 10/f4fe0264184b91d9a96baf2d35fc7c7c212b516901650c852f61c2aec2e6b7d81f6828b7ca7ce34f1623bab5cd838936d5877d982df0fa75cab577af78ce79ef languageName: node linkType: hard "@storybook/channels@file:../../../code/lib/channels::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/channels@file:../../../code/lib/channels#../../../code/lib/channels::hash=3a33a2&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/channels@file:../../../code/lib/channels#../../../code/lib/channels::hash=413c8e&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" "@storybook/global": "npm:^5.0.0" telejson: "npm:^7.2.0" tiny-invariant: "npm:^1.3.1" - checksum: 10/cda1b155f07fdac919a29e5a5287ae33ef4b3ed9c5c9816c29e17e3aa0dd788dc59da8775c40341ebcbd426ecf4f9ab629949dfe945834f48db7ca6053c062f1 + checksum: 10/6091e0ca5a19b46589877a6a17cac725ef863a8cdf61d812261673e16227490f8b80fcf26daa8924dbcaad434c91118ac399f3a610c7eec5ed094e7b0dfd0947 languageName: node linkType: hard "@storybook/cli@file:../../../code/lib/cli::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/cli@file:../../../code/lib/cli#../../../code/lib/cli::hash=49e395&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/cli@file:../../../code/lib/cli#../../../code/lib/cli::hash=2914c7&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@babel/core": "npm:^7.23.0" "@babel/types": "npm:^7.23.0" @@ -2689,16 +2685,16 @@ __metadata: bin: getstorybook: ./bin/index.js sb: ./bin/index.js - checksum: 10/37be78e7b11cfb9d712f9b948e3017665fcee970e1b3a4806f3f8307ea9db7e39f4b12fa919086a53efbe4e24a5e6196b2daafb958c11145e9e5d224fa70af55 + checksum: 10/6c967c34ef47687aa6ccbc70d82f22e375be79af1bf5eec3e1163c7774b65fda69a414c0aa712039062a9f184bc84d70e7fcf713712c28d4a121cc3848a32600 languageName: node linkType: hard "@storybook/client-logger@file:../../../code/lib/client-logger::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/client-logger@file:../../../code/lib/client-logger#../../../code/lib/client-logger::hash=f3ac76&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/client-logger@file:../../../code/lib/client-logger#../../../code/lib/client-logger::hash=6408e1&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" - checksum: 10/00b5cfade208483f5ec85c8aa59cabf402502a4cf1d9c3ee24a311a396e65ce97f0a3d4356aac9f413c8d84c9804ccb07aaeda6f3d553799e6e036960f4a2fbe + checksum: 10/ff3312279cf1bcaa3fcf91149951e4b7b6cba79ddbb0f80e488126a38bf1f7ceab4ad43cf40324b5ec9c3a8a786695042bc7cd47a0ae0a4835f06dddc5fb214e languageName: node linkType: hard @@ -2727,7 +2723,7 @@ __metadata: "@storybook/components@file:../../../code/ui/components::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/components@file:../../../code/ui/components#../../../code/ui/components::hash=2c348b&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/components@file:../../../code/ui/components#../../../code/ui/components::hash=636348&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@radix-ui/react-slot": "npm:^1.0.2" "@storybook/client-logger": "workspace:*" @@ -2741,13 +2737,13 @@ __metadata: peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: 10/5ca7607bebb485e1dbb5c26f5dc3482e661d1646381be3ae26284c1e82cb0e2de51e05f5c4272ebe4d5fa6536aecb8dcd46e3da871aad90ba67a2e7e8987d278 + checksum: 10/02326f8b50631922d80cf64163abf4e723c5a1fd78c1ae1b276c95ff7992c0a826736badf1b7222038d83775b2937ef60de426aab7a6d5262a7b1152f5825abc languageName: node linkType: hard "@storybook/core-common@file:../../../code/lib/core-common::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/core-common@file:../../../code/lib/core-common#../../../code/lib/core-common::hash=55d292&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/core-common@file:../../../code/lib/core-common#../../../code/lib/core-common::hash=26f1e6&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-events": "workspace:*" "@storybook/csf-tools": "workspace:*" @@ -2777,22 +2773,22 @@ __metadata: tiny-invariant: "npm:^1.3.1" ts-dedent: "npm:^2.0.0" util: "npm:^0.12.4" - checksum: 10/e9308c3683651e2c925823e4bee0f91156ba544b0dc72ee6291810e7bd2e17690bce3f426c10d942fd5e18eb545589e5a3347cd02eb6ecceb058dad7a56bb775 + checksum: 10/7b692d71f9d170253ad376d67d364d351eff3d6f9b21fcf2471aefbf78fe4fdfb61a24f444630ad0bcbe3d560b92350271087e03f7e040cedbbfbb142ef0bc7b languageName: node linkType: hard "@storybook/core-events@file:../../../code/lib/core-events::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/core-events@file:../../../code/lib/core-events#../../../code/lib/core-events::hash=840150&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/core-events@file:../../../code/lib/core-events#../../../code/lib/core-events::hash=8a7a19&locator=portable-stories-nextjs%40workspace%3A." dependencies: ts-dedent: "npm:^2.0.0" - checksum: 10/ccfa4397af9c114f401ac87d232f66c0cb37e7ee104647b36dd34e7bf598ff7e3a22fb18a6fb9d1529cef35f053056e34fa3f7626e62c5e133d31bd58fd6b5cb + checksum: 10/ac72fe623b6bf6a6897db1cce99539e67c75ce958d29c09b53930e696e7b6aa6d23cfe0fe41a3415b8f281e972b5c010efe89b9fd8783960a0c982088ecbe928 languageName: node linkType: hard "@storybook/core-server@file:../../../code/lib/core-server::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/core-server@file:../../../code/lib/core-server#../../../code/lib/core-server::hash=2c034c&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/core-server@file:../../../code/lib/core-server#../../../code/lib/core-server::hash=e5bcbd&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@aw-web-design/x-default-browser": "npm:1.4.126" "@babel/core": "npm:^7.23.9" @@ -2817,9 +2813,11 @@ __metadata: "@types/semver": "npm:^7.3.4" better-opn: "npm:^3.0.2" chalk: "npm:^4.1.0" + cjs-module-lexer: "npm:^1.2.3" cli-table3: "npm:^0.6.1" compression: "npm:^1.7.4" detect-port: "npm:^1.3.0" + es-module-lexer: "npm:^1.5.0" express: "npm:^4.17.3" fs-extra: "npm:^11.1.0" globby: "npm:^14.0.1" @@ -2837,20 +2835,20 @@ __metadata: util-deprecate: "npm:^1.0.2" watchpack: "npm:^2.2.0" ws: "npm:^8.2.3" - checksum: 10/83c58dfa24e67e8ea10107858e723eebe3ebafa17580fbe9526022e02d1ba2467ef5e75ba3b303436c470a7151f183ad2d781b4cef1201a73cdf8f10d317cc57 + checksum: 10/1f4f9495d5d3158613966a1b84f8fb19d8fcee6d05f06c885d27315cf8416fe36b18c898d577ff2a5ad72157d7f7e63171d9b49bf0191cdc45519f224e5c5ad7 languageName: node linkType: hard "@storybook/core-webpack@file:../../../code/lib/core-webpack::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/core-webpack@file:../../../code/lib/core-webpack#../../../code/lib/core-webpack::hash=d17dda&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/core-webpack@file:../../../code/lib/core-webpack#../../../code/lib/core-webpack::hash=1c6e9a&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-common": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/types": "workspace:*" "@types/node": "npm:^18.0.0" ts-dedent: "npm:^2.0.0" - checksum: 10/2e56db38374ec96f01c00c0fa4c8a9090c1db1d56c8c611a93d1a0c60769aa6a2c751ed29fa6c3a3a7adbf99d457287908e8e01ee1848ab6c59f6837934d81bf + checksum: 10/af79e1e751158c7d47475736c052cf1fd6535fbaa131168141a06eef2ed5f178165771dba4e4995a567d5d180d4af33a4e75c573153ec39a838901cbb16aa4c1 languageName: node linkType: hard @@ -2866,7 +2864,7 @@ __metadata: "@storybook/csf-tools@file:../../../code/lib/csf-tools::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/csf-tools@file:../../../code/lib/csf-tools#../../../code/lib/csf-tools::hash=69584a&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/csf-tools@file:../../../code/lib/csf-tools#../../../code/lib/csf-tools::hash=703916&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@babel/generator": "npm:^7.23.0" "@babel/parser": "npm:^7.23.0" @@ -2877,7 +2875,7 @@ __metadata: fs-extra: "npm:^11.1.0" recast: "npm:^0.23.5" ts-dedent: "npm:^2.0.0" - checksum: 10/7fce79866ace04b9a2bc78a66a03e27e6e770b4279e1b40c08634bce01eb57be22f5f192f73c6a65cc959c8910f63a3d35e31a71fe3ac821aea095722e324710 + checksum: 10/b597a467657223667710c73bcdd8d85e481a7c088e816539dd9513f2a42cb825e1d3fdd5461772d969201d2f6901280c30a9712d8711b7e12661a01d692f6871 languageName: node linkType: hard @@ -2908,7 +2906,7 @@ __metadata: "@storybook/docs-tools@file:../../../code/lib/docs-tools::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/docs-tools@file:../../../code/lib/docs-tools#../../../code/lib/docs-tools::hash=4be280&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/docs-tools@file:../../../code/lib/docs-tools#../../../code/lib/docs-tools::hash=0f1a92&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-common": "workspace:*" "@storybook/preview-api": "workspace:*" @@ -2917,7 +2915,7 @@ __metadata: assert: "npm:^2.1.0" doctrine: "npm:^3.0.0" lodash: "npm:^4.17.21" - checksum: 10/121355441e903b87a0b9e590eca45a9b355af949148da6d23434f59b2aa753f00e0ffb8bc625d4ca91cf01e5e9782caceb561537d62729a2b2e240b6e640a0f4 + checksum: 10/6efb67c748bf9616313844cc482a31b49834d7b94767a544b7a5ed9a2e2d28c3d8a945162040b09f39af3f36c5288c00a83a67166c5d6a91b38875b8ff039acd languageName: node linkType: hard @@ -2940,7 +2938,7 @@ __metadata: "@storybook/instrumenter@file:../../../code/lib/instrumenter::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/instrumenter@file:../../../code/lib/instrumenter#../../../code/lib/instrumenter::hash=ffe9d7&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/instrumenter@file:../../../code/lib/instrumenter#../../../code/lib/instrumenter::hash=da2c8f&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" @@ -2949,13 +2947,13 @@ __metadata: "@storybook/preview-api": "workspace:*" "@vitest/utils": "npm:^1.3.1" util: "npm:^0.12.4" - checksum: 10/84948fcfafe05e5934117e6c514a1788f9d146d28f749c11313e5f65c60f3f20be0e659e97f14a6b5ce405b01afa4941571f644a9cb88d8b3a956c2c79413723 + checksum: 10/a55b3615eee655ef969641128c408ad5a6f3a0196af135e4ea1aa9289b9a2c98d84b34c3a57a25ca8cf6e619faad5fe6440232097fb99ecf7fc0341395a8ce16 languageName: node linkType: hard "@storybook/manager-api@file:../../../code/lib/manager-api::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/manager-api@file:../../../code/lib/manager-api#../../../code/lib/manager-api::hash=3e3312&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/manager-api@file:../../../code/lib/manager-api#../../../code/lib/manager-api::hash=4ab1f3&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" @@ -2972,20 +2970,20 @@ __metadata: store2: "npm:^2.14.2" telejson: "npm:^7.2.0" ts-dedent: "npm:^2.0.0" - checksum: 10/dcc92a7797ccf0f986ef2eb9077884799e4cc92603ca52a69071b4943ca149fd17d771c64bd1fd474c8287b4bda5385c7b24bada7acc9f7413deac152ec32157 + checksum: 10/ef8fe488bd220f3b895d26895e5a55a9bc110ee799f062f06d3c32dfa5ccd834c04074d96d8d4dc8c41336e322b2d3a4e0f93dc518442b22a9b36ddbfc92f990 languageName: node linkType: hard "@storybook/manager@file:../../../code/ui/manager::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/manager@file:../../../code/ui/manager#../../../code/ui/manager::hash=257346&locator=portable-stories-nextjs%40workspace%3A." - checksum: 10/cdfcb34cdfaa7b7fbd388c54f2ecc85e0b4276ba1d915cc4b36dfcdd9ab8c5391815ae502089aa77e5dad8e51a064f86771969f20e9d10b5b14973d8e4e80a8b + resolution: "@storybook/manager@file:../../../code/ui/manager#../../../code/ui/manager::hash=645d43&locator=portable-stories-nextjs%40workspace%3A." + checksum: 10/9708627cc2f3a886c53dfec9402088f6b18b40ba8f472289d08c6b25c0e2e1e71871d6a79f19e57586751b287b55506c72372d1a0fab2efa89847719bf7c50f7 languageName: node linkType: hard "@storybook/nextjs@file:../../../code/frameworks/nextjs::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/nextjs@file:../../../code/frameworks/nextjs#../../../code/frameworks/nextjs::hash=a5b14e&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/nextjs@file:../../../code/frameworks/nextjs#../../../code/frameworks/nextjs::hash=8cda79&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@babel/core": "npm:^7.23.2" "@babel/plugin-syntax-bigint": "npm:^7.8.3" @@ -3043,20 +3041,20 @@ __metadata: optional: true webpack: optional: true - checksum: 10/86d287d5088a26adabce7b6ca5e56eebedf44df95bd07b1085253e095bea2d1d54898eed384ff7ca75866b00ffa36dd0a0c8f252edc1b4feb48725b6ca2ca851 + checksum: 10/6a1ccdb267a0a9dfc99716dc16fff89d1ec49d4abcf56631185ec57107a8a7a500771e65174e65b7c2f14a5049a17777bb3934034d9ec7793c685a945c3c93f5 languageName: node linkType: hard "@storybook/node-logger@file:../../../code/lib/node-logger::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/node-logger@file:../../../code/lib/node-logger#../../../code/lib/node-logger::hash=0d5379&locator=portable-stories-nextjs%40workspace%3A." - checksum: 10/ba3b49b55a325ec5d885898e5cd61370c19ad27a54315025c315bb08b6a09a64cfd3097748225be1f4b07aad42245a239ac9ba6e957c854ebb48718a43e5c215 + resolution: "@storybook/node-logger@file:../../../code/lib/node-logger#../../../code/lib/node-logger::hash=76992b&locator=portable-stories-nextjs%40workspace%3A." + checksum: 10/39a64d0cfc1ab16e4e808edc63fb9b5b76c038acb864b00d756260f9b5cf66116a758f6969dcc06daab8e69a8965fceef11c1d3cab8b524de1021b97dfd5b0e4 languageName: node linkType: hard "@storybook/preset-react-webpack@file:../../../code/presets/react-webpack::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/preset-react-webpack@file:../../../code/presets/react-webpack#../../../code/presets/react-webpack::hash=3c5b01&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/preset-react-webpack@file:../../../code/presets/react-webpack#../../../code/presets/react-webpack::hash=f3317c&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-webpack": "workspace:*" "@storybook/docs-tools": "workspace:*" @@ -3079,13 +3077,13 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 10/3baffd6ce4e642f852c370ccd4ae8098a5e730f4493ce43c8414f0b44e59c8bc8a99d9975cf5149b655f1808e54d274754044f45983b9f1be7c9a28f00931ac2 + checksum: 10/ee2981fac009bed8163403a304fc34ea8e6f307bd11c26dc6b9e1682e5116facfef0a1e6c59dafe179977b1f5e366912db7e6cac7530cd7074a7c2dd071bd91e languageName: node linkType: hard "@storybook/preview-api@file:../../../code/lib/preview-api::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/preview-api@file:../../../code/lib/preview-api#../../../code/lib/preview-api::hash=2e825a&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/preview-api@file:../../../code/lib/preview-api#../../../code/lib/preview-api::hash=8ed046&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" @@ -3101,14 +3099,14 @@ __metadata: tiny-invariant: "npm:^1.3.1" ts-dedent: "npm:^2.0.0" util-deprecate: "npm:^1.0.2" - checksum: 10/8cb6df33b082d43c40daa182241aef50e583fc3c45d954730df0fbf305645926b2904b5177661a7a6294969014bda8c647f24960afd6114333e7c4bb00caa869 + checksum: 10/d5a6dc59d0cf9660869c7059567ffe09e1d590835aa781a5a94fc109ae67ae961f82db05a5e983b209e76a595ef3b9669f25897a174701fbcd2846a321ddd8e6 languageName: node linkType: hard "@storybook/preview@file:../../../code/lib/preview::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/preview@file:../../../code/lib/preview#../../../code/lib/preview::hash=dccd68&locator=portable-stories-nextjs%40workspace%3A." - checksum: 10/834521c05fe7496e5d411dd9dc8cd3d2e3902bd101fcfe9e1caa2bace894fb6698d035fd190072a3cf2e294c86324315f30732c16bc30f75a1307feab53c16d1 + resolution: "@storybook/preview@file:../../../code/lib/preview#../../../code/lib/preview::hash=98d894&locator=portable-stories-nextjs%40workspace%3A." + checksum: 10/a528ce775b0cbd9572b870f14837025294d771f9717f6f8d6cbb8ccab6c05b6d3392d5a4211f09a8ec3073080beaef18d86ebeb1f00d137b49f71f15815d2d51 languageName: node linkType: hard @@ -3132,17 +3130,17 @@ __metadata: "@storybook/react-dom-shim@file:../../../code/lib/react-dom-shim::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/react-dom-shim@file:../../../code/lib/react-dom-shim#../../../code/lib/react-dom-shim::hash=062b74&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/react-dom-shim@file:../../../code/lib/react-dom-shim#../../../code/lib/react-dom-shim::hash=4a12a1&locator=portable-stories-nextjs%40workspace%3A." peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: 10/ba63271a1f2d663cd53354798c490d306787b8033586a1062175b89fe4409759cbc959aa34dad12ff8f9bf2e9c141a391784eda81f23cbc9d13495128c9e1611 + checksum: 10/1328cd24014a00ea7b07c2359c0d6af7fd7973a8635e1e42ff8f462524ad0961fccfc3200f25f86e1fdd75d151f2f50038db70e88c5fb4c9ff7a93cfa387d4dd languageName: node linkType: hard "@storybook/react@file:../../../code/renderers/react::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/react@file:../../../code/renderers/react#../../../code/renderers/react::hash=f60a6b&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/react@file:../../../code/renderers/react#../../../code/renderers/react::hash=bd65ea&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" "@storybook/docs-tools": "workspace:*" @@ -3172,18 +3170,18 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 10/aa5c6739bfda7f26dcf2155cc61cc02c7387046fd3f1ef0029fa851b56024e5c81e69ef11c7a3f167bf66715161586abc2e29bbcdd5e3ea4ff9f0a34bbdac095 + checksum: 10/cd74c903f1353af291132c4a3a04f6dbdae6a131723d41f8cf38fb6181a0dc1c0b1a292e293338386f72b29f1f9cb2e4e660ab50ac61914e5236fad1f376a290 languageName: node linkType: hard "@storybook/router@file:../../../code/lib/router::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/router@file:../../../code/lib/router#../../../code/lib/router::hash=f3d914&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/router@file:../../../code/lib/router#../../../code/lib/router::hash=2f121e&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" memoizerific: "npm:^1.11.3" qs: "npm:^6.10.0" - checksum: 10/ae4218eb5cb26c1fd31b334a5431a228a4fd6f30bff1e4feb68c188317ceece7b91510c0c98c4a2d4fe419baebb2da21ea03d65dfe5123257befdb8ad9e0770c + checksum: 10/8fcccb54ade96e59e716e74c9985633d6ff4a9e025f80e83cb1c8c61443910cb3205d2b2753f7a455544b8d39be832c456db4ecff2e58753b0fd45a0f828b6b6 languageName: node linkType: hard @@ -3205,7 +3203,7 @@ __metadata: "@storybook/test@file:../../../code/lib/test::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/test@file:../../../code/lib/test#../../../code/lib/test::hash=cd3c93&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/test@file:../../../code/lib/test#../../../code/lib/test::hash=4192cc&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" @@ -3218,13 +3216,13 @@ __metadata: "@vitest/spy": "npm:^1.3.1" chai: "npm:^4.4.1" util: "npm:^0.12.4" - checksum: 10/783d04972494921194bbf60ba366dd62c81340257671acdb2693156dc64c709c64a51efc5fcf528c5a43d11167b2193d4582d24e5012e86407b64fbeda4c1c66 + checksum: 10/ae7add4394f4c590aaac487da53f0e335051560ecd18f0e831f6e62ffb15aad2299060f58e6149bf3637dd8ed48217e7ae3bd54b58a5ea35ab8fea3982aabbc2 languageName: node linkType: hard "@storybook/theming@file:../../../code/lib/theming::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/theming@file:../../../code/lib/theming#../../../code/lib/theming::hash=9cc340&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/theming@file:../../../code/lib/theming#../../../code/lib/theming::hash=f968b9&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@emotion/use-insertion-effect-with-fallbacks": "npm:^1.0.1" "@storybook/client-logger": "workspace:*" @@ -3238,18 +3236,18 @@ __metadata: optional: true react-dom: optional: true - checksum: 10/e64850170fec111310877caa5a994ad53c9e072f324d0871d98e34f7d30688dadd7b24914441b3c50f3e9dc3f80909c60fa292e61f7fe6b257a6e19521a6c8e1 + checksum: 10/e603c954ca9f8a99cb82deac40c66f1fd71d170900f6c8a4e0f3157921b6b1da6c0d644519960312eefa1def67a99c50a4e4cd6c6e92fd121d99a9fcb822f6b9 languageName: node linkType: hard "@storybook/types@file:../../../code/lib/types::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/types@file:../../../code/lib/types#../../../code/lib/types::hash=0524c9&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.6 + resolution: "@storybook/types@file:../../../code/lib/types#../../../code/lib/types::hash=c292b3&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@types/express": "npm:^4.7.0" file-system-cache: "npm:2.3.0" - checksum: 10/b2835c9386c22e535e62263fe03ead9c43a1c9762b6524ed8a9b1954887e8853311d580caa7711d57a1eecc9ce30cd7cfd9d814a45723e8434397b7adced1871 + checksum: 10/66db65b0e5185de6e9df7fb239b4a45beaf5e42d1f558ae465346b850f8626909aa7d415b49ed0ba0b837219ded47021c42bffff83f13eba29867ee8eafe7b0c languageName: node linkType: hard From 3893f71e8d68a84cf6deac7df0fbe3c09c270ed0 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 10 Apr 2024 16:08:43 +0200 Subject: [PATCH 090/380] wip --- .../utils/save-from-controls/update-args-in-csf-file.test.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/lib/core-server/src/utils/save-from-controls/update-args-in-csf-file.test.ts b/code/lib/core-server/src/utils/save-from-controls/update-args-in-csf-file.test.ts index c44e4d15fe7a..5e4fd1323a88 100644 --- a/code/lib/core-server/src/utils/save-from-controls/update-args-in-csf-file.test.ts +++ b/code/lib/core-server/src/utils/save-from-controls/update-args-in-csf-file.test.ts @@ -13,8 +13,6 @@ const FILES = { tab: join(getProjectRoot(), 'code/ui/components/src/components/tabs/tabs.stories.tsx'), }; -// console.log(FILES); - describe('success', () => { test('should return success', async () => { const before = await readFile(FILES.tab, 'utf-8'); @@ -29,5 +27,7 @@ describe('success', () => { const after = printCsf(parsed); expect(after.code).not.toBe(before); + + // TODO, how to assert the change? without diffing the whole file }); }); From 218b865e91195ecf948322fcbc1956f5c37ca516 Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Wed, 10 Apr 2024 16:25:40 +0200 Subject: [PATCH 091/380] Hide info text on overflow --- .../components/ArgsTable/SaveFromControls.tsx | 34 +++++++++++-------- 1 file changed, 19 insertions(+), 15 deletions(-) diff --git a/code/ui/blocks/src/components/ArgsTable/SaveFromControls.tsx b/code/ui/blocks/src/components/ArgsTable/SaveFromControls.tsx index 5332ff7632f9..e1daafc80dbc 100644 --- a/code/ui/blocks/src/components/ArgsTable/SaveFromControls.tsx +++ b/code/ui/blocks/src/components/ArgsTable/SaveFromControls.tsx @@ -26,8 +26,10 @@ const Container = styled.div({ const Bar = styled(BaseBar)(({ theme }) => ({ display: 'flex', + flexDirection: 'row-reverse', // hide Info rather than Actions on overflow alignItems: 'center', justifyContent: 'space-between', + flexWrap: 'wrap', gap: 6, padding: '6px 10px', animation: `${slideIn} 300ms forwards`, @@ -36,13 +38,23 @@ const Bar = styled(BaseBar)(({ theme }) => ({ fontSize: theme.typography.size.s2, })); -const Content = styled.div({ +const Info = styled.div({ display: 'flex', + flex: '99 0 auto', alignItems: 'center', marginLeft: 10, gap: 6, }); +const Actions = styled.div(({ theme }) => ({ + display: 'flex', + flex: '1 0 0', + alignItems: 'center', + gap: 2, + color: theme.color.mediumdark, + fontSize: theme.typography.size.s2, +})); + const Label = styled.div({ '@container (max-width: 799px)': { lineHeight: 0, @@ -65,14 +77,6 @@ const ModalInput = styled(Form.Input)(({ theme }) => ({ }, })); -const Actions = styled.div(({ theme }) => ({ - display: 'flex', - alignItems: 'center', - gap: 2, - color: theme.color.mediumdark, - fontSize: theme.typography.size.s2, -})); - type SaveFromControlsProps = { saveStory: () => void; createStory: (storyName: string) => void; @@ -116,12 +120,6 @@ export const SaveFromControls = ({ saveStory, createStory, resetArgs }: SaveFrom return ( - - - - + + + +
From bcbca9b0f838c4a1777dc430462b83501a9087ae Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Wed, 10 Apr 2024 16:32:41 +0200 Subject: [PATCH 092/380] Update story definition to use satisfies keyword --- .../ui/components/src/components/Modal/Modal.stories.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/code/ui/components/src/components/Modal/Modal.stories.tsx b/code/ui/components/src/components/Modal/Modal.stories.tsx index 0c2add0dbe2e..e117c56f4787 100644 --- a/code/ui/components/src/components/Modal/Modal.stories.tsx +++ b/code/ui/components/src/components/Modal/Modal.stories.tsx @@ -5,17 +5,18 @@ import { userEvent, within, expect } from '@storybook/test'; import { Modal } from './Modal'; import { Button } from '../Button/Button'; -const meta: Meta = { +type Story = StoryObj; + +const meta = { component: Modal, decorators: [(storyFn) =>
{storyFn()}
], -}; +} satisfies Meta; export default meta; -type Story = StoryObj; - export const Default: Story = { args: { + children: undefined, width: undefined, height: undefined, }, From 74370476e80c0a253fdfb655cf95c2186fca223f Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 10 Apr 2024 16:33:43 +0200 Subject: [PATCH 093/380] fix lockfile conflicts --- .../nextjs/yarn.lock | 32 ++----------------- 1 file changed, 2 insertions(+), 30 deletions(-) diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock b/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock index b8ebbeb27d8c..f2523cdcfdc0 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock @@ -2779,17 +2779,10 @@ __metadata: "@storybook/core-events@file:../../../code/lib/core-events::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 -<<<<<<< HEAD - resolution: "@storybook/core-events@file:../../../code/lib/core-events#../../../code/lib/core-events::hash=8a7a19&locator=portable-stories-nextjs%40workspace%3A." - dependencies: - ts-dedent: "npm:^2.0.0" - checksum: 10/ac72fe623b6bf6a6897db1cce99539e67c75ce958d29c09b53930e696e7b6aa6d23cfe0fe41a3415b8f281e972b5c010efe89b9fd8783960a0c982088ecbe928 -======= resolution: "@storybook/core-events@file:../../../code/lib/core-events#../../../code/lib/core-events::hash=3d1227&locator=portable-stories-nextjs%40workspace%3A." dependencies: ts-dedent: "npm:^2.0.0" checksum: 10/9ecdadbfc30f79f4ef930595681e39197e8545d32308b9e9a1829f3f67047521d44c66664386f6be62a75019abe67e5b37d08bd9ced83eeee28c0602f8bed5fa ->>>>>>> origin/yann/nextjs-headers-mocks languageName: node linkType: hard @@ -2990,11 +2983,7 @@ __metadata: "@storybook/nextjs@file:../../../code/frameworks/nextjs::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 -<<<<<<< HEAD - resolution: "@storybook/nextjs@file:../../../code/frameworks/nextjs#../../../code/frameworks/nextjs::hash=8cda79&locator=portable-stories-nextjs%40workspace%3A." -======= - resolution: "@storybook/nextjs@file:../../../code/frameworks/nextjs#../../../code/frameworks/nextjs::hash=e17c4a&locator=portable-stories-nextjs%40workspace%3A." ->>>>>>> origin/yann/nextjs-headers-mocks + resolution: "@storybook/nextjs@file:../../../code/frameworks/nextjs#../../../code/frameworks/nextjs::hash=54d145&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@babel/core": "npm:^7.23.2" "@babel/plugin-syntax-bigint": "npm:^7.8.3" @@ -3051,11 +3040,7 @@ __metadata: optional: true webpack: optional: true -<<<<<<< HEAD - checksum: 10/6a1ccdb267a0a9dfc99716dc16fff89d1ec49d4abcf56631185ec57107a8a7a500771e65174e65b7c2f14a5049a17777bb3934034d9ec7793c685a945c3c93f5 -======= - checksum: 10/c683698db1894bd29caa5bedf5f9bef0378e5e9e391b8d986144ecc95a625bc22574fab9e60d56703975a69c558baa1d6a652eabdf5760aafb1a8f23d97798d9 ->>>>>>> origin/yann/nextjs-headers-mocks + checksum: 10/0cf1a6cb4f106b7073a4932f2b2432b946bae36378fe53443eda98a867c2a1cd4271ea34d737016ea9a21c43f71d70202894084232164444d12784bd81726ebc languageName: node linkType: hard @@ -3119,13 +3104,8 @@ __metadata: "@storybook/preview@file:../../../code/lib/preview::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 -<<<<<<< HEAD - resolution: "@storybook/preview@file:../../../code/lib/preview#../../../code/lib/preview::hash=98d894&locator=portable-stories-nextjs%40workspace%3A." - checksum: 10/a528ce775b0cbd9572b870f14837025294d771f9717f6f8d6cbb8ccab6c05b6d3392d5a4211f09a8ec3073080beaef18d86ebeb1f00d137b49f71f15815d2d51 -======= resolution: "@storybook/preview@file:../../../code/lib/preview#../../../code/lib/preview::hash=364559&locator=portable-stories-nextjs%40workspace%3A." checksum: 10/cda37fa779743c888a72cc6329ce2d2d7d0171ae2c45d5854c90cf49a834c53e8334d36d95c255254440f4e6304251789f600c64a8f7925df1dc52e76aa18277 ->>>>>>> origin/yann/nextjs-headers-mocks languageName: node linkType: hard @@ -3159,11 +3139,7 @@ __metadata: "@storybook/react@file:../../../code/renderers/react::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 -<<<<<<< HEAD - resolution: "@storybook/react@file:../../../code/renderers/react#../../../code/renderers/react::hash=bd65ea&locator=portable-stories-nextjs%40workspace%3A." -======= resolution: "@storybook/react@file:../../../code/renderers/react#../../../code/renderers/react::hash=e02d2f&locator=portable-stories-nextjs%40workspace%3A." ->>>>>>> origin/yann/nextjs-headers-mocks dependencies: "@storybook/client-logger": "workspace:*" "@storybook/docs-tools": "workspace:*" @@ -3193,11 +3169,7 @@ __metadata: peerDependenciesMeta: typescript: optional: true -<<<<<<< HEAD - checksum: 10/cd74c903f1353af291132c4a3a04f6dbdae6a131723d41f8cf38fb6181a0dc1c0b1a292e293338386f72b29f1f9cb2e4e660ab50ac61914e5236fad1f376a290 -======= checksum: 10/bc3d21e78b36c3fa4133532858d0b32f1686a8227096c1079c4575cc29461e32ebeb742b74671c0c43523b738ec8186a1368036d3e9406f6e4cf561a67fc2b79 ->>>>>>> origin/yann/nextjs-headers-mocks languageName: node linkType: hard From 0b7a912fb0c4ec0768fbff2849fe568c596e8b8d Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 10 Apr 2024 20:12:26 +0200 Subject: [PATCH 094/380] fix create sandbox issue --- code/lib/test/template/stories/module-mocking.stories.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/code/lib/test/template/stories/module-mocking.stories.ts b/code/lib/test/template/stories/module-mocking.stories.ts index d81e86715e02..f0ddc417fbc6 100644 --- a/code/lib/test/template/stories/module-mocking.stories.ts +++ b/code/lib/test/template/stories/module-mocking.stories.ts @@ -1,5 +1,6 @@ import { global as globalThis } from '@storybook/global'; -// @ts-expect-error This alias is set in the sandbox +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore This alias is set in the sandbox. Using ts-ignore instead of ts-expect-error to avoid build errors in the sandbox. // eslint-disable-next-line import/no-unresolved import { foo } from '#utils'; import { expect, fn, isMockFunction, mocked } from '@storybook/test'; From 499864f800027f250cb0cae714ac4d54a2ceccd2 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 10 Apr 2024 21:57:12 +0200 Subject: [PATCH 095/380] get the tests the way I want them, add support for existing prop overrides --- code/lib/core-server/package.json | 2 + .../src/utils/save-from-controls/getDiff.ts | 66 +++++++++++++++++ .../mocks/satisfies.stories.tsx | 68 +++++++++++++++++ .../update-args-in-csf-file.test.ts | 73 +++++++++++++++++-- .../update-args-in-csf-file.ts | 35 +++++---- code/yarn.lock | 11 ++- 6 files changed, 233 insertions(+), 22 deletions(-) create mode 100644 code/lib/core-server/src/utils/save-from-controls/getDiff.ts create mode 100644 code/lib/core-server/src/utils/save-from-controls/mocks/satisfies.stories.tsx diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index 58f6be3c9d46..53b2df152952 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -73,6 +73,7 @@ "@storybook/telemetry": "workspace:*", "@storybook/types": "workspace:*", "@types/detect-port": "^1.3.0", + "@types/diff": "^5.0.9", "@types/node": "^18.0.0", "@types/pretty-hrtime": "^1.0.0", "@types/semver": "^7.3.4", @@ -81,6 +82,7 @@ "cli-table3": "^0.6.1", "compression": "^1.7.4", "detect-port": "^1.3.0", + "diff": "^5.2.0", "express": "^4.17.3", "fs-extra": "^11.1.0", "globby": "^14.0.1", diff --git a/code/lib/core-server/src/utils/save-from-controls/getDiff.ts b/code/lib/core-server/src/utils/save-from-controls/getDiff.ts new file mode 100644 index 000000000000..95cc88b91d57 --- /dev/null +++ b/code/lib/core-server/src/utils/save-from-controls/getDiff.ts @@ -0,0 +1,66 @@ +import { diffLines } from 'diff'; + +/** + * Get a diff between two strings + * @param before The original string + * @param after The new string + * @returns The diff as a string + * @example + * ```ts + * const before = 'foo\nbar\nbaz'; + * const after = 'foo\nbaz'; + * const diff = getDiff(before, after); + * console.log(diff); + * // foo + * // - bar + * // baz + * ``` + */ +export function getDiff(before: string, after: string): string { + const context = 4; + return diffLines(before, after, { newlineIsToken: true }) + .map((r, index, l) => { + if (r.removed) { + return r.value + .split('\n') + .map((v) => `- ${v}`) + .join('\n'); + } + if (r.added) { + return r.value + .split('\n') + .map((v) => `+ ${v}`) + .join('\n'); + } + + if (index === 0) { + return ( + `...\n` + + r.value + .split('\n') + .slice(0 - context) + .map((v) => ` ${v}`) + .join('\n') + ); + } + + if (index === l.length - 1) { + return ( + r.value + .split('\n') + .slice(0, context) + .map((v) => ` ${v}`) + .join('\n') + `\n...` + ); + } + + const all = r.value.split('\n').map((v) => ` ${v}`); + return [ + // + ...all.slice(0, context), + '...', + ...all.slice(0 - context), + ].join('\n'); + }) + .join('\n'); +} diff --git a/code/lib/core-server/src/utils/save-from-controls/mocks/satisfies.stories.tsx b/code/lib/core-server/src/utils/save-from-controls/mocks/satisfies.stories.tsx new file mode 100644 index 000000000000..2ad65206b43b --- /dev/null +++ b/code/lib/core-server/src/utils/save-from-controls/mocks/satisfies.stories.tsx @@ -0,0 +1,68 @@ +import React from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; +import { TabsState } from '@storybook/components/src/components/tabs/tabs'; + +export default { + title: 'Tabs', + args: { + menuName: 'Addons', + }, +} satisfies Meta; + +type Story = StoryObj; + +export const RenderNoArgs = { + render: (args) => ( + +
+ { + (({ active, selected }: { active: boolean; selected: string }) => + active ?
{selected} is selected
: null) as any + } +
+
+
test2 is always active (but visually hidden)
+
+ + ), +} satisfies Story; + +export const RenderArgs = { + args: { + absolute: true, + }, + render: (args) => ( + +
+ { + (({ active, selected }: { active: boolean; selected: string }) => + active ?
{selected} is selected
: null) as any + } +
+
+
test2 is always active (but visually hidden)
+
+ + ), +} satisfies Story; + +export const RenderExistingArgs = { + args: { + absolute: true, + bordered: true, + initial: 'test2', + }, + render: (args) => ( + +
+ { + (({ active, selected }: { active: boolean; selected: string }) => + active ?
{selected} is selected
: null) as any + } +
+
+
test2 is always active (but visually hidden)
+
+ + ), +} satisfies Story; diff --git a/code/lib/core-server/src/utils/save-from-controls/update-args-in-csf-file.test.ts b/code/lib/core-server/src/utils/save-from-controls/update-args-in-csf-file.test.ts index 5e4fd1323a88..db5e5d06baf9 100644 --- a/code/lib/core-server/src/utils/save-from-controls/update-args-in-csf-file.test.ts +++ b/code/lib/core-server/src/utils/save-from-controls/update-args-in-csf-file.test.ts @@ -1,33 +1,90 @@ /* eslint-disable no-underscore-dangle */ import { describe, test, expect } from 'vitest'; import { readCsf, printCsf } from '@storybook/csf-tools'; -import { join } from 'path'; -import { getProjectRoot } from '@storybook/core-common'; import { updateArgsInCsfFile } from './update-args-in-csf-file'; import { readFile } from 'fs/promises'; +import { join } from 'path'; +import { getDiff } from './getDiff'; const makeTitle = (userTitle: string) => userTitle; const FILES = { - tab: join(getProjectRoot(), 'code/ui/components/src/components/tabs/tabs.stories.tsx'), + satisfies: join(__dirname, 'mocks/satisfies.stories.tsx'), }; describe('success', () => { - test('should return success', async () => { - const before = await readFile(FILES.tab, 'utf-8'); - const CSF = await readCsf(FILES.tab, { makeTitle }); + test('TS satisfies', async () => { + const newArgs = { bordered: true, initial: 'test1' }; + + const before = await readFile(FILES.satisfies, 'utf-8'); + const CSF = await readCsf(FILES.satisfies, { makeTitle }); const parsed = CSF.parse(); const names = Object.keys(parsed._stories); const nodes = names.map((name) => CSF.getStoryExport(name)); - updateArgsInCsfFile(nodes[0], { active: true, selected: 'test1' }); + nodes.forEach((node) => { + updateArgsInCsfFile(node, newArgs); + }); const after = printCsf(parsed); + // check if the code was updated at all expect(after.code).not.toBe(before); - // TODO, how to assert the change? without diffing the whole file + // check if the code was updated correctly + expect(getDiff(before, after.code)).toMatchInlineSnapshot(` + "... + type Story = StoryObj; + + export const RenderNoArgs = { + + + args: { + + bordered: true, + + initial: "test1" + + }, + + + + + render: (args) => ( + +
+ { + ... +
test2 is always active (but visually hidden)
+
+ + + - ), + + ) + + } satisfies Story; + + export const RenderArgs = { + ... + export const RenderArgs = { + args: { + absolute: true, + + + bordered: true, + + initial: "test1" + + + }, + render: (args) => ( + +
+ ... + args: { + absolute: true, + bordered: true, + + - initial: 'test2', + + initial: "test1", + + }, + render: (args) => ( + + ..." + `); }); }); diff --git a/code/lib/core-server/src/utils/save-from-controls/update-args-in-csf-file.ts b/code/lib/core-server/src/utils/save-from-controls/update-args-in-csf-file.ts index b4e3f3bb1c67..2b31b21745f2 100644 --- a/code/lib/core-server/src/utils/save-from-controls/update-args-in-csf-file.ts +++ b/code/lib/core-server/src/utils/save-from-controls/update-args-in-csf-file.ts @@ -27,21 +27,30 @@ export const updateArgsInCsfFile = async (node: t.Node, input: Record - t.objectProperty(t.identifier(key), value) - ) - ) - ) - ); + if (argsProperty.isObjectProperty()) { + // for each key in input, try to find the key in argsProperty>value>entries when found, replace the value with the new value + const a = argsProperty.get('value'); + if (a.isObjectExpression()) { + a.traverse({ + ObjectProperty(p) { + const key = p.get('key'); + if (key.isIdentifier() && key.node.name in args) { + p.get('value').replaceWith(args[key.node.name]); + delete args[key.node.name]; + } + }, + }); + + const remainder = Object.entries(args); + if (Object.keys(args).length) { + remainder.forEach(([key, value]) => { + a.pushContainer('properties', t.objectProperty(t.identifier(key), value)); + }); + } + } } } else { - path.pushContainer( + path.unshiftContainer( 'properties', t.objectProperty( t.identifier('args'), diff --git a/code/yarn.lock b/code/yarn.lock index 472dd503b241..302ffcb003c5 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5587,6 +5587,7 @@ __metadata: "@storybook/types": "workspace:*" "@types/compression": "npm:^1.7.0" "@types/detect-port": "npm:^1.3.0" + "@types/diff": "npm:^5.0.9" "@types/ip": "npm:^1.1.0" "@types/node": "npm:^18.0.0" "@types/node-fetch": "npm:^2.5.7" @@ -5599,6 +5600,7 @@ __metadata: cli-table3: "npm:^0.6.1" compression: "npm:^1.7.4" detect-port: "npm:^1.3.0" + diff: "npm:^5.2.0" express: "npm:^4.17.3" fs-extra: "npm:^11.1.0" globby: "npm:^14.0.1" @@ -7322,6 +7324,13 @@ __metadata: languageName: node linkType: hard +"@types/diff@npm:^5.0.9": + version: 5.0.9 + resolution: "@types/diff@npm:5.0.9" + checksum: 10c0/038e4d831f6d9826f0019fa07ec821a1f966160cd0d62aede6fc6ab269fc969ac6e665f7849fb2189fb92f7865488dcaabcb278c3df877d0d3581f2a7e1a67b2 + languageName: node + linkType: hard + "@types/doctrine@npm:^0.0.3": version: 0.0.3 resolution: "@types/doctrine@npm:0.0.3" @@ -12816,7 +12825,7 @@ __metadata: languageName: node linkType: hard -"diff@npm:^5.0.0": +"diff@npm:^5.0.0, diff@npm:^5.2.0": version: 5.2.0 resolution: "diff@npm:5.2.0" checksum: 10c0/aed0941f206fe261ecb258dc8d0ceea8abbde3ace5827518ff8d302f0fc9cc81ce116c4d8f379151171336caf0516b79e01abdc1ed1201b6440d895a66689eb4 From 7eec06e1e7539e2becdeded2d7474357ddeaa622 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 10 Apr 2024 13:12:51 +0200 Subject: [PATCH 096/380] Use error framework --- .../nextjs/src/next-image-loader-stub.ts | 5 ++--- .../core-events/src/errors/preview-errors.ts | 17 +++++++++++++++++ 2 files changed, 19 insertions(+), 3 deletions(-) diff --git a/code/frameworks/nextjs/src/next-image-loader-stub.ts b/code/frameworks/nextjs/src/next-image-loader-stub.ts index 464b03797dc0..dbc65b8fde63 100644 --- a/code/frameworks/nextjs/src/next-image-loader-stub.ts +++ b/code/frameworks/nextjs/src/next-image-loader-stub.ts @@ -3,6 +3,7 @@ import imageSizeOf from 'image-size'; import type { RawLoaderDefinition } from 'webpack'; import type { NextConfig } from 'next'; import { cpus } from 'os'; +import { NextJsSharpError } from '@storybook/core-events/preview-errors'; interface LoaderOptions { filename: string; @@ -51,9 +52,7 @@ const nextImageLoaderStub: RawLoaderDefinition = async function N width = result.width; height = result.height; } else { - throw new Error( - 'You have to install sharp in order to use image optimization features in Next.js.' - ); + throw new NextJsSharpError(); } } else { const result = imageSizeOf(this.resourcePath); diff --git a/code/lib/core-events/src/errors/preview-errors.ts b/code/lib/core-events/src/errors/preview-errors.ts index fb33c42688b3..218db70ef826 100644 --- a/code/lib/core-events/src/errors/preview-errors.ts +++ b/code/lib/core-events/src/errors/preview-errors.ts @@ -27,6 +27,7 @@ export enum Category { RENDERER_VUE = 'RENDERER_VUE', RENDERER_VUE3 = 'RENDERER_VUE3', RENDERER_WEB_COMPONENTS = 'RENDERER_WEB-COMPONENTS', + FRAMEWORK_NEXTJS = 'FRAMEWORK_NEXTJS', } export class MissingStoryAfterHmrError extends StorybookError { @@ -235,3 +236,19 @@ export class StoryStoreAccessedBeforeInitializationError extends StorybookError remove access to the store entirely`; } } + +export class NextJsSharpError extends StorybookError { + readonly category = Category.FRAMEWORK_NEXTJS; + + readonly code = 1; + + readonly documentation = 'https://storybook.js.org/docs/get-started/nextjs#faq'; + + template() { + return dedent` + You are importing avif images, but you don't have sharp installed. + + You have to install sharp in order to use image optimization features in Next.js. + `; + } +} From 3eaacff2aeef09fb38fc12d3d886b50d8ee18cab Mon Sep 17 00:00:00 2001 From: shuta13 Date: Thu, 11 Apr 2024 11:46:00 +0900 Subject: [PATCH 097/380] docs: add the part of resolving sharp errors --- docs/get-started/nextjs.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/docs/get-started/nextjs.md b/docs/get-started/nextjs.md index 6cbd4ac91177..b17cf19661b3 100644 --- a/docs/get-started/nextjs.md +++ b/docs/get-started/nextjs.md @@ -865,6 +865,24 @@ You might get this if you're using Yarn v2 or v3. See [Notes for Yarn v2 and v3 The `@storybook/nextjs` package abstracts the Webpack 5 builder and provides all the necessary Webpack configuration needed (and used internally) by Next.js. Webpack is currently the official builder in Next.js, and Next.js does not support Vite, therefore it is not possible to use Vite with `@storybook/nextjs`. You can use `@storybook/react-vite` framework instead, but at the cost of having a degraded experience, and we won't be able to provide you official support. +### Error: You are importing avif images, but you don't have sharp installed. You have to install sharp in order to use image optimization features in Next.js. + +`sharp` is a dependency of Next.js's image optimization feature. If you see this error, you need to install `sharp` in your project. + +```bash +npm install sharp +``` + +```bash +yarn add sharp +``` + +```bash +pnpm add sharp +``` + +You can refer to the [Install `sharp` to Use Built-In Image Optimization](https://nextjs.org/docs/messages/install-sharp) in the Next.js documentation for more information. + ## API ### Parameters From 707b7b088272f46401de91b1511537a4242758b9 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Thu, 11 Apr 2024 07:46:02 +0200 Subject: [PATCH 098/380] fix e2e test --- code/e2e-tests/framework-nextjs.spec.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/e2e-tests/framework-nextjs.spec.ts b/code/e2e-tests/framework-nextjs.spec.ts index 61233dd5ac25..e8d141d5ff5b 100644 --- a/code/e2e-tests/framework-nextjs.spec.ts +++ b/code/e2e-tests/framework-nextjs.spec.ts @@ -56,7 +56,7 @@ test.describe('Next.js', () => { await sbPage.viewAddonPanel('Actions'); const logItem = await page.locator('#storybook-panel-root #panel-tab-content', { - hasText: `nextNavigation.${action}`, + hasText: `useRouter().${action}`, }); await expect(logItem).toBeVisible(); }); @@ -91,7 +91,7 @@ test.describe('Next.js', () => { await sbPage.viewAddonPanel('Actions'); const logItem = await page.locator('#storybook-panel-root #panel-tab-content', { - hasText: `nextRouter.${action}`, + hasText: `useRouter().${action}`, }); await expect(logItem).toBeVisible(); }); From e91c8d0a9c1beb1025df6d271ff12f3af90ab845 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 11 Apr 2024 09:18:22 +0200 Subject: [PATCH 099/380] Final fixes --- .../server-channel/create-new-story-channel.test.ts | 12 ++++++------ code/lib/core-server/src/utils/get-new-story-file.ts | 4 ++-- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/code/lib/core-server/src/server-channel/create-new-story-channel.test.ts b/code/lib/core-server/src/server-channel/create-new-story-channel.test.ts index 81d53f200d82..289756ea540b 100644 --- a/code/lib/core-server/src/server-channel/create-new-story-channel.test.ts +++ b/code/lib/core-server/src/server-channel/create-new-story-channel.test.ts @@ -19,8 +19,8 @@ const mockFs = vi.hoisted(() => { }; }); -vi.mock('fs/promises', async (importOriginal) => { - const actual = await importOriginal(); +vi.mock('node:fs/promises', async (importOriginal) => { + const actual = await importOriginal(); return { default: { ...actual, @@ -60,9 +60,9 @@ describe('createNewStoryChannel', () => { } as any); mockChannel.emit(CREATE_NEW_STORYFILE, { - filepath: 'src/components/Page.jsx', + componentFilePath: 'src/components/Page.jsx', componentExportName: 'Page', - default: true, + componentIsDefaultExport: true, }); await vi.waitFor(() => { @@ -101,9 +101,9 @@ describe('createNewStoryChannel', () => { } as any); mockChannel.emit(CREATE_NEW_STORYFILE, { - filepath: 'src/components/Page.jsx', + componentFilePath: 'src/components/Page.jsx', componentExportName: 'Page', - default: true, + componentIsDefaultExport: true, }); await vi.waitFor(() => { diff --git a/code/lib/core-server/src/utils/get-new-story-file.ts b/code/lib/core-server/src/utils/get-new-story-file.ts index fc302f13e8d1..1b43665c8679 100644 --- a/code/lib/core-server/src/utils/get-new-story-file.ts +++ b/code/lib/core-server/src/utils/get-new-story-file.ts @@ -1,7 +1,7 @@ import type { Options } from '@storybook/types'; import { getFrameworkName, getProjectRoot } from '@storybook/core-common'; -import path from 'path'; -import fs from 'fs'; +import path from 'node:path'; +import fs from 'node:fs'; import { getTypeScriptTemplateForNewStoryFile } from './new-story-templates/typescript'; import { getJavaScriptTemplateForNewStoryFile } from './new-story-templates/javascript'; From 7138518148d9309c6f85396defc93901a9c033d8 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Thu, 11 Apr 2024 10:10:39 +0200 Subject: [PATCH 100/380] upgrade Downshift --- code/ui/manager/package.json | 2 +- code/yarn.lock | 43 ++++++++++++++++++++++-------------- 2 files changed, 27 insertions(+), 18 deletions(-) diff --git a/code/ui/manager/package.json b/code/ui/manager/package.json index d67d082c5741..16fb28b56704 100644 --- a/code/ui/manager/package.json +++ b/code/ui/manager/package.json @@ -90,7 +90,7 @@ "@types/semver": "^7.3.4", "browser-dtector": "^3.4.0", "copy-to-clipboard": "^3.3.1", - "downshift": "^6.0.15", + "downshift": "^9.0.4", "fs-extra": "^11.1.0", "fuse.js": "^3.6.1", "lodash": "^4.17.21", diff --git a/code/yarn.lock b/code/yarn.lock index 7be8a5f1fd96..25c0ad1fa04f 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -1996,7 +1996,7 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:7.24.0, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.14.8, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.22.6, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2": +"@babel/runtime@npm:7.24.0, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.22.6, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2": version: 7.24.0 resolution: "@babel/runtime@npm:7.24.0" dependencies: @@ -2014,6 +2014,15 @@ __metadata: languageName: node linkType: hard +"@babel/runtime@npm:^7.22.15": + version: 7.24.4 + resolution: "@babel/runtime@npm:7.24.4" + dependencies: + regenerator-runtime: "npm:^0.14.0" + checksum: 10c0/785aff96a3aa8ff97f90958e1e8a7b1d47f793b204b47c6455eaadc3f694f48c97cd5c0a921fe3596d818e71f18106610a164fb0f1c71fd68c622a58269d537c + languageName: node + linkType: hard + "@babel/runtime@npm:~7.5.4": version: 7.5.5 resolution: "@babel/runtime@npm:7.5.5" @@ -5899,7 +5908,7 @@ __metadata: "@types/semver": "npm:^7.3.4" browser-dtector: "npm:^3.4.0" copy-to-clipboard: "npm:^3.3.1" - downshift: "npm:^6.0.15" + downshift: "npm:^9.0.4" fs-extra: "npm:^11.1.0" fuse.js: "npm:^3.6.1" lodash: "npm:^4.17.21" @@ -11759,10 +11768,10 @@ __metadata: languageName: node linkType: hard -"compute-scroll-into-view@npm:^1.0.17": - version: 1.0.20 - resolution: "compute-scroll-into-view@npm:1.0.20" - checksum: 10c0/19034322590bfce59cb6939b3603e7aaf6f0d4128b8627bbc136e71c8714905e2f8bf2ba0cb7f153c6e8cdb8ad907ffd6d0188ccc7625dc05790a59ae6a81f01 +"compute-scroll-into-view@npm:^3.0.3": + version: 3.1.0 + resolution: "compute-scroll-into-view@npm:3.1.0" + checksum: 10c0/bf305c4ece8e5c59ed3f7ed82b6dab5b7487ce26f56a693d903869964712870fccb08fe31d40edcbd600b03c99198f54d443acb315d674bd64fd344410c8672e languageName: node linkType: hard @@ -13037,18 +13046,18 @@ __metadata: languageName: node linkType: hard -"downshift@npm:^6.0.15": - version: 6.1.12 - resolution: "downshift@npm:6.1.12" +"downshift@npm:^9.0.4": + version: 9.0.4 + resolution: "downshift@npm:9.0.4" dependencies: - "@babel/runtime": "npm:^7.14.8" - compute-scroll-into-view: "npm:^1.0.17" - prop-types: "npm:^15.7.2" - react-is: "npm:^17.0.2" - tslib: "npm:^2.3.0" + "@babel/runtime": "npm:^7.22.15" + compute-scroll-into-view: "npm:^3.0.3" + prop-types: "npm:^15.8.1" + react-is: "npm:^18.2.0" + tslib: "npm:^2.6.2" peerDependencies: react: ">=16.12.0" - checksum: 10c0/fa29bfcb9db520c9e45735a49e00d85bb47fb3ad0d4b754dbf2e75ef5cb9264c0950be3186422f14a8acb0e753a7fc0564e4312906de641989c349ea70424558 + checksum: 10c0/8474a42d7fdbe9e5fb748c79b0f824610375921a5300426312d8b8e13d72aa29a6a5d45dba42b599878855d127ba7fa4b26862a8a12d12fd576e8d955b6670c4 languageName: node linkType: hard @@ -23674,14 +23683,14 @@ __metadata: languageName: node linkType: hard -"react-is@npm:^17.0.1, react-is@npm:^17.0.2": +"react-is@npm:^17.0.1": version: 17.0.2 resolution: "react-is@npm:17.0.2" checksum: 10c0/2bdb6b93fbb1820b024b496042cce405c57e2f85e777c9aabd55f9b26d145408f9f74f5934676ffdc46f3dcff656d78413a6e43968e7b3f92eea35b3052e9053 languageName: node linkType: hard -"react-is@npm:^18.0.0": +"react-is@npm:^18.0.0, react-is@npm:^18.2.0": version: 18.2.0 resolution: "react-is@npm:18.2.0" checksum: 10c0/6eb5e4b28028c23e2bfcf73371e72cd4162e4ac7ab445ddae2afe24e347a37d6dc22fae6e1748632cd43c6d4f9b8f86dcf26bf9275e1874f436d129952528ae0 From 1f27fd5520fdad310b92807abe136d412f91f2a0 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Thu, 11 Apr 2024 10:15:57 +0200 Subject: [PATCH 101/380] move side-effects out of stateReducer and into separate event handlers --- .../manager/src/components/sidebar/Search.tsx | 64 +++++++++++-------- 1 file changed, 36 insertions(+), 28 deletions(-) diff --git a/code/ui/manager/src/components/sidebar/Search.tsx b/code/ui/manager/src/components/sidebar/Search.tsx index 0df164a2d35b..21e22bbd9d6b 100644 --- a/code/ui/manager/src/components/sidebar/Search.tsx +++ b/code/ui/manager/src/components/sidebar/Search.tsx @@ -165,17 +165,6 @@ export const Search = React.memo<{ const [allComponents, showAllComponents] = useState(false); const searchShortcut = api ? shortcutToHumanString(api.getShortcutKeys().search) : '/'; - const selectStory = useCallback( - (id: string, refId: string) => { - if (api) { - api.selectStory(id, undefined, { ref: refId !== DEFAULT_REF_ID && refId }); - } - inputRef.current.blur(); - showAllComponents(false); - }, - [api, inputRef, showAllComponents, DEFAULT_REF_ID] - ); - const makeFuse = useCallback(() => { const list = dataset.entries.reduce((acc, [refId, { index, status }]) => { const groupStatus = getGroupStatus(index || {}, status); @@ -232,6 +221,27 @@ export const Search = React.memo<{ [allComponents, makeFuse] ); + const onSelect = useCallback( + (selectedItem: DownshiftItem) => { + if (isSearchResult(selectedItem)) { + const { id, refId } = selectedItem.item; + api?.selectStory(id, undefined, { ref: refId !== DEFAULT_REF_ID && refId }); + inputRef.current.blur(); + showAllComponents(false); + return; + } + if (isExpandType(selectedItem)) { + selectedItem.showAll(); + } + }, + [api] + ); + + const onInputValueChange = useCallback((inputValue: string, stateAndHelpers: any) => { + console.log('LOG: onInputValue', inputValue, stateAndHelpers); + showAllComponents(false); + }, []); + const stateReducer = useCallback( (state: DownshiftState, changes: StateChangeOptions) => { switch (changes.type) { @@ -242,13 +252,12 @@ export const Search = React.memo<{ inputValue: state.inputValue, // Return to the tree view after selecting an item isOpen: state.inputValue && !state.selectedItem, - selectedItem: null, }; } case Downshift.stateChangeTypes.mouseUp: { // Prevent clearing the input on refocus - return {}; + return state; } case Downshift.stateChangeTypes.keyDownEscape: { @@ -256,38 +265,29 @@ export const Search = React.memo<{ // Clear the inputValue, but don't return to the tree view return { ...changes, inputValue: '', isOpen: true, selectedItem: null }; } - // When pressing escape a second time, blur the input and return to the tree view - inputRef.current.blur(); + // When pressing escape a second time return to the tree view + // The onKeyDown handler will also blur the input in this case return { ...changes, isOpen: false, selectedItem: null }; } case Downshift.stateChangeTypes.clickItem: case Downshift.stateChangeTypes.keyDownEnter: { if (isSearchResult(changes.selectedItem)) { - const { id, refId } = changes.selectedItem.item; - selectStory(id, refId); // Return to the tree view, but keep the input value - return { ...changes, inputValue: state.inputValue, isOpen: false }; + return { ...changes, inputValue: state.inputValue }; } if (isExpandType(changes.selectedItem)) { - changes.selectedItem.showAll(); // Downshift should completely ignore this - return {}; + return state; } return changes; } - case Downshift.stateChangeTypes.changeInput: { - // Reset the "show more" state whenever the input changes - showAllComponents(false); - return changes; - } - default: return changes; } }, - [inputRef, selectStory, showAllComponents] + [] ); const { isMobile } = useLayout(); @@ -298,6 +298,8 @@ export const Search = React.memo<{ // @ts-expect-error (Converted from ts-ignore) itemToString={(result) => result?.item?.name || ''} scrollIntoView={(e) => scrollIntoView(e)} + onSelect={onSelect} + onInputValueChange={onInputValueChange} > {({ isOpen, @@ -343,6 +345,13 @@ export const Search = React.memo<{ setPlaceholder('Type to find...'); }, onBlur: () => setPlaceholder('Find components'), + onKeyDown: (e) => { + if (e.key === 'Escape' && inputValue.length === 0) { + // When pressing escape while the input is empty, blur the input + // The stateReducer will handle returning to the tree view + inputRef.current.blur(); + } + }, }); const labelProps = getLabelProps({ @@ -359,7 +368,6 @@ export const Search = React.memo<{ - {/* @ts-expect-error (TODO) */} {!isMobile && enableShortcuts && !isOpen && ( From ac2834a7ee193d7fa91bfa80aafe95a00453acb8 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Thu, 11 Apr 2024 10:28:58 +0200 Subject: [PATCH 102/380] cleanup --- code/ui/manager/src/components/sidebar/Search.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/code/ui/manager/src/components/sidebar/Search.tsx b/code/ui/manager/src/components/sidebar/Search.tsx index 21e22bbd9d6b..38ac1b3c1f21 100644 --- a/code/ui/manager/src/components/sidebar/Search.tsx +++ b/code/ui/manager/src/components/sidebar/Search.tsx @@ -238,7 +238,6 @@ export const Search = React.memo<{ ); const onInputValueChange = useCallback((inputValue: string, stateAndHelpers: any) => { - console.log('LOG: onInputValue', inputValue, stateAndHelpers); showAllComponents(false); }, []); From 30c2467929cccb9007367343dd6092af9c1702e8 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 11 Apr 2024 11:06:31 +0200 Subject: [PATCH 103/380] Implement file formatter --- code/lib/core-common/package.json | 12 ++ .../__snapshots__/formatter.test.ts.snap | 76 +++++++ .../withPrettierConfig/.prettierrc | 6 + .../withoutEditorConfig/.editorconfig | 3 + .../withoutEditorConfig/.prettierrc | 0 .../withoutPrettierConfig/.editorconfig | 8 + .../withoutPrettierConfig/.prettierrc | 0 .../core-common/src/utils/formatter.test.ts | 185 ++++++++++++++++++ code/lib/core-common/src/utils/formatter.ts | 95 +++++++++ code/yarn.lock | 34 ++++ 10 files changed, 419 insertions(+) create mode 100644 code/lib/core-common/src/utils/__snapshots__/formatter.test.ts.snap create mode 100644 code/lib/core-common/src/utils/__tests-formatter__/withPrettierConfig/.prettierrc create mode 100644 code/lib/core-common/src/utils/__tests-formatter__/withoutEditorConfig/.editorconfig create mode 100644 code/lib/core-common/src/utils/__tests-formatter__/withoutEditorConfig/.prettierrc create mode 100644 code/lib/core-common/src/utils/__tests-formatter__/withoutPrettierConfig/.editorconfig create mode 100644 code/lib/core-common/src/utils/__tests-formatter__/withoutPrettierConfig/.prettierrc create mode 100644 code/lib/core-common/src/utils/formatter.test.ts create mode 100644 code/lib/core-common/src/utils/formatter.ts diff --git a/code/lib/core-common/package.json b/code/lib/core-common/package.json index c64ce6092e3f..216b61a3dbab 100644 --- a/code/lib/core-common/package.json +++ b/code/lib/core-common/package.json @@ -65,6 +65,7 @@ "node-fetch": "^2.0.0", "picomatch": "^2.3.0", "pkg-dir": "^5.0.0", + "prettier-fallback": "npm:prettier@^3", "pretty-hrtime": "^1.0.3", "resolve-from": "^5.0.0", "semver": "^7.3.7", @@ -80,12 +81,23 @@ "@types/node": "^18.0.0", "@types/node-fetch": "^2.6.4", "@types/picomatch": "^2.3.0", + "@types/prettier-v2": "npm:@types/prettier@^2", "@types/pretty-hrtime": "^1.0.0", "mock-fs": "^5.2.0", + "prettier-v2": "npm:prettier@^2", + "prettier-v3": "npm:prettier@^3", "slash": "^5.0.0", "type-fest": "~2.19", "typescript": "^5.3.2" }, + "peerDependencies": { + "prettier": "^2 || ^3" + }, + "peerDependenciesMeta": { + "prettier": { + "optional": true + } + }, "publishConfig": { "access": "public" }, diff --git a/code/lib/core-common/src/utils/__snapshots__/formatter.test.ts.snap b/code/lib/core-common/src/utils/__snapshots__/formatter.test.ts.snap new file mode 100644 index 000000000000..5d3c9cb0526d --- /dev/null +++ b/code/lib/core-common/src/utils/__snapshots__/formatter.test.ts.snap @@ -0,0 +1,76 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`formatter > withPrettierConfig > prettier-v2 > formats content with prettier 1`] = ` +"import type { Meta, StoryObj } from '@storybook/nextjs'; + +import Component from './foo'; + +const meta = { + component: Component, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; +" +`; + +exports[`formatter > withPrettierConfig > prettier-v3 > formats content with prettier 1`] = ` +"import type { Meta, StoryObj } from '@storybook/nextjs'; + +import Component from './foo'; + +const meta = { + component: Component, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; +" +`; + +exports[`formatter > withoutPrettierConfigAndWithEditorConfig > prettier not available > should return the content formatted by settings of editorconfig 1`] = ` +"import type { Meta, StoryObj } from "@storybook/nextjs"; + +import Component from "./foo"; + +const meta = { + component: Component, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; +" +`; + +exports[`formatter > withoutPrettierConfigAndWithEditorConfig > prettier-v2 > formats content with prettier 1`] = ` +"import type { Meta, StoryObj } from "@storybook/nextjs"; + +import Component from "./foo"; + +const meta = { + component: Component, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; +" +`; + +exports[`formatter > withoutPrettierConfigAndWithEditorConfig > prettier-v3 > formats content with prettier 1`] = ` +"import type { Meta, StoryObj } from "@storybook/nextjs"; + +import Component from "./foo"; + +const meta = { + component: Component, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; +" +`; diff --git a/code/lib/core-common/src/utils/__tests-formatter__/withPrettierConfig/.prettierrc b/code/lib/core-common/src/utils/__tests-formatter__/withPrettierConfig/.prettierrc new file mode 100644 index 000000000000..f9148847022b --- /dev/null +++ b/code/lib/core-common/src/utils/__tests-formatter__/withPrettierConfig/.prettierrc @@ -0,0 +1,6 @@ +{ + "trailingComma": "es5", + "tabWidth": 4, + "semi": true, + "singleQuote": true +} diff --git a/code/lib/core-common/src/utils/__tests-formatter__/withoutEditorConfig/.editorconfig b/code/lib/core-common/src/utils/__tests-formatter__/withoutEditorConfig/.editorconfig new file mode 100644 index 000000000000..c5319e7de1f8 --- /dev/null +++ b/code/lib/core-common/src/utils/__tests-formatter__/withoutEditorConfig/.editorconfig @@ -0,0 +1,3 @@ +root = true + +[*] diff --git a/code/lib/core-common/src/utils/__tests-formatter__/withoutEditorConfig/.prettierrc b/code/lib/core-common/src/utils/__tests-formatter__/withoutEditorConfig/.prettierrc new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/code/lib/core-common/src/utils/__tests-formatter__/withoutPrettierConfig/.editorconfig b/code/lib/core-common/src/utils/__tests-formatter__/withoutPrettierConfig/.editorconfig new file mode 100644 index 000000000000..6094488126d1 --- /dev/null +++ b/code/lib/core-common/src/utils/__tests-formatter__/withoutPrettierConfig/.editorconfig @@ -0,0 +1,8 @@ +root = true + +[*] +end_of_line = lf +insert_final_newline = true +indent_style = space +indent_size = 6 + diff --git a/code/lib/core-common/src/utils/__tests-formatter__/withoutPrettierConfig/.prettierrc b/code/lib/core-common/src/utils/__tests-formatter__/withoutPrettierConfig/.prettierrc new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/code/lib/core-common/src/utils/formatter.test.ts b/code/lib/core-common/src/utils/formatter.test.ts new file mode 100644 index 000000000000..7f8c22036e81 --- /dev/null +++ b/code/lib/core-common/src/utils/formatter.test.ts @@ -0,0 +1,185 @@ +import { formatFileContent } from './formatter'; +import { describe, it, expect, vi } from 'vitest'; +import path from 'node:path'; +import dedent from 'ts-dedent'; +import { resolveConfigFile } from 'prettier-v2'; + +const mockPrettier = vi.hoisted(() => ({ + resolveConfig: vi.fn(), + format: vi.fn(), + version: vi.fn(), +})); + +vi.mock('prettier', () => ({ + resolveConfig: mockPrettier.resolveConfig, + format: mockPrettier.format, + get version() { + return mockPrettier.version(); + }, +})); + +const dummyContent = ` +import type { Meta, StoryObj } from '@storybook/nextjs' + +import Component from './foo'; + + const meta = { + component: Component + } satisfies Meta; + +export default meta; + +type Story = StoryObj; +`; + +describe('formatter', () => { + describe('withPrettierConfig', () => { + const testPath = path.resolve(__dirname, '__tests-formatter__', 'withPrettierConfig'); + + describe('prettier-v2', async () => { + const prettierV2 = await import('prettier-v2'); + + it('formats content with prettier', async () => { + mockPrettier.format.mockImplementation(prettierV2.format); + mockPrettier.version.mockReturnValue(prettierV2.version); + mockPrettier.resolveConfig.mockImplementation(prettierV2.resolveConfig); + + const filePath = path.resolve(testPath, 'testFile.ts'); + + const result = await formatFileContent(filePath, dummyContent); + + expect(result).toMatchSnapshot(); + }); + }); + + describe('prettier-v3', async () => { + const prettierV3 = await import('prettier-v3'); + + it('formats content with prettier', async () => { + mockPrettier.format.mockImplementation(prettierV3.format); + mockPrettier.version.mockReturnValue(prettierV3.version); + mockPrettier.resolveConfig.mockImplementation(prettierV3.resolveConfig); + + const filePath = path.resolve(testPath, 'testFile.ts'); + + const result = await formatFileContent(filePath, dummyContent); + + expect(result).toMatchSnapshot(); + }); + }); + + describe('prettier not available', async () => { + it('should return the content as is', async () => { + mockPrettier.format.mockImplementation(() => { + throw new Error('Prettier not available'); + }); + + const filePath = path.resolve(testPath, 'testFile.ts'); + + const result = await formatFileContent(filePath, dummyContent); + + expect(result).toBe(dummyContent); + }); + }); + }); + + describe('withoutPrettierConfigAndWithEditorConfig', () => { + const testPath = path.resolve(__dirname, '__tests-formatter__', 'withoutPrettierConfig'); + + describe('prettier-v2', async () => { + const prettierV2 = await import('prettier-v2'); + + it('formats content with prettier', async () => { + mockPrettier.format.mockImplementation(prettierV2.format); + mockPrettier.version.mockReturnValue(prettierV2.version); + mockPrettier.resolveConfig.mockImplementation(prettierV2.resolveConfig); + + const filePath = path.resolve(testPath, 'testFile.ts'); + + const result = await formatFileContent(filePath, dummyContent); + + expect(result).toMatchSnapshot(); + }); + }); + + describe('prettier-v3', async () => { + const prettierV3 = await import('prettier-v3'); + + it('formats content with prettier', async () => { + mockPrettier.format.mockImplementation(prettierV3.format); + mockPrettier.version.mockReturnValue(prettierV3.version); + mockPrettier.resolveConfig.mockImplementation(prettierV3.resolveConfig); + + const filePath = path.resolve(testPath, 'testFile.ts'); + + const result = await formatFileContent(filePath, dummyContent); + + expect(result).toMatchSnapshot(); + }); + }); + + describe('prettier not available', async () => { + it('should return the content formatted by settings of editorconfig', async () => { + mockPrettier.format.mockImplementation(() => { + throw new Error('Prettier not available'); + }); + + const filePath = path.resolve(testPath, 'testFile.ts'); + + const result = await formatFileContent(filePath, dummyContent); + + expect(result).toMatchSnapshot(); + }); + }); + }); + + describe('withoutPrettierConfigAndWithEditorConfig', () => { + const testPath = path.resolve(__dirname, '__tests-formatter__', 'withoutEditorConfig'); + + describe('prettier-v2', async () => { + const prettierV2 = await import('prettier-v2'); + + it('formats content with prettier', async () => { + mockPrettier.format.mockImplementation(prettierV2.format); + mockPrettier.version.mockReturnValue(prettierV2.version); + mockPrettier.resolveConfig.mockResolvedValue(null); + + const filePath = path.resolve(testPath, 'testFile.ts'); + + const result = await formatFileContent(filePath, dummyContent); + + expect(result).toBe(dummyContent); + }); + }); + + describe('prettier-v3', async () => { + const prettierV3 = await import('prettier-v3'); + + it('formats content with prettier', async () => { + mockPrettier.format.mockImplementation(prettierV3.format); + mockPrettier.version.mockReturnValue(prettierV3.version); + mockPrettier.resolveConfig.mockResolvedValue(null); + + const filePath = path.resolve(testPath, 'testFile.ts'); + + const result = await formatFileContent(filePath, dummyContent); + + expect(result).toBe(dummyContent); + }); + }); + + describe('prettier not available', async () => { + it('should return the content as is', async () => { + mockPrettier.format.mockImplementation(() => { + throw new Error('Prettier not available'); + }); + + const filePath = path.resolve(testPath, 'testFile.ts'); + + const result = await formatFileContent(filePath, dummyContent); + + expect(result).toBe(dummyContent); + }); + }); + }); +}); diff --git a/code/lib/core-common/src/utils/formatter.ts b/code/lib/core-common/src/utils/formatter.ts new file mode 100644 index 000000000000..91401de0fb2d --- /dev/null +++ b/code/lib/core-common/src/utils/formatter.ts @@ -0,0 +1,95 @@ +import semver from 'semver'; +import dedent from 'ts-dedent'; + +type Prettier = typeof import('prettier-v2') | typeof import('prettier-v3'); +type PrettierVersion = 2 | 3; + +let prettierInstance: Prettier | undefined; +let prettierVersion: 2 | 3 | null = null; + +const getPrettier = async (): Promise< + | { instance: undefined; version: null } + | { instance: typeof import('prettier-v2'); version: 2 } + | { instance: typeof import('prettier-v3'); version: 3 } + | { instance: typeof import('prettier-v3'); version: 3 } +> => { + if (!prettierInstance) { + try { + prettierInstance = (await import('prettier')) as unknown as Prettier | undefined; + prettierVersion = prettierInstance?.version + ? (semver.major(prettierInstance.version) as PrettierVersion) + : null; + + return { + version: prettierVersion, + instance: prettierInstance, + } as any; + } catch (err) { + return { + instance: undefined, + version: null, + }; + } + } + + return { + instance: prettierInstance, + version: prettierVersion, + } as any; +}; + +/** + * Format the content of a file using prettier. + * If prettier is not available in the user's project, it will fallback to use editorconfig settings if available and formats the file by a prettier-fallback. + */ +export async function formatFileContent(filePath: string, content: string): Promise { + try { + const prettier = await getPrettier(); + + switch (prettier.version) { + case 2: + case 3: + const config = await prettier.instance.resolveConfig(filePath); + + if (!config || Object.keys(config).length === 0) { + return await formatWithEditorConfig(filePath, content); + } + + const result = await prettier.instance.format(content, { + ...(config as any), + filepath: filePath, + }); + + return result; + case null: + case undefined: + return await formatWithEditorConfig(filePath, content); + default: + console.warn(dedent` + Your prettier version ${ + (prettier as any).version + } is not supported to format files which were edited by Storybook. + Please raise an issue on the Storybook GitHub repository. + Fallback to EditorConfig settings if available. + `); + } + } catch (error) { + return content; + } + + return content; +} + +async function formatWithEditorConfig(filePath: string, content: string) { + const prettier = await import('prettier-fallback'); + const config = await prettier.resolveConfig(filePath, { editorconfig: true }); + + if (!config || Object.keys(config).length === 0) { + return content; + } + + return prettier.format(content, { + ...(config as any), + filepath: filePath, + }); +} diff --git a/code/yarn.lock b/code/yarn.lock index 6fcdaaa369b7..13cc29a105f6 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5521,6 +5521,7 @@ __metadata: "@types/node": "npm:^18.0.0" "@types/node-fetch": "npm:^2.6.4" "@types/picomatch": "npm:^2.3.0" + "@types/prettier-v2": "npm:@types/prettier@^2" "@types/pretty-hrtime": "npm:^1.0.0" "@yarnpkg/fslib": "npm:2.10.3" "@yarnpkg/libzip": "npm:2.3.0" @@ -5540,6 +5541,9 @@ __metadata: node-fetch: "npm:^2.0.0" picomatch: "npm:^2.3.0" pkg-dir: "npm:^5.0.0" + prettier-fallback: "npm:prettier@^3" + prettier-v2: "npm:prettier@^2" + prettier-v3: "npm:prettier@^3" pretty-hrtime: "npm:^1.0.3" resolve-from: "npm:^5.0.0" semver: "npm:^7.3.7" @@ -5550,6 +5554,11 @@ __metadata: type-fest: "npm:~2.19" typescript: "npm:^5.3.2" util: "npm:^0.12.4" + peerDependencies: + prettier: ^2 || ^3 + peerDependenciesMeta: + prettier: + optional: true languageName: unknown linkType: soft @@ -7783,6 +7792,13 @@ __metadata: languageName: node linkType: hard +"@types/prettier-v2@npm:@types/prettier@^2": + version: 2.7.3 + resolution: "@types/prettier@npm:2.7.3" + checksum: 10c0/0960b5c1115bb25e979009d0b44c42cf3d792accf24085e4bfce15aef5794ea042e04e70c2139a2c3387f781f18c89b5706f000ddb089e9a4a2ccb7536a2c5f0 + languageName: node + linkType: hard + "@types/prettier@npm:^3.0.0": version: 3.0.0 resolution: "@types/prettier@npm:3.0.0" @@ -22889,6 +22905,15 @@ __metadata: languageName: node linkType: hard +"prettier-fallback@npm:prettier@^3, prettier-v3@npm:prettier@^3": + version: 3.2.5 + resolution: "prettier@npm:3.2.5" + bin: + prettier: bin/prettier.cjs + checksum: 10c0/ea327f37a7d46f2324a34ad35292af2ad4c4c3c3355da07313339d7e554320f66f65f91e856add8530157a733c6c4a897dc41b577056be5c24c40f739f5ee8c6 + languageName: node + linkType: hard + "prettier-linter-helpers@npm:^1.0.0": version: 1.0.0 resolution: "prettier-linter-helpers@npm:1.0.0" @@ -22898,6 +22923,15 @@ __metadata: languageName: node linkType: hard +"prettier-v2@npm:prettier@^2": + version: 2.8.8 + resolution: "prettier@npm:2.8.8" + bin: + prettier: bin-prettier.js + checksum: 10c0/463ea8f9a0946cd5b828d8cf27bd8b567345cf02f56562d5ecde198b91f47a76b7ac9eae0facd247ace70e927143af6135e8cf411986b8cb8478784a4d6d724a + languageName: node + linkType: hard + "prettier@npm:*, prettier@npm:^3.1.1": version: 3.1.1 resolution: "prettier@npm:3.1.1" From 5cadefcfceee0d79d0e7d082e56d735a43b36e2d Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 11 Apr 2024 11:20:18 +0200 Subject: [PATCH 104/380] add tests to verify the update works in a variation of scenarios --- .../src/utils/save-from-controls/getDiff.ts | 37 +- .../mocks/csf-variances.stories.tsx | 61 ++++ .../mocks/data-variances.stories.tsx | 45 +++ .../mocks/export-variances.stories.tsx | 37 ++ .../mocks/satisfies.stories.tsx | 68 ---- .../mocks/typescript-constructs.stories.tsx | 41 +++ .../update-args-in-csf-file.test.ts | 330 ++++++++++++++++-- .../update-args-in-csf-file.ts | 50 ++- .../{astify.ts => valueToAST.ts} | 20 +- 9 files changed, 561 insertions(+), 128 deletions(-) create mode 100644 code/lib/core-server/src/utils/save-from-controls/mocks/csf-variances.stories.tsx create mode 100644 code/lib/core-server/src/utils/save-from-controls/mocks/data-variances.stories.tsx create mode 100644 code/lib/core-server/src/utils/save-from-controls/mocks/export-variances.stories.tsx delete mode 100644 code/lib/core-server/src/utils/save-from-controls/mocks/satisfies.stories.tsx create mode 100644 code/lib/core-server/src/utils/save-from-controls/mocks/typescript-constructs.stories.tsx rename code/lib/core-server/src/utils/save-from-controls/{astify.ts => valueToAST.ts} (54%) diff --git a/code/lib/core-server/src/utils/save-from-controls/getDiff.ts b/code/lib/core-server/src/utils/save-from-controls/getDiff.ts index 95cc88b91d57..f243fdb522fe 100644 --- a/code/lib/core-server/src/utils/save-from-controls/getDiff.ts +++ b/code/lib/core-server/src/utils/save-from-controls/getDiff.ts @@ -20,6 +20,8 @@ export function getDiff(before: string, after: string): string { const context = 4; return diffLines(before, after, { newlineIsToken: true }) .map((r, index, l) => { + const lines = r.value.split('\n'); + if (r.removed) { return r.value .split('\n') @@ -34,32 +36,31 @@ export function getDiff(before: string, after: string): string { } if (index === 0) { - return ( - `...\n` + - r.value - .split('\n') - .slice(0 - context) - .map((v) => ` ${v}`) - .join('\n') - ); + const sliced = lines.slice(0 - context); + + if (sliced.length !== lines.length) { + sliced.unshift('...'); + } + return sliced.map((v) => ` ${v}`).join('\n'); } if (index === l.length - 1) { - return ( - r.value - .split('\n') - .slice(0, context) - .map((v) => ` ${v}`) - .join('\n') + `\n...` - ); + const sliced = lines.slice(0, context); + + if (sliced.length !== lines.length) { + sliced.push('...'); + } + return sliced.map((v) => ` ${v}`).join('\n'); } - const all = r.value.split('\n').map((v) => ` ${v}`); + if (lines.length <= context * 2 + 1) { + return lines.map((v) => ` ${v}`).join('\n'); + } return [ // - ...all.slice(0, context), + ...lines.slice(0, context).map((v) => ` ${v}`), '...', - ...all.slice(0 - context), + ...lines.slice(0 - context).map((v) => ` ${v}`), ].join('\n'); }) .join('\n'); diff --git a/code/lib/core-server/src/utils/save-from-controls/mocks/csf-variances.stories.tsx b/code/lib/core-server/src/utils/save-from-controls/mocks/csf-variances.stories.tsx new file mode 100644 index 000000000000..1d7f81398e6a --- /dev/null +++ b/code/lib/core-server/src/utils/save-from-controls/mocks/csf-variances.stories.tsx @@ -0,0 +1,61 @@ +import React from 'react'; +import type { FC } from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; + +export default { + title: 'MyComponent', + args: { + initial: 'foo', + }, +} satisfies Meta; + +type Story = StoryObj; + +// dummy component +const MyComponent: FC<{ absolute: boolean; bordered: boolean; initial: string }> = (props) => ( + 
{JSON.stringify(props)}
+); + +export const Empty = {} satisfies Story; + +export const EmptyWithComment = { + // this is a useless comment, to test that it is preserved +} satisfies Story; + +export const OnlyArgs = { + args: { + absolute: true, + }, +} satisfies Story; + +export const RenderNoArgs = { + render: (args) => , +} satisfies Story; + +export const RenderArgs = { + args: { + absolute: true, + }, + render: (args) => , +} satisfies Story; + +export const RenderExistingArgs = { + args: { + absolute: true, + bordered: true, + initial: 'test2', + }, + render: (args) => , +} satisfies Story; + +// The order of both the properties of the story and the order or args should be preserved +export const OrderedArgs = { + args: { + bordered: true, + initial: 'test2', + absolute: true, + }, + render: (args) => , +} satisfies Story; + +export const CSF2 = () => ; diff --git a/code/lib/core-server/src/utils/save-from-controls/mocks/data-variances.stories.tsx b/code/lib/core-server/src/utils/save-from-controls/mocks/data-variances.stories.tsx new file mode 100644 index 000000000000..ea2f79bdcc3b --- /dev/null +++ b/code/lib/core-server/src/utils/save-from-controls/mocks/data-variances.stories.tsx @@ -0,0 +1,45 @@ +import React from 'react'; +import type { FC } from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; + +export default { + title: 'MyComponent', + args: { + myString: 'foo', + }, +} satisfies Meta; + +type Story = StoryObj; + +// dummy component +const MyComponent: FC<{ + myUndefined: undefined; + myNull: null; + myBoolean: boolean; + myString: string; + myNumber: number; + myArray: string[]; + myArrayDeep: string[][]; + myObject: object; + myFunction: () => void; +}> = (props) => 
{JSON.stringify(props)}
; + +export const All = { + args: { + myArray: ['foo', 'bar'], + myArrayDeep: [['foo'], ['bar']], + myBoolean: true, + myFunction: () => {}, + myNull: null, + myNumber: 42, + myObject: { + foo: 'bar', + }, + myString: 'foo', + myUndefined: undefined, + }, +} satisfies Story; + +export const None = { + args: {}, +} satisfies Story; diff --git a/code/lib/core-server/src/utils/save-from-controls/mocks/export-variances.stories.tsx b/code/lib/core-server/src/utils/save-from-controls/mocks/export-variances.stories.tsx new file mode 100644 index 000000000000..7c853f484468 --- /dev/null +++ b/code/lib/core-server/src/utils/save-from-controls/mocks/export-variances.stories.tsx @@ -0,0 +1,37 @@ +import React from 'react'; +import type { FC } from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; + +export default { + title: 'MyComponent', + args: { + initial: 'foo', + }, +} satisfies Meta; + +type Story = StoryObj; + +// dummy component +const MyComponent: FC<{ absolute: boolean; bordered: boolean; initial: string }> = (props) => ( + 
{JSON.stringify(props)}
+); + +export const DirectExport: Story = { + args: { + initial: 'bar', + }, +}; + +const BlockExport: Story = { + args: { + initial: 'bar', + }, +}; + +const NotYetRenamedExport: Story = { + args: { + initial: 'bar', + }, +}; + +export { BlockExport, NotYetRenamedExport as RenamedExport }; diff --git a/code/lib/core-server/src/utils/save-from-controls/mocks/satisfies.stories.tsx b/code/lib/core-server/src/utils/save-from-controls/mocks/satisfies.stories.tsx deleted file mode 100644 index 2ad65206b43b..000000000000 --- a/code/lib/core-server/src/utils/save-from-controls/mocks/satisfies.stories.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import React from 'react'; -import type { Meta, StoryObj } from '@storybook/react'; -import { TabsState } from '@storybook/components/src/components/tabs/tabs'; - -export default { - title: 'Tabs', - args: { - menuName: 'Addons', - }, -} satisfies Meta; - -type Story = StoryObj; - -export const RenderNoArgs = { - render: (args) => ( - -
- { - (({ active, selected }: { active: boolean; selected: string }) => - active ?
{selected} is selected
: null) as any - } -
-
-
test2 is always active (but visually hidden)
-
- - ), -} satisfies Story; - -export const RenderArgs = { - args: { - absolute: true, - }, - render: (args) => ( - -
- { - (({ active, selected }: { active: boolean; selected: string }) => - active ?
{selected} is selected
: null) as any - } -
-
-
test2 is always active (but visually hidden)
-
- - ), -} satisfies Story; - -export const RenderExistingArgs = { - args: { - absolute: true, - bordered: true, - initial: 'test2', - }, - render: (args) => ( - -
- { - (({ active, selected }: { active: boolean; selected: string }) => - active ?
{selected} is selected
: null) as any - } -
-
-
test2 is always active (but visually hidden)
-
- - ), -} satisfies Story; diff --git a/code/lib/core-server/src/utils/save-from-controls/mocks/typescript-constructs.stories.tsx b/code/lib/core-server/src/utils/save-from-controls/mocks/typescript-constructs.stories.tsx new file mode 100644 index 000000000000..d44c95c446be --- /dev/null +++ b/code/lib/core-server/src/utils/save-from-controls/mocks/typescript-constructs.stories.tsx @@ -0,0 +1,41 @@ +import React from 'react'; +import type { FC } from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; + +export default { + title: 'MyComponent', + args: { + initial: 'foo', + }, +} satisfies Meta; + +type Story = StoryObj; + +// dummy component +const MyComponent: FC<{ absolute: boolean; bordered: boolean; initial: string }> = (props) => ( + 
{JSON.stringify(props)}
+); + +export const Cast: Story = { + args: { + initial: 'bar', + }, +}; + +export const As = { + args: { + initial: 'bar', + }, +} as Story; + +export const Satisfies = { + args: { + initial: 'bar', + }, +} satisfies Story; + +export const None = { + args: { + initial: 'bar', + }, +}; diff --git a/code/lib/core-server/src/utils/save-from-controls/update-args-in-csf-file.test.ts b/code/lib/core-server/src/utils/save-from-controls/update-args-in-csf-file.test.ts index db5e5d06baf9..23b3411cd63f 100644 --- a/code/lib/core-server/src/utils/save-from-controls/update-args-in-csf-file.test.ts +++ b/code/lib/core-server/src/utils/save-from-controls/update-args-in-csf-file.test.ts @@ -5,20 +5,26 @@ import { readCsf, printCsf } from '@storybook/csf-tools'; import { updateArgsInCsfFile } from './update-args-in-csf-file'; import { readFile } from 'fs/promises'; import { join } from 'path'; +import { format } from 'prettier'; import { getDiff } from './getDiff'; const makeTitle = (userTitle: string) => userTitle; const FILES = { - satisfies: join(__dirname, 'mocks/satisfies.stories.tsx'), + typescriptConstructs: join(__dirname, 'mocks/typescript-constructs.stories.tsx'), + csfVariances: join(__dirname, 'mocks/csf-variances.stories.tsx'), + exportVariances: join(__dirname, 'mocks/export-variances.stories.tsx'), + dataVariances: join(__dirname, 'mocks/data-variances.stories.tsx'), }; describe('success', () => { - test('TS satisfies', async () => { + test('Typescript Constructs', async () => { const newArgs = { bordered: true, initial: 'test1' }; - const before = await readFile(FILES.satisfies, 'utf-8'); - const CSF = await readCsf(FILES.satisfies, { makeTitle }); + const before = await format(await readFile(FILES.typescriptConstructs, 'utf-8'), { + parser: 'typescript', + }); + const CSF = await readCsf(FILES.typescriptConstructs, { makeTitle }); const parsed = CSF.parse(); const names = Object.keys(parsed._stories); @@ -28,63 +34,323 @@ describe('success', () => { updateArgsInCsfFile(node, newArgs); }); - const after = printCsf(parsed); + const after = await format(printCsf(parsed).code, { + parser: 'typescript', + }); // check if the code was updated at all - expect(after.code).not.toBe(before); + expect(after).not.toBe(before); // check if the code was updated correctly - expect(getDiff(before, after.code)).toMatchInlineSnapshot(` - "... - type Story = StoryObj; + expect(getDiff(before, after)).toMatchInlineSnapshot(` + " ... + + export const Cast: Story = { + args: { + + - initial: "bar", + + initial: "test1", + + + + bordered: true, + + + }, + }; + + export const As = { + args: { + + - initial: "bar", + + initial: "test1", + + + + bordered: true, + + + }, + } as Story; + + export const Satisfies = { + args: { + + - initial: "bar", + + initial: "test1", + + + + bordered: true, + + + }, + } satisfies Story; + + export const None = { + args: { + + - initial: "bar", + + initial: "test1", + + + + bordered: true, + + + }, + }; + " + `); + }); + test('CSF Variances', async () => { + const newArgs = { bordered: true, initial: 'test1' }; + + const before = await format(await readFile(FILES.csfVariances, 'utf-8'), { + parser: 'typescript', + }); + const CSF = await readCsf(FILES.csfVariances, { makeTitle }); + + const parsed = CSF.parse(); + const names = Object.keys(parsed._stories); + const nodes = names.map((name) => CSF.getStoryExport(name)); + + nodes.forEach((node) => { + updateArgsInCsfFile(node, newArgs); + }); + + const after = await format(printCsf(parsed).code, { + parser: 'typescript', + }); + + // check if the code was updated at all + expect(after).not.toBe(before); + + // check if the code was updated correctly + // TODO, the comment is not preserved!!! + expect(getDiff(before, after)).toMatchInlineSnapshot(` + " ... + initial: string; + }> = (props) => 
{JSON.stringify(props)}
; + + + - export const Empty = {} satisfies Story; + + export const Empty = { - export const RenderNoArgs = { + args: { + + + bordered: true, - + initial: "test1" + + initial: "test1", + }, + + } satisfies Story; + + - render: (args) => ( - -
- { - ... -
test2 is always active (but visually hidden)
-
- + export const EmptyWithComment = { + + - // this is a useless comment, to test that it is preserved + + args: { - - ), - + ) + + bordered: true, + + initial: "test1", + + }, + + + } satisfies Story; + + export const OnlyArgs = { + args: { + absolute: true, + + + bordered: true, + + initial: "test1", + + + }, + } satisfies Story; + + export const RenderNoArgs = { + + + args: { + + bordered: true, + + initial: "test1", + + }, + + + + + render: (args) => , } satisfies Story; - export const RenderArgs = { - ... export const RenderArgs = { args: { absolute: true, + bordered: true, - + initial: "test1" + + initial: "test1", + }, - render: (args) => ( - -
- ... + render: (args) => , + } satisfies Story; + + export const RenderExistingArgs = { args: { absolute: true, bordered: true, - - initial: 'test2', + - initial: "test2", + + initial: "test1", + + }, + render: (args) => , + } satisfies Story; + ... + export const OrderedArgs = { + args: { + bordered: true, + + - initial: "test2", + + initial: "test1", + + absolute: true, + }, + render: (args) => , + ..." + `); + }); + test('Export Variances', async () => { + const newArgs = { bordered: true, initial: 'test1' }; + + const before = await format(await readFile(FILES.exportVariances, 'utf-8'), { + parser: 'typescript', + }); + const CSF = await readCsf(FILES.exportVariances, { makeTitle }); + + const parsed = CSF.parse(); + const names = Object.keys(parsed._stories); + const nodes = names.map((name) => CSF.getStoryExport(name)); + + nodes.forEach((node) => { + if (node === undefined) { + return; + } + updateArgsInCsfFile(node, newArgs); + }); + + const after = await format(printCsf(parsed).code, { + parser: 'typescript', + }); + + // check if the code was updated at all + expect(after).not.toBe(before); + + // check if the code was updated correctly + // TODO this is incomplete due to no support for export variances in csf-tools + expect(getDiff(before, after)).toMatchInlineSnapshot(` + " ... + + export const DirectExport: Story = { + args: { + + - initial: "bar", + initial: "test1", + + + bordered: true, + + + }, + }; + + const BlockExport: Story = { + ..." + `); + }); + test('Data Variances', async () => { + const newArgs = { + myArray: ['FOO', 'BAR'], + myArrayDeep: [['FOO'], ['BAR']], + myBoolean: true, + myFunction: () => {}, + myNull: null, + myNumber: 41, + myObject: { + FOO: 'BAR', + }, + myString: 'FOO', + myUndefined: undefined, + }; + + const before = await format(await readFile(FILES.dataVariances, 'utf-8'), { + parser: 'typescript', + }); + const CSF = await readCsf(FILES.dataVariances, { makeTitle }); + + const parsed = CSF.parse(); + const names = Object.keys(parsed._stories); + const nodes = names.map((name) => CSF.getStoryExport(name)); + + nodes.forEach((node) => { + if (node === undefined) { + return; + } + updateArgsInCsfFile(node, newArgs); + }); + + const after = await format(printCsf(parsed).code, { + parser: 'typescript', + }); + + // check if the code was updated at all + expect(after).not.toBe(before); + + // check if the code was updated correctly + expect(getDiff(before, after)).toMatchInlineSnapshot(` + " ... + + export const All = { + args: { + + - myArray: ["foo", "bar"], + + myArray: ["FOO", "BAR"], + + + - myArrayDeep: [["foo"], ["bar"]], + + myArrayDeep: [["FOO"], ["BAR"]], + + myBoolean: true, + myFunction: () => {}, + myNull: null, + + - myNumber: 42, + + myNumber: 41, + + myObject: { + + - foo: "bar", + + FOO: "BAR", + + }, + + - myString: "foo", + + myString: "FOO", + + myUndefined: undefined, }, - render: (args) => ( - - ..." + } satisfies Story; + + export const None = { + + - args: {}, + + args: { + + + + myArray: ["FOO", "BAR"], + + myArrayDeep: [["FOO"], ["BAR"]], + + myBoolean: true, + + myFunction: () => {}, + + myNull: null, + + myNumber: 41, + + + + myObject: { + + FOO: "BAR", + + }, + + + + myString: "FOO", + + myUndefined: undefined, + + }, + + + } satisfies Story; + " `); }); }); diff --git a/code/lib/core-server/src/utils/save-from-controls/update-args-in-csf-file.ts b/code/lib/core-server/src/utils/save-from-controls/update-args-in-csf-file.ts index 2b31b21745f2..b3737893625b 100644 --- a/code/lib/core-server/src/utils/save-from-controls/update-args-in-csf-file.ts +++ b/code/lib/core-server/src/utils/save-from-controls/update-args-in-csf-file.ts @@ -1,15 +1,60 @@ import * as t from '@babel/types'; import * as traverse from '@babel/traverse'; -import { astify } from './astify'; +import { valueToAST } from './valueToAST'; export const updateArgsInCsfFile = async (node: t.Node, input: Record) => { let found = false; const args = Object.fromEntries( Object.entries(input).map(([k, v]) => { - return [k, astify(v)]; + return [k, valueToAST(v)]; }) ); + if (t.isObjectExpression(node)) { + const properties = node.properties; + const argsProperty = properties.find((property) => { + if (t.isObjectProperty(property)) { + const key = property.key; + return t.isIdentifier(key) && key.name === 'args'; + } + return false; + }); + + if (argsProperty) { + if (t.isObjectProperty(argsProperty)) { + const a = argsProperty.value; + if (t.isObjectExpression(a)) { + a.properties.forEach((p) => { + if (t.isObjectProperty(p)) { + const key = p.key; + if (t.isIdentifier(key) && key.name in args) { + p.value = args[key.name]; + delete args[key.name]; + } + } + }); + + const remainder = Object.entries(args); + if (Object.keys(args).length) { + remainder.forEach(([key, value]) => { + a.properties.push(t.objectProperty(t.identifier(key), value)); + }); + } + } + } + } else { + properties.unshift( + t.objectProperty( + t.identifier('args'), + t.objectExpression( + Object.entries(args).map(([key, value]) => t.objectProperty(t.identifier(key), value)) + ) + ) + ); + } + return; + } + traverse.default(node, { ObjectExpression(path) { if (found) { @@ -28,7 +73,6 @@ export const updateArgsInCsfFile = async (node: t.Node, input: Recordvalue>entries when found, replace the value with the new value const a = argsProperty.get('value'); if (a.isObjectExpression()) { a.traverse({ diff --git a/code/lib/core-server/src/utils/save-from-controls/astify.ts b/code/lib/core-server/src/utils/save-from-controls/valueToAST.ts similarity index 54% rename from code/lib/core-server/src/utils/save-from-controls/astify.ts rename to code/lib/core-server/src/utils/save-from-controls/valueToAST.ts index 95378a732421..f09dd7b65a64 100644 --- a/code/lib/core-server/src/utils/save-from-controls/astify.ts +++ b/code/lib/core-server/src/utils/save-from-controls/valueToAST.ts @@ -1,8 +1,7 @@ import * as t from '@babel/types'; import * as babylon from '@babel/parser'; -import traverse from '@babel/traverse'; -export function astify(literal: T) { +export function valueToAST(literal: T): any { if (literal === null) { return t.nullLiteral(); } @@ -12,7 +11,10 @@ export function astify(literal: T) { allowReturnOutsideFunction: true, allowSuperOutsideMethod: true, }); - return traverse.removeProperties(ast); + + // @ts-expect-error (it's the contents of the function, it's an expression, trust me) + return ast.program.body[0]?.expression; + case 'number': return t.numericLiteral(literal); case 'string': @@ -20,18 +22,22 @@ export function astify(literal: T) { case 'boolean': return t.booleanLiteral(literal); case 'undefined': - return t.unaryExpression('void', t.numericLiteral(0), true); + return t.identifier('undefined'); default: if (Array.isArray(literal)) { - return t.arrayExpression(literal.map(astify)); + return t.arrayExpression(literal.map(valueToAST)); } return t.objectExpression( Object.keys(literal) .filter((k) => { - return typeof literal[k] !== 'undefined'; + // @ts-expect-error (it's a completely unknown object) + const value = literal[k]; + return typeof value !== 'undefined'; }) .map((k) => { - return t.objectProperty(t.stringLiteral(k), astify(literal[k])); + // @ts-expect-error (it's a completely unknown object) + const value = literal[k]; + return t.objectProperty(t.stringLiteral(k), valueToAST(value)); }) ); } From 3b89e31e1faea03ca390068540920d1d04180518 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 11 Apr 2024 11:20:30 +0200 Subject: [PATCH 105/380] Remove obsolete line --- code/lib/core-common/src/utils/formatter.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/code/lib/core-common/src/utils/formatter.ts b/code/lib/core-common/src/utils/formatter.ts index 91401de0fb2d..6f0033e668a4 100644 --- a/code/lib/core-common/src/utils/formatter.ts +++ b/code/lib/core-common/src/utils/formatter.ts @@ -11,7 +11,6 @@ const getPrettier = async (): Promise< | { instance: undefined; version: null } | { instance: typeof import('prettier-v2'); version: 2 } | { instance: typeof import('prettier-v3'); version: 3 } - | { instance: typeof import('prettier-v3'); version: 3 } > => { if (!prettierInstance) { try { From 8bb9cf83c71f93567b917361bbf915eb34abd7d7 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Thu, 11 Apr 2024 11:33:38 +0200 Subject: [PATCH 106/380] fix Search.story typings --- .../ui/manager/src/components/sidebar/SearchResults.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/ui/manager/src/components/sidebar/SearchResults.stories.tsx b/code/ui/manager/src/components/sidebar/SearchResults.stories.tsx index 6e464e9122be..05b64669bbc2 100644 --- a/code/ui/manager/src/components/sidebar/SearchResults.stories.tsx +++ b/code/ui/manager/src/components/sidebar/SearchResults.stories.tsx @@ -63,7 +63,7 @@ const recents = stories .map((story) => ({ item: story, matches: [], score: 0 })); // We need this to prevent react key warnings -const passKey = (props: any = {}) => ({ key: props.key }); +const passKey: any = (props = { key: '' }) => ({ key: props.key }); export const searching = { query: 'query', From 6e9a4932900d39f424efbe7a54b292b4a4c221d1 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 11 Apr 2024 11:52:16 +0200 Subject: [PATCH 107/380] improve diff --- .../src/utils/save-from-controls/getDiff.ts | 2 +- .../mocks/csf-variances.stories.tsx | 15 +++++ .../update-args-in-csf-file.test.ts | 67 +++++++++++-------- 3 files changed, 54 insertions(+), 30 deletions(-) diff --git a/code/lib/core-server/src/utils/save-from-controls/getDiff.ts b/code/lib/core-server/src/utils/save-from-controls/getDiff.ts index f243fdb522fe..df3462c9ea08 100644 --- a/code/lib/core-server/src/utils/save-from-controls/getDiff.ts +++ b/code/lib/core-server/src/utils/save-from-controls/getDiff.ts @@ -18,7 +18,7 @@ import { diffLines } from 'diff'; */ export function getDiff(before: string, after: string): string { const context = 4; - return diffLines(before, after, { newlineIsToken: true }) + return diffLines(before, after, {}) .map((r, index, l) => { const lines = r.value.split('\n'); diff --git a/code/lib/core-server/src/utils/save-from-controls/mocks/csf-variances.stories.tsx b/code/lib/core-server/src/utils/save-from-controls/mocks/csf-variances.stories.tsx index 1d7f81398e6a..e8eedcd3bccc 100644 --- a/code/lib/core-server/src/utils/save-from-controls/mocks/csf-variances.stories.tsx +++ b/code/lib/core-server/src/utils/save-from-controls/mocks/csf-variances.stories.tsx @@ -58,4 +58,19 @@ export const OrderedArgs = { render: (args) => , } satisfies Story; +// The order of both the properties of the story and the order or args should be preserved +export const HasPlayFunction = { + args: { + bordered: true, + initial: 'test2', + absolute: true, + }, + play: async ({ canvasElement }) => { + console.log('play'); + + canvasElement.style.backgroundColor = 'red'; + }, +} satisfies Story; + +// editing this should fail export const CSF2 = () => ; diff --git a/code/lib/core-server/src/utils/save-from-controls/update-args-in-csf-file.test.ts b/code/lib/core-server/src/utils/save-from-controls/update-args-in-csf-file.test.ts index 23b3411cd63f..bcaee0576e92 100644 --- a/code/lib/core-server/src/utils/save-from-controls/update-args-in-csf-file.test.ts +++ b/code/lib/core-server/src/utils/save-from-controls/update-args-in-csf-file.test.ts @@ -49,9 +49,8 @@ describe('success', () => { args: { - initial: "bar", + - + initial: "test1", - - + bordered: true, + }, @@ -61,9 +60,8 @@ describe('success', () => { args: { - initial: "bar", + - + initial: "test1", - - + bordered: true, + }, @@ -73,9 +71,8 @@ describe('success', () => { args: { - initial: "bar", + - + initial: "test1", - - + bordered: true, + }, @@ -85,9 +82,8 @@ describe('success', () => { args: { - initial: "bar", + - + initial: "test1", - - + bordered: true, + }, @@ -127,24 +123,20 @@ describe('success', () => { - export const Empty = {} satisfies Story; + - + export const Empty = { - - + args: { - - + bordered: true, + initial: "test1", + }, + } satisfies Story; + - + + export const EmptyWithComment = { - // this is a useless comment, to test that it is preserved + - + args: { - - + bordered: true, + initial: "test1", + }, @@ -189,22 +181,39 @@ describe('success', () => { bordered: true, - initial: "test2", + - + initial: "test1", - + + }, render: (args) => , } satisfies Story; - ... + + // The order of both the properties of the story and the order or args should be preserved export const OrderedArgs = { args: { bordered: true, - initial: "test2", + - + initial: "test1", - + + absolute: true, }, render: (args) => , + } satisfies Story; + ... + export const HasPlayFunction = { + args: { + bordered: true, + + - initial: "test2", + - + + initial: "test1", + + + absolute: true, + }, + play: async ({ canvasElement }) => { + console.log("play"); ..." `); }); @@ -243,9 +252,8 @@ describe('success', () => { args: { - initial: "bar", + - + initial: "test1", - - + bordered: true, + }, @@ -301,29 +309,31 @@ describe('success', () => { args: { - myArray: ["foo", "bar"], - + myArray: ["FOO", "BAR"], - - - myArrayDeep: [["foo"], ["bar"]], + - + + myArray: ["FOO", "BAR"], + myArrayDeep: [["FOO"], ["BAR"]], - + + myBoolean: true, myFunction: () => {}, myNull: null, - myNumber: 42, + - + myNumber: 41, - + + myObject: { - foo: "bar", + - + FOO: "BAR", - + + }, - myString: "foo", + - + myString: "FOO", - + + myUndefined: undefined, }, } satisfies Story; @@ -331,9 +341,8 @@ describe('success', () => { export const None = { - args: {}, + - + args: { - - + myArray: ["FOO", "BAR"], + myArrayDeep: [["FOO"], ["BAR"]], + myBoolean: true, From 1cca11e06861b5ec394efd229b5dd68fbdcb7c83 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Thu, 11 Apr 2024 12:21:18 +0200 Subject: [PATCH 108/380] fix tests to match new rerender pipeline --- .../modules/preview-web/PreviewWeb.test.ts | 93 ++++++++----------- 1 file changed, 38 insertions(+), 55 deletions(-) diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts index aac800d6ac52..23329caf5d29 100644 --- a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts @@ -907,64 +907,74 @@ describe('PreviewWeb', () => { }); describe('while story is still rendering', () => { - it('runs loaders again', async () => { + it('runs loaders again after renderToCanvas is done', async () => { + // Arrange - set up a gate to control when the loaders run const [loadersRanGate, openLoadersRanGate] = createGate(); const [blockLoadersGate, openBlockLoadersGate] = createGate(); document.location.search = '?id=component-one--a'; - componentOneExports.default.loaders[0].mockImplementationOnce(async () => { + componentOneExports.default.loaders[0].mockImplementationOnce(async (input) => { openLoadersRanGate(); return blockLoadersGate; }); + // Act - render the first time await new PreviewWeb(importFn, getProjectAnnotations).ready(); await loadersRanGate; + // Assert - loader to be called the first time + expect(componentOneExports.default.loaders[0]).toHaveBeenCalledOnce(); expect(componentOneExports.default.loaders[0]).toHaveBeenCalledWith( expect.objectContaining({ args: { foo: 'a', one: 'mapped-1' }, }) ); - componentOneExports.default.loaders[0].mockClear(); + // Act - update the args (while loader is still running) emitter.emit(UPDATE_STORY_ARGS, { storyId: 'component-one--a', updatedArgs: { new: 'arg' }, }); - await waitForRender(); - expect(componentOneExports.default.loaders[0]).toHaveBeenCalledWith( - expect.objectContaining({ - args: { foo: 'a', new: 'arg', one: 'mapped-1' }, - }) - ); + // Arrange - open the gate to let the loader finish and wait for render + openBlockLoadersGate({ l: 8 }); + await waitForRender(); - // Story gets rendered with updated args - expect(projectAnnotations.renderToCanvas).toHaveBeenCalledTimes(1); + // Assert - renderToCanvas to be called the first time with initial args + expect(projectAnnotations.renderToCanvas).toHaveBeenCalledOnce(); expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith( expect.objectContaining({ - forceRemount: true, // Wasn't yet rendered so we need to force remount + forceRemount: true, storyContext: expect.objectContaining({ - loaded: { l: 7 }, // This is the value returned by the *second* loader call + loaded: { l: 8 }, // This is the value returned by the *first* loader call args: { foo: 'a', new: 'arg', one: 'mapped-1' }, }), }), 'story-element' ); + // Assert - loaders are not run again yet + expect(componentOneExports.default.loaders[0]).toHaveBeenCalledOnce(); - // Now let the first loader call resolve + // Arrange - wait for loading and rendering to finish a second time mockChannel.emit.mockClear(); - projectAnnotations.renderToCanvas.mockClear(); - openBlockLoadersGate({ l: 8 }); await waitForRender(); + // Assert - loader is called a second time with updated args + await vi.waitFor(() => { + expect(projectAnnotations.renderToCanvas).toHaveBeenCalledTimes(2); + expect(componentOneExports.default.loaders[0]).toHaveBeenCalledWith( + expect.objectContaining({ + args: { foo: 'a', new: 'arg', one: 'mapped-1' }, + }) + ); + }); - // Now the first call comes through, but picks up the new args - // Note this isn't a particularly realistic case (the second loader being quicker than the first) - expect(projectAnnotations.renderToCanvas).toHaveBeenCalledTimes(1); + // Assert - renderToCanvas is called a second time with updated args + expect(projectAnnotations.renderToCanvas).toHaveBeenCalledTimes(2); expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith( expect.objectContaining({ + forceRemount: false, storyContext: expect.objectContaining({ - loaded: { l: 8 }, + loaded: { l: 7 }, // This is the value returned by the *second* loader call args: { foo: 'a', new: 'arg', one: 'mapped-1' }, }), }), @@ -972,7 +982,7 @@ describe('PreviewWeb', () => { ); }); - it('renders a second time if renderToCanvas is running', async () => { + it('renders a second time after the already running renderToCanvas is done', async () => { const [gate, openGate] = createGate(); document.location.search = '?id=component-one--a'; @@ -986,11 +996,9 @@ describe('PreviewWeb', () => { updatedArgs: { new: 'arg' }, }); - // Now let the renderToCanvas call resolve + // Now let the first renderToCanvas call resolve openGate(); - await waitForRender(); - - expect(projectAnnotations.renderToCanvas).toHaveBeenCalledTimes(2); + expect(projectAnnotations.renderToCanvas).toHaveBeenCalledTimes(1); expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith( expect.objectContaining({ forceRemount: true, @@ -1001,39 +1009,14 @@ describe('PreviewWeb', () => { }), 'story-element' ); - expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith( - expect.objectContaining({ - forceRemount: false, - storyContext: expect.objectContaining({ - loaded: { l: 7 }, - args: { foo: 'a', new: 'arg', one: 'mapped-1' }, - }), - }), - 'story-element' - ); - }); - it('works if it is called directly from inside non async renderToCanvas', async () => { - document.location.search = '?id=component-one--a'; - projectAnnotations.renderToCanvas.mockImplementation(() => { - emitter.emit(UPDATE_STORY_ARGS, { - storyId: 'component-one--a', - updatedArgs: { new: 'arg' }, - }); - }); - await createAndRenderPreview(); + // Wait for the second render to finish + mockChannel.emit.mockClear(); + await waitForRender(); + await waitForRenderPhase('rendering'); + // Expect the second render to have the updated args expect(projectAnnotations.renderToCanvas).toHaveBeenCalledTimes(2); - expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith( - expect.objectContaining({ - forceRemount: true, - storyContext: expect.objectContaining({ - loaded: { l: 7 }, - args: { foo: 'a', one: 'mapped-1' }, - }), - }), - 'story-element' - ); expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith( expect.objectContaining({ forceRemount: false, From be1482ec676b47b63172316cc30ee349ebc1a683 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Thu, 11 Apr 2024 13:24:28 +0200 Subject: [PATCH 109/380] make SearchResults typings more correst --- .../manager/src/components/sidebar/SearchResults.tsx | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/code/ui/manager/src/components/sidebar/SearchResults.tsx b/code/ui/manager/src/components/sidebar/SearchResults.tsx index faead314e0e8..db6819a1c288 100644 --- a/code/ui/manager/src/components/sidebar/SearchResults.tsx +++ b/code/ui/manager/src/components/sidebar/SearchResults.tsx @@ -160,15 +160,13 @@ const Path = styled.div(({ theme }) => ({ const Result: FC< SearchResult & { - icon: string; isHighlighted: boolean; - onClick: MouseEventHandler; - } -> = React.memo(function Result({ item, matches, icon, onClick, ...props }) { - const click: MouseEventHandler = useCallback( + } & React.DetailedHTMLProps, HTMLLIElement> +> = React.memo(function Result({ item, matches, onClick, ...props }) { + const click: MouseEventHandler = useCallback( (event) => { event.preventDefault(); - onClick(event); + onClick?.(event); }, [onClick] ); @@ -260,7 +258,7 @@ export const SearchResults: FC<{ return () => document.removeEventListener('keydown', handleEscape); }, [closeMenu, enableShortcuts, isLoading]); - const mouseOverHandler = useCallback((event: MouseEvent) => { + const mouseOverHandler: MouseEventHandler = useCallback((event) => { if (!api) { return; } From 458f6d888e14582e8c9577dc9c6aebecebbfb76b Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 11 Apr 2024 13:29:20 +0200 Subject: [PATCH 110/380] Export formatter --- code/lib/core-common/src/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/code/lib/core-common/src/index.ts b/code/lib/core-common/src/index.ts index a568fa70ba4a..d16c9118ae8b 100644 --- a/code/lib/core-common/src/index.ts +++ b/code/lib/core-common/src/index.ts @@ -37,6 +37,7 @@ export * from './utils/validate-config'; export * from './utils/validate-configuration-files'; export * from './utils/satisfies'; export * from './utils/strip-abs-node-modules-path'; +export * from './utils/formatter'; export * from './js-package-manager'; import versions from './versions'; From b789054a4adc63eae80ea9e702ebcb660bad6fea Mon Sep 17 00:00:00 2001 From: storybook-bot <32066757+storybook-bot@users.noreply.github.com> Date: Thu, 11 Apr 2024 11:29:48 +0000 Subject: [PATCH 111/380] Update CHANGELOG.md for v8.0.7 [skip ci] --- CHANGELOG.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 61ad5d1f5e1e..dc26d8f08de2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,10 @@ +## 8.0.7 + +- CLI: Add Visual Tests addon install auto-migration when upgrading to 8.0.x - [#26766](https://github.com/storybookjs/storybook/pull/26766), thanks @ndelangen! +- Next.js: Move sharp into optional deps - [#26787](https://github.com/storybookjs/storybook/pull/26787), thanks @shuta13! +- Vue: Disable controls for events, slots, and expose - [#26751](https://github.com/storybookjs/storybook/pull/26751), thanks @shilman! +- Webpack: Bump webpack-dev-middleware to patch high security issue - [#26655](https://github.com/storybookjs/storybook/pull/26655), thanks @jwilliams-met! + ## 8.0.6 - CLI: Add --config-dir flag to migrate command - [#26721](https://github.com/storybookjs/storybook/pull/26721), thanks @yannbf! From 8ff588c0795d0ca5b511c3b914bfcfc212481610 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Thu, 11 Apr 2024 14:10:27 +0200 Subject: [PATCH 112/380] Implement beforeEach cleanup callbacks --- code/addons/links/package.json | 2 +- code/lib/codemod/package.json | 2 +- code/lib/core-server/package.json | 2 +- code/lib/csf-tools/package.json | 2 +- code/lib/manager-api/package.json | 2 +- code/lib/preview-api/package.json | 2 +- .../modules/preview-web/render/StoryRender.ts | 37 ++++++++++++++----- .../src/modules/store/StoryStore.test.ts | 2 +- .../src/modules/store/StoryStore.ts | 15 +++++++- .../src/modules/store/csf/portable-stories.ts | 10 ++++- .../src/modules/store/csf/prepareStory.ts | 18 +++++---- code/lib/source-loader/package.json | 2 +- code/lib/types/package.json | 2 +- code/lib/types/src/modules/story.ts | 2 + code/package.json | 2 +- code/renderers/server/package.json | 2 +- code/ui/blocks/package.json | 2 +- code/ui/components/package.json | 2 +- code/yarn.lock | 32 ++++++++-------- 19 files changed, 92 insertions(+), 48 deletions(-) diff --git a/code/addons/links/package.json b/code/addons/links/package.json index 185e175e8b4d..048e4517d406 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -67,7 +67,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { - "@storybook/csf": "0.1.4--canary.82.941efd8.0", + "@storybook/csf": "0.1.4--canary.82.5e73744.0", "@storybook/global": "^5.0.0", "ts-dedent": "^2.0.0" }, diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index a211cb45bb62..7d278075a5ec 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -57,7 +57,7 @@ "@babel/core": "^7.23.2", "@babel/preset-env": "^7.23.2", "@babel/types": "^7.23.0", - "@storybook/csf": "0.1.4--canary.82.941efd8.0", + "@storybook/csf": "0.1.4--canary.82.5e73744.0", "@storybook/csf-tools": "workspace:*", "@storybook/node-logger": "workspace:*", "@storybook/types": "workspace:*", diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index 26d8f722de51..b0d66fa7a13b 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -62,7 +62,7 @@ "@storybook/channels": "workspace:*", "@storybook/core-common": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "0.1.4--canary.82.941efd8.0", + "@storybook/csf": "0.1.4--canary.82.5e73744.0", "@storybook/csf-tools": "workspace:*", "@storybook/docs-mdx": "3.0.0", "@storybook/global": "^5.0.0", diff --git a/code/lib/csf-tools/package.json b/code/lib/csf-tools/package.json index a32324b49302..b0f2a794d498 100644 --- a/code/lib/csf-tools/package.json +++ b/code/lib/csf-tools/package.json @@ -46,7 +46,7 @@ "@babel/parser": "^7.23.0", "@babel/traverse": "^7.23.2", "@babel/types": "^7.23.0", - "@storybook/csf": "0.1.4--canary.82.941efd8.0", + "@storybook/csf": "0.1.4--canary.82.5e73744.0", "@storybook/types": "workspace:*", "fs-extra": "^11.1.0", "recast": "^0.23.5", diff --git a/code/lib/manager-api/package.json b/code/lib/manager-api/package.json index 2040c41a358a..222964c69636 100644 --- a/code/lib/manager-api/package.json +++ b/code/lib/manager-api/package.json @@ -47,7 +47,7 @@ "@storybook/channels": "workspace:*", "@storybook/client-logger": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "0.1.4--canary.82.941efd8.0", + "@storybook/csf": "0.1.4--canary.82.5e73744.0", "@storybook/global": "^5.0.0", "@storybook/icons": "^1.2.5", "@storybook/router": "workspace:*", diff --git a/code/lib/preview-api/package.json b/code/lib/preview-api/package.json index d6be9113e22c..63457c32639b 100644 --- a/code/lib/preview-api/package.json +++ b/code/lib/preview-api/package.json @@ -47,7 +47,7 @@ "@storybook/channels": "workspace:*", "@storybook/client-logger": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "0.1.4--canary.82.941efd8.0", + "@storybook/csf": "0.1.4--canary.82.5e73744.0", "@storybook/global": "^5.0.0", "@storybook/types": "workspace:*", "@types/qs": "^6.9.5", diff --git a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.ts b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.ts index 72b554d38cd2..12ec070dc339 100644 --- a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.ts +++ b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.ts @@ -27,6 +27,7 @@ const { AbortController } = globalThis; export type RenderPhase = | 'preparing' | 'loading' + | 'beforeEach' | 'rendering' | 'playing' | 'played' @@ -101,7 +102,7 @@ export class StoryRender implements Render); + await this.store.cleanupStory(this.story as PreparedStory); throw PREPARE_ABORTED; } } @@ -120,7 +121,7 @@ export class StoryRender implements Render implements Render implements Render); }); - if (abortSignal.aborted) { - return; - } + if (abortSignal.aborted) return; const renderStoryContext: StoryContext = { ...loadedContext!, @@ -189,6 +198,14 @@ export class StoryRender implements Render { + const cleanupCallbacks = await applyBeforeEach(renderStoryContext); + this.store.addCleanupCallbacks(story, cleanupCallbacks); + }); + + if (abortSignal.aborted) return; + const renderContext: RenderContext = { componentId, title, @@ -290,8 +307,10 @@ export class StoryRender implements Render { const { hooks } = store.getStoryContext(story) as { hooks: HooksContext }; hooks.clean = vi.fn(); - store.cleanupStory(story); + await store.cleanupStory(story); expect(hooks.clean).toHaveBeenCalled(); }); }); diff --git a/code/lib/preview-api/src/modules/store/StoryStore.ts b/code/lib/preview-api/src/modules/store/StoryStore.ts index 123ea5b984c8..ebfe582cdfe2 100644 --- a/code/lib/preview-api/src/modules/store/StoryStore.ts +++ b/code/lib/preview-api/src/modules/store/StoryStore.ts @@ -40,6 +40,7 @@ import { normalizeProjectAnnotations, prepareContext, } from './csf'; +import type { CleanupCallback } from '@storybook/csf'; // TODO -- what are reasonable values for these? const CSF_CACHE_SIZE = 1000; @@ -56,6 +57,8 @@ export class StoryStore { hooks: Record>; + cleanupCallbacks: Record; + cachedCSFFiles?: Record>; processCSFFileWithCache: typeof processCSFFile; @@ -79,6 +82,7 @@ export class StoryStore { this.args = new ArgsStore(); this.globals = new GlobalsStore({ globals, globalTypes }); this.hooks = {}; + this.cleanupCallbacks = {}; // We use a cache for these two functions for two reasons: // 1. For performance @@ -234,8 +238,17 @@ export class StoryStore { }); } - cleanupStory(story: PreparedStory): void { + addCleanupCallbacks(story: PreparedStory, callbacks: CleanupCallback[]) { + this.cleanupCallbacks[story.id] = callbacks; + } + + async cleanupStory(story: PreparedStory): Promise { this.hooks[story.id].clean(); + + const callbacks = this.cleanupCallbacks[story.id]; + if (callbacks) for (const callback of [...callbacks].reverse()) await callback(); + + delete this.cleanupCallbacks[story.id]; } extract( diff --git a/code/lib/preview-api/src/modules/store/csf/portable-stories.ts b/code/lib/preview-api/src/modules/store/csf/portable-stories.ts index 57e8fcda9a2b..42dc379d6487 100644 --- a/code/lib/preview-api/src/modules/store/csf/portable-stories.ts +++ b/code/lib/preview-api/src/modules/store/csf/portable-stories.ts @@ -1,6 +1,6 @@ /* eslint-disable no-underscore-dangle */ /* eslint-disable @typescript-eslint/naming-convention */ -import { isExportStory } from '@storybook/csf'; +import { type CleanupCallback, isExportStory } from '@storybook/csf'; import dedent from 'ts-dedent'; import type { Renderer, @@ -47,6 +47,8 @@ export function setProjectAnnotations( globalProjectAnnotations = composeConfigs(annotations.map(extractAnnotation)); } +const cleanupCallbacks: CleanupCallback[] = []; + export function composeStory( storyAnnotations: LegacyStoryAnnotationsOrFn, componentAnnotations: ComponentAnnotations, @@ -126,8 +128,14 @@ export function composeStory { + // First run any registerd cleanup function + for (const callback of [...cleanupCallbacks].reverse()) await callback(); + cleanupCallbacks.length = 0; + const loadedContext = await story.applyLoaders(context); context.loaded = loadedContext.loaded; + + cleanupCallbacks.push(...(await story.applyBeforeEach(context))); }, args: story.initialArgs as Partial, parameters: story.parameters as Parameters, diff --git a/code/lib/preview-api/src/modules/store/csf/prepareStory.ts b/code/lib/preview-api/src/modules/store/csf/prepareStory.ts index 96ade956ea05..22b2ede3f51c 100644 --- a/code/lib/preview-api/src/modules/store/csf/prepareStory.ts +++ b/code/lib/preview-api/src/modules/store/csf/prepareStory.ts @@ -20,7 +20,7 @@ import type { StoryContextForLoaders, StrictArgTypes, } from '@storybook/types'; -import { includeConditionalArg } from '@storybook/csf'; +import { type CleanupCallback, includeConditionalArg } from '@storybook/csf'; import { applyHooks } from '../../addons'; import { combineParameters } from '../parameters'; @@ -66,19 +66,20 @@ export function prepareStory( updatedContext = { ...updatedContext, loaded: { ...updatedContext.loaded, ...loaded } }; } - // TODO: What to do with those? - const cleanups = new Array<() => unknown>(); + return updatedContext; + }; + + const applyBeforeEach = async (context: StoryContext): Promise => { + const cleanupCallbacks = new Array<() => unknown>(); for (const beforeEach of [ ...normalizeArrays(projectAnnotations.beforeEach), ...normalizeArrays(componentAnnotations.beforeEach), ...normalizeArrays(storyAnnotations.beforeEach), ]) { - const cleanup = await beforeEach(updatedContext); - if (cleanup) { - cleanups.push(cleanup); - } + const cleanup = await beforeEach(context); + if (cleanup) cleanupCallbacks.push(cleanup); } - return updatedContext; + return cleanupCallbacks; }; const undecoratedStoryFn = (context: StoryContext) => @@ -130,6 +131,7 @@ export function prepareStory( undecoratedStoryFn, unboundStoryFn, applyLoaders, + applyBeforeEach, playFunction, }; } diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index 82f7b21021a0..4514307f350e 100644 --- a/code/lib/source-loader/package.json +++ b/code/lib/source-loader/package.json @@ -45,7 +45,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/csf": "0.1.4--canary.82.941efd8.0", + "@storybook/csf": "0.1.4--canary.82.5e73744.0", "@storybook/types": "workspace:*", "estraverse": "^5.2.0", "lodash": "^4.17.21", diff --git a/code/lib/types/package.json b/code/lib/types/package.json index 70f8e859c2ff..81d3c83827f8 100644 --- a/code/lib/types/package.json +++ b/code/lib/types/package.json @@ -49,7 +49,7 @@ "file-system-cache": "2.3.0" }, "devDependencies": { - "@storybook/csf": "0.1.4--canary.82.941efd8.0", + "@storybook/csf": "0.1.4--canary.82.5e73744.0", "@types/fs-extra": "^11.0.1", "@types/node": "^18.0.0", "typescript": "^5.3.2" diff --git a/code/lib/types/src/modules/story.ts b/code/lib/types/src/modules/story.ts index ee34ad43ce79..041aaed2e709 100644 --- a/code/lib/types/src/modules/story.ts +++ b/code/lib/types/src/modules/story.ts @@ -3,6 +3,7 @@ import type { ProjectAnnotations as CsfProjectAnnotations, DecoratorFunction, LoaderFunction, + CleanupCallback, } from '@storybook/csf'; import type { @@ -103,6 +104,7 @@ export type PreparedStory = applyLoaders: ( context: StoryContextForLoaders ) => Promise & { loaded: StoryContext['loaded'] }>; + applyBeforeEach: (context: StoryContext) => Promise; playFunction?: (context: StoryContext) => Promise | void; }; diff --git a/code/package.json b/code/package.json index 080ffc86d037..558aee0c82f5 100644 --- a/code/package.json +++ b/code/package.json @@ -127,7 +127,7 @@ "@storybook/core-events": "workspace:*", "@storybook/core-server": "workspace:*", "@storybook/core-webpack": "workspace:*", - "@storybook/csf": "0.1.4--canary.82.941efd8.0", + "@storybook/csf": "0.1.4--canary.82.5e73744.0", "@storybook/csf-plugin": "workspace:*", "@storybook/csf-tools": "workspace:*", "@storybook/docs-tools": "workspace:*", diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json index a87fa2768637..5d2c95108b0f 100644 --- a/code/renderers/server/package.json +++ b/code/renderers/server/package.json @@ -46,7 +46,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/csf": "0.1.4--canary.82.941efd8.0", + "@storybook/csf": "0.1.4--canary.82.5e73744.0", "@storybook/csf-tools": "workspace:*", "@storybook/global": "^5.0.0", "@storybook/preview-api": "workspace:*", diff --git a/code/ui/blocks/package.json b/code/ui/blocks/package.json index 545beca9f679..cfb0eaca5bf0 100644 --- a/code/ui/blocks/package.json +++ b/code/ui/blocks/package.json @@ -48,7 +48,7 @@ "@storybook/client-logger": "workspace:*", "@storybook/components": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "0.1.4--canary.82.941efd8.0", + "@storybook/csf": "0.1.4--canary.82.5e73744.0", "@storybook/docs-tools": "workspace:*", "@storybook/global": "^5.0.0", "@storybook/icons": "^1.2.5", diff --git a/code/ui/components/package.json b/code/ui/components/package.json index e06d7ec283c9..981097fc67b4 100644 --- a/code/ui/components/package.json +++ b/code/ui/components/package.json @@ -61,7 +61,7 @@ "dependencies": { "@radix-ui/react-slot": "^1.0.2", "@storybook/client-logger": "workspace:*", - "@storybook/csf": "0.1.4--canary.82.941efd8.0", + "@storybook/csf": "0.1.4--canary.82.5e73744.0", "@storybook/global": "^5.0.0", "@storybook/icons": "^1.2.5", "@storybook/theming": "workspace:*", diff --git a/code/yarn.lock b/code/yarn.lock index 4614eb8d61a1..188f18ea2dc1 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -4947,7 +4947,7 @@ __metadata: dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.941efd8.0" + "@storybook/csf": "npm:0.1.4--canary.82.5e73744.0" "@storybook/global": "npm:^5.0.0" "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" @@ -5215,7 +5215,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.941efd8.0" + "@storybook/csf": "npm:0.1.4--canary.82.5e73744.0" "@storybook/docs-tools": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" @@ -5446,7 +5446,7 @@ __metadata: "@babel/core": "npm:^7.23.2" "@babel/preset-env": "npm:^7.23.2" "@babel/types": "npm:^7.23.0" - "@storybook/csf": "npm:0.1.4--canary.82.941efd8.0" + "@storybook/csf": "npm:0.1.4--canary.82.5e73744.0" "@storybook/csf-tools": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/types": "workspace:*" @@ -5482,7 +5482,7 @@ __metadata: "@radix-ui/react-scroll-area": "npm:^1.0.5" "@radix-ui/react-slot": "npm:^1.0.2" "@storybook/client-logger": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.941efd8.0" + "@storybook/csf": "npm:0.1.4--canary.82.5e73744.0" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" "@storybook/test": "workspace:*" @@ -5575,7 +5575,7 @@ __metadata: "@storybook/channels": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.941efd8.0" + "@storybook/csf": "npm:0.1.4--canary.82.5e73744.0" "@storybook/csf-tools": "workspace:*" "@storybook/docs-mdx": "npm:3.0.0" "@storybook/global": "npm:^5.0.0" @@ -5657,7 +5657,7 @@ __metadata: "@babel/parser": "npm:^7.23.0" "@babel/traverse": "npm:^7.23.2" "@babel/types": "npm:^7.23.0" - "@storybook/csf": "npm:0.1.4--canary.82.941efd8.0" + "@storybook/csf": "npm:0.1.4--canary.82.5e73744.0" "@storybook/types": "workspace:*" "@types/fs-extra": "npm:^11.0.1" "@types/js-yaml": "npm:^4.0.5" @@ -5669,12 +5669,12 @@ __metadata: languageName: unknown linkType: soft -"@storybook/csf@npm:0.1.4--canary.82.941efd8.0": - version: 0.1.4--canary.82.941efd8.0 - resolution: "@storybook/csf@npm:0.1.4--canary.82.941efd8.0" +"@storybook/csf@npm:0.1.4--canary.82.5e73744.0": + version: 0.1.4--canary.82.5e73744.0 + resolution: "@storybook/csf@npm:0.1.4--canary.82.5e73744.0" dependencies: type-fest: "npm:^2.19.0" - checksum: 10c0/73eca2cf2ae69061ea68db6b5c8fd663615c3f5f9f802ed51aba47cb9a4f50d294959b0d1a90045252c9380512dbb8d9840b88c4c26d49b61d04ed0b6581bedf + checksum: 10c0/c12790d228be49bd3d7d2639ab31fb3c336946e7507b92f6da8eeba283a23a84dc1525ced8b75edf3bb0db5224b2195fc02605f2aa1221c9fc1b7f6acd7a9d98 languageName: node linkType: hard @@ -5854,7 +5854,7 @@ __metadata: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.941efd8.0" + "@storybook/csf": "npm:0.1.4--canary.82.5e73744.0" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" "@storybook/router": "workspace:*" @@ -6187,7 +6187,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.941efd8.0" + "@storybook/csf": "npm:0.1.4--canary.82.5e73744.0" "@storybook/global": "npm:^5.0.0" "@storybook/types": "workspace:*" "@types/qs": "npm:^6.9.5" @@ -6372,7 +6372,7 @@ __metadata: "@storybook/core-events": "workspace:*" "@storybook/core-server": "workspace:*" "@storybook/core-webpack": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.941efd8.0" + "@storybook/csf": "npm:0.1.4--canary.82.5e73744.0" "@storybook/csf-plugin": "workspace:*" "@storybook/csf-tools": "workspace:*" "@storybook/docs-tools": "workspace:*" @@ -6527,7 +6527,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/server@workspace:renderers/server" dependencies: - "@storybook/csf": "npm:0.1.4--canary.82.941efd8.0" + "@storybook/csf": "npm:0.1.4--canary.82.5e73744.0" "@storybook/csf-tools": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/preview-api": "workspace:*" @@ -6544,7 +6544,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/source-loader@workspace:lib/source-loader" dependencies: - "@storybook/csf": "npm:0.1.4--canary.82.941efd8.0" + "@storybook/csf": "npm:0.1.4--canary.82.5e73744.0" "@storybook/types": "workspace:*" estraverse: "npm:^5.2.0" lodash: "npm:^4.17.21" @@ -6723,7 +6723,7 @@ __metadata: resolution: "@storybook/types@workspace:lib/types" dependencies: "@storybook/channels": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.941efd8.0" + "@storybook/csf": "npm:0.1.4--canary.82.5e73744.0" "@types/express": "npm:^4.7.0" "@types/fs-extra": "npm:^11.0.1" "@types/node": "npm:^18.0.0" From aa24b2401b18180f7e0fe9b6d371fa836022352b Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Thu, 11 Apr 2024 15:32:29 +0200 Subject: [PATCH 113/380] Update csf --- code/addons/links/package.json | 2 +- code/lib/codemod/package.json | 2 +- code/lib/core-server/package.json | 2 +- code/lib/csf-tools/package.json | 2 +- code/lib/manager-api/package.json | 2 +- code/lib/preview-api/package.json | 2 +- code/lib/source-loader/package.json | 2 +- code/lib/types/package.json | 2 +- code/package.json | 2 +- code/renderers/server/package.json | 2 +- code/ui/blocks/package.json | 2 +- code/ui/components/package.json | 2 +- code/yarn.lock | 32 ++++++++++++++--------------- 13 files changed, 28 insertions(+), 28 deletions(-) diff --git a/code/addons/links/package.json b/code/addons/links/package.json index 048e4517d406..6ae0722cfc8f 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -67,7 +67,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { - "@storybook/csf": "0.1.4--canary.82.5e73744.0", + "@storybook/csf": "0.1.4--canary.82.2a09ac2.0", "@storybook/global": "^5.0.0", "ts-dedent": "^2.0.0" }, diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index 7d278075a5ec..36de62dbfcf0 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -57,7 +57,7 @@ "@babel/core": "^7.23.2", "@babel/preset-env": "^7.23.2", "@babel/types": "^7.23.0", - "@storybook/csf": "0.1.4--canary.82.5e73744.0", + "@storybook/csf": "0.1.4--canary.82.2a09ac2.0", "@storybook/csf-tools": "workspace:*", "@storybook/node-logger": "workspace:*", "@storybook/types": "workspace:*", diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index b0d66fa7a13b..797258e060d3 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -62,7 +62,7 @@ "@storybook/channels": "workspace:*", "@storybook/core-common": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "0.1.4--canary.82.5e73744.0", + "@storybook/csf": "0.1.4--canary.82.2a09ac2.0", "@storybook/csf-tools": "workspace:*", "@storybook/docs-mdx": "3.0.0", "@storybook/global": "^5.0.0", diff --git a/code/lib/csf-tools/package.json b/code/lib/csf-tools/package.json index b0f2a794d498..a8b6fdf5ec81 100644 --- a/code/lib/csf-tools/package.json +++ b/code/lib/csf-tools/package.json @@ -46,7 +46,7 @@ "@babel/parser": "^7.23.0", "@babel/traverse": "^7.23.2", "@babel/types": "^7.23.0", - "@storybook/csf": "0.1.4--canary.82.5e73744.0", + "@storybook/csf": "0.1.4--canary.82.2a09ac2.0", "@storybook/types": "workspace:*", "fs-extra": "^11.1.0", "recast": "^0.23.5", diff --git a/code/lib/manager-api/package.json b/code/lib/manager-api/package.json index 222964c69636..06ffc46be6a7 100644 --- a/code/lib/manager-api/package.json +++ b/code/lib/manager-api/package.json @@ -47,7 +47,7 @@ "@storybook/channels": "workspace:*", "@storybook/client-logger": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "0.1.4--canary.82.5e73744.0", + "@storybook/csf": "0.1.4--canary.82.2a09ac2.0", "@storybook/global": "^5.0.0", "@storybook/icons": "^1.2.5", "@storybook/router": "workspace:*", diff --git a/code/lib/preview-api/package.json b/code/lib/preview-api/package.json index 63457c32639b..c666a90fa74b 100644 --- a/code/lib/preview-api/package.json +++ b/code/lib/preview-api/package.json @@ -47,7 +47,7 @@ "@storybook/channels": "workspace:*", "@storybook/client-logger": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "0.1.4--canary.82.5e73744.0", + "@storybook/csf": "0.1.4--canary.82.2a09ac2.0", "@storybook/global": "^5.0.0", "@storybook/types": "workspace:*", "@types/qs": "^6.9.5", diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index 4514307f350e..0c68ff7cda5a 100644 --- a/code/lib/source-loader/package.json +++ b/code/lib/source-loader/package.json @@ -45,7 +45,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/csf": "0.1.4--canary.82.5e73744.0", + "@storybook/csf": "0.1.4--canary.82.2a09ac2.0", "@storybook/types": "workspace:*", "estraverse": "^5.2.0", "lodash": "^4.17.21", diff --git a/code/lib/types/package.json b/code/lib/types/package.json index 81d3c83827f8..e2f830db5924 100644 --- a/code/lib/types/package.json +++ b/code/lib/types/package.json @@ -49,7 +49,7 @@ "file-system-cache": "2.3.0" }, "devDependencies": { - "@storybook/csf": "0.1.4--canary.82.5e73744.0", + "@storybook/csf": "0.1.4--canary.82.2a09ac2.0", "@types/fs-extra": "^11.0.1", "@types/node": "^18.0.0", "typescript": "^5.3.2" diff --git a/code/package.json b/code/package.json index 558aee0c82f5..5037ec794b73 100644 --- a/code/package.json +++ b/code/package.json @@ -127,7 +127,7 @@ "@storybook/core-events": "workspace:*", "@storybook/core-server": "workspace:*", "@storybook/core-webpack": "workspace:*", - "@storybook/csf": "0.1.4--canary.82.5e73744.0", + "@storybook/csf": "0.1.4--canary.82.2a09ac2.0", "@storybook/csf-plugin": "workspace:*", "@storybook/csf-tools": "workspace:*", "@storybook/docs-tools": "workspace:*", diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json index 5d2c95108b0f..a87f0f15700d 100644 --- a/code/renderers/server/package.json +++ b/code/renderers/server/package.json @@ -46,7 +46,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/csf": "0.1.4--canary.82.5e73744.0", + "@storybook/csf": "0.1.4--canary.82.2a09ac2.0", "@storybook/csf-tools": "workspace:*", "@storybook/global": "^5.0.0", "@storybook/preview-api": "workspace:*", diff --git a/code/ui/blocks/package.json b/code/ui/blocks/package.json index cfb0eaca5bf0..a42dcf5d314b 100644 --- a/code/ui/blocks/package.json +++ b/code/ui/blocks/package.json @@ -48,7 +48,7 @@ "@storybook/client-logger": "workspace:*", "@storybook/components": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "0.1.4--canary.82.5e73744.0", + "@storybook/csf": "0.1.4--canary.82.2a09ac2.0", "@storybook/docs-tools": "workspace:*", "@storybook/global": "^5.0.0", "@storybook/icons": "^1.2.5", diff --git a/code/ui/components/package.json b/code/ui/components/package.json index 981097fc67b4..f93c613015f1 100644 --- a/code/ui/components/package.json +++ b/code/ui/components/package.json @@ -61,7 +61,7 @@ "dependencies": { "@radix-ui/react-slot": "^1.0.2", "@storybook/client-logger": "workspace:*", - "@storybook/csf": "0.1.4--canary.82.5e73744.0", + "@storybook/csf": "0.1.4--canary.82.2a09ac2.0", "@storybook/global": "^5.0.0", "@storybook/icons": "^1.2.5", "@storybook/theming": "workspace:*", diff --git a/code/yarn.lock b/code/yarn.lock index 188f18ea2dc1..60868d2982d9 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -4947,7 +4947,7 @@ __metadata: dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.5e73744.0" + "@storybook/csf": "npm:0.1.4--canary.82.2a09ac2.0" "@storybook/global": "npm:^5.0.0" "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" @@ -5215,7 +5215,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.5e73744.0" + "@storybook/csf": "npm:0.1.4--canary.82.2a09ac2.0" "@storybook/docs-tools": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" @@ -5446,7 +5446,7 @@ __metadata: "@babel/core": "npm:^7.23.2" "@babel/preset-env": "npm:^7.23.2" "@babel/types": "npm:^7.23.0" - "@storybook/csf": "npm:0.1.4--canary.82.5e73744.0" + "@storybook/csf": "npm:0.1.4--canary.82.2a09ac2.0" "@storybook/csf-tools": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/types": "workspace:*" @@ -5482,7 +5482,7 @@ __metadata: "@radix-ui/react-scroll-area": "npm:^1.0.5" "@radix-ui/react-slot": "npm:^1.0.2" "@storybook/client-logger": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.5e73744.0" + "@storybook/csf": "npm:0.1.4--canary.82.2a09ac2.0" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" "@storybook/test": "workspace:*" @@ -5575,7 +5575,7 @@ __metadata: "@storybook/channels": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.5e73744.0" + "@storybook/csf": "npm:0.1.4--canary.82.2a09ac2.0" "@storybook/csf-tools": "workspace:*" "@storybook/docs-mdx": "npm:3.0.0" "@storybook/global": "npm:^5.0.0" @@ -5657,7 +5657,7 @@ __metadata: "@babel/parser": "npm:^7.23.0" "@babel/traverse": "npm:^7.23.2" "@babel/types": "npm:^7.23.0" - "@storybook/csf": "npm:0.1.4--canary.82.5e73744.0" + "@storybook/csf": "npm:0.1.4--canary.82.2a09ac2.0" "@storybook/types": "workspace:*" "@types/fs-extra": "npm:^11.0.1" "@types/js-yaml": "npm:^4.0.5" @@ -5669,12 +5669,12 @@ __metadata: languageName: unknown linkType: soft -"@storybook/csf@npm:0.1.4--canary.82.5e73744.0": - version: 0.1.4--canary.82.5e73744.0 - resolution: "@storybook/csf@npm:0.1.4--canary.82.5e73744.0" +"@storybook/csf@npm:0.1.4--canary.82.2a09ac2.0": + version: 0.1.4--canary.82.2a09ac2.0 + resolution: "@storybook/csf@npm:0.1.4--canary.82.2a09ac2.0" dependencies: type-fest: "npm:^2.19.0" - checksum: 10c0/c12790d228be49bd3d7d2639ab31fb3c336946e7507b92f6da8eeba283a23a84dc1525ced8b75edf3bb0db5224b2195fc02605f2aa1221c9fc1b7f6acd7a9d98 + checksum: 10c0/85f88a3451d62e2591c4bcf3136ef854397e3850ca5cd4e061b05e01437a472dc96f8520e5935f8d991fd679174d650bce2a797aef1c4e735c3c8130e6c8d11e languageName: node linkType: hard @@ -5854,7 +5854,7 @@ __metadata: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.5e73744.0" + "@storybook/csf": "npm:0.1.4--canary.82.2a09ac2.0" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" "@storybook/router": "workspace:*" @@ -6187,7 +6187,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.5e73744.0" + "@storybook/csf": "npm:0.1.4--canary.82.2a09ac2.0" "@storybook/global": "npm:^5.0.0" "@storybook/types": "workspace:*" "@types/qs": "npm:^6.9.5" @@ -6372,7 +6372,7 @@ __metadata: "@storybook/core-events": "workspace:*" "@storybook/core-server": "workspace:*" "@storybook/core-webpack": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.5e73744.0" + "@storybook/csf": "npm:0.1.4--canary.82.2a09ac2.0" "@storybook/csf-plugin": "workspace:*" "@storybook/csf-tools": "workspace:*" "@storybook/docs-tools": "workspace:*" @@ -6527,7 +6527,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/server@workspace:renderers/server" dependencies: - "@storybook/csf": "npm:0.1.4--canary.82.5e73744.0" + "@storybook/csf": "npm:0.1.4--canary.82.2a09ac2.0" "@storybook/csf-tools": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/preview-api": "workspace:*" @@ -6544,7 +6544,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/source-loader@workspace:lib/source-loader" dependencies: - "@storybook/csf": "npm:0.1.4--canary.82.5e73744.0" + "@storybook/csf": "npm:0.1.4--canary.82.2a09ac2.0" "@storybook/types": "workspace:*" estraverse: "npm:^5.2.0" lodash: "npm:^4.17.21" @@ -6723,7 +6723,7 @@ __metadata: resolution: "@storybook/types@workspace:lib/types" dependencies: "@storybook/channels": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.5e73744.0" + "@storybook/csf": "npm:0.1.4--canary.82.2a09ac2.0" "@types/express": "npm:^4.7.0" "@types/fs-extra": "npm:^11.0.1" "@types/node": "npm:^18.0.0" From 54243d23103283402d6ad841f6b9bde4f27f2a08 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Thu, 11 Apr 2024 15:41:54 +0200 Subject: [PATCH 114/380] Fix type error --- .../lib/preview-api/src/modules/store/csf/prepareStory.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/code/lib/preview-api/src/modules/store/csf/prepareStory.ts b/code/lib/preview-api/src/modules/store/csf/prepareStory.ts index 22b2ede3f51c..84439187c4de 100644 --- a/code/lib/preview-api/src/modules/store/csf/prepareStory.ts +++ b/code/lib/preview-api/src/modules/store/csf/prepareStory.ts @@ -265,10 +265,10 @@ export function prepareContext< return acc; } - const mappingFn = (originalValue: any) => - originalValue in targetedContext.argTypes[key].mapping - ? targetedContext.argTypes[key].mapping[originalValue] - : originalValue; + const mappingFn = (originalValue: any) => { + const mapping = targetedContext.argTypes[key].mapping; + return mapping && originalValue in mapping ? mapping[originalValue] : originalValue; + }; acc[key] = Array.isArray(val) ? val.map(mappingFn) : mappingFn(val); From df6c1ad5d47809223afb1def9be9d12ed323dd69 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Thu, 11 Apr 2024 16:00:21 +0200 Subject: [PATCH 115/380] Fix type errors --- code/addons/links/package.json | 2 +- code/lib/codemod/package.json | 2 +- code/lib/core-server/package.json | 2 +- code/lib/csf-tools/package.json | 2 +- code/lib/manager-api/package.json | 2 +- code/lib/preview-api/package.json | 2 +- code/lib/source-loader/package.json | 2 +- code/lib/types/package.json | 2 +- code/package.json | 2 +- code/renderers/server/package.json | 2 +- code/renderers/server/src/render.ts | 3 +- code/ui/blocks/package.json | 2 +- .../blocks/src/components/ArgsTable/types.ts | 4 +-- code/ui/components/package.json | 2 +- code/yarn.lock | 32 +++++++++---------- 15 files changed, 32 insertions(+), 31 deletions(-) diff --git a/code/addons/links/package.json b/code/addons/links/package.json index 6ae0722cfc8f..a32f72851b17 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -67,7 +67,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { - "@storybook/csf": "0.1.4--canary.82.2a09ac2.0", + "@storybook/csf": "0.1.4--canary.82.eb42c88.0", "@storybook/global": "^5.0.0", "ts-dedent": "^2.0.0" }, diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index 36de62dbfcf0..e530755b7795 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -57,7 +57,7 @@ "@babel/core": "^7.23.2", "@babel/preset-env": "^7.23.2", "@babel/types": "^7.23.0", - "@storybook/csf": "0.1.4--canary.82.2a09ac2.0", + "@storybook/csf": "0.1.4--canary.82.eb42c88.0", "@storybook/csf-tools": "workspace:*", "@storybook/node-logger": "workspace:*", "@storybook/types": "workspace:*", diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index 797258e060d3..3a022dbf7260 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -62,7 +62,7 @@ "@storybook/channels": "workspace:*", "@storybook/core-common": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "0.1.4--canary.82.2a09ac2.0", + "@storybook/csf": "0.1.4--canary.82.eb42c88.0", "@storybook/csf-tools": "workspace:*", "@storybook/docs-mdx": "3.0.0", "@storybook/global": "^5.0.0", diff --git a/code/lib/csf-tools/package.json b/code/lib/csf-tools/package.json index a8b6fdf5ec81..1207ccfbe38f 100644 --- a/code/lib/csf-tools/package.json +++ b/code/lib/csf-tools/package.json @@ -46,7 +46,7 @@ "@babel/parser": "^7.23.0", "@babel/traverse": "^7.23.2", "@babel/types": "^7.23.0", - "@storybook/csf": "0.1.4--canary.82.2a09ac2.0", + "@storybook/csf": "0.1.4--canary.82.eb42c88.0", "@storybook/types": "workspace:*", "fs-extra": "^11.1.0", "recast": "^0.23.5", diff --git a/code/lib/manager-api/package.json b/code/lib/manager-api/package.json index 06ffc46be6a7..03d368380a9f 100644 --- a/code/lib/manager-api/package.json +++ b/code/lib/manager-api/package.json @@ -47,7 +47,7 @@ "@storybook/channels": "workspace:*", "@storybook/client-logger": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "0.1.4--canary.82.2a09ac2.0", + "@storybook/csf": "0.1.4--canary.82.eb42c88.0", "@storybook/global": "^5.0.0", "@storybook/icons": "^1.2.5", "@storybook/router": "workspace:*", diff --git a/code/lib/preview-api/package.json b/code/lib/preview-api/package.json index c666a90fa74b..f2a7d5856bb8 100644 --- a/code/lib/preview-api/package.json +++ b/code/lib/preview-api/package.json @@ -47,7 +47,7 @@ "@storybook/channels": "workspace:*", "@storybook/client-logger": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "0.1.4--canary.82.2a09ac2.0", + "@storybook/csf": "0.1.4--canary.82.eb42c88.0", "@storybook/global": "^5.0.0", "@storybook/types": "workspace:*", "@types/qs": "^6.9.5", diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index 0c68ff7cda5a..27da53aee4ac 100644 --- a/code/lib/source-loader/package.json +++ b/code/lib/source-loader/package.json @@ -45,7 +45,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/csf": "0.1.4--canary.82.2a09ac2.0", + "@storybook/csf": "0.1.4--canary.82.eb42c88.0", "@storybook/types": "workspace:*", "estraverse": "^5.2.0", "lodash": "^4.17.21", diff --git a/code/lib/types/package.json b/code/lib/types/package.json index e2f830db5924..c5011426fc02 100644 --- a/code/lib/types/package.json +++ b/code/lib/types/package.json @@ -49,7 +49,7 @@ "file-system-cache": "2.3.0" }, "devDependencies": { - "@storybook/csf": "0.1.4--canary.82.2a09ac2.0", + "@storybook/csf": "0.1.4--canary.82.eb42c88.0", "@types/fs-extra": "^11.0.1", "@types/node": "^18.0.0", "typescript": "^5.3.2" diff --git a/code/package.json b/code/package.json index 5037ec794b73..cbd113dd93fa 100644 --- a/code/package.json +++ b/code/package.json @@ -127,7 +127,7 @@ "@storybook/core-events": "workspace:*", "@storybook/core-server": "workspace:*", "@storybook/core-webpack": "workspace:*", - "@storybook/csf": "0.1.4--canary.82.2a09ac2.0", + "@storybook/csf": "0.1.4--canary.82.eb42c88.0", "@storybook/csf-plugin": "workspace:*", "@storybook/csf-tools": "workspace:*", "@storybook/docs-tools": "workspace:*", diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json index a87f0f15700d..915e952ae7c3 100644 --- a/code/renderers/server/package.json +++ b/code/renderers/server/package.json @@ -46,7 +46,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/csf": "0.1.4--canary.82.2a09ac2.0", + "@storybook/csf": "0.1.4--canary.82.eb42c88.0", "@storybook/csf-tools": "workspace:*", "@storybook/global": "^5.0.0", "@storybook/preview-api": "workspace:*", diff --git a/code/renderers/server/src/render.ts b/code/renderers/server/src/render.ts index 0a768647d740..0c910f7ba706 100644 --- a/code/renderers/server/src/render.ts +++ b/code/renderers/server/src/render.ts @@ -22,7 +22,8 @@ const buildStoryArgs = (args: Args, argTypes: ArgTypes) => { Object.keys(argTypes).forEach((key: string) => { const argType = argTypes[key]; const { control } = argType; - const controlType = control && control.type.toLowerCase(); + const controlType = + control && typeof control === 'object' && 'type' in control && control.type?.toLowerCase(); const argValue = storyArgs[key]; switch (controlType) { case 'date': diff --git a/code/ui/blocks/package.json b/code/ui/blocks/package.json index a42dcf5d314b..358ce8515d9b 100644 --- a/code/ui/blocks/package.json +++ b/code/ui/blocks/package.json @@ -48,7 +48,7 @@ "@storybook/client-logger": "workspace:*", "@storybook/components": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "0.1.4--canary.82.2a09ac2.0", + "@storybook/csf": "0.1.4--canary.82.eb42c88.0", "@storybook/docs-tools": "workspace:*", "@storybook/global": "^5.0.0", "@storybook/icons": "^1.2.5", diff --git a/code/ui/blocks/src/components/ArgsTable/types.ts b/code/ui/blocks/src/components/ArgsTable/types.ts index 653bf236acdb..7efb484fe6a9 100644 --- a/code/ui/blocks/src/components/ArgsTable/types.ts +++ b/code/ui/blocks/src/components/ArgsTable/types.ts @@ -46,11 +46,11 @@ export interface ArgType { disable?: boolean; subcategory?: string; defaultValue?: { - summary: string; + summary?: string; detail?: string; }; type?: { - summary: string; + summary?: string; detail?: string; }; readonly?: boolean; diff --git a/code/ui/components/package.json b/code/ui/components/package.json index f93c613015f1..e5f901c7f290 100644 --- a/code/ui/components/package.json +++ b/code/ui/components/package.json @@ -61,7 +61,7 @@ "dependencies": { "@radix-ui/react-slot": "^1.0.2", "@storybook/client-logger": "workspace:*", - "@storybook/csf": "0.1.4--canary.82.2a09ac2.0", + "@storybook/csf": "0.1.4--canary.82.eb42c88.0", "@storybook/global": "^5.0.0", "@storybook/icons": "^1.2.5", "@storybook/theming": "workspace:*", diff --git a/code/yarn.lock b/code/yarn.lock index 60868d2982d9..38f36fad686f 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -4947,7 +4947,7 @@ __metadata: dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.2a09ac2.0" + "@storybook/csf": "npm:0.1.4--canary.82.eb42c88.0" "@storybook/global": "npm:^5.0.0" "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" @@ -5215,7 +5215,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.2a09ac2.0" + "@storybook/csf": "npm:0.1.4--canary.82.eb42c88.0" "@storybook/docs-tools": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" @@ -5446,7 +5446,7 @@ __metadata: "@babel/core": "npm:^7.23.2" "@babel/preset-env": "npm:^7.23.2" "@babel/types": "npm:^7.23.0" - "@storybook/csf": "npm:0.1.4--canary.82.2a09ac2.0" + "@storybook/csf": "npm:0.1.4--canary.82.eb42c88.0" "@storybook/csf-tools": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/types": "workspace:*" @@ -5482,7 +5482,7 @@ __metadata: "@radix-ui/react-scroll-area": "npm:^1.0.5" "@radix-ui/react-slot": "npm:^1.0.2" "@storybook/client-logger": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.2a09ac2.0" + "@storybook/csf": "npm:0.1.4--canary.82.eb42c88.0" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" "@storybook/test": "workspace:*" @@ -5575,7 +5575,7 @@ __metadata: "@storybook/channels": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.2a09ac2.0" + "@storybook/csf": "npm:0.1.4--canary.82.eb42c88.0" "@storybook/csf-tools": "workspace:*" "@storybook/docs-mdx": "npm:3.0.0" "@storybook/global": "npm:^5.0.0" @@ -5657,7 +5657,7 @@ __metadata: "@babel/parser": "npm:^7.23.0" "@babel/traverse": "npm:^7.23.2" "@babel/types": "npm:^7.23.0" - "@storybook/csf": "npm:0.1.4--canary.82.2a09ac2.0" + "@storybook/csf": "npm:0.1.4--canary.82.eb42c88.0" "@storybook/types": "workspace:*" "@types/fs-extra": "npm:^11.0.1" "@types/js-yaml": "npm:^4.0.5" @@ -5669,12 +5669,12 @@ __metadata: languageName: unknown linkType: soft -"@storybook/csf@npm:0.1.4--canary.82.2a09ac2.0": - version: 0.1.4--canary.82.2a09ac2.0 - resolution: "@storybook/csf@npm:0.1.4--canary.82.2a09ac2.0" +"@storybook/csf@npm:0.1.4--canary.82.eb42c88.0": + version: 0.1.4--canary.82.eb42c88.0 + resolution: "@storybook/csf@npm:0.1.4--canary.82.eb42c88.0" dependencies: type-fest: "npm:^2.19.0" - checksum: 10c0/85f88a3451d62e2591c4bcf3136ef854397e3850ca5cd4e061b05e01437a472dc96f8520e5935f8d991fd679174d650bce2a797aef1c4e735c3c8130e6c8d11e + checksum: 10c0/ecf33ccc2fbadf2d7e8add3a38f7dcd993c4168619b61709295231fd741fa9a1cabcd6471bfc5b870418c300461ac021345eea7bdde5188811acd0ddc44bb9f8 languageName: node linkType: hard @@ -5854,7 +5854,7 @@ __metadata: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.2a09ac2.0" + "@storybook/csf": "npm:0.1.4--canary.82.eb42c88.0" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" "@storybook/router": "workspace:*" @@ -6187,7 +6187,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.2a09ac2.0" + "@storybook/csf": "npm:0.1.4--canary.82.eb42c88.0" "@storybook/global": "npm:^5.0.0" "@storybook/types": "workspace:*" "@types/qs": "npm:^6.9.5" @@ -6372,7 +6372,7 @@ __metadata: "@storybook/core-events": "workspace:*" "@storybook/core-server": "workspace:*" "@storybook/core-webpack": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.2a09ac2.0" + "@storybook/csf": "npm:0.1.4--canary.82.eb42c88.0" "@storybook/csf-plugin": "workspace:*" "@storybook/csf-tools": "workspace:*" "@storybook/docs-tools": "workspace:*" @@ -6527,7 +6527,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/server@workspace:renderers/server" dependencies: - "@storybook/csf": "npm:0.1.4--canary.82.2a09ac2.0" + "@storybook/csf": "npm:0.1.4--canary.82.eb42c88.0" "@storybook/csf-tools": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/preview-api": "workspace:*" @@ -6544,7 +6544,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/source-loader@workspace:lib/source-loader" dependencies: - "@storybook/csf": "npm:0.1.4--canary.82.2a09ac2.0" + "@storybook/csf": "npm:0.1.4--canary.82.eb42c88.0" "@storybook/types": "workspace:*" estraverse: "npm:^5.2.0" lodash: "npm:^4.17.21" @@ -6723,7 +6723,7 @@ __metadata: resolution: "@storybook/types@workspace:lib/types" dependencies: "@storybook/channels": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.2a09ac2.0" + "@storybook/csf": "npm:0.1.4--canary.82.eb42c88.0" "@types/express": "npm:^4.7.0" "@types/fs-extra": "npm:^11.0.1" "@types/node": "npm:^18.0.0" From e56b6d789df7254f8173cac1624326a0e2557bf1 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Thu, 11 Apr 2024 16:36:54 +0200 Subject: [PATCH 116/380] Fix type errors --- code/addons/controls/src/ControlsPanel.tsx | 6 ++-- code/addons/links/package.json | 2 +- code/lib/codemod/package.json | 2 +- code/lib/core-server/package.json | 2 +- code/lib/csf-tools/package.json | 2 +- code/lib/manager-api/package.json | 2 +- code/lib/preview-api/package.json | 2 +- code/lib/source-loader/package.json | 2 +- code/lib/types/package.json | 2 +- code/package.json | 2 +- code/renderers/server/package.json | 2 +- .../vue3/src/docs/extractArgTypes.ts | 2 +- code/ui/blocks/package.json | 2 +- code/ui/components/package.json | 2 +- code/yarn.lock | 32 +++++++++---------- 15 files changed, 33 insertions(+), 31 deletions(-) diff --git a/code/addons/controls/src/ControlsPanel.tsx b/code/addons/controls/src/ControlsPanel.tsx index 09d3bc45e44e..1f1a90cce007 100644 --- a/code/addons/controls/src/ControlsPanel.tsx +++ b/code/addons/controls/src/ControlsPanel.tsx @@ -35,8 +35,10 @@ export const ControlsPanel: FC = () => { const hasControls = Object.values(rows).some((arg) => arg?.control); const withPresetColors = Object.entries(rows).reduce((acc, [key, arg]) => { - if (arg?.control?.type !== 'color' || arg?.control?.presetColors) acc[key] = arg; - else acc[key] = { ...arg, control: { ...arg.control, presetColors } }; + const control = arg?.control; + if (typeof control !== 'object' || control?.type !== 'color' || control?.presetColors) + acc[key] = arg; + else acc[key] = { ...arg, control: { ...control, presetColors } }; return acc; }, {} as ArgTypes); diff --git a/code/addons/links/package.json b/code/addons/links/package.json index a32f72851b17..848d3ed70599 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -67,7 +67,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { - "@storybook/csf": "0.1.4--canary.82.eb42c88.0", + "@storybook/csf": "0.1.4--canary.82.07bccd8.0", "@storybook/global": "^5.0.0", "ts-dedent": "^2.0.0" }, diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index e530755b7795..4cb0e7778ba4 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -57,7 +57,7 @@ "@babel/core": "^7.23.2", "@babel/preset-env": "^7.23.2", "@babel/types": "^7.23.0", - "@storybook/csf": "0.1.4--canary.82.eb42c88.0", + "@storybook/csf": "0.1.4--canary.82.07bccd8.0", "@storybook/csf-tools": "workspace:*", "@storybook/node-logger": "workspace:*", "@storybook/types": "workspace:*", diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index 3a022dbf7260..bc74ea549e1b 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -62,7 +62,7 @@ "@storybook/channels": "workspace:*", "@storybook/core-common": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "0.1.4--canary.82.eb42c88.0", + "@storybook/csf": "0.1.4--canary.82.07bccd8.0", "@storybook/csf-tools": "workspace:*", "@storybook/docs-mdx": "3.0.0", "@storybook/global": "^5.0.0", diff --git a/code/lib/csf-tools/package.json b/code/lib/csf-tools/package.json index 1207ccfbe38f..0a983a1f65fe 100644 --- a/code/lib/csf-tools/package.json +++ b/code/lib/csf-tools/package.json @@ -46,7 +46,7 @@ "@babel/parser": "^7.23.0", "@babel/traverse": "^7.23.2", "@babel/types": "^7.23.0", - "@storybook/csf": "0.1.4--canary.82.eb42c88.0", + "@storybook/csf": "0.1.4--canary.82.07bccd8.0", "@storybook/types": "workspace:*", "fs-extra": "^11.1.0", "recast": "^0.23.5", diff --git a/code/lib/manager-api/package.json b/code/lib/manager-api/package.json index 03d368380a9f..a7580cc35300 100644 --- a/code/lib/manager-api/package.json +++ b/code/lib/manager-api/package.json @@ -47,7 +47,7 @@ "@storybook/channels": "workspace:*", "@storybook/client-logger": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "0.1.4--canary.82.eb42c88.0", + "@storybook/csf": "0.1.4--canary.82.07bccd8.0", "@storybook/global": "^5.0.0", "@storybook/icons": "^1.2.5", "@storybook/router": "workspace:*", diff --git a/code/lib/preview-api/package.json b/code/lib/preview-api/package.json index f2a7d5856bb8..8beec3506bf5 100644 --- a/code/lib/preview-api/package.json +++ b/code/lib/preview-api/package.json @@ -47,7 +47,7 @@ "@storybook/channels": "workspace:*", "@storybook/client-logger": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "0.1.4--canary.82.eb42c88.0", + "@storybook/csf": "0.1.4--canary.82.07bccd8.0", "@storybook/global": "^5.0.0", "@storybook/types": "workspace:*", "@types/qs": "^6.9.5", diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index 27da53aee4ac..0c23f1962e7a 100644 --- a/code/lib/source-loader/package.json +++ b/code/lib/source-loader/package.json @@ -45,7 +45,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/csf": "0.1.4--canary.82.eb42c88.0", + "@storybook/csf": "0.1.4--canary.82.07bccd8.0", "@storybook/types": "workspace:*", "estraverse": "^5.2.0", "lodash": "^4.17.21", diff --git a/code/lib/types/package.json b/code/lib/types/package.json index c5011426fc02..07665e44d705 100644 --- a/code/lib/types/package.json +++ b/code/lib/types/package.json @@ -49,7 +49,7 @@ "file-system-cache": "2.3.0" }, "devDependencies": { - "@storybook/csf": "0.1.4--canary.82.eb42c88.0", + "@storybook/csf": "0.1.4--canary.82.07bccd8.0", "@types/fs-extra": "^11.0.1", "@types/node": "^18.0.0", "typescript": "^5.3.2" diff --git a/code/package.json b/code/package.json index cbd113dd93fa..6d9b8d414a69 100644 --- a/code/package.json +++ b/code/package.json @@ -127,7 +127,7 @@ "@storybook/core-events": "workspace:*", "@storybook/core-server": "workspace:*", "@storybook/core-webpack": "workspace:*", - "@storybook/csf": "0.1.4--canary.82.eb42c88.0", + "@storybook/csf": "0.1.4--canary.82.07bccd8.0", "@storybook/csf-plugin": "workspace:*", "@storybook/csf-tools": "workspace:*", "@storybook/docs-tools": "workspace:*", diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json index 915e952ae7c3..7316820ce51a 100644 --- a/code/renderers/server/package.json +++ b/code/renderers/server/package.json @@ -46,7 +46,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/csf": "0.1.4--canary.82.eb42c88.0", + "@storybook/csf": "0.1.4--canary.82.07bccd8.0", "@storybook/csf-tools": "workspace:*", "@storybook/global": "^5.0.0", "@storybook/preview-api": "workspace:*", diff --git a/code/renderers/vue3/src/docs/extractArgTypes.ts b/code/renderers/vue3/src/docs/extractArgTypes.ts index d466cea2e1cd..66bc7efcf7da 100644 --- a/code/renderers/vue3/src/docs/extractArgTypes.ts +++ b/code/renderers/vue3/src/docs/extractArgTypes.ts @@ -127,7 +127,7 @@ export const extractFromVueDocgenApi = ( type: sbType ? { ...sbType, required } : { name: 'other', value: type ?? '' }, table: { type: type ? { summary: type } : undefined, - defaultValue: extractedProp?.propDef.defaultValue, + defaultValue: extractedProp?.propDef.defaultValue ?? undefined, jsDocTags: extractedProp?.propDef.jsDocTags, category: section, }, diff --git a/code/ui/blocks/package.json b/code/ui/blocks/package.json index 358ce8515d9b..2ed20ed7407e 100644 --- a/code/ui/blocks/package.json +++ b/code/ui/blocks/package.json @@ -48,7 +48,7 @@ "@storybook/client-logger": "workspace:*", "@storybook/components": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "0.1.4--canary.82.eb42c88.0", + "@storybook/csf": "0.1.4--canary.82.07bccd8.0", "@storybook/docs-tools": "workspace:*", "@storybook/global": "^5.0.0", "@storybook/icons": "^1.2.5", diff --git a/code/ui/components/package.json b/code/ui/components/package.json index e5f901c7f290..e4310e0e3cd0 100644 --- a/code/ui/components/package.json +++ b/code/ui/components/package.json @@ -61,7 +61,7 @@ "dependencies": { "@radix-ui/react-slot": "^1.0.2", "@storybook/client-logger": "workspace:*", - "@storybook/csf": "0.1.4--canary.82.eb42c88.0", + "@storybook/csf": "0.1.4--canary.82.07bccd8.0", "@storybook/global": "^5.0.0", "@storybook/icons": "^1.2.5", "@storybook/theming": "workspace:*", diff --git a/code/yarn.lock b/code/yarn.lock index ac37658ede03..5584607d30bc 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -4947,7 +4947,7 @@ __metadata: dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.eb42c88.0" + "@storybook/csf": "npm:0.1.4--canary.82.07bccd8.0" "@storybook/global": "npm:^5.0.0" "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" @@ -5215,7 +5215,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.eb42c88.0" + "@storybook/csf": "npm:0.1.4--canary.82.07bccd8.0" "@storybook/docs-tools": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" @@ -5446,7 +5446,7 @@ __metadata: "@babel/core": "npm:^7.23.2" "@babel/preset-env": "npm:^7.23.2" "@babel/types": "npm:^7.23.0" - "@storybook/csf": "npm:0.1.4--canary.82.eb42c88.0" + "@storybook/csf": "npm:0.1.4--canary.82.07bccd8.0" "@storybook/csf-tools": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/types": "workspace:*" @@ -5482,7 +5482,7 @@ __metadata: "@radix-ui/react-scroll-area": "npm:^1.0.5" "@radix-ui/react-slot": "npm:^1.0.2" "@storybook/client-logger": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.eb42c88.0" + "@storybook/csf": "npm:0.1.4--canary.82.07bccd8.0" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" "@storybook/test": "workspace:*" @@ -5575,7 +5575,7 @@ __metadata: "@storybook/channels": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.eb42c88.0" + "@storybook/csf": "npm:0.1.4--canary.82.07bccd8.0" "@storybook/csf-tools": "workspace:*" "@storybook/docs-mdx": "npm:3.0.0" "@storybook/global": "npm:^5.0.0" @@ -5657,7 +5657,7 @@ __metadata: "@babel/parser": "npm:^7.23.0" "@babel/traverse": "npm:^7.23.2" "@babel/types": "npm:^7.23.0" - "@storybook/csf": "npm:0.1.4--canary.82.eb42c88.0" + "@storybook/csf": "npm:0.1.4--canary.82.07bccd8.0" "@storybook/types": "workspace:*" "@types/fs-extra": "npm:^11.0.1" "@types/js-yaml": "npm:^4.0.5" @@ -5669,12 +5669,12 @@ __metadata: languageName: unknown linkType: soft -"@storybook/csf@npm:0.1.4--canary.82.eb42c88.0": - version: 0.1.4--canary.82.eb42c88.0 - resolution: "@storybook/csf@npm:0.1.4--canary.82.eb42c88.0" +"@storybook/csf@npm:0.1.4--canary.82.07bccd8.0": + version: 0.1.4--canary.82.07bccd8.0 + resolution: "@storybook/csf@npm:0.1.4--canary.82.07bccd8.0" dependencies: type-fest: "npm:^2.19.0" - checksum: 10c0/ecf33ccc2fbadf2d7e8add3a38f7dcd993c4168619b61709295231fd741fa9a1cabcd6471bfc5b870418c300461ac021345eea7bdde5188811acd0ddc44bb9f8 + checksum: 10c0/1e00891cfdbf9b9d82f5b5713c463e9499107f96b2e8062f6710f41c586e6abcbf20bdc7d98823e11aff53f2f31ae01608ba06b5c0fb12f142f284c8508ad729 languageName: node linkType: hard @@ -5854,7 +5854,7 @@ __metadata: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.eb42c88.0" + "@storybook/csf": "npm:0.1.4--canary.82.07bccd8.0" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" "@storybook/router": "workspace:*" @@ -6187,7 +6187,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.eb42c88.0" + "@storybook/csf": "npm:0.1.4--canary.82.07bccd8.0" "@storybook/global": "npm:^5.0.0" "@storybook/types": "workspace:*" "@types/qs": "npm:^6.9.5" @@ -6372,7 +6372,7 @@ __metadata: "@storybook/core-events": "workspace:*" "@storybook/core-server": "workspace:*" "@storybook/core-webpack": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.eb42c88.0" + "@storybook/csf": "npm:0.1.4--canary.82.07bccd8.0" "@storybook/csf-plugin": "workspace:*" "@storybook/csf-tools": "workspace:*" "@storybook/docs-tools": "workspace:*" @@ -6527,7 +6527,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/server@workspace:renderers/server" dependencies: - "@storybook/csf": "npm:0.1.4--canary.82.eb42c88.0" + "@storybook/csf": "npm:0.1.4--canary.82.07bccd8.0" "@storybook/csf-tools": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/preview-api": "workspace:*" @@ -6544,7 +6544,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/source-loader@workspace:lib/source-loader" dependencies: - "@storybook/csf": "npm:0.1.4--canary.82.eb42c88.0" + "@storybook/csf": "npm:0.1.4--canary.82.07bccd8.0" "@storybook/types": "workspace:*" estraverse: "npm:^5.2.0" lodash: "npm:^4.17.21" @@ -6723,7 +6723,7 @@ __metadata: resolution: "@storybook/types@workspace:lib/types" dependencies: "@storybook/channels": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.eb42c88.0" + "@storybook/csf": "npm:0.1.4--canary.82.07bccd8.0" "@types/express": "npm:^4.7.0" "@types/fs-extra": "npm:^11.0.1" "@types/node": "npm:^18.0.0" From 9535722a6d2fb7adaa1a346159cde7efb05a4770 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 11 Apr 2024 16:53:28 +0200 Subject: [PATCH 117/380] Update vta.ts --- code/lib/cli/src/automigrate/fixes/vta.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/cli/src/automigrate/fixes/vta.ts b/code/lib/cli/src/automigrate/fixes/vta.ts index c86f957298a8..ef4dd78d0bb5 100644 --- a/code/lib/cli/src/automigrate/fixes/vta.ts +++ b/code/lib/cli/src/automigrate/fixes/vta.ts @@ -48,7 +48,7 @@ export const vta: Fix = { await updateMainConfig({ mainConfigPath, dryRun: !!dryRun }, async (main) => { logger.info(`โœ… Adding "@chromatic-com/storybook" addon`); - main.appendValueToArray(['addons'], '@chromatic-dom/storybook'); + main.appendValueToArray(['addons'], '@chromatic-com/storybook'); }); } }, From 2bc6536b40fcb904d58912c41a2174ed1da4490d Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Thu, 11 Apr 2024 17:02:09 +0200 Subject: [PATCH 118/380] Fix type errors --- code/addons/links/package.json | 2 +- .../angular/src/client/docs/compodoc.ts | 2 +- code/lib/codemod/package.json | 2 +- code/lib/core-server/package.json | 2 +- code/lib/csf-tools/package.json | 2 +- code/lib/manager-api/package.json | 2 +- code/lib/preview-api/package.json | 2 +- .../src/modules/store/args.test.ts | 1 + .../src/modules/store/inferControls.test.ts | 6 ++-- code/lib/source-loader/package.json | 2 +- code/lib/types/package.json | 2 +- code/package.json | 2 +- .../react/src/docs/extractArgTypes.ts | 4 +-- code/renderers/server/package.json | 2 +- code/ui/blocks/package.json | 2 +- .../options/SelectOptions.stories.tsx | 2 +- code/ui/components/package.json | 2 +- code/yarn.lock | 32 +++++++++---------- 18 files changed, 37 insertions(+), 34 deletions(-) diff --git a/code/addons/links/package.json b/code/addons/links/package.json index 848d3ed70599..12db1a5d5ee3 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -67,7 +67,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { - "@storybook/csf": "0.1.4--canary.82.07bccd8.0", + "@storybook/csf": "0.1.4--canary.82.934057e.0", "@storybook/global": "^5.0.0", "ts-dedent": "^2.0.0" }, diff --git a/code/frameworks/angular/src/client/docs/compodoc.ts b/code/frameworks/angular/src/client/docs/compodoc.ts index 9785842648d0..cc6425c6e545 100644 --- a/code/frameworks/angular/src/client/docs/compodoc.ts +++ b/code/frameworks/angular/src/client/docs/compodoc.ts @@ -200,7 +200,7 @@ const extractDefaultValueFromComments = (property: Property, value: any) => { const extractDefaultValue = (property: Property) => { try { - let value: string | boolean = property.defaultValue?.replace(/^'(.*)'$/, '$1'); + let value: string = property.defaultValue?.replace(/^'(.*)'$/, '$1'); value = castDefaultValue(property, value); if (value == null && property.jsdoctags?.length > 0) { diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index 4cb0e7778ba4..3b22056f004d 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -57,7 +57,7 @@ "@babel/core": "^7.23.2", "@babel/preset-env": "^7.23.2", "@babel/types": "^7.23.0", - "@storybook/csf": "0.1.4--canary.82.07bccd8.0", + "@storybook/csf": "0.1.4--canary.82.934057e.0", "@storybook/csf-tools": "workspace:*", "@storybook/node-logger": "workspace:*", "@storybook/types": "workspace:*", diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index bc74ea549e1b..ab90a994ccbf 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -62,7 +62,7 @@ "@storybook/channels": "workspace:*", "@storybook/core-common": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "0.1.4--canary.82.07bccd8.0", + "@storybook/csf": "0.1.4--canary.82.934057e.0", "@storybook/csf-tools": "workspace:*", "@storybook/docs-mdx": "3.0.0", "@storybook/global": "^5.0.0", diff --git a/code/lib/csf-tools/package.json b/code/lib/csf-tools/package.json index 0a983a1f65fe..cef69b34d75d 100644 --- a/code/lib/csf-tools/package.json +++ b/code/lib/csf-tools/package.json @@ -46,7 +46,7 @@ "@babel/parser": "^7.23.0", "@babel/traverse": "^7.23.2", "@babel/types": "^7.23.0", - "@storybook/csf": "0.1.4--canary.82.07bccd8.0", + "@storybook/csf": "0.1.4--canary.82.934057e.0", "@storybook/types": "workspace:*", "fs-extra": "^11.1.0", "recast": "^0.23.5", diff --git a/code/lib/manager-api/package.json b/code/lib/manager-api/package.json index a7580cc35300..67512185ecba 100644 --- a/code/lib/manager-api/package.json +++ b/code/lib/manager-api/package.json @@ -47,7 +47,7 @@ "@storybook/channels": "workspace:*", "@storybook/client-logger": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "0.1.4--canary.82.07bccd8.0", + "@storybook/csf": "0.1.4--canary.82.934057e.0", "@storybook/global": "^5.0.0", "@storybook/icons": "^1.2.5", "@storybook/router": "workspace:*", diff --git a/code/lib/preview-api/package.json b/code/lib/preview-api/package.json index 8beec3506bf5..06c8223ef583 100644 --- a/code/lib/preview-api/package.json +++ b/code/lib/preview-api/package.json @@ -47,7 +47,7 @@ "@storybook/channels": "workspace:*", "@storybook/client-logger": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "0.1.4--canary.82.07bccd8.0", + "@storybook/csf": "0.1.4--canary.82.934057e.0", "@storybook/global": "^5.0.0", "@storybook/types": "workspace:*", "@types/qs": "^6.9.5", diff --git a/code/lib/preview-api/src/modules/store/args.test.ts b/code/lib/preview-api/src/modules/store/args.test.ts index 0d39874c766f..ed8ed42c483e 100644 --- a/code/lib/preview-api/src/modules/store/args.test.ts +++ b/code/lib/preview-api/src/modules/store/args.test.ts @@ -243,6 +243,7 @@ describe('validateOptions', () => { }); it('ignores options and logs an error if options is not an array', () => { + // @ts-expect-error This should give TS error indeed (finally!) expect(validateOptions({ a: 1 }, { a: { options: { 2: 'two' } } })).toStrictEqual({ a: 1 }); expect(once.error).toHaveBeenCalledWith( expect.stringContaining("Invalid argType: 'a.options' should be an array") diff --git a/code/lib/preview-api/src/modules/store/inferControls.test.ts b/code/lib/preview-api/src/modules/store/inferControls.test.ts index 8d754372439d..9293bf771e69 100644 --- a/code/lib/preview-api/src/modules/store/inferControls.test.ts +++ b/code/lib/preview-api/src/modules/store/inferControls.test.ts @@ -58,7 +58,8 @@ describe('inferControls', () => { }) ); - expect(inferredControls.background.control.type).toEqual('color'); + const control = inferredControls.background.control; + expect(typeof control === 'object' && control.type).toEqual('color'); }); it('should return inferred type when using color matcher but arg passed is not a string', () => { @@ -97,7 +98,8 @@ describe('inferControls', () => { ); expect(warnSpy).toHaveBeenCalled(); - expect(inferredControls.background.control.type).toEqual(type.name); + const control = inferredControls.background.control; + expect(typeof control === 'object' && control.type).toEqual(type.name); }); }); }); diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index 0c23f1962e7a..01058e3feae1 100644 --- a/code/lib/source-loader/package.json +++ b/code/lib/source-loader/package.json @@ -45,7 +45,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/csf": "0.1.4--canary.82.07bccd8.0", + "@storybook/csf": "0.1.4--canary.82.934057e.0", "@storybook/types": "workspace:*", "estraverse": "^5.2.0", "lodash": "^4.17.21", diff --git a/code/lib/types/package.json b/code/lib/types/package.json index 07665e44d705..a3e81084dcd4 100644 --- a/code/lib/types/package.json +++ b/code/lib/types/package.json @@ -49,7 +49,7 @@ "file-system-cache": "2.3.0" }, "devDependencies": { - "@storybook/csf": "0.1.4--canary.82.07bccd8.0", + "@storybook/csf": "0.1.4--canary.82.934057e.0", "@types/fs-extra": "^11.0.1", "@types/node": "^18.0.0", "typescript": "^5.3.2" diff --git a/code/package.json b/code/package.json index 6d9b8d414a69..9a0c12960595 100644 --- a/code/package.json +++ b/code/package.json @@ -127,7 +127,7 @@ "@storybook/core-events": "workspace:*", "@storybook/core-server": "workspace:*", "@storybook/core-webpack": "workspace:*", - "@storybook/csf": "0.1.4--canary.82.07bccd8.0", + "@storybook/csf": "0.1.4--canary.82.934057e.0", "@storybook/csf-plugin": "workspace:*", "@storybook/csf-tools": "workspace:*", "@storybook/docs-tools": "workspace:*", diff --git a/code/renderers/react/src/docs/extractArgTypes.ts b/code/renderers/react/src/docs/extractArgTypes.ts index 2da2e2724e7d..7c4c55911255 100644 --- a/code/renderers/react/src/docs/extractArgTypes.ts +++ b/code/renderers/react/src/docs/extractArgTypes.ts @@ -22,9 +22,9 @@ export const extractArgTypes: ArgTypesExtractor = (component) => { description, type: { required, ...sbType }, table: { - type, + type: type ?? undefined, jsDocTags, - defaultValue: defaultSummary, + defaultValue: defaultSummary ?? undefined, }, }; return acc; diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json index 7316820ce51a..cb2d80c1f475 100644 --- a/code/renderers/server/package.json +++ b/code/renderers/server/package.json @@ -46,7 +46,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/csf": "0.1.4--canary.82.07bccd8.0", + "@storybook/csf": "0.1.4--canary.82.934057e.0", "@storybook/csf-tools": "workspace:*", "@storybook/global": "^5.0.0", "@storybook/preview-api": "workspace:*", diff --git a/code/ui/blocks/package.json b/code/ui/blocks/package.json index 2ed20ed7407e..186c47bc3f61 100644 --- a/code/ui/blocks/package.json +++ b/code/ui/blocks/package.json @@ -48,7 +48,7 @@ "@storybook/client-logger": "workspace:*", "@storybook/components": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "0.1.4--canary.82.07bccd8.0", + "@storybook/csf": "0.1.4--canary.82.934057e.0", "@storybook/docs-tools": "workspace:*", "@storybook/global": "^5.0.0", "@storybook/icons": "^1.2.5", diff --git a/code/ui/blocks/src/controls/options/SelectOptions.stories.tsx b/code/ui/blocks/src/controls/options/SelectOptions.stories.tsx index d417c24bd313..6d52b80f625e 100644 --- a/code/ui/blocks/src/controls/options/SelectOptions.stories.tsx +++ b/code/ui/blocks/src/controls/options/SelectOptions.stories.tsx @@ -20,7 +20,7 @@ const argTypeMultiSelect = { options: arrayOptions, }, }, -}; +} as const; const meta = { title: 'Controls/Options/Select', diff --git a/code/ui/components/package.json b/code/ui/components/package.json index e4310e0e3cd0..361a9f30c003 100644 --- a/code/ui/components/package.json +++ b/code/ui/components/package.json @@ -61,7 +61,7 @@ "dependencies": { "@radix-ui/react-slot": "^1.0.2", "@storybook/client-logger": "workspace:*", - "@storybook/csf": "0.1.4--canary.82.07bccd8.0", + "@storybook/csf": "0.1.4--canary.82.934057e.0", "@storybook/global": "^5.0.0", "@storybook/icons": "^1.2.5", "@storybook/theming": "workspace:*", diff --git a/code/yarn.lock b/code/yarn.lock index 5584607d30bc..34ba29c88209 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -4947,7 +4947,7 @@ __metadata: dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.07bccd8.0" + "@storybook/csf": "npm:0.1.4--canary.82.934057e.0" "@storybook/global": "npm:^5.0.0" "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" @@ -5215,7 +5215,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.07bccd8.0" + "@storybook/csf": "npm:0.1.4--canary.82.934057e.0" "@storybook/docs-tools": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" @@ -5446,7 +5446,7 @@ __metadata: "@babel/core": "npm:^7.23.2" "@babel/preset-env": "npm:^7.23.2" "@babel/types": "npm:^7.23.0" - "@storybook/csf": "npm:0.1.4--canary.82.07bccd8.0" + "@storybook/csf": "npm:0.1.4--canary.82.934057e.0" "@storybook/csf-tools": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/types": "workspace:*" @@ -5482,7 +5482,7 @@ __metadata: "@radix-ui/react-scroll-area": "npm:^1.0.5" "@radix-ui/react-slot": "npm:^1.0.2" "@storybook/client-logger": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.07bccd8.0" + "@storybook/csf": "npm:0.1.4--canary.82.934057e.0" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" "@storybook/test": "workspace:*" @@ -5575,7 +5575,7 @@ __metadata: "@storybook/channels": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.07bccd8.0" + "@storybook/csf": "npm:0.1.4--canary.82.934057e.0" "@storybook/csf-tools": "workspace:*" "@storybook/docs-mdx": "npm:3.0.0" "@storybook/global": "npm:^5.0.0" @@ -5657,7 +5657,7 @@ __metadata: "@babel/parser": "npm:^7.23.0" "@babel/traverse": "npm:^7.23.2" "@babel/types": "npm:^7.23.0" - "@storybook/csf": "npm:0.1.4--canary.82.07bccd8.0" + "@storybook/csf": "npm:0.1.4--canary.82.934057e.0" "@storybook/types": "workspace:*" "@types/fs-extra": "npm:^11.0.1" "@types/js-yaml": "npm:^4.0.5" @@ -5669,12 +5669,12 @@ __metadata: languageName: unknown linkType: soft -"@storybook/csf@npm:0.1.4--canary.82.07bccd8.0": - version: 0.1.4--canary.82.07bccd8.0 - resolution: "@storybook/csf@npm:0.1.4--canary.82.07bccd8.0" +"@storybook/csf@npm:0.1.4--canary.82.934057e.0": + version: 0.1.4--canary.82.934057e.0 + resolution: "@storybook/csf@npm:0.1.4--canary.82.934057e.0" dependencies: type-fest: "npm:^2.19.0" - checksum: 10c0/1e00891cfdbf9b9d82f5b5713c463e9499107f96b2e8062f6710f41c586e6abcbf20bdc7d98823e11aff53f2f31ae01608ba06b5c0fb12f142f284c8508ad729 + checksum: 10c0/137cdd7e15540352d9a861689d830e3e0d2f0e247e2650f55390394fc9b5c4df698718f4a5ebfde8dcd9d728ab5d7634a840eefac8874e036f4e532384bcced4 languageName: node linkType: hard @@ -5854,7 +5854,7 @@ __metadata: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.07bccd8.0" + "@storybook/csf": "npm:0.1.4--canary.82.934057e.0" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" "@storybook/router": "workspace:*" @@ -6187,7 +6187,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.07bccd8.0" + "@storybook/csf": "npm:0.1.4--canary.82.934057e.0" "@storybook/global": "npm:^5.0.0" "@storybook/types": "workspace:*" "@types/qs": "npm:^6.9.5" @@ -6372,7 +6372,7 @@ __metadata: "@storybook/core-events": "workspace:*" "@storybook/core-server": "workspace:*" "@storybook/core-webpack": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.07bccd8.0" + "@storybook/csf": "npm:0.1.4--canary.82.934057e.0" "@storybook/csf-plugin": "workspace:*" "@storybook/csf-tools": "workspace:*" "@storybook/docs-tools": "workspace:*" @@ -6527,7 +6527,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/server@workspace:renderers/server" dependencies: - "@storybook/csf": "npm:0.1.4--canary.82.07bccd8.0" + "@storybook/csf": "npm:0.1.4--canary.82.934057e.0" "@storybook/csf-tools": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/preview-api": "workspace:*" @@ -6544,7 +6544,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/source-loader@workspace:lib/source-loader" dependencies: - "@storybook/csf": "npm:0.1.4--canary.82.07bccd8.0" + "@storybook/csf": "npm:0.1.4--canary.82.934057e.0" "@storybook/types": "workspace:*" estraverse: "npm:^5.2.0" lodash: "npm:^4.17.21" @@ -6723,7 +6723,7 @@ __metadata: resolution: "@storybook/types@workspace:lib/types" dependencies: "@storybook/channels": "workspace:*" - "@storybook/csf": "npm:0.1.4--canary.82.07bccd8.0" + "@storybook/csf": "npm:0.1.4--canary.82.934057e.0" "@types/express": "npm:^4.7.0" "@types/fs-extra": "npm:^11.0.1" "@types/node": "npm:^18.0.0" From 8fe99de8a7437b2cb3dcf3b819d1d262bc0b56a0 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 11 Apr 2024 17:03:44 +0200 Subject: [PATCH 119/380] support generating a new story cloned from an existing one --- .../duplicate-story-with-new-name.test.ts | 114 ++++++++++++++++++ .../duplicate-story-with-new-name.ts | 44 +++++++ .../save-from-controls/save-from-controls.ts | 11 +- code/ui/.storybook/manager.tsx | 5 +- 4 files changed, 168 insertions(+), 6 deletions(-) create mode 100644 code/lib/core-server/src/utils/save-from-controls/duplicate-story-with-new-name.test.ts create mode 100644 code/lib/core-server/src/utils/save-from-controls/duplicate-story-with-new-name.ts diff --git a/code/lib/core-server/src/utils/save-from-controls/duplicate-story-with-new-name.test.ts b/code/lib/core-server/src/utils/save-from-controls/duplicate-story-with-new-name.test.ts new file mode 100644 index 000000000000..42131e534578 --- /dev/null +++ b/code/lib/core-server/src/utils/save-from-controls/duplicate-story-with-new-name.test.ts @@ -0,0 +1,114 @@ +/* eslint-disable no-underscore-dangle */ +import { describe, test, expect } from 'vitest'; +import { readCsf, printCsf } from '@storybook/csf-tools'; + +import { duplicateStoryWithNewName } from './duplicate-story-with-new-name'; +import { readFile } from 'fs/promises'; +import { join } from 'path'; +import { format } from 'prettier'; +import { getDiff } from './getDiff'; + +const makeTitle = (userTitle: string) => userTitle; + +const FILES = { + csfVariances: join(__dirname, 'mocks/csf-variances.stories.tsx'), + typescriptConstructs: join(__dirname, 'mocks/typescript-constructs.stories.tsx'), +}; + +describe('success', () => { + test('CSF Variances', async () => { + const before = await format(await readFile(FILES.csfVariances, 'utf-8'), { + parser: 'typescript', + }); + const CSF = await readCsf(FILES.csfVariances, { makeTitle }); + + const parsed = CSF.parse(); + const names = Object.keys(parsed._stories); + + names.forEach((name) => { + duplicateStoryWithNewName(parsed, name, name + 'Duplicated'); + }); + + const after = await format(printCsf(parsed).code, { + parser: 'typescript', + }); + + // check if the code was updated at all + expect(after).not.toBe(before); + + // check if the code was updated correctly + expect(getDiff(before, after)).toMatchInlineSnapshot(` + " ... + + // editing this should fail + export const CSF2 = () => ; + + + export const EmptyDuplicated = {} satisfies Story; + + export const EmptyWithCommentDuplicated = {} satisfies Story; + + export const OnlyArgsDuplicated = {} satisfies Story; + + + + export const RenderNoArgsDuplicated = { + + render: (args) => , + + } satisfies Story; + + + + export const RenderArgsDuplicated = { + + render: (args) => , + + } satisfies Story; + + + + export const RenderExistingArgsDuplicated = { + + render: (args) => , + + } satisfies Story; + + + + export const OrderedArgsDuplicated = { + + render: (args) => , + + } satisfies Story; + + + + export const HasPlayFunctionDuplicated = { + + play: async ({ canvasElement }) => { + + console.log("play"); + + + + canvasElement.style.backgroundColor = "red"; + + }, + + } satisfies Story; + + + + export const CSF2Duplicated = () => ( + + + + ); + + " + `); + }); + test('Typescript Constructs', async () => { + const before = await format(await readFile(FILES.typescriptConstructs, 'utf-8'), { + parser: 'typescript', + }); + const CSF = await readCsf(FILES.typescriptConstructs, { makeTitle }); + + const parsed = CSF.parse(); + const names = Object.keys(parsed._stories); + + names.forEach((name) => { + duplicateStoryWithNewName(parsed, name, name + 'Duplicated'); + }); + + const after = await format(printCsf(parsed).code, { + parser: 'typescript', + }); + + // check if the code was updated at all + expect(after).not.toBe(before); + + // check if the code was updated correctly + expect(getDiff(before, after)).toMatchInlineSnapshot(` + " ... + initial: "bar", + }, + }; + + + export const CastDuplicated: Story = {}; + + export const AsDuplicated = {} as Story; + + export const SatisfiesDuplicated = {} satisfies Story; + + export const NoneDuplicated = {}; + + " + `); + }); +}); diff --git a/code/lib/core-server/src/utils/save-from-controls/duplicate-story-with-new-name.ts b/code/lib/core-server/src/utils/save-from-controls/duplicate-story-with-new-name.ts new file mode 100644 index 000000000000..6651fbc2ead9 --- /dev/null +++ b/code/lib/core-server/src/utils/save-from-controls/duplicate-story-with-new-name.ts @@ -0,0 +1,44 @@ +/* eslint-disable no-underscore-dangle */ +import type { CsfFile } from '@storybook/csf-tools'; +import * as traverse from '@babel/traverse'; +import * as t from '@babel/types'; + +type In = ReturnType; + +export const duplicateStoryWithNewName = (csfFile: In, storyName: string, newStoryName: string) => { + const node = csfFile._storyExports[storyName]; + const cloned = t.cloneNode(node) as t.VariableDeclarator; + + let found = false; + traverse.default(cloned, { + Identifier(path) { + if (found) { + return; + } + + if (path.node.name === storyName) { + found = true; + path.node.name = newStoryName; + } + }, + ObjectProperty(path) { + const key = path.get('key'); + if (key.isIdentifier() && key.node.name === 'args') { + path.remove(); + } + }, + + noScope: true, + }); + + traverse.default(csfFile._ast, { + Program(path) { + path.pushContainer( + 'body', + t.exportNamedDeclaration(t.variableDeclaration('const', [cloned])) + ); + }, + }); + + return cloned; +}; diff --git a/code/lib/core-server/src/utils/save-from-controls/save-from-controls.ts b/code/lib/core-server/src/utils/save-from-controls/save-from-controls.ts index 7ac906c16fdb..e74c632b1f95 100644 --- a/code/lib/core-server/src/utils/save-from-controls/save-from-controls.ts +++ b/code/lib/core-server/src/utils/save-from-controls/save-from-controls.ts @@ -6,6 +6,7 @@ import type { OptionsWithRequiredCache } from '../whats-new'; import { readCsf, writeCsf } from '@storybook/csf-tools'; import { join } from 'path'; import { updateArgsInCsfFile } from './update-args-in-csf-file'; +import { duplicateStoryWithNewName } from './duplicate-story-with-new-name'; // import { sendTelemetryError } from '../withTelemetry'; interface RequestSaveStoryPayload { @@ -38,13 +39,17 @@ export function initializeSaveFromControls( // find the export_name for the id const [name] = - Object.entries(parsed._stories).find(([key, value]) => value.id.endsWith(`--${id}`)) || []; + Object.entries(parsed._stories).find(([_, value]) => value.id.endsWith(`--${id}`)) || []; let node; - // find the AST node for the export_name, if none can be found, create a new story if (!name) { - node = undefined; + throw new Error(`no story found with id: ${id}`); + } + + // find the AST node for the export_name, if none can be found, create a new story + if (data.name) { + node = duplicateStoryWithNewName(parsed, data.name, name); throw new Error(`creation of new story: not yet implemented`); } else { node = csf.getStoryExport(name); diff --git a/code/ui/.storybook/manager.tsx b/code/ui/.storybook/manager.tsx index d7a53b88ea81..f3dbe1e4d2cc 100644 --- a/code/ui/.storybook/manager.tsx +++ b/code/ui/.storybook/manager.tsx @@ -19,7 +19,7 @@ interface RequestSaveStoryPayload { // The updated list of set args args: Record; // The exported name of the Story -> This information doesn't exist in the index.json yet. - name: string; + name?: string; } addons.register('my-addon', (api) => { @@ -50,12 +50,11 @@ addons.register('my-addon', (api) => { + +
+ +
+
+ +
+
+ ); +} + +export default { + component: Component, +} as Meta; + +export const Default: StoryObj = { + play: async ({ canvasElement, step }) => { + const canvas = within(canvasElement); + + const loginBtn = canvas.getByText('Login'); + const logoutBtn = canvas.getByText('Logout'); + const accessRouteBtn = canvas.getByText('Access protected route'); + + await step('accessRoute flow - logged out', async () => { + await userEvent.click(accessRouteBtn); + await expect(cookies().get).toHaveBeenCalledWith('user'); + await expect(redirect).toHaveBeenCalledWith('/'); + }); + + await step('accessRoute flow - logged', async () => { + cookies.mockRestore(); + cookies().set('user', 'storybookjs'); + await userEvent.click(accessRouteBtn); + await expect(cookies().get).toHaveBeenCalledWith('user'); + await expect(revalidatePath).toHaveBeenCalledWith('/'); + await expect(redirect).toHaveBeenCalledWith('/protected'); + }); + + await step('logout flow', async () => { + cookies.mockRestore(); + await userEvent.click(logoutBtn); + await expect(cookies().delete).toHaveBeenCalled(); + await expect(revalidatePath).toHaveBeenCalledWith('/'); + await expect(redirect).toHaveBeenCalledWith('/'); + }); + + await step('login flow', async () => { + cookies.mockRestore(); + await userEvent.click(loginBtn); + await expect(cookies().set).toHaveBeenCalledWith('user', 'storybookjs'); + await expect(revalidatePath).toHaveBeenCalledWith('/'); + await expect(redirect).toHaveBeenCalledWith('/'); + }); + }, +}; diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/server-actions.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/server-actions.tsx new file mode 100644 index 000000000000..ffeba72ab848 --- /dev/null +++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/server-actions.tsx @@ -0,0 +1,28 @@ +'use server'; + +import { cookies } from 'next/headers'; +import { revalidatePath } from 'next/cache'; +import { redirect } from 'next/navigation'; + +export async function accessRoute() { + const user = cookies().get('user'); + + if (!user) { + redirect('/'); + } + + revalidatePath('/'); + redirect(`/protected`); +} + +export async function logout() { + cookies().delete('user'); + revalidatePath('/'); + redirect('/'); +} + +export async function login() { + cookies().set('user', 'storybookjs'); + revalidatePath('/'); + redirect('/'); +} From 28652af61584c880cbbe9845461e85ced358e0f5 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Thu, 11 Apr 2024 16:47:15 +0200 Subject: [PATCH 150/380] add export passthroughs in the mocks --- .../nextjs/src/export-mocks/cache/index.ts | 3 +- .../nextjs/src/export-mocks/headers/index.ts | 9 ++++- .../src/export-mocks/navigation/index.ts | 37 +++++++++++++++++-- .../nextjs/src/export-mocks/router/index.ts | 37 +++++++++++++++++-- 4 files changed, 78 insertions(+), 8 deletions(-) diff --git a/code/frameworks/nextjs/src/export-mocks/cache/index.ts b/code/frameworks/nextjs/src/export-mocks/cache/index.ts index d0a330792713..7529a220aa76 100644 --- a/code/frameworks/nextjs/src/export-mocks/cache/index.ts +++ b/code/frameworks/nextjs/src/export-mocks/cache/index.ts @@ -3,5 +3,6 @@ import { fn } from '@storybook/test'; // re-exports of the actual module export * from 'next/cache.actual'; -// mock utilities/overrides +// mock utilities/overrides (as of Next v14.2.0) export const revalidatePath = fn().mockName('revalidatePath'); +export const revalidateTag = fn().mockName('revalidateTag'); diff --git a/code/frameworks/nextjs/src/export-mocks/headers/index.ts b/code/frameworks/nextjs/src/export-mocks/headers/index.ts index 7c2114456dc0..d14507fdfb2e 100644 --- a/code/frameworks/nextjs/src/export-mocks/headers/index.ts +++ b/code/frameworks/nextjs/src/export-mocks/headers/index.ts @@ -1,6 +1,13 @@ +import { fn } from '@storybook/test'; +import * as originalHeaders from 'next/headers.actual'; + // re-exports of the actual module export * from 'next/headers.actual'; -// mock utilities/overrides +// mock utilities/overrides (as of Next v14.2.0) export { headers } from './headers'; export { cookies } from './cookies'; + +// passthrough mocks - keep original implementation but allow for spying +const draftMode = fn(originalHeaders.draftMode).mockName('draftMode'); +export { draftMode }; diff --git a/code/frameworks/nextjs/src/export-mocks/navigation/index.ts b/code/frameworks/nextjs/src/export-mocks/navigation/index.ts index bba55c218065..bb369815366f 100644 --- a/code/frameworks/nextjs/src/export-mocks/navigation/index.ts +++ b/code/frameworks/nextjs/src/export-mocks/navigation/index.ts @@ -1,6 +1,7 @@ import type { Mock } from '@storybook/test'; import { fn } from '@storybook/test'; import { NextjsRouterMocksNotAvailable } from '@storybook/core-events/preview-errors'; +import * as originalNavigation from 'next/navigation.actual'; let navigationAPI: { push: Mock; @@ -54,7 +55,37 @@ const getRouter = () => { // re-exports of the actual module export * from 'next/navigation.actual'; -// mock utilities/overrides -export const redirect = fn().mockName('redirect'); +// mock utilities/overrides (as of Next v14.2.0) +const redirect = fn().mockName('redirect'); -export { createNavigation, getRouter }; +// passthrough mocks - keep original implementation but allow for spying +const useSearchParams = fn(originalNavigation.useSearchParams).mockName('useSearchParams'); +const usePathname = fn(originalNavigation.usePathname).mockName('usePathname'); +const useSelectedLayoutSegment = fn(originalNavigation.useSelectedLayoutSegment).mockName( + 'useSelectedLayoutSegment' +); +const useSelectedLayoutSegments = fn(originalNavigation.useSelectedLayoutSegments).mockName( + 'useSelectedLayoutSegments' +); +const useParams = fn(originalNavigation.useParams).mockName('useParams'); +const useRouter = fn(originalNavigation.useRouter).mockName('useRouter'); +const useServerInsertedHTML = fn(originalNavigation.useServerInsertedHTML).mockName( + 'useServerInsertedHTML' +); +const notFound = fn(originalNavigation.notFound).mockName('notFound'); +const permanentRedirect = fn(originalNavigation.permanentRedirect).mockName('permanentRedirect'); + +export { + createNavigation, + getRouter, + redirect, + useSearchParams, + usePathname, + useSelectedLayoutSegment, + useSelectedLayoutSegments, + useParams, + useRouter, + useServerInsertedHTML, + notFound, + permanentRedirect, +}; diff --git a/code/frameworks/nextjs/src/export-mocks/router/index.ts b/code/frameworks/nextjs/src/export-mocks/router/index.ts index a28fcce2aaae..9058b3de752f 100644 --- a/code/frameworks/nextjs/src/export-mocks/router/index.ts +++ b/code/frameworks/nextjs/src/export-mocks/router/index.ts @@ -2,7 +2,7 @@ import type { Mock } from '@storybook/test'; import { fn } from '@storybook/test'; import { NextjsRouterMocksNotAvailable } from '@storybook/core-events/preview-errors'; import type { NextRouter, SingletonRouter } from 'next/router'; -import singletonRouter from 'next/router.actual'; +import singletonRouter, * as originalRouter from 'next/router.actual'; const defaultRouterState = { route: '/', @@ -109,5 +109,36 @@ const getRouter = () => { export * from 'next/router.actual'; export default singletonRouter; -// mock utilities/overrides -export { createRouter, getRouter }; +// mock utilities/overrides (as of Next v14.2.0) +// passthrough mocks - keep original implementation but allow for spying +const useSearchParams = fn(originalRouter.useSearchParams).mockName('useSearchParams'); +const usePathname = fn(originalRouter.usePathname).mockName('usePathname'); +const useSelectedLayoutSegment = fn(originalRouter.useSelectedLayoutSegment).mockName( + 'useSelectedLayoutSegment' +); +const useSelectedLayoutSegments = fn(originalRouter.useSelectedLayoutSegments).mockName( + 'useSelectedLayoutSegments' +); +const useParams = fn(originalRouter.useParams).mockName('useParams'); +const useRouter = fn(originalRouter.useRouter).mockName('useRouter'); +const useServerInsertedHTML = fn(originalRouter.useServerInsertedHTML).mockName( + 'useServerInsertedHTML' +); +const notFound = fn(originalRouter.notFound).mockName('notFound'); +const redirect = fn(originalRouter.redirect).mockName('redirect'); +const permanentRedirect = fn(originalRouter.permanentRedirect).mockName('permanentRedirect'); + +export { + createRouter, + getRouter, + useSearchParams, + usePathname, + useSelectedLayoutSegment, + useSelectedLayoutSegments, + useParams, + useRouter, + useServerInsertedHTML, + notFound, + redirect, + permanentRedirect, +}; From 2eb2d48962c2be3f801d5652300a20ea450eb96d Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Thu, 11 Apr 2024 17:05:32 +0200 Subject: [PATCH 151/380] fix next/router exports --- .../nextjs/src/export-mocks/router/index.ts | 31 ++----------------- 1 file changed, 2 insertions(+), 29 deletions(-) diff --git a/code/frameworks/nextjs/src/export-mocks/router/index.ts b/code/frameworks/nextjs/src/export-mocks/router/index.ts index 9058b3de752f..49e89a6c5eb7 100644 --- a/code/frameworks/nextjs/src/export-mocks/router/index.ts +++ b/code/frameworks/nextjs/src/export-mocks/router/index.ts @@ -111,34 +111,7 @@ export default singletonRouter; // mock utilities/overrides (as of Next v14.2.0) // passthrough mocks - keep original implementation but allow for spying -const useSearchParams = fn(originalRouter.useSearchParams).mockName('useSearchParams'); -const usePathname = fn(originalRouter.usePathname).mockName('usePathname'); -const useSelectedLayoutSegment = fn(originalRouter.useSelectedLayoutSegment).mockName( - 'useSelectedLayoutSegment' -); -const useSelectedLayoutSegments = fn(originalRouter.useSelectedLayoutSegments).mockName( - 'useSelectedLayoutSegments' -); -const useParams = fn(originalRouter.useParams).mockName('useParams'); const useRouter = fn(originalRouter.useRouter).mockName('useRouter'); -const useServerInsertedHTML = fn(originalRouter.useServerInsertedHTML).mockName( - 'useServerInsertedHTML' -); -const notFound = fn(originalRouter.notFound).mockName('notFound'); -const redirect = fn(originalRouter.redirect).mockName('redirect'); -const permanentRedirect = fn(originalRouter.permanentRedirect).mockName('permanentRedirect'); +const withRouter = fn(originalRouter.withRouter).mockName('withRouter'); -export { - createRouter, - getRouter, - useSearchParams, - usePathname, - useSelectedLayoutSegment, - useSelectedLayoutSegments, - useParams, - useRouter, - useServerInsertedHTML, - notFound, - redirect, - permanentRedirect, -}; +export { createRouter, getRouter, useRouter, withRouter }; From cbaf6327707dc327e3e9391ba64e96d86749be31 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Fri, 12 Apr 2024 08:22:51 +0200 Subject: [PATCH 152/380] fix build issues --- .../frameworks/nextjs/src/export-mocks/navigation/index.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/code/frameworks/nextjs/src/export-mocks/navigation/index.ts b/code/frameworks/nextjs/src/export-mocks/navigation/index.ts index bb369815366f..dabfdece7881 100644 --- a/code/frameworks/nextjs/src/export-mocks/navigation/index.ts +++ b/code/frameworks/nextjs/src/export-mocks/navigation/index.ts @@ -67,7 +67,6 @@ const useSelectedLayoutSegment = fn(originalNavigation.useSelectedLayoutSegment) const useSelectedLayoutSegments = fn(originalNavigation.useSelectedLayoutSegments).mockName( 'useSelectedLayoutSegments' ); -const useParams = fn(originalNavigation.useParams).mockName('useParams'); const useRouter = fn(originalNavigation.useRouter).mockName('useRouter'); const useServerInsertedHTML = fn(originalNavigation.useServerInsertedHTML).mockName( 'useServerInsertedHTML' @@ -75,6 +74,12 @@ const useServerInsertedHTML = fn(originalNavigation.useServerInsertedHTML).mockN const notFound = fn(originalNavigation.notFound).mockName('notFound'); const permanentRedirect = fn(originalNavigation.permanentRedirect).mockName('permanentRedirect'); +// Params, not exported by Next.js, is manually declared to avoid inference issues. +interface Params { + [key: string]: string | string[]; +} +const useParams = fn<[], Params>(originalNavigation.useParams).mockName('useParams'); + export { createNavigation, getRouter, From ec8b5e0b3c9637f117cc036a968591df60042337 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Fri, 12 Apr 2024 10:12:52 +0200 Subject: [PATCH 153/380] add getPackageAliases helper for jest portable stories --- MIGRATION.md | 55 ++++++++++---- code/frameworks/nextjs/package.json | 9 +++ .../nextjs/src/export-mocks/index.ts | 1 + .../nextjs/src/export-mocks/webpack.ts | 26 ++++--- .../nextjs/jest.config.js | 4 +- .../nextjs/yarn.lock | 72 +++++++++---------- 6 files changed, 107 insertions(+), 60 deletions(-) create mode 100644 code/frameworks/nextjs/src/export-mocks/index.ts diff --git a/MIGRATION.md b/MIGRATION.md index eecaf94950a2..2cd7d04f6fff 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -1,7 +1,10 @@

Migration

-- [From version 7.x to 8.0.0](#from-version-7x-to-800) +- [From version 8.0.x to 8.1.x](#from-version-80x-to-81x) - [Portable stories](#portable-stories) + - [@storybook/nextjs requires specific path aliases to be setup](#storybooknextjs-requires-specific-path-aliases-to-be-setup) +- [From version 7.x to 8.0.0](#from-version-7x-to-800) + - [Portable stories](#portable-stories-1) - [Project annotations are now merged instead of overwritten in composeStory](#project-annotations-are-now-merged-instead-of-overwritten-in-composestory) - [Type change in `composeStories` API](#type-change-in-composestories-api) - [Composed Vue stories are now components instead of functions](#composed-vue-stories-are-now-components-instead-of-functions) @@ -90,17 +93,17 @@ - [Tab addons cannot manually route, Tool addons can filter their visibility via tabId](#tab-addons-cannot-manually-route-tool-addons-can-filter-their-visibility-via-tabid) - [Removed `config` preset](#removed-config-preset-1) - [From version 7.5.0 to 7.6.0](#from-version-750-to-760) - - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated) - - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated) - - [typescript.skipBabel deprecated](#typescriptskipbabel-deprecated) - - [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop) - - [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react) + - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated) + - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated) + - [typescript.skipBabel deprecated](#typescriptskipbabel-deprecated) + - [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop) + - [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react) - [From version 7.4.0 to 7.5.0](#from-version-740-to-750) - - [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated) - - [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers) + - [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated) + - [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers) - [From version 7.0.0 to 7.2.0](#from-version-700-to-720) - - [Addon API is more type-strict](#addon-api-is-more-type-strict) - - [Addon-controls hideNoControlsWarning parameter is deprecated](#addon-controls-hidenocontrolswarning-parameter-is-deprecated) + - [Addon API is more type-strict](#addon-api-is-more-type-strict) + - [Addon-controls hideNoControlsWarning parameter is deprecated](#addon-controls-hidenocontrolswarning-parameter-is-deprecated) - [From version 6.5.x to 7.0.0](#from-version-65x-to-700) - [7.0 breaking changes](#70-breaking-changes) - [Dropped support for Node 15 and below](#dropped-support-for-node-15-and-below) @@ -126,7 +129,7 @@ - [Deploying build artifacts](#deploying-build-artifacts) - [Dropped support for file URLs](#dropped-support-for-file-urls) - [Serving with nginx](#serving-with-nginx) - - [Ignore story files from node_modules](#ignore-story-files-from-node_modules) + - [Ignore story files from node\_modules](#ignore-story-files-from-node_modules) - [7.0 Core changes](#70-core-changes) - [7.0 feature flags removed](#70-feature-flags-removed) - [Story context is prepared before for supporting fine grained updates](#story-context-is-prepared-before-for-supporting-fine-grained-updates) @@ -140,7 +143,7 @@ - [Addon-interactions: Interactions debugger is now default](#addon-interactions-interactions-debugger-is-now-default) - [7.0 Vite changes](#70-vite-changes) - [Vite builder uses Vite config automatically](#vite-builder-uses-vite-config-automatically) - - [Vite cache moved to node_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook) + - [Vite cache moved to node\_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook) - [7.0 Webpack changes](#70-webpack-changes) - [Webpack4 support discontinued](#webpack4-support-discontinued) - [Babel mode v7 exclusively](#babel-mode-v7-exclusively) @@ -190,7 +193,7 @@ - [Dropped addon-docs manual babel configuration](#dropped-addon-docs-manual-babel-configuration) - [Dropped addon-docs manual configuration](#dropped-addon-docs-manual-configuration) - [Autoplay in docs](#autoplay-in-docs) - - [Removed STORYBOOK_REACT_CLASSES global](#removed-storybook_react_classes-global) + - [Removed STORYBOOK\_REACT\_CLASSES global](#removed-storybook_react_classes-global) - [7.0 Deprecations and default changes](#70-deprecations-and-default-changes) - [storyStoreV7 enabled by default](#storystorev7-enabled-by-default) - [`Story` type deprecated](#story-type-deprecated) @@ -403,6 +406,32 @@ - [Packages renaming](#packages-renaming) - [Deprecated embedded addons](#deprecated-embedded-addons) +## From version 8.0.x to 8.1.x + +### Portable stories + +#### @storybook/nextjs requires specific path aliases to be setup + +In order to properly mock the `next/router`, `next/header`, `next/navigation` and `next/cache` APIs, the `@storybook/nextjs` framework includes internal Webpack aliases to those modules. If you use portable stories in your Jest configuration, you will run into the following issue: + +``` +Cannot find module 'next/navigation.actual' from 'node_modules/@storybook/nextjs/dist/export-mocks/navigation/index.js' +``` + +To fix it, you should set the aliases in your Jest config files `moduleNameMapper` property using the `getPackageAliases` helper from `@storybook/nextjs/export-mocks`: + +```js +const nextJest = require("next/jest.js"); +const { getPackageAliases } = require("@storybook/nextjs/export-mocks"); +const createJestConfig = nextJest(); +const customJestConfig = { + moduleNameMapper: { + ...getPackageAliases(), // Add aliases for @storybook/nextjs mocks + }, +}; +module.exports = createJestConfig(customJestConfig); +``` + ## From version 7.x to 8.0.0 ### Portable stories diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index dd016db3fb95..b09b2f383295 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -47,6 +47,11 @@ "require": "./dist/next-image-loader-stub.js", "import": "./dist/next-image-loader-stub.mjs" }, + "./export-mocks": { + "types": "./dist/export-mocks/index.d.ts", + "require": "./dist/export-mocks/index.js", + "import": "./dist/export-mocks/index.mjs" + }, "./headers.mock": { "types": "./dist/export-mocks/headers/index.d.ts", "require": "./dist/export-mocks/headers/index.js", @@ -75,6 +80,9 @@ "dist/image-context": [ "dist/image-context.d.ts" ], + "export-mocks": [ + "dist/export-mocks/index.d.ts" + ], "cache.mock": [ "dist/export-mocks/cache/index.d.ts" ], @@ -187,6 +195,7 @@ "./src/index.ts", "./src/preset.ts", "./src/preview.tsx", + "./src/export-mocks/index.ts", "./src/export-mocks/cache/index.ts", "./src/export-mocks/headers/index.ts", "./src/export-mocks/router/index.ts", diff --git a/code/frameworks/nextjs/src/export-mocks/index.ts b/code/frameworks/nextjs/src/export-mocks/index.ts new file mode 100644 index 000000000000..111ad162ec3f --- /dev/null +++ b/code/frameworks/nextjs/src/export-mocks/index.ts @@ -0,0 +1 @@ +export { getPackageAliases } from './webpack'; diff --git a/code/frameworks/nextjs/src/export-mocks/webpack.ts b/code/frameworks/nextjs/src/export-mocks/webpack.ts index 74d048cd5706..5f217df13ffe 100644 --- a/code/frameworks/nextjs/src/export-mocks/webpack.ts +++ b/code/frameworks/nextjs/src/export-mocks/webpack.ts @@ -1,19 +1,18 @@ import { dirname, join } from 'path'; import type { Configuration as WebpackConfig } from 'webpack'; -export const configureNextExportMocks = (baseConfig: WebpackConfig): void => { - const resolve = baseConfig.resolve ?? {}; +export const getPackageAliases = ({ useESM = false }: { useESM?: boolean } = {}) => { + const extension = useESM ? 'mjs' : 'js'; const packageLocation = dirname(require.resolve('@storybook/nextjs/package.json')); // Use paths for both next/xyz and @storybook/nextjs/xyz imports // to make sure they all serve the MJS version of the file - const headersPath = join(packageLocation, '/dist/export-mocks/headers/index.mjs'); - const navigationPath = join(packageLocation, '/dist/export-mocks/navigation/index.mjs'); - const cachePath = join(packageLocation, '/dist/export-mocks/cache/index.mjs'); - const routerPath = join(packageLocation, '/dist/export-mocks/router/index.mjs'); + const headersPath = join(packageLocation, `/dist/export-mocks/headers/index.${extension}`); + const navigationPath = join(packageLocation, `/dist/export-mocks/navigation/index.${extension}`); + const cachePath = join(packageLocation, `/dist/export-mocks/cache/index.${extension}`); + const routerPath = join(packageLocation, `/dist/export-mocks/router/index.${extension}`); - resolve.alias = { - ...resolve.alias, - // *.actual paths are used as reexports of the original module + return { + // "*.actual" paths are used as reexports of the original module 'next/headers.actual': require.resolve('next/headers'), 'next/headers': headersPath, '@storybook/nextjs/headers.mock': headersPath, @@ -31,3 +30,12 @@ export const configureNextExportMocks = (baseConfig: WebpackConfig): void => { '@storybook/nextjs/cache.mock': cachePath, }; }; + +export const configureNextExportMocks = (baseConfig: WebpackConfig): void => { + const resolve = baseConfig.resolve ?? {}; + + resolve.alias = { + ...resolve.alias, + ...getPackageAliases(), + }; +}; diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/jest.config.js b/test-storybooks/portable-stories-kitchen-sink/nextjs/jest.config.js index deb85e5a4b0e..3867a50e7bc7 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/jest.config.js +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/jest.config.js @@ -1,4 +1,5 @@ const nextJest = require('next/jest.js'); +const { getPackageAliases } = require('@storybook/nextjs/export-mocks'); const createJestConfig = nextJest({ // Provide the path to your Next.js app to load next.config.js and .env files in your test environment @@ -11,9 +12,8 @@ const customJestConfig = { testEnvironment: 'jsdom', // Add more setup options before each test is run setupFilesAfterEnv: ['./jest.setup.ts'], - // TODO add docs about this: alias next/headers to @storybook/nextjs/headers moduleNameMapper: { - '^next/headers$': '@storybook/nextjs/headers.mock', + ...getPackageAliases() }, }; diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock b/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock index f2523cdcfdc0..7e95fae96fcf 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock @@ -2586,7 +2586,7 @@ __metadata: "@storybook/builder-webpack5@file:../../../code/builders/builder-webpack5::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/builder-webpack5@file:../../../code/builders/builder-webpack5#../../../code/builders/builder-webpack5::hash=c0c586&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/builder-webpack5@file:../../../code/builders/builder-webpack5#../../../code/builders/builder-webpack5::hash=983659&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" @@ -2625,20 +2625,20 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 10/f4fe0264184b91d9a96baf2d35fc7c7c212b516901650c852f61c2aec2e6b7d81f6828b7ca7ce34f1623bab5cd838936d5877d982df0fa75cab577af78ce79ef + checksum: 10/f84f41cd8ac80376ba603f4bb58da565f2b0e95ed37593279d85c4e5573de64633f10b7c6f2bd399f6d40057f1c97934760b969326520250f6de5efd07ac967b languageName: node linkType: hard "@storybook/channels@file:../../../code/lib/channels::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/channels@file:../../../code/lib/channels#../../../code/lib/channels::hash=413c8e&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/channels@file:../../../code/lib/channels#../../../code/lib/channels::hash=3a33a2&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" "@storybook/global": "npm:^5.0.0" telejson: "npm:^7.2.0" tiny-invariant: "npm:^1.3.1" - checksum: 10/6091e0ca5a19b46589877a6a17cac725ef863a8cdf61d812261673e16227490f8b80fcf26daa8924dbcaad434c91118ac399f3a610c7eec5ed094e7b0dfd0947 + checksum: 10/cda1b155f07fdac919a29e5a5287ae33ef4b3ed9c5c9816c29e17e3aa0dd788dc59da8775c40341ebcbd426ecf4f9ab629949dfe945834f48db7ca6053c062f1 languageName: node linkType: hard @@ -2691,10 +2691,10 @@ __metadata: "@storybook/client-logger@file:../../../code/lib/client-logger::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/client-logger@file:../../../code/lib/client-logger#../../../code/lib/client-logger::hash=6408e1&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/client-logger@file:../../../code/lib/client-logger#../../../code/lib/client-logger::hash=f3ac76&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" - checksum: 10/ff3312279cf1bcaa3fcf91149951e4b7b6cba79ddbb0f80e488126a38bf1f7ceab4ad43cf40324b5ec9c3a8a786695042bc7cd47a0ae0a4835f06dddc5fb214e + checksum: 10/00b5cfade208483f5ec85c8aa59cabf402502a4cf1d9c3ee24a311a396e65ce97f0a3d4356aac9f413c8d84c9804ccb07aaeda6f3d553799e6e036960f4a2fbe languageName: node linkType: hard @@ -2743,7 +2743,7 @@ __metadata: "@storybook/core-common@file:../../../code/lib/core-common::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/core-common@file:../../../code/lib/core-common#../../../code/lib/core-common::hash=26f1e6&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/core-common@file:../../../code/lib/core-common#../../../code/lib/core-common::hash=be2541&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-events": "workspace:*" "@storybook/csf-tools": "workspace:*" @@ -2773,16 +2773,16 @@ __metadata: tiny-invariant: "npm:^1.3.1" ts-dedent: "npm:^2.0.0" util: "npm:^0.12.4" - checksum: 10/7b692d71f9d170253ad376d67d364d351eff3d6f9b21fcf2471aefbf78fe4fdfb61a24f444630ad0bcbe3d560b92350271087e03f7e040cedbbfbb142ef0bc7b + checksum: 10/b8502748d79920a961510e19eb759172ff2a04699b16c458a6d00dd8e73552a41e15873d57bddfc5f87904d11c8fb308061a507aa445fbf34306d92ffb329c2c languageName: node linkType: hard "@storybook/core-events@file:../../../code/lib/core-events::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/core-events@file:../../../code/lib/core-events#../../../code/lib/core-events::hash=3d1227&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/core-events@file:../../../code/lib/core-events#../../../code/lib/core-events::hash=11b404&locator=portable-stories-nextjs%40workspace%3A." dependencies: ts-dedent: "npm:^2.0.0" - checksum: 10/9ecdadbfc30f79f4ef930595681e39197e8545d32308b9e9a1829f3f67047521d44c66664386f6be62a75019abe67e5b37d08bd9ced83eeee28c0602f8bed5fa + checksum: 10/5c276f3805d92b799c0c7c4c111fff2f59522900b855c634472bdb925b5b917a34d28c41ff4b4d5ed88bbb3b78671a6a36764b67ae99085d9758052d6fa51e09 languageName: node linkType: hard @@ -2841,14 +2841,14 @@ __metadata: "@storybook/core-webpack@file:../../../code/lib/core-webpack::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/core-webpack@file:../../../code/lib/core-webpack#../../../code/lib/core-webpack::hash=1c6e9a&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/core-webpack@file:../../../code/lib/core-webpack#../../../code/lib/core-webpack::hash=d17dda&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-common": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/types": "workspace:*" "@types/node": "npm:^18.0.0" ts-dedent: "npm:^2.0.0" - checksum: 10/af79e1e751158c7d47475736c052cf1fd6535fbaa131168141a06eef2ed5f178165771dba4e4995a567d5d180d4af33a4e75c573153ec39a838901cbb16aa4c1 + checksum: 10/2e56db38374ec96f01c00c0fa4c8a9090c1db1d56c8c611a93d1a0c60769aa6a2c751ed29fa6c3a3a7adbf99d457287908e8e01ee1848ab6c59f6837934d81bf languageName: node linkType: hard @@ -2864,7 +2864,7 @@ __metadata: "@storybook/csf-tools@file:../../../code/lib/csf-tools::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/csf-tools@file:../../../code/lib/csf-tools#../../../code/lib/csf-tools::hash=703916&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/csf-tools@file:../../../code/lib/csf-tools#../../../code/lib/csf-tools::hash=69584a&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@babel/generator": "npm:^7.23.0" "@babel/parser": "npm:^7.23.0" @@ -2875,7 +2875,7 @@ __metadata: fs-extra: "npm:^11.1.0" recast: "npm:^0.23.5" ts-dedent: "npm:^2.0.0" - checksum: 10/b597a467657223667710c73bcdd8d85e481a7c088e816539dd9513f2a42cb825e1d3fdd5461772d969201d2f6901280c30a9712d8711b7e12661a01d692f6871 + checksum: 10/7fce79866ace04b9a2bc78a66a03e27e6e770b4279e1b40c08634bce01eb57be22f5f192f73c6a65cc959c8910f63a3d35e31a71fe3ac821aea095722e324710 languageName: node linkType: hard @@ -2906,7 +2906,7 @@ __metadata: "@storybook/docs-tools@file:../../../code/lib/docs-tools::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/docs-tools@file:../../../code/lib/docs-tools#../../../code/lib/docs-tools::hash=0f1a92&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/docs-tools@file:../../../code/lib/docs-tools#../../../code/lib/docs-tools::hash=55c8ec&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-common": "workspace:*" "@storybook/preview-api": "workspace:*" @@ -2915,7 +2915,7 @@ __metadata: assert: "npm:^2.1.0" doctrine: "npm:^3.0.0" lodash: "npm:^4.17.21" - checksum: 10/6efb67c748bf9616313844cc482a31b49834d7b94767a544b7a5ed9a2e2d28c3d8a945162040b09f39af3f36c5288c00a83a67166c5d6a91b38875b8ff039acd + checksum: 10/59ee342654240884ea89aa3f66d86fbab06759af23b3897635b1976c75c77dcb08b908b46528138294febc5347eb5564728e956cd66d0ee170b3438ec8269a49 languageName: node linkType: hard @@ -2938,7 +2938,7 @@ __metadata: "@storybook/instrumenter@file:../../../code/lib/instrumenter::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/instrumenter@file:../../../code/lib/instrumenter#../../../code/lib/instrumenter::hash=da2c8f&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/instrumenter@file:../../../code/lib/instrumenter#../../../code/lib/instrumenter::hash=ffe9d7&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" @@ -2947,7 +2947,7 @@ __metadata: "@storybook/preview-api": "workspace:*" "@vitest/utils": "npm:^1.3.1" util: "npm:^0.12.4" - checksum: 10/a55b3615eee655ef969641128c408ad5a6f3a0196af135e4ea1aa9289b9a2c98d84b34c3a57a25ca8cf6e619faad5fe6440232097fb99ecf7fc0341395a8ce16 + checksum: 10/84948fcfafe05e5934117e6c514a1788f9d146d28f749c11313e5f65c60f3f20be0e659e97f14a6b5ce405b01afa4941571f644a9cb88d8b3a956c2c79413723 languageName: node linkType: hard @@ -2983,7 +2983,7 @@ __metadata: "@storybook/nextjs@file:../../../code/frameworks/nextjs::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/nextjs@file:../../../code/frameworks/nextjs#../../../code/frameworks/nextjs::hash=54d145&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/nextjs@file:../../../code/frameworks/nextjs#../../../code/frameworks/nextjs::hash=fbb1b0&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@babel/core": "npm:^7.23.2" "@babel/plugin-syntax-bigint": "npm:^7.8.3" @@ -3040,20 +3040,20 @@ __metadata: optional: true webpack: optional: true - checksum: 10/0cf1a6cb4f106b7073a4932f2b2432b946bae36378fe53443eda98a867c2a1cd4271ea34d737016ea9a21c43f71d70202894084232164444d12784bd81726ebc + checksum: 10/c7e8437a541d526982a78e734592a1e5ce09053dbda221b7d4717b657d4595a2ff5fd9af17d55e695a6fde6610c4c856ec15f8039372d18237daa1fb7ccc86a4 languageName: node linkType: hard "@storybook/node-logger@file:../../../code/lib/node-logger::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/node-logger@file:../../../code/lib/node-logger#../../../code/lib/node-logger::hash=76992b&locator=portable-stories-nextjs%40workspace%3A." - checksum: 10/39a64d0cfc1ab16e4e808edc63fb9b5b76c038acb864b00d756260f9b5cf66116a758f6969dcc06daab8e69a8965fceef11c1d3cab8b524de1021b97dfd5b0e4 + resolution: "@storybook/node-logger@file:../../../code/lib/node-logger#../../../code/lib/node-logger::hash=0d5379&locator=portable-stories-nextjs%40workspace%3A." + checksum: 10/ba3b49b55a325ec5d885898e5cd61370c19ad27a54315025c315bb08b6a09a64cfd3097748225be1f4b07aad42245a239ac9ba6e957c854ebb48718a43e5c215 languageName: node linkType: hard "@storybook/preset-react-webpack@file:../../../code/presets/react-webpack::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/preset-react-webpack@file:../../../code/presets/react-webpack#../../../code/presets/react-webpack::hash=f3317c&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/preset-react-webpack@file:../../../code/presets/react-webpack#../../../code/presets/react-webpack::hash=3c5b01&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-webpack": "workspace:*" "@storybook/docs-tools": "workspace:*" @@ -3076,13 +3076,13 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 10/ee2981fac009bed8163403a304fc34ea8e6f307bd11c26dc6b9e1682e5116facfef0a1e6c59dafe179977b1f5e366912db7e6cac7530cd7074a7c2dd071bd91e + checksum: 10/3baffd6ce4e642f852c370ccd4ae8098a5e730f4493ce43c8414f0b44e59c8bc8a99d9975cf5149b655f1808e54d274754044f45983b9f1be7c9a28f00931ac2 languageName: node linkType: hard "@storybook/preview-api@file:../../../code/lib/preview-api::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/preview-api@file:../../../code/lib/preview-api#../../../code/lib/preview-api::hash=8ed046&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/preview-api@file:../../../code/lib/preview-api#../../../code/lib/preview-api::hash=76c183&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" @@ -3098,14 +3098,14 @@ __metadata: tiny-invariant: "npm:^1.3.1" ts-dedent: "npm:^2.0.0" util-deprecate: "npm:^1.0.2" - checksum: 10/d5a6dc59d0cf9660869c7059567ffe09e1d590835aa781a5a94fc109ae67ae961f82db05a5e983b209e76a595ef3b9669f25897a174701fbcd2846a321ddd8e6 + checksum: 10/93ed5df1d57acb2b5ef4284914e46d0b3c24182d9778ee7ef724a9f48e12e924dc200230453973810999e559a15e0b09604317dc3fb55188068f27ac7aaf07e3 languageName: node linkType: hard "@storybook/preview@file:../../../code/lib/preview::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/preview@file:../../../code/lib/preview#../../../code/lib/preview::hash=364559&locator=portable-stories-nextjs%40workspace%3A." - checksum: 10/cda37fa779743c888a72cc6329ce2d2d7d0171ae2c45d5854c90cf49a834c53e8334d36d95c255254440f4e6304251789f600c64a8f7925df1dc52e76aa18277 + resolution: "@storybook/preview@file:../../../code/lib/preview#../../../code/lib/preview::hash=f82bd0&locator=portable-stories-nextjs%40workspace%3A." + checksum: 10/79efae3201ef9d5cbb8abc309969394e33da8ee853b13d478389bf8d913a851c8804bc8a3e4ff28d05b589e32172e898b3988cd34af9f25016db0d0c26a94688 languageName: node linkType: hard @@ -3129,17 +3129,17 @@ __metadata: "@storybook/react-dom-shim@file:../../../code/lib/react-dom-shim::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/react-dom-shim@file:../../../code/lib/react-dom-shim#../../../code/lib/react-dom-shim::hash=4a12a1&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/react-dom-shim@file:../../../code/lib/react-dom-shim#../../../code/lib/react-dom-shim::hash=062b74&locator=portable-stories-nextjs%40workspace%3A." peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: 10/1328cd24014a00ea7b07c2359c0d6af7fd7973a8635e1e42ff8f462524ad0961fccfc3200f25f86e1fdd75d151f2f50038db70e88c5fb4c9ff7a93cfa387d4dd + checksum: 10/ba63271a1f2d663cd53354798c490d306787b8033586a1062175b89fe4409759cbc959aa34dad12ff8f9bf2e9c141a391784eda81f23cbc9d13495128c9e1611 languageName: node linkType: hard "@storybook/react@file:../../../code/renderers/react::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/react@file:../../../code/renderers/react#../../../code/renderers/react::hash=e02d2f&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/react@file:../../../code/renderers/react#../../../code/renderers/react::hash=4e9581&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" "@storybook/docs-tools": "workspace:*" @@ -3169,7 +3169,7 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 10/bc3d21e78b36c3fa4133532858d0b32f1686a8227096c1079c4575cc29461e32ebeb742b74671c0c43523b738ec8186a1368036d3e9406f6e4cf561a67fc2b79 + checksum: 10/79b77645790d408373d15fad673b0c768d36f66cfa615c50b32b9a3ead0eb94656eaa3b2521b12ec5f82d8c3c23500c0da9c4a75c6bcb314fa38ee813b636c6b languageName: node linkType: hard @@ -3202,7 +3202,7 @@ __metadata: "@storybook/test@file:../../../code/lib/test::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/test@file:../../../code/lib/test#../../../code/lib/test::hash=4192cc&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/test@file:../../../code/lib/test#../../../code/lib/test::hash=22f2be&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" @@ -3215,7 +3215,7 @@ __metadata: "@vitest/spy": "npm:^1.3.1" chai: "npm:^4.4.1" util: "npm:^0.12.4" - checksum: 10/ae7add4394f4c590aaac487da53f0e335051560ecd18f0e831f6e62ffb15aad2299060f58e6149bf3637dd8ed48217e7ae3bd54b58a5ea35ab8fea3982aabbc2 + checksum: 10/786f471e95d2413a8a7e405dafa0dfe429884853cb119d5faa7c390f893710a83e64a97f5f6bee0dacea6efcac4c6a7a258e1c8830e691f39c14e851a59ec781 languageName: node linkType: hard @@ -3241,12 +3241,12 @@ __metadata: "@storybook/types@file:../../../code/lib/types::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.6 - resolution: "@storybook/types@file:../../../code/lib/types#../../../code/lib/types::hash=c292b3&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/types@file:../../../code/lib/types#../../../code/lib/types::hash=efc120&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@types/express": "npm:^4.7.0" file-system-cache: "npm:2.3.0" - checksum: 10/66db65b0e5185de6e9df7fb239b4a45beaf5e42d1f558ae465346b850f8626909aa7d415b49ed0ba0b837219ded47021c42bffff83f13eba29867ee8eafe7b0c + checksum: 10/1d6a4dfbab18342f2286c6d8234c84e9e2dd3638e670863c5679d444d70a629820391a5edb3df8c7a67a049b0a62ca615942ca5a5eb3525fb3dcdd92cf79d5f3 languageName: node linkType: hard From 7374e1255d1406ddebd13932043d031d50a1152a Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Fri, 12 Apr 2024 10:18:57 +0200 Subject: [PATCH 154/380] use esm in nextjs webpack aliases --- code/frameworks/nextjs/src/export-mocks/webpack.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/frameworks/nextjs/src/export-mocks/webpack.ts b/code/frameworks/nextjs/src/export-mocks/webpack.ts index 5f217df13ffe..64d7d37a33fb 100644 --- a/code/frameworks/nextjs/src/export-mocks/webpack.ts +++ b/code/frameworks/nextjs/src/export-mocks/webpack.ts @@ -36,6 +36,6 @@ export const configureNextExportMocks = (baseConfig: WebpackConfig): void => { resolve.alias = { ...resolve.alias, - ...getPackageAliases(), + ...getPackageAliases({ useESM: true }), }; }; From cf2e5b98e22a51e808f5b6eb6db638cbc95d4256 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Fri, 12 Apr 2024 11:40:08 +0200 Subject: [PATCH 155/380] Fix merge shenigans --- code/addons/links/package.json | 2 +- code/lib/codemod/package.json | 2 +- code/lib/core-server/package.json | 2 +- code/lib/csf-tools/package.json | 2 +- code/lib/manager-api/package.json | 2 +- code/lib/preview-api/package.json | 2 +- code/lib/source-loader/package.json | 2 +- code/lib/types/package.json | 2 +- code/package.json | 2 +- code/renderers/server/package.json | 2 +- code/ui/blocks/package.json | 2 +- code/ui/components/package.json | 2 +- 12 files changed, 12 insertions(+), 12 deletions(-) diff --git a/code/addons/links/package.json b/code/addons/links/package.json index 7a59647b681a..cbe50306d3f7 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-links", - "version": "8.1.0-alpha.6", + "version": "8.1.0-alpha.7", "description": "Link stories together to build demos and prototypes with your UI components", "keywords": [ "addon", diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index a1b078f33af5..46f9ad028a5e 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/codemod", - "version": "8.1.0-alpha.6", + "version": "8.1.0-alpha.7", "description": "A collection of codemod scripts written with JSCodeshift", "keywords": [ "storybook" diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index 5e37c9ee74a6..391bfbda11fc 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-server", - "version": "8.1.0-alpha.6", + "version": "8.1.0-alpha.7", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/lib/csf-tools/package.json b/code/lib/csf-tools/package.json index d50278b2606d..430b347c2451 100644 --- a/code/lib/csf-tools/package.json +++ b/code/lib/csf-tools/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/csf-tools", - "version": "8.1.0-alpha.6", + "version": "8.1.0-alpha.7", "description": "Parse and manipulate CSF and Storybook config files", "keywords": [ "storybook" diff --git a/code/lib/manager-api/package.json b/code/lib/manager-api/package.json index 4e1bc6bea710..28893f10f5c7 100644 --- a/code/lib/manager-api/package.json +++ b/code/lib/manager-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/manager-api", - "version": "8.1.0-alpha.6", + "version": "8.1.0-alpha.7", "description": "Core Storybook Manager API & Context", "keywords": [ "storybook" diff --git a/code/lib/preview-api/package.json b/code/lib/preview-api/package.json index dc8c41c23009..48bb90cfb6b0 100644 --- a/code/lib/preview-api/package.json +++ b/code/lib/preview-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview-api", - "version": "8.1.0-alpha.6", + "version": "8.1.0-alpha.7", "description": "", "keywords": [ "storybook" diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index 810755773a84..1b480d450fe8 100644 --- a/code/lib/source-loader/package.json +++ b/code/lib/source-loader/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/source-loader", - "version": "8.1.0-alpha.6", + "version": "8.1.0-alpha.7", "description": "Source loader", "keywords": [ "lib", diff --git a/code/lib/types/package.json b/code/lib/types/package.json index b025502af908..bbac0e65beb1 100644 --- a/code/lib/types/package.json +++ b/code/lib/types/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/types", - "version": "8.1.0-alpha.6", + "version": "8.1.0-alpha.7", "description": "Core Storybook TS Types", "keywords": [ "storybook" diff --git a/code/package.json b/code/package.json index a867c8c4b23a..29dc543f11e8 100644 --- a/code/package.json +++ b/code/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/root", - "version": "8.1.0-alpha.6", + "version": "8.1.0-alpha.7", "private": true, "description": "Storybook root", "homepage": "https://storybook.js.org/", diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json index 05643a14e725..f7c4cfa88ef0 100644 --- a/code/renderers/server/package.json +++ b/code/renderers/server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server", - "version": "8.1.0-alpha.6", + "version": "8.1.0-alpha.7", "description": "Storybook Server renderer", "keywords": [ "storybook" diff --git a/code/ui/blocks/package.json b/code/ui/blocks/package.json index 2a6808f66940..edae82e2f19d 100644 --- a/code/ui/blocks/package.json +++ b/code/ui/blocks/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/blocks", - "version": "8.1.0-alpha.6", + "version": "8.1.0-alpha.7", "description": "Storybook Doc Blocks", "keywords": [ "storybook" diff --git a/code/ui/components/package.json b/code/ui/components/package.json index 1d7e4246f904..200b81381b85 100644 --- a/code/ui/components/package.json +++ b/code/ui/components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/components", - "version": "8.1.0-alpha.6", + "version": "8.1.0-alpha.7", "description": "Core Storybook Components", "keywords": [ "storybook" From f762974fedd751c7cbbb53b2b9544ce93f51b8ff Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Fri, 12 Apr 2024 11:40:21 +0200 Subject: [PATCH 156/380] Move SaveFromControls from ArgsTable to Controls addon --- code/addons/controls/package.json | 1 + code/addons/controls/src/ControlsPanel.tsx | 45 +++++++++++++------ .../src}/SaveFromControls.stories.tsx | 0 .../controls/src}/SaveFromControls.tsx | 0 code/ui/.storybook/main.ts | 4 ++ .../src/components/ArgsTable/ArgsTable.tsx | 28 +----------- code/yarn.lock | 1 + 7 files changed, 38 insertions(+), 41 deletions(-) rename code/{ui/blocks/src/components/ArgsTable => addons/controls/src}/SaveFromControls.stories.tsx (100%) rename code/{ui/blocks/src/components/ArgsTable => addons/controls/src}/SaveFromControls.tsx (100%) diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json index eca9b4d042d4..482e56e196ee 100644 --- a/code/addons/controls/package.json +++ b/code/addons/controls/package.json @@ -60,6 +60,7 @@ "@storybook/client-logger": "workspace:*", "@storybook/components": "workspace:*", "@storybook/core-common": "workspace:*", + "@storybook/icons": "^1.2.5", "@storybook/manager-api": "workspace:*", "@storybook/node-logger": "workspace:*", "@storybook/preview-api": "workspace:*", diff --git a/code/addons/controls/src/ControlsPanel.tsx b/code/addons/controls/src/ControlsPanel.tsx index bb50a46b90d2..718f57c9e257 100644 --- a/code/addons/controls/src/ControlsPanel.tsx +++ b/code/addons/controls/src/ControlsPanel.tsx @@ -9,9 +9,11 @@ import { useStorybookState, } from '@storybook/manager-api'; import { PureArgsTable as ArgsTable, type PresetColor, type SortType } from '@storybook/blocks'; - +import { styled } from '@storybook/theming'; import type { ArgTypes } from '@storybook/types'; + import { PARAM_KEY } from './constants'; +import { SaveFromControls } from './SaveFromControls'; // Remove undefined values (top-level only) const clean = (obj: { [key: string]: any }) => @@ -20,6 +22,14 @@ const clean = (obj: { [key: string]: any }) => {} as typeof obj ); +const AddonWrapper = styled.div({ + display: 'grid', + gridTemplateRows: '1fr 39px', + height: '100%', + maxHeight: '100vh', + overflowY: 'auto', +}); + interface ControlsParameters { sort?: SortType; expanded?: boolean; @@ -53,19 +63,26 @@ export const ControlsPanel: FC = () => { [args, initialArgs] ); + const saveStory = () => {}; + const createStory = () => {}; + return ( - + + + {hasControls && hasUpdatedArgs && ( + + )} + ); }; diff --git a/code/ui/blocks/src/components/ArgsTable/SaveFromControls.stories.tsx b/code/addons/controls/src/SaveFromControls.stories.tsx similarity index 100% rename from code/ui/blocks/src/components/ArgsTable/SaveFromControls.stories.tsx rename to code/addons/controls/src/SaveFromControls.stories.tsx diff --git a/code/ui/blocks/src/components/ArgsTable/SaveFromControls.tsx b/code/addons/controls/src/SaveFromControls.tsx similarity index 100% rename from code/ui/blocks/src/components/ArgsTable/SaveFromControls.tsx rename to code/addons/controls/src/SaveFromControls.tsx diff --git a/code/ui/.storybook/main.ts b/code/ui/.storybook/main.ts index 4025715324d0..ab3df9b98610 100644 --- a/code/ui/.storybook/main.ts +++ b/code/ui/.storybook/main.ts @@ -19,6 +19,10 @@ const allStories = [ directory: '../blocks/src', titlePrefix: '@blocks', }, + { + directory: '../../addons/controls', // TODO other addons? + titlePrefix: '@addons', + }, ]; /** diff --git a/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx b/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx index d884ae72cd06..e874da243d7a 100644 --- a/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx +++ b/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx @@ -15,15 +15,6 @@ import type { ArgType, ArgTypes, Args, Globals } from './types'; import { EmptyBlock } from '..'; import { Skeleton } from './Skeleton'; import { Empty } from './Empty'; -import { SaveFromControls } from './SaveFromControls'; - -const AddonWrapper = styled.div({ - display: 'grid', - gridTemplateRows: '1fr 39px', - height: '100%', - maxHeight: '100vh', - overflowY: 'auto', -}); export const TableWrapper = styled.table<{ compact?: boolean; @@ -200,7 +191,6 @@ const sortFns: Record = { export interface ArgsTableOptionProps { children?: React.ReactNode; - hasUpdatedArgs?: boolean; updateArgs?: (args: Args) => void; resetArgs?: (argNames?: string[]) => void; compact?: boolean; @@ -317,7 +307,6 @@ const safeIncludeConditionalArg = (row: ArgType, args: Args, globals: Globals) = */ export const ArgsTable: FC = (props) => { const { - hasUpdatedArgs, updateArgs, resetArgs, compact, @@ -366,7 +355,7 @@ export const ArgsTable: FC = (props) => { const common = { updateArgs, compact, inAddonPanel, initialExpandedArgs }; - const table = ( + return ( @@ -446,19 +435,4 @@ export const ArgsTable: FC = (props) => { ); - - if (!inAddonPanel) return table; - - const hasControls = Object.values(rows).some((row) => row?.control); - if (!hasControls) return table; - - const saveStory = () => {}; - const createStory = () => {}; - - return ( - - {table} - {hasUpdatedArgs && } - - ); }; diff --git a/code/yarn.lock b/code/yarn.lock index 6d1baae91168..e1d281f04d24 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -4975,6 +4975,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/components": "workspace:*" "@storybook/core-common": "workspace:*" + "@storybook/icons": "npm:^1.2.5" "@storybook/manager-api": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/preview-api": "workspace:*" From 5531259d58c9300637165dee9d1e7ac738cc34a7 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 12 Apr 2024 14:18:24 +0200 Subject: [PATCH 157/380] link the front-end and backend, remove dummy addon for testing --- code/addons/controls/src/ControlsPanel.tsx | 32 +++++++++-- code/addons/controls/src/manager.tsx | 19 +++++++ code/ui/.storybook/manager.tsx | 62 +--------------------- 3 files changed, 49 insertions(+), 64 deletions(-) diff --git a/code/addons/controls/src/ControlsPanel.tsx b/code/addons/controls/src/ControlsPanel.tsx index 9b5a975cdde9..7eebdc5c6bd2 100644 --- a/code/addons/controls/src/ControlsPanel.tsx +++ b/code/addons/controls/src/ControlsPanel.tsx @@ -1,16 +1,18 @@ import { dequal as deepEqual } from 'dequal'; import type { FC } from 'react'; -import React, { useEffect, useMemo, useState } from 'react'; +import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { useArgs, useGlobals, useArgTypes, useParameter, useStorybookState, + useStorybookApi, } from '@storybook/manager-api'; import { PureArgsTable as ArgsTable, type PresetColor, type SortType } from '@storybook/blocks'; import { styled } from '@storybook/theming'; import type { ArgTypes } from '@storybook/types'; +import { SAVE_STORY_REQUEST, SAVE_STORY_RESULT } from '@storybook/core-events'; import { PARAM_KEY } from './constants'; import { SaveFromControls } from './SaveFromControls'; @@ -37,6 +39,7 @@ interface ControlsParameters { } export const ControlsPanel: FC = () => { + const api = useStorybookApi(); const [isLoading, setIsLoading] = useState(true); const [args, updateArgs, resetArgs, initialArgs] = useArgs(); const [globals] = useGlobals(); @@ -44,6 +47,9 @@ export const ControlsPanel: FC = () => { const { expanded, sort, presetColors } = useParameter(PARAM_KEY, {}); const { path, previewInitialized } = useStorybookState(); + const currentArgsRef = useRef(args); + currentArgsRef.current = args; + // If the story is prepared, then show the args table // and reset the loading states useEffect(() => { @@ -65,8 +71,28 @@ export const ControlsPanel: FC = () => { [args, initialArgs] ); - const saveStory = () => {}; - const createStory = () => {}; + const saveStory = useCallback(() => { + const data = api.getCurrentStoryData(); + + api.emit(SAVE_STORY_REQUEST, { + args: currentArgsRef.current, + id: data.id, + importPath: data.importPath, + }); + }, [api]); + const createStory = useCallback( + (name: string) => { + const data = api.getCurrentStoryData(); + + api.emit(SAVE_STORY_REQUEST, { + args: currentArgsRef.current, + id: data.id, + importPath: data.importPath, + name, + }); + }, + [api] + ); return ( diff --git a/code/addons/controls/src/manager.tsx b/code/addons/controls/src/manager.tsx index 921cd038b74c..760d3d6d7c31 100644 --- a/code/addons/controls/src/manager.tsx +++ b/code/addons/controls/src/manager.tsx @@ -3,6 +3,8 @@ import { addons, types, useArgTypes } from '@storybook/manager-api'; import { AddonPanel, Badge, Spaced } from '@storybook/components'; import { ControlsPanel } from './ControlsPanel'; import { ADDON_ID, PARAM_KEY } from './constants'; +import { AlertIcon, CheckIcon } from '@storybook/icons'; +import { SAVE_STORY_RESULT } from '@storybook/core-events'; function Title() { const rows = useArgTypes(); @@ -37,4 +39,21 @@ addons.register(ADDON_ID, (api) => { ); }, }); + + api.on(SAVE_STORY_RESULT, (data) => { + if (data.error) { + api.addNotification({ + content: { headline: `Error saving story`, subHeadline: ` ${data.error}` }, + id: 'save-story-error', + icon: , + }); + } else { + api.addNotification({ + content: { headline: `Story saved`, subHeadline: ` ${data.id}` }, + duration: 2000, + icon: , + id: 'save-story-success', + }); + } + }); }); diff --git a/code/ui/.storybook/manager.tsx b/code/ui/.storybook/manager.tsx index f3dbe1e4d2cc..1ac61cf4d375 100644 --- a/code/ui/.storybook/manager.tsx +++ b/code/ui/.storybook/manager.tsx @@ -1,68 +1,8 @@ -import React from 'react'; -import { addons, types, useArgs } from '@storybook/manager-api'; +import { addons } from '@storybook/manager-api'; import startCase from 'lodash/startCase.js'; -import { SAVE_STORY_REQUEST, SAVE_STORY_RESULT } from '@storybook/core-events'; -// eslint-disable-next-line import/no-extraneous-dependencies -import { CheckIcon, AlertIcon } from '@storybook/icons'; addons.setConfig({ sidebar: { renderLabel: ({ name, type }) => (type === 'story' ? name : startCase(name)), }, }); - -interface RequestSaveStoryPayload { - // The id of the request. It might be simply the story Title - id: string; - // The path of the Story - importPath: string; - // The updated list of set args - args: Record; - // The exported name of the Story -> This information doesn't exist in the index.json yet. - name?: string; -} - -addons.register('my-addon', (api) => { - api.on(SAVE_STORY_RESULT, (data) => { - if (data.error) { - api.addNotification({ - content: { headline: `Error saving story`, subHeadline: ` ${data.error}` }, - id: 'save-story-error', - icon: , - }); - } else { - api.addNotification({ - content: { headline: `Story saved`, subHeadline: ` ${data.id}` }, - duration: 2000, - icon: , - id: 'save-story-success', - }); - } - }); - addons.add('my-addon/panel', { - type: types.PANEL, - title: 'My Addon', - render: ({ active }) => { - const [args] = useArgs(); - - return active ? ( -
- -
- ) : null; - }, - }); -}); From 780a73bf51e55799c4b0ed6652b6ad8819ab4012 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Fri, 12 Apr 2024 14:37:41 +0200 Subject: [PATCH 158/380] Update csf --- code/addons/links/package.json | 2 +- code/lib/codemod/package.json | 2 +- code/lib/core-server/package.json | 2 +- code/lib/csf-tools/package.json | 2 +- code/lib/manager-api/package.json | 2 +- code/lib/preview-api/package.json | 2 +- code/lib/source-loader/package.json | 2 +- code/lib/types/package.json | 2 +- code/package.json | 2 +- code/renderers/server/package.json | 2 +- code/ui/blocks/package.json | 2 +- code/ui/components/package.json | 2 +- code/yarn.lock | 42 ++++++++++++++--------------- 13 files changed, 33 insertions(+), 33 deletions(-) diff --git a/code/addons/links/package.json b/code/addons/links/package.json index cbe50306d3f7..e46356ddde07 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -67,7 +67,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { - "@storybook/csf": "^0.1.4", + "@storybook/csf": "0.1.5--canary.82.2c2dd28.0", "@storybook/global": "^5.0.0", "ts-dedent": "^2.0.0" }, diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index 46f9ad028a5e..d549cd0d3516 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -57,7 +57,7 @@ "@babel/core": "^7.23.2", "@babel/preset-env": "^7.23.2", "@babel/types": "^7.23.0", - "@storybook/csf": "^0.1.4", + "@storybook/csf": "0.1.5--canary.82.2c2dd28.0", "@storybook/csf-tools": "workspace:*", "@storybook/node-logger": "workspace:*", "@storybook/types": "workspace:*", diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index 391bfbda11fc..daca55fc5454 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -62,7 +62,7 @@ "@storybook/channels": "workspace:*", "@storybook/core-common": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "^0.1.4", + "@storybook/csf": "0.1.5--canary.82.2c2dd28.0", "@storybook/csf-tools": "workspace:*", "@storybook/docs-mdx": "3.0.0", "@storybook/global": "^5.0.0", diff --git a/code/lib/csf-tools/package.json b/code/lib/csf-tools/package.json index 430b347c2451..1e21150e2c91 100644 --- a/code/lib/csf-tools/package.json +++ b/code/lib/csf-tools/package.json @@ -46,7 +46,7 @@ "@babel/parser": "^7.23.0", "@babel/traverse": "^7.23.2", "@babel/types": "^7.23.0", - "@storybook/csf": "^0.1.4", + "@storybook/csf": "0.1.5--canary.82.2c2dd28.0", "@storybook/types": "workspace:*", "fs-extra": "^11.1.0", "recast": "^0.23.5", diff --git a/code/lib/manager-api/package.json b/code/lib/manager-api/package.json index 28893f10f5c7..d4225118d01c 100644 --- a/code/lib/manager-api/package.json +++ b/code/lib/manager-api/package.json @@ -47,7 +47,7 @@ "@storybook/channels": "workspace:*", "@storybook/client-logger": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "^0.1.4", + "@storybook/csf": "0.1.5--canary.82.2c2dd28.0", "@storybook/global": "^5.0.0", "@storybook/icons": "^1.2.5", "@storybook/router": "workspace:*", diff --git a/code/lib/preview-api/package.json b/code/lib/preview-api/package.json index 48bb90cfb6b0..ba88c4a07962 100644 --- a/code/lib/preview-api/package.json +++ b/code/lib/preview-api/package.json @@ -47,7 +47,7 @@ "@storybook/channels": "workspace:*", "@storybook/client-logger": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "^0.1.4", + "@storybook/csf": "0.1.5--canary.82.2c2dd28.0", "@storybook/global": "^5.0.0", "@storybook/types": "workspace:*", "@types/qs": "^6.9.5", diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index 1b480d450fe8..5f91ce085448 100644 --- a/code/lib/source-loader/package.json +++ b/code/lib/source-loader/package.json @@ -45,7 +45,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/csf": "^0.1.4", + "@storybook/csf": "0.1.5--canary.82.2c2dd28.0", "@storybook/types": "workspace:*", "estraverse": "^5.2.0", "lodash": "^4.17.21", diff --git a/code/lib/types/package.json b/code/lib/types/package.json index bbac0e65beb1..408fed0dac92 100644 --- a/code/lib/types/package.json +++ b/code/lib/types/package.json @@ -49,7 +49,7 @@ "file-system-cache": "2.3.0" }, "devDependencies": { - "@storybook/csf": "^0.1.4", + "@storybook/csf": "0.1.5--canary.82.2c2dd28.0", "@types/fs-extra": "^11.0.1", "@types/node": "^18.0.0", "typescript": "^5.3.2" diff --git a/code/package.json b/code/package.json index 29dc543f11e8..5ec395af56bd 100644 --- a/code/package.json +++ b/code/package.json @@ -127,7 +127,7 @@ "@storybook/core-events": "workspace:*", "@storybook/core-server": "workspace:*", "@storybook/core-webpack": "workspace:*", - "@storybook/csf": "^0.1.4", + "@storybook/csf": "0.1.5--canary.82.2c2dd28.0", "@storybook/csf-plugin": "workspace:*", "@storybook/csf-tools": "workspace:*", "@storybook/docs-tools": "workspace:*", diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json index f7c4cfa88ef0..03d3644b447c 100644 --- a/code/renderers/server/package.json +++ b/code/renderers/server/package.json @@ -46,7 +46,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/csf": "^0.1.4", + "@storybook/csf": "0.1.5--canary.82.2c2dd28.0", "@storybook/csf-tools": "workspace:*", "@storybook/global": "^5.0.0", "@storybook/preview-api": "workspace:*", diff --git a/code/ui/blocks/package.json b/code/ui/blocks/package.json index edae82e2f19d..ba759f8a3bb6 100644 --- a/code/ui/blocks/package.json +++ b/code/ui/blocks/package.json @@ -48,7 +48,7 @@ "@storybook/client-logger": "workspace:*", "@storybook/components": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "^0.1.4", + "@storybook/csf": "0.1.5--canary.82.2c2dd28.0", "@storybook/docs-tools": "workspace:*", "@storybook/global": "^5.0.0", "@storybook/icons": "^1.2.5", diff --git a/code/ui/components/package.json b/code/ui/components/package.json index 200b81381b85..383ee1b44bff 100644 --- a/code/ui/components/package.json +++ b/code/ui/components/package.json @@ -61,7 +61,7 @@ "dependencies": { "@radix-ui/react-slot": "^1.0.2", "@storybook/client-logger": "workspace:*", - "@storybook/csf": "^0.1.4", + "@storybook/csf": "0.1.5--canary.82.2c2dd28.0", "@storybook/global": "^5.0.0", "@storybook/icons": "^1.2.5", "@storybook/theming": "workspace:*", diff --git a/code/yarn.lock b/code/yarn.lock index 815b6cae1984..cd8dd6fae5b0 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5131,7 +5131,7 @@ __metadata: dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.4" + "@storybook/csf": "npm:0.1.5--canary.82.2c2dd28.0" "@storybook/global": "npm:^5.0.0" "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" @@ -5399,7 +5399,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.4" + "@storybook/csf": "npm:0.1.5--canary.82.2c2dd28.0" "@storybook/docs-tools": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" @@ -5630,7 +5630,7 @@ __metadata: "@babel/core": "npm:^7.23.2" "@babel/preset-env": "npm:^7.23.2" "@babel/types": "npm:^7.23.0" - "@storybook/csf": "npm:^0.1.4" + "@storybook/csf": "npm:0.1.5--canary.82.2c2dd28.0" "@storybook/csf-tools": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/types": "workspace:*" @@ -5666,7 +5666,7 @@ __metadata: "@radix-ui/react-scroll-area": "npm:^1.0.5" "@radix-ui/react-slot": "npm:^1.0.2" "@storybook/client-logger": "workspace:*" - "@storybook/csf": "npm:^0.1.4" + "@storybook/csf": "npm:0.1.5--canary.82.2c2dd28.0" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" "@storybook/test": "workspace:*" @@ -5759,7 +5759,7 @@ __metadata: "@storybook/channels": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.4" + "@storybook/csf": "npm:0.1.5--canary.82.2c2dd28.0" "@storybook/csf-tools": "workspace:*" "@storybook/docs-mdx": "npm:3.0.0" "@storybook/global": "npm:^5.0.0" @@ -5841,7 +5841,7 @@ __metadata: "@babel/parser": "npm:^7.23.0" "@babel/traverse": "npm:^7.23.2" "@babel/types": "npm:^7.23.0" - "@storybook/csf": "npm:^0.1.4" + "@storybook/csf": "npm:0.1.5--canary.82.2c2dd28.0" "@storybook/types": "workspace:*" "@types/fs-extra": "npm:^11.0.1" "@types/js-yaml": "npm:^4.0.5" @@ -5853,6 +5853,15 @@ __metadata: languageName: unknown linkType: soft +"@storybook/csf@npm:0.1.5--canary.82.2c2dd28.0": + version: 0.1.5--canary.82.2c2dd28.0 + resolution: "@storybook/csf@npm:0.1.5--canary.82.2c2dd28.0" + dependencies: + type-fest: "npm:^2.19.0" + checksum: 10c0/9e75a9bdf865ef441c809b3e480fbd218b5f5c90c2d676702e1b98499be67f5b1d4a32e6dd4bfc03e7f9bbf5097ae3f6bc940a89a4573cbd57d4a6d89f670d09 + languageName: node + linkType: hard + "@storybook/csf@npm:^0.0.1": version: 0.0.1 resolution: "@storybook/csf@npm:0.0.1" @@ -5862,15 +5871,6 @@ __metadata: languageName: node linkType: hard -"@storybook/csf@npm:^0.1.4": - version: 0.1.4 - resolution: "@storybook/csf@npm:0.1.4" - dependencies: - type-fest: "npm:^2.19.0" - checksum: 10c0/a988e37d5dd3e6fcd44c16b08f4778b1bf1f4b46491d1331afac9366852208b64214425331f1496c3666fd284ad42c14ef8b5f678ade94fe82534d1e631c4ae8 - languageName: node - linkType: hard - "@storybook/docs-mdx@npm:3.0.0": version: 3.0.0 resolution: "@storybook/docs-mdx@npm:3.0.0" @@ -6038,7 +6038,7 @@ __metadata: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.4" + "@storybook/csf": "npm:0.1.5--canary.82.2c2dd28.0" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" "@storybook/router": "workspace:*" @@ -6374,7 +6374,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.4" + "@storybook/csf": "npm:0.1.5--canary.82.2c2dd28.0" "@storybook/global": "npm:^5.0.0" "@storybook/types": "workspace:*" "@types/qs": "npm:^6.9.5" @@ -6559,7 +6559,7 @@ __metadata: "@storybook/core-events": "workspace:*" "@storybook/core-server": "workspace:*" "@storybook/core-webpack": "workspace:*" - "@storybook/csf": "npm:^0.1.4" + "@storybook/csf": "npm:0.1.5--canary.82.2c2dd28.0" "@storybook/csf-plugin": "workspace:*" "@storybook/csf-tools": "workspace:*" "@storybook/docs-tools": "workspace:*" @@ -6714,7 +6714,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/server@workspace:renderers/server" dependencies: - "@storybook/csf": "npm:^0.1.4" + "@storybook/csf": "npm:0.1.5--canary.82.2c2dd28.0" "@storybook/csf-tools": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/preview-api": "workspace:*" @@ -6731,7 +6731,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/source-loader@workspace:lib/source-loader" dependencies: - "@storybook/csf": "npm:^0.1.4" + "@storybook/csf": "npm:0.1.5--canary.82.2c2dd28.0" "@storybook/types": "workspace:*" estraverse: "npm:^5.2.0" lodash: "npm:^4.17.21" @@ -6910,7 +6910,7 @@ __metadata: resolution: "@storybook/types@workspace:lib/types" dependencies: "@storybook/channels": "workspace:*" - "@storybook/csf": "npm:^0.1.4" + "@storybook/csf": "npm:0.1.5--canary.82.2c2dd28.0" "@types/express": "npm:^4.7.0" "@types/fs-extra": "npm:^11.0.1" "@types/node": "npm:^18.0.0" From 463ea88a80ca3bc26e62316b65610abd0092abf7 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 12 Apr 2024 14:51:19 +0200 Subject: [PATCH 159/380] Fix cloning issue in duplicateStoryWithNewName function --- .../utils/save-from-controls/duplicate-story-with-new-name.ts | 4 ++++ .../src/utils/save-from-controls/save-from-controls.ts | 3 +-- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/code/lib/core-server/src/utils/save-from-controls/duplicate-story-with-new-name.ts b/code/lib/core-server/src/utils/save-from-controls/duplicate-story-with-new-name.ts index 6651fbc2ead9..05dae1d39e38 100644 --- a/code/lib/core-server/src/utils/save-from-controls/duplicate-story-with-new-name.ts +++ b/code/lib/core-server/src/utils/save-from-controls/duplicate-story-with-new-name.ts @@ -9,6 +9,10 @@ export const duplicateStoryWithNewName = (csfFile: In, storyName: string, newSto const node = csfFile._storyExports[storyName]; const cloned = t.cloneNode(node) as t.VariableDeclarator; + if (!cloned) { + throw new Error(`cannot clone Node`); + } + let found = false; traverse.default(cloned, { Identifier(path) { diff --git a/code/lib/core-server/src/utils/save-from-controls/save-from-controls.ts b/code/lib/core-server/src/utils/save-from-controls/save-from-controls.ts index e74c632b1f95..7853aecff365 100644 --- a/code/lib/core-server/src/utils/save-from-controls/save-from-controls.ts +++ b/code/lib/core-server/src/utils/save-from-controls/save-from-controls.ts @@ -49,8 +49,7 @@ export function initializeSaveFromControls( // find the AST node for the export_name, if none can be found, create a new story if (data.name) { - node = duplicateStoryWithNewName(parsed, data.name, name); - throw new Error(`creation of new story: not yet implemented`); + node = duplicateStoryWithNewName(parsed, name, data.name); } else { node = csf.getStoryExport(name); } From fcf2b846fe9bcb9f92908e21d5a2ada5acf30412 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Fri, 12 Apr 2024 16:13:58 +0200 Subject: [PATCH 160/380] Add test --- .../template/stories/before-each.stories.ts | 29 +++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 code/lib/test/template/stories/before-each.stories.ts diff --git a/code/lib/test/template/stories/before-each.stories.ts b/code/lib/test/template/stories/before-each.stories.ts new file mode 100644 index 000000000000..842d9d7c2f5b --- /dev/null +++ b/code/lib/test/template/stories/before-each.stories.ts @@ -0,0 +1,29 @@ +import { global as globalThis } from '@storybook/global'; +import { expect, mocked, getByRole, spyOn, userEvent } from '@storybook/test'; + +const meta = { + component: globalThis.Components.Button, + beforeEach() { + spyOn(console, 'log').mockName('console.log'); + console.log('first'); + }, +}; + +export default meta; + +export const BeforeEachOrder = { + beforeEach() { + console.log('second'); + }, + args: { + label: 'Button', + onClick: () => { + console.log('third'); + }, + }, + async play({ canvasElement }) { + await userEvent.click(getByRole(canvasElement, 'button')); + + await expect(mocked(console.log).mock.calls).toEqual([['first'], ['second'], ['third']]); + }, +}; From 4091421ede5f284a53ae095fcff9402da1b39068 Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Fri, 12 Apr 2024 16:24:12 +0200 Subject: [PATCH 161/380] Restore original focus style for solid buttons --- code/ui/components/src/components/Button/Button.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/code/ui/components/src/components/Button/Button.tsx b/code/ui/components/src/components/Button/Button.tsx index d4a42154cd43..6e77f668b8df 100644 --- a/code/ui/components/src/components/Button/Button.tsx +++ b/code/ui/components/src/components/Button/Button.tsx @@ -237,13 +237,7 @@ const StyledButton = styled('button', { }, '&:focus': { - boxShadow: `${ - variant === 'solid' - ? theme.base === 'light' - ? rgba(darken(0.2, theme.color.secondary), 1) - : 'rgba(255, 255, 255, 0.75)' - : rgba(theme.color.secondary, 1) - } 0 0 0 1px inset`, + boxShadow: `${rgba(theme.color.secondary, 1)} 0 0 0 1px inset`, outline: 'none', }, From f0cd70d786be816857287a417848d6351111de2d Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Fri, 12 Apr 2024 16:45:29 +0200 Subject: [PATCH 162/380] add beforeEach tests in portable stories --- .../store/csf/portable-stories.test.ts | 69 +++++++++++++++++++ .../src/modules/store/csf/portable-stories.ts | 2 +- 2 files changed, 70 insertions(+), 1 deletion(-) diff --git a/code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts b/code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts index a3aa544c4827..de01ac98ef5e 100644 --- a/code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts +++ b/code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts @@ -167,6 +167,75 @@ describe('composeStory', () => { expect(spyFn).toHaveBeenCalled(); }); + it('should work with spies set up in beforeEach', async () => { + const spyFn = vi.fn(); + + const Story: Story = { + args: { + spyFn, + }, + beforeEach: async () => { + spyFn.mockReturnValue('mockedData'); + }, + render: (args) => { + const data = args.spyFn(); + expect(data).toBe('mockedData'); + }, + }; + + const composedStory = composeStory(Story, {}); + await composedStory.load(); + composedStory(); + expect(spyFn).toHaveBeenCalled(); + }); + + it('should call beforeEach from Project, Meta and Story level', async () => { + const beforeEachSpy = vi.fn(); + const cleanupSpy = vi.fn(); + + const metaObj: Meta = { + beforeEach: async () => { + beforeEachSpy('define from meta'); + + return () => { + cleanupSpy('cleanup from meta'); + }; + }, + }; + + const Story: Story = { + render: () => 'foo', + beforeEach: async () => { + beforeEachSpy('define from story'); + + return () => { + cleanupSpy('cleanup from story'); + }; + }, + }; + + const composedStory = composeStory(Story, metaObj, { + beforeEach: async () => { + beforeEachSpy('define from project'); + + return () => { + cleanupSpy('cleanup from project'); + }; + }, + }); + await composedStory.load(); + composedStory(); + expect(beforeEachSpy).toHaveBeenNthCalledWith(1, 'define from project'); + expect(beforeEachSpy).toHaveBeenNthCalledWith(2, 'define from meta'); + expect(beforeEachSpy).toHaveBeenNthCalledWith(3, 'define from story'); + + // simulate the next story's load to trigger cleanup + await composedStory.load(); + expect(cleanupSpy).toHaveBeenNthCalledWith(1, 'cleanup from story'); + expect(cleanupSpy).toHaveBeenNthCalledWith(2, 'cleanup from meta'); + expect(cleanupSpy).toHaveBeenNthCalledWith(3, 'cleanup from project'); + }); + it('should throw an error if Story is undefined', () => { expect(() => { // @ts-expect-error (invalid input) diff --git a/code/lib/preview-api/src/modules/store/csf/portable-stories.ts b/code/lib/preview-api/src/modules/store/csf/portable-stories.ts index 42dc379d6487..c4aa34874040 100644 --- a/code/lib/preview-api/src/modules/store/csf/portable-stories.ts +++ b/code/lib/preview-api/src/modules/store/csf/portable-stories.ts @@ -128,7 +128,7 @@ export function composeStory { - // First run any registerd cleanup function + // First run any registered cleanup function for (const callback of [...cleanupCallbacks].reverse()) await callback(); cleanupCallbacks.length = 0; From 43ae81810e93203947c0c115f36a3a7a9b8cd2bb Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Fri, 12 Apr 2024 16:50:50 +0200 Subject: [PATCH 163/380] add one more portable stories test --- .../store/csf/portable-stories.test.ts | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts b/code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts index de01ac98ef5e..832ad437139f 100644 --- a/code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts +++ b/code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts @@ -236,6 +236,25 @@ describe('composeStory', () => { expect(cleanupSpy).toHaveBeenNthCalledWith(3, 'cleanup from project'); }); + it('should call beforeEach after loaders', async () => { + const spyFn = vi.fn(); + + const Story: Story = { + render: () => 'foo', + loaders: async () => { + spyFn('from loaders'); + }, + beforeEach: async () => { + spyFn('from beforeEach'); + }, + }; + + const composedStory = composeStory(Story, {}); + await composedStory.load(); + expect(spyFn).toHaveBeenNthCalledWith(1, 'from loaders'); + expect(spyFn).toHaveBeenNthCalledWith(2, 'from beforeEach'); + }); + it('should throw an error if Story is undefined', () => { expect(() => { // @ts-expect-error (invalid input) From 6fdb569c02eabc595cfb48335098563e686d4857 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Sun, 14 Apr 2024 21:19:29 +0200 Subject: [PATCH 164/380] add mdx plugin to start of vite plugins instead of end --- code/addons/docs/src/preset.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts index 31248e7af990..4b8811935ec9 100644 --- a/code/addons/docs/src/preset.ts +++ b/code/addons/docs/src/preset.ts @@ -166,7 +166,8 @@ export const viteFinal = async (config: any, options: Options) => { // add alias plugin early to ensure any other plugins that also add the aliases will override this // eg. the preact vite plugin adds its own aliases plugins.unshift(packageDeduplicationPlugin); - plugins.push(mdxPlugin(options)); + // mdx plugin needs to be before any react plugins + plugins.unshift(mdxPlugin(options)); return config; }; From 1c12bc07bee7f9aa986f976058ad3bb87194711a Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 12 Apr 2024 15:23:32 +0200 Subject: [PATCH 165/380] Use sanitized component name for variable naming in default case --- code/lib/core-server/package.json | 1 + .../src/utils/get-component-variable-name.test.ts | 11 +++++++++++ .../src/utils/get-component-variable-name.ts | 13 +++++++++++++ .../src/utils/get-new-story-file.test.ts | 4 ++-- .../utils/new-story-templates/javascript.test.ts | 4 ++-- .../src/utils/new-story-templates/javascript.ts | 5 ++++- .../utils/new-story-templates/typescript.test.ts | 6 +++--- .../src/utils/new-story-templates/typescript.ts | 5 ++++- code/yarn.lock | 8 ++++++++ 9 files changed, 48 insertions(+), 9 deletions(-) create mode 100644 code/lib/core-server/src/utils/get-component-variable-name.test.ts create mode 100644 code/lib/core-server/src/utils/get-component-variable-name.ts diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index 64c7893f8523..6296522da0f6 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -77,6 +77,7 @@ "@types/pretty-hrtime": "^1.0.0", "@types/semver": "^7.3.4", "better-opn": "^3.0.2", + "camelcase": "^8.0.0", "chalk": "^4.1.0", "cjs-module-lexer": "^1.2.3", "cli-table3": "^0.6.1", diff --git a/code/lib/core-server/src/utils/get-component-variable-name.test.ts b/code/lib/core-server/src/utils/get-component-variable-name.test.ts new file mode 100644 index 000000000000..b58442b18507 --- /dev/null +++ b/code/lib/core-server/src/utils/get-component-variable-name.test.ts @@ -0,0 +1,11 @@ +import { describe, expect, it } from 'vitest'; +import { getComponentVariableName } from './get-component-variable-name'; + +describe('get-variable-name', () => { + it('should return a valid variable name for a given string', () => { + expect(getComponentVariableName('foo-bar')).toBe('FooBar'); + expect(getComponentVariableName('foo bar')).toBe('FooBar'); + expect(getComponentVariableName('0-foo-bar')).toBe('FooBar'); + expect(getComponentVariableName('*Foo-bar-$')).toBe('FooBar$'); + }); +}); diff --git a/code/lib/core-server/src/utils/get-component-variable-name.ts b/code/lib/core-server/src/utils/get-component-variable-name.ts new file mode 100644 index 000000000000..e37fcaf91d23 --- /dev/null +++ b/code/lib/core-server/src/utils/get-component-variable-name.ts @@ -0,0 +1,13 @@ +import camelcase from 'camelcase'; + +/** + * Get a valid variable name for a component. + * + * @param name The name of the component. + * @returns A valid variable name. + */ +export const getComponentVariableName = (name: string) => { + const camelCased = camelcase(name.replace(/^[^a-zA-Z_$]*/, ''), { pascalCase: true }); + const sanitized = camelCased.replace(/[^a-zA-Z_$]+/, ''); + return sanitized; +}; diff --git a/code/lib/core-server/src/utils/get-new-story-file.test.ts b/code/lib/core-server/src/utils/get-new-story-file.test.ts index 750ea322b264..429801ad0186 100644 --- a/code/lib/core-server/src/utils/get-new-story-file.test.ts +++ b/code/lib/core-server/src/utils/get-new-story-file.test.ts @@ -68,10 +68,10 @@ describe('get-new-story-file', () => { expect(exportedStoryName).toBe('Default'); expect(storyFileContent).toMatchInlineSnapshot(` - "import Component from './Page'; + "import Page from './Page'; const meta = { - component: Component, + component: Page, }; export default meta; diff --git a/code/lib/core-server/src/utils/new-story-templates/javascript.test.ts b/code/lib/core-server/src/utils/new-story-templates/javascript.test.ts index 2d6dc4d3f0ea..fa89588a6e89 100644 --- a/code/lib/core-server/src/utils/new-story-templates/javascript.test.ts +++ b/code/lib/core-server/src/utils/new-story-templates/javascript.test.ts @@ -11,10 +11,10 @@ describe('javascript', () => { }); expect(result).toMatchInlineSnapshot(` - "import Component from './foo'; + "import Foo from './foo'; const meta = { - component: Component, + component: Foo, }; export default meta; diff --git a/code/lib/core-server/src/utils/new-story-templates/javascript.ts b/code/lib/core-server/src/utils/new-story-templates/javascript.ts index 5563f9faa1b8..b5572c8810c1 100644 --- a/code/lib/core-server/src/utils/new-story-templates/javascript.ts +++ b/code/lib/core-server/src/utils/new-story-templates/javascript.ts @@ -1,4 +1,5 @@ import dedent from 'ts-dedent'; +import { getComponentVariableName } from '../get-component-variable-name'; interface JavaScriptTemplateData { /** The components file name without the extension */ @@ -10,7 +11,9 @@ interface JavaScriptTemplateData { } export function getJavaScriptTemplateForNewStoryFile(data: JavaScriptTemplateData) { - const importName = data.componentIsDefaultExport ? 'Component' : data.componentExportName; + const importName = data.componentIsDefaultExport + ? getComponentVariableName(data.basenameWithoutExtension) + : data.componentExportName; const importStatement = data.componentIsDefaultExport ? `import ${importName} from './${data.basenameWithoutExtension}';` : `import { ${importName} } from './${data.basenameWithoutExtension}';`; diff --git a/code/lib/core-server/src/utils/new-story-templates/typescript.test.ts b/code/lib/core-server/src/utils/new-story-templates/typescript.test.ts index 05cd39cca9f8..ed00bf61cf7a 100644 --- a/code/lib/core-server/src/utils/new-story-templates/typescript.test.ts +++ b/code/lib/core-server/src/utils/new-story-templates/typescript.test.ts @@ -14,11 +14,11 @@ describe('typescript', () => { expect(result).toMatchInlineSnapshot(` "import type { Meta, StoryObj } from '@storybook/nextjs'; - import Component from './foo'; + import Foo from './foo'; const meta = { - component: Component, - } satisfies Meta; + component: Foo, + } satisfies Meta; export default meta; diff --git a/code/lib/core-server/src/utils/new-story-templates/typescript.ts b/code/lib/core-server/src/utils/new-story-templates/typescript.ts index 38e9ffbe6e4f..03a625be178e 100644 --- a/code/lib/core-server/src/utils/new-story-templates/typescript.ts +++ b/code/lib/core-server/src/utils/new-story-templates/typescript.ts @@ -1,4 +1,5 @@ import dedent from 'ts-dedent'; +import { getComponentVariableName } from '../get-component-variable-name'; interface TypeScriptTemplateData { /** The components file name without the extension */ @@ -12,7 +13,9 @@ interface TypeScriptTemplateData { } export function getTypeScriptTemplateForNewStoryFile(data: TypeScriptTemplateData) { - const importName = data.componentIsDefaultExport ? 'Component' : data.componentExportName; + const importName = data.componentIsDefaultExport + ? getComponentVariableName(data.basenameWithoutExtension) + : data.componentExportName; const importStatement = data.componentIsDefaultExport ? `import ${importName} from './${data.basenameWithoutExtension}'` : `import { ${importName} } from './${data.basenameWithoutExtension}'`; diff --git a/code/yarn.lock b/code/yarn.lock index 7be8a5f1fd96..6914dd488853 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5595,6 +5595,7 @@ __metadata: "@types/ws": "npm:^8" better-opn: "npm:^3.0.2" boxen: "npm:^7.1.1" + camelcase: "npm:^8.0.0" chalk: "npm:^4.1.0" cjs-module-lexer: "npm:^1.2.3" cli-table3: "npm:^0.6.1" @@ -11061,6 +11062,13 @@ __metadata: languageName: node linkType: hard +"camelcase@npm:^8.0.0": + version: 8.0.0 + resolution: "camelcase@npm:8.0.0" + checksum: 10c0/56c5fe072f0523c9908cdaac21d4a3b3fb0f608fb2e9ba90a60e792b95dd3bb3d1f3523873ab17d86d146e94171305f73ef619e2f538bd759675bc4a14b4bff3 + languageName: node + linkType: hard + "can-symlink@npm:^1.0.0": version: 1.0.0 resolution: "can-symlink@npm:1.0.0" From 6de99c001cd0a946cf3ce1a9c93976e0cf2f11bc Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 15 Apr 2024 09:04:49 +0200 Subject: [PATCH 166/380] Adjust top position of code in search field --- code/ui/manager/src/components/sidebar/Search.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/ui/manager/src/components/sidebar/Search.tsx b/code/ui/manager/src/components/sidebar/Search.tsx index 441653e44234..8708a05dad6a 100644 --- a/code/ui/manager/src/components/sidebar/Search.tsx +++ b/code/ui/manager/src/components/sidebar/Search.tsx @@ -130,7 +130,7 @@ const Input = styled.input(({ theme }) => ({ const FocusKey = styled.code(({ theme }) => ({ position: 'absolute', - top: 8, + top: 6, right: 9, height: 16, zIndex: 1, From 83a2c1aeb641a6b85c2ee48eb5d0ff358dab21ba Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 15 Apr 2024 09:18:37 +0200 Subject: [PATCH 167/380] Update exports --- code/ui/manager/src/globals/exports.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/code/ui/manager/src/globals/exports.ts b/code/ui/manager/src/globals/exports.ts index 794741a69e8b..d3da898e844c 100644 --- a/code/ui/manager/src/globals/exports.ts +++ b/code/ui/manager/src/globals/exports.ts @@ -133,6 +133,8 @@ export default { 'CHANNEL_CREATED', 'CHANNEL_WS_DISCONNECT', 'CONFIG_ERROR', + 'CREATE_NEW_STORYFILE', + 'CREATE_NEW_STORYFILE_RESULT', 'CURRENT_STORY_WAS_SET', 'DOCS_PREPARED', 'DOCS_RENDERED', From a2ce71b052948f0d9481df653d545f9bb2f9fc05 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 15 Apr 2024 09:41:53 +0200 Subject: [PATCH 168/380] Apply suggested changes --- code/lib/core-common/src/utils/formatter.test.ts | 2 -- code/lib/core-common/src/utils/formatter.ts | 5 ++--- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/code/lib/core-common/src/utils/formatter.test.ts b/code/lib/core-common/src/utils/formatter.test.ts index 7f8c22036e81..3f8eaf003478 100644 --- a/code/lib/core-common/src/utils/formatter.test.ts +++ b/code/lib/core-common/src/utils/formatter.test.ts @@ -1,8 +1,6 @@ import { formatFileContent } from './formatter'; import { describe, it, expect, vi } from 'vitest'; import path from 'node:path'; -import dedent from 'ts-dedent'; -import { resolveConfigFile } from 'prettier-v2'; const mockPrettier = vi.hoisted(() => ({ resolveConfig: vi.fn(), diff --git a/code/lib/core-common/src/utils/formatter.ts b/code/lib/core-common/src/utils/formatter.ts index 6f0033e668a4..f18951cabf63 100644 --- a/code/lib/core-common/src/utils/formatter.ts +++ b/code/lib/core-common/src/utils/formatter.ts @@ -69,14 +69,13 @@ export async function formatFileContent(filePath: string, content: string): Prom (prettier as any).version } is not supported to format files which were edited by Storybook. Please raise an issue on the Storybook GitHub repository. - Fallback to EditorConfig settings if available. + Falling back to EditorConfig settings, if available. `); + return await formatWithEditorConfig(filePath, content); } } catch (error) { return content; } - - return content; } async function formatWithEditorConfig(filePath: string, content: string) { From 5189a1512b460e80f0f7d02af7d3bef8d8605602 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 15 Apr 2024 09:47:05 +0200 Subject: [PATCH 169/380] Fix esm module issue --- .../src/utils/get-component-variable-name.test.ts | 10 +++++----- .../src/utils/get-component-variable-name.ts | 7 +++---- code/lib/core-server/src/utils/get-new-story-file.ts | 4 ++-- .../src/utils/new-story-templates/javascript.test.ts | 8 ++++---- .../src/utils/new-story-templates/javascript.ts | 4 ++-- .../src/utils/new-story-templates/typescript.test.ts | 8 ++++---- .../src/utils/new-story-templates/typescript.ts | 4 ++-- 7 files changed, 22 insertions(+), 23 deletions(-) diff --git a/code/lib/core-server/src/utils/get-component-variable-name.test.ts b/code/lib/core-server/src/utils/get-component-variable-name.test.ts index b58442b18507..07b2fb5599aa 100644 --- a/code/lib/core-server/src/utils/get-component-variable-name.test.ts +++ b/code/lib/core-server/src/utils/get-component-variable-name.test.ts @@ -2,10 +2,10 @@ import { describe, expect, it } from 'vitest'; import { getComponentVariableName } from './get-component-variable-name'; describe('get-variable-name', () => { - it('should return a valid variable name for a given string', () => { - expect(getComponentVariableName('foo-bar')).toBe('FooBar'); - expect(getComponentVariableName('foo bar')).toBe('FooBar'); - expect(getComponentVariableName('0-foo-bar')).toBe('FooBar'); - expect(getComponentVariableName('*Foo-bar-$')).toBe('FooBar$'); + it('should return a valid variable name for a given string', async () => { + await expect(getComponentVariableName('foo-bar')).resolves.toBe('FooBar'); + await expect(getComponentVariableName('foo bar')).resolves.toBe('FooBar'); + await expect(getComponentVariableName('0-foo-bar')).resolves.toBe('FooBar'); + await expect(getComponentVariableName('*Foo-bar-$')).resolves.toBe('FooBar$'); }); }); diff --git a/code/lib/core-server/src/utils/get-component-variable-name.ts b/code/lib/core-server/src/utils/get-component-variable-name.ts index e37fcaf91d23..9561fe0d7cf9 100644 --- a/code/lib/core-server/src/utils/get-component-variable-name.ts +++ b/code/lib/core-server/src/utils/get-component-variable-name.ts @@ -1,13 +1,12 @@ -import camelcase from 'camelcase'; - /** * Get a valid variable name for a component. * * @param name The name of the component. * @returns A valid variable name. */ -export const getComponentVariableName = (name: string) => { - const camelCased = camelcase(name.replace(/^[^a-zA-Z_$]*/, ''), { pascalCase: true }); +export const getComponentVariableName = async (name: string) => { + const camelCase = (await import('camelcase')).default; + const camelCased = camelCase(name.replace(/^[^a-zA-Z_$]*/, ''), { pascalCase: true }); const sanitized = camelCased.replace(/[^a-zA-Z_$]+/, ''); return sanitized; }; diff --git a/code/lib/core-server/src/utils/get-new-story-file.ts b/code/lib/core-server/src/utils/get-new-story-file.ts index 1b43665c8679..cfec1dd52152 100644 --- a/code/lib/core-server/src/utils/get-new-story-file.ts +++ b/code/lib/core-server/src/utils/get-new-story-file.ts @@ -35,14 +35,14 @@ export async function getNewStoryFile( const exportedStoryName = 'Default'; const storyFileContent = isTypescript - ? getTypeScriptTemplateForNewStoryFile({ + ? await getTypeScriptTemplateForNewStoryFile({ basenameWithoutExtension, componentExportName, componentIsDefaultExport, frameworkPackageName, exportedStoryName, }) - : getJavaScriptTemplateForNewStoryFile({ + : await getJavaScriptTemplateForNewStoryFile({ basenameWithoutExtension, componentExportName, componentIsDefaultExport, diff --git a/code/lib/core-server/src/utils/new-story-templates/javascript.test.ts b/code/lib/core-server/src/utils/new-story-templates/javascript.test.ts index fa89588a6e89..525c0fe25f4c 100644 --- a/code/lib/core-server/src/utils/new-story-templates/javascript.test.ts +++ b/code/lib/core-server/src/utils/new-story-templates/javascript.test.ts @@ -2,8 +2,8 @@ import { describe, expect, it } from 'vitest'; import { getJavaScriptTemplateForNewStoryFile } from './javascript'; describe('javascript', () => { - it('should return a TypeScript template with a default import', () => { - const result = getJavaScriptTemplateForNewStoryFile({ + it('should return a TypeScript template with a default import', async () => { + const result = await getJavaScriptTemplateForNewStoryFile({ basenameWithoutExtension: 'foo', componentExportName: 'default', componentIsDefaultExport: true, @@ -23,8 +23,8 @@ describe('javascript', () => { `); }); - it('should return a TypeScript template with a named import', () => { - const result = getJavaScriptTemplateForNewStoryFile({ + it('should return a TypeScript template with a named import', async () => { + const result = await getJavaScriptTemplateForNewStoryFile({ basenameWithoutExtension: 'foo', componentExportName: 'Example', componentIsDefaultExport: false, diff --git a/code/lib/core-server/src/utils/new-story-templates/javascript.ts b/code/lib/core-server/src/utils/new-story-templates/javascript.ts index b5572c8810c1..e80e4d4b5a57 100644 --- a/code/lib/core-server/src/utils/new-story-templates/javascript.ts +++ b/code/lib/core-server/src/utils/new-story-templates/javascript.ts @@ -10,9 +10,9 @@ interface JavaScriptTemplateData { exportedStoryName: string; } -export function getJavaScriptTemplateForNewStoryFile(data: JavaScriptTemplateData) { +export async function getJavaScriptTemplateForNewStoryFile(data: JavaScriptTemplateData) { const importName = data.componentIsDefaultExport - ? getComponentVariableName(data.basenameWithoutExtension) + ? await getComponentVariableName(data.basenameWithoutExtension) : data.componentExportName; const importStatement = data.componentIsDefaultExport ? `import ${importName} from './${data.basenameWithoutExtension}';` diff --git a/code/lib/core-server/src/utils/new-story-templates/typescript.test.ts b/code/lib/core-server/src/utils/new-story-templates/typescript.test.ts index ed00bf61cf7a..f576a3d4ad2d 100644 --- a/code/lib/core-server/src/utils/new-story-templates/typescript.test.ts +++ b/code/lib/core-server/src/utils/new-story-templates/typescript.test.ts @@ -2,8 +2,8 @@ import { describe, expect, it } from 'vitest'; import { getTypeScriptTemplateForNewStoryFile } from './typescript'; describe('typescript', () => { - it('should return a TypeScript template with a default import', () => { - const result = getTypeScriptTemplateForNewStoryFile({ + it('should return a TypeScript template with a default import', async () => { + const result = await getTypeScriptTemplateForNewStoryFile({ basenameWithoutExtension: 'foo', componentExportName: 'default', componentIsDefaultExport: true, @@ -28,8 +28,8 @@ describe('typescript', () => { `); }); - it('should return a TypeScript template with a named import', () => { - const result = getTypeScriptTemplateForNewStoryFile({ + it('should return a TypeScript template with a named import', async () => { + const result = await getTypeScriptTemplateForNewStoryFile({ basenameWithoutExtension: 'foo', componentExportName: 'Example', componentIsDefaultExport: false, diff --git a/code/lib/core-server/src/utils/new-story-templates/typescript.ts b/code/lib/core-server/src/utils/new-story-templates/typescript.ts index 03a625be178e..cb44dfdfc9c4 100644 --- a/code/lib/core-server/src/utils/new-story-templates/typescript.ts +++ b/code/lib/core-server/src/utils/new-story-templates/typescript.ts @@ -12,9 +12,9 @@ interface TypeScriptTemplateData { exportedStoryName: string; } -export function getTypeScriptTemplateForNewStoryFile(data: TypeScriptTemplateData) { +export async function getTypeScriptTemplateForNewStoryFile(data: TypeScriptTemplateData) { const importName = data.componentIsDefaultExport - ? getComponentVariableName(data.basenameWithoutExtension) + ? await getComponentVariableName(data.basenameWithoutExtension) : data.componentExportName; const importStatement = data.componentIsDefaultExport ? `import ${importName} from './${data.basenameWithoutExtension}'` From 154a302979fa7dd90a0afa98a758ae7adc24502e Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 15 Apr 2024 10:45:57 +0200 Subject: [PATCH 170/380] Move camelcase to devDependencies --- code/lib/core-server/package.json | 2 +- code/lib/core-server/src/utils/get-component-variable-name.ts | 4 ++-- code/ui/manager/src/globals/exports.ts | 2 ++ 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index 6296522da0f6..f166d421ccda 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -77,7 +77,6 @@ "@types/pretty-hrtime": "^1.0.0", "@types/semver": "^7.3.4", "better-opn": "^3.0.2", - "camelcase": "^8.0.0", "chalk": "^4.1.0", "cjs-module-lexer": "^1.2.3", "cli-table3": "^0.6.1", @@ -109,6 +108,7 @@ "@types/node-fetch": "^2.5.7", "@types/ws": "^8", "boxen": "^7.1.1", + "camelcase": "^8.0.0", "node-fetch": "^3.3.1", "slash": "^5.0.0", "typescript": "^5.3.2" diff --git a/code/lib/core-server/src/utils/get-component-variable-name.ts b/code/lib/core-server/src/utils/get-component-variable-name.ts index 9561fe0d7cf9..bc29ff9e51d6 100644 --- a/code/lib/core-server/src/utils/get-component-variable-name.ts +++ b/code/lib/core-server/src/utils/get-component-variable-name.ts @@ -5,8 +5,8 @@ * @returns A valid variable name. */ export const getComponentVariableName = async (name: string) => { - const camelCase = (await import('camelcase')).default; - const camelCased = camelCase(name.replace(/^[^a-zA-Z_$]*/, ''), { pascalCase: true }); + const camelCase = await import('camelcase'); + const camelCased = camelCase.default(name.replace(/^[^a-zA-Z_$]*/, ''), { pascalCase: true }); const sanitized = camelCased.replace(/[^a-zA-Z_$]+/, ''); return sanitized; }; diff --git a/code/ui/manager/src/globals/exports.ts b/code/ui/manager/src/globals/exports.ts index 794741a69e8b..d3da898e844c 100644 --- a/code/ui/manager/src/globals/exports.ts +++ b/code/ui/manager/src/globals/exports.ts @@ -133,6 +133,8 @@ export default { 'CHANNEL_CREATED', 'CHANNEL_WS_DISCONNECT', 'CONFIG_ERROR', + 'CREATE_NEW_STORYFILE', + 'CREATE_NEW_STORYFILE_RESULT', 'CURRENT_STORY_WAS_SET', 'DOCS_PREPARED', 'DOCS_RENDERED', From e3c678f2ab4e268648976f65394cd3e4db567326 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Mon, 15 Apr 2024 12:16:08 +0200 Subject: [PATCH 171/380] use next.js internal paths instead of *.actual paths --- MIGRATION.md | 10 +- code/frameworks/nextjs/src/cache/index.ts | 4 - .../nextjs/src/export-mocks/cache/index.ts | 19 +- .../nextjs/src/export-mocks/headers/index.ts | 4 +- .../src/export-mocks/navigation/index.ts | 4 +- .../nextjs/src/export-mocks/router/index.ts | 4 +- .../nextjs/src/export-mocks/webpack.ts | 5 - code/frameworks/nextjs/src/globals.d.ts | 12 - .../nextjs/yarn.lock | 814 +++++++++--------- 9 files changed, 431 insertions(+), 445 deletions(-) delete mode 100644 code/frameworks/nextjs/src/cache/index.ts diff --git a/MIGRATION.md b/MIGRATION.md index 2cd7d04f6fff..b9e46b719dba 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -412,13 +412,7 @@ #### @storybook/nextjs requires specific path aliases to be setup -In order to properly mock the `next/router`, `next/header`, `next/navigation` and `next/cache` APIs, the `@storybook/nextjs` framework includes internal Webpack aliases to those modules. If you use portable stories in your Jest configuration, you will run into the following issue: - -``` -Cannot find module 'next/navigation.actual' from 'node_modules/@storybook/nextjs/dist/export-mocks/navigation/index.js' -``` - -To fix it, you should set the aliases in your Jest config files `moduleNameMapper` property using the `getPackageAliases` helper from `@storybook/nextjs/export-mocks`: +In order to properly mock the `next/router`, `next/header`, `next/navigation` and `next/cache` APIs, the `@storybook/nextjs` framework includes internal Webpack aliases to those modules. If you use portable stories in your Jest tests, you should set the aliases in your Jest config files `moduleNameMapper` property using the `getPackageAliases` helper from `@storybook/nextjs/export-mocks`: ```js const nextJest = require("next/jest.js"); @@ -432,6 +426,8 @@ const customJestConfig = { module.exports = createJestConfig(customJestConfig); ``` +This will make sure you end using the correct implementation of the packages and avoid having issues in your tests. + ## From version 7.x to 8.0.0 ### Portable stories diff --git a/code/frameworks/nextjs/src/cache/index.ts b/code/frameworks/nextjs/src/cache/index.ts deleted file mode 100644 index c08124c90813..000000000000 --- a/code/frameworks/nextjs/src/cache/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { fn } from '@storybook/test'; - -export * from 'next/cache.actual'; -export const revalidatePath = fn().mockName('revalidatePath'); diff --git a/code/frameworks/nextjs/src/export-mocks/cache/index.ts b/code/frameworks/nextjs/src/export-mocks/cache/index.ts index 7529a220aa76..1692979f0159 100644 --- a/code/frameworks/nextjs/src/export-mocks/cache/index.ts +++ b/code/frameworks/nextjs/src/export-mocks/cache/index.ts @@ -1,8 +1,17 @@ import { fn } from '@storybook/test'; - -// re-exports of the actual module -export * from 'next/cache.actual'; +import { unstable_cache } from 'next/dist/server/web/spec-extension/unstable-cache'; +import { unstable_noStore } from 'next/dist/server/web/spec-extension/unstable-no-store'; // mock utilities/overrides (as of Next v14.2.0) -export const revalidatePath = fn().mockName('revalidatePath'); -export const revalidateTag = fn().mockName('revalidateTag'); +const revalidatePath = fn().mockName('revalidatePath'); +const revalidateTag = fn().mockName('revalidateTag'); + +const cacheExports = { + unstable_cache, + revalidateTag, + revalidatePath, + unstable_noStore, +}; + +export default cacheExports; +export { unstable_cache, revalidateTag, revalidatePath, unstable_noStore }; diff --git a/code/frameworks/nextjs/src/export-mocks/headers/index.ts b/code/frameworks/nextjs/src/export-mocks/headers/index.ts index d14507fdfb2e..1ec2cbd2915f 100644 --- a/code/frameworks/nextjs/src/export-mocks/headers/index.ts +++ b/code/frameworks/nextjs/src/export-mocks/headers/index.ts @@ -1,8 +1,8 @@ import { fn } from '@storybook/test'; -import * as originalHeaders from 'next/headers.actual'; +import * as originalHeaders from 'next/dist/client/components/headers'; // re-exports of the actual module -export * from 'next/headers.actual'; +export * from 'next/dist/client/components/headers'; // mock utilities/overrides (as of Next v14.2.0) export { headers } from './headers'; diff --git a/code/frameworks/nextjs/src/export-mocks/navigation/index.ts b/code/frameworks/nextjs/src/export-mocks/navigation/index.ts index dabfdece7881..47a7e5801b56 100644 --- a/code/frameworks/nextjs/src/export-mocks/navigation/index.ts +++ b/code/frameworks/nextjs/src/export-mocks/navigation/index.ts @@ -1,7 +1,7 @@ import type { Mock } from '@storybook/test'; import { fn } from '@storybook/test'; import { NextjsRouterMocksNotAvailable } from '@storybook/core-events/preview-errors'; -import * as originalNavigation from 'next/navigation.actual'; +import * as originalNavigation from 'next/dist/client/components/navigation'; let navigationAPI: { push: Mock; @@ -53,7 +53,7 @@ const getRouter = () => { }; // re-exports of the actual module -export * from 'next/navigation.actual'; +export * from 'next/dist/client/components/navigation'; // mock utilities/overrides (as of Next v14.2.0) const redirect = fn().mockName('redirect'); diff --git a/code/frameworks/nextjs/src/export-mocks/router/index.ts b/code/frameworks/nextjs/src/export-mocks/router/index.ts index 49e89a6c5eb7..c9f81f3a72be 100644 --- a/code/frameworks/nextjs/src/export-mocks/router/index.ts +++ b/code/frameworks/nextjs/src/export-mocks/router/index.ts @@ -2,7 +2,7 @@ import type { Mock } from '@storybook/test'; import { fn } from '@storybook/test'; import { NextjsRouterMocksNotAvailable } from '@storybook/core-events/preview-errors'; import type { NextRouter, SingletonRouter } from 'next/router'; -import singletonRouter, * as originalRouter from 'next/router.actual'; +import singletonRouter, * as originalRouter from 'next/dist/client/router'; const defaultRouterState = { route: '/', @@ -106,7 +106,7 @@ const getRouter = () => { }; // re-exports of the actual module -export * from 'next/router.actual'; +export * from 'next/dist/client/router'; export default singletonRouter; // mock utilities/overrides (as of Next v14.2.0) diff --git a/code/frameworks/nextjs/src/export-mocks/webpack.ts b/code/frameworks/nextjs/src/export-mocks/webpack.ts index 64d7d37a33fb..789dc1df21cd 100644 --- a/code/frameworks/nextjs/src/export-mocks/webpack.ts +++ b/code/frameworks/nextjs/src/export-mocks/webpack.ts @@ -12,20 +12,15 @@ export const getPackageAliases = ({ useESM = false }: { useESM?: boolean } = {}) const routerPath = join(packageLocation, `/dist/export-mocks/router/index.${extension}`); return { - // "*.actual" paths are used as reexports of the original module - 'next/headers.actual': require.resolve('next/headers'), 'next/headers': headersPath, '@storybook/nextjs/headers.mock': headersPath, - 'next/navigation.actual': require.resolve('next/navigation'), 'next/navigation': navigationPath, '@storybook/nextjs/navigation.mock': navigationPath, - 'next/router.actual': require.resolve('next/router'), 'next/router': routerPath, '@storybook/nextjs/router.mock': routerPath, - 'next/cache.actual': require.resolve('next/cache'), 'next/cache': cachePath, '@storybook/nextjs/cache.mock': cachePath, }; diff --git a/code/frameworks/nextjs/src/globals.d.ts b/code/frameworks/nextjs/src/globals.d.ts index 58b3cfdf6114..e966d7072a32 100644 --- a/code/frameworks/nextjs/src/globals.d.ts +++ b/code/frameworks/nextjs/src/globals.d.ts @@ -1,15 +1,3 @@ declare module 'next/dist/compiled'; declare module 'next/dist/compiled/babel/plugin-transform-modules-commonjs'; declare module 'next/dist/compiled/babel/plugin-syntax-jsx'; -declare module 'next/navigation.actual' { - export * from 'next/navigation'; -} -declare module 'next/router.actual' { - export * from 'next/router'; -} -declare module 'next/cache.actual' { - export * from 'next/cache'; -} -declare module 'next/headers.actual' { - export * from 'next/headers'; -} diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock b/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock index 7e95fae96fcf..e0efcfd9d6d9 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock @@ -1566,6 +1566,15 @@ __metadata: languageName: node linkType: hard +"@emnapi/runtime@npm:^1.1.0": + version: 1.1.1 + resolution: "@emnapi/runtime@npm:1.1.1" + dependencies: + tslib: "npm:^2.4.0" + checksum: 10/9c804f79453aa378fbcd0106e67216b9dc2514ec6d4c0ce06aa5483ba853c6f92e1b84cc60b4253276df7355daf40eda5c929b4613e7179bed4f4d3be7d74d83 + languageName: node + linkType: hard + "@emotion/use-insertion-effect-with-fallbacks@npm:^1.0.1": version: 1.0.1 resolution: "@emotion/use-insertion-effect-with-fallbacks@npm:1.0.1" @@ -1810,6 +1819,181 @@ __metadata: languageName: node linkType: hard +"@img/sharp-darwin-arm64@npm:0.33.3": + version: 0.33.3 + resolution: "@img/sharp-darwin-arm64@npm:0.33.3" + dependencies: + "@img/sharp-libvips-darwin-arm64": "npm:1.0.2" + dependenciesMeta: + "@img/sharp-libvips-darwin-arm64": + optional: true + conditions: os=darwin & cpu=arm64 + languageName: node + linkType: hard + +"@img/sharp-darwin-x64@npm:0.33.3": + version: 0.33.3 + resolution: "@img/sharp-darwin-x64@npm:0.33.3" + dependencies: + "@img/sharp-libvips-darwin-x64": "npm:1.0.2" + dependenciesMeta: + "@img/sharp-libvips-darwin-x64": + optional: true + conditions: os=darwin & cpu=x64 + languageName: node + linkType: hard + +"@img/sharp-libvips-darwin-arm64@npm:1.0.2": + version: 1.0.2 + resolution: "@img/sharp-libvips-darwin-arm64@npm:1.0.2" + conditions: os=darwin & cpu=arm64 + languageName: node + linkType: hard + +"@img/sharp-libvips-darwin-x64@npm:1.0.2": + version: 1.0.2 + resolution: "@img/sharp-libvips-darwin-x64@npm:1.0.2" + conditions: os=darwin & cpu=x64 + languageName: node + linkType: hard + +"@img/sharp-libvips-linux-arm64@npm:1.0.2": + version: 1.0.2 + resolution: "@img/sharp-libvips-linux-arm64@npm:1.0.2" + conditions: os=linux & cpu=arm64 & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-libvips-linux-arm@npm:1.0.2": + version: 1.0.2 + resolution: "@img/sharp-libvips-linux-arm@npm:1.0.2" + conditions: os=linux & cpu=arm & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-libvips-linux-s390x@npm:1.0.2": + version: 1.0.2 + resolution: "@img/sharp-libvips-linux-s390x@npm:1.0.2" + conditions: os=linux & cpu=s390x & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-libvips-linux-x64@npm:1.0.2": + version: 1.0.2 + resolution: "@img/sharp-libvips-linux-x64@npm:1.0.2" + conditions: os=linux & cpu=x64 & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-libvips-linuxmusl-arm64@npm:1.0.2": + version: 1.0.2 + resolution: "@img/sharp-libvips-linuxmusl-arm64@npm:1.0.2" + conditions: os=linux & cpu=arm64 & libc=musl + languageName: node + linkType: hard + +"@img/sharp-libvips-linuxmusl-x64@npm:1.0.2": + version: 1.0.2 + resolution: "@img/sharp-libvips-linuxmusl-x64@npm:1.0.2" + conditions: os=linux & cpu=x64 & libc=musl + languageName: node + linkType: hard + +"@img/sharp-linux-arm64@npm:0.33.3": + version: 0.33.3 + resolution: "@img/sharp-linux-arm64@npm:0.33.3" + dependencies: + "@img/sharp-libvips-linux-arm64": "npm:1.0.2" + dependenciesMeta: + "@img/sharp-libvips-linux-arm64": + optional: true + conditions: os=linux & cpu=arm64 & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-linux-arm@npm:0.33.3": + version: 0.33.3 + resolution: "@img/sharp-linux-arm@npm:0.33.3" + dependencies: + "@img/sharp-libvips-linux-arm": "npm:1.0.2" + dependenciesMeta: + "@img/sharp-libvips-linux-arm": + optional: true + conditions: os=linux & cpu=arm & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-linux-s390x@npm:0.33.3": + version: 0.33.3 + resolution: "@img/sharp-linux-s390x@npm:0.33.3" + dependencies: + "@img/sharp-libvips-linux-s390x": "npm:1.0.2" + dependenciesMeta: + "@img/sharp-libvips-linux-s390x": + optional: true + conditions: os=linux & cpu=s390x & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-linux-x64@npm:0.33.3": + version: 0.33.3 + resolution: "@img/sharp-linux-x64@npm:0.33.3" + dependencies: + "@img/sharp-libvips-linux-x64": "npm:1.0.2" + dependenciesMeta: + "@img/sharp-libvips-linux-x64": + optional: true + conditions: os=linux & cpu=x64 & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-linuxmusl-arm64@npm:0.33.3": + version: 0.33.3 + resolution: "@img/sharp-linuxmusl-arm64@npm:0.33.3" + dependencies: + "@img/sharp-libvips-linuxmusl-arm64": "npm:1.0.2" + dependenciesMeta: + "@img/sharp-libvips-linuxmusl-arm64": + optional: true + conditions: os=linux & cpu=arm64 & libc=musl + languageName: node + linkType: hard + +"@img/sharp-linuxmusl-x64@npm:0.33.3": + version: 0.33.3 + resolution: "@img/sharp-linuxmusl-x64@npm:0.33.3" + dependencies: + "@img/sharp-libvips-linuxmusl-x64": "npm:1.0.2" + dependenciesMeta: + "@img/sharp-libvips-linuxmusl-x64": + optional: true + conditions: os=linux & cpu=x64 & libc=musl + languageName: node + linkType: hard + +"@img/sharp-wasm32@npm:0.33.3": + version: 0.33.3 + resolution: "@img/sharp-wasm32@npm:0.33.3" + dependencies: + "@emnapi/runtime": "npm:^1.1.0" + conditions: cpu=wasm32 + languageName: node + linkType: hard + +"@img/sharp-win32-ia32@npm:0.33.3": + version: 0.33.3 + resolution: "@img/sharp-win32-ia32@npm:0.33.3" + conditions: os=win32 & cpu=ia32 + languageName: node + linkType: hard + +"@img/sharp-win32-x64@npm:0.33.3": + version: 0.33.3 + resolution: "@img/sharp-win32-x64@npm:0.33.3" + conditions: os=win32 & cpu=x64 + languageName: node + linkType: hard + "@isaacs/cliui@npm:^8.0.2": version: 8.0.2 resolution: "@isaacs/cliui@npm:8.0.2" @@ -2378,8 +2562,8 @@ __metadata: linkType: hard "@storybook/addon-actions@file:../../../code/addons/actions::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/addon-actions@file:../../../code/addons/actions#../../../code/addons/actions::hash=a58e61&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/addon-actions@file:../../../code/addons/actions#../../../code/addons/actions::hash=d59fc8&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-events": "workspace:*" "@storybook/global": "npm:^5.0.0" @@ -2387,35 +2571,35 @@ __metadata: dequal: "npm:^2.0.2" polished: "npm:^4.2.2" uuid: "npm:^9.0.0" - checksum: 10/448ef050488c32b161113c707a9bd3e4eb734f7a23f350d7cb05dd30927785c19b0eb1b2f01f8f5f7106e8f46dcc2cfc9496a089dee818754dc83ae5403d8ee6 + checksum: 10/8e77a9ceaec6076a498ead78455d792ce995d184ce5391415b65dff69e90d63bcb2aa9df49c282d68ed4c90c02301af94d1e7e2c34351182c22e3bc21525c71a languageName: node linkType: hard "@storybook/addon-backgrounds@file:../../../code/addons/backgrounds::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/addon-backgrounds@file:../../../code/addons/backgrounds#../../../code/addons/backgrounds::hash=bbac2f&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/addon-backgrounds@file:../../../code/addons/backgrounds#../../../code/addons/backgrounds::hash=445bce&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" memoizerific: "npm:^1.11.3" ts-dedent: "npm:^2.0.0" - checksum: 10/aaae35c1f570d788cded175bad9b07ce9826023fa320e6d276c62678953d07cfe98f636005d7ce0456d0b5df699e16377317edcfdb7d304d3b05cc4d1683bb72 + checksum: 10/7f2c66b7516beeeb976d227f27f0cebd600ac5d3abada7d5e01c30d10cc053059f15b607cb78f1c2d03c82a8294fb61598cbca41c3c5f3cf432e79587d4d15a2 languageName: node linkType: hard "@storybook/addon-controls@file:../../../code/addons/controls::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/addon-controls@file:../../../code/addons/controls#../../../code/addons/controls::hash=b28ca0&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/addon-controls@file:../../../code/addons/controls#../../../code/addons/controls::hash=784f9c&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/blocks": "workspace:*" lodash: "npm:^4.17.21" ts-dedent: "npm:^2.0.0" - checksum: 10/f68a13e40bda392c1abc4cee2f2294fe98f11e8b34af8213532ae14027327efbafb3c9a8d75d300a3c58fb8d036a09f349e60cd064dd8dbde504add2945bab6b + checksum: 10/6e4db5b470f526bb357af93fd6757fe8d4976f4fdb1c3856b828f408780e27645038bdc70e318de40f8fc069a359d4d822ada860df8cffd41daf5506b5468642 languageName: node linkType: hard "@storybook/addon-docs@file:../../../code/addons/docs::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/addon-docs@file:../../../code/addons/docs#../../../code/addons/docs::hash=c90446&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/addon-docs@file:../../../code/addons/docs#../../../code/addons/docs::hash=9997b1&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@babel/core": "npm:^7.12.3" "@mdx-js/react": "npm:^3.0.0" @@ -2437,13 +2621,13 @@ __metadata: rehype-external-links: "npm:^3.0.0" rehype-slug: "npm:^6.0.0" ts-dedent: "npm:^2.0.0" - checksum: 10/6cb03b37a894e2a563a67bcc1179194a7e48f202ed438763cce7b6255697fd6dd192607076dad6503d7be4a1d094daf9d18daf50b8aebae71ededfe020f151f1 + checksum: 10/f5ddf6fea8bce15a81e067cfae26adfc76b751c4a58539efbcdb22c5e8c4195bb156ff97316d3066026c810b3855dbe7cc091eff0ede9b12914d261629b7a828 languageName: node linkType: hard "@storybook/addon-essentials@file:../../../code/addons/essentials::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/addon-essentials@file:../../../code/addons/essentials#../../../code/addons/essentials::hash=584ec5&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/addon-essentials@file:../../../code/addons/essentials#../../../code/addons/essentials::hash=80691b&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/addon-actions": "workspace:*" "@storybook/addon-backgrounds": "workspace:*" @@ -2459,22 +2643,22 @@ __metadata: "@storybook/node-logger": "workspace:*" "@storybook/preview-api": "workspace:*" ts-dedent: "npm:^2.0.0" - checksum: 10/986829238ed66c8818ab27995effd47614c4182aa326e70de645d38babf58f2cab76c7a2f1825a34cecab07ca78ca2bb5e69938da2dec3bb9837905f7e43ec9b + checksum: 10/0479f4d2f488ab30b371fd9f2bd5c12b7dcd029aac9a1f8f774701886d941b63c0ec4f50c221469ea220582ce4720d7386b9458cf15a29bf2c03eb51a6c70d13 languageName: node linkType: hard "@storybook/addon-highlight@file:../../../code/addons/highlight::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/addon-highlight@file:../../../code/addons/highlight#../../../code/addons/highlight::hash=291b82&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/addon-highlight@file:../../../code/addons/highlight#../../../code/addons/highlight::hash=7ee0d6&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" - checksum: 10/ecf6c7aecffb3b61cd08468d9a8f0f67b191ff8c4d9df0022b077f3e0cb6a42b109a8d844745c14a62ae740131708c606b3b5e359fbf5921559b0e02a85cc686 + checksum: 10/1e7db616fd4ddc6dd32583e6aff3df57d0ff001d2a5de8f990de53625d041b9f09bc6ec729accd0b528f24d54a954e10677bfbeeed07e938c00cbaed1d19c5b9 languageName: node linkType: hard "@storybook/addon-interactions@file:../../../code/addons/interactions::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/addon-interactions@file:../../../code/addons/interactions#../../../code/addons/interactions::hash=43a156&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/addon-interactions@file:../../../code/addons/interactions#../../../code/addons/interactions::hash=811a2a&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" "@storybook/instrumenter": "workspace:*" @@ -2482,55 +2666,55 @@ __metadata: "@storybook/types": "workspace:*" polished: "npm:^4.2.2" ts-dedent: "npm:^2.2.0" - checksum: 10/7ab50dfb5ccfde231d5ebde1e695512c5bb3706e5fe9bc580fbf23d5298ac7685e9648fbbc5f65605779954dc2f04ac1ce799e47b387d7eaaff5c9d7e8485602 + checksum: 10/b13a075c0deb2578a7535c42c124adc1fb6f097187f119ccfdfd3e54e867f8a1f448ebc86a7631ac49dcf52a79512a872fa72737a4ebf2ddbe9cb3ae9c707750 languageName: node linkType: hard "@storybook/addon-measure@file:../../../code/addons/measure::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/addon-measure@file:../../../code/addons/measure#../../../code/addons/measure::hash=43b2ca&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/addon-measure@file:../../../code/addons/measure#../../../code/addons/measure::hash=1bf2c0&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" tiny-invariant: "npm:^1.3.1" - checksum: 10/ce880ee3acae8c6a5994a5905724040f1cb9b7a1c1654c6ab6dfec0f61298db78afc78309aa966eecf1dbdc2e59f48cb2108c7514305ca701eeb19262477bfc8 + checksum: 10/dbb3076c99da811d94598070cb57ed19b2a00c875668fc8d586f93d59585b6f2485f04998f61294cd037b43f8d03f21b53d1918c73d1bb9c8652bf6aa6737530 languageName: node linkType: hard "@storybook/addon-outline@file:../../../code/addons/outline::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/addon-outline@file:../../../code/addons/outline#../../../code/addons/outline::hash=772f7e&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/addon-outline@file:../../../code/addons/outline#../../../code/addons/outline::hash=2a387b&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" ts-dedent: "npm:^2.0.0" - checksum: 10/17d761b1298d08adc15d65dfb3efb91440cc73e6828ab7ee290703e36f9c2756546a99220119c15d03697c5ac2b71ccdd7b98fba4ebb87faab9caf9ba053dbdc + checksum: 10/bc58cf5bb670333b33fa2c2414b17b0bf97ffdf92bafe89eef04f1965479f7833c388087ebb478f152780c9119f8795ae169125291419fd7e74d11cbb1410540 languageName: node linkType: hard "@storybook/addon-toolbars@file:../../../code/addons/toolbars::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/addon-toolbars@file:../../../code/addons/toolbars#../../../code/addons/toolbars::hash=ce7192&locator=portable-stories-nextjs%40workspace%3A." - checksum: 10/fd28942b5da079e25cd778e7b134b34e07289044553622b1a1636e7e2da5075ddf16f66934619eb7ba3514d98425102365ea8dd8cebbf17fec4bb6849ef38ec5 + version: 8.1.0-alpha.7 + resolution: "@storybook/addon-toolbars@file:../../../code/addons/toolbars#../../../code/addons/toolbars::hash=dba398&locator=portable-stories-nextjs%40workspace%3A." + checksum: 10/14efee7b4f58d0ee846a71aa6d614a0927a80e32c90f677325e17d0d2402ed38effc226a69c9856073dbb809d84c4c7606c339f99be6b46a6a12e0f3ce2f075b languageName: node linkType: hard "@storybook/addon-viewport@file:../../../code/addons/viewport::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/addon-viewport@file:../../../code/addons/viewport#../../../code/addons/viewport::hash=1fd57e&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/addon-viewport@file:../../../code/addons/viewport#../../../code/addons/viewport::hash=939ad5&locator=portable-stories-nextjs%40workspace%3A." dependencies: memoizerific: "npm:^1.11.3" - checksum: 10/00e25bcdc41c2ac49405c62004b0946ca24f73ee7d65678ea25ddd222ac44e44ed6716ab6c66d6743b8dd4bb89123cce0edd4bafb14883257cb133f3a8a4198a + checksum: 10/ab29c073f7d3ce1e9466672441885600429ebbba1742bc2eb0f8656853f25d9a0d86ff865f41a5b76f0809d6929a955cbc7dba716d3834887300fd3813bfa045 languageName: node linkType: hard "@storybook/blocks@file:../../../code/ui/blocks::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/blocks@file:../../../code/ui/blocks#../../../code/ui/blocks::hash=07fbe6&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/blocks@file:../../../code/ui/blocks#../../../code/ui/blocks::hash=cbda5d&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:0.1.5--canary.82.2c2dd28.0" "@storybook/docs-tools": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" @@ -2558,13 +2742,13 @@ __metadata: optional: true react-dom: optional: true - checksum: 10/b20b19cd047db66bc11227d9c64d66285b29d34da8c085d675c948355edc0a66e36b08bd95626536ad15ce970461c19528326a38f083c8533a9aeb3223fca6ee + checksum: 10/fbe2906d5016e49ff0019e7360047430bd60e277b0d2e45b90f257c72b586a89eff378a98e06b8441943015bf6eadb78a7ab8a386a43e91cd562efea9658f465 languageName: node linkType: hard "@storybook/builder-manager@file:../../../code/builders/builder-manager::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/builder-manager@file:../../../code/builders/builder-manager#../../../code/builders/builder-manager::hash=875996&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/builder-manager@file:../../../code/builders/builder-manager#../../../code/builders/builder-manager::hash=cdb753&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@fal-works/esbuild-plugin-global-externals": "npm:^2.1.2" "@storybook/core-common": "workspace:*" @@ -2580,13 +2764,13 @@ __metadata: fs-extra: "npm:^11.1.0" process: "npm:^0.11.10" util: "npm:^0.12.4" - checksum: 10/b776c568ef58940649b06b746b4002b221b88b0c9c4d56bb136b8997cfa88f77e3a05954c59c815ca2ecf19285607e2ef717198f42c11dac2235ed6b01a07c9d + checksum: 10/32bdfc42175480e59defece1f67634d40d2d039668c81e372736ac6990b2144cdd2676f9f9859250fbb5d7855cd12729f0107a64a07e32eb6a9704daf76d816b languageName: node linkType: hard "@storybook/builder-webpack5@file:../../../code/builders/builder-webpack5::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/builder-webpack5@file:../../../code/builders/builder-webpack5#../../../code/builders/builder-webpack5::hash=983659&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/builder-webpack5@file:../../../code/builders/builder-webpack5#../../../code/builders/builder-webpack5::hash=a8e558&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" @@ -2619,32 +2803,32 @@ __metadata: util: "npm:^0.12.4" util-deprecate: "npm:^1.0.2" webpack: "npm:5" - webpack-dev-middleware: "npm:^6.1.1" + webpack-dev-middleware: "npm:^6.1.2" webpack-hot-middleware: "npm:^2.25.1" webpack-virtual-modules: "npm:^0.5.0" peerDependenciesMeta: typescript: optional: true - checksum: 10/f84f41cd8ac80376ba603f4bb58da565f2b0e95ed37593279d85c4e5573de64633f10b7c6f2bd399f6d40057f1c97934760b969326520250f6de5efd07ac967b + checksum: 10/a6b42481cf0694efbbee23ee57657cf700da49c5b6744a87667b6c6cea7e1381c5cf67bc49640231083f7c0387f96a82a9cb853bdba0a9add540fef0dd924bf1 languageName: node linkType: hard "@storybook/channels@file:../../../code/lib/channels::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/channels@file:../../../code/lib/channels#../../../code/lib/channels::hash=3a33a2&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/channels@file:../../../code/lib/channels#../../../code/lib/channels::hash=c002e8&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" "@storybook/global": "npm:^5.0.0" telejson: "npm:^7.2.0" tiny-invariant: "npm:^1.3.1" - checksum: 10/cda1b155f07fdac919a29e5a5287ae33ef4b3ed9c5c9816c29e17e3aa0dd788dc59da8775c40341ebcbd426ecf4f9ab629949dfe945834f48db7ca6053c062f1 + checksum: 10/011d5c3631e39ecb2e0bee1d18c238d27a3b2523f674775ced4a187b589a3165504f2e685b77334347f01c415fb07b2ecf748ad0ad12c926b188a8450db6e5b2 languageName: node linkType: hard "@storybook/cli@file:../../../code/lib/cli::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/cli@file:../../../code/lib/cli#../../../code/lib/cli::hash=2914c7&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/cli@file:../../../code/lib/cli#../../../code/lib/cli::hash=4c4245&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@babel/core": "npm:^7.23.0" "@babel/types": "npm:^7.23.0" @@ -2685,27 +2869,27 @@ __metadata: bin: getstorybook: ./bin/index.js sb: ./bin/index.js - checksum: 10/6c967c34ef47687aa6ccbc70d82f22e375be79af1bf5eec3e1163c7774b65fda69a414c0aa712039062a9f184bc84d70e7fcf713712c28d4a121cc3848a32600 + checksum: 10/6e3c6c9e15ddafb9444d51c973b5fa83b11d57943dd339cfaa5f51386b1590da12e43cc84f15707080d69cee3edbef79d9dac8d18a0ed4a9c950f180b52e239e languageName: node linkType: hard "@storybook/client-logger@file:../../../code/lib/client-logger::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/client-logger@file:../../../code/lib/client-logger#../../../code/lib/client-logger::hash=f3ac76&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/client-logger@file:../../../code/lib/client-logger#../../../code/lib/client-logger::hash=3fcc66&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" - checksum: 10/00b5cfade208483f5ec85c8aa59cabf402502a4cf1d9c3ee24a311a396e65ce97f0a3d4356aac9f413c8d84c9804ccb07aaeda6f3d553799e6e036960f4a2fbe + checksum: 10/b9659c0914a46c81a0c8b2ab88741832504b4d87da0e785219ea5182154690d5d37107b42923143f598f36bf263b15a6f4dfa14522bdcada8abd97a581981ca3 languageName: node linkType: hard "@storybook/codemod@file:../../../code/lib/codemod::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/codemod@file:../../../code/lib/codemod#../../../code/lib/codemod::hash=13e51b&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/codemod@file:../../../code/lib/codemod#../../../code/lib/codemod::hash=581658&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@babel/core": "npm:^7.23.2" "@babel/preset-env": "npm:^7.23.2" "@babel/types": "npm:^7.23.0" - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:0.1.5--canary.82.2c2dd28.0" "@storybook/csf-tools": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/types": "workspace:*" @@ -2717,17 +2901,17 @@ __metadata: prettier: "npm:^3.1.1" recast: "npm:^0.23.5" tiny-invariant: "npm:^1.3.1" - checksum: 10/5cfc52e72455178e503ff226dd3fa1a0917e7f14a86f58b914aa5971f5288e45b68246b0d550169a9af941d5bdb2293c160831de4c466894ddabb609092dbace + checksum: 10/8b1a4034f0548b3b15cd4295ba0c665b352548fe801986b73ede2c6706bbab75f35168120cb16d202d7af916fa448cce4259543fe3693356d4e0045af8b969d6 languageName: node linkType: hard "@storybook/components@file:../../../code/ui/components::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/components@file:../../../code/ui/components#../../../code/ui/components::hash=636348&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/components@file:../../../code/ui/components#../../../code/ui/components::hash=0a4eda&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@radix-ui/react-slot": "npm:^1.0.2" "@storybook/client-logger": "workspace:*" - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:0.1.5--canary.82.2c2dd28.0" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" "@storybook/theming": "workspace:*" @@ -2737,13 +2921,13 @@ __metadata: peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: 10/02326f8b50631922d80cf64163abf4e723c5a1fd78c1ae1b276c95ff7992c0a826736badf1b7222038d83775b2937ef60de426aab7a6d5262a7b1152f5825abc + checksum: 10/81638bcf22893395a49cc7bfbd088f9e5e0c2bdf29aa2a57dfe48635654ab042234944f8f0b4a359f9092ec9b0b390f1fcceca71358b01442d717126d01de747 languageName: node linkType: hard "@storybook/core-common@file:../../../code/lib/core-common::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/core-common@file:../../../code/lib/core-common#../../../code/lib/core-common::hash=be2541&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/core-common@file:../../../code/lib/core-common#../../../code/lib/core-common::hash=dbe335&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-events": "workspace:*" "@storybook/csf-tools": "workspace:*" @@ -2773,22 +2957,22 @@ __metadata: tiny-invariant: "npm:^1.3.1" ts-dedent: "npm:^2.0.0" util: "npm:^0.12.4" - checksum: 10/b8502748d79920a961510e19eb759172ff2a04699b16c458a6d00dd8e73552a41e15873d57bddfc5f87904d11c8fb308061a507aa445fbf34306d92ffb329c2c + checksum: 10/dfbf13670cad14ad25ff129e96aa4b66256bb1d6bd5374a9f655106780daf2e41e9595816240e5c010b8102c333adb43a7502d0144bb58a2658873f4e0be2a38 languageName: node linkType: hard "@storybook/core-events@file:../../../code/lib/core-events::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/core-events@file:../../../code/lib/core-events#../../../code/lib/core-events::hash=11b404&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/core-events@file:../../../code/lib/core-events#../../../code/lib/core-events::hash=16f155&locator=portable-stories-nextjs%40workspace%3A." dependencies: ts-dedent: "npm:^2.0.0" - checksum: 10/5c276f3805d92b799c0c7c4c111fff2f59522900b855c634472bdb925b5b917a34d28c41ff4b4d5ed88bbb3b78671a6a36764b67ae99085d9758052d6fa51e09 + checksum: 10/ea59a9de87e8525efbf5a5d760bdec7f7e36744cab68215c8e3623b8e6b69741ab664f1b24568d96a46d0a3225fb00047b744c258eb9c7fc30a644bdd7080029 languageName: node linkType: hard "@storybook/core-server@file:../../../code/lib/core-server::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/core-server@file:../../../code/lib/core-server#../../../code/lib/core-server::hash=e5bcbd&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/core-server@file:../../../code/lib/core-server#../../../code/lib/core-server::hash=8a7d23&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@aw-web-design/x-default-browser": "npm:1.4.126" "@babel/core": "npm:^7.23.9" @@ -2797,7 +2981,7 @@ __metadata: "@storybook/channels": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:0.1.5--canary.82.2c2dd28.0" "@storybook/csf-tools": "workspace:*" "@storybook/docs-mdx": "npm:3.0.0" "@storybook/global": "npm:^5.0.0" @@ -2835,47 +3019,56 @@ __metadata: util-deprecate: "npm:^1.0.2" watchpack: "npm:^2.2.0" ws: "npm:^8.2.3" - checksum: 10/1f4f9495d5d3158613966a1b84f8fb19d8fcee6d05f06c885d27315cf8416fe36b18c898d577ff2a5ad72157d7f7e63171d9b49bf0191cdc45519f224e5c5ad7 + checksum: 10/1ea774a68abdc96f1aeebf7bcb25905cacd160bc8901fcb9505f3f1c38d475674d294b1a2cd24f8db6ed2b166d2a1c3284299b22396ef76935c431960a3a4dd3 languageName: node linkType: hard "@storybook/core-webpack@file:../../../code/lib/core-webpack::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/core-webpack@file:../../../code/lib/core-webpack#../../../code/lib/core-webpack::hash=d17dda&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/core-webpack@file:../../../code/lib/core-webpack#../../../code/lib/core-webpack::hash=c7e54c&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-common": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/types": "workspace:*" "@types/node": "npm:^18.0.0" ts-dedent: "npm:^2.0.0" - checksum: 10/2e56db38374ec96f01c00c0fa4c8a9090c1db1d56c8c611a93d1a0c60769aa6a2c751ed29fa6c3a3a7adbf99d457287908e8e01ee1848ab6c59f6837934d81bf + checksum: 10/4bebf551445b0567fd2f47d5827839c6f8f0c8ffb4bb0968a4ffe20a3704a6cfe6928447b6bedbb3bcb95bd574f9a87184692d17e9f23eef16aebf2348ddd599 languageName: node linkType: hard "@storybook/csf-plugin@file:../../../code/lib/csf-plugin::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/csf-plugin@file:../../../code/lib/csf-plugin#../../../code/lib/csf-plugin::hash=5ec6ec&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/csf-plugin@file:../../../code/lib/csf-plugin#../../../code/lib/csf-plugin::hash=af3a0b&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/csf-tools": "workspace:*" unplugin: "npm:^1.3.1" - checksum: 10/592fd4a3cc9af877bce352c7ad61aaf442b2b65dfcb9f27cbd3d6f29d48649f1c3d001fb68d4abdea376b57c277f25ccd25f41e6d6d23780ae4e498daaf37014 + checksum: 10/675bedecfbd0d0deffa986ee402ef9aabc74ea3d91ee1c30d02d297ba3dc262bb148d59cfdcfe331ab920c1dde904df808c1f74f51a7feb46b90a7860ccd4ab9 languageName: node linkType: hard "@storybook/csf-tools@file:../../../code/lib/csf-tools::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/csf-tools@file:../../../code/lib/csf-tools#../../../code/lib/csf-tools::hash=69584a&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/csf-tools@file:../../../code/lib/csf-tools#../../../code/lib/csf-tools::hash=7e5a6b&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@babel/generator": "npm:^7.23.0" "@babel/parser": "npm:^7.23.0" "@babel/traverse": "npm:^7.23.2" "@babel/types": "npm:^7.23.0" - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:0.1.5--canary.82.2c2dd28.0" "@storybook/types": "workspace:*" fs-extra: "npm:^11.1.0" recast: "npm:^0.23.5" ts-dedent: "npm:^2.0.0" - checksum: 10/7fce79866ace04b9a2bc78a66a03e27e6e770b4279e1b40c08634bce01eb57be22f5f192f73c6a65cc959c8910f63a3d35e31a71fe3ac821aea095722e324710 + checksum: 10/304b91074bdf94d8f2d9187ff7f590b6efae17f7a66f397aa39de1d816c2b9b5bda3207da16893b5b26a6f5a2c96453671607cd940856a3de3065788582778ac + languageName: node + linkType: hard + +"@storybook/csf@npm:0.1.5--canary.82.2c2dd28.0": + version: 0.1.5--canary.82.2c2dd28.0 + resolution: "@storybook/csf@npm:0.1.5--canary.82.2c2dd28.0" + dependencies: + type-fest: "npm:^2.19.0" + checksum: 10/8d7bd16e848f518f6ee001d4360fba73ce30a95dad6c6bf52ad69ec4a7387e6919cc3f6c1cc09abf27c524ca1501ed669b2f82ed1882a4d19a6c5d9b7b8e6a7c languageName: node linkType: hard @@ -2888,15 +3081,6 @@ __metadata: languageName: node linkType: hard -"@storybook/csf@npm:^0.1.2": - version: 0.1.2 - resolution: "@storybook/csf@npm:0.1.2" - dependencies: - type-fest: "npm:^2.19.0" - checksum: 10/11168df65e7b6bd0e5d31e7e805c8ba80397fc190cb33424e043b72bbd85d8f826dba082503992d7f606b72484337ab9d091eca947550613e241fbef57780d4c - languageName: node - linkType: hard - "@storybook/docs-mdx@npm:3.0.0": version: 3.0.0 resolution: "@storybook/docs-mdx@npm:3.0.0" @@ -2905,8 +3089,8 @@ __metadata: linkType: hard "@storybook/docs-tools@file:../../../code/lib/docs-tools::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/docs-tools@file:../../../code/lib/docs-tools#../../../code/lib/docs-tools::hash=55c8ec&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/docs-tools@file:../../../code/lib/docs-tools#../../../code/lib/docs-tools::hash=025eed&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-common": "workspace:*" "@storybook/preview-api": "workspace:*" @@ -2915,7 +3099,7 @@ __metadata: assert: "npm:^2.1.0" doctrine: "npm:^3.0.0" lodash: "npm:^4.17.21" - checksum: 10/59ee342654240884ea89aa3f66d86fbab06759af23b3897635b1976c75c77dcb08b908b46528138294febc5347eb5564728e956cd66d0ee170b3438ec8269a49 + checksum: 10/55050db778123e7bb41ddc2ccab88fb7abef014e40b27186e7b914bb7dab765745a546f9af3c8a5f7b50928dedfe9bbc7c6f17e6c5c38b58177540af584c0267 languageName: node linkType: hard @@ -2937,8 +3121,8 @@ __metadata: linkType: hard "@storybook/instrumenter@file:../../../code/lib/instrumenter::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/instrumenter@file:../../../code/lib/instrumenter#../../../code/lib/instrumenter::hash=ffe9d7&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/instrumenter@file:../../../code/lib/instrumenter#../../../code/lib/instrumenter::hash=cdd3b4&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" @@ -2947,18 +3131,18 @@ __metadata: "@storybook/preview-api": "workspace:*" "@vitest/utils": "npm:^1.3.1" util: "npm:^0.12.4" - checksum: 10/84948fcfafe05e5934117e6c514a1788f9d146d28f749c11313e5f65c60f3f20be0e659e97f14a6b5ce405b01afa4941571f644a9cb88d8b3a956c2c79413723 + checksum: 10/040d6c9b45ba8a021deb572ae198e31d12a0bdce95846abaa6d603e7db6cfeb7c2e9f28d7fafdcc4b358a2c4e836436958fc92792388e6cc3adeffca978d9c46 languageName: node linkType: hard "@storybook/manager-api@file:../../../code/lib/manager-api::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/manager-api@file:../../../code/lib/manager-api#../../../code/lib/manager-api::hash=4ab1f3&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/manager-api@file:../../../code/lib/manager-api#../../../code/lib/manager-api::hash=bc7e8b&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:0.1.5--canary.82.2c2dd28.0" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" "@storybook/router": "workspace:*" @@ -2970,20 +3154,20 @@ __metadata: store2: "npm:^2.14.2" telejson: "npm:^7.2.0" ts-dedent: "npm:^2.0.0" - checksum: 10/ef8fe488bd220f3b895d26895e5a55a9bc110ee799f062f06d3c32dfa5ccd834c04074d96d8d4dc8c41336e322b2d3a4e0f93dc518442b22a9b36ddbfc92f990 + checksum: 10/f65075271f76c1e8133d5e6f946516892f72212c0c6b563f8054851f598b0e9f2811e1fe75862833ba063f8bb1813067d51a9cb6ed149524dec75cd6d0b61df3 languageName: node linkType: hard "@storybook/manager@file:../../../code/ui/manager::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/manager@file:../../../code/ui/manager#../../../code/ui/manager::hash=645d43&locator=portable-stories-nextjs%40workspace%3A." - checksum: 10/9708627cc2f3a886c53dfec9402088f6b18b40ba8f472289d08c6b25c0e2e1e71871d6a79f19e57586751b287b55506c72372d1a0fab2efa89847719bf7c50f7 + version: 8.1.0-alpha.7 + resolution: "@storybook/manager@file:../../../code/ui/manager#../../../code/ui/manager::hash=285a67&locator=portable-stories-nextjs%40workspace%3A." + checksum: 10/504a6998bfc2d2b8f8e9b1c4fa2f958abc7802eb0bb0f318fcdce4bc2e55960e2c201827c70ef50a969511e51435e17b4500ed10113776c3783719bee8bfaf3d languageName: node linkType: hard "@storybook/nextjs@file:../../../code/frameworks/nextjs::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/nextjs@file:../../../code/frameworks/nextjs#../../../code/frameworks/nextjs::hash=fbb1b0&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/nextjs@file:../../../code/frameworks/nextjs#../../../code/frameworks/nextjs::hash=246816&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@babel/core": "npm:^7.23.2" "@babel/plugin-syntax-bigint": "npm:^7.8.3" @@ -3024,7 +3208,7 @@ __metadata: resolve-url-loader: "npm:^5.0.0" sass-loader: "npm:^12.4.0" semver: "npm:^7.3.5" - sharp: "npm:^0.32.6" + sharp: "npm:^0.33.3" style-loader: "npm:^3.3.1" styled-jsx: "npm:5.1.1" ts-dedent: "npm:^2.0.0" @@ -3035,25 +3219,28 @@ __metadata: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 webpack: ^5.0.0 + dependenciesMeta: + sharp: + optional: true peerDependenciesMeta: typescript: optional: true webpack: optional: true - checksum: 10/c7e8437a541d526982a78e734592a1e5ce09053dbda221b7d4717b657d4595a2ff5fd9af17d55e695a6fde6610c4c856ec15f8039372d18237daa1fb7ccc86a4 + checksum: 10/71732cc220e381872106dab3824883f4a77dcbb60901c939f58599bf92f156564a34fe646ce1159c307702be03cf532fbffaa1a515e271a6623f340d19000283 languageName: node linkType: hard "@storybook/node-logger@file:../../../code/lib/node-logger::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/node-logger@file:../../../code/lib/node-logger#../../../code/lib/node-logger::hash=0d5379&locator=portable-stories-nextjs%40workspace%3A." - checksum: 10/ba3b49b55a325ec5d885898e5cd61370c19ad27a54315025c315bb08b6a09a64cfd3097748225be1f4b07aad42245a239ac9ba6e957c854ebb48718a43e5c215 + version: 8.1.0-alpha.7 + resolution: "@storybook/node-logger@file:../../../code/lib/node-logger#../../../code/lib/node-logger::hash=d94edd&locator=portable-stories-nextjs%40workspace%3A." + checksum: 10/1095793116385c3d2247349869659cd7147094c2a77efa4cd925a051a0d03742563d74dd7cbc578e1de9a06d0637247a06bcafa665c43cb2f482240f3bb178af languageName: node linkType: hard "@storybook/preset-react-webpack@file:../../../code/presets/react-webpack::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/preset-react-webpack@file:../../../code/presets/react-webpack#../../../code/presets/react-webpack::hash=3c5b01&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/preset-react-webpack@file:../../../code/presets/react-webpack#../../../code/presets/react-webpack::hash=3d1792&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-webpack": "workspace:*" "@storybook/docs-tools": "workspace:*" @@ -3076,18 +3263,18 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 10/3baffd6ce4e642f852c370ccd4ae8098a5e730f4493ce43c8414f0b44e59c8bc8a99d9975cf5149b655f1808e54d274754044f45983b9f1be7c9a28f00931ac2 + checksum: 10/77a6a3b5ee2db73619642b72aa8976bf54cbc454c5aa781b6499bf55694b0f28fc4bed4f3e683d4e4964646ce793e5054a567d5d789ac5d5fd5d09794490b9a3 languageName: node linkType: hard "@storybook/preview-api@file:../../../code/lib/preview-api::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/preview-api@file:../../../code/lib/preview-api#../../../code/lib/preview-api::hash=76c183&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/preview-api@file:../../../code/lib/preview-api#../../../code/lib/preview-api::hash=c27159&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:0.1.5--canary.82.2c2dd28.0" "@storybook/global": "npm:^5.0.0" "@storybook/types": "workspace:*" "@types/qs": "npm:^6.9.5" @@ -3098,14 +3285,14 @@ __metadata: tiny-invariant: "npm:^1.3.1" ts-dedent: "npm:^2.0.0" util-deprecate: "npm:^1.0.2" - checksum: 10/93ed5df1d57acb2b5ef4284914e46d0b3c24182d9778ee7ef724a9f48e12e924dc200230453973810999e559a15e0b09604317dc3fb55188068f27ac7aaf07e3 + checksum: 10/96cf3839371262b03e47fe55e0a0c317e979fa731fdf1c9224ca22055fb79b1aed53fc260428846cffde4b83d85e5f138e4e5a8dd5c390cca2057df5637ea92c languageName: node linkType: hard "@storybook/preview@file:../../../code/lib/preview::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/preview@file:../../../code/lib/preview#../../../code/lib/preview::hash=f82bd0&locator=portable-stories-nextjs%40workspace%3A." - checksum: 10/79efae3201ef9d5cbb8abc309969394e33da8ee853b13d478389bf8d913a851c8804bc8a3e4ff28d05b589e32172e898b3988cd34af9f25016db0d0c26a94688 + version: 8.1.0-alpha.7 + resolution: "@storybook/preview@file:../../../code/lib/preview#../../../code/lib/preview::hash=e2c59f&locator=portable-stories-nextjs%40workspace%3A." + checksum: 10/21e589270a0be81396f6219c7f8d4788d20ad791b8016fe9981550a457c91af805bec0447684b1d12cc8e9cd0d7ae73387a423281c413dd794b31dec18628363 languageName: node linkType: hard @@ -3128,18 +3315,18 @@ __metadata: linkType: hard "@storybook/react-dom-shim@file:../../../code/lib/react-dom-shim::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/react-dom-shim@file:../../../code/lib/react-dom-shim#../../../code/lib/react-dom-shim::hash=062b74&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/react-dom-shim@file:../../../code/lib/react-dom-shim#../../../code/lib/react-dom-shim::hash=3e505c&locator=portable-stories-nextjs%40workspace%3A." peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: 10/ba63271a1f2d663cd53354798c490d306787b8033586a1062175b89fe4409759cbc959aa34dad12ff8f9bf2e9c141a391784eda81f23cbc9d13495128c9e1611 + checksum: 10/983e0f5f9dc3449173eb42e8a98a65fbac1247cf8b2f102b3438eec53ff4fdce51c84b0eb7aa7a34f002600e84a17c632397290e9614a8bb8d363fa0cb68a01a languageName: node linkType: hard "@storybook/react@file:../../../code/renderers/react::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/react@file:../../../code/renderers/react#../../../code/renderers/react::hash=4e9581&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/react@file:../../../code/renderers/react#../../../code/renderers/react::hash=cd73fa&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" "@storybook/docs-tools": "workspace:*" @@ -3169,24 +3356,24 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 10/79b77645790d408373d15fad673b0c768d36f66cfa615c50b32b9a3ead0eb94656eaa3b2521b12ec5f82d8c3c23500c0da9c4a75c6bcb314fa38ee813b636c6b + checksum: 10/834084c0092a8b179f7048c1111308b6a2381cf3ee119372ed2940833b02e13577b5bc334c3f14c3224bd2d8b786939a74fbaf4dea6e8423ff610b34047412b4 languageName: node linkType: hard "@storybook/router@file:../../../code/lib/router::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/router@file:../../../code/lib/router#../../../code/lib/router::hash=2f121e&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/router@file:../../../code/lib/router#../../../code/lib/router::hash=bd2ec4&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" memoizerific: "npm:^1.11.3" qs: "npm:^6.10.0" - checksum: 10/8fcccb54ade96e59e716e74c9985633d6ff4a9e025f80e83cb1c8c61443910cb3205d2b2753f7a455544b8d39be832c456db4ecff2e58753b0fd45a0f828b6b6 + checksum: 10/226f011fb5068ed708650f9e6ff2cbf8fdf84dd7eee43dfdeb36c828aca0551a78f53f6e6fadf0c477a74b8f9c70a66c6c6ef637e5bf2684c4a8e46e74ba58ae languageName: node linkType: hard "@storybook/telemetry@file:../../../code/lib/telemetry::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/telemetry@file:../../../code/lib/telemetry#../../../code/lib/telemetry::hash=ef1a5d&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/telemetry@file:../../../code/lib/telemetry#../../../code/lib/telemetry::hash=9296ee&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-common": "workspace:*" @@ -3196,13 +3383,13 @@ __metadata: fetch-retry: "npm:^5.0.2" fs-extra: "npm:^11.1.0" read-pkg-up: "npm:^7.0.1" - checksum: 10/b4d3d4aa974ea59a259584466abf9dc7ca07b926833e8e4cd53e43bd47a37ead871f2f4458cc2f8d3c9776e41b3daac9a1fe3363d210190b4d45585de86453f7 + checksum: 10/0c7be274ef3ee1108857d012827ef3c0ceec404f11c4e3a7c2cadd69245737d8e46678ea30c581d2b52dbf0980f9893d4521f96330b335b702d07224c837f068 languageName: node linkType: hard "@storybook/test@file:../../../code/lib/test::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/test@file:../../../code/lib/test#../../../code/lib/test::hash=22f2be&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/test@file:../../../code/lib/test#../../../code/lib/test::hash=a11c5e&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" @@ -3215,13 +3402,13 @@ __metadata: "@vitest/spy": "npm:^1.3.1" chai: "npm:^4.4.1" util: "npm:^0.12.4" - checksum: 10/786f471e95d2413a8a7e405dafa0dfe429884853cb119d5faa7c390f893710a83e64a97f5f6bee0dacea6efcac4c6a7a258e1c8830e691f39c14e851a59ec781 + checksum: 10/88eec54537e529a1887fb20c63e9ba7d19a564c9eb58b5df0e6f9b9ba305e064e4de27b1f5bf413b7f255f5de0a2203433268b332b73aa21c54ea41a33ed73c4 languageName: node linkType: hard "@storybook/theming@file:../../../code/lib/theming::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/theming@file:../../../code/lib/theming#../../../code/lib/theming::hash=f968b9&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/theming@file:../../../code/lib/theming#../../../code/lib/theming::hash=444382&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@emotion/use-insertion-effect-with-fallbacks": "npm:^1.0.1" "@storybook/client-logger": "workspace:*" @@ -3235,18 +3422,18 @@ __metadata: optional: true react-dom: optional: true - checksum: 10/e603c954ca9f8a99cb82deac40c66f1fd71d170900f6c8a4e0f3157921b6b1da6c0d644519960312eefa1def67a99c50a4e4cd6c6e92fd121d99a9fcb822f6b9 + checksum: 10/fce2b08b28299dab7ebb21b2e66153bfa1fa592f55bdf40893f34618fa95e89839b3acd752a62065278148886bc144c272b330285f555ebfebeaceb996456f56 languageName: node linkType: hard "@storybook/types@file:../../../code/lib/types::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "@storybook/types@file:../../../code/lib/types#../../../code/lib/types::hash=efc120&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/types@file:../../../code/lib/types#../../../code/lib/types::hash=ac9abc&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@types/express": "npm:^4.7.0" file-system-cache: "npm:2.3.0" - checksum: 10/1d6a4dfbab18342f2286c6d8234c84e9e2dd3638e670863c5679d444d70a629820391a5edb3df8c7a67a049b0a62ca615942ca5a5eb3525fb3dcdd92cf79d5f3 + checksum: 10/2f04be63d68783e750ec7fcbed3097427beca0e28b9fd4eb643d299f1fe16e8d349181cabba627bbd37319fb32e745de229db2592667478c8dc7d7468372071b languageName: node linkType: hard @@ -4603,13 +4790,6 @@ __metadata: languageName: node linkType: hard -"b4a@npm:^1.6.4": - version: 1.6.6 - resolution: "b4a@npm:1.6.6" - checksum: 10/6154a36bd78b53ecd2843a829352532a1bf9fc8081dab339ba06ca3c9ffcf25d340c3b18fe4ba0fc17a546a54c1ed814cea92cd6b895f6bd2837ca4ee0fc9f52 - languageName: node - linkType: hard - "babel-core@npm:^7.0.0-bridge.0": version: 7.0.0-bridge.0 resolution: "babel-core@npm:7.0.0-bridge.0" @@ -4751,41 +4931,6 @@ __metadata: languageName: node linkType: hard -"bare-events@npm:^2.0.0, bare-events@npm:^2.2.0": - version: 2.2.0 - resolution: "bare-events@npm:2.2.0" - checksum: 10/01f36735615a11529b30e6de2907b6ed032f773b364d19bd13cdf491c8010713af178c9137ad4be68c79363977b476acbd1b203b82b49fca6cc42aaf01d600d0 - languageName: node - linkType: hard - -"bare-fs@npm:^2.1.1": - version: 2.2.0 - resolution: "bare-fs@npm:2.2.0" - dependencies: - bare-events: "npm:^2.0.0" - bare-os: "npm:^2.0.0" - bare-path: "npm:^2.0.0" - streamx: "npm:^2.13.0" - checksum: 10/a12acbaec915cf723dcdf71866df937dd0d27ff47f40b1c76f8c5fb87442ee07af6d74ec376eb87aa72d143df3c95c7dec3e9e6ffdf1c90d77b1c9064b6f96d9 - languageName: node - linkType: hard - -"bare-os@npm:^2.0.0, bare-os@npm:^2.1.0": - version: 2.2.0 - resolution: "bare-os@npm:2.2.0" - checksum: 10/3b32a72a61bd4e4245f27963e34869ff39732c641953dbe5f0f8bff5e3e8826c24aa51b45766762b9a7cd18473c1d83f0ec2b8ff751d6a2169e8e8cdad0ad4de - languageName: node - linkType: hard - -"bare-path@npm:^2.0.0, bare-path@npm:^2.1.0": - version: 2.1.0 - resolution: "bare-path@npm:2.1.0" - dependencies: - bare-os: "npm:^2.1.0" - checksum: 10/811b9414448e8523a1323bc49d773673be0c72b3e008c99041b1bea516064227a530f27e8a35bd91cabc0d1026c5a0898f09ab5347cb3afd5a13fa519e6e973e - languageName: node - linkType: hard - "base64-js@npm:^1.3.1": version: 1.5.1 resolution: "base64-js@npm:1.5.1" @@ -5875,15 +6020,6 @@ __metadata: languageName: node linkType: hard -"decompress-response@npm:^6.0.0": - version: 6.0.0 - resolution: "decompress-response@npm:6.0.0" - dependencies: - mimic-response: "npm:^3.1.0" - checksum: 10/d377cf47e02d805e283866c3f50d3d21578b779731e8c5072d6ce8c13cc31493db1c2f6784da9d1d5250822120cefa44f1deab112d5981015f2e17444b763812 - languageName: node - linkType: hard - "dedent@npm:^0.7.0": version: 0.7.0 resolution: "dedent@npm:0.7.0" @@ -5938,13 +6074,6 @@ __metadata: languageName: node linkType: hard -"deep-extend@npm:^0.6.0": - version: 0.6.0 - resolution: "deep-extend@npm:0.6.0" - checksum: 10/7be7e5a8d468d6b10e6a67c3de828f55001b6eb515d014f7aeb9066ce36bd5717161eb47d6a0f7bed8a9083935b465bc163ee2581c8b128d29bf61092fdf57a7 - languageName: node - linkType: hard - "deep-is@npm:^0.1.3": version: 0.1.4 resolution: "deep-is@npm:0.1.4" @@ -6075,10 +6204,10 @@ __metadata: languageName: node linkType: hard -"detect-libc@npm:^2.0.0, detect-libc@npm:^2.0.2": - version: 2.0.2 - resolution: "detect-libc@npm:2.0.2" - checksum: 10/6118f30c0c425b1e56b9d2609f29bec50d35a6af0b762b6ad127271478f3bbfda7319ce869230cf1a351f2b219f39332cde290858553336d652c77b970f15de8 +"detect-libc@npm:^2.0.3": + version: 2.0.3 + resolution: "detect-libc@npm:2.0.3" + checksum: 10/b4ea018d623e077bd395f168a9e81db77370dde36a5b01d067f2ad7989924a81d31cb547ff764acb2aa25d50bb7fdde0b0a93bec02212b0cb430621623246d39 languageName: node linkType: hard @@ -6858,13 +6987,6 @@ __metadata: languageName: node linkType: hard -"expand-template@npm:^2.0.3": - version: 2.0.3 - resolution: "expand-template@npm:2.0.3" - checksum: 10/588c19847216421ed92befb521767b7018dc88f88b0576df98cb242f20961425e96a92cbece525ef28cc5becceae5d544ae0f5b9b5e2aa05acb13716ca5b3099 - languageName: node - linkType: hard - "expect@npm:^29.7.0": version: 29.7.0 resolution: "expect@npm:29.7.0" @@ -6931,13 +7053,6 @@ __metadata: languageName: node linkType: hard -"fast-fifo@npm:^1.1.0, fast-fifo@npm:^1.2.0": - version: 1.3.2 - resolution: "fast-fifo@npm:1.3.2" - checksum: 10/6bfcba3e4df5af7be3332703b69a7898a8ed7020837ec4395bb341bd96cc3a6d86c3f6071dd98da289618cf2234c70d84b2a6f09a33dd6f988b1ff60d8e54275 - languageName: node - linkType: hard - "fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.2": version: 3.3.2 resolution: "fast-glob@npm:3.3.2" @@ -7404,13 +7519,6 @@ __metadata: languageName: node linkType: hard -"github-from-package@npm:0.0.0": - version: 0.0.0 - resolution: "github-from-package@npm:0.0.0" - checksum: 10/2a091ba07fbce22205642543b4ea8aaf068397e1433c00ae0f9de36a3607baf5bcc14da97fbb798cfca6393b3c402031fca06d8b491a44206d6efef391c58537 - languageName: node - linkType: hard - "github-slugger@npm:^2.0.0": version: 2.0.0 resolution: "github-slugger@npm:2.0.0" @@ -7977,13 +8085,6 @@ __metadata: languageName: node linkType: hard -"ini@npm:~1.3.0": - version: 1.3.8 - resolution: "ini@npm:1.3.8" - checksum: 10/314ae176e8d4deb3def56106da8002b462221c174ddb7ce0c49ee72c8cd1f9044f7b10cc555a7d8850982c3b9ca96fc212122749f5234bc2b6fb05fb942ed566 - languageName: node - linkType: hard - "internal-slot@npm:^1.0.4": version: 1.0.7 resolution: "internal-slot@npm:1.0.7" @@ -9579,13 +9680,6 @@ __metadata: languageName: node linkType: hard -"mimic-response@npm:^3.1.0": - version: 3.1.0 - resolution: "mimic-response@npm:3.1.0" - checksum: 10/7e719047612411fe071332a7498cf0448bbe43c485c0d780046c76633a771b223ff49bd00267be122cedebb897037fdb527df72335d0d0f74724604ca70b37ad - languageName: node - linkType: hard - "min-indent@npm:^1.0.0, min-indent@npm:^1.0.1": version: 1.0.1 resolution: "min-indent@npm:1.0.1" @@ -9634,7 +9728,7 @@ __metadata: languageName: node linkType: hard -"minimist@npm:^1.2.0, minimist@npm:^1.2.3, minimist@npm:^1.2.5, minimist@npm:^1.2.6": +"minimist@npm:^1.2.5, minimist@npm:^1.2.6": version: 1.2.8 resolution: "minimist@npm:1.2.8" checksum: 10/908491b6cc15a6c440ba5b22780a0ba89b9810e1aea684e253e43c4e3b8d56ec1dcdd7ea96dde119c29df59c936cde16062159eae4225c691e19c70b432b6e6f @@ -9725,7 +9819,7 @@ __metadata: languageName: node linkType: hard -"mkdirp-classic@npm:^0.5.2, mkdirp-classic@npm:^0.5.3": +"mkdirp-classic@npm:^0.5.2": version: 0.5.3 resolution: "mkdirp-classic@npm:0.5.3" checksum: 10/3f4e088208270bbcc148d53b73e9a5bd9eef05ad2cbf3b3d0ff8795278d50dd1d11a8ef1875ff5aea3fa888931f95bfcb2ad5b7c1061cfefd6284d199e6776ac @@ -9771,13 +9865,6 @@ __metadata: languageName: node linkType: hard -"napi-build-utils@npm:^1.0.1": - version: 1.0.2 - resolution: "napi-build-utils@npm:1.0.2" - checksum: 10/276feb8e30189fe18718e85b6f82e4f952822baa2e7696f771cc42571a235b789dc5907a14d9ffb6838c3e4ff4c25717c2575e5ce1cf6e02e496e204c11e57f6 - languageName: node - linkType: hard - "natural-compare@npm:^1.4.0": version: 1.4.0 resolution: "natural-compare@npm:1.4.0" @@ -9864,15 +9951,6 @@ __metadata: languageName: node linkType: hard -"node-abi@npm:^3.3.0": - version: 3.55.0 - resolution: "node-abi@npm:3.55.0" - dependencies: - semver: "npm:^7.3.5" - checksum: 10/3dc8699c5eeebd3ed229c246b409dcf38de6a7cb1d0d76aa0345cd364b56bce517294a7026286fcd7a6a54a10429523bda49b6b06d6aab309de06fac6125f614 - languageName: node - linkType: hard - "node-abort-controller@npm:^3.0.1": version: 3.1.1 resolution: "node-abort-controller@npm:3.1.1" @@ -9880,15 +9958,6 @@ __metadata: languageName: node linkType: hard -"node-addon-api@npm:^6.1.0": - version: 6.1.0 - resolution: "node-addon-api@npm:6.1.0" - dependencies: - node-gyp: "npm:latest" - checksum: 10/8eea1d4d965930a177a0508695beb0d89b4c1d80bf330646a035357a1e8fc31e0d09686e2374996e96e757b947a7ece319f98ede3146683f162597c0bcb4df90 - languageName: node - linkType: hard - "node-dir@npm:^0.1.17": version: 0.1.17 resolution: "node-dir@npm:0.1.17" @@ -10735,28 +10804,6 @@ __metadata: languageName: node linkType: hard -"prebuild-install@npm:^7.1.1": - version: 7.1.1 - resolution: "prebuild-install@npm:7.1.1" - dependencies: - detect-libc: "npm:^2.0.0" - expand-template: "npm:^2.0.3" - github-from-package: "npm:0.0.0" - minimist: "npm:^1.2.3" - mkdirp-classic: "npm:^0.5.3" - napi-build-utils: "npm:^1.0.1" - node-abi: "npm:^3.3.0" - pump: "npm:^3.0.0" - rc: "npm:^1.2.7" - simple-get: "npm:^4.0.0" - tar-fs: "npm:^2.0.0" - tunnel-agent: "npm:^0.6.0" - bin: - prebuild-install: bin.js - checksum: 10/6c70a2f82fbda8903497c560a761b000d861a3e772322c8bed012be0f0a084b5aaca4438a3fad1bd3a24210765f4fae06ddd89ea04dc4c034dde693cc0d9d5f4 - languageName: node - linkType: hard - "prelude-ls@npm:^1.2.1": version: 1.2.1 resolution: "prelude-ls@npm:1.2.1" @@ -10986,13 +11033,6 @@ __metadata: languageName: node linkType: hard -"queue-tick@npm:^1.0.1": - version: 1.0.1 - resolution: "queue-tick@npm:1.0.1" - checksum: 10/f447926c513b64a857906f017a3b350f7d11277e3c8d2a21a42b7998fa1a613d7a829091e12d142bb668905c8f68d8103416c7197856efb0c72fa835b8e254b5 - languageName: node - linkType: hard - "queue@npm:6.0.2": version: 6.0.2 resolution: "queue@npm:6.0.2" @@ -11047,20 +11087,6 @@ __metadata: languageName: node linkType: hard -"rc@npm:^1.2.7": - version: 1.2.8 - resolution: "rc@npm:1.2.8" - dependencies: - deep-extend: "npm:^0.6.0" - ini: "npm:~1.3.0" - minimist: "npm:^1.2.0" - strip-json-comments: "npm:~2.0.1" - bin: - rc: ./cli.js - checksum: 10/5c4d72ae7eec44357171585938c85ce066da8ca79146b5635baf3d55d74584c92575fa4e2c9eac03efbed3b46a0b2e7c30634c012b4b4fa40d654353d3c163eb - languageName: node - linkType: hard - "react-colorful@npm:^5.1.2": version: 5.6.1 resolution: "react-colorful@npm:5.6.1" @@ -11665,7 +11691,7 @@ __metadata: languageName: node linkType: hard -"semver@npm:^7.3.5, semver@npm:^7.3.7, semver@npm:^7.5.3, semver@npm:^7.5.4": +"semver@npm:^7.3.5, semver@npm:^7.3.7, semver@npm:^7.5.3, semver@npm:^7.5.4, semver@npm:^7.6.0": version: 7.6.0 resolution: "semver@npm:7.6.0" dependencies: @@ -11779,20 +11805,72 @@ __metadata: languageName: node linkType: hard -"sharp@npm:^0.32.6": - version: 0.32.6 - resolution: "sharp@npm:0.32.6" - dependencies: +"sharp@npm:^0.33.3": + version: 0.33.3 + resolution: "sharp@npm:0.33.3" + dependencies: + "@img/sharp-darwin-arm64": "npm:0.33.3" + "@img/sharp-darwin-x64": "npm:0.33.3" + "@img/sharp-libvips-darwin-arm64": "npm:1.0.2" + "@img/sharp-libvips-darwin-x64": "npm:1.0.2" + "@img/sharp-libvips-linux-arm": "npm:1.0.2" + "@img/sharp-libvips-linux-arm64": "npm:1.0.2" + "@img/sharp-libvips-linux-s390x": "npm:1.0.2" + "@img/sharp-libvips-linux-x64": "npm:1.0.2" + "@img/sharp-libvips-linuxmusl-arm64": "npm:1.0.2" + "@img/sharp-libvips-linuxmusl-x64": "npm:1.0.2" + "@img/sharp-linux-arm": "npm:0.33.3" + "@img/sharp-linux-arm64": "npm:0.33.3" + "@img/sharp-linux-s390x": "npm:0.33.3" + "@img/sharp-linux-x64": "npm:0.33.3" + "@img/sharp-linuxmusl-arm64": "npm:0.33.3" + "@img/sharp-linuxmusl-x64": "npm:0.33.3" + "@img/sharp-wasm32": "npm:0.33.3" + "@img/sharp-win32-ia32": "npm:0.33.3" + "@img/sharp-win32-x64": "npm:0.33.3" color: "npm:^4.2.3" - detect-libc: "npm:^2.0.2" - node-addon-api: "npm:^6.1.0" - node-gyp: "npm:latest" - prebuild-install: "npm:^7.1.1" - semver: "npm:^7.5.4" - simple-get: "npm:^4.0.1" - tar-fs: "npm:^3.0.4" - tunnel-agent: "npm:^0.6.0" - checksum: 10/f0e4a86881e590f86b05ea463229f62cd29afc2dca08b3f597889f872f118c2c456f382bf2c3e90e934b7a1d30f109cf5ed584cf5a23e79d6b6403a8dc0ebe32 + detect-libc: "npm:^2.0.3" + semver: "npm:^7.6.0" + dependenciesMeta: + "@img/sharp-darwin-arm64": + optional: true + "@img/sharp-darwin-x64": + optional: true + "@img/sharp-libvips-darwin-arm64": + optional: true + "@img/sharp-libvips-darwin-x64": + optional: true + "@img/sharp-libvips-linux-arm": + optional: true + "@img/sharp-libvips-linux-arm64": + optional: true + "@img/sharp-libvips-linux-s390x": + optional: true + "@img/sharp-libvips-linux-x64": + optional: true + "@img/sharp-libvips-linuxmusl-arm64": + optional: true + "@img/sharp-libvips-linuxmusl-x64": + optional: true + "@img/sharp-linux-arm": + optional: true + "@img/sharp-linux-arm64": + optional: true + "@img/sharp-linux-s390x": + optional: true + "@img/sharp-linux-x64": + optional: true + "@img/sharp-linuxmusl-arm64": + optional: true + "@img/sharp-linuxmusl-x64": + optional: true + "@img/sharp-wasm32": + optional: true + "@img/sharp-win32-ia32": + optional: true + "@img/sharp-win32-x64": + optional: true + checksum: 10/02bed36749a73c6d56219b86b880458565917d0815746b046aac69dba4afa980d34f3a20631d3146c07bdecd717eb80bf9303df14bcf323575471299ac756da6 languageName: node linkType: hard @@ -11838,24 +11916,6 @@ __metadata: languageName: node linkType: hard -"simple-concat@npm:^1.0.0": - version: 1.0.1 - resolution: "simple-concat@npm:1.0.1" - checksum: 10/4d211042cc3d73a718c21ac6c4e7d7a0363e184be6a5ad25c8a1502e49df6d0a0253979e3d50dbdd3f60ef6c6c58d756b5d66ac1e05cda9cacd2e9fc59e3876a - languageName: node - linkType: hard - -"simple-get@npm:^4.0.0, simple-get@npm:^4.0.1": - version: 4.0.1 - resolution: "simple-get@npm:4.0.1" - dependencies: - decompress-response: "npm:^6.0.0" - once: "npm:^1.3.1" - simple-concat: "npm:^1.0.0" - checksum: 10/93f1b32319782f78f2f2234e9ce34891b7ab6b990d19d8afefaa44423f5235ce2676aae42d6743fecac6c8dfff4b808d4c24fe5265be813d04769917a9a44f36 - languageName: node - linkType: hard - "simple-swizzle@npm:^0.2.2": version: 0.2.2 resolution: "simple-swizzle@npm:0.2.2" @@ -12066,14 +12126,14 @@ __metadata: linkType: hard "storybook@file:../../../code/lib/cli-storybook::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.6 - resolution: "storybook@file:../../../code/lib/cli-storybook#../../../code/lib/cli-storybook::hash=f0c1b6&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "storybook@file:../../../code/lib/cli-storybook#../../../code/lib/cli-storybook::hash=f4ae08&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/cli": "workspace:*" bin: sb: ./index.js storybook: ./index.js - checksum: 10/941843aa4b11da491079c9ee193117cf88153d3836dc58771c7a4f743779e88ed941157d55101925d7fd372fdb9d2160e4b156f4e30227e3785525311f75d93d + checksum: 10/4975a0a1000ff520cc202c55d6ba047b5fb2512a91d86d3c92fb90a894f3c7e2f1f482069ff3e88f076cd0984d2839c8a9800aa372e126b8827ff3448231281c languageName: node linkType: hard @@ -12113,20 +12173,6 @@ __metadata: languageName: node linkType: hard -"streamx@npm:^2.13.0, streamx@npm:^2.15.0": - version: 2.16.1 - resolution: "streamx@npm:2.16.1" - dependencies: - bare-events: "npm:^2.2.0" - fast-fifo: "npm:^1.1.0" - queue-tick: "npm:^1.0.1" - dependenciesMeta: - bare-events: - optional: true - checksum: 10/f6d0899adf089385d9c58a630fc705dc6c3931b18181c32860e5013955a339a3b763a4df62168f37c7fc56b1f7bb2a38db989fa9df487995278cb5d46f248da6 - languageName: node - linkType: hard - "string-length@npm:^4.0.1": version: 4.0.2 resolution: "string-length@npm:4.0.2" @@ -12248,13 +12294,6 @@ __metadata: languageName: node linkType: hard -"strip-json-comments@npm:~2.0.1": - version: 2.0.1 - resolution: "strip-json-comments@npm:2.0.1" - checksum: 10/1074ccb63270d32ca28edfb0a281c96b94dc679077828135141f27d52a5a398ef5e78bcf22809d23cadc2b81dfbe345eb5fd8699b385c8b1128907dec4a7d1e1 - languageName: node - linkType: hard - "style-loader@npm:^3.3.1": version: 3.3.4 resolution: "style-loader@npm:3.3.4" @@ -12328,7 +12367,7 @@ __metadata: languageName: node linkType: hard -"tar-fs@npm:^2.0.0, tar-fs@npm:^2.1.1": +"tar-fs@npm:^2.1.1": version: 2.1.1 resolution: "tar-fs@npm:2.1.1" dependencies: @@ -12340,23 +12379,6 @@ __metadata: languageName: node linkType: hard -"tar-fs@npm:^3.0.4": - version: 3.0.5 - resolution: "tar-fs@npm:3.0.5" - dependencies: - bare-fs: "npm:^2.1.1" - bare-path: "npm:^2.1.0" - pump: "npm:^3.0.0" - tar-stream: "npm:^3.1.5" - dependenciesMeta: - bare-fs: - optional: true - bare-path: - optional: true - checksum: 10/a15c18e80b872918c7dff22ff29db367c8014d1b3d34b0ec57cfe11645836dc01487c078a975a9d5e358f078f59e7b8adc5c671cc0848ba27b9b429669722bd8 - languageName: node - linkType: hard - "tar-stream@npm:^2.1.4": version: 2.2.0 resolution: "tar-stream@npm:2.2.0" @@ -12370,17 +12392,6 @@ __metadata: languageName: node linkType: hard -"tar-stream@npm:^3.1.5": - version: 3.1.7 - resolution: "tar-stream@npm:3.1.7" - dependencies: - b4a: "npm:^1.6.4" - fast-fifo: "npm:^1.2.0" - streamx: "npm:^2.15.0" - checksum: 10/b21a82705a72792544697c410451a4846af1f744176feb0ff11a7c3dd0896961552e3def5e1c9a6bbee4f0ae298b8252a1f4c9381e9f991553b9e4847976f05c - languageName: node - linkType: hard - "tar@npm:^6.1.11, tar@npm:^6.1.2, tar@npm:^6.2.0": version: 6.2.0 resolution: "tar@npm:6.2.0" @@ -12672,15 +12683,6 @@ __metadata: languageName: node linkType: hard -"tunnel-agent@npm:^0.6.0": - version: 0.6.0 - resolution: "tunnel-agent@npm:0.6.0" - dependencies: - safe-buffer: "npm:^5.0.1" - checksum: 10/7f0d9ed5c22404072b2ae8edc45c071772affd2ed14a74f03b4e71b4dd1a14c3714d85aed64abcaaee5fec2efc79002ba81155c708f4df65821b444abb0cfade - languageName: node - linkType: hard - "type-check@npm:^0.4.0, type-check@npm:~0.4.0": version: 0.4.0 resolution: "type-check@npm:0.4.0" @@ -13099,9 +13101,9 @@ __metadata: languageName: node linkType: hard -"webpack-dev-middleware@npm:^6.1.1": - version: 6.1.1 - resolution: "webpack-dev-middleware@npm:6.1.1" +"webpack-dev-middleware@npm:^6.1.2": + version: 6.1.3 + resolution: "webpack-dev-middleware@npm:6.1.3" dependencies: colorette: "npm:^2.0.10" memfs: "npm:^3.4.12" @@ -13113,7 +13115,7 @@ __metadata: peerDependenciesMeta: webpack: optional: true - checksum: 10/b0637584f18b02174fd7fc2e6278efb8e2fb5308abe4ffe73658e59ff53a62c05686f161b06bd5c41d42611aa395b8c8f087d7ff8cf2304232c097a694a5b94e + checksum: 10/ee699430c33c4dfa2a016becc85e32a9b04aa0b6edbce0bb173c4dfd29c80c77d192d14fd2f2ec500dbdede4e0f1c5557993aa20a04a44190750a1e8e13f6d67 languageName: node linkType: hard From c8f10028937013725ce29f35561e99de1a0c8028 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 15 Apr 2024 12:21:35 +0200 Subject: [PATCH 172/380] Fix makeTitle fallback value in save-from-controls.ts --- .../src/utils/save-from-controls/save-from-controls.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/core-server/src/utils/save-from-controls/save-from-controls.ts b/code/lib/core-server/src/utils/save-from-controls/save-from-controls.ts index 7853aecff365..3b4e65f0da16 100644 --- a/code/lib/core-server/src/utils/save-from-controls/save-from-controls.ts +++ b/code/lib/core-server/src/utils/save-from-controls/save-from-controls.ts @@ -32,7 +32,7 @@ export function initializeSaveFromControls( // open the story file const csf = await readCsf(location, { - makeTitle: (userTitle: string) => userTitle, + makeTitle: (userTitle: string) => userTitle || 'myTitle', }); const parsed = csf.parse(); From 71ff85bb9075271d50bc70729fb12e64e4bc2e0a Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 15 Apr 2024 12:55:24 +0200 Subject: [PATCH 173/380] fix bad ts --- code/addons/controls/src/ControlsPanel.tsx | 2 +- code/addons/controls/src/SaveFromControls.stories.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/code/addons/controls/src/ControlsPanel.tsx b/code/addons/controls/src/ControlsPanel.tsx index 7eebdc5c6bd2..adf4db26cfeb 100644 --- a/code/addons/controls/src/ControlsPanel.tsx +++ b/code/addons/controls/src/ControlsPanel.tsx @@ -12,7 +12,7 @@ import { import { PureArgsTable as ArgsTable, type PresetColor, type SortType } from '@storybook/blocks'; import { styled } from '@storybook/theming'; import type { ArgTypes } from '@storybook/types'; -import { SAVE_STORY_REQUEST, SAVE_STORY_RESULT } from '@storybook/core-events'; +import { SAVE_STORY_REQUEST } from '@storybook/core-events'; import { PARAM_KEY } from './constants'; import { SaveFromControls } from './SaveFromControls'; diff --git a/code/addons/controls/src/SaveFromControls.stories.tsx b/code/addons/controls/src/SaveFromControls.stories.tsx index 39204f2d2488..6b9345da0bc0 100644 --- a/code/addons/controls/src/SaveFromControls.stories.tsx +++ b/code/addons/controls/src/SaveFromControls.stories.tsx @@ -22,12 +22,12 @@ type Story = StoryObj; export const Default: Story = {}; -export const Creating: Story = { +export const Creating = { play: async ({ canvasElement }) => { const createButton = await within(canvasElement).findByRole('button', { name: /Create/i }); await fireEvent.click(createButton); }, -}; +} satisfies Story; export const Created: Story = { play: async (context) => { From 37dbae3ccd689e5a4b387125ef8e796547cbdf2f Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 15 Apr 2024 13:05:05 +0200 Subject: [PATCH 174/380] Update directory path for controls addon in .storybook/main.ts --- code/ui/.storybook/main.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/ui/.storybook/main.ts b/code/ui/.storybook/main.ts index ab3df9b98610..85ed32cf08c4 100644 --- a/code/ui/.storybook/main.ts +++ b/code/ui/.storybook/main.ts @@ -20,7 +20,7 @@ const allStories = [ titlePrefix: '@blocks', }, { - directory: '../../addons/controls', // TODO other addons? + directory: '../../addons/controls/src', // TODO other addons? titlePrefix: '@addons', }, ]; From 51e2294c6c2e1198aec6d4e1ba91696c2344bdf8 Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Mon, 15 Apr 2024 13:40:10 +0200 Subject: [PATCH 175/380] Don't hide reset button in addon panel --- code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx b/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx index e874da243d7a..8ad18ff4257c 100644 --- a/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx +++ b/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx @@ -377,7 +377,7 @@ export const ArgsTable: FC = (props) => { Control{' '} - {!isLoading && !inAddonPanel && resetArgs && ( + {!isLoading && resetArgs && ( resetArgs()} title="Reset controls"> From 46c8cc097706b88bc47e7d5a52be59d89e694d30 Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Mon, 15 Apr 2024 13:48:15 +0200 Subject: [PATCH 176/380] Only show SaveFromControls in dev mode --- code/addons/controls/src/ControlsPanel.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/code/addons/controls/src/ControlsPanel.tsx b/code/addons/controls/src/ControlsPanel.tsx index adf4db26cfeb..75616ea71d58 100644 --- a/code/addons/controls/src/ControlsPanel.tsx +++ b/code/addons/controls/src/ControlsPanel.tsx @@ -1,6 +1,7 @@ import { dequal as deepEqual } from 'dequal'; import type { FC } from 'react'; import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; +import { global } from '@storybook/global'; import { useArgs, useGlobals, @@ -108,7 +109,7 @@ export const ControlsPanel: FC = () => { sort={sort} isLoading={isLoading} /> - {hasControls && hasUpdatedArgs && ( + {hasControls && hasUpdatedArgs && global.CONFIG_TYPE === 'DEVELOPMENT' && ( )} From 8d21fb2cf04e025f578da2aae06b28bf6dbb7d9b Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 15 Apr 2024 13:59:07 +0200 Subject: [PATCH 177/380] Add typings.d.ts file for controls addon --- code/addons/controls/src/typings.d.ts | 29 +++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 code/addons/controls/src/typings.d.ts diff --git a/code/addons/controls/src/typings.d.ts b/code/addons/controls/src/typings.d.ts new file mode 100644 index 000000000000..c51fcc2f2f86 --- /dev/null +++ b/code/addons/controls/src/typings.d.ts @@ -0,0 +1,29 @@ +/* eslint-disable no-underscore-dangle, @typescript-eslint/naming-convention */ + +declare var DOCS_OPTIONS: any; +declare var CONFIG_TYPE: 'DEVELOPMENT' | 'PRODUCTION'; +declare var PREVIEW_URL: any; + +declare var __STORYBOOK_ADDONS_MANAGER: any; +declare var RELEASE_NOTES_DATA: any; + +declare var FEATURES: import('@storybook/types').StorybookConfigRaw['features']; + +declare var REFS: any; +declare var VERSIONCHECK: any; +declare var LOGLEVEL: 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent' | undefined; + +declare var __REACT__: any; +declare var __REACT_DOM__: any; +declare var __STORYBOOK_COMPONENTS__: any; +declare var __STORYBOOK_CHANNELS__: any; +declare var __STORYBOOK_CORE_EVENTS__: any; +declare var __STORYBOOK_CORE_EVENTS_MANAGER_ERRORS__: any; +declare var __STORYBOOK_ROUTER__: any; +declare var __STORYBOOK_THEMING__: any; +declare var __STORYBOOK_API__: any; +declare var __STORYBOOK_ICONS__: any; +declare var __STORYBOOK_CLIENT_LOGGER__: any; +declare var __STORYBOOK_ADDONS_CHANNEL__: any; +declare var __STORYBOOK_TYPES__: any; +declare var sendTelemetryError: (error: any) => void; From 6778ee7faa83bde2ac5252b8a042e0e47c9e88d0 Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Mon, 15 Apr 2024 21:18:25 +0200 Subject: [PATCH 178/380] Allow numbers in story name --- code/addons/controls/src/SaveFromControls.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/code/addons/controls/src/SaveFromControls.tsx b/code/addons/controls/src/SaveFromControls.tsx index 9ab36685e0b6..aee2387e2c71 100644 --- a/code/addons/controls/src/SaveFromControls.tsx +++ b/code/addons/controls/src/SaveFromControls.tsx @@ -108,15 +108,16 @@ export const SaveFromControls = ({ saveStory, createStory, resetArgs }: SaveFrom }; const onChange = (e: React.ChangeEvent) => { const value = e.target.value - .replace(/[^a-z-_ ]/gi, '') - .replaceAll(/([-_ ]+[a-z])/gi, (match) => match.toUpperCase().replace(/[-_ ]/g, '')); + .replace(/^[^a-z]/i, '') + .replace(/[^a-z0-9-_ ]/gi, '') + .replaceAll(/([-_ ]+[a-z0-9])/gi, (match) => match.toUpperCase().replace(/[-_ ]/g, '')); setStoryName(value.charAt(0).toUpperCase() + value.slice(1)); }; const onSubmitForm = (e: React.FormEvent) => { e.preventDefault(); if (saving) return; setSaving(true); - createStory(storyName.replaceAll(/[^a-z]/gi, '')); + createStory(storyName.replace(/^[^a-z]/i, '').replaceAll(/[^a-z0-9]/gi, '')); setTimeout(() => { setSaving(false); setCreating(false); From b42e1e23ed19b9c91cd0866c2aaa8fe2634e090d Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Mon, 15 Apr 2024 21:44:16 +0200 Subject: [PATCH 179/380] Improve error handling and fix edge cases --- code/addons/controls/src/manager.tsx | 79 ++++++++++--- .../core-server/src/presets/common-preset.ts | 2 +- .../save-from-controls/save-from-controls.ts | 109 +++++++++++------- 3 files changed, 135 insertions(+), 55 deletions(-) diff --git a/code/addons/controls/src/manager.tsx b/code/addons/controls/src/manager.tsx index 760d3d6d7c31..e1be06668b60 100644 --- a/code/addons/controls/src/manager.tsx +++ b/code/addons/controls/src/manager.tsx @@ -1,10 +1,10 @@ import React from 'react'; -import { addons, types, useArgTypes } from '@storybook/manager-api'; import { AddonPanel, Badge, Spaced } from '@storybook/components'; +import { SAVE_STORY_RESULT } from '@storybook/core-events'; +import { addons, types, useArgTypes } from '@storybook/manager-api'; +import { color } from '@storybook/theming'; import { ControlsPanel } from './ControlsPanel'; import { ADDON_ID, PARAM_KEY } from './constants'; -import { AlertIcon, CheckIcon } from '@storybook/icons'; -import { SAVE_STORY_RESULT } from '@storybook/core-events'; function Title() { const rows = useArgTypes(); @@ -23,6 +23,16 @@ function Title() { ); } +// It might take a little while for a new story to be available, so we retry a few times +const selectNewStory = (selectStory: (id: string) => void, storyId: string, attempt = 1) => { + if (attempt > 5) return; + try { + selectStory(storyId); + } catch (e) { + setTimeout(() => selectNewStory(selectStory, storyId, attempt + 1), 500); + } +}; + addons.register(ADDON_ID, (api) => { addons.add(ADDON_ID, { title: Title, @@ -40,20 +50,59 @@ addons.register(ADDON_ID, (api) => { }, }); - api.on(SAVE_STORY_RESULT, (data) => { - if (data.error) { - api.addNotification({ - content: { headline: `Error saving story`, subHeadline: ` ${data.error}` }, - id: 'save-story-error', - icon: , - }); - } else { + api.on( + SAVE_STORY_RESULT, + ({ errorMessage, newStoryId, newStoryName, sourceFileName, sourceStoryName }) => { + if (errorMessage) { + api.addNotification({ + id: 'save-story-error', + content: { + headline: newStoryName ? 'Failed to add new story' : 'Failed to update story', + subHeadline: newStoryName ? ( + <> + Could not add story to {sourceFileName}. {errorMessage} + + ) : ( + <> + Could not update story in {sourceFileName}. {errorMessage} + + ), + }, + duration: 20_000, + icon: { + name: 'failed', + color: color.negative, + }, + }); + return; + } + + if (newStoryId) { + const data = api.getCurrentStoryData(); + if (data.type === 'story') api.resetStoryArgs(data); + selectNewStory(api.selectStory, newStoryId); + } + api.addNotification({ - content: { headline: `Story saved`, subHeadline: ` ${data.id}` }, - duration: 2000, - icon: , id: 'save-story-success', + content: { + headline: newStoryName ? 'Story created' : 'Story saved', + subHeadline: newStoryName ? ( + <> + Added story {newStoryName} based on {sourceStoryName}. + + ) : ( + <> + Updated story {sourceStoryName}. + + ), + }, + duration: 8_000, + icon: { + name: 'passed', + color: color.positive, + }, }); } - }); + ); }); diff --git a/code/lib/core-server/src/presets/common-preset.ts b/code/lib/core-server/src/presets/common-preset.ts index ca665bc08510..5cbe1737dbca 100644 --- a/code/lib/core-server/src/presets/common-preset.ts +++ b/code/lib/core-server/src/presets/common-preset.ts @@ -88,7 +88,7 @@ export const favicon = async ( if (flatlist.length > 1) { logger.warn(dedent` Looks like multiple favicons were detected. Using the first one. - + ${flatlist.join(', ')} `); } diff --git a/code/lib/core-server/src/utils/save-from-controls/save-from-controls.ts b/code/lib/core-server/src/utils/save-from-controls/save-from-controls.ts index 3b4e65f0da16..770d49f354cb 100644 --- a/code/lib/core-server/src/utils/save-from-controls/save-from-controls.ts +++ b/code/lib/core-server/src/utils/save-from-controls/save-from-controls.ts @@ -1,10 +1,12 @@ /* eslint-disable no-underscore-dangle */ -import type { CoreConfig } from '@storybook/types'; import type { Channel } from '@storybook/channels'; import { SAVE_STORY_REQUEST, SAVE_STORY_RESULT } from '@storybook/core-events'; -import type { OptionsWithRequiredCache } from '../whats-new'; +import { storyNameFromExport, toId } from '@storybook/csf'; import { readCsf, writeCsf } from '@storybook/csf-tools'; -import { join } from 'path'; +import type { CoreConfig } from '@storybook/types'; + +import type { OptionsWithRequiredCache } from '../whats-new'; +import { basename, join } from 'path'; import { updateArgsInCsfFile } from './update-args-in-csf-file'; import { duplicateStoryWithNewName } from './duplicate-story-with-new-name'; // import { sendTelemetryError } from '../withTelemetry'; @@ -20,56 +22,85 @@ interface RequestSaveStoryPayload { name?: string; } +type RequestSaveStoryResultPayload = ( + | { id: string; success: true } + | { id: string; success: false; errorMessage: string } +) & { + newStoryId?: string; + newStoryName?: string; + sourceFileName?: string; + sourceStoryName?: string; +}; + export function initializeSaveFromControls( channel: Channel, options: OptionsWithRequiredCache, coreOptions: CoreConfig ) { - channel.on(SAVE_STORY_REQUEST, async (data: RequestSaveStoryPayload) => { - const id = data.id.split('--')[1]; - try { - const location = join(process.cwd(), data.importPath); + channel.on( + SAVE_STORY_REQUEST, + async ({ id, importPath, args, name }: RequestSaveStoryPayload) => { + let newStoryId; + let newStoryName; + let sourceFileName; + let sourceFilePath; + let sourceStoryName; - // open the story file - const csf = await readCsf(location, { - makeTitle: (userTitle: string) => userTitle || 'myTitle', - }); + try { + sourceFileName = basename(importPath); + sourceFilePath = join(process.cwd(), importPath); - const parsed = csf.parse(); + // open the story file + const csf = await readCsf(sourceFilePath, { + makeTitle: (userTitle: string) => userTitle || 'myTitle', + }); - // find the export_name for the id - const [name] = - Object.entries(parsed._stories).find(([_, value]) => value.id.endsWith(`--${id}`)) || []; + const parsed = csf.parse(); + const stories = Object.entries(parsed._stories); - let node; + const [componentId, storyId] = id.split('--'); + newStoryName = name && storyNameFromExport(name); + newStoryId = newStoryName && toId(componentId, newStoryName); - if (!name) { - throw new Error(`no story found with id: ${id}`); - } + // find the export_name for the id + const [storyName] = stories.find(([key, value]) => value.id.endsWith(`--${storyId}`)) || []; + if (!storyName) throw new Error(`Source story not found.`); + if (name && csf.getStoryExport(name)) throw new Error(`Story already exists.`); - // find the AST node for the export_name, if none can be found, create a new story - if (data.name) { - node = duplicateStoryWithNewName(parsed, name, data.name); - } else { - node = csf.getStoryExport(name); - } + sourceStoryName = storyNameFromExport(storyName); - // modify the AST node with the new args - updateArgsInCsfFile(node, data.args); + const node = name + ? duplicateStoryWithNewName(parsed, storyName, name) + : csf.getStoryExport(storyName); - // save the file - await writeCsf(csf, location); + // modify the AST node with the new args + updateArgsInCsfFile(node, args); - channel.emit(SAVE_STORY_RESULT, { id: data.id, success: true }); - } catch (e: any) { - // sendTelemetryError(channel, e); - channel.emit(SAVE_STORY_RESULT, { - id: data.id, - success: false, - error: `writing to CSF-file failed, is it a valid CSF-file?`, - }); + // save the file + await writeCsf(csf, sourceFilePath); - console.error(e.stack || e.message || e.toString()); + channel.emit(SAVE_STORY_RESULT, { + id, + success: true, + newStoryId, + newStoryName, + sourceFileName, + sourceStoryName, + } satisfies RequestSaveStoryResultPayload); + } catch (e: any) { + // sendTelemetryError(channel, e); + channel.emit(SAVE_STORY_RESULT, { + id, + success: false, + errorMessage: e.message, + newStoryId, + newStoryName, + sourceFileName, + sourceStoryName, + } satisfies RequestSaveStoryResultPayload); + + console.error(`Error writing to ${sourceFilePath}:`, e.stack || e.message || e.toString()); + } } - }); + ); } From 9a8d83e33c140412399d901237b2be539a2925a4 Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Mon, 15 Apr 2024 21:44:56 +0200 Subject: [PATCH 180/380] Fix Storybook structure --- code/ui/.storybook/main.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/ui/.storybook/main.ts b/code/ui/.storybook/main.ts index 85ed32cf08c4..7c67fa3d58d8 100644 --- a/code/ui/.storybook/main.ts +++ b/code/ui/.storybook/main.ts @@ -21,7 +21,7 @@ const allStories = [ }, { directory: '../../addons/controls/src', // TODO other addons? - titlePrefix: '@addons', + titlePrefix: '@addons/controls', }, ]; From 7d9cb81624718f7312b0ab70fccf0878df8f8316 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 16 Apr 2024 10:57:43 +0200 Subject: [PATCH 181/380] Make chai a dev dependency --- code/lib/test/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/test/package.json b/code/lib/test/package.json index e9b34ccb2098..502f18c5140e 100644 --- a/code/lib/test/package.json +++ b/code/lib/test/package.json @@ -52,10 +52,10 @@ "@testing-library/user-event": "^14.5.2", "@vitest/expect": "1.3.1", "@vitest/spy": "^1.3.1", - "chai": "^4.4.1", "util": "^0.12.4" }, "devDependencies": { + "chai": "^4.4.1", "tinyspy": "^2.2.0", "ts-dedent": "^2.2.0", "type-fest": "~2.19", From 30de294cae6bee0874b416fe18d9988ef5cc70cf Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 16 Apr 2024 11:42:57 +0200 Subject: [PATCH 182/380] Try another mock naming convention --- .../nextjs/src/export-mocks/cache/index.ts | 4 +- .../src/export-mocks/headers/cookies.ts | 112 ++---------------- .../src/export-mocks/headers/headers.ts | 98 ++------------- .../src/export-mocks/navigation/index.ts | 59 ++++----- .../nextjs/src/export-mocks/router/index.ts | 30 +++-- 5 files changed, 64 insertions(+), 239 deletions(-) diff --git a/code/frameworks/nextjs/src/export-mocks/cache/index.ts b/code/frameworks/nextjs/src/export-mocks/cache/index.ts index 1692979f0159..b9f2fa8dd431 100644 --- a/code/frameworks/nextjs/src/export-mocks/cache/index.ts +++ b/code/frameworks/nextjs/src/export-mocks/cache/index.ts @@ -3,8 +3,8 @@ import { unstable_cache } from 'next/dist/server/web/spec-extension/unstable-cac import { unstable_noStore } from 'next/dist/server/web/spec-extension/unstable-no-store'; // mock utilities/overrides (as of Next v14.2.0) -const revalidatePath = fn().mockName('revalidatePath'); -const revalidateTag = fn().mockName('revalidateTag'); +const revalidatePath = fn().mockName('next/cache::revalidatePath'); +const revalidateTag = fn().mockName('next/cache::revalidateTag'); const cacheExports = { unstable_cache, diff --git a/code/frameworks/nextjs/src/export-mocks/headers/cookies.ts b/code/frameworks/nextjs/src/export-mocks/headers/cookies.ts index 75022baaea26..c3272dc0e335 100644 --- a/code/frameworks/nextjs/src/export-mocks/headers/cookies.ts +++ b/code/frameworks/nextjs/src/export-mocks/headers/cookies.ts @@ -1,116 +1,22 @@ -/* eslint-disable no-underscore-dangle */ import { fn } from '@storybook/test'; -import type { RequestCookies } from 'next/dist/compiled/@edge-runtime/cookies'; -import { - parseCookie, - stringifyCookie, - type RequestCookie, -} from 'next/dist/compiled/@edge-runtime/cookies'; +import { RequestCookies } from 'next/dist/compiled/@edge-runtime/cookies'; // We need this import to be a singleton, and because it's used in multiple entrypoints // both in ESM and CJS, importing it via the package name instead of having a local import // is the only way to achieve it actually being a singleton // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore we must ignore types here as during compilation they are not generated yet -import { headers, type HeadersStore } from '@storybook/nextjs/headers.mock'; +import { headers } from '@storybook/nextjs/headers.mock'; -const stringifyCookies = (map: Map) => { - return Array.from(map) - .map(([_, v]) => stringifyCookie(v).replace(/; /, '')) - .join('; '); -}; - -// Mostly copied from https://github.com/vercel/edge-runtime/blob/c25e2ded39104e2a3be82efc08baf8dc8fb436b3/packages/cookies/src/request-cookies.ts#L7 -class RequestCookiesMock implements RequestCookies { - /** @internal */ - private readonly _headers: HeadersStore; - - _parsed: Map = new Map(); - - constructor(requestHeaders: HeadersStore) { - this._headers = requestHeaders; - const header = requestHeaders?.get('cookie'); - if (header) { - const parsed = parseCookie(header); - for (const [name, value] of parsed) { - this._parsed.set(name, { name, value }); - } - } - } - - [Symbol.iterator]() { - return this._parsed[Symbol.iterator](); - } - - get size(): number { - return this._parsed.size; - } +class RequestCookiesMock extends RequestCookies { + get = fn(super.get).mockName('next/headers::get'); - get = fn((...args: [name: string] | [RequestCookie]) => { - const name = typeof args[0] === 'string' ? args[0] : args[0].name; - return this._parsed.get(name); - }).mockName('cookies().get'); + getAll = fn(super.getAll).mockName('next/headers::cookies().getAll'); - getAll = fn((...args: [name: string] | [RequestCookie] | []) => { - const all = Array.from(this._parsed); - if (!args.length) { - return all.map(([_, value]) => value); - } + has = fn(super.has).mockName('next/headers::cookies().has'); - const name = typeof args[0] === 'string' ? args[0] : args[0]?.name; - return all.filter(([n]) => n === name).map(([_, value]) => value); - }).mockName('cookies().getAll'); + set = fn(super.set).mockName('next/headers::cookies().set'); - has = fn((name: string) => { - return this._parsed.has(name); - }).mockName('cookies().has'); - - set = fn((...args: [key: string, value: string] | [options: RequestCookie]): this => { - const [name, value] = args.length === 1 ? [args[0].name, args[0].value] : args; - - const map = this._parsed; - map.set(name, { name, value }); - - this._headers.set('cookie', stringifyCookies(map)); - return this; - }).mockName('cookies().set'); - - /** - * Delete the cookies matching the passed name or names in the request. - */ - delete = fn( - ( - /** Name or names of the cookies to be deleted */ - names: string | string[] - ): boolean | boolean[] => { - const map = this._parsed; - const result = !Array.isArray(names) - ? map.delete(names) - : names.map((name) => map.delete(name)); - this._headers.set('cookie', stringifyCookies(map)); - return result; - } - ).mockName('cookies().delete'); - - /** - * Delete all the cookies in the cookies in the request. - */ - clear = fn((): this => { - this.delete(Array.from(this._parsed.keys())); - return this; - }).mockName('cookies().clear'); - - /** - * Format the cookies in the request as a string for logging - */ - [Symbol.for('edge-runtime.inspect.custom')]() { - return `RequestCookies ${JSON.stringify(Object.fromEntries(this._parsed))}`; - } - - toString() { - return [...this._parsed.values()] - .map((v) => `${v.name}=${encodeURIComponent(v.value)}`) - .join('; '); - } + delete = fn(super.delete).mockName('next/headers::cookies().delete'); } let requestCookiesMock: RequestCookiesMock; @@ -120,7 +26,7 @@ export const cookies = fn(() => { requestCookiesMock = new RequestCookiesMock(headers()); } return requestCookiesMock; -}); +}).mockName('next/headers::cookies()'); const originalRestore = cookies.mockRestore.bind(null); diff --git a/code/frameworks/nextjs/src/export-mocks/headers/headers.ts b/code/frameworks/nextjs/src/export-mocks/headers/headers.ts index a7511064fa1f..02703265e583 100644 --- a/code/frameworks/nextjs/src/export-mocks/headers/headers.ts +++ b/code/frameworks/nextjs/src/export-mocks/headers/headers.ts @@ -1,101 +1,29 @@ import { fn } from '@storybook/test'; -import type { IncomingHttpHeaders } from 'http'; -import type { HeadersAdapter } from 'next/dist/server/web/spec-extension/adapters/headers'; -// Mostly copied from https://github.com/vercel/next.js/blob/763b9a660433ec5278a10e59d7ae89d4010ba212/packages/next/src/server/web/spec-extension/adapters/headers.ts#L20 -// @ts-expect-error unfortunately the headers property is private (and not protected) in HeadersAdapter -// and we can't access it so we need to redefine it, but that clashes with the type, hence the ts-expect-error comment. -class HeadersAdapterMock extends Headers implements HeadersAdapter { - private headers: IncomingHttpHeaders = {}; +import { HeadersAdapter } from 'next/dist/server/web/spec-extension/adapters/headers'; - /** - * Merges a header value into a string. This stores multiple values as an - * array, so we need to merge them into a string. - * - * @param value a header value - * @returns a merged header value (a string) - */ - private merge(value: string | string[]): string { - if (Array.isArray(value)) return value.join(', '); - - return value; +class HeadersAdapterMock extends HeadersAdapter { + constructor() { + super({}); } - public append = fn((name: string, value: string): void => { - const existing = this.headers[name]; - if (typeof existing === 'string') { - this.headers[name] = [existing, value]; - } else if (Array.isArray(existing)) { - existing.push(value); - } else { - this.headers[name] = value; - } - }).mockName('headers().append'); - - public delete = fn((name: string) => { - delete this.headers[name]; - }).mockName('headers().delete'); - - public get = fn((name: string): string | null => { - const value = this.headers[name]; - if (typeof value !== 'undefined') return this.merge(value); + append = fn(super.append).mockName('next/headers::headers().append'); - return null; - }).mockName('headers().get'); + delete = fn(super.delete).mockName('next/headers::headers().delete'); - public has = fn((name: string): boolean => { - return typeof this.headers[name] !== 'undefined'; - }).mockName('headers().has'); + get = fn(super.get).mockName('next/headers::headers().get'); - public set = fn((name: string, value: string): void => { - this.headers[name] = value; - }).mockName('headers().set'); + has = fn(super.has).mockName('next/headers::headers().has'); - public forEach = fn( - (callbackfn: (value: string, name: string, parent: Headers) => void, thisArg?: any): void => { - for (const [name, value] of this.entries()) { - callbackfn.call(thisArg, value, name, this); - } - } - ).mockName('headers().forEach'); + set = fn(super.set).mockName('next/headers::headers().set'); - public entries = fn( - function* (this: HeadersAdapterMock): IterableIterator<[string, string]> { - for (const key of Object.keys(this.headers)) { - const name = key.toLowerCase(); - // We assert here that this is a string because we got it from the - // Object.keys() call above. - const value = this.get(name) as string; + forEach = fn(super.forEach).mockName('next/headers::headers().forEach'); - yield [name, value]; - } - }.bind(this) - ).mockName('headers().entries'); + entries = fn(super.entries).mockName('next/headers::headers().entries'); - public keys = fn( - function* (this: HeadersAdapterMock): IterableIterator { - for (const key of Object.keys(this.headers)) { - const name = key.toLowerCase(); - yield name; - } - }.bind(this) - ).mockName('headers().keys'); + keys = fn(super.keys).mockName('next/headers::headers().keys'); - public values = fn( - function* (this: HeadersAdapterMock): IterableIterator { - for (const key of Object.keys(this.headers)) { - // We assert here that this is a string because we got it from the - // Object.keys() call above. - const value = this.get(key) as string; - - yield value; - } - }.bind(this) - ).mockName('headers().values'); - - public [Symbol.iterator](): IterableIterator<[string, string]> { - return this.entries(); - } + values = fn(super.values).mockName('next/headers::headers().values'); } let headersAdapterMock: HeadersAdapterMock; diff --git a/code/frameworks/nextjs/src/export-mocks/navigation/index.ts b/code/frameworks/nextjs/src/export-mocks/navigation/index.ts index 47a7e5801b56..fbbeb8ced25c 100644 --- a/code/frameworks/nextjs/src/export-mocks/navigation/index.ts +++ b/code/frameworks/nextjs/src/export-mocks/navigation/index.ts @@ -17,14 +17,14 @@ let navigationAPI: { * @ignore * @internal * */ -const createNavigation = (overrides: any) => { +export const createNavigation = (overrides: any) => { const navigationActions = { - push: fn().mockName('useRouter().push'), - replace: fn().mockName('useRouter().replace'), - forward: fn().mockName('useRouter().forward'), - back: fn().mockName('useRouter().back'), - prefetch: fn().mockName('useRouter().prefetch'), - refresh: fn().mockName('useRouter().refresh'), + push: fn().mockName('next/navigation::useRouter().push'), + replace: fn().mockName('next/navigation::useRouter().replace'), + forward: fn().mockName('next/navigation::useRouter().forward'), + back: fn().mockName('next/navigation::useRouter().back'), + prefetch: fn().mockName('next/navigation::useRouter().prefetch'), + refresh: fn().mockName('next/navigation::useRouter().refresh'), }; if (overrides) { @@ -42,7 +42,7 @@ const createNavigation = (overrides: any) => { return navigationAPI; }; -const getRouter = () => { +export const getRouter = () => { if (!navigationAPI) { throw new NextjsRouterMocksNotAvailable({ importType: 'next/navigation', @@ -56,41 +56,34 @@ const getRouter = () => { export * from 'next/dist/client/components/navigation'; // mock utilities/overrides (as of Next v14.2.0) -const redirect = fn().mockName('redirect'); +export const redirect = fn().mockName('next/navigation::redirect'); // passthrough mocks - keep original implementation but allow for spying -const useSearchParams = fn(originalNavigation.useSearchParams).mockName('useSearchParams'); -const usePathname = fn(originalNavigation.usePathname).mockName('usePathname'); -const useSelectedLayoutSegment = fn(originalNavigation.useSelectedLayoutSegment).mockName( +export const useSearchParams = fn(originalNavigation.useSearchParams).mockName( + 'next/navigation::useSearchParams' +); +export const usePathname = fn(originalNavigation.usePathname).mockName( + 'next/navigation::usePathname' +); +export const useSelectedLayoutSegment = fn(originalNavigation.useSelectedLayoutSegment).mockName( 'useSelectedLayoutSegment' ); -const useSelectedLayoutSegments = fn(originalNavigation.useSelectedLayoutSegments).mockName( +export const useSelectedLayoutSegments = fn(originalNavigation.useSelectedLayoutSegments).mockName( 'useSelectedLayoutSegments' ); -const useRouter = fn(originalNavigation.useRouter).mockName('useRouter'); -const useServerInsertedHTML = fn(originalNavigation.useServerInsertedHTML).mockName( +export const useRouter = fn(originalNavigation.useRouter).mockName('next/navigation::useRouter'); +export const useServerInsertedHTML = fn(originalNavigation.useServerInsertedHTML).mockName( 'useServerInsertedHTML' ); -const notFound = fn(originalNavigation.notFound).mockName('notFound'); -const permanentRedirect = fn(originalNavigation.permanentRedirect).mockName('permanentRedirect'); +export const notFound = fn(originalNavigation.notFound).mockName('next/navigation::notFound'); +export const permanentRedirect = fn(originalNavigation.permanentRedirect).mockName( + 'permanentRedirect' +); // Params, not exported by Next.js, is manually declared to avoid inference issues. interface Params { [key: string]: string | string[]; } -const useParams = fn<[], Params>(originalNavigation.useParams).mockName('useParams'); - -export { - createNavigation, - getRouter, - redirect, - useSearchParams, - usePathname, - useSelectedLayoutSegment, - useSelectedLayoutSegments, - useParams, - useRouter, - useServerInsertedHTML, - notFound, - permanentRedirect, -}; +export const useParams = fn<[], Params>(originalNavigation.useParams).mockName( + 'next/navigation::useParams' +); diff --git a/code/frameworks/nextjs/src/export-mocks/router/index.ts b/code/frameworks/nextjs/src/export-mocks/router/index.ts index c9f81f3a72be..b3c5e37faa43 100644 --- a/code/frameworks/nextjs/src/export-mocks/router/index.ts +++ b/code/frameworks/nextjs/src/export-mocks/router/index.ts @@ -36,27 +36,27 @@ let routerAPI: { * @ignore * @internal * */ -const createRouter = (overrides: Partial) => { +export const createRouter = (overrides: Partial) => { const routerActions: Partial = { push: fn((..._args: any[]) => { return Promise.resolve(true); - }).mockName('useRouter().push'), + }).mockName('next/router::useRouter().push'), replace: fn((..._args: any[]) => { return Promise.resolve(true); - }).mockName('useRouter().replace'), - reload: fn((..._args: any[]) => {}).mockName('useRouter().reload'), - back: fn((..._args: any[]) => {}).mockName('useRouter().back'), - forward: fn(() => {}).mockName('useRouter().forward'), + }).mockName('next/router::useRouter().replace'), + reload: fn((..._args: any[]) => {}).mockName('next/router::useRouter().reload'), + back: fn((..._args: any[]) => {}).mockName('next/router::useRouter().back'), + forward: fn(() => {}).mockName('next/router::useRouter().forward'), prefetch: fn((..._args: any[]) => { return Promise.resolve(); - }).mockName('useRouter().prefetch'), - beforePopState: fn((..._args: any[]) => {}).mockName('useRouter().beforePopState'), + }).mockName('next/router::useRouter().prefetch'), + beforePopState: fn((..._args: any[]) => {}).mockName('next/router::useRouter().beforePopState'), }; const routerEvents: NextRouter['events'] = { - on: fn((..._args: any[]) => {}).mockName('useRouter().events.on'), - off: fn((..._args: any[]) => {}).mockName('useRouter().events.off'), - emit: fn((..._args: any[]) => {}).mockName('useRouter().events.emit'), + on: fn((..._args: any[]) => {}).mockName('next/router::useRouter().events.on'), + off: fn((..._args: any[]) => {}).mockName('next/router::useRouter().events.off'), + emit: fn((..._args: any[]) => {}).mockName('next/router::useRouter().events.emit'), }; if (overrides) { @@ -95,7 +95,7 @@ const createRouter = (overrides: Partial) => { return routerAPI as unknown as NextRouter; }; -const getRouter = () => { +export const getRouter = () => { if (!routerAPI) { throw new NextjsRouterMocksNotAvailable({ importType: 'next/router', @@ -111,7 +111,5 @@ export default singletonRouter; // mock utilities/overrides (as of Next v14.2.0) // passthrough mocks - keep original implementation but allow for spying -const useRouter = fn(originalRouter.useRouter).mockName('useRouter'); -const withRouter = fn(originalRouter.withRouter).mockName('withRouter'); - -export { createRouter, getRouter, useRouter, withRouter }; +export const useRouter = fn(originalRouter.useRouter).mockName('next/router::useRouter'); +export const withRouter = fn(originalRouter.withRouter).mockName('next/router::withRouter'); From 3e7059bddd432038b787d21bd3aae773b356a525 Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Tue, 16 Apr 2024 12:05:13 +0200 Subject: [PATCH 183/380] Move error display to modal and refactor channel request/response messaging --- code/addons/controls/src/ControlsPanel.tsx | 36 +--- .../controls/src/SaveFromControls.stories.tsx | 23 ++- code/addons/controls/src/SaveFromControls.tsx | 39 +++-- code/addons/controls/src/manager.tsx | 148 +++++++++++------ code/lib/core-events/src/index.ts | 4 +- .../save-from-controls/save-from-controls.ts | 157 +++++++++--------- code/ui/manager/src/globals/exports.ts | 2 +- 7 files changed, 229 insertions(+), 180 deletions(-) diff --git a/code/addons/controls/src/ControlsPanel.tsx b/code/addons/controls/src/ControlsPanel.tsx index 75616ea71d58..6a2b678444c1 100644 --- a/code/addons/controls/src/ControlsPanel.tsx +++ b/code/addons/controls/src/ControlsPanel.tsx @@ -1,6 +1,5 @@ import { dequal as deepEqual } from 'dequal'; -import type { FC } from 'react'; -import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; +import React, { useEffect, useMemo, useRef, useState } from 'react'; import { global } from '@storybook/global'; import { useArgs, @@ -8,12 +7,10 @@ import { useArgTypes, useParameter, useStorybookState, - useStorybookApi, } from '@storybook/manager-api'; import { PureArgsTable as ArgsTable, type PresetColor, type SortType } from '@storybook/blocks'; import { styled } from '@storybook/theming'; import type { ArgTypes } from '@storybook/types'; -import { SAVE_STORY_REQUEST } from '@storybook/core-events'; import { PARAM_KEY } from './constants'; import { SaveFromControls } from './SaveFromControls'; @@ -39,8 +36,12 @@ interface ControlsParameters { presetColors?: PresetColor[]; } -export const ControlsPanel: FC = () => { - const api = useStorybookApi(); +interface ControlsPanelProps { + saveStory: () => Promise; + createStory: (storyName: string) => Promise; +} + +export const ControlsPanel = ({ saveStory, createStory }: ControlsPanelProps) => { const [isLoading, setIsLoading] = useState(true); const [args, updateArgs, resetArgs, initialArgs] = useArgs(); const [globals] = useGlobals(); @@ -72,29 +73,6 @@ export const ControlsPanel: FC = () => { [args, initialArgs] ); - const saveStory = useCallback(() => { - const data = api.getCurrentStoryData(); - - api.emit(SAVE_STORY_REQUEST, { - args: currentArgsRef.current, - id: data.id, - importPath: data.importPath, - }); - }, [api]); - const createStory = useCallback( - (name: string) => { - const data = api.getCurrentStoryData(); - - api.emit(SAVE_STORY_REQUEST, { - args: currentArgsRef.current, - id: data.id, - importPath: data.importPath, - name, - }); - }, - [api] - ); - return ( Promise.resolve(fn(action('saveStory'))(...args)), + createStory: (...args) => Promise.resolve(fn(action('createStory'))(...args)), resetArgs: fn(action('resetArgs')), }, parameters: { @@ -44,3 +44,22 @@ export const Created: Story = { await expect(context.args.createStory).toHaveBeenCalledWith('MyNewStory'); }, }; + +export const CreatingFailed: Story = { + args: { + createStory: () => Promise.reject(new Error('Story already exists.')), + }, + play: async (context) => { + await Creating.play(context); + + await waitFor(async () => { + const dialog = await within(document.body).findByRole('dialog'); + const input = await within(dialog).findByRole('textbox'); + await userEvent.type(input, 'MyNewStory'); + const submitButton = await within(dialog).findByRole('button', { name: /Create/i }); + await userEvent.click(submitButton); + }); + + await expect(context.args.createStory).toHaveBeenCalledWith('MyNewStory'); + }, +}; diff --git a/code/addons/controls/src/SaveFromControls.tsx b/code/addons/controls/src/SaveFromControls.tsx index aee2387e2c71..7d631fdd098b 100644 --- a/code/addons/controls/src/SaveFromControls.tsx +++ b/code/addons/controls/src/SaveFromControls.tsx @@ -84,8 +84,8 @@ const ModalInput = styled(Form.Input)(({ theme }) => ({ })); type SaveFromControlsProps = { - saveStory: () => void; - createStory: (storyName: string) => void; + saveStory: () => Promise; + createStory: (storyName: string) => Promise; resetArgs: () => void; }; @@ -94,11 +94,19 @@ export const SaveFromControls = ({ saveStory, createStory, resetArgs }: SaveFrom const [saving, setSaving] = React.useState(false); const [creating, setCreating] = React.useState(false); const [storyName, setStoryName] = React.useState(''); + const [errorMessage, setErrorMessage] = React.useState(null); - const onSaveStory = () => { - setSaving(true); - saveStory(); - setTimeout(() => setSaving(false), 1000); + const onSaveStory = async () => { + if (saving) return; + try { + setErrorMessage(null); + setSaving(true); + await saveStory(); + setSaving(false); + } catch (e: any) { + setErrorMessage(e.message); + setSaving(false); + } }; const onShowForm = () => { @@ -113,15 +121,19 @@ export const SaveFromControls = ({ saveStory, createStory, resetArgs }: SaveFrom .replaceAll(/([-_ ]+[a-z0-9])/gi, (match) => match.toUpperCase().replace(/[-_ ]/g, '')); setStoryName(value.charAt(0).toUpperCase() + value.slice(1)); }; - const onSubmitForm = (e: React.FormEvent) => { - e.preventDefault(); + const onSubmitForm = async (event: React.FormEvent) => { + event.preventDefault(); if (saving) return; - setSaving(true); - createStory(storyName.replace(/^[^a-z]/i, '').replaceAll(/[^a-z0-9]/gi, '')); - setTimeout(() => { - setSaving(false); + try { + setErrorMessage(null); + setSaving(true); + await createStory(storyName.replace(/^[^a-z]/i, '').replaceAll(/[^a-z0-9]/gi, '')); setCreating(false); - }, 1000); + setSaving(false); + } catch (e: any) { + setErrorMessage(e.message); + setSaving(false); + } }; return ( @@ -199,6 +211,7 @@ export const SaveFromControls = ({ saveStory, createStory, resetArgs }: SaveFrom + {errorMessage && {errorMessage}} diff --git a/code/addons/controls/src/manager.tsx b/code/addons/controls/src/manager.tsx index e1be06668b60..b1f60e015a72 100644 --- a/code/addons/controls/src/manager.tsx +++ b/code/addons/controls/src/manager.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { AddonPanel, Badge, Spaced } from '@storybook/components'; -import { SAVE_STORY_RESULT } from '@storybook/core-events'; +import { SAVE_STORY_REQUEST, SAVE_STORY_RESPONSE } from '@storybook/core-events'; +import type { API } from '@storybook/manager-api'; import { addons, types, useArgTypes } from '@storybook/manager-api'; import { color } from '@storybook/theming'; import { ControlsPanel } from './ControlsPanel'; @@ -25,7 +26,7 @@ function Title() { // It might take a little while for a new story to be available, so we retry a few times const selectNewStory = (selectStory: (id: string) => void, storyId: string, attempt = 1) => { - if (attempt > 5) return; + if (attempt > 10) return; try { selectStory(storyId); } catch (e) { @@ -33,7 +34,63 @@ const selectNewStory = (selectStory: (id: string) => void, storyId: string, atte } }; +interface ResponseData { + id: string; + success: boolean; + error?: string; + payload?: any; +} + +const requestResponse = ( + api: API, + requestEvent: string, + responseEvent: string, + payload: any, + timeout = 5000 +) => { + let timeoutId: NodeJS.Timeout; + return new Promise((resolve, reject) => { + const requestId = Math.random().toString(16).slice(2); + const responseHandler = (response: ResponseData) => { + if (response.id !== requestId) return; + clearTimeout(timeoutId); + api.off(responseEvent, responseHandler); + if (response.success) resolve(response.payload); + else reject(new Error(response.error)); + }; + + api.emit(requestEvent, { id: requestId, payload }); + api.on(responseEvent, responseHandler); + + timeoutId = setTimeout(() => { + api.off(responseEvent, responseHandler); + reject(new Error('Timed out waiting for response')); + }, timeout); + }); +}; + addons.register(ADDON_ID, (api) => { + const saveStory = async () => { + const data = api.getCurrentStoryData(); + if (data.type !== 'story') throw new Error('Not a story'); + return requestResponse(api, SAVE_STORY_REQUEST, SAVE_STORY_RESPONSE, { + args: data.args, + csfId: data.id, + importPath: data.importPath, + }); + }; + + const createStory = async (name: string) => { + const data = api.getCurrentStoryData(); + if (data.type !== 'story') throw new Error('Not a story'); + return requestResponse(api, SAVE_STORY_REQUEST, SAVE_STORY_RESPONSE, { + args: data.args, + csfId: data.id, + importPath: data.importPath, + name, + }); + }; + addons.add(ADDON_ID, { title: Title, type: types.PANEL, @@ -44,65 +101,46 @@ addons.register(ADDON_ID, (api) => { } return ( - + ); }, }); - api.on( - SAVE_STORY_RESULT, - ({ errorMessage, newStoryId, newStoryName, sourceFileName, sourceStoryName }) => { - if (errorMessage) { - api.addNotification({ - id: 'save-story-error', - content: { - headline: newStoryName ? 'Failed to add new story' : 'Failed to update story', - subHeadline: newStoryName ? ( - <> - Could not add story to {sourceFileName}. {errorMessage} - - ) : ( - <> - Could not update story in {sourceFileName}. {errorMessage} - - ), - }, - duration: 20_000, - icon: { - name: 'failed', - color: color.negative, - }, - }); - return; - } + api.on(SAVE_STORY_RESPONSE, ({ success, payload }) => { + if (!success) return; - if (newStoryId) { - const data = api.getCurrentStoryData(); - if (data.type === 'story') api.resetStoryArgs(data); - selectNewStory(api.selectStory, newStoryId); - } + const { newStoryId, newStoryName, sourceStoryName } = payload; - api.addNotification({ - id: 'save-story-success', - content: { - headline: newStoryName ? 'Story created' : 'Story saved', - subHeadline: newStoryName ? ( - <> - Added story {newStoryName} based on {sourceStoryName}. - - ) : ( - <> - Updated story {sourceStoryName}. - - ), - }, - duration: 8_000, - icon: { - name: 'passed', - color: color.positive, - }, - }); + if (newStoryId) { + const data = api.getCurrentStoryData(); + if (data.type === 'story') api.resetStoryArgs(data); + selectNewStory(api.selectStory, newStoryId); } - ); + + api.addNotification({ + id: 'save-story-success', + content: { + headline: newStoryName ? 'Story created' : 'Story saved', + subHeadline: newStoryName ? ( + <> + Added story {newStoryName} based on {sourceStoryName}. + + ) : ( + <> + Updated story {sourceStoryName}. + + ), + }, + duration: 8_000, + onClick: ({ onDismiss }) => { + onDismiss(); + if (newStoryId) api.selectStory(newStoryId); + }, + icon: { + name: 'passed', + color: color.positive, + }, + }); + }); }); diff --git a/code/lib/core-events/src/index.ts b/code/lib/core-events/src/index.ts index 5b29d5175481..37452d0a8d76 100644 --- a/code/lib/core-events/src/index.ts +++ b/code/lib/core-events/src/index.ts @@ -77,7 +77,7 @@ enum events { FILE_COMPONENT_SEARCH = 'fileComponentSearch', FILE_COMPONENT_SEARCH_RESULT = 'fileComponentSearchResult', SAVE_STORY_REQUEST = 'saveStoryRequest', - SAVE_STORY_RESULT = 'saveStoryResult', + SAVE_STORY_RESPONSE = 'saveStoryResponse', CREATE_NEW_STORYFILE = 'createNewStoryfile', CREATE_NEW_STORYFILE_RESULT = 'createNewStoryfileResult', } @@ -139,7 +139,7 @@ export const { TOGGLE_WHATS_NEW_NOTIFICATIONS, TELEMETRY_ERROR, SAVE_STORY_REQUEST, - SAVE_STORY_RESULT, + SAVE_STORY_RESPONSE, } = events; export interface WhatsNewCache { diff --git a/code/lib/core-server/src/utils/save-from-controls/save-from-controls.ts b/code/lib/core-server/src/utils/save-from-controls/save-from-controls.ts index 770d49f354cb..44f1b4c1ecaf 100644 --- a/code/lib/core-server/src/utils/save-from-controls/save-from-controls.ts +++ b/code/lib/core-server/src/utils/save-from-controls/save-from-controls.ts @@ -1,106 +1,107 @@ /* eslint-disable no-underscore-dangle */ import type { Channel } from '@storybook/channels'; -import { SAVE_STORY_REQUEST, SAVE_STORY_RESULT } from '@storybook/core-events'; +import { SAVE_STORY_REQUEST, SAVE_STORY_RESPONSE } from '@storybook/core-events'; import { storyNameFromExport, toId } from '@storybook/csf'; import { readCsf, writeCsf } from '@storybook/csf-tools'; -import type { CoreConfig } from '@storybook/types'; -import type { OptionsWithRequiredCache } from '../whats-new'; import { basename, join } from 'path'; import { updateArgsInCsfFile } from './update-args-in-csf-file'; import { duplicateStoryWithNewName } from './duplicate-story-with-new-name'; // import { sendTelemetryError } from '../withTelemetry'; -interface RequestSaveStoryPayload { - // The id of the request. It might be simply the story Title +interface SaveStoryRequest { id: string; - // The path of the Story - importPath: string; - // The updated list of set args - args: Record; - // The exported name of the Story -> This information doesn't exist in the index.json yet. - name?: string; + payload: { + csfId: string; + importPath: string; + args: Record; + name?: string; + }; } -type RequestSaveStoryResultPayload = ( +type SaveStoryResponse = ( | { id: string; success: true } - | { id: string; success: false; errorMessage: string } + | { id: string; success: false; error: string } ) & { - newStoryId?: string; - newStoryName?: string; - sourceFileName?: string; - sourceStoryName?: string; + payload: { + csfId: string; + newStoryId?: string; + newStoryName?: string; + sourceFileName?: string; + sourceStoryName?: string; + }; }; -export function initializeSaveFromControls( - channel: Channel, - options: OptionsWithRequiredCache, - coreOptions: CoreConfig -) { - channel.on( - SAVE_STORY_REQUEST, - async ({ id, importPath, args, name }: RequestSaveStoryPayload) => { - let newStoryId; - let newStoryName; - let sourceFileName; - let sourceFilePath; - let sourceStoryName; - - try { - sourceFileName = basename(importPath); - sourceFilePath = join(process.cwd(), importPath); - - // open the story file - const csf = await readCsf(sourceFilePath, { - makeTitle: (userTitle: string) => userTitle || 'myTitle', - }); - - const parsed = csf.parse(); - const stories = Object.entries(parsed._stories); - - const [componentId, storyId] = id.split('--'); - newStoryName = name && storyNameFromExport(name); - newStoryId = newStoryName && toId(componentId, newStoryName); - - // find the export_name for the id - const [storyName] = stories.find(([key, value]) => value.id.endsWith(`--${storyId}`)) || []; - if (!storyName) throw new Error(`Source story not found.`); - if (name && csf.getStoryExport(name)) throw new Error(`Story already exists.`); - - sourceStoryName = storyNameFromExport(storyName); - - const node = name - ? duplicateStoryWithNewName(parsed, storyName, name) - : csf.getStoryExport(storyName); - - // modify the AST node with the new args - updateArgsInCsfFile(node, args); - - // save the file - await writeCsf(csf, sourceFilePath); - - channel.emit(SAVE_STORY_RESULT, { - id, - success: true, +export function initializeSaveFromControls(channel: Channel) { + channel.on(SAVE_STORY_REQUEST, async ({ id, payload }: SaveStoryRequest) => { + const { csfId, importPath, args, name } = payload; + + let newStoryId; + let newStoryName; + let sourceFileName; + let sourceFilePath; + let sourceStoryName; + + try { + sourceFileName = basename(importPath); + sourceFilePath = join(process.cwd(), importPath); + + // open the story file + const csf = await readCsf(sourceFilePath, { + makeTitle: (userTitle: string) => userTitle || 'myTitle', + }); + + const parsed = csf.parse(); + const stories = Object.entries(parsed._stories); + + const [componentId, storyId] = csfId.split('--'); + newStoryName = name && storyNameFromExport(name); + newStoryId = newStoryName && toId(componentId, newStoryName); + + // find the export_name for the id + const [storyName] = stories.find(([key, value]) => value.id.endsWith(`--${storyId}`)) || []; + if (!storyName) throw new Error(`Source story not found.`); + if (name && csf.getStoryExport(name)) throw new Error(`Story already exists.`); + + sourceStoryName = storyNameFromExport(storyName); + + const node = name + ? duplicateStoryWithNewName(parsed, storyName, name) + : csf.getStoryExport(storyName); + + // modify the AST node with the new args + updateArgsInCsfFile(node, args); + + // save the file + await writeCsf(csf, sourceFilePath); + + channel.emit(SAVE_STORY_RESPONSE, { + id, + success: true, + payload: { + csfId, newStoryId, newStoryName, sourceFileName, sourceStoryName, - } satisfies RequestSaveStoryResultPayload); - } catch (e: any) { - // sendTelemetryError(channel, e); - channel.emit(SAVE_STORY_RESULT, { - id, - success: false, - errorMessage: e.message, + }, + } satisfies SaveStoryResponse); + } catch (e: any) { + // sendTelemetryError(channel, e); + channel.emit(SAVE_STORY_RESPONSE, { + id, + success: false, + error: e.message, + payload: { + csfId, newStoryId, newStoryName, sourceFileName, sourceStoryName, - } satisfies RequestSaveStoryResultPayload); + }, + } satisfies SaveStoryResponse); - console.error(`Error writing to ${sourceFilePath}:`, e.stack || e.message || e.toString()); - } + console.error(`Error writing to ${sourceFilePath}:`, e.stack || e.message || e.toString()); } - ); + }); } diff --git a/code/ui/manager/src/globals/exports.ts b/code/ui/manager/src/globals/exports.ts index c0d38e4f8cbc..f76f146adca5 100644 --- a/code/ui/manager/src/globals/exports.ts +++ b/code/ui/manager/src/globals/exports.ts @@ -154,7 +154,7 @@ export default { 'RESET_STORY_ARGS', 'RESULT_WHATS_NEW_DATA', 'SAVE_STORY_REQUEST', - 'SAVE_STORY_RESULT', + 'SAVE_STORY_RESPONSE', 'SELECT_STORY', 'SET_CONFIG', 'SET_CURRENT_STORY', From 310aaf5aaffd0cdc14d2afe86340bb6f44aefbd2 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 16 Apr 2024 12:11:13 +0200 Subject: [PATCH 184/380] Bind this --- .../nextjs/src/export-mocks/headers/cookies.ts | 10 +++++----- .../nextjs/src/export-mocks/headers/headers.ts | 18 +++++++++--------- .../nextjs/yarn.lock | 8 ++++---- 3 files changed, 18 insertions(+), 18 deletions(-) diff --git a/code/frameworks/nextjs/src/export-mocks/headers/cookies.ts b/code/frameworks/nextjs/src/export-mocks/headers/cookies.ts index c3272dc0e335..3fc9fdc1ae59 100644 --- a/code/frameworks/nextjs/src/export-mocks/headers/cookies.ts +++ b/code/frameworks/nextjs/src/export-mocks/headers/cookies.ts @@ -8,15 +8,15 @@ import { RequestCookies } from 'next/dist/compiled/@edge-runtime/cookies'; import { headers } from '@storybook/nextjs/headers.mock'; class RequestCookiesMock extends RequestCookies { - get = fn(super.get).mockName('next/headers::get'); + get = fn(super.get.bind(this)).mockName('next/headers::get'); - getAll = fn(super.getAll).mockName('next/headers::cookies().getAll'); + getAll = fn(super.getAll.bind(this)).mockName('next/headers::cookies().getAll'); - has = fn(super.has).mockName('next/headers::cookies().has'); + has = fn(super.has.bind(this)).mockName('next/headers::cookies().has'); - set = fn(super.set).mockName('next/headers::cookies().set'); + set = fn(super.set.bind(this)).mockName('next/headers::cookies().set'); - delete = fn(super.delete).mockName('next/headers::cookies().delete'); + delete = fn(super.delete.bind(this)).mockName('next/headers::cookies().delete'); } let requestCookiesMock: RequestCookiesMock; diff --git a/code/frameworks/nextjs/src/export-mocks/headers/headers.ts b/code/frameworks/nextjs/src/export-mocks/headers/headers.ts index 02703265e583..d9eb5177b447 100644 --- a/code/frameworks/nextjs/src/export-mocks/headers/headers.ts +++ b/code/frameworks/nextjs/src/export-mocks/headers/headers.ts @@ -7,23 +7,23 @@ class HeadersAdapterMock extends HeadersAdapter { super({}); } - append = fn(super.append).mockName('next/headers::headers().append'); + append = fn(super.append.bind(this)).mockName('next/headers::headers().append'); - delete = fn(super.delete).mockName('next/headers::headers().delete'); + delete = fn(super.delete.bind(this)).mockName('next/headers::headers().delete'); - get = fn(super.get).mockName('next/headers::headers().get'); + get = fn(super.get.bind(this)).mockName('next/headers::headers().get'); - has = fn(super.has).mockName('next/headers::headers().has'); + has = fn(super.has.bind(this)).mockName('next/headers::headers().has'); - set = fn(super.set).mockName('next/headers::headers().set'); + set = fn(super.set.bind(this)).mockName('next/headers::headers().set'); - forEach = fn(super.forEach).mockName('next/headers::headers().forEach'); + forEach = fn(super.forEach.bind(this)).mockName('next/headers::headers().forEach'); - entries = fn(super.entries).mockName('next/headers::headers().entries'); + entries = fn(super.entries.bind(this)).mockName('next/headers::headers().entries'); - keys = fn(super.keys).mockName('next/headers::headers().keys'); + keys = fn(super.keys.bind(this)).mockName('next/headers::headers().keys'); - values = fn(super.values).mockName('next/headers::headers().values'); + values = fn(super.values.bind(this)).mockName('next/headers::headers().values'); } let headersAdapterMock: HeadersAdapterMock; diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock b/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock index e0efcfd9d6d9..71f8b86f9807 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock @@ -3167,7 +3167,7 @@ __metadata: "@storybook/nextjs@file:../../../code/frameworks/nextjs::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.7 - resolution: "@storybook/nextjs@file:../../../code/frameworks/nextjs#../../../code/frameworks/nextjs::hash=246816&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/nextjs@file:../../../code/frameworks/nextjs#../../../code/frameworks/nextjs::hash=28a407&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@babel/core": "npm:^7.23.2" "@babel/plugin-syntax-bigint": "npm:^7.8.3" @@ -3227,7 +3227,7 @@ __metadata: optional: true webpack: optional: true - checksum: 10/71732cc220e381872106dab3824883f4a77dcbb60901c939f58599bf92f156564a34fe646ce1159c307702be03cf532fbffaa1a515e271a6623f340d19000283 + checksum: 10/fd9a469074e0b7aba065a0b0f81f272e75e708370362ff047a653d9a19c5b753fcfab8b2f30b3f9ae226a12739b7b11054358afe4707e8d7185b9dca11c75a7c languageName: node linkType: hard @@ -3326,7 +3326,7 @@ __metadata: "@storybook/react@file:../../../code/renderers/react::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.7 - resolution: "@storybook/react@file:../../../code/renderers/react#../../../code/renderers/react::hash=cd73fa&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/react@file:../../../code/renderers/react#../../../code/renderers/react::hash=faf3f4&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" "@storybook/docs-tools": "workspace:*" @@ -3356,7 +3356,7 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 10/834084c0092a8b179f7048c1111308b6a2381cf3ee119372ed2940833b02e13577b5bc334c3f14c3224bd2d8b786939a74fbaf4dea6e8423ff610b34047412b4 + checksum: 10/f89fb42e87e17377af48b57b337dd4708053ae83d8558a0ae35af479b1faa6d7206b07934e18113707febed5ebcf94510caa89b8c92bc87cf7b5391296bbfef2 languageName: node linkType: hard From b97b1e1b7ee54df600028e63001524dee2c20a0c Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Tue, 16 Apr 2024 12:37:51 +0200 Subject: [PATCH 185/380] Fix type error --- code/addons/controls/src/SaveFromControls.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/addons/controls/src/SaveFromControls.stories.tsx b/code/addons/controls/src/SaveFromControls.stories.tsx index 7262ad9d7e92..ef39d4ead289 100644 --- a/code/addons/controls/src/SaveFromControls.stories.tsx +++ b/code/addons/controls/src/SaveFromControls.stories.tsx @@ -47,7 +47,7 @@ export const Created: Story = { export const CreatingFailed: Story = { args: { - createStory: () => Promise.reject(new Error('Story already exists.')), + createStory: () => Promise.reject(new Error('Story already exists.')), }, play: async (context) => { await Creating.play(context); From 0b243bd26d08c2b8f5aa32df503403d1baf93563 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 16 Apr 2024 13:02:34 +0200 Subject: [PATCH 186/380] Update snapshot --- .../nextjs/stories/__snapshots__/portable-stories.test.tsx.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/__snapshots__/portable-stories.test.tsx.snap b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/__snapshots__/portable-stories.test.tsx.snap index 2b8af2b9cd59..a22fa06a8ab3 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/__snapshots__/portable-stories.test.tsx.snap +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/__snapshots__/portable-stories.test.tsx.snap @@ -794,7 +794,7 @@ exports[`renders nextHeaderStories stories renders Default 1`] = ` - firstName=Jane; lastName=Doe + firstName=Jane; ; lastName=Doe;

Date: Tue, 16 Apr 2024 13:11:55 +0200 Subject: [PATCH 187/380] Fix name --- code/frameworks/nextjs/src/export-mocks/headers/cookies.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/frameworks/nextjs/src/export-mocks/headers/cookies.ts b/code/frameworks/nextjs/src/export-mocks/headers/cookies.ts index 3fc9fdc1ae59..3d84ecba3885 100644 --- a/code/frameworks/nextjs/src/export-mocks/headers/cookies.ts +++ b/code/frameworks/nextjs/src/export-mocks/headers/cookies.ts @@ -8,7 +8,7 @@ import { RequestCookies } from 'next/dist/compiled/@edge-runtime/cookies'; import { headers } from '@storybook/nextjs/headers.mock'; class RequestCookiesMock extends RequestCookies { - get = fn(super.get.bind(this)).mockName('next/headers::get'); + get = fn(super.get.bind(this)).mockName('next/headers::cookies().get'); getAll = fn(super.getAll.bind(this)).mockName('next/headers::cookies().getAll'); From 07e705bf5079a7a16ad7941483acc4b043e3ff8c Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 16 Apr 2024 13:18:56 +0200 Subject: [PATCH 188/380] Fix initialization of SaveFromControls in common-preset.ts --- code/lib/core-server/src/presets/common-preset.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/code/lib/core-server/src/presets/common-preset.ts b/code/lib/core-server/src/presets/common-preset.ts index 5cbe1737dbca..7c11984721be 100644 --- a/code/lib/core-server/src/presets/common-preset.ts +++ b/code/lib/core-server/src/presets/common-preset.ts @@ -239,8 +239,7 @@ export const experimental_serverChannel = async ( const coreOptions = await options.presets.apply('core'); initializeWhatsNew(channel, options, coreOptions); - initializeSaveFromControls(channel, options, coreOptions); - + initializeSaveFromControls(channel); initFileSearchChannel(channel, options); initCreateNewStoryChannel(channel, options); From b51db447ed09e16d19cc734787552680eb42b343 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 16 Apr 2024 14:08:31 +0200 Subject: [PATCH 189/380] Hide some junk of next for nwo --- code/addons/actions/src/loaders.ts | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/code/addons/actions/src/loaders.ts b/code/addons/actions/src/loaders.ts index d49a048da231..a1fff870b7be 100644 --- a/code/addons/actions/src/loaders.ts +++ b/code/addons/actions/src/loaders.ts @@ -18,7 +18,19 @@ const logActionsWhenMockCalled: LoaderFunction = (context) => { typeof global.__STORYBOOK_TEST_ON_MOCK_CALL__ === 'function' ) { const onMockCall = global.__STORYBOOK_TEST_ON_MOCK_CALL__ as typeof onMockCallType; - onMockCall((mock, args) => action(mock.getMockName())(args)); + onMockCall((mock, args) => { + const name = mock.getMockName(); + + // TODO: Make this a configurable API in 8.2 + if ( + !/^next\/.*::/.test(name) || + ((name.startsWith('next/headers::cookies()') || + name.startsWith('next/headers::headers()')) && + (name.endsWith('set') || name.endsWith('delete'))) + ) { + action(name)(args); + } + }); subscribed = true; } }; From a1d631b8748f7d08b44f97a67c0953aef9f1af3a Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 16 Apr 2024 14:13:47 +0200 Subject: [PATCH 190/380] Update code/frameworks/nextjs/src/export-mocks/navigation/index.ts Co-authored-by: Yann Braga --- code/frameworks/nextjs/src/export-mocks/navigation/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/frameworks/nextjs/src/export-mocks/navigation/index.ts b/code/frameworks/nextjs/src/export-mocks/navigation/index.ts index fbbeb8ced25c..61344102c242 100644 --- a/code/frameworks/nextjs/src/export-mocks/navigation/index.ts +++ b/code/frameworks/nextjs/src/export-mocks/navigation/index.ts @@ -77,7 +77,7 @@ export const useServerInsertedHTML = fn(originalNavigation.useServerInsertedHTML ); export const notFound = fn(originalNavigation.notFound).mockName('next/navigation::notFound'); export const permanentRedirect = fn(originalNavigation.permanentRedirect).mockName( - 'permanentRedirect' + 'next/navigation::permanentRedirect' ); // Params, not exported by Next.js, is manually declared to avoid inference issues. From 2beb7ba087f771ee85d1126d5cc025359853b2d3 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 16 Apr 2024 14:13:53 +0200 Subject: [PATCH 191/380] Update code/frameworks/nextjs/src/export-mocks/navigation/index.ts Co-authored-by: Yann Braga --- code/frameworks/nextjs/src/export-mocks/navigation/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/frameworks/nextjs/src/export-mocks/navigation/index.ts b/code/frameworks/nextjs/src/export-mocks/navigation/index.ts index 61344102c242..2973c65120ed 100644 --- a/code/frameworks/nextjs/src/export-mocks/navigation/index.ts +++ b/code/frameworks/nextjs/src/export-mocks/navigation/index.ts @@ -66,7 +66,7 @@ export const usePathname = fn(originalNavigation.usePathname).mockName( 'next/navigation::usePathname' ); export const useSelectedLayoutSegment = fn(originalNavigation.useSelectedLayoutSegment).mockName( - 'useSelectedLayoutSegment' + 'next/navigation::useSelectedLayoutSegment' ); export const useSelectedLayoutSegments = fn(originalNavigation.useSelectedLayoutSegments).mockName( 'useSelectedLayoutSegments' From d83691a92415159962ce34fef32ebb6fef3d6cba Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 16 Apr 2024 14:14:02 +0200 Subject: [PATCH 192/380] Update code/frameworks/nextjs/src/export-mocks/navigation/index.ts Co-authored-by: Yann Braga --- code/frameworks/nextjs/src/export-mocks/navigation/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/frameworks/nextjs/src/export-mocks/navigation/index.ts b/code/frameworks/nextjs/src/export-mocks/navigation/index.ts index 2973c65120ed..63458b0fc927 100644 --- a/code/frameworks/nextjs/src/export-mocks/navigation/index.ts +++ b/code/frameworks/nextjs/src/export-mocks/navigation/index.ts @@ -73,7 +73,7 @@ export const useSelectedLayoutSegments = fn(originalNavigation.useSelectedLayout ); export const useRouter = fn(originalNavigation.useRouter).mockName('next/navigation::useRouter'); export const useServerInsertedHTML = fn(originalNavigation.useServerInsertedHTML).mockName( - 'useServerInsertedHTML' + 'next/navigation::useServerInsertedHTML' ); export const notFound = fn(originalNavigation.notFound).mockName('next/navigation::notFound'); export const permanentRedirect = fn(originalNavigation.permanentRedirect).mockName( From 1aa833d1a3cd079433f004d8f3f464b2579eb3ab Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 16 Apr 2024 14:14:07 +0200 Subject: [PATCH 193/380] Update code/frameworks/nextjs/src/export-mocks/navigation/index.ts Co-authored-by: Yann Braga --- code/frameworks/nextjs/src/export-mocks/navigation/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/frameworks/nextjs/src/export-mocks/navigation/index.ts b/code/frameworks/nextjs/src/export-mocks/navigation/index.ts index 63458b0fc927..dd9e9a692e6f 100644 --- a/code/frameworks/nextjs/src/export-mocks/navigation/index.ts +++ b/code/frameworks/nextjs/src/export-mocks/navigation/index.ts @@ -69,7 +69,7 @@ export const useSelectedLayoutSegment = fn(originalNavigation.useSelectedLayoutS 'next/navigation::useSelectedLayoutSegment' ); export const useSelectedLayoutSegments = fn(originalNavigation.useSelectedLayoutSegments).mockName( - 'useSelectedLayoutSegments' + 'next/navigation::useSelectedLayoutSegments' ); export const useRouter = fn(originalNavigation.useRouter).mockName('next/navigation::useRouter'); export const useServerInsertedHTML = fn(originalNavigation.useServerInsertedHTML).mockName( From 8b6bbbfefcd640434944a2d478e258ad6b54a1cd Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 16 Apr 2024 14:19:52 +0200 Subject: [PATCH 194/380] Hide some junk of next for now --- code/addons/actions/src/loaders.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/code/addons/actions/src/loaders.ts b/code/addons/actions/src/loaders.ts index a1fff870b7be..7f279bba5775 100644 --- a/code/addons/actions/src/loaders.ts +++ b/code/addons/actions/src/loaders.ts @@ -24,6 +24,8 @@ const logActionsWhenMockCalled: LoaderFunction = (context) => { // TODO: Make this a configurable API in 8.2 if ( !/^next\/.*::/.test(name) || + name.startsWith('next/router::useRouter()') || + name.startsWith('next/navigation::useRouter()') || ((name.startsWith('next/headers::cookies()') || name.startsWith('next/headers::headers()')) && (name.endsWith('set') || name.endsWith('delete'))) From 8dbd04c4c73b6a55fc9e77b129435fc8fde0e7be Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 16 Apr 2024 15:09:15 +0200 Subject: [PATCH 195/380] Show redirect and next/cache spies --- code/addons/actions/src/loaders.ts | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/code/addons/actions/src/loaders.ts b/code/addons/actions/src/loaders.ts index 7f279bba5775..eebb09acb71b 100644 --- a/code/addons/actions/src/loaders.ts +++ b/code/addons/actions/src/loaders.ts @@ -24,11 +24,16 @@ const logActionsWhenMockCalled: LoaderFunction = (context) => { // TODO: Make this a configurable API in 8.2 if ( !/^next\/.*::/.test(name) || - name.startsWith('next/router::useRouter()') || - name.startsWith('next/navigation::useRouter()') || - ((name.startsWith('next/headers::cookies()') || - name.startsWith('next/headers::headers()')) && - (name.endsWith('set') || name.endsWith('delete'))) + [ + 'next/router::useRouter()', + 'next/navigation::useRouter()', + 'next/navigation::redirect', + 'next/cache::', + 'next/headers::cookies().set', + 'next/headers::cookies().delete', + 'next/headers::headers().set', + 'next/headers::headers().delete', + ].some((prefix) => name.startsWith(prefix)) ) { action(name)(args); } From 69324cf9171ca473d98038a2f66609d16841e378 Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Tue, 16 Apr 2024 12:45:18 +0200 Subject: [PATCH 196/380] Also reset args when updating existing story --- code/addons/controls/src/manager.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/code/addons/controls/src/manager.tsx b/code/addons/controls/src/manager.tsx index b1f60e015a72..5d9b6eb19cd6 100644 --- a/code/addons/controls/src/manager.tsx +++ b/code/addons/controls/src/manager.tsx @@ -112,11 +112,9 @@ addons.register(ADDON_ID, (api) => { const { newStoryId, newStoryName, sourceStoryName } = payload; - if (newStoryId) { - const data = api.getCurrentStoryData(); - if (data.type === 'story') api.resetStoryArgs(data); - selectNewStory(api.selectStory, newStoryId); - } + const data = api.getCurrentStoryData(); + if (data.type === 'story') api.resetStoryArgs(data); + if (newStoryId) selectNewStory(api.selectStory, newStoryId); api.addNotification({ id: 'save-story-success', From ebe1fe8c2945aa12f214e8525ea9771b62b04102 Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Tue, 16 Apr 2024 16:07:39 +0200 Subject: [PATCH 197/380] Rename SaveFromControls to SaveStory and add telemetry --- code/addons/controls/src/ControlsPanel.tsx | 4 +- ...rols.stories.tsx => SaveStory.stories.tsx} | 8 +-- .../{SaveFromControls.tsx => SaveStory.tsx} | 4 +- .../core-server/src/presets/common-preset.ts | 5 +- .../duplicate-story-with-new-name.test.ts | 0 .../duplicate-story-with-new-name.ts | 0 .../getDiff.ts | 0 .../mocks/csf-variances.stories.tsx | 0 .../mocks/data-variances.stories.tsx | 0 .../mocks/export-variances.stories.tsx | 0 .../mocks/typescript-constructs.stories.tsx | 0 .../save-story.ts} | 54 ++++++++++++------- .../update-args-in-csf-file.test.ts | 0 .../update-args-in-csf-file.ts | 0 .../valueToAST.ts | 0 code/lib/telemetry/src/types.ts | 3 +- 16 files changed, 49 insertions(+), 29 deletions(-) rename code/addons/controls/src/{SaveFromControls.stories.tsx => SaveStory.stories.tsx} (91%) rename code/addons/controls/src/{SaveFromControls.tsx => SaveStory.tsx} (97%) rename code/lib/core-server/src/utils/{save-from-controls => save-story}/duplicate-story-with-new-name.test.ts (100%) rename code/lib/core-server/src/utils/{save-from-controls => save-story}/duplicate-story-with-new-name.ts (100%) rename code/lib/core-server/src/utils/{save-from-controls => save-story}/getDiff.ts (100%) rename code/lib/core-server/src/utils/{save-from-controls => save-story}/mocks/csf-variances.stories.tsx (100%) rename code/lib/core-server/src/utils/{save-from-controls => save-story}/mocks/data-variances.stories.tsx (100%) rename code/lib/core-server/src/utils/{save-from-controls => save-story}/mocks/export-variances.stories.tsx (100%) rename code/lib/core-server/src/utils/{save-from-controls => save-story}/mocks/typescript-constructs.stories.tsx (100%) rename code/lib/core-server/src/utils/{save-from-controls/save-from-controls.ts => save-story/save-story.ts} (65%) rename code/lib/core-server/src/utils/{save-from-controls => save-story}/update-args-in-csf-file.test.ts (100%) rename code/lib/core-server/src/utils/{save-from-controls => save-story}/update-args-in-csf-file.ts (100%) rename code/lib/core-server/src/utils/{save-from-controls => save-story}/valueToAST.ts (100%) diff --git a/code/addons/controls/src/ControlsPanel.tsx b/code/addons/controls/src/ControlsPanel.tsx index 6a2b678444c1..3541d8aeb2da 100644 --- a/code/addons/controls/src/ControlsPanel.tsx +++ b/code/addons/controls/src/ControlsPanel.tsx @@ -13,7 +13,7 @@ import { styled } from '@storybook/theming'; import type { ArgTypes } from '@storybook/types'; import { PARAM_KEY } from './constants'; -import { SaveFromControls } from './SaveFromControls'; +import { SaveStory } from './SaveStory'; // Remove undefined values (top-level only) const clean = (obj: { [key: string]: any }) => @@ -88,7 +88,7 @@ export const ControlsPanel = ({ saveStory, createStory }: ControlsPanelProps) => isLoading={isLoading} /> {hasControls && hasUpdatedArgs && global.CONFIG_TYPE === 'DEVELOPMENT' && ( - + )} ); diff --git a/code/addons/controls/src/SaveFromControls.stories.tsx b/code/addons/controls/src/SaveStory.stories.tsx similarity index 91% rename from code/addons/controls/src/SaveFromControls.stories.tsx rename to code/addons/controls/src/SaveStory.stories.tsx index ef39d4ead289..d66b952dd6ca 100644 --- a/code/addons/controls/src/SaveFromControls.stories.tsx +++ b/code/addons/controls/src/SaveStory.stories.tsx @@ -1,12 +1,11 @@ import { action } from '@storybook/addon-actions'; import type { Meta, StoryObj } from '@storybook/react'; -import { SaveFromControls } from './SaveFromControls'; +import { SaveStory } from './SaveStory'; import { expect, fireEvent, fn, userEvent, waitFor, within } from '@storybook/test'; const meta = { - component: SaveFromControls, - title: 'Components/ArgsTable/SaveFromControls', + component: SaveStory, args: { saveStory: (...args) => Promise.resolve(fn(action('saveStory'))(...args)), createStory: (...args) => Promise.resolve(fn(action('createStory'))(...args)), @@ -15,7 +14,7 @@ const meta = { parameters: { layout: 'fullscreen', }, -} satisfies Meta; +} satisfies Meta; export default meta; type Story = StoryObj; @@ -47,6 +46,7 @@ export const Created: Story = { export const CreatingFailed: Story = { args: { + // eslint-disable-next-line local-rules/no-uncategorized-errors createStory: () => Promise.reject(new Error('Story already exists.')), }, play: async (context) => { diff --git a/code/addons/controls/src/SaveFromControls.tsx b/code/addons/controls/src/SaveStory.tsx similarity index 97% rename from code/addons/controls/src/SaveFromControls.tsx rename to code/addons/controls/src/SaveStory.tsx index 7d631fdd098b..8a7368ba9d6c 100644 --- a/code/addons/controls/src/SaveFromControls.tsx +++ b/code/addons/controls/src/SaveStory.tsx @@ -83,13 +83,13 @@ const ModalInput = styled(Form.Input)(({ theme }) => ({ }, })); -type SaveFromControlsProps = { +type SaveStoryProps = { saveStory: () => Promise; createStory: (storyName: string) => Promise; resetArgs: () => void; }; -export const SaveFromControls = ({ saveStory, createStory, resetArgs }: SaveFromControlsProps) => { +export const SaveStory = ({ saveStory, createStory, resetArgs }: SaveStoryProps) => { const inputRef = React.useRef(null); const [saving, setSaving] = React.useState(false); const [creating, setCreating] = React.useState(false); diff --git a/code/lib/core-server/src/presets/common-preset.ts b/code/lib/core-server/src/presets/common-preset.ts index 7c11984721be..2450812dd8d9 100644 --- a/code/lib/core-server/src/presets/common-preset.ts +++ b/code/lib/core-server/src/presets/common-preset.ts @@ -23,7 +23,7 @@ import type { Channel } from '@storybook/channels'; import { parseStaticDir } from '../utils/server-statics'; import { defaultStaticDirs } from '../utils/constants'; import { initializeWhatsNew, type OptionsWithRequiredCache } from '../utils/whats-new'; -import { initializeSaveFromControls } from '../utils/save-from-controls/save-from-controls'; +import { initializeSaveStory } from '../utils/save-story/save-story'; import { initFileSearchChannel } from '../server-channel/file-search-channel'; import { initCreateNewStoryChannel } from '../server-channel/create-new-story-channel'; @@ -239,7 +239,8 @@ export const experimental_serverChannel = async ( const coreOptions = await options.presets.apply('core'); initializeWhatsNew(channel, options, coreOptions); - initializeSaveFromControls(channel); + initializeSaveStory(channel, options, coreOptions); + initFileSearchChannel(channel, options); initCreateNewStoryChannel(channel, options); diff --git a/code/lib/core-server/src/utils/save-from-controls/duplicate-story-with-new-name.test.ts b/code/lib/core-server/src/utils/save-story/duplicate-story-with-new-name.test.ts similarity index 100% rename from code/lib/core-server/src/utils/save-from-controls/duplicate-story-with-new-name.test.ts rename to code/lib/core-server/src/utils/save-story/duplicate-story-with-new-name.test.ts diff --git a/code/lib/core-server/src/utils/save-from-controls/duplicate-story-with-new-name.ts b/code/lib/core-server/src/utils/save-story/duplicate-story-with-new-name.ts similarity index 100% rename from code/lib/core-server/src/utils/save-from-controls/duplicate-story-with-new-name.ts rename to code/lib/core-server/src/utils/save-story/duplicate-story-with-new-name.ts diff --git a/code/lib/core-server/src/utils/save-from-controls/getDiff.ts b/code/lib/core-server/src/utils/save-story/getDiff.ts similarity index 100% rename from code/lib/core-server/src/utils/save-from-controls/getDiff.ts rename to code/lib/core-server/src/utils/save-story/getDiff.ts diff --git a/code/lib/core-server/src/utils/save-from-controls/mocks/csf-variances.stories.tsx b/code/lib/core-server/src/utils/save-story/mocks/csf-variances.stories.tsx similarity index 100% rename from code/lib/core-server/src/utils/save-from-controls/mocks/csf-variances.stories.tsx rename to code/lib/core-server/src/utils/save-story/mocks/csf-variances.stories.tsx diff --git a/code/lib/core-server/src/utils/save-from-controls/mocks/data-variances.stories.tsx b/code/lib/core-server/src/utils/save-story/mocks/data-variances.stories.tsx similarity index 100% rename from code/lib/core-server/src/utils/save-from-controls/mocks/data-variances.stories.tsx rename to code/lib/core-server/src/utils/save-story/mocks/data-variances.stories.tsx diff --git a/code/lib/core-server/src/utils/save-from-controls/mocks/export-variances.stories.tsx b/code/lib/core-server/src/utils/save-story/mocks/export-variances.stories.tsx similarity index 100% rename from code/lib/core-server/src/utils/save-from-controls/mocks/export-variances.stories.tsx rename to code/lib/core-server/src/utils/save-story/mocks/export-variances.stories.tsx diff --git a/code/lib/core-server/src/utils/save-from-controls/mocks/typescript-constructs.stories.tsx b/code/lib/core-server/src/utils/save-story/mocks/typescript-constructs.stories.tsx similarity index 100% rename from code/lib/core-server/src/utils/save-from-controls/mocks/typescript-constructs.stories.tsx rename to code/lib/core-server/src/utils/save-story/mocks/typescript-constructs.stories.tsx diff --git a/code/lib/core-server/src/utils/save-from-controls/save-from-controls.ts b/code/lib/core-server/src/utils/save-story/save-story.ts similarity index 65% rename from code/lib/core-server/src/utils/save-from-controls/save-from-controls.ts rename to code/lib/core-server/src/utils/save-story/save-story.ts index 44f1b4c1ecaf..5ddb8f8e0fd6 100644 --- a/code/lib/core-server/src/utils/save-from-controls/save-from-controls.ts +++ b/code/lib/core-server/src/utils/save-story/save-story.ts @@ -7,7 +7,9 @@ import { readCsf, writeCsf } from '@storybook/csf-tools'; import { basename, join } from 'path'; import { updateArgsInCsfFile } from './update-args-in-csf-file'; import { duplicateStoryWithNewName } from './duplicate-story-with-new-name'; -// import { sendTelemetryError } from '../withTelemetry'; +import type { CoreConfig, Options } from '@storybook/types'; +import { telemetry } from '@storybook/telemetry'; +import { logger } from '@storybook/node-logger'; interface SaveStoryRequest { id: string; @@ -32,7 +34,9 @@ type SaveStoryResponse = ( }; }; -export function initializeSaveFromControls(channel: Channel) { +class SaveStoryError extends Error {} + +export function initializeSaveStory(channel: Channel, options: Options, coreConfig: CoreConfig) { channel.on(SAVE_STORY_REQUEST, async ({ id, payload }: SaveStoryRequest) => { const { csfId, importPath, args, name } = payload; @@ -46,7 +50,6 @@ export function initializeSaveFromControls(channel: Channel) { sourceFileName = basename(importPath); sourceFilePath = join(process.cwd(), importPath); - // open the story file const csf = await readCsf(sourceFilePath, { makeTitle: (userTitle: string) => userTitle || 'myTitle', }); @@ -58,21 +61,20 @@ export function initializeSaveFromControls(channel: Channel) { newStoryName = name && storyNameFromExport(name); newStoryId = newStoryName && toId(componentId, newStoryName); - // find the export_name for the id const [storyName] = stories.find(([key, value]) => value.id.endsWith(`--${storyId}`)) || []; - if (!storyName) throw new Error(`Source story not found.`); - if (name && csf.getStoryExport(name)) throw new Error(`Story already exists.`); + if (!storyName) { + throw new SaveStoryError(`Source story not found.`); + } + if (name && csf.getStoryExport(name)) { + throw new SaveStoryError(`Story already exists.`); + } sourceStoryName = storyNameFromExport(storyName); - const node = name - ? duplicateStoryWithNewName(parsed, storyName, name) - : csf.getStoryExport(storyName); - - // modify the AST node with the new args - updateArgsInCsfFile(node, args); - - // save the file + await updateArgsInCsfFile( + name ? duplicateStoryWithNewName(parsed, storyName, name) : csf.getStoryExport(storyName), + args + ); await writeCsf(csf, sourceFilePath); channel.emit(SAVE_STORY_RESPONSE, { @@ -86,12 +88,18 @@ export function initializeSaveFromControls(channel: Channel) { sourceStoryName, }, } satisfies SaveStoryResponse); - } catch (e: any) { - // sendTelemetryError(channel, e); + + if (!coreConfig.disableTelemetry) { + await telemetry('save-story', { + action: name ? 'createStory' : 'updateStory', + success: true, + }); + } + } catch (error: any) { channel.emit(SAVE_STORY_RESPONSE, { id, success: false, - error: e.message, + error: error.message, payload: { csfId, newStoryId, @@ -101,7 +109,17 @@ export function initializeSaveFromControls(channel: Channel) { }, } satisfies SaveStoryResponse); - console.error(`Error writing to ${sourceFilePath}:`, e.stack || e.message || e.toString()); + logger.error( + `Error writing to ${sourceFilePath}:\n${error.stack || error.message || error.toString()}` + ); + + if (!coreConfig.disableTelemetry && !(error instanceof SaveStoryError)) { + await telemetry('save-story', { + action: name ? 'createStory' : 'updateStory', + success: false, + error, + }); + } } }); } diff --git a/code/lib/core-server/src/utils/save-from-controls/update-args-in-csf-file.test.ts b/code/lib/core-server/src/utils/save-story/update-args-in-csf-file.test.ts similarity index 100% rename from code/lib/core-server/src/utils/save-from-controls/update-args-in-csf-file.test.ts rename to code/lib/core-server/src/utils/save-story/update-args-in-csf-file.test.ts diff --git a/code/lib/core-server/src/utils/save-from-controls/update-args-in-csf-file.ts b/code/lib/core-server/src/utils/save-story/update-args-in-csf-file.ts similarity index 100% rename from code/lib/core-server/src/utils/save-from-controls/update-args-in-csf-file.ts rename to code/lib/core-server/src/utils/save-story/update-args-in-csf-file.ts diff --git a/code/lib/core-server/src/utils/save-from-controls/valueToAST.ts b/code/lib/core-server/src/utils/save-story/valueToAST.ts similarity index 100% rename from code/lib/core-server/src/utils/save-from-controls/valueToAST.ts rename to code/lib/core-server/src/utils/save-story/valueToAST.ts diff --git a/code/lib/telemetry/src/types.ts b/code/lib/telemetry/src/types.ts index 846e7adb9556..4d45b59ea21d 100644 --- a/code/lib/telemetry/src/types.ts +++ b/code/lib/telemetry/src/types.ts @@ -16,7 +16,8 @@ export type EventType = | 'error-metadata' | 'version-update' | 'core-config' - | 'remove'; + | 'remove' + | 'save-story'; export interface Dependency { version: string | undefined; From e4e498618ab00e28e0d2742527ec32efeea3f157 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 16 Apr 2024 16:39:39 +0200 Subject: [PATCH 198/380] add @storybook/core-events dep to docs-tools --- code/lib/docs-tools/package.json | 1 + code/yarn.lock | 1 + 2 files changed, 2 insertions(+) diff --git a/code/lib/docs-tools/package.json b/code/lib/docs-tools/package.json index 730a861c26e0..087113cd0229 100644 --- a/code/lib/docs-tools/package.json +++ b/code/lib/docs-tools/package.json @@ -45,6 +45,7 @@ }, "dependencies": { "@storybook/core-common": "workspace:*", + "@storybook/core-events": "workspace:*", "@storybook/preview-api": "workspace:*", "@storybook/types": "workspace:*", "@types/doctrine": "^0.0.3", diff --git a/code/yarn.lock b/code/yarn.lock index 60f10be0f8e8..9af4e4c2f3fd 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5903,6 +5903,7 @@ __metadata: dependencies: "@babel/preset-react": "npm:^7.23.3" "@storybook/core-common": "workspace:*" + "@storybook/core-events": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/types": "workspace:*" "@types/doctrine": "npm:^0.0.3" From cd3ccac93286d7c93f15b784846bdd04fe5d2bb8 Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Tue, 16 Apr 2024 17:03:33 +0200 Subject: [PATCH 199/380] Improve error display in modal --- .../addons/controls/src/SaveStory.stories.tsx | 20 +++---------- .../src/components/Modal/Modal.stories.tsx | 5 +--- .../src/components/Modal/Modal.styled.tsx | 29 ++++++++++++++++--- .../src/components/form/form.stories.tsx | 26 +++++++++++++++++ 4 files changed, 56 insertions(+), 24 deletions(-) diff --git a/code/addons/controls/src/SaveStory.stories.tsx b/code/addons/controls/src/SaveStory.stories.tsx index d66b952dd6ca..948ebf87fb0e 100644 --- a/code/addons/controls/src/SaveStory.stories.tsx +++ b/code/addons/controls/src/SaveStory.stories.tsx @@ -7,8 +7,8 @@ import { expect, fireEvent, fn, userEvent, waitFor, within } from '@storybook/te const meta = { component: SaveStory, args: { - saveStory: (...args) => Promise.resolve(fn(action('saveStory'))(...args)), - createStory: (...args) => Promise.resolve(fn(action('createStory'))(...args)), + saveStory: fn((...args) => Promise.resolve(action('saveStory')(...args))), + createStory: fn((...args) => Promise.resolve(action('createStory')(...args))), resetArgs: fn(action('resetArgs')), }, parameters: { @@ -47,19 +47,7 @@ export const Created: Story = { export const CreatingFailed: Story = { args: { // eslint-disable-next-line local-rules/no-uncategorized-errors - createStory: () => Promise.reject(new Error('Story already exists.')), - }, - play: async (context) => { - await Creating.play(context); - - await waitFor(async () => { - const dialog = await within(document.body).findByRole('dialog'); - const input = await within(dialog).findByRole('textbox'); - await userEvent.type(input, 'MyNewStory'); - const submitButton = await within(dialog).findByRole('button', { name: /Create/i }); - await userEvent.click(submitButton); - }); - - await expect(context.args.createStory).toHaveBeenCalledWith('MyNewStory'); + createStory: fn((...args) => Promise.reject(new Error('Story already exists.'))), }, + play: Created.play, }; diff --git a/code/ui/components/src/components/Modal/Modal.stories.tsx b/code/ui/components/src/components/Modal/Modal.stories.tsx index fa4a72fd1d88..8e825c28d95a 100644 --- a/code/ui/components/src/components/Modal/Modal.stories.tsx +++ b/code/ui/components/src/components/Modal/Modal.stories.tsx @@ -152,10 +152,7 @@ export const StyledComponents = { - - Oops. Something went wrong. - - + Oops. Something went wrong. ), }; diff --git a/code/ui/components/src/components/Modal/Modal.styled.tsx b/code/ui/components/src/components/Modal/Modal.styled.tsx index 04ac8c7f573d..12a96e81b194 100644 --- a/code/ui/components/src/components/Modal/Modal.styled.tsx +++ b/code/ui/components/src/components/Modal/Modal.styled.tsx @@ -1,5 +1,6 @@ import { keyframes, styled } from '@storybook/theming'; import * as Dialog from '@radix-ui/react-dialog'; +import type { ComponentProps } from 'react'; import React from 'react'; import { IconButton } from '../IconButton/IconButton'; @@ -10,6 +11,11 @@ const fadeIn = keyframes({ to: { opacity: 1 }, }); +const expand = keyframes({ + from: { maxHeight: 0 }, + to: {}, +}); + const zoomIn = keyframes({ from: { opacity: 0, @@ -106,10 +112,25 @@ export const Actions = styled.div({ gap: 8, }); -export const Error = styled(Row)(({ theme }) => ({ - alignItems: 'center', - padding: '8px 16px', +export const ErrorWrapper = styled.div(({ theme }) => ({ + maxHeight: 100, + overflow: 'auto', + animation: `${expand} 300ms, ${fadeIn} 300ms`, backgroundColor: theme.background.critical, - fontSize: theme.typography.size.s2, color: theme.color.lightest, + fontSize: theme.typography.size.s2, + + '& > div': { + position: 'relative', + padding: '8px 16px', + }, })); + +export const Error = ({ + children, + ...props +}: { children: React.ReactNode } & ComponentProps) => ( + +

{children}
+ +); diff --git a/code/ui/components/src/components/form/form.stories.tsx b/code/ui/components/src/components/form/form.stories.tsx index fb6070100d41..fc472dfdaa84 100644 --- a/code/ui/components/src/components/form/form.stories.tsx +++ b/code/ui/components/src/components/form/form.stories.tsx @@ -121,3 +121,29 @@ export const Input = { }, }, }; + +export const Field2 = { + args: { + label: 'field', + }, + + render: (args: any) => ( + + + + + + + + ), + + argTypes: { + label: { + defaultValue: 'label', + + control: { + type: 'text', + }, + }, + }, +}; From cc538819f1c9552e03475b195fd7ed3ccd690a72 Mon Sep 17 00:00:00 2001 From: Reuben Ellis Date: Tue, 16 Apr 2024 09:42:44 -0600 Subject: [PATCH 200/380] Update error to preview error instead --- .../__snapshots__/preview-errors.test.ts.snap | 10 ++++++++++ .../src/errors/preview-errors.test.ts | 20 +++++++++++++++++++ .../core-events/src/errors/preview-errors.ts | 19 ++++++++++++++++++ .../src/errors/server-errors.test.ts | 20 +------------------ .../core-events/src/errors/server-errors.ts | 17 ---------------- .../src/argTypes/convert/flow/convert.ts | 4 ++-- .../argTypes/convert/typescript/convert.ts | 4 ++-- 7 files changed, 54 insertions(+), 40 deletions(-) create mode 100644 code/lib/core-events/src/errors/__snapshots__/preview-errors.test.ts.snap create mode 100644 code/lib/core-events/src/errors/preview-errors.test.ts diff --git a/code/lib/core-events/src/errors/__snapshots__/preview-errors.test.ts.snap b/code/lib/core-events/src/errors/__snapshots__/preview-errors.test.ts.snap new file mode 100644 index 000000000000..4c46f463fa1d --- /dev/null +++ b/code/lib/core-events/src/errors/__snapshots__/preview-errors.test.ts.snap @@ -0,0 +1,10 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`UnknownFlowArgTypesError > should correctly handle error with Flow convertSig > There was a failure when generating ArgTypes +in Typescript for {"name":"signature","raw":"SomeType['someProperty']"} +This type is either not supported or it is a bug in Storybook. +If you think this is a bug, please open an issue in Github. 1`] = ` +"There was a failure when generating ArgTypes in Typescript for {"name":"signature","raw":"SomeType['someProperty']"}. +This type is either not supported or it is a bug in Storybook. +If you think this is a bug, please open an issue in Github." +`; diff --git a/code/lib/core-events/src/errors/preview-errors.test.ts b/code/lib/core-events/src/errors/preview-errors.test.ts new file mode 100644 index 000000000000..6bac06deb59b --- /dev/null +++ b/code/lib/core-events/src/errors/preview-errors.test.ts @@ -0,0 +1,20 @@ +import { describe, it, expect } from 'vitest'; +import dedent from 'ts-dedent'; +import { UnknownArgTypesError } from './preview-errors'; + +describe('UnknownFlowArgTypesError', () => { + it('should correctly handle error with Flow convertSig', () => { + const type = { + name: 'signature', + raw: "SomeType['someProperty']", + }; + + const message = dedent`There was a failure when generating ArgTypes + in Typescript for {"name":"signature","raw":"SomeType['someProperty']"} + This type is either not supported or it is a bug in Storybook. + If you think this is a bug, please open an issue in Github.`; + + const typeError = new UnknownArgTypesError({ type, language: 'Typescript' }); + expect(typeError.message).toMatchSnapshot(message); + }); +}); diff --git a/code/lib/core-events/src/errors/preview-errors.ts b/code/lib/core-events/src/errors/preview-errors.ts index 218db70ef826..75f0f54a02fe 100644 --- a/code/lib/core-events/src/errors/preview-errors.ts +++ b/code/lib/core-events/src/errors/preview-errors.ts @@ -11,6 +11,7 @@ import { StorybookError } from './storybook-error'; * to prevent manager and preview errors from having the same category and error code. */ export enum Category { + DOCS_TOOLS = 'DOCS-TOOLS', PREVIEW_CLIENT_LOGGER = 'PREVIEW_CLIENT-LOGGER', PREVIEW_CHANNELS = 'PREVIEW_CHANNELS', PREVIEW_CORE_EVENTS = 'PREVIEW_CORE-EVENTS', @@ -252,3 +253,21 @@ export class NextJsSharpError extends StorybookError { `; } } + +export class UnknownArgTypesError extends StorybookError { + readonly category = Category.DOCS_TOOLS; + + readonly code = 1; + + constructor(public data: { type: object; language: string }) { + super(); + } + + template() { + return dedent`There was a failure when generating ArgTypes in ${ + this.data.language + } for ${JSON.stringify(this.data.type)}. + This type is either not supported or it is a bug in Storybook. + If you think this is a bug, please open an issue in Github.`; + } +} diff --git a/code/lib/core-events/src/errors/server-errors.test.ts b/code/lib/core-events/src/errors/server-errors.test.ts index b50124c16a8f..184323e0cdfd 100644 --- a/code/lib/core-events/src/errors/server-errors.test.ts +++ b/code/lib/core-events/src/errors/server-errors.test.ts @@ -1,6 +1,5 @@ import { describe, it, expect } from 'vitest'; -import dedent from 'ts-dedent'; -import { UnknownArgTypesError, WebpackCompilationError } from './server-errors'; +import { WebpackCompilationError } from './server-errors'; describe('WebpackCompilationError', () => { it('should correctly handle error with stats.compilation.errors', () => { @@ -15,20 +14,3 @@ describe('WebpackCompilationError', () => { expect(webpackError.data.errors[1].message).toEqual('Error 2 message'); }); }); - -describe('UnknownFlowArgTypesError', () => { - it('should correctly handle error with Flow convertSig', () => { - const type = { - name: 'signature', - type: 'number', - signature: 1, - }; - - const message = dedent`We detected a type {"name":"signature","type":"number","signature":1} in your configuration. - Your custom type does not match the TSFuncSigType or TSObjectSigType - Please check your Storybook configuration and ensure you have defined a valid type.`; - - const typeError = new UnknownArgTypesError({ type }); - expect(typeError.message).toEqual(message); - }); -}); diff --git a/code/lib/core-events/src/errors/server-errors.ts b/code/lib/core-events/src/errors/server-errors.ts index 8690728ab3e3..efd3c929de0c 100644 --- a/code/lib/core-events/src/errors/server-errors.ts +++ b/code/lib/core-events/src/errors/server-errors.ts @@ -604,20 +604,3 @@ export class NoStatsForViteDevError extends StorybookError { `; } } - -export class UnknownArgTypesError extends StorybookError { - readonly category = Category.DOCS_TOOLS; - - readonly code = 1; - - constructor(public data: { type: object }) { - super(); - } - - template() { - return dedent`We detected a type ${JSON.stringify(this.data.type)} in your configuration. - Your custom type does not match the TSFuncSigType or TSObjectSigType - Please check your Storybook configuration and ensure you have defined a valid type. - `; - } -} diff --git a/code/lib/docs-tools/src/argTypes/convert/flow/convert.ts b/code/lib/docs-tools/src/argTypes/convert/flow/convert.ts index de3966467646..a6906589da75 100644 --- a/code/lib/docs-tools/src/argTypes/convert/flow/convert.ts +++ b/code/lib/docs-tools/src/argTypes/convert/flow/convert.ts @@ -1,4 +1,4 @@ -import { UnknownArgTypesError } from '@storybook/core-events/server-errors'; +import { UnknownArgTypesError } from '@storybook/core-events/preview-errors'; import type { SBType } from '@storybook/types'; import type { FlowType, FlowSigType, FlowLiteralType } from './types'; @@ -19,7 +19,7 @@ const convertSig = (type: FlowSigType) => { value: values, }; default: - throw new UnknownArgTypesError({ type: type }); + throw new UnknownArgTypesError({ type: type, language: 'Flow' }); } }; diff --git a/code/lib/docs-tools/src/argTypes/convert/typescript/convert.ts b/code/lib/docs-tools/src/argTypes/convert/typescript/convert.ts index d05b5a7e1bea..def09e92a305 100644 --- a/code/lib/docs-tools/src/argTypes/convert/typescript/convert.ts +++ b/code/lib/docs-tools/src/argTypes/convert/typescript/convert.ts @@ -1,4 +1,4 @@ -import { UnknownArgTypesError } from '@storybook/core-events/server-errors'; +import { UnknownArgTypesError } from '@storybook/core-events/preview-errors'; import type { SBType } from '@storybook/types'; import type { TSType, TSSigType } from './types'; import { parseLiteral } from '../utils'; @@ -17,7 +17,7 @@ const convertSig = (type: TSSigType) => { value: values, }; default: - throw new UnknownArgTypesError({ type }); + throw new UnknownArgTypesError({ type, language: 'Typescript' }); } }; From 2631ef79fd2b40ed3ccc00f9aba6f5c0ce2e1c69 Mon Sep 17 00:00:00 2001 From: Reuben Ellis Date: Tue, 16 Apr 2024 09:47:35 -0600 Subject: [PATCH 201/380] remove dedent from test --- .../src/errors/__snapshots__/preview-errors.test.ts.snap | 9 +++++++++ code/lib/core-events/src/errors/preview-errors.test.ts | 3 +-- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/code/lib/core-events/src/errors/__snapshots__/preview-errors.test.ts.snap b/code/lib/core-events/src/errors/__snapshots__/preview-errors.test.ts.snap index 4c46f463fa1d..38b4a7e911d2 100644 --- a/code/lib/core-events/src/errors/__snapshots__/preview-errors.test.ts.snap +++ b/code/lib/core-events/src/errors/__snapshots__/preview-errors.test.ts.snap @@ -1,5 +1,14 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html +exports[`UnknownFlowArgTypesError > should correctly handle error with Flow convertSig > There was a failure when generating ArgTypes + in Typescript for {"name":"signature","raw":"SomeType['someProperty']"} + This type is either not supported or it is a bug in Storybook. + If you think this is a bug, please open an issue in Github. 1`] = ` +"There was a failure when generating ArgTypes in Typescript for {"name":"signature","raw":"SomeType['someProperty']"}. +This type is either not supported or it is a bug in Storybook. +If you think this is a bug, please open an issue in Github." +`; + exports[`UnknownFlowArgTypesError > should correctly handle error with Flow convertSig > There was a failure when generating ArgTypes in Typescript for {"name":"signature","raw":"SomeType['someProperty']"} This type is either not supported or it is a bug in Storybook. diff --git a/code/lib/core-events/src/errors/preview-errors.test.ts b/code/lib/core-events/src/errors/preview-errors.test.ts index 6bac06deb59b..23a9ab52853b 100644 --- a/code/lib/core-events/src/errors/preview-errors.test.ts +++ b/code/lib/core-events/src/errors/preview-errors.test.ts @@ -1,5 +1,4 @@ import { describe, it, expect } from 'vitest'; -import dedent from 'ts-dedent'; import { UnknownArgTypesError } from './preview-errors'; describe('UnknownFlowArgTypesError', () => { @@ -9,7 +8,7 @@ describe('UnknownFlowArgTypesError', () => { raw: "SomeType['someProperty']", }; - const message = dedent`There was a failure when generating ArgTypes + const message = `There was a failure when generating ArgTypes in Typescript for {"name":"signature","raw":"SomeType['someProperty']"} This type is either not supported or it is a bug in Storybook. If you think this is a bug, please open an issue in Github.`; From ffd17e8368635214c44aaa198a8f55c8f8a1a402 Mon Sep 17 00:00:00 2001 From: Reuben Ellis Date: Tue, 16 Apr 2024 13:58:38 -0600 Subject: [PATCH 202/380] Update preview error --- .../__snapshots__/preview-errors.test.ts.snap | 19 ------------------- .../src/errors/preview-errors.test.ts | 9 ++++----- .../core-events/src/errors/preview-errors.ts | 4 ++-- 3 files changed, 6 insertions(+), 26 deletions(-) delete mode 100644 code/lib/core-events/src/errors/__snapshots__/preview-errors.test.ts.snap diff --git a/code/lib/core-events/src/errors/__snapshots__/preview-errors.test.ts.snap b/code/lib/core-events/src/errors/__snapshots__/preview-errors.test.ts.snap deleted file mode 100644 index 38b4a7e911d2..000000000000 --- a/code/lib/core-events/src/errors/__snapshots__/preview-errors.test.ts.snap +++ /dev/null @@ -1,19 +0,0 @@ -// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html - -exports[`UnknownFlowArgTypesError > should correctly handle error with Flow convertSig > There was a failure when generating ArgTypes - in Typescript for {"name":"signature","raw":"SomeType['someProperty']"} - This type is either not supported or it is a bug in Storybook. - If you think this is a bug, please open an issue in Github. 1`] = ` -"There was a failure when generating ArgTypes in Typescript for {"name":"signature","raw":"SomeType['someProperty']"}. -This type is either not supported or it is a bug in Storybook. -If you think this is a bug, please open an issue in Github." -`; - -exports[`UnknownFlowArgTypesError > should correctly handle error with Flow convertSig > There was a failure when generating ArgTypes -in Typescript for {"name":"signature","raw":"SomeType['someProperty']"} -This type is either not supported or it is a bug in Storybook. -If you think this is a bug, please open an issue in Github. 1`] = ` -"There was a failure when generating ArgTypes in Typescript for {"name":"signature","raw":"SomeType['someProperty']"}. -This type is either not supported or it is a bug in Storybook. -If you think this is a bug, please open an issue in Github." -`; diff --git a/code/lib/core-events/src/errors/preview-errors.test.ts b/code/lib/core-events/src/errors/preview-errors.test.ts index 23a9ab52853b..398646c4a624 100644 --- a/code/lib/core-events/src/errors/preview-errors.test.ts +++ b/code/lib/core-events/src/errors/preview-errors.test.ts @@ -2,18 +2,17 @@ import { describe, it, expect } from 'vitest'; import { UnknownArgTypesError } from './preview-errors'; describe('UnknownFlowArgTypesError', () => { - it('should correctly handle error with Flow convertSig', () => { + it('should correctly handle error with convertSig', () => { const type = { name: 'signature', raw: "SomeType['someProperty']", }; - const message = `There was a failure when generating ArgTypes - in Typescript for {"name":"signature","raw":"SomeType['someProperty']"} + const message = `"There was a failure when generating ArgTypes in Typescript for {"name":"signature","raw":"SomeType['someProperty']"} This type is either not supported or it is a bug in Storybook. - If you think this is a bug, please open an issue in Github.`; + If you think this is a bug, please open an issue in Github."`; const typeError = new UnknownArgTypesError({ type, language: 'Typescript' }); - expect(typeError.message).toMatchSnapshot(message); + expect(typeError.message).toMatchInlineSnapshot(message); }); }); diff --git a/code/lib/core-events/src/errors/preview-errors.ts b/code/lib/core-events/src/errors/preview-errors.ts index 75f0f54a02fe..b28cc8d59442 100644 --- a/code/lib/core-events/src/errors/preview-errors.ts +++ b/code/lib/core-events/src/errors/preview-errors.ts @@ -264,9 +264,9 @@ export class UnknownArgTypesError extends StorybookError { } template() { - return dedent`There was a failure when generating ArgTypes in ${ + return `There was a failure when generating ArgTypes in ${ this.data.language - } for ${JSON.stringify(this.data.type)}. + } for ${JSON.stringify(this.data.type)} This type is either not supported or it is a bug in Storybook. If you think this is a bug, please open an issue in Github.`; } From a5104be77c516e1d0445cd4ce88a28f57a43bc01 Mon Sep 17 00:00:00 2001 From: yuemori Date: Wed, 17 Apr 2024 14:07:15 +0900 Subject: [PATCH 203/380] Fix vite-builder prevent override of assetsInclude field by merging existing values --- code/builders/builder-vite/src/assetsInclude.ts | 15 +++++++++++++++ code/builders/builder-vite/src/vite-server.ts | 3 ++- 2 files changed, 17 insertions(+), 1 deletion(-) create mode 100644 code/builders/builder-vite/src/assetsInclude.ts diff --git a/code/builders/builder-vite/src/assetsInclude.ts b/code/builders/builder-vite/src/assetsInclude.ts new file mode 100644 index 000000000000..67373d8552d8 --- /dev/null +++ b/code/builders/builder-vite/src/assetsInclude.ts @@ -0,0 +1,15 @@ +import { InlineConfig as ViteInlineConfig } from 'vite'; + +export function getAssetsInclude(config: ViteInlineConfig, newPath: string[]): (string | RegExp)[] { + const { assetsInclude } = config; + + if (!assetsInclude) { + return newPath; + } + + if (Array.isArray(assetsInclude)) { + return [...assetsInclude, ...newPath]; + } else { + return [assetsInclude, ...newPath]; + } +} diff --git a/code/builders/builder-vite/src/vite-server.ts b/code/builders/builder-vite/src/vite-server.ts index 0b1e80435027..cfd3c4051a3e 100644 --- a/code/builders/builder-vite/src/vite-server.ts +++ b/code/builders/builder-vite/src/vite-server.ts @@ -3,6 +3,7 @@ import type { Options } from '@storybook/types'; import { commonConfig } from './vite-config'; import { getOptimizeDeps } from './optimizeDeps'; import { sanitizeEnvVars } from './envs'; +import { getAssetsInclude } from './assetsInclude'; export async function createViteServer(options: Options, devServer: Server) { const { presets } = options; @@ -12,7 +13,7 @@ export async function createViteServer(options: Options, devServer: Server) { const config = { ...commonCfg, // Needed in Vite 5: https://github.com/storybookjs/storybook/issues/25256 - assetsInclude: ['/sb-preview/**'], + assetsInclude: getAssetsInclude(commonCfg, ['/sb-preview/**']), // Set up dev server server: { middlewareMode: true, From 897becde40cf841f945b039127c7ef8e9534d292 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 17 Apr 2024 09:24:01 +0200 Subject: [PATCH 204/380] cleanup --- code/ui/components/src/components/Modal/Modal.stories.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/code/ui/components/src/components/Modal/Modal.stories.tsx b/code/ui/components/src/components/Modal/Modal.stories.tsx index 8e825c28d95a..20af542e2c31 100644 --- a/code/ui/components/src/components/Modal/Modal.stories.tsx +++ b/code/ui/components/src/components/Modal/Modal.stories.tsx @@ -4,7 +4,6 @@ import { userEvent, within, expect } from '@storybook/test'; import { Modal } from './Modal'; import { Button } from '../Button/Button'; -import { CrossIcon } from '@storybook/icons'; type Story = StoryObj; From e6cba317ae97e0e43889ebb7b9f25583779bb8cd Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 10 Apr 2024 11:03:47 +0200 Subject: [PATCH 205/380] Add 'Create a new story' button to sidebar --- code/package.json | 2 +- .../src/components/Button/Button.tsx | 2 +- .../manager/src/components/sidebar/Search.tsx | 82 ++++++++++++------- code/yarn.lock | 20 ++--- 4 files changed, 65 insertions(+), 41 deletions(-) diff --git a/code/package.json b/code/package.json index 29dc543f11e8..80e9cb11f74a 100644 --- a/code/package.json +++ b/code/package.json @@ -90,7 +90,7 @@ "type-fest": "~2.19" }, "dependencies": { - "@chromatic-com/storybook": "^1.2.18", + "@chromatic-com/storybook": "^1.3.2", "@nx/eslint": "18.0.6", "@nx/vite": "18.0.6", "@nx/workspace": "18.0.6", diff --git a/code/ui/components/src/components/Button/Button.tsx b/code/ui/components/src/components/Button/Button.tsx index 6e77f668b8df..2b070dcb7b00 100644 --- a/code/ui/components/src/components/Button/Button.tsx +++ b/code/ui/components/src/components/Button/Button.tsx @@ -202,7 +202,7 @@ const StyledButton = styled('button', { : {}), color: (() => { if (variant === 'solid') return theme.color.lightest; - if (variant === 'outline') return theme.input.color; + if (variant === 'outline') return theme.color.mediumdark; if (variant === 'ghost' && active) return theme.color.secondary; if (variant === 'ghost') return theme.color.mediumdark; return theme.input.color; diff --git a/code/ui/manager/src/components/sidebar/Search.tsx b/code/ui/manager/src/components/sidebar/Search.tsx index 0df164a2d35b..834f8fab8e94 100644 --- a/code/ui/manager/src/components/sidebar/Search.tsx +++ b/code/ui/manager/src/components/sidebar/Search.tsx @@ -6,7 +6,8 @@ import type { FuseOptions } from 'fuse.js'; import Fuse from 'fuse.js'; import { global } from '@storybook/global'; import React, { useRef, useState, useCallback } from 'react'; -import { CloseIcon, SearchIcon } from '@storybook/icons'; +import { CloseIcon, PlusIcon, SearchIcon } from '@storybook/icons'; +import { IconButton, TooltipNote, WithTooltip } from '@storybook/components'; import { DEFAULT_REF_ID } from './Sidebar'; import type { CombinedDataset, @@ -43,6 +44,16 @@ const options = { ], } as FuseOptions; +const SearchBar = styled.div({ + display: 'flex', + flexDirection: 'row', + columnGap: 6, +}); + +const TooltipNoteWrapper = styled(TooltipNote)({ + margin: 0, +}); + const ScreenReaderLabel = styled.label({ position: 'absolute', left: -10000, @@ -67,15 +78,17 @@ const SearchIconWrapper = styled.div(({ theme }) => ({ const SearchField = styled.div({ display: 'flex', flexDirection: 'column', + flexGrow: 1, position: 'relative', }); const Input = styled.input(({ theme }) => ({ appearance: 'none', - height: 32, + height: 28, paddingLeft: 28, paddingRight: 28, - border: `1px solid ${theme.appBorderColor}`, + border: 0, + boxShadow: `${theme.button.border} 0 0 0 1px inset`, background: 'transparent', borderRadius: 4, fontSize: `${theme.typography.size.s1 + 1}px`, @@ -352,32 +365,43 @@ export const Search = React.memo<{ return ( <> Search for components - - - - - {/* @ts-expect-error (TODO) */} - - {!isMobile && enableShortcuts && !isOpen && ( - - {searchShortcut === 'โŒ˜ K' ? ( - <> - โŒ˜K - - ) : ( - searchShortcut - )} - - )} - {isOpen && ( - clearSelection()}> - - - )} - + + + + + + {/* @ts-expect-error (TODO) */} + + {!isMobile && enableShortcuts && !isOpen && ( + + {searchShortcut === 'โŒ˜ K' ? ( + <> + โŒ˜K + + ) : ( + searchShortcut + )} + + )} + {isOpen && ( + clearSelection()}> + + + )} + + } + > + + + + + {children({ query: input, diff --git a/code/yarn.lock b/code/yarn.lock index 98f4bc6749aa..41342dd442fa 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -2077,16 +2077,16 @@ __metadata: languageName: node linkType: hard -"@chromatic-com/storybook@npm:^1.2.18": - version: 1.2.18 - resolution: "@chromatic-com/storybook@npm:1.2.18" +"@chromatic-com/storybook@npm:^1.3.2": + version: 1.3.2 + resolution: "@chromatic-com/storybook@npm:1.3.2" dependencies: - chromatic: "npm:^11.0.0" + chromatic: "npm:^11.3.0" filesize: "npm:^10.0.12" jsonfile: "npm:^6.1.0" react-confetti: "npm:^6.1.0" strip-ansi: "npm:^7.1.0" - checksum: 10c0/b0b4c48dba1d6cddcc2b2541ba970ac4be7861583387f9525d60797663459fdb8db25fe99759c7e51ebb256daf185116450f5f33a04e35e0a2aa458f0ab24541 + checksum: 10c0/30f7d946e41d031d45991ea8cf2f42b64330a12ddb1330a5a0bfe9734511e36f0691f897b0075c41c4c9fa5de6382598e98179a5ac2f9139bd619fc46487bbeb languageName: node linkType: hard @@ -6537,7 +6537,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/root@workspace:." dependencies: - "@chromatic-com/storybook": "npm:^1.2.18" + "@chromatic-com/storybook": "npm:^1.3.2" "@nx/eslint": "npm:18.0.6" "@nx/vite": "npm:18.0.6" "@nx/workspace": "npm:18.0.6" @@ -11477,9 +11477,9 @@ __metadata: languageName: node linkType: hard -"chromatic@npm:^11.0.0": - version: 11.0.8 - resolution: "chromatic@npm:11.0.8" +"chromatic@npm:^11.3.0": + version: 11.3.0 + resolution: "chromatic@npm:11.3.0" peerDependencies: "@chromatic-com/cypress": ^0.*.* || ^1.0.0 "@chromatic-com/playwright": ^0.*.* || ^1.0.0 @@ -11492,7 +11492,7 @@ __metadata: chroma: dist/bin.js chromatic: dist/bin.js chromatic-cli: dist/bin.js - checksum: 10c0/422ab9afd9667f94813b2355144092fe5abe6538394e308619411050fea8265b9531a88a13b8563bf40172bd99b47de3c89642f34ec2d1f1bc42c958568e2902 + checksum: 10c0/e977ef43a43ebb0250ec8fc46f5751c8cb9b798f75fcf9ec52485c1127caf9d6cef0346a9dd1660a8967faf1a7cde579571a0ac130cfaf475d6f22e4929003b6 languageName: node linkType: hard From 0675bb43703fffdf18b3e3d6f271b27226c366b6 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 10 Apr 2024 11:59:06 +0200 Subject: [PATCH 206/380] Add stories to 'Create a new story' button --- .../src/components/sidebar/Search.stories.tsx | 6 +++++ .../manager/src/components/sidebar/Search.tsx | 24 ++++++++++++------- .../components/sidebar/Sidebar.stories.tsx | 7 ++++++ .../src/components/sidebar/Sidebar.tsx | 9 ++++++- 4 files changed, 36 insertions(+), 10 deletions(-) diff --git a/code/ui/manager/src/components/sidebar/Search.stories.tsx b/code/ui/manager/src/components/sidebar/Search.stories.tsx index 8eb50c9832c9..8b796158db8d 100644 --- a/code/ui/manager/src/components/sidebar/Search.stories.tsx +++ b/code/ui/manager/src/components/sidebar/Search.stories.tsx @@ -43,6 +43,12 @@ const baseProps = { export const Simple: StoryFn = () => {() => null}; +export const SimpleWithCreateButton: StoryFn = () => ( + + {() => null} + +); + export const FilledIn: StoryFn = () => ( {() => } diff --git a/code/ui/manager/src/components/sidebar/Search.tsx b/code/ui/manager/src/components/sidebar/Search.tsx index 834f8fab8e94..60d41351f4b4 100644 --- a/code/ui/manager/src/components/sidebar/Search.tsx +++ b/code/ui/manager/src/components/sidebar/Search.tsx @@ -159,18 +159,22 @@ const ClearIcon = styled.div(({ theme }) => ({ const FocusContainer = styled.div({ outline: 0 }); +const isDevelopment = global.CONFIG_TYPE === 'DEVELOPMENT'; + export const Search = React.memo<{ children: SearchChildrenFn; dataset: CombinedDataset; enableShortcuts?: boolean; getLastViewed: () => Selection[]; initialQuery?: string; + showCreateStoryButton?: boolean; }>(function Search({ children, dataset, enableShortcuts = true, getLastViewed, initialQuery = '', + showCreateStoryButton = isDevelopment, }) { const api = useStorybookApi(); const inputRef = useRef(null); @@ -392,15 +396,17 @@ export const Search = React.memo<{ )} - } - > - - - - + {showCreateStoryButton ? ( + } + > + + + + + ) : null} {children({ diff --git a/code/ui/manager/src/components/sidebar/Sidebar.stories.tsx b/code/ui/manager/src/components/sidebar/Sidebar.stories.tsx index 253775bc07c7..46c3d7c14979 100644 --- a/code/ui/manager/src/components/sidebar/Sidebar.stories.tsx +++ b/code/ui/manager/src/components/sidebar/Sidebar.stories.tsx @@ -40,6 +40,7 @@ const meta = { refId: DEFAULT_REF_ID, refs: {}, status: {}, + showCreateStoryButton: true, }, decorators: [ (storyFn) => ( @@ -107,6 +108,12 @@ const refsEmpty = { export const Simple: Story = {}; +export const SimpleInProduction: Story = { + args: { + showCreateStoryButton: false, + }, +}; + export const Loading: Story = { args: { previewInitialized: false, diff --git a/code/ui/manager/src/components/sidebar/Sidebar.tsx b/code/ui/manager/src/components/sidebar/Sidebar.tsx index 0da159ffb4f1..66c4e7aabf4c 100644 --- a/code/ui/manager/src/components/sidebar/Sidebar.tsx +++ b/code/ui/manager/src/components/sidebar/Sidebar.tsx @@ -114,6 +114,7 @@ export interface SidebarProps extends API_LoadedRefData { menuHighlighted?: boolean; enableShortcuts?: boolean; onMenuClick?: HeadingProps['onMenuClick']; + showCreateStoryButton?: boolean; } export const Sidebar = React.memo(function Sidebar({ @@ -130,6 +131,7 @@ export const Sidebar = React.memo(function Sidebar({ enableShortcuts = true, refs = {}, onMenuClick, + showCreateStoryButton, }: SidebarProps) { const selected: Selection = useMemo(() => storyId && { storyId, refId }, [storyId, refId]); const dataset = useCombination(index, indexError, previewInitialized, status, refs); @@ -149,7 +151,12 @@ export const Sidebar = React.memo(function Sidebar({ isLoading={isLoading} onMenuClick={onMenuClick} /> - + {({ query, results, From 92ba34731a1e6f33f251720ee47287e128aaf5a2 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 10 Apr 2024 12:50:00 +0200 Subject: [PATCH 207/380] Only show create new story button for react renderers --- code/builders/builder-manager/src/utils/framework.ts | 9 ++++++--- code/lib/manager-api/src/modules/versions.ts | 2 +- code/ui/manager/src/components/sidebar/Search.tsx | 3 ++- code/ui/manager/src/typings.d.ts | 1 + 4 files changed, 10 insertions(+), 5 deletions(-) diff --git a/code/builders/builder-manager/src/utils/framework.ts b/code/builders/builder-manager/src/utils/framework.ts index 165b018ddf8f..bf3588290511 100644 --- a/code/builders/builder-manager/src/utils/framework.ts +++ b/code/builders/builder-manager/src/utils/framework.ts @@ -1,5 +1,6 @@ import path from 'path'; import type { Options } from '@storybook/types'; +import { extractProperRendererNameFromFramework, getFrameworkName } from '@storybook/core-common'; interface PropertyObject { name: string; @@ -28,12 +29,14 @@ export const pluckThirdPartyPackageFromPath = (packagePath: string) => export const buildFrameworkGlobalsFromOptions = async (options: Options) => { const globals: Record = {}; - const { renderer, builder } = await options.presets.apply('core'); + const { builder } = await options.presets.apply('core'); + + const frameworkName = await getFrameworkName(options); + const rendererName = await extractProperRendererNameFromFramework(frameworkName); - const rendererName = pluckNameFromConfigProperty(renderer); if (rendererName) { globals.STORYBOOK_RENDERER = - pluckStorybookPackageFromPath(rendererName) ?? pluckThirdPartyPackageFromPath(rendererName); + (await extractProperRendererNameFromFramework(frameworkName)) ?? undefined; } const builderName = pluckNameFromConfigProperty(builder); diff --git a/code/lib/manager-api/src/modules/versions.ts b/code/lib/manager-api/src/modules/versions.ts index a414c07fe073..8305523f2f0d 100644 --- a/code/lib/manager-api/src/modules/versions.ts +++ b/code/lib/manager-api/src/modules/versions.ts @@ -109,7 +109,7 @@ export const init: ModuleFn = ({ store }) => { } if (renderer && typeof global.STORYBOOK_RENDERER !== 'undefined') { - const rendererName = (global.STORYBOOK_RENDERER as string).split('/').pop()?.toLowerCase(); + const rendererName = global.STORYBOOK_RENDERER as string; if (rendererName) { url += `?renderer=${normalizeRendererName(rendererName)}`; diff --git a/code/ui/manager/src/components/sidebar/Search.tsx b/code/ui/manager/src/components/sidebar/Search.tsx index 60d41351f4b4..84ff9df58fca 100644 --- a/code/ui/manager/src/components/sidebar/Search.tsx +++ b/code/ui/manager/src/components/sidebar/Search.tsx @@ -160,6 +160,7 @@ const ClearIcon = styled.div(({ theme }) => ({ const FocusContainer = styled.div({ outline: 0 }); const isDevelopment = global.CONFIG_TYPE === 'DEVELOPMENT'; +const isRendererReact = global.STORYBOOK_RENDERER === 'react'; export const Search = React.memo<{ children: SearchChildrenFn; @@ -174,7 +175,7 @@ export const Search = React.memo<{ enableShortcuts = true, getLastViewed, initialQuery = '', - showCreateStoryButton = isDevelopment, + showCreateStoryButton = isDevelopment && isRendererReact, }) { const api = useStorybookApi(); const inputRef = useRef(null); diff --git a/code/ui/manager/src/typings.d.ts b/code/ui/manager/src/typings.d.ts index c51fcc2f2f86..5ac9aaa1a174 100644 --- a/code/ui/manager/src/typings.d.ts +++ b/code/ui/manager/src/typings.d.ts @@ -26,4 +26,5 @@ declare var __STORYBOOK_ICONS__: any; declare var __STORYBOOK_CLIENT_LOGGER__: any; declare var __STORYBOOK_ADDONS_CHANNEL__: any; declare var __STORYBOOK_TYPES__: any; +declare var STORYBOOK_RENDERER: string | undefined; declare var sendTelemetryError: (error: any) => void; From 2e6862a03dc38986ce40e925c6779195109dfa63 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 10 Apr 2024 13:20:42 +0200 Subject: [PATCH 208/380] Disable TurboSnap --- code/chromatic.config.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/chromatic.config.json b/code/chromatic.config.json index 77130b818b6d..a2ed8ccde24c 100644 --- a/code/chromatic.config.json +++ b/code/chromatic.config.json @@ -2,7 +2,7 @@ "projectId": "Project:635781f3500dd2c49e189caf", "projectToken": "80b312430ec4", "buildScriptName": "storybook:ui:build", - "onlyChanged": true, + "onlyChanged": false, "storybookConfigDir": "ui/.storybook", "storybookBaseDir": "./code", "zip": true From b86eeb02f5b242d64e99c3515fdfe3e650c6afc7 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 11 Apr 2024 09:24:28 +0200 Subject: [PATCH 209/380] Apply mediumdark color only to IconButton --- code/ui/components/src/components/Button/Button.tsx | 2 +- code/ui/manager/src/components/sidebar/Search.tsx | 12 ++++++++---- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/code/ui/components/src/components/Button/Button.tsx b/code/ui/components/src/components/Button/Button.tsx index 2b070dcb7b00..6e77f668b8df 100644 --- a/code/ui/components/src/components/Button/Button.tsx +++ b/code/ui/components/src/components/Button/Button.tsx @@ -202,7 +202,7 @@ const StyledButton = styled('button', { : {}), color: (() => { if (variant === 'solid') return theme.color.lightest; - if (variant === 'outline') return theme.color.mediumdark; + if (variant === 'outline') return theme.input.color; if (variant === 'ghost' && active) return theme.color.secondary; if (variant === 'ghost') return theme.color.mediumdark; return theme.input.color; diff --git a/code/ui/manager/src/components/sidebar/Search.tsx b/code/ui/manager/src/components/sidebar/Search.tsx index 84ff9df58fca..441653e44234 100644 --- a/code/ui/manager/src/components/sidebar/Search.tsx +++ b/code/ui/manager/src/components/sidebar/Search.tsx @@ -63,6 +63,10 @@ const ScreenReaderLabel = styled.label({ overflow: 'hidden', }); +const CreateNewStoryButton = styled(IconButton)(({ theme }) => ({ + color: theme.color.mediumdark, +})); + const SearchIconWrapper = styled.div(({ theme }) => ({ position: 'absolute', top: 0, @@ -397,17 +401,17 @@ export const Search = React.memo<{ )} - {showCreateStoryButton ? ( + {showCreateStoryButton && ( } > - + - + - ) : null} + )} {children({ From f1c6ae9c21ac3d89c7722bec5eee84f3a114316f Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 15 Apr 2024 09:04:49 +0200 Subject: [PATCH 210/380] Adjust top position of code in search field --- code/ui/manager/src/components/sidebar/Search.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/ui/manager/src/components/sidebar/Search.tsx b/code/ui/manager/src/components/sidebar/Search.tsx index 441653e44234..8708a05dad6a 100644 --- a/code/ui/manager/src/components/sidebar/Search.tsx +++ b/code/ui/manager/src/components/sidebar/Search.tsx @@ -130,7 +130,7 @@ const Input = styled.input(({ theme }) => ({ const FocusKey = styled.code(({ theme }) => ({ position: 'absolute', - top: 8, + top: 6, right: 9, height: 16, zIndex: 1, From 0757f18616780ae667686b25fca6841781ac467f Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 15 Apr 2024 12:44:54 +0200 Subject: [PATCH 211/380] fix CI --- code/addons/controls/src/ControlsPanel.tsx | 2 +- code/addons/controls/src/SaveFromControls.stories.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/code/addons/controls/src/ControlsPanel.tsx b/code/addons/controls/src/ControlsPanel.tsx index 7eebdc5c6bd2..adf4db26cfeb 100644 --- a/code/addons/controls/src/ControlsPanel.tsx +++ b/code/addons/controls/src/ControlsPanel.tsx @@ -12,7 +12,7 @@ import { import { PureArgsTable as ArgsTable, type PresetColor, type SortType } from '@storybook/blocks'; import { styled } from '@storybook/theming'; import type { ArgTypes } from '@storybook/types'; -import { SAVE_STORY_REQUEST, SAVE_STORY_RESULT } from '@storybook/core-events'; +import { SAVE_STORY_REQUEST } from '@storybook/core-events'; import { PARAM_KEY } from './constants'; import { SaveFromControls } from './SaveFromControls'; diff --git a/code/addons/controls/src/SaveFromControls.stories.tsx b/code/addons/controls/src/SaveFromControls.stories.tsx index 39204f2d2488..6b9345da0bc0 100644 --- a/code/addons/controls/src/SaveFromControls.stories.tsx +++ b/code/addons/controls/src/SaveFromControls.stories.tsx @@ -22,12 +22,12 @@ type Story = StoryObj; export const Default: Story = {}; -export const Creating: Story = { +export const Creating = { play: async ({ canvasElement }) => { const createButton = await within(canvasElement).findByRole('button', { name: /Create/i }); await fireEvent.click(createButton); }, -}; +} satisfies Story; export const Created: Story = { play: async (context) => { From 7e120a81c607b4372a5e58691c62d1639d149b2d Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 17 Apr 2024 12:30:52 +0200 Subject: [PATCH 212/380] Controls: Fix crashing when docgen extraction partially fails --- code/lib/core-events/src/errors/preview-errors.ts | 15 +++++++++++---- code/lib/docs-tools/src/argTypes/convert/index.ts | 11 ++++++++--- 2 files changed, 19 insertions(+), 7 deletions(-) diff --git a/code/lib/core-events/src/errors/preview-errors.ts b/code/lib/core-events/src/errors/preview-errors.ts index b28cc8d59442..09b5224d0322 100644 --- a/code/lib/core-events/src/errors/preview-errors.ts +++ b/code/lib/core-events/src/errors/preview-errors.ts @@ -259,15 +259,22 @@ export class UnknownArgTypesError extends StorybookError { readonly code = 1; + readonly documentation = 'https://github.com/storybookjs/storybook/issues/26606'; + constructor(public data: { type: object; language: string }) { super(); } template() { - return `There was a failure when generating ArgTypes in ${ + return dedent`There was a failure when generating detailed ArgTypes in ${ this.data.language - } for ${JSON.stringify(this.data.type)} - This type is either not supported or it is a bug in Storybook. - If you think this is a bug, please open an issue in Github.`; + } for: + + ${JSON.stringify(this.data.type, null, 2)} + + so Storybook will fall back to a generic type description. + + This type is either not supported or it is a bug in the docgen generation in Storybook. + If you think this is a bug, please detail it as much as possible in the Github issue.`; } } diff --git a/code/lib/docs-tools/src/argTypes/convert/index.ts b/code/lib/docs-tools/src/argTypes/convert/index.ts index 60db96fe65d6..812fcf517896 100644 --- a/code/lib/docs-tools/src/argTypes/convert/index.ts +++ b/code/lib/docs-tools/src/argTypes/convert/index.ts @@ -7,9 +7,14 @@ import { convert as propTypesConvert } from './proptypes'; export const convert = (docgenInfo: DocgenInfo) => { const { type, tsType, flowType } = docgenInfo; - if (type != null) return propTypesConvert(type); - if (tsType != null) return tsConvert(tsType as TSType); - if (flowType != null) return flowConvert(flowType as FlowType); + try { + if (type != null) return propTypesConvert(type); + if (tsType != null) return tsConvert(tsType as TSType); + if (flowType != null) return flowConvert(flowType as FlowType); + } catch (err) { + // if we can't convert the type, we'll just return null to fallback to a simple summary, and provide the error to the user + console.error(err); + } return null; }; From 5247e9a02eea4bae494a64dee8c80787441803da Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Wed, 17 Apr 2024 11:52:21 +0200 Subject: [PATCH 213/380] Avoid nested button --- .../manager/src/components/notifications/NotificationItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/ui/manager/src/components/notifications/NotificationItem.tsx b/code/ui/manager/src/components/notifications/NotificationItem.tsx index d47f539a3f1c..f8e44fcd3660 100644 --- a/code/ui/manager/src/components/notifications/NotificationItem.tsx +++ b/code/ui/manager/src/components/notifications/NotificationItem.tsx @@ -81,7 +81,7 @@ const NotificationWithInteractiveStates = styled(Notification)(() => ({ 'rgba(2,156,253,1) 0 0 0 1px inset, 0 1px 3px 0 rgba(30,167,253,0.5), 0 2px 5px 0 rgba(0,0,0,0.05), 0 5px 15px 0 rgba(0,0,0,0.1)', }, })); -const NotificationButton = NotificationWithInteractiveStates.withComponent('button'); +const NotificationButton = NotificationWithInteractiveStates.withComponent('div'); const NotificationLink = NotificationWithInteractiveStates.withComponent(Link); const NotificationIconWrapper = styled.div(() => ({ From 88556bffb289df0610adcf31517ddf4e5c9a00bc Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Wed, 17 Apr 2024 13:25:53 +0200 Subject: [PATCH 214/380] Remove unused ref --- code/addons/controls/src/ControlsPanel.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/code/addons/controls/src/ControlsPanel.tsx b/code/addons/controls/src/ControlsPanel.tsx index 3541d8aeb2da..fa6b8e046c6e 100644 --- a/code/addons/controls/src/ControlsPanel.tsx +++ b/code/addons/controls/src/ControlsPanel.tsx @@ -49,9 +49,6 @@ export const ControlsPanel = ({ saveStory, createStory }: ControlsPanelProps) => const { expanded, sort, presetColors } = useParameter(PARAM_KEY, {}); const { path, previewInitialized } = useStorybookState(); - const currentArgsRef = useRef(args); - currentArgsRef.current = args; - // If the story is prepared, then show the args table // and reset the loading states useEffect(() => { From 762a784c12876e0ff2c3679eeb821d42377f4f40 Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Wed, 17 Apr 2024 13:27:16 +0200 Subject: [PATCH 215/380] Wait for story to rerender after HMR before responding to save-story request --- .../core-server/src/utils/save-story/save-story.ts | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/code/lib/core-server/src/utils/save-story/save-story.ts b/code/lib/core-server/src/utils/save-story/save-story.ts index 5ddb8f8e0fd6..6d2622f10e17 100644 --- a/code/lib/core-server/src/utils/save-story/save-story.ts +++ b/code/lib/core-server/src/utils/save-story/save-story.ts @@ -1,6 +1,6 @@ /* eslint-disable no-underscore-dangle */ import type { Channel } from '@storybook/channels'; -import { SAVE_STORY_REQUEST, SAVE_STORY_RESPONSE } from '@storybook/core-events'; +import { SAVE_STORY_REQUEST, SAVE_STORY_RESPONSE, STORY_RENDERED } from '@storybook/core-events'; import { storyNameFromExport, toId } from '@storybook/csf'; import { readCsf, writeCsf } from '@storybook/csf-tools'; @@ -75,7 +75,16 @@ export function initializeSaveStory(channel: Channel, options: Options, coreConf name ? duplicateStoryWithNewName(parsed, storyName, name) : csf.getStoryExport(storyName), args ); - await writeCsf(csf, sourceFilePath); + + // Writing the CSF file should trigger HMR, which causes the story to rerender. Delay the + // response until that happens, but don't wait too long. + await Promise.all([ + new Promise((resolve) => { + channel.on(STORY_RENDERED, resolve); + setTimeout(() => resolve(channel.off(STORY_RENDERED, resolve)), 3000); + }), + writeCsf(csf, sourceFilePath), + ]); channel.emit(SAVE_STORY_RESPONSE, { id, From 365a46d2061f844d7319fd6d043aac2940a3dae8 Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Wed, 17 Apr 2024 13:30:51 +0200 Subject: [PATCH 216/380] No need to retry selectStory call anymore --- code/addons/controls/src/manager.tsx | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/code/addons/controls/src/manager.tsx b/code/addons/controls/src/manager.tsx index 5d9b6eb19cd6..eeab03b1c456 100644 --- a/code/addons/controls/src/manager.tsx +++ b/code/addons/controls/src/manager.tsx @@ -24,16 +24,6 @@ function Title() { ); } -// It might take a little while for a new story to be available, so we retry a few times -const selectNewStory = (selectStory: (id: string) => void, storyId: string, attempt = 1) => { - if (attempt > 10) return; - try { - selectStory(storyId); - } catch (e) { - setTimeout(() => selectNewStory(selectStory, storyId, attempt + 1), 500); - } -}; - interface ResponseData { id: string; success: boolean; @@ -114,7 +104,7 @@ addons.register(ADDON_ID, (api) => { const data = api.getCurrentStoryData(); if (data.type === 'story') api.resetStoryArgs(data); - if (newStoryId) selectNewStory(api.selectStory, newStoryId); + if (newStoryId) api.selectStory(newStoryId); api.addNotification({ id: 'save-story-success', From 7a189bba259f818aeb68823c58b963dc1af4805d Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Wed, 17 Apr 2024 11:01:37 +0200 Subject: [PATCH 217/380] Add new actions to the bottom of the panel and auto scroll --- .../src/components/ActionLogger/index.tsx | 74 +++++++++++-------- .../src/containers/ActionLogger/index.tsx | 4 +- .../src/components/ScrollArea/ScrollArea.tsx | 65 ++++++++-------- 3 files changed, 76 insertions(+), 67 deletions(-) diff --git a/code/addons/actions/src/components/ActionLogger/index.tsx b/code/addons/actions/src/components/ActionLogger/index.tsx index a3e48337107f..4244f75cf449 100644 --- a/code/addons/actions/src/components/ActionLogger/index.tsx +++ b/code/addons/actions/src/components/ActionLogger/index.tsx @@ -1,22 +1,23 @@ -import type { FC, PropsWithChildren } from 'react'; -import React, { Fragment } from 'react'; -import { styled, withTheme } from '@storybook/theming'; +import type { ElementRef, ReactNode } from 'react'; +import React, { forwardRef, Fragment, useEffect, useRef } from 'react'; import type { Theme } from '@storybook/theming'; +import { styled, withTheme } from '@storybook/theming'; import { Inspector } from 'react-inspector'; import { ActionBar, ScrollArea } from '@storybook/components'; -import { Action, InspectorContainer, Counter } from './style'; +import { Action, Counter, InspectorContainer } from './style'; import type { ActionDisplay } from '../../models'; -const UnstyledWrapped: FC> = ({ - children, - className, -}) => ( - - {children} - +const UnstyledWrapped = forwardRef( + ({ children, className }, ref) => ( + + {children} + + ) ); +UnstyledWrapped.displayName = 'UnstyledWrapped'; + export const Wrapper = styled(UnstyledWrapped)({ margin: 0, padding: '10px 5px 20px', @@ -39,24 +40,33 @@ interface ActionLoggerProps { onClear: () => void; } -export const ActionLogger = ({ actions, onClear }: ActionLoggerProps) => ( - - - {actions.map((action: ActionDisplay) => ( - - {action.count > 1 && {action.count}} - - - - - ))} - - - - -); +export const ActionLogger = ({ actions, onClear }: ActionLoggerProps) => { + const wrapperRef = useRef>(null); + const wrapper = wrapperRef.current; + const wasAtBottom = wrapper && wrapper.scrollHeight - wrapper.scrollTop === wrapper.clientHeight; + + useEffect(() => { + if (wasAtBottom) wrapperRef.current.scrollTop = wrapperRef.current.scrollHeight; + }, [wasAtBottom, actions.length]); + + return ( + + + {actions.map((action: ActionDisplay) => ( + + {action.count > 1 && {action.count}} + + + + + ))} + + + + ); +}; diff --git a/code/addons/actions/src/containers/ActionLogger/index.tsx b/code/addons/actions/src/containers/ActionLogger/index.tsx index bb88fd7f5b2a..6f5d5f3a1366 100644 --- a/code/addons/actions/src/containers/ActionLogger/index.tsx +++ b/code/addons/actions/src/containers/ActionLogger/index.tsx @@ -63,12 +63,12 @@ export default class ActionLogger extends Component { this.setState((prevState: ActionLoggerState) => { const actions = [...prevState.actions]; - const previous = actions.length && actions[0]; + const previous = actions.length && actions[actions.length - 1]; if (previous && safeDeepEqual(previous.data, action.data)) { previous.count++; } else { action.count = 1; - actions.unshift(action); + actions.push(action); } return { actions: actions.slice(0, action.options.limit) }; }); diff --git a/code/ui/components/src/components/ScrollArea/ScrollArea.tsx b/code/ui/components/src/components/ScrollArea/ScrollArea.tsx index f3f965af8783..cd697523d44d 100644 --- a/code/ui/components/src/components/ScrollArea/ScrollArea.tsx +++ b/code/ui/components/src/components/ScrollArea/ScrollArea.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { forwardRef } from 'react'; import { styled } from '@storybook/theming'; import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'; @@ -75,36 +75,35 @@ const ScrollAreaThumb = styled(ScrollAreaPrimitive.Thumb)(({ theme }) => ({ }, })); -export const ScrollArea = ({ - children, - horizontal = false, - vertical = false, - offset = 2, - scrollbarSize = 6, - className, -}: ScrollAreaProps) => ( - - {children} - {horizontal && ( - - - - )} - {vertical && ( - - - - )} - {horizontal && vertical && } - +export const ScrollArea = forwardRef( + ( + { children, horizontal = false, vertical = false, offset = 2, scrollbarSize = 6, className }, + ref + ) => ( + + {children} + {horizontal && ( + + + + )} + {vertical && ( + + + + )} + {horizontal && vertical && } + + ) ); +ScrollArea.displayName = 'ScrollArea'; From 3e6637379cdd0cfa48c038f373258582c61c67ff Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 17 Apr 2024 13:57:49 +0200 Subject: [PATCH 218/380] e2e tests for save-from-controls --- code/e2e-tests/save-from-controls.spec.ts | 69 +++++++++++++++++++++++ scripts/tasks/e2e-tests-build.ts | 4 +- scripts/tasks/e2e-tests-dev.ts | 1 + 3 files changed, 73 insertions(+), 1 deletion(-) create mode 100644 code/e2e-tests/save-from-controls.spec.ts diff --git a/code/e2e-tests/save-from-controls.spec.ts b/code/e2e-tests/save-from-controls.spec.ts new file mode 100644 index 000000000000..ce50fe8e6c4a --- /dev/null +++ b/code/e2e-tests/save-from-controls.spec.ts @@ -0,0 +1,69 @@ +import { test } from '@playwright/test'; +import process from 'process'; +import { SbPage } from './util'; + +const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001'; +const type = process.env.STORYBOOK_TYPE || 'dev'; + +test.describe('save-from-controls', () => { + test.skip(type === 'build', `Skipping save-from-controls tests for production Storybooks`); + + test('Should be able to update a story', async ({ page }) => { + await page.goto(storybookUrl); + const sbPage = new SbPage(page); + await sbPage.waitUntilLoaded(); + + await sbPage.navigateToStory('example/button', 'primary'); + await sbPage.viewAddonPanel('Controls'); + + // Update an arg + const label = sbPage.panelContent().locator('textarea[name=label]'); + const value = await label.inputValue(); + await label.fill(value + ' Updated'); + + // Assert the footer is shown + await sbPage.panelContent().locator('[data-short-label="Unsaved changes"]').isVisible(); + + // update the story + await sbPage.panelContent().locator('button').getByText('Update story').click(); + + // Assert the file is saved + const notification = await sbPage.page.waitForSelector('[title="Story saved"]'); + await notification.isVisible(); + + // dismiss + await notification.click(); + await notification.isHidden(); + + // cleanup + await label.fill(value); + await sbPage.panelContent().locator('button').getByText('Update story').click(); + await sbPage.page.waitForSelector('[title="Story saved"]'); + }); + + test('Should be able to clone a story', async ({ page }) => { + await page.goto(storybookUrl); + const sbPage = new SbPage(page); + await sbPage.waitUntilLoaded(); + + await sbPage.navigateToStory('example/button', 'primary'); + await sbPage.viewAddonPanel('Controls'); + + // Update an arg + const label = sbPage.panelContent().locator('textarea[name=label]'); + await label.fill((await label.inputValue()) + ' Copied'); + + // Assert the footer is shown + await sbPage.panelContent().locator('[data-short-label="Unsaved changes"]').isVisible(); + + // clone the story + await sbPage.panelContent().locator('button').getByText('Create new story').click(); + + (await sbPage.page.waitForSelector('[placeholder="Story export name"]')).fill('ClonedStory'); + (await sbPage.page.waitForSelector('[type="submit"]')).click(); + + // Assert the file is saved + const notification = await sbPage.page.waitForSelector('[title="Story saved"]'); + await notification.isVisible(); + }); +}); diff --git a/scripts/tasks/e2e-tests-build.ts b/scripts/tasks/e2e-tests-build.ts index a90670fa7258..8e419ddf15cb 100644 --- a/scripts/tasks/e2e-tests-build.ts +++ b/scripts/tasks/e2e-tests-build.ts @@ -3,11 +3,12 @@ import type { Task } from '../task'; import { exec } from '../utils/exec'; import { PORT } from './serve'; -export const e2eTestsBuild: Task & { port: number } = { +export const e2eTestsBuild: Task & { port: number; type: 'build' | 'dev' } = { description: 'Run e2e tests against a sandbox in prod mode', dependsOn: ['serve'], junit: true, port: PORT, + type: 'build', async ready() { return false; }, @@ -29,6 +30,7 @@ export const e2eTestsBuild: Task & { port: number } = { { env: { STORYBOOK_URL: `http://localhost:${this.port}`, + STORYBOOK_TYPE: this.type, STORYBOOK_TEMPLATE_NAME: key, ...(junitFilename && { PLAYWRIGHT_JUNIT_OUTPUT_NAME: junitFilename, diff --git a/scripts/tasks/e2e-tests-dev.ts b/scripts/tasks/e2e-tests-dev.ts index 50dce2123a14..42c6f4c72b70 100644 --- a/scripts/tasks/e2e-tests-dev.ts +++ b/scripts/tasks/e2e-tests-dev.ts @@ -6,4 +6,5 @@ export const e2eTestsDev: typeof e2eTestsBuild = { description: 'Run e2e tests against a sandbox in dev mode', dependsOn: ['dev'], port: PORT, + type: 'dev', }; From 907fb3aa42e73d6b16a3c76b5722da07dc18a31b Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 17 Apr 2024 13:59:29 +0200 Subject: [PATCH 219/380] Fix import in ControlsPanel.tsx --- code/addons/controls/src/ControlsPanel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/addons/controls/src/ControlsPanel.tsx b/code/addons/controls/src/ControlsPanel.tsx index fa6b8e046c6e..6e82b0c0e727 100644 --- a/code/addons/controls/src/ControlsPanel.tsx +++ b/code/addons/controls/src/ControlsPanel.tsx @@ -1,5 +1,5 @@ import { dequal as deepEqual } from 'dequal'; -import React, { useEffect, useMemo, useRef, useState } from 'react'; +import React, { useEffect, useMemo, useState } from 'react'; import { global } from '@storybook/global'; import { useArgs, From beb0fd74d2426bec3b8e411e526aac9fd50f4ccd Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Wed, 17 Apr 2024 14:37:05 +0200 Subject: [PATCH 220/380] add cache.mock entrypoint to nextjs --- code/frameworks/nextjs/package.json | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index b09b2f383295..04757586be87 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -52,21 +52,26 @@ "require": "./dist/export-mocks/index.js", "import": "./dist/export-mocks/index.mjs" }, + "./cache.mock": { + "types": "./dist/export-mocks/cache/index.d.ts", + "require": "./dist/export-mocks/cache/index.js", + "import": "./dist/export-mocks/cache/index.mjs" + }, "./headers.mock": { "types": "./dist/export-mocks/headers/index.d.ts", "require": "./dist/export-mocks/headers/index.js", "import": "./dist/export-mocks/headers/index.mjs" }, - "./router.mock": { - "types": "./dist/export-mocks/router/index.d.ts", - "require": "./dist/export-mocks/router/index.js", - "import": "./dist/export-mocks/router/index.mjs" - }, "./navigation.mock": { "types": "./dist/export-mocks/navigation/index.d.ts", "require": "./dist/export-mocks/navigation/index.js", "import": "./dist/export-mocks/navigation/index.mjs" }, + "./router.mock": { + "types": "./dist/export-mocks/router/index.d.ts", + "require": "./dist/export-mocks/router/index.js", + "import": "./dist/export-mocks/router/index.mjs" + }, "./package.json": "./package.json" }, "main": "dist/index.js", From 10b556c8b09b70656377a3317e526e890d972cec Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 17 Apr 2024 14:37:43 +0200 Subject: [PATCH 221/380] Fix notification selector in save-from-controls.spec.ts --- code/e2e-tests/save-from-controls.spec.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/code/e2e-tests/save-from-controls.spec.ts b/code/e2e-tests/save-from-controls.spec.ts index ce50fe8e6c4a..67f4c06a982f 100644 --- a/code/e2e-tests/save-from-controls.spec.ts +++ b/code/e2e-tests/save-from-controls.spec.ts @@ -63,7 +63,8 @@ test.describe('save-from-controls', () => { (await sbPage.page.waitForSelector('[type="submit"]')).click(); // Assert the file is saved - const notification = await sbPage.page.waitForSelector('[title="Story saved"]'); + const notification = await sbPage.page.waitForSelector('[title="Story created"]'); await notification.isVisible(); + await notification.click(); }); }); From a3565f2d544cfc124b38fc4b450190c2e49218c9 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Wed, 17 Apr 2024 15:16:35 +0200 Subject: [PATCH 222/380] Address review --- code/addons/actions/src/components/ActionLogger/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/code/addons/actions/src/components/ActionLogger/index.tsx b/code/addons/actions/src/components/ActionLogger/index.tsx index 4244f75cf449..ec2e6ca2e102 100644 --- a/code/addons/actions/src/components/ActionLogger/index.tsx +++ b/code/addons/actions/src/components/ActionLogger/index.tsx @@ -46,6 +46,7 @@ export const ActionLogger = ({ actions, onClear }: ActionLoggerProps) => { const wasAtBottom = wrapper && wrapper.scrollHeight - wrapper.scrollTop === wrapper.clientHeight; useEffect(() => { + // Scroll to bottom, when the action panel was already scrolled down if (wasAtBottom) wrapperRef.current.scrollTop = wrapperRef.current.scrollHeight; }, [wasAtBottom, actions.length]); From 80dd30395a78149772041902387c33691a858f0c Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 17 Apr 2024 15:21:03 +0200 Subject: [PATCH 223/380] Fix notification selector in save-from-controls.spec.ts --- code/e2e-tests/save-from-controls.spec.ts | 28 +++++++---------------- 1 file changed, 8 insertions(+), 20 deletions(-) diff --git a/code/e2e-tests/save-from-controls.spec.ts b/code/e2e-tests/save-from-controls.spec.ts index 67f4c06a982f..ccdcd4148869 100644 --- a/code/e2e-tests/save-from-controls.spec.ts +++ b/code/e2e-tests/save-from-controls.spec.ts @@ -28,30 +28,18 @@ test.describe('save-from-controls', () => { await sbPage.panelContent().locator('button').getByText('Update story').click(); // Assert the file is saved - const notification = await sbPage.page.waitForSelector('[title="Story saved"]'); - await notification.isVisible(); + const notification1 = await sbPage.page.waitForSelector('[title="Story saved"]'); + await notification1.isVisible(); // dismiss - await notification.click(); - await notification.isHidden(); - - // cleanup - await label.fill(value); - await sbPage.panelContent().locator('button').getByText('Update story').click(); - await sbPage.page.waitForSelector('[title="Story saved"]'); - }); - - test('Should be able to clone a story', async ({ page }) => { - await page.goto(storybookUrl); - const sbPage = new SbPage(page); - await sbPage.waitUntilLoaded(); + await notification1.click(); + await notification1.isHidden(); await sbPage.navigateToStory('example/button', 'primary'); await sbPage.viewAddonPanel('Controls'); // Update an arg - const label = sbPage.panelContent().locator('textarea[name=label]'); - await label.fill((await label.inputValue()) + ' Copied'); + await label.fill(value + ' Copied'); // Assert the footer is shown await sbPage.panelContent().locator('[data-short-label="Unsaved changes"]').isVisible(); @@ -63,8 +51,8 @@ test.describe('save-from-controls', () => { (await sbPage.page.waitForSelector('[type="submit"]')).click(); // Assert the file is saved - const notification = await sbPage.page.waitForSelector('[title="Story created"]'); - await notification.isVisible(); - await notification.click(); + const notification2 = await sbPage.page.waitForSelector('[title="Story created"]'); + await notification2.isVisible(); + await notification2.click(); }); }); From 3816841a9d32a219ac8892b02315425e9ac54446 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 17 Apr 2024 15:53:11 +0200 Subject: [PATCH 224/380] Fix submit button click in save-from-controls.spec.ts --- code/e2e-tests/save-from-controls.spec.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/code/e2e-tests/save-from-controls.spec.ts b/code/e2e-tests/save-from-controls.spec.ts index ccdcd4148869..7849c9e6bbf4 100644 --- a/code/e2e-tests/save-from-controls.spec.ts +++ b/code/e2e-tests/save-from-controls.spec.ts @@ -48,7 +48,8 @@ test.describe('save-from-controls', () => { await sbPage.panelContent().locator('button').getByText('Create new story').click(); (await sbPage.page.waitForSelector('[placeholder="Story export name"]')).fill('ClonedStory'); - (await sbPage.page.waitForSelector('[type="submit"]')).click(); + const submit = await sbPage.page.waitForSelector('[type="submit"]'); + await submit.click(); // Assert the file is saved const notification2 = await sbPage.page.waitForSelector('[title="Story created"]'); From 022251567868badbdc29d9daa9e5d10bad08adef Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 17 Apr 2024 16:20:24 +0200 Subject: [PATCH 225/380] Fix input fill in save-from-controls.spec.ts --- code/e2e-tests/save-from-controls.spec.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/code/e2e-tests/save-from-controls.spec.ts b/code/e2e-tests/save-from-controls.spec.ts index 7849c9e6bbf4..4a8cbafe0f16 100644 --- a/code/e2e-tests/save-from-controls.spec.ts +++ b/code/e2e-tests/save-from-controls.spec.ts @@ -47,7 +47,8 @@ test.describe('save-from-controls', () => { // clone the story await sbPage.panelContent().locator('button').getByText('Create new story').click(); - (await sbPage.page.waitForSelector('[placeholder="Story export name"]')).fill('ClonedStory'); + const input = await sbPage.page.waitForSelector('[placeholder="Story export name"]'); + await input.fill('ClonedStory'); const submit = await sbPage.page.waitForSelector('[type="submit"]'); await submit.click(); From 3d10cd73543de51836c5ecae588f790014114e68 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 17 Apr 2024 16:48:29 +0200 Subject: [PATCH 226/380] Refactor save-from-controls.spec.ts and ControlsPanel.tsx --- code/e2e-tests/save-from-controls.spec.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/code/e2e-tests/save-from-controls.spec.ts b/code/e2e-tests/save-from-controls.spec.ts index 4a8cbafe0f16..95d61692a7e8 100644 --- a/code/e2e-tests/save-from-controls.spec.ts +++ b/code/e2e-tests/save-from-controls.spec.ts @@ -35,9 +35,6 @@ test.describe('save-from-controls', () => { await notification1.click(); await notification1.isHidden(); - await sbPage.navigateToStory('example/button', 'primary'); - await sbPage.viewAddonPanel('Controls'); - // Update an arg await label.fill(value + ' Copied'); From 60fb5baa6759280d9b3c7d743995c20c47f90ecc Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 17 Apr 2024 17:44:47 +0200 Subject: [PATCH 227/380] Refactor save-from-controls.spec.ts and ControlsPanel.tsx --- code/e2e-tests/save-from-controls.spec.ts | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/code/e2e-tests/save-from-controls.spec.ts b/code/e2e-tests/save-from-controls.spec.ts index 95d61692a7e8..e086171b0647 100644 --- a/code/e2e-tests/save-from-controls.spec.ts +++ b/code/e2e-tests/save-from-controls.spec.ts @@ -8,7 +8,14 @@ const type = process.env.STORYBOOK_TYPE || 'dev'; test.describe('save-from-controls', () => { test.skip(type === 'build', `Skipping save-from-controls tests for production Storybooks`); - test('Should be able to update a story', async ({ page }) => { + test('Should be able to update a story', async ({ page, browserName }) => { + // this is needed because the e2e test will generate a new file in the system + // which we dont know of its location (it runs in different sandboxes) + // so we just create a random id to make it easier to run tests + const id = Math.random().toString(36).substring(7); + + test.skip(browserName !== 'chromium', `Skipping save-from-controls tests for ${browserName}`); + await page.goto(storybookUrl); const sbPage = new SbPage(page); await sbPage.waitUntilLoaded(); @@ -19,13 +26,13 @@ test.describe('save-from-controls', () => { // Update an arg const label = sbPage.panelContent().locator('textarea[name=label]'); const value = await label.inputValue(); - await label.fill(value + ' Updated'); + await label.fill(value + ' Updated ' + id); // Assert the footer is shown await sbPage.panelContent().locator('[data-short-label="Unsaved changes"]').isVisible(); // update the story - await sbPage.panelContent().locator('button').getByText('Update story').click(); + await sbPage.panelContent().locator('[aria-label="Save changes to story"]').click(); // Assert the file is saved const notification1 = await sbPage.page.waitForSelector('[title="Story saved"]'); @@ -42,10 +49,13 @@ test.describe('save-from-controls', () => { await sbPage.panelContent().locator('[data-short-label="Unsaved changes"]').isVisible(); // clone the story - await sbPage.panelContent().locator('button').getByText('Create new story').click(); + await sbPage + .panelContent() + .locator('[aria-label="Create new story with these settings"]') + .click(); const input = await sbPage.page.waitForSelector('[placeholder="Story export name"]'); - await input.fill('ClonedStory'); + await input.fill('ClonedStory' + id); const submit = await sbPage.page.waitForSelector('[type="submit"]'); await submit.click(); From 139e8c96c84799351b93e820fcdf85005fa42fbe Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Wed, 17 Apr 2024 16:22:33 +0200 Subject: [PATCH 228/380] Prevent color swatch from showing on top of SaveStory bar --- code/addons/controls/src/SaveStory.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/code/addons/controls/src/SaveStory.tsx b/code/addons/controls/src/SaveStory.tsx index 8a7368ba9d6c..35123ad296b4 100644 --- a/code/addons/controls/src/SaveStory.tsx +++ b/code/addons/controls/src/SaveStory.tsx @@ -27,6 +27,7 @@ const Container = styled.div({ bottom: 0, height: 39, overflow: 'hidden', + zIndex: 1, }); const Bar = styled(BaseBar)(({ theme }) => ({ From 8390ec5287d2eda0f33ac9afc4dd19c7cc97c97d Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Wed, 17 Apr 2024 16:35:34 +0200 Subject: [PATCH 229/380] Avoid transparent background to prevent controls from showing through --- code/addons/controls/src/SaveStory.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/code/addons/controls/src/SaveStory.tsx b/code/addons/controls/src/SaveStory.tsx index 35123ad296b4..474d74b89409 100644 --- a/code/addons/controls/src/SaveStory.tsx +++ b/code/addons/controls/src/SaveStory.tsx @@ -17,7 +17,7 @@ const slideIn = keyframes({ }); const highlight = keyframes({ - from: { background: 'var(--highlight-bg-color)' }, + from: { background: '#E0F0FF' }, to: {}, }); @@ -31,7 +31,6 @@ const Container = styled.div({ }); const Bar = styled(BaseBar)(({ theme }) => ({ - '--highlight-bg-color': theme.background.hoverable, display: 'flex', flexDirection: 'row-reverse', // hide Info rather than Actions on overflow alignItems: 'center', From f34265b220f215947388f093812ef2cd93d16fd8 Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Wed, 17 Apr 2024 17:43:48 +0200 Subject: [PATCH 230/380] Only send updated args when saving story, to prevent meta args from being added --- code/addons/controls/src/manager.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/code/addons/controls/src/manager.tsx b/code/addons/controls/src/manager.tsx index eeab03b1c456..b282c15b40e1 100644 --- a/code/addons/controls/src/manager.tsx +++ b/code/addons/controls/src/manager.tsx @@ -6,6 +6,7 @@ import { addons, types, useArgTypes } from '@storybook/manager-api'; import { color } from '@storybook/theming'; import { ControlsPanel } from './ControlsPanel'; import { ADDON_ID, PARAM_KEY } from './constants'; +import type { Args } from '@storybook/csf'; function Title() { const rows = useArgTypes(); @@ -64,7 +65,11 @@ addons.register(ADDON_ID, (api) => { const data = api.getCurrentStoryData(); if (data.type !== 'story') throw new Error('Not a story'); return requestResponse(api, SAVE_STORY_REQUEST, SAVE_STORY_RESPONSE, { - args: data.args, + // Only send updated args + args: Object.entries(data.args || {}).reduce((acc, [key, value]) => { + if (value !== data.initialArgs?.[key]) acc[key] = value; + return acc; + }, {}), csfId: data.id, importPath: data.importPath, }); From fa3d3bebd0bfb5707a72e364b7cf2a003962c991 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 17 Apr 2024 17:48:07 +0200 Subject: [PATCH 231/380] Fix typo in save-from-controls.spec.ts --- code/e2e-tests/save-from-controls.spec.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/code/e2e-tests/save-from-controls.spec.ts b/code/e2e-tests/save-from-controls.spec.ts index e086171b0647..fe124846ce49 100644 --- a/code/e2e-tests/save-from-controls.spec.ts +++ b/code/e2e-tests/save-from-controls.spec.ts @@ -6,11 +6,12 @@ const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001'; const type = process.env.STORYBOOK_TYPE || 'dev'; test.describe('save-from-controls', () => { + test.describe.configure({ mode: 'serial' }); test.skip(type === 'build', `Skipping save-from-controls tests for production Storybooks`); test('Should be able to update a story', async ({ page, browserName }) => { // this is needed because the e2e test will generate a new file in the system - // which we dont know of its location (it runs in different sandboxes) + // which we don't know of its location (it runs in different sandboxes) // so we just create a random id to make it easier to run tests const id = Math.random().toString(36).substring(7); From 331da20cdb18dcbcd5a479168b8e2bbab32f955b Mon Sep 17 00:00:00 2001 From: Mikhail Bashkirov Date: Wed, 17 Apr 2024 18:13:10 +0200 Subject: [PATCH 232/380] fix providerImportSource extension --- code/addons/docs/src/plugins/mdx-plugin.ts | 2 +- code/addons/docs/src/preset.ts | 2 +- code/addons/essentials/src/docs/preset.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/code/addons/docs/src/plugins/mdx-plugin.ts b/code/addons/docs/src/plugins/mdx-plugin.ts index a75194fa7309..2ff606215831 100644 --- a/code/addons/docs/src/plugins/mdx-plugin.ts +++ b/code/addons/docs/src/plugins/mdx-plugin.ts @@ -32,7 +32,7 @@ export async function mdxPlugin(options: Options): Promise { mdxCompileOptions: { providerImportSource: join( dirname(require.resolve('@storybook/addon-docs/package.json')), - '/dist/shims/mdx-react-shim' + '/dist/shims/mdx-react-shim.mjs' ), ...mdxPluginOptions?.mdxCompileOptions, rehypePlugins: [ diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts index 4b8811935ec9..977c2228fa85 100644 --- a/code/addons/docs/src/preset.ts +++ b/code/addons/docs/src/preset.ts @@ -45,7 +45,7 @@ async function webpack( mdxCompileOptions: { providerImportSource: join( dirname(require.resolve('@storybook/addon-docs/package.json')), - '/dist/shims/mdx-react-shim' + '/dist/shims/mdx-react-shim.mjs' ), ...mdxPluginOptions.mdxCompileOptions, rehypePlugins: [ diff --git a/code/addons/essentials/src/docs/preset.ts b/code/addons/essentials/src/docs/preset.ts index ffb6047facab..5c7409f65b14 100644 --- a/code/addons/essentials/src/docs/preset.ts +++ b/code/addons/essentials/src/docs/preset.ts @@ -5,7 +5,7 @@ export * from '@storybook/addon-docs/dist/preset'; export const mdxLoaderOptions = async (config: any) => { config.mdxCompileOptions.providerImportSource = join( dirname(require.resolve('@storybook/addon-docs/package.json')), - '/dist/shims/mdx-react-shim' + '/dist/shims/mdx-react-shim.mjs' ); return config; }; From 6c086140c8d5e62c17e21cbd2c22a7981bd6bb2a Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 17 Apr 2024 18:20:41 +0200 Subject: [PATCH 233/380] Refactor save-from-controls.spec.ts and ControlsPanel.tsx --- code/e2e-tests/save-from-controls.spec.ts | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/code/e2e-tests/save-from-controls.spec.ts b/code/e2e-tests/save-from-controls.spec.ts index fe124846ce49..de64cea7c990 100644 --- a/code/e2e-tests/save-from-controls.spec.ts +++ b/code/e2e-tests/save-from-controls.spec.ts @@ -33,7 +33,7 @@ test.describe('save-from-controls', () => { await sbPage.panelContent().locator('[data-short-label="Unsaved changes"]').isVisible(); // update the story - await sbPage.panelContent().locator('[aria-label="Save changes to story"]').click(); + await sbPage.panelContent().locator('button').getByText('Update story').click(); // Assert the file is saved const notification1 = await sbPage.page.waitForSelector('[title="Story saved"]'); @@ -50,10 +50,7 @@ test.describe('save-from-controls', () => { await sbPage.panelContent().locator('[data-short-label="Unsaved changes"]').isVisible(); // clone the story - await sbPage - .panelContent() - .locator('[aria-label="Create new story with these settings"]') - .click(); + await sbPage.panelContent().locator('button').getByText('Create new story').click(); const input = await sbPage.page.waitForSelector('[placeholder="Story export name"]'); await input.fill('ClonedStory' + id); From 43be9655c0de56ce9a177d289cf68d569465f401 Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Wed, 17 Apr 2024 18:44:54 +0200 Subject: [PATCH 234/380] Use deepEqual rather than equality check --- code/addons/controls/src/manager.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/code/addons/controls/src/manager.tsx b/code/addons/controls/src/manager.tsx index b282c15b40e1..228a8ae31e66 100644 --- a/code/addons/controls/src/manager.tsx +++ b/code/addons/controls/src/manager.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { dequal as deepEqual } from 'dequal'; import { AddonPanel, Badge, Spaced } from '@storybook/components'; import { SAVE_STORY_REQUEST, SAVE_STORY_RESPONSE } from '@storybook/core-events'; import type { API } from '@storybook/manager-api'; @@ -67,7 +68,7 @@ addons.register(ADDON_ID, (api) => { return requestResponse(api, SAVE_STORY_REQUEST, SAVE_STORY_RESPONSE, { // Only send updated args args: Object.entries(data.args || {}).reduce((acc, [key, value]) => { - if (value !== data.initialArgs?.[key]) acc[key] = value; + if (!deepEqual(value, data.initialArgs?.[key])) acc[key] = value; return acc; }, {}), csfId: data.id, From 944ff5fb996dc928de94b7c889df476acd9568d7 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 18 Apr 2024 08:48:32 +0200 Subject: [PATCH 235/380] Introduce useDebounce hook --- .../core-events/src/data/create-new-story.ts | 18 +++++++++++++ .../src/data/file-component-search.ts | 25 +++++++++++++++++++ code/lib/core-events/src/data/save-story.ts | 22 ++++++++++++++++ code/ui/manager/src/hooks/useDebounce.ts | 17 +++++++++++++ 4 files changed, 82 insertions(+) create mode 100644 code/lib/core-events/src/data/create-new-story.ts create mode 100644 code/lib/core-events/src/data/file-component-search.ts create mode 100644 code/lib/core-events/src/data/save-story.ts create mode 100644 code/ui/manager/src/hooks/useDebounce.ts diff --git a/code/lib/core-events/src/data/create-new-story.ts b/code/lib/core-events/src/data/create-new-story.ts new file mode 100644 index 000000000000..7c85817e0cfe --- /dev/null +++ b/code/lib/core-events/src/data/create-new-story.ts @@ -0,0 +1,18 @@ +export interface CreateNewStoryPayload { + // The filepath of the component for which the Story should be generated for (relative to the project root) + componentFilePath: string; + // The name of the exported component + componentExportName: string; + // is default export + componentIsDefaultExport: boolean; +} + +export interface CreateNewStoryResult { + success: true | false; + result: null | { + storyId: string; + storyFilePath: string; + exportedStoryName: string; + }; + error: null | string; +} diff --git a/code/lib/core-events/src/data/file-component-search.ts b/code/lib/core-events/src/data/file-component-search.ts new file mode 100644 index 000000000000..72877a07c55d --- /dev/null +++ b/code/lib/core-events/src/data/file-component-search.ts @@ -0,0 +1,25 @@ +export interface FileComponentSearchPayload { + // A regular string or a glob pattern + searchQuery?: string; +} + +export interface FileComponentSearchResult { + success: true | false; + result: null | { + searchQuery: string; + files: Array<{ + // The filepath relative to the project root + filepath: string; + // The search query - Helps to identify the event on the frontend + searchQuery: string; + // A list of exported components + exportedComponents: Array<{ + // the name of the exported component + name: string; + // True, if the exported component is a default export + default: boolean; + }>; + }> | null; + }; + error: null | string; +} diff --git a/code/lib/core-events/src/data/save-story.ts b/code/lib/core-events/src/data/save-story.ts new file mode 100644 index 000000000000..47f7e1ab5d05 --- /dev/null +++ b/code/lib/core-events/src/data/save-story.ts @@ -0,0 +1,22 @@ +export interface SaveStoryRequest { + id: string; + payload: { + csfId: string; + importPath: string; + args: Record; + name?: string; + }; +} + +export type SaveStoryResponse = ( + | { id: string; success: true } + | { id: string; success: false; error: string } +) & { + payload: { + csfId: string; + newStoryId?: string; + newStoryName?: string; + sourceFileName?: string; + sourceStoryName?: string; + }; +}; diff --git a/code/ui/manager/src/hooks/useDebounce.ts b/code/ui/manager/src/hooks/useDebounce.ts new file mode 100644 index 000000000000..48f64b82953c --- /dev/null +++ b/code/ui/manager/src/hooks/useDebounce.ts @@ -0,0 +1,17 @@ +import { useEffect, useState } from 'react'; + +export function useDebounce(value: T, delay: number): T { + const [debouncedValue, setDebouncedValue] = useState(value); + + useEffect(() => { + const handler = setTimeout(() => { + setDebouncedValue(value); + }, delay); + + return () => { + clearTimeout(handler); + }; + }, [value, delay]); + + return debouncedValue; +} From 333329acfe5ad00b0aee99c24b9ff61e6912830f Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 18 Apr 2024 08:52:01 +0200 Subject: [PATCH 236/380] Export request and response interfaces for some channels WIP --- code/lib/core-events/src/index.ts | 20 +++++---- .../create-new-story-channel.ts | 18 ++++---- .../src/server-channel/file-search-channel.ts | 42 +++++-------------- .../src/utils/get-new-story-file.ts | 12 +----- .../src/utils/save-story/save-story.ts | 24 +---------- code/ui/manager/src/globals/exports.ts | 8 ++-- 6 files changed, 40 insertions(+), 84 deletions(-) diff --git a/code/lib/core-events/src/index.ts b/code/lib/core-events/src/index.ts index 37452d0a8d76..0a23e056927a 100644 --- a/code/lib/core-events/src/index.ts +++ b/code/lib/core-events/src/index.ts @@ -74,12 +74,12 @@ enum events { TOGGLE_WHATS_NEW_NOTIFICATIONS = 'toggleWhatsNewNotifications', TELEMETRY_ERROR = 'telemetryError', - FILE_COMPONENT_SEARCH = 'fileComponentSearch', - FILE_COMPONENT_SEARCH_RESULT = 'fileComponentSearchResult', + FILE_COMPONENT_SEARCH_REQUEST = 'fileComponentSearchRequest', + FILE_COMPONENT_SEARCH_RESPONSE = 'fileComponentSearchResponse', SAVE_STORY_REQUEST = 'saveStoryRequest', SAVE_STORY_RESPONSE = 'saveStoryResponse', - CREATE_NEW_STORYFILE = 'createNewStoryfile', - CREATE_NEW_STORYFILE_RESULT = 'createNewStoryfileResult', + CREATE_NEW_STORYFILE_REQUEST = 'createNewStoryfileRequest', + CREATE_NEW_STORYFILE_RESPONSE = 'createNewStoryfileResponse', } // Enables: `import Events from ...` @@ -91,13 +91,13 @@ export const { CHANNEL_WS_DISCONNECT, CHANNEL_CREATED, CONFIG_ERROR, - CREATE_NEW_STORYFILE, - CREATE_NEW_STORYFILE_RESULT, + CREATE_NEW_STORYFILE_REQUEST, + CREATE_NEW_STORYFILE_RESPONSE, CURRENT_STORY_WAS_SET, DOCS_PREPARED, DOCS_RENDERED, - FILE_COMPONENT_SEARCH, - FILE_COMPONENT_SEARCH_RESULT, + FILE_COMPONENT_SEARCH_REQUEST, + FILE_COMPONENT_SEARCH_RESPONSE, FORCE_RE_RENDER, FORCE_REMOUNT, GLOBALS_UPDATED, @@ -142,6 +142,10 @@ export const { SAVE_STORY_RESPONSE, } = events; +export * from './data/create-new-story'; +export * from './data/file-component-search'; +export * from './data/save-story'; + export interface WhatsNewCache { lastDismissedPost?: string; lastReadPost?: string; diff --git a/code/lib/core-server/src/server-channel/create-new-story-channel.ts b/code/lib/core-server/src/server-channel/create-new-story-channel.ts index 7546c5910a70..e93694c7f097 100644 --- a/code/lib/core-server/src/server-channel/create-new-story-channel.ts +++ b/code/lib/core-server/src/server-channel/create-new-story-channel.ts @@ -1,6 +1,10 @@ import type { Options } from '@storybook/types'; import type { Channel } from '@storybook/channels'; -import { CREATE_NEW_STORYFILE, CREATE_NEW_STORYFILE_RESULT } from '@storybook/core-events'; +import type { CreateNewStoryPayload, CreateNewStoryResult } from '@storybook/core-events'; +import { + CREATE_NEW_STORYFILE_REQUEST, + CREATE_NEW_STORYFILE_RESPONSE, +} from '@storybook/core-events'; import fs from 'node:fs/promises'; import type { NewStoryData } from '../utils/get-new-story-file'; import { getNewStoryFile } from '../utils/get-new-story-file'; @@ -20,7 +24,7 @@ export function initCreateNewStoryChannel(channel: Channel, options: Options) { /** * Listens for events to create a new storyfile */ - channel.on(CREATE_NEW_STORYFILE, async (data: CreateNewStoryPayload) => { + channel.on(CREATE_NEW_STORYFILE_REQUEST, async (data: CreateNewStoryPayload) => { try { const { storyFilePath, exportedStoryName, storyFileContent } = await getNewStoryFile( data, @@ -31,19 +35,19 @@ export function initCreateNewStoryChannel(channel: Channel, options: Options) { const storyId = await getStoryId({ storyFilePath, exportedStoryName }, options); - channel.emit(CREATE_NEW_STORYFILE_RESULT, { + channel.emit(CREATE_NEW_STORYFILE_RESPONSE, { success: true, result: { storyId, }, error: null, - } satisfies Result); + } satisfies CreateNewStoryResult); } catch (e: any) { - channel.emit(CREATE_NEW_STORYFILE_RESULT, { + channel.emit(CREATE_NEW_STORYFILE_RESPONSE, { success: false, result: null, - error: `An error occurred while creating a new story:\n${e?.message}`, - } satisfies Result); + error: e?.message, + } satisfies CreateNewStoryResult); } }); diff --git a/code/lib/core-server/src/server-channel/file-search-channel.ts b/code/lib/core-server/src/server-channel/file-search-channel.ts index 3f2884867447..6d26aaede94a 100644 --- a/code/lib/core-server/src/server-channel/file-search-channel.ts +++ b/code/lib/core-server/src/server-channel/file-search-channel.ts @@ -10,39 +10,17 @@ import fs from 'fs/promises'; import { getParser } from '../utils/parser'; import { searchFiles } from '../utils/search-files'; -import { FILE_COMPONENT_SEARCH, FILE_COMPONENT_SEARCH_RESULT } from '@storybook/core-events'; - -interface Data { - // A regular string or a glob pattern - searchQuery?: string; -} - -interface SearchResult { - success: true | false; - result: null | { - searchQuery: string; - files: Array<{ - // The filepath relative to the project root - filepath: string; - // The search query - Helps to identify the event on the frontend - searchQuery: string; - // A list of exported components - exportedComponents: Array<{ - // the name of the exported component - name: string; - // True, if the exported component is a default export - default: boolean; - }>; - }> | null; - }; - error: null | string; -} +import type { FileComponentSearchPayload, FileComponentSearchResult } from '@storybook/core-events'; +import { + FILE_COMPONENT_SEARCH_REQUEST, + FILE_COMPONENT_SEARCH_RESPONSE, +} from '@storybook/core-events'; export function initFileSearchChannel(channel: Channel, options: Options) { /** * Listens for a search query event and searches for files in the project */ - channel.on(FILE_COMPONENT_SEARCH, async (data: Data) => { + channel.on(FILE_COMPONENT_SEARCH_REQUEST, async (data: FileComponentSearchPayload) => { try { const searchQuery = data?.searchQuery; @@ -82,23 +60,23 @@ export function initFileSearchChannel(channel: Channel, options: Options) { } }); - channel.emit(FILE_COMPONENT_SEARCH_RESULT, { + channel.emit(FILE_COMPONENT_SEARCH_RESPONSE, { success: true, result: { searchQuery, files: await Promise.all(entries), }, error: null, - } as SearchResult); + } as FileComponentSearchResult); } catch (e: any) { /** * Emits the search result event with an error message */ - channel.emit(FILE_COMPONENT_SEARCH_RESULT, { + channel.emit(FILE_COMPONENT_SEARCH_RESPONSE, { success: false, result: null, error: `An error occurred while searching for components in the project.\n${e?.message}`, - } as SearchResult); + } as FileComponentSearchResult); } }); diff --git a/code/lib/core-server/src/utils/get-new-story-file.ts b/code/lib/core-server/src/utils/get-new-story-file.ts index cfec1dd52152..96e337bc6e93 100644 --- a/code/lib/core-server/src/utils/get-new-story-file.ts +++ b/code/lib/core-server/src/utils/get-new-story-file.ts @@ -4,18 +4,10 @@ import path from 'node:path'; import fs from 'node:fs'; import { getTypeScriptTemplateForNewStoryFile } from './new-story-templates/typescript'; import { getJavaScriptTemplateForNewStoryFile } from './new-story-templates/javascript'; - -export interface NewStoryData { - // The filepath of the component for which the Story should be generated for (relative to the project root) - componentFilePath: string; - // The name of the exported component - componentExportName: string; - // is default export - componentIsDefaultExport: boolean; -} +import type { CreateNewStoryPayload } from '@storybook/core-events'; export async function getNewStoryFile( - { componentFilePath, componentExportName, componentIsDefaultExport }: NewStoryData, + { componentFilePath, componentExportName, componentIsDefaultExport }: CreateNewStoryPayload, options: Options ) { const isTypescript = /\.(ts|tsx|mts|cts)$/.test(componentFilePath); diff --git a/code/lib/core-server/src/utils/save-story/save-story.ts b/code/lib/core-server/src/utils/save-story/save-story.ts index 6d2622f10e17..7b4c1a91d85f 100644 --- a/code/lib/core-server/src/utils/save-story/save-story.ts +++ b/code/lib/core-server/src/utils/save-story/save-story.ts @@ -1,5 +1,6 @@ /* eslint-disable no-underscore-dangle */ import type { Channel } from '@storybook/channels'; +import type { SaveStoryRequest, SaveStoryResponse } from '@storybook/core-events'; import { SAVE_STORY_REQUEST, SAVE_STORY_RESPONSE, STORY_RENDERED } from '@storybook/core-events'; import { storyNameFromExport, toId } from '@storybook/csf'; import { readCsf, writeCsf } from '@storybook/csf-tools'; @@ -11,29 +12,6 @@ import type { CoreConfig, Options } from '@storybook/types'; import { telemetry } from '@storybook/telemetry'; import { logger } from '@storybook/node-logger'; -interface SaveStoryRequest { - id: string; - payload: { - csfId: string; - importPath: string; - args: Record; - name?: string; - }; -} - -type SaveStoryResponse = ( - | { id: string; success: true } - | { id: string; success: false; error: string } -) & { - payload: { - csfId: string; - newStoryId?: string; - newStoryName?: string; - sourceFileName?: string; - sourceStoryName?: string; - }; -}; - class SaveStoryError extends Error {} export function initializeSaveStory(channel: Channel, options: Options, coreConfig: CoreConfig) { diff --git a/code/ui/manager/src/globals/exports.ts b/code/ui/manager/src/globals/exports.ts index f76f146adca5..206ce13b3473 100644 --- a/code/ui/manager/src/globals/exports.ts +++ b/code/ui/manager/src/globals/exports.ts @@ -134,13 +134,13 @@ export default { 'CHANNEL_CREATED', 'CHANNEL_WS_DISCONNECT', 'CONFIG_ERROR', - 'CREATE_NEW_STORYFILE', - 'CREATE_NEW_STORYFILE_RESULT', + 'CREATE_NEW_STORYFILE_REQUEST', + 'CREATE_NEW_STORYFILE_RESPONSE', 'CURRENT_STORY_WAS_SET', 'DOCS_PREPARED', 'DOCS_RENDERED', - 'FILE_COMPONENT_SEARCH', - 'FILE_COMPONENT_SEARCH_RESULT', + 'FILE_COMPONENT_SEARCH_REQUEST', + 'FILE_COMPONENT_SEARCH_RESPONSE', 'FORCE_REMOUNT', 'FORCE_RE_RENDER', 'GLOBALS_UPDATED', From 0c19a46e61960808a29a37f864fd26f6b77c3292 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 18 Apr 2024 08:53:33 +0200 Subject: [PATCH 237/380] Change generic parser to use @babel/parser es-module-parser was not supporting jsx syntax. Other fast alternatives like acorn were evaluated, but either the parsing wasn't sufficient or the parser wasn't maintained anymore. @babel/parser fits our requirements the best, although it might be one of the slower AST parsers. --- code/lib/core-server/package.json | 3 +- .../file-search-channel.test.ts | 25 ++-- .../src/es-module.stories.js | 0 .../src/utils/parser/generic-parser.test.ts | 28 ---- .../src/utils/parser/generic-parser.ts | 141 +++++++++++++----- 5 files changed, 115 insertions(+), 82 deletions(-) create mode 100644 code/lib/core-server/src/utils/__search-files-tests__/src/es-module.stories.js diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index b10fdf945447..9261d64f6e48 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -57,6 +57,7 @@ "dependencies": { "@aw-web-design/x-default-browser": "1.4.126", "@babel/core": "^7.23.9", + "@babel/parser": "^7.24.4", "@discoveryjs/json-ext": "^0.5.3", "@storybook/builder-manager": "workspace:*", "@storybook/channels": "workspace:*", @@ -79,12 +80,10 @@ "@types/semver": "^7.3.4", "better-opn": "^3.0.2", "chalk": "^4.1.0", - "cjs-module-lexer": "^1.2.3", "cli-table3": "^0.6.1", "compression": "^1.7.4", "detect-port": "^1.3.0", "diff": "^5.2.0", - "es-module-lexer": "^1.5.0", "express": "^4.17.3", "fs-extra": "^11.1.0", "globby": "^14.0.1", diff --git a/code/lib/core-server/src/server-channel/file-search-channel.test.ts b/code/lib/core-server/src/server-channel/file-search-channel.test.ts index e967910dd6c7..3316fab5f8dd 100644 --- a/code/lib/core-server/src/server-channel/file-search-channel.test.ts +++ b/code/lib/core-server/src/server-channel/file-search-channel.test.ts @@ -43,7 +43,7 @@ describe('file-search-channel', () => { describe('initFileSearchChannel', async () => { it('should emit search result event with the search result', async () => { const mockOptions = {}; - const data = { searchQuery: 'commonjs' }; + const data = { searchQuery: 'es-module' }; initFileSearchChannel(mockChannel, mockOptions as any); @@ -70,38 +70,33 @@ describe('file-search-channel', () => { exportedComponents: [ { default: false, - name: './commonjs', + name: 'p', }, - ], - filepath: 'src/commonjs-module-default.js', - }, - { - exportedComponents: [ { default: false, - name: 'a', + name: 'q', }, { default: false, - name: 'b', + name: 'C', }, { default: false, - name: 'c', + name: 'externalName', }, { default: false, - name: 'd', + name: 'ns', }, { - default: false, - name: 'e', + default: true, + name: 'default', }, ], - filepath: 'src/commonjs-module.js', + filepath: 'src/es-module.js', }, ], - searchQuery: 'commonjs', + searchQuery: 'es-module', }, success: true, }); diff --git a/code/lib/core-server/src/utils/__search-files-tests__/src/es-module.stories.js b/code/lib/core-server/src/utils/__search-files-tests__/src/es-module.stories.js new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/code/lib/core-server/src/utils/parser/generic-parser.test.ts b/code/lib/core-server/src/utils/parser/generic-parser.test.ts index 6d3ff96e15b0..61bba2739f72 100644 --- a/code/lib/core-server/src/utils/parser/generic-parser.test.ts +++ b/code/lib/core-server/src/utils/parser/generic-parser.test.ts @@ -8,34 +8,6 @@ const genericParser = new GenericParser(); const TEST_DIR = path.join(__dirname, '..', '__search-files-tests__'); describe('generic-parser', () => { - it('should correctly return exports from CommonJS files', async () => { - const content = fs.readFileSync(path.join(TEST_DIR, 'src', 'commonjs-module.js'), 'utf-8'); - const { exports } = await genericParser.parse(content); - - expect(exports).toEqual([ - { - default: false, - name: 'a', - }, - { - default: false, - name: 'b', - }, - { - default: false, - name: 'c', - }, - { - default: false, - name: 'd', - }, - { - default: false, - name: 'e', - }, - ]); - }); - it('should correctly return exports from ES modules', async () => { const content = fs.readFileSync(path.join(TEST_DIR, 'src', 'es-module.js'), 'utf-8'); const { exports } = await genericParser.parse(content); diff --git a/code/lib/core-server/src/utils/parser/generic-parser.ts b/code/lib/core-server/src/utils/parser/generic-parser.ts index e297c1e92eed..e3c4754fab44 100644 --- a/code/lib/core-server/src/utils/parser/generic-parser.ts +++ b/code/lib/core-server/src/utils/parser/generic-parser.ts @@ -1,8 +1,7 @@ -import { parse as parseCjs, init as initCjsParser } from 'cjs-module-lexer'; -import { parse as parseEs } from 'es-module-lexer'; -import assert from 'node:assert'; +import * as babelParser from '@babel/parser'; +import { types } from '@babel/core'; -import type { Parser } from './types'; +import type { Parser, ParserResult } from './types'; /** * A generic parser that can parse both ES and CJS modules. @@ -13,41 +12,109 @@ export class GenericParser implements Parser { * @param content The content of the file * @returns The exports of the file */ - async parse(content: string) { - try { - // Do NOT remove await here. The types are wrong! It has to be awaited, - // otherwise it will return a Promise> when wasm isn't loaded. - const [, exports] = await parseEs(content); + async parse(content: string): Promise { + const ast = babelParser.parse(content, { + allowImportExportEverywhere: true, + allowAwaitOutsideFunction: true, + allowNewTargetOutsideFunction: true, + allowReturnOutsideFunction: true, + allowUndeclaredExports: true, + plugins: [ + // Language features + 'typescript', + 'jsx', + // Latest ECMAScript features + 'asyncGenerators', + 'bigInt', + 'classProperties', + 'classPrivateProperties', + 'classPrivateMethods', + 'classStaticBlock', + 'dynamicImport', + 'exportNamespaceFrom', + 'logicalAssignment', + 'moduleStringNames', + 'nullishCoalescingOperator', + 'numericSeparator', + 'objectRestSpread', + 'optionalCatchBinding', + 'optionalChaining', + 'privateIn', + 'regexpUnicodeSets', + 'topLevelAwait', + // ECMAScript proposals + 'asyncDoExpressions', + 'decimal', + 'decorators', + 'decoratorAutoAccessors', + 'deferredImportEvaluation', + 'destructuringPrivate', + 'doExpressions', + 'explicitResourceManagement', + 'exportDefaultFrom', + 'functionBind', + 'functionSent', + 'importAttributes', + 'importReflection', + 'moduleBlocks', + 'partialApplication', + 'recordAndTuple', + 'sourcePhaseImports', + 'throwExpressions', + ], + }); - assert( - exports.length > 0, - 'No named exports found. Very likely that this is not a ES module.' - ); + const exports: ParserResult['exports'] = []; - return { - exports: (exports ?? []).map((e) => { - const name = content.substring(e.s, e.e); - return { - name, - default: name === 'default', - }; - }), - }; - // Try to parse as CJS module - } catch { - await initCjsParser(); + ast.program.body.forEach(function traverse(node) { + if (types.isExportNamedDeclaration(node)) { + // Handles function declarations: `export function a() {}` + if ( + types.isFunctionDeclaration(node.declaration) && + types.isIdentifier(node.declaration.id) + ) { + exports.push({ + name: node.declaration.id.name, + default: false, + }); + } + // Handles class declarations: `export class A {}` + if (types.isClassDeclaration(node.declaration) && types.isIdentifier(node.declaration.id)) { + exports.push({ + name: node.declaration.id.name, + default: false, + }); + } + // Handles export specifiers: `export { a }` + if (node.declaration === null && node.specifiers.length > 0) { + node.specifiers.forEach((specifier) => { + if (types.isExportSpecifier(specifier) && types.isIdentifier(specifier.exported)) { + exports.push({ + name: specifier.exported.name, + default: false, + }); + } + }); + } + if (types.isVariableDeclaration(node.declaration)) { + node.declaration.declarations.forEach((declaration) => { + // Handle variable declarators: `export const a = 1;` + if (types.isVariableDeclarator(declaration) && types.isIdentifier(declaration.id)) { + exports.push({ + name: declaration.id.name, + default: false, + }); + } + }); + } + } else if (types.isExportDefaultDeclaration(node)) { + exports.push({ + name: 'default', + default: true, + }); + } + }); - const { exports, reexports } = parseCjs(content); - const filteredExports = [...exports, ...reexports].filter((e: string) => e !== '__esModule'); - - assert(filteredExports.length > 0, 'No named exports found'); - - return { - exports: (filteredExports ?? []).map((name) => ({ - name, - default: name === 'default', - })), - }; - } + return { exports }; } } From 6b81b0cbbc56dbd0cbdbf36c91696143eab66303 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 18 Apr 2024 08:56:21 +0200 Subject: [PATCH 238/380] Use renderer package for typescript template --- .../src/utils/get-new-story-file.test.ts | 2 +- .../src/utils/get-new-story-file.ts | 44 ++++++++++++------- .../new-story-templates/typescript.test.ts | 8 ++-- .../utils/new-story-templates/typescript.ts | 6 +-- 4 files changed, 35 insertions(+), 25 deletions(-) diff --git a/code/lib/core-server/src/utils/get-new-story-file.test.ts b/code/lib/core-server/src/utils/get-new-story-file.test.ts index 429801ad0186..e9f204f1fe0c 100644 --- a/code/lib/core-server/src/utils/get-new-story-file.test.ts +++ b/code/lib/core-server/src/utils/get-new-story-file.test.ts @@ -31,7 +31,7 @@ describe('get-new-story-file', () => { expect(exportedStoryName).toBe('Default'); expect(storyFileContent).toMatchInlineSnapshot(` - "import type { Meta, StoryObj } from '@storybook/nextjs'; + "import type { Meta, StoryObj } from '@storybook/react'; import { Page } from './Page'; diff --git a/code/lib/core-server/src/utils/get-new-story-file.ts b/code/lib/core-server/src/utils/get-new-story-file.ts index 96e337bc6e93..330b33903c7c 100644 --- a/code/lib/core-server/src/utils/get-new-story-file.ts +++ b/code/lib/core-server/src/utils/get-new-story-file.ts @@ -1,5 +1,10 @@ import type { Options } from '@storybook/types'; -import { getFrameworkName, getProjectRoot } from '@storybook/core-common'; +import { + extractProperRendererNameFromFramework, + getFrameworkName, + getProjectRoot, + rendererPackages, +} from '@storybook/core-common'; import path from 'node:path'; import fs from 'node:fs'; import { getTypeScriptTemplateForNewStoryFile } from './new-story-templates/typescript'; @@ -14,6 +19,10 @@ export async function getNewStoryFile( const cwd = getProjectRoot(); const frameworkPackageName = await getFrameworkName(options); + const rendererName = await extractProperRendererNameFromFramework(frameworkPackageName); + const rendererPackage = Object.entries(rendererPackages).find( + ([, value]) => value === rendererName + )?.[0]; const basename = path.basename(componentFilePath); const extension = path.extname(componentFilePath); @@ -26,22 +35,23 @@ export async function getNewStoryFile( const exportedStoryName = 'Default'; - const storyFileContent = isTypescript - ? await getTypeScriptTemplateForNewStoryFile({ - basenameWithoutExtension, - componentExportName, - componentIsDefaultExport, - frameworkPackageName, - exportedStoryName, - }) - : await getJavaScriptTemplateForNewStoryFile({ - basenameWithoutExtension, - componentExportName, - componentIsDefaultExport, - exportedStoryName, - }); - - const doesStoryFileExist = fs.existsSync(path.join(cwd, componentFilePath)); + const storyFileContent = + isTypescript && rendererPackage + ? await getTypeScriptTemplateForNewStoryFile({ + basenameWithoutExtension, + componentExportName, + componentIsDefaultExport, + rendererPackage, + exportedStoryName, + }) + : await getJavaScriptTemplateForNewStoryFile({ + basenameWithoutExtension, + componentExportName, + componentIsDefaultExport, + exportedStoryName, + }); + + const doesStoryFileExist = fs.existsSync(path.join(cwd, storyFileName)); const storyFilePath = doesStoryFileExist ? path.join(cwd, dirname, alternativeStoryFileName) diff --git a/code/lib/core-server/src/utils/new-story-templates/typescript.test.ts b/code/lib/core-server/src/utils/new-story-templates/typescript.test.ts index f576a3d4ad2d..338b3209ce95 100644 --- a/code/lib/core-server/src/utils/new-story-templates/typescript.test.ts +++ b/code/lib/core-server/src/utils/new-story-templates/typescript.test.ts @@ -7,12 +7,12 @@ describe('typescript', () => { basenameWithoutExtension: 'foo', componentExportName: 'default', componentIsDefaultExport: true, - frameworkPackageName: '@storybook/nextjs', + rendererPackage: '@storybook/react', exportedStoryName: 'Default', }); expect(result).toMatchInlineSnapshot(` - "import type { Meta, StoryObj } from '@storybook/nextjs'; + "import type { Meta, StoryObj } from '@storybook/react'; import Foo from './foo'; @@ -33,12 +33,12 @@ describe('typescript', () => { basenameWithoutExtension: 'foo', componentExportName: 'Example', componentIsDefaultExport: false, - frameworkPackageName: '@storybook/nextjs', + rendererPackage: '@storybook/react', exportedStoryName: 'Default', }); expect(result).toMatchInlineSnapshot(` - "import type { Meta, StoryObj } from '@storybook/nextjs'; + "import type { Meta, StoryObj } from '@storybook/react'; import { Example } from './foo'; diff --git a/code/lib/core-server/src/utils/new-story-templates/typescript.ts b/code/lib/core-server/src/utils/new-story-templates/typescript.ts index cb44dfdfc9c4..d2513673ebb5 100644 --- a/code/lib/core-server/src/utils/new-story-templates/typescript.ts +++ b/code/lib/core-server/src/utils/new-story-templates/typescript.ts @@ -6,8 +6,8 @@ interface TypeScriptTemplateData { basenameWithoutExtension: string; componentExportName: string; componentIsDefaultExport: boolean; - /** The framework package name, e.g. @storybook/nextjs */ - frameworkPackageName: string; + /** The renderer package name, e.g. @storybook/nextjs */ + rendererPackage: string; /** The exported name of the default story */ exportedStoryName: string; } @@ -21,7 +21,7 @@ export async function getTypeScriptTemplateForNewStoryFile(data: TypeScriptTempl : `import { ${importName} } from './${data.basenameWithoutExtension}'`; return dedent` - import type { Meta, StoryObj } from '${data.frameworkPackageName}'; + import type { Meta, StoryObj } from '${data.rendererPackage}'; ${importStatement}; From a449d8cb6b616a869f0878fea98e436a059955a7 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 18 Apr 2024 08:57:26 +0200 Subject: [PATCH 239/380] Return storyFilePath and exported name when creating a story in the response --- .../create-new-story-channel.test.ts | 4 +++- .../src/server-channel/create-new-story-channel.ts | 14 +++----------- 2 files changed, 6 insertions(+), 12 deletions(-) diff --git a/code/lib/core-server/src/server-channel/create-new-story-channel.test.ts b/code/lib/core-server/src/server-channel/create-new-story-channel.test.ts index 289756ea540b..92244207ca8a 100644 --- a/code/lib/core-server/src/server-channel/create-new-story-channel.test.ts +++ b/code/lib/core-server/src/server-channel/create-new-story-channel.test.ts @@ -73,6 +73,8 @@ describe('createNewStoryChannel', () => { error: null, result: { storyId: 'components-page--default', + storyFilePath: './src/components/Page.stories.jsx', + exportedStoryName: 'Default', }, success: true, }); @@ -111,7 +113,7 @@ describe('createNewStoryChannel', () => { }); expect(createNewStoryFileEventListener).toHaveBeenCalledWith({ - error: 'An error occurred while creating a new story:\nFailed to write file', + error: 'Failed to write file', result: null, success: false, }); diff --git a/code/lib/core-server/src/server-channel/create-new-story-channel.ts b/code/lib/core-server/src/server-channel/create-new-story-channel.ts index e93694c7f097..304c7411fba9 100644 --- a/code/lib/core-server/src/server-channel/create-new-story-channel.ts +++ b/code/lib/core-server/src/server-channel/create-new-story-channel.ts @@ -6,19 +6,9 @@ import { CREATE_NEW_STORYFILE_RESPONSE, } from '@storybook/core-events'; import fs from 'node:fs/promises'; -import type { NewStoryData } from '../utils/get-new-story-file'; import { getNewStoryFile } from '../utils/get-new-story-file'; import { getStoryId } from '../utils/get-story-id'; - -interface CreateNewStoryPayload extends NewStoryData {} - -interface Result { - success: true | false; - result: null | { - storyId: string; - }; - error: null | string; -} +import path from 'node:path'; export function initCreateNewStoryChannel(channel: Channel, options: Options) { /** @@ -39,6 +29,8 @@ export function initCreateNewStoryChannel(channel: Channel, options: Options) { success: true, result: { storyId, + storyFilePath: `./${path.relative(process.cwd(), storyFilePath)}`, + exportedStoryName, }, error: null, } satisfies CreateNewStoryResult); From 0f37b9874f9f5aea8991dbabedb50c1b45bd910f Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 18 Apr 2024 09:00:27 +0200 Subject: [PATCH 240/380] Enhance file search to exclude stories and to filter out unsupported file extensions --- .../src/utils/search-files.test.ts | 31 +++++++++++++++++++ .../lib/core-server/src/utils/search-files.ts | 15 +++++++-- 2 files changed, 43 insertions(+), 3 deletions(-) diff --git a/code/lib/core-server/src/utils/search-files.test.ts b/code/lib/core-server/src/utils/search-files.test.ts index 6aaec136df74..c7f7ab51d388 100644 --- a/code/lib/core-server/src/utils/search-files.test.ts +++ b/code/lib/core-server/src/utils/search-files.test.ts @@ -66,6 +66,28 @@ describe('search-files', () => { expect(files).toEqual(['src/commonjs-module.js']); }); + it('should respect glob but also the allowed file extensions', async (t) => { + const files = await searchFiles({ + searchQuery: '**/*', + cwd: path.join(__dirname, '__search-files-tests__'), + }); + + expect(files).toEqual([ + 'src/commonjs-module-default.js', + 'src/commonjs-module.js', + 'src/es-module.js', + 'src/no-export.js', + 'src/file-extensions/extension.cjs', + 'src/file-extensions/extension.cts', + 'src/file-extensions/extension.js', + 'src/file-extensions/extension.jsx', + 'src/file-extensions/extension.mjs', + 'src/file-extensions/extension.mts', + 'src/file-extensions/extension.ts', + 'src/file-extensions/extension.tsx', + ]); + }); + it('should ignore node_modules', async (t) => { const files = await searchFiles({ searchQuery: 'file-in-common.js', @@ -75,6 +97,15 @@ describe('search-files', () => { expect(files).toEqual([]); }); + it('should ignore story files', async (t) => { + const files = await searchFiles({ + searchQuery: 'es-module.stories.js', + cwd: path.join(__dirname, '__search-files-tests__'), + }); + + expect(files).toEqual([]); + }); + it('should not return files outside of project root', async (t) => { await expect(() => searchFiles({ diff --git a/code/lib/core-server/src/utils/search-files.ts b/code/lib/core-server/src/utils/search-files.ts index b6f1bd89ab25..3f6a8e669046 100644 --- a/code/lib/core-server/src/utils/search-files.ts +++ b/code/lib/core-server/src/utils/search-files.ts @@ -3,7 +3,9 @@ export type SearchResult = Array; /** * File extensions that should be searched for */ -const fileExtensions = ['js', 'mjs', 'cjs', 'jsx', 'mts', 'ts', 'tsx', 'cts']; +const FILE_EXTENSIONS = ['js', 'mjs', 'cjs', 'jsx', 'mts', 'ts', 'tsx', 'cts']; + +const IGNORED_FILES = ['**/node_modules/**', '**/*.spec.*', '**/*.test.*', '**/*.stories.*']; /** * Search for files in a directory that match the search query @@ -15,9 +17,13 @@ const fileExtensions = ['js', 'mjs', 'cjs', 'jsx', 'mts', 'ts', 'tsx', 'cts']; export async function searchFiles({ searchQuery, cwd, + ignoredFiles = IGNORED_FILES, + fileExtensions = FILE_EXTENSIONS, }: { searchQuery: string; cwd: string; + ignoredFiles?: string[]; + fileExtensions?: string[]; }): Promise { // Dynamically import globby because it is a pure ESM module const { globby, isDynamicPattern } = await import('globby'); @@ -38,11 +44,14 @@ export async function searchFiles({ ]; const entries = await globby(globbedSearchQuery, { - ignore: ['**/node_modules/**', '**/*.spec.*', '**/*.test.*'], + ignore: ignoredFiles, gitignore: true, + caseSensitiveMatch: false, cwd, objectMode: true, }); - return entries.map((entry) => entry.path); + return entries + .map((entry) => entry.path) + .filter((entry) => fileExtensions.some((ext) => entry.endsWith(`.${ext}`))); } From b2ba678932239bdef7e45185c4940009e0677e13 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 18 Apr 2024 09:07:51 +0200 Subject: [PATCH 241/380] Update error message --- code/lib/core-server/src/utils/get-story-id.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/code/lib/core-server/src/utils/get-story-id.ts b/code/lib/core-server/src/utils/get-story-id.ts index acfbce990853..b874a071479a 100644 --- a/code/lib/core-server/src/utils/get-story-id.ts +++ b/code/lib/core-server/src/utils/get-story-id.ts @@ -31,9 +31,7 @@ export async function getStoryId(data: StoryIdData, options: Options) { if (autoTitle === undefined) { // eslint-disable-next-line local-rules/no-uncategorized-errors throw new Error(dedent` - The generation of your new Story file was successful but it seems that we are unable to index it. - Please make sure that the new Story file is matched by the 'stories' glob pattern in your Storybook configuration. - The location of the new Story file is: ${relativePath} + The new story file was successfully generated, but we are unable to index it. Please ensure that the new Story file is matched by the 'stories' glob pattern in your Storybook configuration. `); } From 343081be5e47149b569a71b822fcc2ff3cc6850c Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 18 Apr 2024 09:11:00 +0200 Subject: [PATCH 242/380] Implement argtypes channel in Preview --- code/lib/core-events/package.json | 1 + .../lib/core-events/src/data/argtypes-info.ts | 13 ++++++++++ code/lib/core-events/src/index.ts | 5 ++++ .../src/modules/preview-web/Preview.tsx | 24 +++++++++++++++++++ 4 files changed, 43 insertions(+) create mode 100644 code/lib/core-events/src/data/argtypes-info.ts diff --git a/code/lib/core-events/package.json b/code/lib/core-events/package.json index 699640debd0d..2cc265012563 100644 --- a/code/lib/core-events/package.json +++ b/code/lib/core-events/package.json @@ -78,6 +78,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { + "@storybook/csf": "^0.1.4", "ts-dedent": "^2.0.0" }, "devDependencies": { diff --git a/code/lib/core-events/src/data/argtypes-info.ts b/code/lib/core-events/src/data/argtypes-info.ts new file mode 100644 index 000000000000..4636a006a56f --- /dev/null +++ b/code/lib/core-events/src/data/argtypes-info.ts @@ -0,0 +1,13 @@ +import type { ArgTypes } from '@storybook/csf'; + +export interface ArgTypesInfoPayload { + storyId: string; +} + +export interface ArgTypesInfoResult { + success: true | false; + result: null | { + argTypes: ArgTypes; + }; + error: null | string; +} diff --git a/code/lib/core-events/src/index.ts b/code/lib/core-events/src/index.ts index 0a23e056927a..53491bb3f68f 100644 --- a/code/lib/core-events/src/index.ts +++ b/code/lib/core-events/src/index.ts @@ -78,6 +78,8 @@ enum events { FILE_COMPONENT_SEARCH_RESPONSE = 'fileComponentSearchResponse', SAVE_STORY_REQUEST = 'saveStoryRequest', SAVE_STORY_RESPONSE = 'saveStoryResponse', + ARGTYPES_INFO_REQUEST = 'argtypesInfoRequest', + ARGTYPES_INFO_RESPONSE = 'argtypesInfoResponse', CREATE_NEW_STORYFILE_REQUEST = 'createNewStoryfileRequest', CREATE_NEW_STORYFILE_RESPONSE = 'createNewStoryfileResponse', } @@ -140,10 +142,13 @@ export const { TELEMETRY_ERROR, SAVE_STORY_REQUEST, SAVE_STORY_RESPONSE, + ARGTYPES_INFO_REQUEST, + ARGTYPES_INFO_RESPONSE, } = events; export * from './data/create-new-story'; export * from './data/file-component-search'; +export * from './data/argtypes-info'; export * from './data/save-story'; export interface WhatsNewCache { diff --git a/code/lib/preview-api/src/modules/preview-web/Preview.tsx b/code/lib/preview-api/src/modules/preview-web/Preview.tsx index 29ea71045949..4b875f5e26e8 100644 --- a/code/lib/preview-api/src/modules/preview-web/Preview.tsx +++ b/code/lib/preview-api/src/modules/preview-web/Preview.tsx @@ -1,6 +1,9 @@ import { global } from '@storybook/global'; import { deprecate, logger } from '@storybook/client-logger'; +import type { ArgTypesInfoResult } from '@storybook/core-events'; import { + ARGTYPES_INFO_REQUEST, + ARGTYPES_INFO_RESPONSE, CONFIG_ERROR, FORCE_REMOUNT, FORCE_RE_RENDER, @@ -129,6 +132,7 @@ export class Preview { this.channel.on(STORY_INDEX_INVALIDATED, this.onStoryIndexChanged.bind(this)); this.channel.on(UPDATE_GLOBALS, this.onUpdateGlobals.bind(this)); this.channel.on(UPDATE_STORY_ARGS, this.onUpdateArgs.bind(this)); + this.channel.on(ARGTYPES_INFO_REQUEST, this.onRequestArgTypesInfo.bind(this)); this.channel.on(RESET_STORY_ARGS, this.onResetArgs.bind(this)); this.channel.on(FORCE_RE_RENDER, this.onForceReRender.bind(this)); this.channel.on(FORCE_REMOUNT, this.onForceRemount.bind(this)); @@ -295,6 +299,26 @@ export class Preview { }); } + async onRequestArgTypesInfo({ storyId }: { storyId: string }) { + try { + await this.storeInitializationPromise; + const story = await this.storyStoreValue?.loadStory({ storyId }); + this.channel.emit(ARGTYPES_INFO_RESPONSE, { + result: { + argTypes: story?.argTypes || {}, + }, + success: true, + error: null, + } as ArgTypesInfoResult); + } catch (e: any) { + this.channel.emit(ARGTYPES_INFO_RESPONSE, { + result: null, + success: false, + error: e?.message, + } as ArgTypesInfoResult); + } + } + async onResetArgs({ storyId, argNames }: { storyId: string; argNames?: string[] }) { if (!this.storyStoreValue) throw new CalledPreviewMethodBeforeInitializationError({ methodName: 'onResetArgs' }); From 30eb66ad205e4e382fc696946298c44c7b8e0437 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 18 Apr 2024 09:12:02 +0200 Subject: [PATCH 243/380] Implement FileSearchModal --- code/ui/manager/package.json | 1 + .../src/components/sidebar/FileList.tsx | 41 ++ .../src/components/sidebar/FileSearchList.tsx | 398 ++++++++++++++++++ .../sidebar/FileSearchListSkeleton.tsx | 54 +++ .../components/sidebar/FileSearchModal.tsx | 348 +++++++++++++++ .../sidebar/FileSearchModal.utils.tsx | 60 +++ .../manager/src/components/sidebar/Search.tsx | 31 +- code/ui/manager/src/globals/exports.ts | 2 + code/yarn.lock | 33 +- 9 files changed, 957 insertions(+), 11 deletions(-) create mode 100644 code/ui/manager/src/components/sidebar/FileList.tsx create mode 100644 code/ui/manager/src/components/sidebar/FileSearchList.tsx create mode 100644 code/ui/manager/src/components/sidebar/FileSearchListSkeleton.tsx create mode 100644 code/ui/manager/src/components/sidebar/FileSearchModal.tsx create mode 100644 code/ui/manager/src/components/sidebar/FileSearchModal.utils.tsx diff --git a/code/ui/manager/package.json b/code/ui/manager/package.json index 9dd2b2528cd8..4389243ad4b9 100644 --- a/code/ui/manager/package.json +++ b/code/ui/manager/package.json @@ -85,6 +85,7 @@ "@storybook/test": "workspace:*", "@storybook/theming": "workspace:*", "@storybook/types": "workspace:*", + "@tanstack/react-virtual": "^3.3.0", "@testing-library/react": "^11.2.2", "@types/react-transition-group": "^4", "@types/semver": "^7.3.4", diff --git a/code/ui/manager/src/components/sidebar/FileList.tsx b/code/ui/manager/src/components/sidebar/FileList.tsx new file mode 100644 index 000000000000..b966c112b4e6 --- /dev/null +++ b/code/ui/manager/src/components/sidebar/FileList.tsx @@ -0,0 +1,41 @@ +import { styled } from '@storybook/theming'; +import { rgba } from 'polished'; + +export const FileList = styled('div')(({ theme }) => ({ + height: '280px', + overflow: 'auto', + msOverflowStyle: 'none', + scrollbarWidth: 'none', + '::-webkit-scrollbar': { + display: 'none', + }, + // after element which fades out the list + '&::after': { + content: '""', + position: 'absolute', + pointerEvents: 'none', + bottom: 0, + left: 0, + right: 0, + height: '80px', + background: `linear-gradient(${rgba(theme.barBg, 0)} 10%, ${theme.barBg} 80%)`, + }, +})); + +export const FileListItem = styled('li')(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + + ':focus-visible': { + outline: 'none', + + '> div': { + borderRadius: '4px', + background: theme.base === 'dark' ? 'rgba(255,255,255,.1)' : theme.color.mediumlight, + + '> svg': { + display: 'flex', + }, + }, + }, +})); diff --git a/code/ui/manager/src/components/sidebar/FileSearchList.tsx b/code/ui/manager/src/components/sidebar/FileSearchList.tsx new file mode 100644 index 000000000000..447ecf8599b0 --- /dev/null +++ b/code/ui/manager/src/components/sidebar/FileSearchList.tsx @@ -0,0 +1,398 @@ +import React, { memo, useCallback, useLayoutEffect, useState } from 'react'; +import { styled } from '@storybook/theming'; +import { ChevronDownIcon, ChevronRightIcon, ComponentIcon } from '@storybook/icons'; +import { FileSearchListLoadingSkeleton } from './FileSearchListSkeleton'; +import { FileList, FileListItem } from './FileList'; +import type { VirtualItem } from '@tanstack/react-virtual'; +import { useVirtualizer } from '@tanstack/react-virtual'; +import type { CreateNewStoryPayload, FileComponentSearchResult } from '@storybook/core-events'; +import { WithTooltip, TooltipNote } from '@storybook/components'; + +const FileListItemContentWrapper = styled.div<{ selected: boolean; disabled: boolean }>( + ({ theme, selected, disabled }) => ({ + display: 'flex', + alignItems: 'flex-start', + gap: '8px', + alignSelf: 'stretch', + padding: '8px 16px', + cursor: 'pointer', + + ...(selected && { + borderRadius: '4px', + background: theme.base === 'dark' ? 'rgba(255,255,255,.1)' : theme.color.mediumlight, + + '> svg': { + display: 'flex', + }, + }), + + ...(disabled && { + cursor: 'not-allowed', + }), + + '&:hover': { + borderRadius: '4px', + background: theme.base === 'dark' ? 'rgba(255,255,255,.1)' : theme.color.mediumlight, + + '> svg': { + display: 'flex', + }, + }, + }) +); + +const FileListUl = styled('ul')({ + margin: 0, + padding: 0, + width: '100%', + position: 'relative', +}); + +const FileListItemContent = styled('div')({ + display: 'flex', + flexDirection: 'column', + alignItems: 'flex-start', + width: 'calc(100% - 50px)', +}); + +const FileListIconWrapper = styled('div')(({ theme }) => ({ + color: theme.color.secondary, +})); + +const FileListItemLabel = styled('div')(({ theme }) => ({ + color: theme.base === 'dark' ? theme.color.lighter : theme.color.darkest, + fontSize: '14px', + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', + overflow: 'hidden', + maxWidth: '100%', +})); + +const FileListItemPath = styled('div')(({ theme }) => ({ + color: theme.color.mediumdark, + fontSize: '14px', + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', + overflow: 'hidden', + maxWidth: '100%', +})); + +const FileListExport = styled('ul')(({ theme }) => ({ + margin: 0, + padding: 0, +})); + +const FileListItemExport = styled('li')(({ theme }) => ({ + padding: '8px 16px 8px 16px', + marginLeft: '30px', + display: 'flex', + gap: '8px', + alignItems: 'center', + justifyContent: 'space-between', + cursor: 'pointer', + + ':focus-visible': { + outline: 'none', + borderRadius: '4px', + background: theme.base === 'dark' ? 'rgba(255,255,255,.1)' : theme.color.mediumlight, + + '> svg': { + display: 'flex', + }, + }, + + '&:hover': { + borderRadius: '4px', + background: theme.base === 'dark' ? 'rgba(255, 255, 255, 0.1)' : theme.color.mediumlight, + + '> svg': { + display: 'flex', + }, + }, + + '> div > svg': { + color: theme.color.secondary, + }, +})); + +const FileListItemExportName = styled('div')(({ theme }) => ({ + display: 'flex', + alignItems: 'center', + gap: '8px', + width: 'calc(100% - 20px)', +})); + +const FileListItemExportNameContent = styled('span')(({ theme }) => ({ + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', + overflow: 'hidden', + maxWidth: 'calc(100% - 160px)', + display: 'inline-block', +})); + +const ChevronRightIconStyled = styled(ChevronRightIcon)(({ theme }) => ({ + display: 'none', + alignSelf: 'center', + color: theme.color.mediumdark, +})); + +const ChevronDownIconStyled = styled(ChevronDownIcon)(({ theme }) => ({ + display: 'none', + alignSelf: 'center', + color: theme.color.mediumdark, +})); + +const DefaultExport = styled('span')(({ theme }) => ({ + display: 'inline-block', + padding: `1px ${theme.appBorderRadius}px`, + color: '#727272', + backgroundColor: '#F2F4F5', +})); + +const NoResults = styled('div')(({ theme }) => ({ + padding: '0 10%', + textAlign: 'center', + color: theme.base === 'dark' ? theme.color.lightest : theme.defaultText, +})); + +const NoResultsDescription = styled('p')(({ theme }) => ({ + color: theme.base === 'dark' ? theme.color.defaultText : theme.color.mediumdark, +})); + +export type SearchResult = FileComponentSearchResult['result']['files'][0]; + +interface FileSearchListProps { + isLoading: boolean; + searchResults: Array | null; + onNewStory: (props: CreateNewStoryPayload) => void; +} + +interface FileItemContentProps { + virtualItem: VirtualItem; + selected: number | null; + searchResult: SearchResult; + as?: 'div'; +} + +export const FileSearchList = memo(function FileSearchList({ + isLoading, + searchResults, + onNewStory, +}: FileSearchListProps) { + const [selectedItem, setSelectedItem] = useState(null); + const parentRef = React.useRef(); + + const rowVirtualizer = useVirtualizer({ + count: searchResults?.length || 0, + getScrollElement: () => parentRef.current, + paddingEnd: 40, + estimateSize: () => 54, + overscan: 2, + }); + + useLayoutEffect(() => { + if (selectedItem !== null) { + rowVirtualizer.scrollToIndex(selectedItem, { + align: 'start', + }); + } + }, [rowVirtualizer, selectedItem]); + + const handleFileItemSelection = useCallback( + ({ virtualItem, searchResult }: { virtualItem: VirtualItem; searchResult: SearchResult }) => { + if (searchResult?.exportedComponents?.length > 1) { + setSelectedItem((sItem) => { + if (sItem === virtualItem.index) { + return null; + } + + return virtualItem.index; + }); + } else if (searchResult?.exportedComponents?.length === 1) { + onNewStory({ + componentExportName: searchResult.exportedComponents[0].name, + componentFilePath: searchResult.filepath, + componentIsDefaultExport: searchResult.exportedComponents[0].default, + }); + } + }, + [onNewStory] + ); + + const handleFileItemComponentSelection = useCallback( + ({ + searchResult, + component, + }: { + searchResult: SearchResult; + component: SearchResult['exportedComponents'][0]; + }) => { + onNewStory({ + componentExportName: component.name, + componentFilePath: searchResult.filepath, + componentIsDefaultExport: component.default, + }); + }, + [onNewStory] + ); + + const ListItem = useCallback( + ({ virtualItem, selected, searchResult, as }: FileItemContentProps) => ( + { + handleFileItemSelection({ virtualItem, searchResult }); + }} + onKeyUp={(event) => { + if (event.key === 'Enter') { + handleFileItemSelection({ virtualItem, searchResult }); + } + }} + > + + + + + + {searchResult.filepath.split('/').at(-1)} + {searchResult.filepath} + + {selected === virtualItem.index ? : } + + {searchResult?.exportedComponents?.length > 1 && selected === virtualItem.index && ( + { + e.stopPropagation(); + }} + onKeyUp={(e) => { + if (e.key === 'Enter') { + e.stopPropagation(); + } + }} + > + {searchResult.exportedComponents?.map((component) => ( + { + handleFileItemComponentSelection({ searchResult, component }); + }} + onKeyUp={(event) => { + if (event.key === 'Enter') { + handleFileItemComponentSelection({ searchResult, component }); + } + }} + > + + + {component.default ? ( + <> + + {searchResult.filepath.split('/').at(-1)?.split('.')?.at(0)} + + Default export + + ) : ( + component.name + )} + + + + ))} + + )} + + ), + [handleFileItemComponentSelection, handleFileItemSelection, rowVirtualizer] + ); + + if (isLoading && (searchResults === null || searchResults?.length === 0)) { + return ; + } + + if (searchResults?.length === 0) { + return ( + +

We could not find any file with that name

+ + You may want to try using different keywords, checking for typos or adjusting your + filters. + + + ); + } + + if (searchResults?.length > 0) { + return ( + + + {rowVirtualizer.getVirtualItems().map((virtualItem) => { + const searchResult = searchResults[virtualItem.index]; + return searchResult.exportedComponents === null || + searchResult.exportedComponents?.length === 0 ? ( + + } + > + + + ) : ( + + ); + })} + + + ); + } + + return null; +}); + +// border-radius: 2px; +// font-size: 10px; + +// apply font-size: 14px to sub items +// input sizing and icon positioning diff --git a/code/ui/manager/src/components/sidebar/FileSearchListSkeleton.tsx b/code/ui/manager/src/components/sidebar/FileSearchListSkeleton.tsx new file mode 100644 index 000000000000..d54cd473f7d0 --- /dev/null +++ b/code/ui/manager/src/components/sidebar/FileSearchListSkeleton.tsx @@ -0,0 +1,54 @@ +import React from 'react'; +import { styled } from '@storybook/theming'; +import { FileList, FileListItem } from './FileList'; + +const FileListItemContentWrapperSkeleton = styled('div')(({ theme }) => ({ + display: 'flex', + alignItems: 'flex-start', + gap: '8px', + alignSelf: 'stretch', + padding: '8px 16px', +})); + +const FileListItemContentSkeleton = styled('div')({ + display: 'flex', + flexDirection: 'column', + alignItems: 'flex-start', + width: '100%', +}); + +const FileListIconWrapperSkeleton = styled.div(({ theme }) => ({ + width: '14px', + height: '14px', + background: theme.base === 'dark' ? 'rgba(255,255,255,.1)' : 'rgba(0,0,0,.1)', + animation: `${theme.animation.glow} 1.5s ease-in-out infinite`, +})); + +const FileListItemSkeleton = styled.div(({ theme }) => ({ + height: '14px', + background: theme.base === 'dark' ? 'rgba(255,255,255,.1)' : 'rgba(0,0,0,.1)', + animation: `${theme.animation.glow} 1.5s ease-in-out infinite`, + width: '100%', + + '+ div': { + marginTop: '8px', + }, +})); + +export const FileSearchListLoadingSkeleton = () => { + return ( + + {[1, 2, 3, 4, 5].map((result) => ( + + + + + + + + + + ))} + + ); +}; diff --git a/code/ui/manager/src/components/sidebar/FileSearchModal.tsx b/code/ui/manager/src/components/sidebar/FileSearchModal.tsx new file mode 100644 index 000000000000..47c7b1685d7c --- /dev/null +++ b/code/ui/manager/src/components/sidebar/FileSearchModal.tsx @@ -0,0 +1,348 @@ +import React, { + useCallback, + useDeferredValue, + useEffect, + useRef, + useState, + useTransition, +} from 'react'; +import { Modal, Form } from '@storybook/components'; +import { styled } from '@storybook/theming'; +import { AlertIcon, CheckIcon, CloseAltIcon, RefreshIcon, SearchIcon } from '@storybook/icons'; +import type { + ArgTypesInfoPayload, + ArgTypesInfoResult, + CreateNewStoryPayload, + CreateNewStoryResult, + FileComponentSearchPayload, + FileComponentSearchResult, + SaveStoryRequest, + SaveStoryResponse, +} from '@storybook/core-events'; +import { + ARGTYPES_INFO_REQUEST, + ARGTYPES_INFO_RESPONSE, + CREATE_NEW_STORYFILE_REQUEST, + CREATE_NEW_STORYFILE_RESPONSE, + FILE_COMPONENT_SEARCH_REQUEST, + FILE_COMPONENT_SEARCH_RESPONSE, + SAVE_STORY_REQUEST, + SAVE_STORY_RESPONSE, +} from '@storybook/core-events'; +import { addons, useStorybookApi } from '@storybook/manager-api'; + +import { useDebounce } from '../../hooks/useDebounce'; +import type { SearchResult } from './FileSearchList'; +import { FileSearchList } from './FileSearchList'; +import type { Channel } from '@storybook/channels'; +import { extractSeededRequiredArgs, selectNewStory } from './FileSearchModal.utils'; + +interface FileSearchModalProps { + open: boolean; + onOpenChange: (open: boolean) => void; +} + +const ModalInput = styled(Form.Input)(({ theme }) => ({ + color: theme.color.darkest, + paddingLeft: 40, + paddingRight: 28, + fontSize: 14, + height: 40, + + '::placeholder': { + color: theme.color.mediumdark, + }, + '&:invalid:not(:placeholder-shown)': { + boxShadow: `${theme.color.negative} 0 0 0 1px inset`, + }, + '&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button, &::-webkit-search-results-decoration': + { + display: 'none', + }, +})); + +const SearchField = styled.div({ + display: 'flex', + flexDirection: 'column', + flexGrow: 1, + position: 'relative', +}); + +const SearchIconWrapper = styled.div(({ theme }) => ({ + position: 'absolute', + top: 0, + left: 16, + zIndex: 1, + pointerEvents: 'none', + color: theme.darkest, + display: 'flex', + alignItems: 'center', + height: '100%', +})); + +const LoadingIcon = styled.div(({ theme }) => ({ + position: 'absolute', + top: 0, + right: 16, + zIndex: 1, + color: theme.textMutedColor, + display: 'flex', + alignItems: 'center', + height: '100%', + '@keyframes spin': { + from: { transform: 'rotate(0deg)' }, + to: { transform: 'rotate(360deg)' }, + }, + animation: 'spin 1s linear infinite', +})); + +const ModalError = styled(Modal.Error)({ + position: 'absolute', + padding: '8px 40px 8px 16px', + bottom: 0, +}); + +const ModalErrorCloseIcon = styled(CloseAltIcon)({ + position: 'absolute', + top: 8, + right: 16, + cursor: 'pointer', +}); + +export const FileSearchModal = ({ open, onOpenChange }: FileSearchModalProps) => { + const [, startTransition] = useTransition(); + const [isLoading, setLoading] = useState(false); + const [fileSearchQuery, setFileSearchQuery] = useState(''); + const fileSearchQueryDebounced = useDebounce(fileSearchQuery, 200); + const fileSearchQueryDeferred = useDeferredValue(fileSearchQueryDebounced); + const emittedValue = useRef(null); + const [error, setError] = useState(null); + const api = useStorybookApi(); + + const [searchResults, setSearchResults] = useState(null); + + const handleErrorWhenCreatingStory = useCallback(() => { + api.addNotification({ + id: 'create-new-story-file-error', + content: { + headline: 'Error while creating story file', + subHeadline: `Take a look at your developer console for more information`, + }, + duration: 8_000, + icon: , + }); + + onOpenChange(false); + }, [api, onOpenChange]); + + const handleSuccessfullyCreatedStory = useCallback( + (componentExportName: string) => { + api.addNotification({ + id: 'create-new-story-file-success', + content: { + headline: 'Story file created', + subHeadline: `${componentExportName} was created`, + }, + duration: 8_000, + icon: , + }); + + onOpenChange(false); + }, + [api, onOpenChange] + ); + + const handleCreateNewStory = useCallback( + async ({ + componentExportName, + componentFilePath, + componentIsDefaultExport, + }: CreateNewStoryPayload) => { + try { + const channel = addons.getChannel(); + + const createNewStoryResult = await oncePromise( + { + channel, + request: { + name: CREATE_NEW_STORYFILE_REQUEST, + payload: { + componentExportName, + componentFilePath, + componentIsDefaultExport, + }, + }, + resolveEvent: CREATE_NEW_STORYFILE_RESPONSE, + } + ); + + if (createNewStoryResult.success) { + setError(null); + + const storyId = createNewStoryResult.result.storyId; + + await selectNewStory(api.selectStory, storyId); + + const argTypesInfoResult = await oncePromise({ + channel, + request: { + name: ARGTYPES_INFO_REQUEST, + payload: { storyId }, + }, + resolveEvent: ARGTYPES_INFO_RESPONSE, + }); + + if (argTypesInfoResult.success) { + const argTypes = argTypesInfoResult.result.argTypes; + + const requiredArgs = extractSeededRequiredArgs(argTypes); + + await oncePromise({ + channel, + request: { + name: SAVE_STORY_REQUEST, + payload: { + id: storyId, + payload: { + args: requiredArgs, + importPath: createNewStoryResult.result.storyFilePath, + csfId: storyId, + }, + }, + }, + resolveEvent: SAVE_STORY_RESPONSE, + }); + } + + handleSuccessfullyCreatedStory(componentExportName); + } else { + setError(createNewStoryResult.error); + } + } catch (e) { + handleErrorWhenCreatingStory(); + } + }, + [api, handleSuccessfullyCreatedStory, handleErrorWhenCreatingStory] + ); + + useEffect(() => { + setLoading(true); + const channel = addons.getChannel(); + + const set = (data: FileComponentSearchResult) => { + if (data.success) { + if (data.result?.searchQuery === fileSearchQueryDeferred && data.result.files) { + setSearchResults(data.result.files); + } + } else { + setError(data.error); + } + setLoading(false); + }; + + channel.on(FILE_COMPONENT_SEARCH_RESPONSE, set); + + if (fileSearchQueryDeferred !== '' && emittedValue.current !== fileSearchQueryDeferred) { + emittedValue.current = fileSearchQueryDeferred; + channel.emit(FILE_COMPONENT_SEARCH_REQUEST, { + searchQuery: fileSearchQueryDeferred, + } satisfies FileComponentSearchPayload); + } else { + setSearchResults(null); + setLoading(false); + } + + return () => { + channel.off(FILE_COMPONENT_SEARCH_RESPONSE, set); + }; + }, [fileSearchQueryDeferred, setSearchResults, setLoading]); + + return ( + { + onOpenChange(false); + }} + onInteractOutside={() => { + onOpenChange(false); + }} + > + + + Add a new story + We will create a new story for your component + + + + + + { + startTransition(() => { + setFileSearchQuery((e.target as HTMLInputElement).value); + }); + }} + /> + {isLoading && ( + + + + )} + + { + + } + + {error && ( + + {error} + { + setError(null); + }} + /> + + )} + + ); +}; + +interface OncePromiseOptions { + channel: Channel; + request: { + name: string; + payload: Payload; + }; + resolveEvent: string; +} + +function oncePromise({ + channel, + request, + resolveEvent, +}: OncePromiseOptions): Promise { + return new Promise((resolve, reject) => { + channel.once(resolveEvent, (data: Result) => { + resolve(data); + }); + + channel.emit(request.name, request.payload as Payload); + + // If the channel supports error events, you can reject the promise on error + channel.once(resolveEvent, (error: any) => { + reject(error); + }); + }); +} diff --git a/code/ui/manager/src/components/sidebar/FileSearchModal.utils.tsx b/code/ui/manager/src/components/sidebar/FileSearchModal.utils.tsx new file mode 100644 index 000000000000..340544410fc7 --- /dev/null +++ b/code/ui/manager/src/components/sidebar/FileSearchModal.utils.tsx @@ -0,0 +1,60 @@ +import type { ArgTypes } from '@storybook/csf'; + +export function extractSeededRequiredArgs(argTypes: ArgTypes) { + const extractedArgTypes = Object.keys(argTypes).reduce( + (acc, key: keyof typeof argTypes) => { + const argType = argTypes[key]; + if (typeof argType.type !== 'string' && argType.type.required) { + switch (argType.type.name) { + case 'boolean': + acc[key] = true; + break; + case 'number': + acc[key] = 0; + break; + case 'string': + acc[key] = key; + break; + case 'union': + case 'enum': + case 'intersection': + if ('value' in argType.type) { + acc[key] = argType.type.value[0]; + } + break; + case 'array': + acc[key] = []; + break; + case 'object': + acc[key] = {}; + break; + case 'function': + acc[key] = () => {}; + break; + default: + break; + } + } + return acc; + }, + {} as Record + ); + return extractedArgTypes; +} + +export async function selectNewStory( + selectStory: (id: string) => Promise | void, + storyId: string, + attempt = 1 +): Promise { + if (attempt > 10) { + throw new Error('We could not select the new story. Please try again.'); + } + + try { + await selectStory(storyId); + } catch (e) { + await new Promise((resolve) => setTimeout(resolve, 500)); + return selectNewStory(selectStory, storyId, attempt + 1); + } +} diff --git a/code/ui/manager/src/components/sidebar/Search.tsx b/code/ui/manager/src/components/sidebar/Search.tsx index 76d9cfa202c7..c4116ba87997 100644 --- a/code/ui/manager/src/components/sidebar/Search.tsx +++ b/code/ui/manager/src/components/sidebar/Search.tsx @@ -22,6 +22,7 @@ import { isSearchResult, isExpandType } from './types'; import { scrollIntoView, searchItem } from '../../utils/tree'; import { getGroupStatus, getHighestStatus } from '../../utils/status'; import { useLayout } from '../layout/LayoutProvider'; +import { FileSearchModal } from './FileSearchModal'; const { document } = global; @@ -186,6 +187,7 @@ export const Search = React.memo<{ const [inputPlaceholder, setPlaceholder] = useState('Find components'); const [allComponents, showAllComponents] = useState(false); const searchShortcut = api ? shortcutToHumanString(api.getShortcutKeys().search) : '/'; + const [isFileSearchModalOpen, setIsFileSearchModalOpen] = useState(false); const makeFuse = useCallback(() => { const list = dataset.entries.reduce((acc, [refId, { index, status }]) => { @@ -410,15 +412,26 @@ export const Search = React.memo<{ )} {showCreateStoryButton && ( - } - > - - - - + <> + } + > + { + setIsFileSearchModalOpen(true); + }} + variant="outline" + > + + + + + )} diff --git a/code/ui/manager/src/globals/exports.ts b/code/ui/manager/src/globals/exports.ts index 206ce13b3473..4a877050efd1 100644 --- a/code/ui/manager/src/globals/exports.ts +++ b/code/ui/manager/src/globals/exports.ts @@ -131,6 +131,8 @@ export default { 'createBrowserChannel', ], '@storybook/core-events': [ + 'ARGTYPES_INFO_REQUEST', + 'ARGTYPES_INFO_RESPONSE', 'CHANNEL_CREATED', 'CHANNEL_WS_DISCONNECT', 'CONFIG_ERROR', diff --git a/code/yarn.lock b/code/yarn.lock index 2ee01f76a383..ddc556e1770d 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -719,6 +719,15 @@ __metadata: languageName: node linkType: hard +"@babel/parser@npm:^7.24.4": + version: 7.24.4 + resolution: "@babel/parser@npm:7.24.4" + bin: + parser: ./bin/babel-parser.js + checksum: 10c0/8381e1efead5069cb7ed2abc3a583f4a86289b2f376c75cecc69f59a8eb36df18274b1886cecf2f97a6a0dff5334b27330f58535be9b3e4e26102cc50e12eac8 + languageName: node + linkType: hard + "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.23.3": version: 7.23.3 resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.23.3" @@ -5762,6 +5771,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/core-events@workspace:lib/core-events" dependencies: + "@storybook/csf": "npm:^0.1.4" chalk: "npm:^4.1.0" ts-dedent: "npm:^2.0.0" typescript: "npm:^5.3.2" @@ -5774,6 +5784,7 @@ __metadata: dependencies: "@aw-web-design/x-default-browser": "npm:1.4.126" "@babel/core": "npm:^7.23.9" + "@babel/parser": "npm:^7.24.4" "@discoveryjs/json-ext": "npm:^0.5.3" "@storybook/addon-docs": "workspace:*" "@storybook/builder-manager": "workspace:*" @@ -5803,12 +5814,10 @@ __metadata: boxen: "npm:^7.1.1" camelcase: "npm:^8.0.0" chalk: "npm:^4.1.0" - cjs-module-lexer: "npm:^1.2.3" cli-table3: "npm:^0.6.1" compression: "npm:^1.7.4" detect-port: "npm:^1.3.0" diff: "npm:^5.2.0" - es-module-lexer: "npm:^1.5.0" express: "npm:^4.17.3" fs-extra: "npm:^11.1.0" globby: "npm:^14.0.1" @@ -6103,6 +6112,7 @@ __metadata: "@storybook/test": "workspace:*" "@storybook/theming": "workspace:*" "@storybook/types": "workspace:*" + "@tanstack/react-virtual": "npm:^3.3.0" "@testing-library/react": "npm:^11.2.2" "@types/react-transition-group": "npm:^4" "@types/semver": "npm:^7.3.4" @@ -7124,6 +7134,25 @@ __metadata: languageName: node linkType: hard +"@tanstack/react-virtual@npm:^3.3.0": + version: 3.3.0 + resolution: "@tanstack/react-virtual@npm:3.3.0" + dependencies: + "@tanstack/virtual-core": "npm:3.3.0" + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + checksum: 10c0/52b30c87cbf2518cfe19812b290c60dd576587545bc910adf5a17ff16b241c4cf28690163db2063afd9e3adc0259086263071e63c8c8380ac56c0f6a54bde820 + languageName: node + linkType: hard + +"@tanstack/virtual-core@npm:3.3.0": + version: 3.3.0 + resolution: "@tanstack/virtual-core@npm:3.3.0" + checksum: 10c0/d31125fde6a3ef3aefd3754b37f4724772c8a567f4e8212cf02a64fba6fde9ab8f80a8c9f99d28b046f84a938aea390adbd591eb4858d849a05326b0cebdfc25 + languageName: node + linkType: hard + "@testing-library/dom@npm:^7.28.1, @testing-library/dom@npm:^7.29.4": version: 7.31.2 resolution: "@testing-library/dom@npm:7.31.2" From fa49c94145ecbee3dfa649bc71b5b148d0c5fcc3 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 18 Apr 2024 09:31:46 +0200 Subject: [PATCH 244/380] Add unit tests to FileSearchModal.utils --- .../sidebar/FileSearchModal.utils.test.tsx | 65 +++++++++++++++++++ 1 file changed, 65 insertions(+) create mode 100644 code/ui/manager/src/components/sidebar/FileSearchModal.utils.test.tsx diff --git a/code/ui/manager/src/components/sidebar/FileSearchModal.utils.test.tsx b/code/ui/manager/src/components/sidebar/FileSearchModal.utils.test.tsx new file mode 100644 index 000000000000..892c5517b7e8 --- /dev/null +++ b/code/ui/manager/src/components/sidebar/FileSearchModal.utils.test.tsx @@ -0,0 +1,65 @@ +import { describe, expect, it } from 'vitest'; +import { extractSeededRequiredArgs, trySelectNewStory } from './FileSearchModal.utils'; +import type { ArgTypes, SBType } from '@storybook/csf'; + +describe('FileSearchModal.utils', () => { + describe('extractSeededRequiredArgs', () => { + it('should extract seeded required args', () => { + const argTypes = { + stringRequired: { + type: { name: 'string', required: true }, + }, + string: { + type: { name: 'string', required: false }, + }, + numberRequired: { + type: { name: 'number', required: true }, + }, + number: { + type: { name: 'number', required: false }, + }, + booleanRequired: { + type: { name: 'boolean', required: true }, + }, + boolean: { + type: { name: 'boolean', required: false }, + }, + functionRequired: { + type: { name: 'function', required: true }, + }, + function: { + type: { name: 'function', required: false }, + }, + unionRequired: { + type: { + name: 'union', + required: true, + value: ['a', 'b', 'c'] as any, + }, + }, + union: { + type: { name: 'union', required: false, value: [] }, + }, + enumRequired: { + type: { + name: 'enum', + required: true, + value: ['a', 'b', 'c'] as any, + }, + }, + enum: { + type: { name: 'union', required: false, value: [] }, + }, + } as ArgTypes; + + expect(extractSeededRequiredArgs(argTypes)).toEqual({ + stringRequired: 'stringRequired', + numberRequired: 0, + booleanRequired: true, + functionRequired: expect.any(Function), + unionRequired: 'a', + enumRequired: 'a', + }); + }); + }); +}); From 19b6094b543442ffadf02d0c62de296718d0e7bb Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 18 Apr 2024 09:33:09 +0200 Subject: [PATCH 245/380] Rename helper function --- .../manager/src/components/sidebar/FileSearchModal.tsx | 9 ++++++--- .../src/components/sidebar/FileSearchModal.utils.tsx | 4 ++-- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/code/ui/manager/src/components/sidebar/FileSearchModal.tsx b/code/ui/manager/src/components/sidebar/FileSearchModal.tsx index 47c7b1685d7c..b47732ba7a06 100644 --- a/code/ui/manager/src/components/sidebar/FileSearchModal.tsx +++ b/code/ui/manager/src/components/sidebar/FileSearchModal.tsx @@ -35,7 +35,7 @@ import { useDebounce } from '../../hooks/useDebounce'; import type { SearchResult } from './FileSearchList'; import { FileSearchList } from './FileSearchList'; import type { Channel } from '@storybook/channels'; -import { extractSeededRequiredArgs, selectNewStory } from './FileSearchModal.utils'; +import { extractSeededRequiredArgs, trySelectNewStory } from './FileSearchModal.utils'; interface FileSearchModalProps { open: boolean; @@ -43,12 +43,15 @@ interface FileSearchModalProps { } const ModalInput = styled(Form.Input)(({ theme }) => ({ - color: theme.color.darkest, paddingLeft: 40, paddingRight: 28, fontSize: 14, height: 40, + ...(theme.base === 'light' && { + color: theme.color.darkest, + }), + '::placeholder': { color: theme.color.mediumdark, }, @@ -181,7 +184,7 @@ export const FileSearchModal = ({ open, onOpenChange }: FileSearchModalProps) => const storyId = createNewStoryResult.result.storyId; - await selectNewStory(api.selectStory, storyId); + await trySelectNewStory(api.selectStory, storyId); const argTypesInfoResult = await oncePromise({ channel, diff --git a/code/ui/manager/src/components/sidebar/FileSearchModal.utils.tsx b/code/ui/manager/src/components/sidebar/FileSearchModal.utils.tsx index 340544410fc7..d53adde3059c 100644 --- a/code/ui/manager/src/components/sidebar/FileSearchModal.utils.tsx +++ b/code/ui/manager/src/components/sidebar/FileSearchModal.utils.tsx @@ -42,7 +42,7 @@ export function extractSeededRequiredArgs(argTypes: ArgTypes) { return extractedArgTypes; } -export async function selectNewStory( +export async function trySelectNewStory( selectStory: (id: string) => Promise | void, storyId: string, attempt = 1 @@ -55,6 +55,6 @@ export async function selectNewStory( await selectStory(storyId); } catch (e) { await new Promise((resolve) => setTimeout(resolve, 500)); - return selectNewStory(selectStory, storyId, attempt + 1); + return trySelectNewStory(selectStory, storyId, attempt + 1); } } From aac320dea162893c08ef9325fe5ccfde1e481d1f Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 18 Apr 2024 09:33:59 +0200 Subject: [PATCH 246/380] Remove unnecessary imports --- .../src/components/sidebar/FileSearchModal.utils.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/ui/manager/src/components/sidebar/FileSearchModal.utils.test.tsx b/code/ui/manager/src/components/sidebar/FileSearchModal.utils.test.tsx index 892c5517b7e8..cbb3e8c2e2e5 100644 --- a/code/ui/manager/src/components/sidebar/FileSearchModal.utils.test.tsx +++ b/code/ui/manager/src/components/sidebar/FileSearchModal.utils.test.tsx @@ -1,6 +1,6 @@ import { describe, expect, it } from 'vitest'; -import { extractSeededRequiredArgs, trySelectNewStory } from './FileSearchModal.utils'; -import type { ArgTypes, SBType } from '@storybook/csf'; +import { extractSeededRequiredArgs } from './FileSearchModal.utils'; +import type { ArgTypes } from '@storybook/csf'; describe('FileSearchModal.utils', () => { describe('extractSeededRequiredArgs', () => { From f9d81b53c4b30d1d9da2bdc55dd5f318517c8f65 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 18 Apr 2024 10:51:51 +0200 Subject: [PATCH 247/380] Animate modal opening --- .../components/src/components/Modal/Modal.tsx | 4 ++- .../components/sidebar/FileSearchModal.tsx | 27 ++++++++++++++++--- 2 files changed, 27 insertions(+), 4 deletions(-) diff --git a/code/ui/components/src/components/Modal/Modal.tsx b/code/ui/components/src/components/Modal/Modal.tsx index ab9b59a27693..33bac379d2b1 100644 --- a/code/ui/components/src/components/Modal/Modal.tsx +++ b/code/ui/components/src/components/Modal/Modal.tsx @@ -10,6 +10,7 @@ interface ModalProps extends Omit, 'chi children: React.ReactNode; onEscapeKeyDown?: ContentProps['onEscapeKeyDown']; onInteractOutside?: ContentProps['onInteractOutside']; + className?: string; } export const initial = { opacity: 0 }; @@ -22,6 +23,7 @@ function BaseModal({ height, onEscapeKeyDown, onInteractOutside = (ev) => ev.preventDefault(), + className, ...rootProps }: ModalProps) { return ( @@ -35,7 +37,7 @@ function BaseModal({ onInteractOutside={onInteractOutside} onEscapeKeyDown={onEscapeKeyDown} > - + {children} diff --git a/code/ui/manager/src/components/sidebar/FileSearchModal.tsx b/code/ui/manager/src/components/sidebar/FileSearchModal.tsx index b47732ba7a06..de739cf42cbd 100644 --- a/code/ui/manager/src/components/sidebar/FileSearchModal.tsx +++ b/code/ui/manager/src/components/sidebar/FileSearchModal.tsx @@ -37,11 +37,29 @@ import { FileSearchList } from './FileSearchList'; import type { Channel } from '@storybook/channels'; import { extractSeededRequiredArgs, trySelectNewStory } from './FileSearchModal.utils'; +const MODAL_HEIGHT = 418; +const MODAL_HEIGHT_MINIMIZED = 133; + interface FileSearchModalProps { open: boolean; onOpenChange: (open: boolean) => void; } +interface ModalStyledProps { + minimized: boolean; +} + +const ModalStyled = styled(Modal)(({ minimized }) => ({ + top: minimized + ? `calc((100vh - ${MODAL_HEIGHT - MODAL_HEIGHT_MINIMIZED}px) / 2)` + : `calc((100vh - ${MODAL_HEIGHT}px) / 2)`, + ...(!minimized && { + transform: 'translate(-50%, 0)', + transition: 'height 0.2s ease', + }), + animation: 'none', +})); + const ModalInput = styled(Form.Input)(({ theme }) => ({ paddingLeft: 40, paddingRight: 28, @@ -122,6 +140,8 @@ export const FileSearchModal = ({ open, onOpenChange }: FileSearchModalProps) => const [error, setError] = useState(null); const api = useStorybookApi(); + const minimized = !isLoading && fileSearchQueryDeferred === ''; + const [searchResults, setSearchResults] = useState(null); const handleErrorWhenCreatingStory = useCallback(() => { @@ -261,8 +281,9 @@ export const FileSearchModal = ({ open, onOpenChange }: FileSearchModalProps) => }, [fileSearchQueryDeferred, setSearchResults, setLoading]); return ( - /> )} - + ); }; From 05ac43c1fe2d9ed276c92bbe425e1ff3644535ca Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 18 Apr 2024 11:17:03 +0200 Subject: [PATCH 248/380] Try to absolute position modal --- code/ui/manager/src/components/sidebar/FileSearchModal.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/code/ui/manager/src/components/sidebar/FileSearchModal.tsx b/code/ui/manager/src/components/sidebar/FileSearchModal.tsx index de739cf42cbd..32e37252ccd9 100644 --- a/code/ui/manager/src/components/sidebar/FileSearchModal.tsx +++ b/code/ui/manager/src/components/sidebar/FileSearchModal.tsx @@ -39,6 +39,7 @@ import { extractSeededRequiredArgs, trySelectNewStory } from './FileSearchModal. const MODAL_HEIGHT = 418; const MODAL_HEIGHT_MINIMIZED = 133; +const MODAL_DIFF_EVEN = Math.round((MODAL_HEIGHT - MODAL_HEIGHT_MINIMIZED) / 2) * 2; interface FileSearchModalProps { open: boolean; @@ -51,7 +52,7 @@ interface ModalStyledProps { const ModalStyled = styled(Modal)(({ minimized }) => ({ top: minimized - ? `calc((100vh - ${MODAL_HEIGHT - MODAL_HEIGHT_MINIMIZED}px) / 2)` + ? `calc((100vh - ${MODAL_DIFF_EVEN}px) / 2)` : `calc((100vh - ${MODAL_HEIGHT}px) / 2)`, ...(!minimized && { transform: 'translate(-50%, 0)', From 67c67854d4674992c2ec14b9e79ad64aed1b7a3d Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Thu, 18 Apr 2024 11:17:54 +0200 Subject: [PATCH 249/380] Fix highlight color on dark theme --- code/addons/controls/src/SaveStory.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/code/addons/controls/src/SaveStory.tsx b/code/addons/controls/src/SaveStory.tsx index 474d74b89409..acf9143eb46c 100644 --- a/code/addons/controls/src/SaveStory.tsx +++ b/code/addons/controls/src/SaveStory.tsx @@ -17,7 +17,7 @@ const slideIn = keyframes({ }); const highlight = keyframes({ - from: { background: '#E0F0FF' }, + from: { background: 'var(--highlight-bg-color)' }, to: {}, }); @@ -31,6 +31,7 @@ const Container = styled.div({ }); const Bar = styled(BaseBar)(({ theme }) => ({ + '--highlight-bg-color': theme.base === 'dark' ? '#153B5B' : '#E0F0FF', display: 'flex', flexDirection: 'row-reverse', // hide Info rather than Actions on overflow alignItems: 'center', From 07c4fc370ae622121894b41e548d7e826ffbb00f Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Thu, 18 Apr 2024 11:19:09 +0200 Subject: [PATCH 250/380] Add types to stories --- .../src/components/Badge/Badge.stories.tsx | 20 +++++++++++-------- .../components/src/components/Badge/Badge.tsx | 2 +- 2 files changed, 13 insertions(+), 9 deletions(-) diff --git a/code/ui/components/src/components/Badge/Badge.stories.tsx b/code/ui/components/src/components/Badge/Badge.stories.tsx index 530b4f368ac2..974dc64f8be1 100644 --- a/code/ui/components/src/components/Badge/Badge.stories.tsx +++ b/code/ui/components/src/components/Badge/Badge.stories.tsx @@ -1,12 +1,16 @@ +import type { Meta, StoryObj } from '@storybook/react'; import { Badge } from './Badge'; -export default { +const meta = { component: Badge, -}; +} satisfies Meta; -export const Default = { args: { children: 'Default' } }; -export const Positive = { args: { status: 'positive', children: 'Positive' } }; -export const Negative = { args: { status: 'negative', children: 'Negative' } }; -export const Neutral = { args: { status: 'neutral', children: 'Neutral' } }; -export const Warning = { args: { status: 'warning', children: 'Warning' } }; -export const Critical = { args: { status: 'critical', children: 'Critical' } }; +export default meta; +type Story = StoryObj; + +export const Default = { args: { children: 'Default' } } satisfies Story; +export const Positive = { args: { status: 'positive', children: 'Positive' } } satisfies Story; +export const Negative = { args: { status: 'negative', children: 'Negative' } } satisfies Story; +export const Neutral = { args: { status: 'neutral', children: 'Neutral' } } satisfies Story; +export const Warning = { args: { status: 'warning', children: 'Warning' } } satisfies Story; +export const Critical = { args: { status: 'critical', children: 'Critical' } } satisfies Story; diff --git a/code/ui/components/src/components/Badge/Badge.tsx b/code/ui/components/src/components/Badge/Badge.tsx index f9d1c9b91ebb..51bcee12e2ef 100644 --- a/code/ui/components/src/components/Badge/Badge.tsx +++ b/code/ui/components/src/components/Badge/Badge.tsx @@ -80,7 +80,7 @@ const BadgeWrapper = styled.div( ); export interface BadgeProps { - status: 'positive' | 'negative' | 'neutral' | 'warning' | 'critical'; + status?: 'positive' | 'negative' | 'neutral' | 'warning' | 'critical'; children?: React.ReactNode; } From 9077a3f07a8176a762d96bbd4bfbe5c0e0e1d23d Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Thu, 18 Apr 2024 11:19:58 +0200 Subject: [PATCH 251/380] Remove stray story --- .../src/components/form/form.stories.tsx | 26 ------------------- 1 file changed, 26 deletions(-) diff --git a/code/ui/components/src/components/form/form.stories.tsx b/code/ui/components/src/components/form/form.stories.tsx index fc472dfdaa84..fb6070100d41 100644 --- a/code/ui/components/src/components/form/form.stories.tsx +++ b/code/ui/components/src/components/form/form.stories.tsx @@ -121,29 +121,3 @@ export const Input = { }, }, }; - -export const Field2 = { - args: { - label: 'field', - }, - - render: (args: any) => ( - - - - - - - - ), - - argTypes: { - label: { - defaultValue: 'label', - - control: { - type: 'text', - }, - }, - }, -}; From b997f1eb0385a4e773ffc084d0be0e40a0018378 Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Thu, 18 Apr 2024 11:34:58 +0200 Subject: [PATCH 252/380] Use getByLabel rather than getByText --- code/e2e-tests/save-from-controls.spec.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/code/e2e-tests/save-from-controls.spec.ts b/code/e2e-tests/save-from-controls.spec.ts index de64cea7c990..c0d083b6dda9 100644 --- a/code/e2e-tests/save-from-controls.spec.ts +++ b/code/e2e-tests/save-from-controls.spec.ts @@ -50,7 +50,11 @@ test.describe('save-from-controls', () => { await sbPage.panelContent().locator('[data-short-label="Unsaved changes"]').isVisible(); // clone the story - await sbPage.panelContent().locator('button').getByText('Create new story').click(); + await sbPage + .panelContent() + .locator('button') + .getByLabel(/Create new story/) + .click(); const input = await sbPage.page.waitForSelector('[placeholder="Story export name"]'); await input.fill('ClonedStory' + id); From 013638235379624ba40197ec288bff9399c08ff2 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Thu, 18 Apr 2024 12:13:38 +0200 Subject: [PATCH 253/380] support nextjs 14.2 useParams functionality --- code/frameworks/nextjs/package.json | 21 +++- code/frameworks/nextjs/src/dependency-map.ts | 27 ++++++ code/frameworks/nextjs/src/preset.ts | 2 + .../src/routing/app-router-provider.tsx | 97 ++++++++++--------- .../src/routing/path-params-provider-mock.tsx | 6 ++ .../src/routing/path-params-provider.tsx | 46 +++++++++ 6 files changed, 150 insertions(+), 49 deletions(-) create mode 100644 code/frameworks/nextjs/src/dependency-map.ts create mode 100644 code/frameworks/nextjs/src/routing/path-params-provider-mock.tsx create mode 100644 code/frameworks/nextjs/src/routing/path-params-provider.tsx diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 608df58e0d3d..2d3ebb150170 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -32,6 +32,16 @@ "require": "./dist/image-context.js", "import": "./dist/image-context.mjs" }, + "./dist/routing/path-params-provider": { + "types": "./dist/routing/path-params-provider.d.ts", + "require": "./dist/routing/path-params-provider.js", + "import": "./dist/routing/path-params-provider.mjs" + }, + "./dist/routing/path-params-provider-mock": { + "types": "./dist/routing/path-params-provider-mock.d.ts", + "require": "./dist/routing/path-params-provider-mock.js", + "import": "./dist/routing/path-params-provider-mock.mjs" + }, "./preset": { "types": "./dist/preset.d.ts", "require": "./dist/preset.js" @@ -59,6 +69,9 @@ ], "dist/image-context": [ "dist/image-context.d.ts" + ], + "dist/routing/path-params-provider": [ + "dist/routing/path-params-provider-mock.d.ts" ] } }, @@ -131,9 +144,6 @@ "typescript": "^5.3.2", "webpack": "^5.65.0" }, - "optionalDependencies": { - "sharp": "^0.33.3" - }, "peerDependencies": { "next": "^13.5.0 || ^14.0.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0", @@ -148,6 +158,9 @@ "optional": true } }, + "optionalDependencies": { + "sharp": "^0.33.3" + }, "engines": { "node": ">=18.0.0" }, @@ -164,6 +177,8 @@ "./src/images/decorator.tsx", "./src/images/next-legacy-image.tsx", "./src/images/next-image.tsx", + "./src/routing/path-params-provider.tsx", + "./src/routing/path-params-provider-mock.tsx", "./src/font/webpack/loader/storybook-nextjs-font-loader.ts", "./src/rsc/server-only.ts", "./src/swc/next-swc-loader-patch.ts" diff --git a/code/frameworks/nextjs/src/dependency-map.ts b/code/frameworks/nextjs/src/dependency-map.ts new file mode 100644 index 000000000000..dda75c68ff16 --- /dev/null +++ b/code/frameworks/nextjs/src/dependency-map.ts @@ -0,0 +1,27 @@ +import type { Configuration as WebpackConfig } from 'webpack'; +import semver from 'semver'; +import { getNextjsVersion, addScopedAlias } from './utils'; + +// Utility to assist in aliasing modules based on the version of Next.js +// This allows us to support multiple versions of Next.js with a single Storybook configuration +const mapping: Record> = { + '>14.2.0': { + '@storybook/nextjs/dist/routing/path-params-provider': + '@storybook/nextjs/dist/routing/path-params-provider-mock', + }, +}; + +export const configureAliasing = (baseConfig: WebpackConfig): void => { + const version = getNextjsVersion(); + const result: Record = {}; + + Object.keys(mapping).forEach((key) => { + if (semver.intersects(version, key)) { + Object.assign(result, mapping[key]); + } + }); + + Object.entries(result).forEach(([name, alias]) => { + addScopedAlias(baseConfig, name, alias); + }); +}; diff --git a/code/frameworks/nextjs/src/preset.ts b/code/frameworks/nextjs/src/preset.ts index e76db8104d1b..c98e3a6add4d 100644 --- a/code/frameworks/nextjs/src/preset.ts +++ b/code/frameworks/nextjs/src/preset.ts @@ -23,6 +23,7 @@ import { configureBabelLoader } from './babel/loader'; import { configureFastRefresh } from './fastRefresh/webpack'; import { configureAliases } from './aliases/webpack'; import { logger } from '@storybook/node-logger'; +import { configureAliasing } from './dependency-map'; export const addons: PresetProperty<'addons'> = [ dirname(require.resolve(join('@storybook/preset-react-webpack', 'package.json'))), @@ -134,6 +135,7 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig, configureStyledJsx(baseConfig); configureNodePolyfills(baseConfig); configureAliases(baseConfig); + configureAliasing(baseConfig); if (isDevelopment) { configureFastRefresh(baseConfig); diff --git a/code/frameworks/nextjs/src/routing/app-router-provider.tsx b/code/frameworks/nextjs/src/routing/app-router-provider.tsx index 478b8a59f9df..606da513770d 100644 --- a/code/frameworks/nextjs/src/routing/app-router-provider.tsx +++ b/code/frameworks/nextjs/src/routing/app-router-provider.tsx @@ -8,6 +8,9 @@ import { PathnameContext, SearchParamsContext, } from 'next/dist/shared/lib/hooks-client-context.shared-runtime'; +// Using absolute path import to 1) avoid prebundling and 2) being able to substitute the module for Next.js < 14.2 +// eslint-disable-next-line import/no-extraneous-dependencies +import { PathParamsProvider } from '@storybook/nextjs/dist/routing/path-params-provider'; import type { FlightRouterState } from 'next/dist/server/app-render/types'; import type { RouteParams } from './types'; @@ -37,59 +40,61 @@ export const AppRouterProvider: React.FC - - - + + + { - action('nextNavigation.refresh')(); - }, - ...restRouteParams, + nextUrl: pathname, }} > - { + action('nextNavigation.refresh')(); + }, + ...restRouteParams, }} > - {children} - - - - - + + {children} + + + + + + ); }; diff --git a/code/frameworks/nextjs/src/routing/path-params-provider-mock.tsx b/code/frameworks/nextjs/src/routing/path-params-provider-mock.tsx new file mode 100644 index 000000000000..e9a94d35a3f6 --- /dev/null +++ b/code/frameworks/nextjs/src/routing/path-params-provider-mock.tsx @@ -0,0 +1,6 @@ +import React from 'react'; + +// The mock is used for Next.js < 14.2, where the PathParamsProvider doesn't exist +export const PathParamsProvider: React.FC = ({ children }) => { + return <>{children}; +}; diff --git a/code/frameworks/nextjs/src/routing/path-params-provider.tsx b/code/frameworks/nextjs/src/routing/path-params-provider.tsx new file mode 100644 index 000000000000..9fd139549bcd --- /dev/null +++ b/code/frameworks/nextjs/src/routing/path-params-provider.tsx @@ -0,0 +1,46 @@ +import React, { useMemo } from 'react'; +import { PathParamsContext } from 'next/dist/shared/lib/hooks-client-context.shared-runtime'; +import { type Params } from 'next/dist/shared/lib/router/utils/route-matcher'; +import { PAGE_SEGMENT_KEY } from 'next/dist/shared/lib/segment'; +import type { FlightRouterState } from 'next/dist/server/app-render/types'; + +type PathParamsProviderProps = { + tree: FlightRouterState; +}; + +// from Next 14.2.x +// https://github.com/vercel/next.js/pull/60708/files#diff-7b6239af735eba0c401e1a0db1a04dd4575c19a031934f02d128cf3ac813757bR106 +function getSelectedParams(currentTree: FlightRouterState, params: Params = {}): Params { + const parallelRoutes = currentTree[1]; + + for (const parallelRoute of Object.values(parallelRoutes)) { + const segment = parallelRoute[0]; + const isDynamicParameter = Array.isArray(segment); + const segmentValue = isDynamicParameter ? segment[1] : segment; + if (!segmentValue || segmentValue.startsWith(PAGE_SEGMENT_KEY)) continue; + + // Ensure catchAll and optional catchall are turned into an array + const isCatchAll = isDynamicParameter && (segment[2] === 'c' || segment[2] === 'oc'); + + if (isCatchAll) { + params[segment[0]] = segment[1].split('/'); + } else if (isDynamicParameter) { + params[segment[0]] = segment[1]; + } + + params = getSelectedParams(parallelRoute, params); + } + + return params; +} + +export const PathParamsProvider: React.FC> = ({ + tree, + children, +}) => { + const pathParams = useMemo(() => { + return getSelectedParams(tree); + }, [tree]); + + return {children}; +}; From b984dd1e3013cb381d7421adb93b50b6a71daaf5 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Thu, 18 Apr 2024 12:20:24 +0200 Subject: [PATCH 254/380] Update sandbox stories --- .../Head.stories.jsx | 2 +- .../Navigation.stories.jsx | 124 --- .../Navigation.stories.tsx | 54 +- .../Router.stories.tsx} | 2 + .../nextjs/package.json | 3 +- .../nextjs/stories/Navigation.stories.tsx | 54 +- .../portable-stories.test.tsx.snap | 216 ++++ .../nextjs/yarn.lock | 944 +++++++++--------- 8 files changed, 806 insertions(+), 593 deletions(-) delete mode 100644 code/frameworks/nextjs/template/stories_nextjs-default-js/Navigation.stories.jsx rename code/frameworks/nextjs/template/{stories_nextjs-default-js/Router.stories.jsx => stories_nextjs-default-ts/Router.stories.tsx} (95%) diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-js/Head.stories.jsx b/code/frameworks/nextjs/template/stories_nextjs-default-js/Head.stories.jsx index 1e43bb39eba6..9bc032037c60 100644 --- a/code/frameworks/nextjs/template/stories_nextjs-default-js/Head.stories.jsx +++ b/code/frameworks/nextjs/template/stories_nextjs-default-js/Head.stories.jsx @@ -22,7 +22,7 @@ export default { }; export const Default = { - play: async ({ canvasElement }) => { + play: async () => { await waitFor(() => expect(document.title).toEqual('Next.js Head Title')); await expect(document.querySelectorAll('meta[property="og:title"]')).toHaveLength(1); await expect(document.querySelector('meta[property="og:title"]').content).toEqual( diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-js/Navigation.stories.jsx b/code/frameworks/nextjs/template/stories_nextjs-default-js/Navigation.stories.jsx deleted file mode 100644 index 166567aa456c..000000000000 --- a/code/frameworks/nextjs/template/stories_nextjs-default-js/Navigation.stories.jsx +++ /dev/null @@ -1,124 +0,0 @@ -import { - useRouter, - usePathname, - useSearchParams, - useParams, - useSelectedLayoutSegment, - useSelectedLayoutSegments, -} from 'next/navigation'; -import React from 'react'; - -function Component() { - const router = useRouter(); - const pathname = usePathname(); - const searchParams = useSearchParams(); - const params = useParams(); - const segment = useSelectedLayoutSegment(); - const segments = useSelectedLayoutSegments(); - - const searchParamsList = searchParams ? Array.from(searchParams.entries()) : []; - - const routerActions = [ - { - cb: () => router.back(), - name: 'Go back', - }, - { - cb: () => router.forward(), - name: 'Go forward', - }, - { - cb: () => router.prefetch('/prefetched-html'), - name: 'Prefetch', - }, - { - cb: () => router.push('/push-html', { forceOptimisticNavigation: true }), - name: 'Push HTML', - }, - { - cb: () => router.refresh(), - name: 'Refresh', - }, - { - cb: () => router.replace('/replaced-html', { forceOptimisticNavigation: true }), - name: 'Replace', - }, - ]; - - return ( -
-
pathname: {pathname}
-
segment: {segment}
-
segments: {segments.join(',')}
-
- searchparams:{' '} -
    - {searchParamsList.map(([key, value]) => ( -
  • - {key}: {value} -
    • - ))} -
-
-
- params:{' '} -
    - {Object.entries(params).map(([key, value]) => ( -
  • - {key}: {value} -
    • - ))} -
-
- {routerActions.map(({ cb, name }) => ( -
- -
- ))} -
- ); -} - -export default { - component: Component, - parameters: { - nextjs: { - appDirectory: true, - navigation: { - pathname: '/hello', - query: { - foo: 'bar', - }, - }, - }, - }, -}; - -export const Default = {}; - -export const WithSegmentDefined = { - parameters: { - nextjs: { - appDirectory: true, - navigation: { - segments: ['dashboard', 'settings'], - }, - }, - }, -}; - -export const WithSegmentDefinedForParams = { - parameters: { - nextjs: { - appDirectory: true, - navigation: { - segments: [ - ['slug', 'hello'], - ['framework', 'nextjs'], - ], - }, - }, - }, -}; diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Navigation.stories.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/Navigation.stories.tsx index 6287d5ae2a73..f675ad7181ef 100644 --- a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Navigation.stories.tsx +++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/Navigation.stories.tsx @@ -1,5 +1,11 @@ -// usePathname and useSearchParams are only usable if experimental: {appDir: true} is set in next.config.js -import { useRouter, usePathname, useSearchParams } from 'next/navigation'; +import { + useRouter, + usePathname, + useSearchParams, + useParams, + useSelectedLayoutSegment, + useSelectedLayoutSegments, +} from 'next/navigation'; import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; @@ -7,6 +13,9 @@ function Component() { const router = useRouter(); const pathname = usePathname(); const searchParams = useSearchParams(); + const params = useParams(); + const segment = useSelectedLayoutSegment(); + const segments = useSelectedLayoutSegments(); const searchParamsList = searchParams ? Array.from(searchParams.entries()) : []; @@ -42,6 +51,8 @@ function Component() { return (
pathname: {pathname}
+
segment: {segment}
+
segments: {segments.join(',')}
searchparams:{' '}
    @@ -52,6 +63,16 @@ function Component() { ))}
+
+ params:{' '} +
    + {Object.entries(params).map(([key, value]) => ( +
  • + {key}: {value} +
    • + ))} +
+
{routerActions.map(({ cb, name }) => (
+
+ segment: +
+
+ segments: +
+
+ searchparams: + +
    +
  • + foo + : + bar +
    • +
+
+
+ params: + +
    +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ +`; + +exports[`renders navigationStories stories renders WithSegmentDefined 1`] = ` + +
+
+ Global Decorator +
+
+
+ pathname: + /hello +
+
+ segment: + dashboard +
+
+ segments: + dashboard,settings +
searchparams: @@ -669,6 +772,119 @@ exports[`renders navigationStories stories renders Default 1`] = `
+
+ params: + +
    +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ +`; + +exports[`renders navigationStories stories renders WithSegmentDefinedForParams 1`] = ` + +
+
+ Global Decorator +
+
+
+ pathname: + /hello +
+
+ segment: + hello +
+
+ segments: + hello,nextjs +
+
+ searchparams: + +
    +
  • + foo + : + bar +
    • +
+
+
+ params: + +
    +
  • + slug + : + hello +
    • +
  • + framework + : + nextjs +
    • +
+
diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock b/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock index e621c6f62567..383f68faecb3 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock @@ -1566,6 +1566,15 @@ __metadata: languageName: node linkType: hard +"@emnapi/runtime@npm:^1.1.0": + version: 1.1.1 + resolution: "@emnapi/runtime@npm:1.1.1" + dependencies: + tslib: "npm:^2.4.0" + checksum: 10/9c804f79453aa378fbcd0106e67216b9dc2514ec6d4c0ce06aa5483ba853c6f92e1b84cc60b4253276df7355daf40eda5c929b4613e7179bed4f4d3be7d74d83 + languageName: node + linkType: hard + "@emotion/use-insertion-effect-with-fallbacks@npm:^1.0.1": version: 1.0.1 resolution: "@emotion/use-insertion-effect-with-fallbacks@npm:1.0.1" @@ -1810,6 +1819,181 @@ __metadata: languageName: node linkType: hard +"@img/sharp-darwin-arm64@npm:0.33.3": + version: 0.33.3 + resolution: "@img/sharp-darwin-arm64@npm:0.33.3" + dependencies: + "@img/sharp-libvips-darwin-arm64": "npm:1.0.2" + dependenciesMeta: + "@img/sharp-libvips-darwin-arm64": + optional: true + conditions: os=darwin & cpu=arm64 + languageName: node + linkType: hard + +"@img/sharp-darwin-x64@npm:0.33.3": + version: 0.33.3 + resolution: "@img/sharp-darwin-x64@npm:0.33.3" + dependencies: + "@img/sharp-libvips-darwin-x64": "npm:1.0.2" + dependenciesMeta: + "@img/sharp-libvips-darwin-x64": + optional: true + conditions: os=darwin & cpu=x64 + languageName: node + linkType: hard + +"@img/sharp-libvips-darwin-arm64@npm:1.0.2": + version: 1.0.2 + resolution: "@img/sharp-libvips-darwin-arm64@npm:1.0.2" + conditions: os=darwin & cpu=arm64 + languageName: node + linkType: hard + +"@img/sharp-libvips-darwin-x64@npm:1.0.2": + version: 1.0.2 + resolution: "@img/sharp-libvips-darwin-x64@npm:1.0.2" + conditions: os=darwin & cpu=x64 + languageName: node + linkType: hard + +"@img/sharp-libvips-linux-arm64@npm:1.0.2": + version: 1.0.2 + resolution: "@img/sharp-libvips-linux-arm64@npm:1.0.2" + conditions: os=linux & cpu=arm64 & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-libvips-linux-arm@npm:1.0.2": + version: 1.0.2 + resolution: "@img/sharp-libvips-linux-arm@npm:1.0.2" + conditions: os=linux & cpu=arm & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-libvips-linux-s390x@npm:1.0.2": + version: 1.0.2 + resolution: "@img/sharp-libvips-linux-s390x@npm:1.0.2" + conditions: os=linux & cpu=s390x & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-libvips-linux-x64@npm:1.0.2": + version: 1.0.2 + resolution: "@img/sharp-libvips-linux-x64@npm:1.0.2" + conditions: os=linux & cpu=x64 & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-libvips-linuxmusl-arm64@npm:1.0.2": + version: 1.0.2 + resolution: "@img/sharp-libvips-linuxmusl-arm64@npm:1.0.2" + conditions: os=linux & cpu=arm64 & libc=musl + languageName: node + linkType: hard + +"@img/sharp-libvips-linuxmusl-x64@npm:1.0.2": + version: 1.0.2 + resolution: "@img/sharp-libvips-linuxmusl-x64@npm:1.0.2" + conditions: os=linux & cpu=x64 & libc=musl + languageName: node + linkType: hard + +"@img/sharp-linux-arm64@npm:0.33.3": + version: 0.33.3 + resolution: "@img/sharp-linux-arm64@npm:0.33.3" + dependencies: + "@img/sharp-libvips-linux-arm64": "npm:1.0.2" + dependenciesMeta: + "@img/sharp-libvips-linux-arm64": + optional: true + conditions: os=linux & cpu=arm64 & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-linux-arm@npm:0.33.3": + version: 0.33.3 + resolution: "@img/sharp-linux-arm@npm:0.33.3" + dependencies: + "@img/sharp-libvips-linux-arm": "npm:1.0.2" + dependenciesMeta: + "@img/sharp-libvips-linux-arm": + optional: true + conditions: os=linux & cpu=arm & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-linux-s390x@npm:0.33.3": + version: 0.33.3 + resolution: "@img/sharp-linux-s390x@npm:0.33.3" + dependencies: + "@img/sharp-libvips-linux-s390x": "npm:1.0.2" + dependenciesMeta: + "@img/sharp-libvips-linux-s390x": + optional: true + conditions: os=linux & cpu=s390x & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-linux-x64@npm:0.33.3": + version: 0.33.3 + resolution: "@img/sharp-linux-x64@npm:0.33.3" + dependencies: + "@img/sharp-libvips-linux-x64": "npm:1.0.2" + dependenciesMeta: + "@img/sharp-libvips-linux-x64": + optional: true + conditions: os=linux & cpu=x64 & libc=glibc + languageName: node + linkType: hard + +"@img/sharp-linuxmusl-arm64@npm:0.33.3": + version: 0.33.3 + resolution: "@img/sharp-linuxmusl-arm64@npm:0.33.3" + dependencies: + "@img/sharp-libvips-linuxmusl-arm64": "npm:1.0.2" + dependenciesMeta: + "@img/sharp-libvips-linuxmusl-arm64": + optional: true + conditions: os=linux & cpu=arm64 & libc=musl + languageName: node + linkType: hard + +"@img/sharp-linuxmusl-x64@npm:0.33.3": + version: 0.33.3 + resolution: "@img/sharp-linuxmusl-x64@npm:0.33.3" + dependencies: + "@img/sharp-libvips-linuxmusl-x64": "npm:1.0.2" + dependenciesMeta: + "@img/sharp-libvips-linuxmusl-x64": + optional: true + conditions: os=linux & cpu=x64 & libc=musl + languageName: node + linkType: hard + +"@img/sharp-wasm32@npm:0.33.3": + version: 0.33.3 + resolution: "@img/sharp-wasm32@npm:0.33.3" + dependencies: + "@emnapi/runtime": "npm:^1.1.0" + conditions: cpu=wasm32 + languageName: node + linkType: hard + +"@img/sharp-win32-ia32@npm:0.33.3": + version: 0.33.3 + resolution: "@img/sharp-win32-ia32@npm:0.33.3" + conditions: os=win32 & cpu=ia32 + languageName: node + linkType: hard + +"@img/sharp-win32-x64@npm:0.33.3": + version: 0.33.3 + resolution: "@img/sharp-win32-x64@npm:0.33.3" + conditions: os=win32 & cpu=x64 + languageName: node + linkType: hard + "@isaacs/cliui@npm:^8.0.2": version: 8.0.2 resolution: "@isaacs/cliui@npm:8.0.2" @@ -2149,72 +2333,72 @@ __metadata: languageName: node linkType: hard -"@next/env@npm:14.1.0": - version: 14.1.0 - resolution: "@next/env@npm:14.1.0" - checksum: 10/8651faab7827026fe9df32f32f3dc743ca93707fabe6ec8e75ee60bd94781afee8093514e2108d2b2f03198d0a74fc6152d9e73ea01125e89402f068a8516915 +"@next/env@npm:14.2.2": + version: 14.2.2 + resolution: "@next/env@npm:14.2.2" + checksum: 10/5efc7681f19bd5429c267db38c0348380f1c1dcf8196b4e5edcfcdd83aa62d363ceffb60fb619e6a3161e76c4d540ba996ade61ccb4002fdb9cd349613451ec2 languageName: node linkType: hard -"@next/swc-darwin-arm64@npm:14.1.0": - version: 14.1.0 - resolution: "@next/swc-darwin-arm64@npm:14.1.0" +"@next/swc-darwin-arm64@npm:14.2.2": + version: 14.2.2 + resolution: "@next/swc-darwin-arm64@npm:14.2.2" conditions: os=darwin & cpu=arm64 languageName: node linkType: hard -"@next/swc-darwin-x64@npm:14.1.0": - version: 14.1.0 - resolution: "@next/swc-darwin-x64@npm:14.1.0" +"@next/swc-darwin-x64@npm:14.2.2": + version: 14.2.2 + resolution: "@next/swc-darwin-x64@npm:14.2.2" conditions: os=darwin & cpu=x64 languageName: node linkType: hard -"@next/swc-linux-arm64-gnu@npm:14.1.0": - version: 14.1.0 - resolution: "@next/swc-linux-arm64-gnu@npm:14.1.0" +"@next/swc-linux-arm64-gnu@npm:14.2.2": + version: 14.2.2 + resolution: "@next/swc-linux-arm64-gnu@npm:14.2.2" conditions: os=linux & cpu=arm64 & libc=glibc languageName: node linkType: hard -"@next/swc-linux-arm64-musl@npm:14.1.0": - version: 14.1.0 - resolution: "@next/swc-linux-arm64-musl@npm:14.1.0" +"@next/swc-linux-arm64-musl@npm:14.2.2": + version: 14.2.2 + resolution: "@next/swc-linux-arm64-musl@npm:14.2.2" conditions: os=linux & cpu=arm64 & libc=musl languageName: node linkType: hard -"@next/swc-linux-x64-gnu@npm:14.1.0": - version: 14.1.0 - resolution: "@next/swc-linux-x64-gnu@npm:14.1.0" +"@next/swc-linux-x64-gnu@npm:14.2.2": + version: 14.2.2 + resolution: "@next/swc-linux-x64-gnu@npm:14.2.2" conditions: os=linux & cpu=x64 & libc=glibc languageName: node linkType: hard -"@next/swc-linux-x64-musl@npm:14.1.0": - version: 14.1.0 - resolution: "@next/swc-linux-x64-musl@npm:14.1.0" +"@next/swc-linux-x64-musl@npm:14.2.2": + version: 14.2.2 + resolution: "@next/swc-linux-x64-musl@npm:14.2.2" conditions: os=linux & cpu=x64 & libc=musl languageName: node linkType: hard -"@next/swc-win32-arm64-msvc@npm:14.1.0": - version: 14.1.0 - resolution: "@next/swc-win32-arm64-msvc@npm:14.1.0" +"@next/swc-win32-arm64-msvc@npm:14.2.2": + version: 14.2.2 + resolution: "@next/swc-win32-arm64-msvc@npm:14.2.2" conditions: os=win32 & cpu=arm64 languageName: node linkType: hard -"@next/swc-win32-ia32-msvc@npm:14.1.0": - version: 14.1.0 - resolution: "@next/swc-win32-ia32-msvc@npm:14.1.0" +"@next/swc-win32-ia32-msvc@npm:14.2.2": + version: 14.2.2 + resolution: "@next/swc-win32-ia32-msvc@npm:14.2.2" conditions: os=win32 & cpu=ia32 languageName: node linkType: hard -"@next/swc-win32-x64-msvc@npm:14.1.0": - version: 14.1.0 - resolution: "@next/swc-win32-x64-msvc@npm:14.1.0" +"@next/swc-win32-x64-msvc@npm:14.2.2": + version: 14.2.2 + resolution: "@next/swc-win32-x64-msvc@npm:14.2.2" conditions: os=win32 & cpu=x64 languageName: node linkType: hard @@ -2378,8 +2562,8 @@ __metadata: linkType: hard "@storybook/addon-actions@file:../../../code/addons/actions::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/addon-actions@file:../../../code/addons/actions#../../../code/addons/actions::hash=e88010&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/addon-actions@file:../../../code/addons/actions#../../../code/addons/actions::hash=6004d9&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-events": "workspace:*" "@storybook/global": "npm:^5.0.0" @@ -2387,39 +2571,35 @@ __metadata: dequal: "npm:^2.0.2" polished: "npm:^4.2.2" uuid: "npm:^9.0.0" - checksum: 10/9e15238cca3e78b2e24c8cd78c10bc7541a467c0d495bc64312d1e963e5085c049167650e55a6d049340f2a9c552751e2655fabcd320cd7b6b78415c77808aac + checksum: 10/c8bfd628f1ff4a5472b63b7126842eed94a7b8c93f65fee3bfff9a8db71ae45ea63ee7d656b42f29355729f787366e14d434abb75402645a5d0b80d48e1bbc90 languageName: node linkType: hard "@storybook/addon-backgrounds@file:../../../code/addons/backgrounds::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/addon-backgrounds@file:../../../code/addons/backgrounds#../../../code/addons/backgrounds::hash=ae8cf2&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/addon-backgrounds@file:../../../code/addons/backgrounds#../../../code/addons/backgrounds::hash=445bce&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" memoizerific: "npm:^1.11.3" ts-dedent: "npm:^2.0.0" - checksum: 10/73e820d4ee0c7fc6b3c0c6c92783617ed516d558f00b9dbd6573fad96dd4069f93a5a5b895eda32972266595de8cd48fbda061d28e0b4d30756ed831556942f4 + checksum: 10/7f2c66b7516beeeb976d227f27f0cebd600ac5d3abada7d5e01c30d10cc053059f15b607cb78f1c2d03c82a8294fb61598cbca41c3c5f3cf432e79587d4d15a2 languageName: node linkType: hard "@storybook/addon-controls@file:../../../code/addons/controls::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/addon-controls@file:../../../code/addons/controls#../../../code/addons/controls::hash=358687&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/addon-controls@file:../../../code/addons/controls#../../../code/addons/controls::hash=784f9c&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/blocks": "workspace:*" - "@storybook/core-common": "workspace:*" - cjs-module-lexer: "npm:^1.2.3" - es-module-lexer: "npm:^1.5.0" - globby: "npm:^14.0.1" lodash: "npm:^4.17.21" ts-dedent: "npm:^2.0.0" - checksum: 10/feb098e18f942562769dfdfb4afc70655f67f11e6d14acf8e3ca4cfe9a22e09e89ede9f17be6ff1c07a56bed8a6fa1961fa044137a3e7a34471345bcccd091f2 + checksum: 10/6e4db5b470f526bb357af93fd6757fe8d4976f4fdb1c3856b828f408780e27645038bdc70e318de40f8fc069a359d4d822ada860df8cffd41daf5506b5468642 languageName: node linkType: hard "@storybook/addon-docs@file:../../../code/addons/docs::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/addon-docs@file:../../../code/addons/docs#../../../code/addons/docs::hash=20043e&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/addon-docs@file:../../../code/addons/docs#../../../code/addons/docs::hash=9453ad&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@babel/core": "npm:^7.12.3" "@mdx-js/react": "npm:^3.0.0" @@ -2441,13 +2621,13 @@ __metadata: rehype-external-links: "npm:^3.0.0" rehype-slug: "npm:^6.0.0" ts-dedent: "npm:^2.0.0" - checksum: 10/4e28ead6b979994717c2184eb2b8a38297ef363bd4289e932d0d72af09783edbb87e0cd706223517b90f9b5cb9d6b8fccd91d74295b4259d9d0d76d6bb75c1c5 + checksum: 10/ab4de80de2f39340299317bebaf82598557655052bc1e55bd7ffc31b6ab91a3605f734991666d0cf3b18f0d0c411e2fc117aec76bdfe197854f1085c1e9bde3d languageName: node linkType: hard "@storybook/addon-essentials@file:../../../code/addons/essentials::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/addon-essentials@file:../../../code/addons/essentials#../../../code/addons/essentials::hash=516d29&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/addon-essentials@file:../../../code/addons/essentials#../../../code/addons/essentials::hash=80691b&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/addon-actions": "workspace:*" "@storybook/addon-backgrounds": "workspace:*" @@ -2463,22 +2643,22 @@ __metadata: "@storybook/node-logger": "workspace:*" "@storybook/preview-api": "workspace:*" ts-dedent: "npm:^2.0.0" - checksum: 10/a112d664bbbb4e027c3302ddc47f41a94c8b77b31282e927d3c639388cf8c475c5be21c0311d9c7e3e042e4571367641f257818cb42b48de3809ca06bbbaeef0 + checksum: 10/0479f4d2f488ab30b371fd9f2bd5c12b7dcd029aac9a1f8f774701886d941b63c0ec4f50c221469ea220582ce4720d7386b9458cf15a29bf2c03eb51a6c70d13 languageName: node linkType: hard "@storybook/addon-highlight@file:../../../code/addons/highlight::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/addon-highlight@file:../../../code/addons/highlight#../../../code/addons/highlight::hash=1b0e4c&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/addon-highlight@file:../../../code/addons/highlight#../../../code/addons/highlight::hash=7ee0d6&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" - checksum: 10/2dbc0b704c71ed09839d4a2cef0758e47f67b7864d1963d2a41a56cf71d90a73fdb1934fe35f6b4457036894149cb1bc7acbffa5dc46744a1dbf7968dd626648 + checksum: 10/1e7db616fd4ddc6dd32583e6aff3df57d0ff001d2a5de8f990de53625d041b9f09bc6ec729accd0b528f24d54a954e10677bfbeeed07e938c00cbaed1d19c5b9 languageName: node linkType: hard "@storybook/addon-interactions@file:../../../code/addons/interactions::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/addon-interactions@file:../../../code/addons/interactions#../../../code/addons/interactions::hash=08cdfe&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/addon-interactions@file:../../../code/addons/interactions#../../../code/addons/interactions::hash=41e54e&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" "@storybook/instrumenter": "workspace:*" @@ -2486,55 +2666,55 @@ __metadata: "@storybook/types": "workspace:*" polished: "npm:^4.2.2" ts-dedent: "npm:^2.2.0" - checksum: 10/3614ecd2a3265ac36e540416030ec9435fc41127fcdd4e457c52099193f0aeb6553cf56bef179cf2d13053b68843869ddab2c7863dd6b69280375dd3f5c64603 + checksum: 10/064652b4c5ed667349beef06dae49684bd28bc743c109077d46e7070336e536e09b9a117bd3cf501c9e11244c699a5ef5b4ac5f576178a9a8daee5882dd5d04d languageName: node linkType: hard "@storybook/addon-measure@file:../../../code/addons/measure::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/addon-measure@file:../../../code/addons/measure#../../../code/addons/measure::hash=fcfca4&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/addon-measure@file:../../../code/addons/measure#../../../code/addons/measure::hash=1bf2c0&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" tiny-invariant: "npm:^1.3.1" - checksum: 10/74778d016ac62b314e1029419403c29d0218ba08e061bb51da6a273e1ffbc89675739dac85f2c7cc8f28552847410996ebcad6513074ea1fbf7eb571a2c6582b + checksum: 10/dbb3076c99da811d94598070cb57ed19b2a00c875668fc8d586f93d59585b6f2485f04998f61294cd037b43f8d03f21b53d1918c73d1bb9c8652bf6aa6737530 languageName: node linkType: hard "@storybook/addon-outline@file:../../../code/addons/outline::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/addon-outline@file:../../../code/addons/outline#../../../code/addons/outline::hash=df13d0&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/addon-outline@file:../../../code/addons/outline#../../../code/addons/outline::hash=2a387b&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" ts-dedent: "npm:^2.0.0" - checksum: 10/c2ee4e8e4fb74916918bc16c1a76f24f88c8313aec39b8f8cee5c53c3c1e9e9808ab82f236cf53da416d985bdcf8104f3e896401d8d3f3390b6f15c43ae30731 + checksum: 10/bc58cf5bb670333b33fa2c2414b17b0bf97ffdf92bafe89eef04f1965479f7833c388087ebb478f152780c9119f8795ae169125291419fd7e74d11cbb1410540 languageName: node linkType: hard "@storybook/addon-toolbars@file:../../../code/addons/toolbars::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/addon-toolbars@file:../../../code/addons/toolbars#../../../code/addons/toolbars::hash=16af1f&locator=portable-stories-nextjs%40workspace%3A." - checksum: 10/aa26ca213d4191b2af638a44841d2cab0034092b27c426879be7037c3f2f3cfd9dcd668dbc15824e9129b002e9babb9b78638abb42f4c0e5a26070d24c35eb43 + version: 8.1.0-alpha.7 + resolution: "@storybook/addon-toolbars@file:../../../code/addons/toolbars#../../../code/addons/toolbars::hash=dba398&locator=portable-stories-nextjs%40workspace%3A." + checksum: 10/14efee7b4f58d0ee846a71aa6d614a0927a80e32c90f677325e17d0d2402ed38effc226a69c9856073dbb809d84c4c7606c339f99be6b46a6a12e0f3ce2f075b languageName: node linkType: hard "@storybook/addon-viewport@file:../../../code/addons/viewport::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/addon-viewport@file:../../../code/addons/viewport#../../../code/addons/viewport::hash=bb6a19&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/addon-viewport@file:../../../code/addons/viewport#../../../code/addons/viewport::hash=939ad5&locator=portable-stories-nextjs%40workspace%3A." dependencies: memoizerific: "npm:^1.11.3" - checksum: 10/02aaa2b1d56d2f348712b49be2f034c7875b2e8ab5afd431785c25d089b42a1c103059335790b54e655ae38048dfdefe2d6ef8db0af1ee7182e314d1852fa94e + checksum: 10/ab29c073f7d3ce1e9466672441885600429ebbba1742bc2eb0f8656853f25d9a0d86ff865f41a5b76f0809d6929a955cbc7dba716d3834887300fd3813bfa045 languageName: node linkType: hard "@storybook/blocks@file:../../../code/ui/blocks::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/blocks@file:../../../code/ui/blocks#../../../code/ui/blocks::hash=11aaa5&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/blocks@file:../../../code/ui/blocks#../../../code/ui/blocks::hash=e528b8&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:^0.1.4" "@storybook/docs-tools": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" @@ -2562,13 +2742,13 @@ __metadata: optional: true react-dom: optional: true - checksum: 10/edb8ff4f8f87654a18a45368043f272c26a4b8d04ef8ac4c6c67893c503fff1af666d62de426f56ce0eafc93db39763519140b08b3cf1734f3687c20ceeaec6c + checksum: 10/8c5b561b365792c9cb0fbd556c20a6a69ae3e894be43b9251bf131f5b4a542b2734c981d8164992ce0cf0cc70ee8643bcdb30a09d0860c7d1a8fccff3404f79e languageName: node linkType: hard "@storybook/builder-manager@file:../../../code/builders/builder-manager::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/builder-manager@file:../../../code/builders/builder-manager#../../../code/builders/builder-manager::hash=40c69f&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/builder-manager@file:../../../code/builders/builder-manager#../../../code/builders/builder-manager::hash=cdb753&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@fal-works/esbuild-plugin-global-externals": "npm:^2.1.2" "@storybook/core-common": "workspace:*" @@ -2584,13 +2764,13 @@ __metadata: fs-extra: "npm:^11.1.0" process: "npm:^0.11.10" util: "npm:^0.12.4" - checksum: 10/92ae16c32ced613cd0a603ff2f139356c1bf81f2aae2268ef6de2ca6345cb7e7de49b6aea356c7828d752efb05fff3c14ef949ab58dffe1ae08979a37524ff6c + checksum: 10/32bdfc42175480e59defece1f67634d40d2d039668c81e372736ac6990b2144cdd2676f9f9859250fbb5d7855cd12729f0107a64a07e32eb6a9704daf76d816b languageName: node linkType: hard "@storybook/builder-webpack5@file:../../../code/builders/builder-webpack5::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/builder-webpack5@file:../../../code/builders/builder-webpack5#../../../code/builders/builder-webpack5::hash=5fa617&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/builder-webpack5@file:../../../code/builders/builder-webpack5#../../../code/builders/builder-webpack5::hash=097abc&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" @@ -2623,32 +2803,32 @@ __metadata: util: "npm:^0.12.4" util-deprecate: "npm:^1.0.2" webpack: "npm:5" - webpack-dev-middleware: "npm:^6.1.1" + webpack-dev-middleware: "npm:^6.1.2" webpack-hot-middleware: "npm:^2.25.1" webpack-virtual-modules: "npm:^0.5.0" peerDependenciesMeta: typescript: optional: true - checksum: 10/8576dca36ea1621e2b7c1723b4729a96d648a54c372175081a11763ad346ba1209a02fb6819beae592a0cc6a69a55cab44f47e92a05ce8552ca729434520a836 + checksum: 10/82379d860d3065157ad2033724299128efa169fd831d1002b2aba10232e9ae8dd93a788aae0522b8ad0cb6472754e298568f44e341154b94530f16f6683cd475 languageName: node linkType: hard "@storybook/channels@file:../../../code/lib/channels::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/channels@file:../../../code/lib/channels#../../../code/lib/channels::hash=dc1f24&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/channels@file:../../../code/lib/channels#../../../code/lib/channels::hash=c002e8&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" "@storybook/global": "npm:^5.0.0" telejson: "npm:^7.2.0" tiny-invariant: "npm:^1.3.1" - checksum: 10/fa9b6ab69319c46e17a6b9eb3fee4bb3ef12d12c02ee068077a920e9aa08df7fb9b666fafd4c67b686a330f5a37488c2e504427dd748accd7fb76f7cc21dbf3e + checksum: 10/011d5c3631e39ecb2e0bee1d18c238d27a3b2523f674775ced4a187b589a3165504f2e685b77334347f01c415fb07b2ecf748ad0ad12c926b188a8450db6e5b2 languageName: node linkType: hard "@storybook/cli@file:../../../code/lib/cli::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/cli@file:../../../code/lib/cli#../../../code/lib/cli::hash=49e395&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/cli@file:../../../code/lib/cli#../../../code/lib/cli::hash=4c4245&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@babel/core": "npm:^7.23.0" "@babel/types": "npm:^7.23.0" @@ -2689,27 +2869,27 @@ __metadata: bin: getstorybook: ./bin/index.js sb: ./bin/index.js - checksum: 10/37be78e7b11cfb9d712f9b948e3017665fcee970e1b3a4806f3f8307ea9db7e39f4b12fa919086a53efbe4e24a5e6196b2daafb958c11145e9e5d224fa70af55 + checksum: 10/6e3c6c9e15ddafb9444d51c973b5fa83b11d57943dd339cfaa5f51386b1590da12e43cc84f15707080d69cee3edbef79d9dac8d18a0ed4a9c950f180b52e239e languageName: node linkType: hard "@storybook/client-logger@file:../../../code/lib/client-logger::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/client-logger@file:../../../code/lib/client-logger#../../../code/lib/client-logger::hash=c3badc&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/client-logger@file:../../../code/lib/client-logger#../../../code/lib/client-logger::hash=3fcc66&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" - checksum: 10/3b4619cefc5256d914bddae60d853762addb185eb0dbd4052bb4aae9db3b59f3ca2db3a1bbf7e81547a4e047415f52c1f8b9208717741a6d332d47f99d1ed7c0 + checksum: 10/b9659c0914a46c81a0c8b2ab88741832504b4d87da0e785219ea5182154690d5d37107b42923143f598f36bf263b15a6f4dfa14522bdcada8abd97a581981ca3 languageName: node linkType: hard "@storybook/codemod@file:../../../code/lib/codemod::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/codemod@file:../../../code/lib/codemod#../../../code/lib/codemod::hash=34bae5&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/codemod@file:../../../code/lib/codemod#../../../code/lib/codemod::hash=1c69c7&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@babel/core": "npm:^7.23.2" "@babel/preset-env": "npm:^7.23.2" "@babel/types": "npm:^7.23.0" - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:^0.1.4" "@storybook/csf-tools": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/types": "workspace:*" @@ -2721,17 +2901,17 @@ __metadata: prettier: "npm:^3.1.1" recast: "npm:^0.23.5" tiny-invariant: "npm:^1.3.1" - checksum: 10/004e68f27b836994ae7cf798d05e4e71230230b3d2bb23237ba60f91930db9ad213eb4a1fdf99d66bb2ce27b4dc2c8603b3eeacc8d3350975321bb207f0076b2 + checksum: 10/7a45f976805757518ab87011b5708999e4c4692911cbdfa721f662167d61f8aff1a75ced263cc0842187cd16195a2a46816a638c4e89d878bd9af182fb0d4b95 languageName: node linkType: hard "@storybook/components@file:../../../code/ui/components::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/components@file:../../../code/ui/components#../../../code/ui/components::hash=3b9d9f&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/components@file:../../../code/ui/components#../../../code/ui/components::hash=609416&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@radix-ui/react-slot": "npm:^1.0.2" "@storybook/client-logger": "workspace:*" - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:^0.1.4" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" "@storybook/theming": "workspace:*" @@ -2741,13 +2921,13 @@ __metadata: peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: 10/a3580c09bb4fb59402e496a50334f00f9bcf426af95499c351c5ca186b2eed7bf3f35afc88ffe1ea626886fddef4be415cc929ece95827a6a3989f33d7203bce + checksum: 10/adb48901ccd03c10b6c64b8b902372a8044355a2d4c5e3c396e1b2015c8cab610d04459fe8e1b603a0ef372f27ac68e0e6595c3b701e9c6488a47d1070642276 languageName: node linkType: hard "@storybook/core-common@file:../../../code/lib/core-common::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/core-common@file:../../../code/lib/core-common#../../../code/lib/core-common::hash=55d292&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/core-common@file:../../../code/lib/core-common#../../../code/lib/core-common::hash=c9ae25&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-events": "workspace:*" "@storybook/csf-tools": "workspace:*" @@ -2770,6 +2950,7 @@ __metadata: node-fetch: "npm:^2.0.0" picomatch: "npm:^2.3.0" pkg-dir: "npm:^5.0.0" + prettier-fallback: "npm:prettier@^3" pretty-hrtime: "npm:^1.0.3" resolve-from: "npm:^5.0.0" semver: "npm:^7.3.7" @@ -2777,22 +2958,27 @@ __metadata: tiny-invariant: "npm:^1.3.1" ts-dedent: "npm:^2.0.0" util: "npm:^0.12.4" - checksum: 10/e9308c3683651e2c925823e4bee0f91156ba544b0dc72ee6291810e7bd2e17690bce3f426c10d942fd5e18eb545589e5a3347cd02eb6ecceb058dad7a56bb775 + peerDependencies: + prettier: ^2 || ^3 + peerDependenciesMeta: + prettier: + optional: true + checksum: 10/55582fc9caefb8c87cf2367b64acecf11ac266fb0c28f26bdf4ca161f11ecfb1876cde9106f49e68ec112267c58624a21041c5c790bc275a213f1621e16fcc85 languageName: node linkType: hard "@storybook/core-events@file:../../../code/lib/core-events::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/core-events@file:../../../code/lib/core-events#../../../code/lib/core-events::hash=398882&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/core-events@file:../../../code/lib/core-events#../../../code/lib/core-events::hash=47f752&locator=portable-stories-nextjs%40workspace%3A." dependencies: ts-dedent: "npm:^2.0.0" - checksum: 10/4b324946e1c4a859417f99a67f0033696d43ed699c7b6715c136455039cbafb23079ac1e49ca5f8b3891abb9fd91f5dd33dbe6873f566ea722da4a111ebad830 + checksum: 10/40f34bd3746cc94ecb5f8f3fcc516c9f7bd8fc12f48977fdf3987a0e9f0c5306235657c731d379b16f3de4fe0d53754b67196608009b06927d57eed8f44a89ae languageName: node linkType: hard "@storybook/core-server@file:../../../code/lib/core-server::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/core-server@file:../../../code/lib/core-server#../../../code/lib/core-server::hash=be7821&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/core-server@file:../../../code/lib/core-server#../../../code/lib/core-server::hash=d5e086&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@aw-web-design/x-default-browser": "npm:1.4.126" "@babel/core": "npm:^7.23.9" @@ -2801,7 +2987,7 @@ __metadata: "@storybook/channels": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:^0.1.4" "@storybook/csf-tools": "workspace:*" "@storybook/docs-mdx": "npm:3.0.0" "@storybook/global": "npm:^5.0.0" @@ -2817,9 +3003,11 @@ __metadata: "@types/semver": "npm:^7.3.4" better-opn: "npm:^3.0.2" chalk: "npm:^4.1.0" + cjs-module-lexer: "npm:^1.2.3" cli-table3: "npm:^0.6.1" compression: "npm:^1.7.4" detect-port: "npm:^1.3.0" + es-module-lexer: "npm:^1.5.0" express: "npm:^4.17.3" fs-extra: "npm:^11.1.0" globby: "npm:^14.0.1" @@ -2837,47 +3025,47 @@ __metadata: util-deprecate: "npm:^1.0.2" watchpack: "npm:^2.2.0" ws: "npm:^8.2.3" - checksum: 10/e479f05a9461416849ffa168f31a3cb1b3584b6521e618e9478d92f1061dcfc67e80f80ed29315a72e1ea19552ed475a890194597c2bba4eaf9c3d313ca507d1 + checksum: 10/c1e7052671b91921fafaf7a2faccc0b7a80d870f44a8c36753b455f514952cd8b8b281e2a7486957ca32d2100d2143cc913b3e8542624c84074df92567903a76 languageName: node linkType: hard "@storybook/core-webpack@file:../../../code/lib/core-webpack::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/core-webpack@file:../../../code/lib/core-webpack#../../../code/lib/core-webpack::hash=149c77&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/core-webpack@file:../../../code/lib/core-webpack#../../../code/lib/core-webpack::hash=c7e54c&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-common": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/types": "workspace:*" "@types/node": "npm:^18.0.0" ts-dedent: "npm:^2.0.0" - checksum: 10/1280b36bad4121176016ff5d7c9c4677361ac6aa61d0319daf9812ca29bba2bb52a5acd9696a7cc749b4559e2e459808bbb97aaa75dc00d3a1a355367f58beeb + checksum: 10/4bebf551445b0567fd2f47d5827839c6f8f0c8ffb4bb0968a4ffe20a3704a6cfe6928447b6bedbb3bcb95bd574f9a87184692d17e9f23eef16aebf2348ddd599 languageName: node linkType: hard "@storybook/csf-plugin@file:../../../code/lib/csf-plugin::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/csf-plugin@file:../../../code/lib/csf-plugin#../../../code/lib/csf-plugin::hash=82231f&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/csf-plugin@file:../../../code/lib/csf-plugin#../../../code/lib/csf-plugin::hash=af3a0b&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/csf-tools": "workspace:*" unplugin: "npm:^1.3.1" - checksum: 10/de0d6aa14f4317ddeaf95d2fb481c9ca074d324a2d234f9f6faccf60f5e2980c4100732532071a4cdd57cb9036e6d1a119ffa2eaf0133f53a399fbeb974cd6a3 + checksum: 10/675bedecfbd0d0deffa986ee402ef9aabc74ea3d91ee1c30d02d297ba3dc262bb148d59cfdcfe331ab920c1dde904df808c1f74f51a7feb46b90a7860ccd4ab9 languageName: node linkType: hard "@storybook/csf-tools@file:../../../code/lib/csf-tools::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/csf-tools@file:../../../code/lib/csf-tools#../../../code/lib/csf-tools::hash=add4b8&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/csf-tools@file:../../../code/lib/csf-tools#../../../code/lib/csf-tools::hash=672378&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@babel/generator": "npm:^7.23.0" "@babel/parser": "npm:^7.23.0" "@babel/traverse": "npm:^7.23.2" "@babel/types": "npm:^7.23.0" - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:^0.1.4" "@storybook/types": "workspace:*" fs-extra: "npm:^11.1.0" recast: "npm:^0.23.5" ts-dedent: "npm:^2.0.0" - checksum: 10/ecd61bff068425cfa58dc33ea9a6f11c2952a1be42309980af22a1ae6bbe80cc9dfaab90b0d7ebd7c42ef8264fdd2176e85a70bf296239adec6b04223d425291 + checksum: 10/c3d29f831bfc4a1d404a25301140e5f9bb364e080dd10429e72f3576a3581005788c3ce5c7c50fd1ba012a3dd0f469880250872a799ba202edf3e441e2af8b57 languageName: node linkType: hard @@ -2890,12 +3078,12 @@ __metadata: languageName: node linkType: hard -"@storybook/csf@npm:^0.1.2": - version: 0.1.2 - resolution: "@storybook/csf@npm:0.1.2" +"@storybook/csf@npm:^0.1.4": + version: 0.1.4 + resolution: "@storybook/csf@npm:0.1.4" dependencies: type-fest: "npm:^2.19.0" - checksum: 10/11168df65e7b6bd0e5d31e7e805c8ba80397fc190cb33424e043b72bbd85d8f826dba082503992d7f606b72484337ab9d091eca947550613e241fbef57780d4c + checksum: 10/105f3bd748613b775e87454a8470e36733d0ac25b4b88aa9dbebe060f92ff8d5fda1c98289657039d980ecc8d4d59079ef559a42e211568dc97e19d245117156 languageName: node linkType: hard @@ -2907,17 +3095,18 @@ __metadata: linkType: hard "@storybook/docs-tools@file:../../../code/lib/docs-tools::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/docs-tools@file:../../../code/lib/docs-tools#../../../code/lib/docs-tools::hash=64b2ff&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/docs-tools@file:../../../code/lib/docs-tools#../../../code/lib/docs-tools::hash=f77653&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-common": "workspace:*" + "@storybook/core-events": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/types": "workspace:*" "@types/doctrine": "npm:^0.0.3" assert: "npm:^2.1.0" doctrine: "npm:^3.0.0" lodash: "npm:^4.17.21" - checksum: 10/3b50a5959d8fbd8e71b5341e9d57b0da51ad4292b9252b7e218b98c59b9a9f889eb7fcae8f51661cb3b58c33b11e79e46c0594caa9b4aaee262794cdf8188e03 + checksum: 10/55545067636d51223718c53d31f6fb7b9724793c4da7a8034517f1eb152c59799bcbf1da4a24ceb30ace46b074ad4d543d66aa4cbdb438f4160dd2f9769c03f0 languageName: node linkType: hard @@ -2939,8 +3128,8 @@ __metadata: linkType: hard "@storybook/instrumenter@file:../../../code/lib/instrumenter::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/instrumenter@file:../../../code/lib/instrumenter#../../../code/lib/instrumenter::hash=56e904&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/instrumenter@file:../../../code/lib/instrumenter#../../../code/lib/instrumenter::hash=cdd3b4&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" @@ -2949,18 +3138,18 @@ __metadata: "@storybook/preview-api": "workspace:*" "@vitest/utils": "npm:^1.3.1" util: "npm:^0.12.4" - checksum: 10/1a320261c9124db9c502de624acae1e098dc8bb0ab6813b377fed432eafb1f732ad0808f2164bcfbdd0b1aefed6b894f7058a9ea8e796fc123d9f3afe4ac6df7 + checksum: 10/040d6c9b45ba8a021deb572ae198e31d12a0bdce95846abaa6d603e7db6cfeb7c2e9f28d7fafdcc4b358a2c4e836436958fc92792388e6cc3adeffca978d9c46 languageName: node linkType: hard "@storybook/manager-api@file:../../../code/lib/manager-api::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/manager-api@file:../../../code/lib/manager-api#../../../code/lib/manager-api::hash=92b465&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/manager-api@file:../../../code/lib/manager-api#../../../code/lib/manager-api::hash=70ba3e&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:^0.1.4" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" "@storybook/router": "workspace:*" @@ -2972,20 +3161,20 @@ __metadata: store2: "npm:^2.14.2" telejson: "npm:^7.2.0" ts-dedent: "npm:^2.0.0" - checksum: 10/a2580bef8fa439ce74a2e9f7c4f1642bd94a508ea31b8f9876e0d8a856f2d8dc78d6e8d942fb4c5d482f91c482708f3cf42708fe05807899fd8a5a1fc9254171 + checksum: 10/c5d0635ce2e725ee4640801afc1ca21120eb5af398f0a466f1bdfdb87dbbdc7d97ce3aabe9dcc53ee0b210cc4631d23ec01960cc72d6f768ee6657e3f2966095 languageName: node linkType: hard "@storybook/manager@file:../../../code/ui/manager::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/manager@file:../../../code/ui/manager#../../../code/ui/manager::hash=4b786e&locator=portable-stories-nextjs%40workspace%3A." - checksum: 10/8415ceca059644634f0c46e2536713c5f889a4e949a73fc5502ac9bc4c3fc1562ec9633a2910053cff233a06e90279dd1b4a8f6a63c0ae98459224046a2fac7e + version: 8.1.0-alpha.7 + resolution: "@storybook/manager@file:../../../code/ui/manager#../../../code/ui/manager::hash=a2a1d4&locator=portable-stories-nextjs%40workspace%3A." + checksum: 10/315ddc6341701e89d0fb17b42acd32b754aafcf05b37b96b1202b58a415bc0b822601fd8d2fbfd4eaac9f76bda89af4041c555374ae12c6abac60cc3d486f813 languageName: node linkType: hard "@storybook/nextjs@file:../../../code/frameworks/nextjs::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/nextjs@file:../../../code/frameworks/nextjs#../../../code/frameworks/nextjs::hash=07534e&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/nextjs@file:../../../code/frameworks/nextjs#../../../code/frameworks/nextjs::hash=42daab&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@babel/core": "npm:^7.23.2" "@babel/plugin-syntax-bigint": "npm:^7.8.3" @@ -3026,7 +3215,7 @@ __metadata: resolve-url-loader: "npm:^5.0.0" sass-loader: "npm:^12.4.0" semver: "npm:^7.3.5" - sharp: "npm:^0.32.6" + sharp: "npm:^0.33.3" style-loader: "npm:^3.3.1" styled-jsx: "npm:5.1.1" ts-dedent: "npm:^2.0.0" @@ -3037,25 +3226,28 @@ __metadata: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 webpack: ^5.0.0 + dependenciesMeta: + sharp: + optional: true peerDependenciesMeta: typescript: optional: true webpack: optional: true - checksum: 10/fe6e9c489eea6455ff7e5021777715a157b70ac54cf2e85f1f73d8afd5a55e964a08ebda581172d51fb3f4a6a2c33b48f2299ba24e54bdd7d65a11bfd6c96863 + checksum: 10/49c6dc54f90ae110f520c1e199313bb601a4199954e5f6e0c3e479deeb56a7b56a6afadc3a97f2a514fe84fa9f7f94636557cf11a2c230f0bc817eddea7a8bf2 languageName: node linkType: hard "@storybook/node-logger@file:../../../code/lib/node-logger::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/node-logger@file:../../../code/lib/node-logger#../../../code/lib/node-logger::hash=ee9425&locator=portable-stories-nextjs%40workspace%3A." - checksum: 10/2cef663554d4c27c7e49d51432e53d7a847c1ad5072ef479201b648a61a5d039f136451583175b0798fcacee2a1bd824fd6ca0eb3a87f6a81ebca26170821ef7 + version: 8.1.0-alpha.7 + resolution: "@storybook/node-logger@file:../../../code/lib/node-logger#../../../code/lib/node-logger::hash=d94edd&locator=portable-stories-nextjs%40workspace%3A." + checksum: 10/1095793116385c3d2247349869659cd7147094c2a77efa4cd925a051a0d03742563d74dd7cbc578e1de9a06d0637247a06bcafa665c43cb2f482240f3bb178af languageName: node linkType: hard "@storybook/preset-react-webpack@file:../../../code/presets/react-webpack::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/preset-react-webpack@file:../../../code/presets/react-webpack#../../../code/presets/react-webpack::hash=b3541b&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/preset-react-webpack@file:../../../code/presets/react-webpack#../../../code/presets/react-webpack::hash=3d1792&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-webpack": "workspace:*" "@storybook/docs-tools": "workspace:*" @@ -3078,18 +3270,18 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 10/eebfdb7f679a3909d2d7905b2b83acc4ef359c1d4c78048128725c2fce667725c75588fc9d89eaf28998df6f5a6daeee36ff2dee570aa4210b3a92bc83d84ff9 + checksum: 10/77a6a3b5ee2db73619642b72aa8976bf54cbc454c5aa781b6499bf55694b0f28fc4bed4f3e683d4e4964646ce793e5054a567d5d789ac5d5fd5d09794490b9a3 languageName: node linkType: hard "@storybook/preview-api@file:../../../code/lib/preview-api::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/preview-api@file:../../../code/lib/preview-api#../../../code/lib/preview-api::hash=249991&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/preview-api@file:../../../code/lib/preview-api#../../../code/lib/preview-api::hash=ad0fb2&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:^0.1.4" "@storybook/global": "npm:^5.0.0" "@storybook/types": "workspace:*" "@types/qs": "npm:^6.9.5" @@ -3100,14 +3292,14 @@ __metadata: tiny-invariant: "npm:^1.3.1" ts-dedent: "npm:^2.0.0" util-deprecate: "npm:^1.0.2" - checksum: 10/8c479853d76c40af94ce80270579f312989465d3e9ba72bbf91d244e58ecbd1d096892ccb739af223600b36e6e585505a59fd103266da99ee6d03421fec654c2 + checksum: 10/b6da482ccf3c0a502876d3b662a641dad102166cc55816d4f7a0e05b9a10907255f77db13a418dc272912a59136e0ddac4c518653aaa6ee7f79387fd4008c4e9 languageName: node linkType: hard "@storybook/preview@file:../../../code/lib/preview::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/preview@file:../../../code/lib/preview#../../../code/lib/preview::hash=0b541b&locator=portable-stories-nextjs%40workspace%3A." - checksum: 10/a8cccf3680dd96e3855c2ebba9eaa66b37bc142023fbdf189ccd60053bb883d201a02bceda3f5682e9fc3878ceebe474a483f110e05caf365f8a2f632ac24aba + version: 8.1.0-alpha.7 + resolution: "@storybook/preview@file:../../../code/lib/preview#../../../code/lib/preview::hash=edab9e&locator=portable-stories-nextjs%40workspace%3A." + checksum: 10/96674966bbea60cff6399f3bc44fdcb57d765fae1d55b6c1eab0dfadc3a4c36ee55a26ba04762dab5ab0f57e86c5ac45e57bf90fa5a41e716f75877b4b3b617a languageName: node linkType: hard @@ -3130,18 +3322,18 @@ __metadata: linkType: hard "@storybook/react-dom-shim@file:../../../code/lib/react-dom-shim::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/react-dom-shim@file:../../../code/lib/react-dom-shim#../../../code/lib/react-dom-shim::hash=b5101f&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/react-dom-shim@file:../../../code/lib/react-dom-shim#../../../code/lib/react-dom-shim::hash=3e505c&locator=portable-stories-nextjs%40workspace%3A." peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: 10/2c271219da5c20c6a952df9b07313652bf67f00e426370b9bbf93c9b890f7438c24fe005e3cde6c2eeae648f4bd8928b6ec58c40e07299b5be9dc3eec532d75a + checksum: 10/983e0f5f9dc3449173eb42e8a98a65fbac1247cf8b2f102b3438eec53ff4fdce51c84b0eb7aa7a34f002600e84a17c632397290e9614a8bb8d363fa0cb68a01a languageName: node linkType: hard "@storybook/react@file:../../../code/renderers/react::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/react@file:../../../code/renderers/react#../../../code/renderers/react::hash=074121&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/react@file:../../../code/renderers/react#../../../code/renderers/react::hash=cd73fa&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" "@storybook/docs-tools": "workspace:*" @@ -3171,24 +3363,24 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 10/82db446f16311861c75d9aab37d5db52f2e8c3d015e033fc7f723895609431e9fa8e741c0e634f6b0548fdf3f4d7fb740781d146e3ed9d37495d4f95abfbd641 + checksum: 10/834084c0092a8b179f7048c1111308b6a2381cf3ee119372ed2940833b02e13577b5bc334c3f14c3224bd2d8b786939a74fbaf4dea6e8423ff610b34047412b4 languageName: node linkType: hard "@storybook/router@file:../../../code/lib/router::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/router@file:../../../code/lib/router#../../../code/lib/router::hash=7a6ed9&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/router@file:../../../code/lib/router#../../../code/lib/router::hash=bd2ec4&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" memoizerific: "npm:^1.11.3" qs: "npm:^6.10.0" - checksum: 10/3cef95a81959cc85dd6e43966f0c10b32f29b592e354088b76369b29a357db83d5eb35a637f90b5120222543f65b139de3ba865eb806b565de3525285c8ac846 + checksum: 10/226f011fb5068ed708650f9e6ff2cbf8fdf84dd7eee43dfdeb36c828aca0551a78f53f6e6fadf0c477a74b8f9c70a66c6c6ef637e5bf2684c4a8e46e74ba58ae languageName: node linkType: hard "@storybook/telemetry@file:../../../code/lib/telemetry::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/telemetry@file:../../../code/lib/telemetry#../../../code/lib/telemetry::hash=6e2d8d&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/telemetry@file:../../../code/lib/telemetry#../../../code/lib/telemetry::hash=9296ee&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-common": "workspace:*" @@ -3198,13 +3390,13 @@ __metadata: fetch-retry: "npm:^5.0.2" fs-extra: "npm:^11.1.0" read-pkg-up: "npm:^7.0.1" - checksum: 10/eb476498e119b62ac7fc0e06073cc440902ffc859b0f49bb2a6072d3ef949033cd4b675cb93b8847f2b5dd9bfe9ae1e9ee191ff9de5898a32ab873dcdeb1d6eb + checksum: 10/0c7be274ef3ee1108857d012827ef3c0ceec404f11c4e3a7c2cadd69245737d8e46678ea30c581d2b52dbf0980f9893d4521f96330b335b702d07224c837f068 languageName: node linkType: hard "@storybook/test@file:../../../code/lib/test::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/test@file:../../../code/lib/test#../../../code/lib/test::hash=45d0f8&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/test@file:../../../code/lib/test#../../../code/lib/test::hash=76eeb0&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" @@ -3215,15 +3407,14 @@ __metadata: "@testing-library/user-event": "npm:^14.5.2" "@vitest/expect": "npm:1.3.1" "@vitest/spy": "npm:^1.3.1" - chai: "npm:^4.4.1" util: "npm:^0.12.4" - checksum: 10/6101f14b80197cb9a500e4a7872f873abc7c93f6946e5890b2d49b77c503c52ff7b7a4125fb2263466fd0345754c64538a41be6222364660b35e33cc2b549ce9 + checksum: 10/739ea1586f3925a7e791f397e42f9ae2c1994df173e200a757700c2039af2eae7ee36c8aad163d69a46c716ccec73b7a6930f8c2aaa05429de45f2638bc76054 languageName: node linkType: hard "@storybook/theming@file:../../../code/lib/theming::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/theming@file:../../../code/lib/theming#../../../code/lib/theming::hash=acc5fc&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/theming@file:../../../code/lib/theming#../../../code/lib/theming::hash=444382&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@emotion/use-insertion-effect-with-fallbacks": "npm:^1.0.1" "@storybook/client-logger": "workspace:*" @@ -3237,27 +3428,35 @@ __metadata: optional: true react-dom: optional: true - checksum: 10/95ee62ab3810f96e3d16924110bc2a267973e32b67b1cd08b57e6111616f8d488c9cfd8f354bda8ee3db343437b8acdaa5f9ee923671b8783efbcffc4fc3397c + checksum: 10/fce2b08b28299dab7ebb21b2e66153bfa1fa592f55bdf40893f34618fa95e89839b3acd752a62065278148886bc144c272b330285f555ebfebeaceb996456f56 languageName: node linkType: hard "@storybook/types@file:../../../code/lib/types::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "@storybook/types@file:../../../code/lib/types#../../../code/lib/types::hash=0524c9&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "@storybook/types@file:../../../code/lib/types#../../../code/lib/types::hash=40be7e&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@types/express": "npm:^4.7.0" file-system-cache: "npm:2.3.0" - checksum: 10/b2835c9386c22e535e62263fe03ead9c43a1c9762b6524ed8a9b1954887e8853311d580caa7711d57a1eecc9ce30cd7cfd9d814a45723e8434397b7adced1871 + checksum: 10/e05ca8e0de199b56817d274a3543fd2a18412cf574604c1dc2943dd77c1c5578e22b9704b005785922c32340fdb897cc536ccecbf5e02d61ef58d5d654fa97f2 languageName: node linkType: hard -"@swc/helpers@npm:0.5.2": - version: 0.5.2 - resolution: "@swc/helpers@npm:0.5.2" +"@swc/counter@npm:^0.1.3": + version: 0.1.3 + resolution: "@swc/counter@npm:0.1.3" + checksum: 10/df8f9cfba9904d3d60f511664c70d23bb323b3a0803ec9890f60133954173047ba9bdeabce28cd70ba89ccd3fd6c71c7b0bd58be85f611e1ffbe5d5c18616598 + languageName: node + linkType: hard + +"@swc/helpers@npm:0.5.5": + version: 0.5.5 + resolution: "@swc/helpers@npm:0.5.5" dependencies: + "@swc/counter": "npm:^0.1.3" tslib: "npm:^2.4.0" - checksum: 10/3a3b179b3369acd26c5da89a0e779c756ae5231eb18a5507524c7abf955f488d34d86649f5b8417a0e19879688470d06319f5cfca2273d6d6b2046950e0d79af + checksum: 10/1c5ef04f642542212df28c669438f3e0f459dcde7b448a5b1fcafb2e9e4f13e76d8428535a270e91ed123dd2a21189dbed34086b88a8cf68baf84984d6d0e39b languageName: node linkType: hard @@ -4605,13 +4804,6 @@ __metadata: languageName: node linkType: hard -"b4a@npm:^1.6.4": - version: 1.6.6 - resolution: "b4a@npm:1.6.6" - checksum: 10/6154a36bd78b53ecd2843a829352532a1bf9fc8081dab339ba06ca3c9ffcf25d340c3b18fe4ba0fc17a546a54c1ed814cea92cd6b895f6bd2837ca4ee0fc9f52 - languageName: node - linkType: hard - "babel-core@npm:^7.0.0-bridge.0": version: 7.0.0-bridge.0 resolution: "babel-core@npm:7.0.0-bridge.0" @@ -4753,41 +4945,6 @@ __metadata: languageName: node linkType: hard -"bare-events@npm:^2.0.0, bare-events@npm:^2.2.0": - version: 2.2.0 - resolution: "bare-events@npm:2.2.0" - checksum: 10/01f36735615a11529b30e6de2907b6ed032f773b364d19bd13cdf491c8010713af178c9137ad4be68c79363977b476acbd1b203b82b49fca6cc42aaf01d600d0 - languageName: node - linkType: hard - -"bare-fs@npm:^2.1.1": - version: 2.2.0 - resolution: "bare-fs@npm:2.2.0" - dependencies: - bare-events: "npm:^2.0.0" - bare-os: "npm:^2.0.0" - bare-path: "npm:^2.0.0" - streamx: "npm:^2.13.0" - checksum: 10/a12acbaec915cf723dcdf71866df937dd0d27ff47f40b1c76f8c5fb87442ee07af6d74ec376eb87aa72d143df3c95c7dec3e9e6ffdf1c90d77b1c9064b6f96d9 - languageName: node - linkType: hard - -"bare-os@npm:^2.0.0, bare-os@npm:^2.1.0": - version: 2.2.0 - resolution: "bare-os@npm:2.2.0" - checksum: 10/3b32a72a61bd4e4245f27963e34869ff39732c641953dbe5f0f8bff5e3e8826c24aa51b45766762b9a7cd18473c1d83f0ec2b8ff751d6a2169e8e8cdad0ad4de - languageName: node - linkType: hard - -"bare-path@npm:^2.0.0, bare-path@npm:^2.1.0": - version: 2.1.0 - resolution: "bare-path@npm:2.1.0" - dependencies: - bare-os: "npm:^2.1.0" - checksum: 10/811b9414448e8523a1323bc49d773673be0c72b3e008c99041b1bea516064227a530f27e8a35bd91cabc0d1026c5a0898f09ab5347cb3afd5a13fa519e6e973e - languageName: node - linkType: hard - "base64-js@npm:^1.3.1": version: 1.5.1 resolution: "base64-js@npm:1.5.1" @@ -5161,7 +5318,14 @@ __metadata: languageName: node linkType: hard -"caniuse-lite@npm:^1.0.30001579, caniuse-lite@npm:^1.0.30001587": +"caniuse-lite@npm:^1.0.30001579": + version: 1.0.30001611 + resolution: "caniuse-lite@npm:1.0.30001611" + checksum: 10/24710a9cc026e564508fad6905d93d2be14ff38af6e08dce651521e7f4e87b2d2863dd8976da5349173e0c10b47377634238890dc34aa6d44a4d0ca3b1f6e236 + languageName: node + linkType: hard + +"caniuse-lite@npm:^1.0.30001587": version: 1.0.30001589 resolution: "caniuse-lite@npm:1.0.30001589" checksum: 10/5e1d2eb7c32d48c52204227bc1377f0f4c758ef889c53b9b479e28470e7f82eb1db5853e7754be9600ee662ae32a1d58e8bef0fde6edab06322ddbabfd9d212f @@ -5175,7 +5339,7 @@ __metadata: languageName: node linkType: hard -"chai@npm:^4.3.10, chai@npm:^4.4.1": +"chai@npm:^4.3.10": version: 4.4.1 resolution: "chai@npm:4.4.1" dependencies: @@ -5877,15 +6041,6 @@ __metadata: languageName: node linkType: hard -"decompress-response@npm:^6.0.0": - version: 6.0.0 - resolution: "decompress-response@npm:6.0.0" - dependencies: - mimic-response: "npm:^3.1.0" - checksum: 10/d377cf47e02d805e283866c3f50d3d21578b779731e8c5072d6ce8c13cc31493db1c2f6784da9d1d5250822120cefa44f1deab112d5981015f2e17444b763812 - languageName: node - linkType: hard - "dedent@npm:^0.7.0": version: 0.7.0 resolution: "dedent@npm:0.7.0" @@ -5940,13 +6095,6 @@ __metadata: languageName: node linkType: hard -"deep-extend@npm:^0.6.0": - version: 0.6.0 - resolution: "deep-extend@npm:0.6.0" - checksum: 10/7be7e5a8d468d6b10e6a67c3de828f55001b6eb515d014f7aeb9066ce36bd5717161eb47d6a0f7bed8a9083935b465bc163ee2581c8b128d29bf61092fdf57a7 - languageName: node - linkType: hard - "deep-is@npm:^0.1.3": version: 0.1.4 resolution: "deep-is@npm:0.1.4" @@ -6077,10 +6225,10 @@ __metadata: languageName: node linkType: hard -"detect-libc@npm:^2.0.0, detect-libc@npm:^2.0.2": - version: 2.0.2 - resolution: "detect-libc@npm:2.0.2" - checksum: 10/6118f30c0c425b1e56b9d2609f29bec50d35a6af0b762b6ad127271478f3bbfda7319ce869230cf1a351f2b219f39332cde290858553336d652c77b970f15de8 +"detect-libc@npm:^2.0.3": + version: 2.0.3 + resolution: "detect-libc@npm:2.0.3" + checksum: 10/b4ea018d623e077bd395f168a9e81db77370dde36a5b01d067f2ad7989924a81d31cb547ff764acb2aa25d50bb7fdde0b0a93bec02212b0cb430621623246d39 languageName: node linkType: hard @@ -6860,13 +7008,6 @@ __metadata: languageName: node linkType: hard -"expand-template@npm:^2.0.3": - version: 2.0.3 - resolution: "expand-template@npm:2.0.3" - checksum: 10/588c19847216421ed92befb521767b7018dc88f88b0576df98cb242f20961425e96a92cbece525ef28cc5becceae5d544ae0f5b9b5e2aa05acb13716ca5b3099 - languageName: node - linkType: hard - "expect@npm:^29.7.0": version: 29.7.0 resolution: "expect@npm:29.7.0" @@ -6933,13 +7074,6 @@ __metadata: languageName: node linkType: hard -"fast-fifo@npm:^1.1.0, fast-fifo@npm:^1.2.0": - version: 1.3.2 - resolution: "fast-fifo@npm:1.3.2" - checksum: 10/6bfcba3e4df5af7be3332703b69a7898a8ed7020837ec4395bb341bd96cc3a6d86c3f6071dd98da289618cf2234c70d84b2a6f09a33dd6f988b1ff60d8e54275 - languageName: node - linkType: hard - "fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.2": version: 3.3.2 resolution: "fast-glob@npm:3.3.2" @@ -7406,13 +7540,6 @@ __metadata: languageName: node linkType: hard -"github-from-package@npm:0.0.0": - version: 0.0.0 - resolution: "github-from-package@npm:0.0.0" - checksum: 10/2a091ba07fbce22205642543b4ea8aaf068397e1433c00ae0f9de36a3607baf5bcc14da97fbb798cfca6393b3c402031fca06d8b491a44206d6efef391c58537 - languageName: node - linkType: hard - "github-slugger@npm:^2.0.0": version: 2.0.0 resolution: "github-slugger@npm:2.0.0" @@ -7979,13 +8106,6 @@ __metadata: languageName: node linkType: hard -"ini@npm:~1.3.0": - version: 1.3.8 - resolution: "ini@npm:1.3.8" - checksum: 10/314ae176e8d4deb3def56106da8002b462221c174ddb7ce0c49ee72c8cd1f9044f7b10cc555a7d8850982c3b9ca96fc212122749f5234bc2b6fb05fb942ed566 - languageName: node - linkType: hard - "internal-slot@npm:^1.0.4": version: 1.0.7 resolution: "internal-slot@npm:1.0.7" @@ -9581,13 +9701,6 @@ __metadata: languageName: node linkType: hard -"mimic-response@npm:^3.1.0": - version: 3.1.0 - resolution: "mimic-response@npm:3.1.0" - checksum: 10/7e719047612411fe071332a7498cf0448bbe43c485c0d780046c76633a771b223ff49bd00267be122cedebb897037fdb527df72335d0d0f74724604ca70b37ad - languageName: node - linkType: hard - "min-indent@npm:^1.0.0, min-indent@npm:^1.0.1": version: 1.0.1 resolution: "min-indent@npm:1.0.1" @@ -9636,7 +9749,7 @@ __metadata: languageName: node linkType: hard -"minimist@npm:^1.2.0, minimist@npm:^1.2.3, minimist@npm:^1.2.5, minimist@npm:^1.2.6": +"minimist@npm:^1.2.5, minimist@npm:^1.2.6": version: 1.2.8 resolution: "minimist@npm:1.2.8" checksum: 10/908491b6cc15a6c440ba5b22780a0ba89b9810e1aea684e253e43c4e3b8d56ec1dcdd7ea96dde119c29df59c936cde16062159eae4225c691e19c70b432b6e6f @@ -9727,7 +9840,7 @@ __metadata: languageName: node linkType: hard -"mkdirp-classic@npm:^0.5.2, mkdirp-classic@npm:^0.5.3": +"mkdirp-classic@npm:^0.5.2": version: 0.5.3 resolution: "mkdirp-classic@npm:0.5.3" checksum: 10/3f4e088208270bbcc148d53b73e9a5bd9eef05ad2cbf3b3d0ff8795278d50dd1d11a8ef1875ff5aea3fa888931f95bfcb2ad5b7c1061cfefd6284d199e6776ac @@ -9773,13 +9886,6 @@ __metadata: languageName: node linkType: hard -"napi-build-utils@npm:^1.0.1": - version: 1.0.2 - resolution: "napi-build-utils@npm:1.0.2" - checksum: 10/276feb8e30189fe18718e85b6f82e4f952822baa2e7696f771cc42571a235b789dc5907a14d9ffb6838c3e4ff4c25717c2575e5ce1cf6e02e496e204c11e57f6 - languageName: node - linkType: hard - "natural-compare@npm:^1.4.0": version: 1.4.0 resolution: "natural-compare@npm:1.4.0" @@ -9801,21 +9907,21 @@ __metadata: languageName: node linkType: hard -"next@npm:14.1.0": - version: 14.1.0 - resolution: "next@npm:14.1.0" +"next@npm:^14.2.0": + version: 14.2.2 + resolution: "next@npm:14.2.2" dependencies: - "@next/env": "npm:14.1.0" - "@next/swc-darwin-arm64": "npm:14.1.0" - "@next/swc-darwin-x64": "npm:14.1.0" - "@next/swc-linux-arm64-gnu": "npm:14.1.0" - "@next/swc-linux-arm64-musl": "npm:14.1.0" - "@next/swc-linux-x64-gnu": "npm:14.1.0" - "@next/swc-linux-x64-musl": "npm:14.1.0" - "@next/swc-win32-arm64-msvc": "npm:14.1.0" - "@next/swc-win32-ia32-msvc": "npm:14.1.0" - "@next/swc-win32-x64-msvc": "npm:14.1.0" - "@swc/helpers": "npm:0.5.2" + "@next/env": "npm:14.2.2" + "@next/swc-darwin-arm64": "npm:14.2.2" + "@next/swc-darwin-x64": "npm:14.2.2" + "@next/swc-linux-arm64-gnu": "npm:14.2.2" + "@next/swc-linux-arm64-musl": "npm:14.2.2" + "@next/swc-linux-x64-gnu": "npm:14.2.2" + "@next/swc-linux-x64-musl": "npm:14.2.2" + "@next/swc-win32-arm64-msvc": "npm:14.2.2" + "@next/swc-win32-ia32-msvc": "npm:14.2.2" + "@next/swc-win32-x64-msvc": "npm:14.2.2" + "@swc/helpers": "npm:0.5.5" busboy: "npm:1.6.0" caniuse-lite: "npm:^1.0.30001579" graceful-fs: "npm:^4.2.11" @@ -9823,6 +9929,7 @@ __metadata: styled-jsx: "npm:5.1.1" peerDependencies: "@opentelemetry/api": ^1.1.0 + "@playwright/test": ^1.41.2 react: ^18.2.0 react-dom: ^18.2.0 sass: ^1.3.0 @@ -9848,11 +9955,13 @@ __metadata: peerDependenciesMeta: "@opentelemetry/api": optional: true + "@playwright/test": + optional: true sass: optional: true bin: next: dist/bin/next - checksum: 10/1db512c5c82f7ea423a2651a28950d398f49f03df6213630aefdf083d5260edeeed8d995b90c3c8742c0a2346025e748d28078a6261d316fcdade4c5c788e986 + checksum: 10/bf5e795bbbd7ff2baf871e8b2ad9387915c145ee38657525ace99c4450ae554ee2ad485362d3b2b7fdc11cf36766ac9decf1b489a33ace36649f4d090375775b languageName: node linkType: hard @@ -9866,15 +9975,6 @@ __metadata: languageName: node linkType: hard -"node-abi@npm:^3.3.0": - version: 3.55.0 - resolution: "node-abi@npm:3.55.0" - dependencies: - semver: "npm:^7.3.5" - checksum: 10/3dc8699c5eeebd3ed229c246b409dcf38de6a7cb1d0d76aa0345cd364b56bce517294a7026286fcd7a6a54a10429523bda49b6b06d6aab309de06fac6125f614 - languageName: node - linkType: hard - "node-abort-controller@npm:^3.0.1": version: 3.1.1 resolution: "node-abort-controller@npm:3.1.1" @@ -9882,15 +9982,6 @@ __metadata: languageName: node linkType: hard -"node-addon-api@npm:^6.1.0": - version: 6.1.0 - resolution: "node-addon-api@npm:6.1.0" - dependencies: - node-gyp: "npm:latest" - checksum: 10/8eea1d4d965930a177a0508695beb0d89b4c1d80bf330646a035357a1e8fc31e0d09686e2374996e96e757b947a7ece319f98ede3146683f162597c0bcb4df90 - languageName: node - linkType: hard - "node-dir@npm:^0.1.17": version: 0.1.17 resolution: "node-dir@npm:0.1.17" @@ -10608,7 +10699,7 @@ __metadata: eslint-plugin-storybook: "npm:^0.6.15" jest: "npm:^29.7.0" jest-environment-jsdom: "npm:^29.7.0" - next: "npm:14.1.0" + next: "npm:^14.2.0" react: "npm:^18.2.0" react-dom: "npm:^18.2.0" storybook: "npm:^8.0.0" @@ -10737,28 +10828,6 @@ __metadata: languageName: node linkType: hard -"prebuild-install@npm:^7.1.1": - version: 7.1.1 - resolution: "prebuild-install@npm:7.1.1" - dependencies: - detect-libc: "npm:^2.0.0" - expand-template: "npm:^2.0.3" - github-from-package: "npm:0.0.0" - minimist: "npm:^1.2.3" - mkdirp-classic: "npm:^0.5.3" - napi-build-utils: "npm:^1.0.1" - node-abi: "npm:^3.3.0" - pump: "npm:^3.0.0" - rc: "npm:^1.2.7" - simple-get: "npm:^4.0.0" - tar-fs: "npm:^2.0.0" - tunnel-agent: "npm:^0.6.0" - bin: - prebuild-install: bin.js - checksum: 10/6c70a2f82fbda8903497c560a761b000d861a3e772322c8bed012be0f0a084b5aaca4438a3fad1bd3a24210765f4fae06ddd89ea04dc4c034dde693cc0d9d5f4 - languageName: node - linkType: hard - "prelude-ls@npm:^1.2.1": version: 1.2.1 resolution: "prelude-ls@npm:1.2.1" @@ -10766,7 +10835,7 @@ __metadata: languageName: node linkType: hard -"prettier@npm:^3.1.1": +"prettier-fallback@npm:prettier@^3, prettier@npm:^3.1.1": version: 3.2.5 resolution: "prettier@npm:3.2.5" bin: @@ -10988,13 +11057,6 @@ __metadata: languageName: node linkType: hard -"queue-tick@npm:^1.0.1": - version: 1.0.1 - resolution: "queue-tick@npm:1.0.1" - checksum: 10/f447926c513b64a857906f017a3b350f7d11277e3c8d2a21a42b7998fa1a613d7a829091e12d142bb668905c8f68d8103416c7197856efb0c72fa835b8e254b5 - languageName: node - linkType: hard - "queue@npm:6.0.2": version: 6.0.2 resolution: "queue@npm:6.0.2" @@ -11049,20 +11111,6 @@ __metadata: languageName: node linkType: hard -"rc@npm:^1.2.7": - version: 1.2.8 - resolution: "rc@npm:1.2.8" - dependencies: - deep-extend: "npm:^0.6.0" - ini: "npm:~1.3.0" - minimist: "npm:^1.2.0" - strip-json-comments: "npm:~2.0.1" - bin: - rc: ./cli.js - checksum: 10/5c4d72ae7eec44357171585938c85ce066da8ca79146b5635baf3d55d74584c92575fa4e2c9eac03efbed3b46a0b2e7c30634c012b4b4fa40d654353d3c163eb - languageName: node - linkType: hard - "react-colorful@npm:^5.1.2": version: 5.6.1 resolution: "react-colorful@npm:5.6.1" @@ -11667,7 +11715,7 @@ __metadata: languageName: node linkType: hard -"semver@npm:^7.3.5, semver@npm:^7.3.7, semver@npm:^7.5.3, semver@npm:^7.5.4": +"semver@npm:^7.3.5, semver@npm:^7.3.7, semver@npm:^7.5.3, semver@npm:^7.5.4, semver@npm:^7.6.0": version: 7.6.0 resolution: "semver@npm:7.6.0" dependencies: @@ -11781,20 +11829,72 @@ __metadata: languageName: node linkType: hard -"sharp@npm:^0.32.6": - version: 0.32.6 - resolution: "sharp@npm:0.32.6" - dependencies: +"sharp@npm:^0.33.3": + version: 0.33.3 + resolution: "sharp@npm:0.33.3" + dependencies: + "@img/sharp-darwin-arm64": "npm:0.33.3" + "@img/sharp-darwin-x64": "npm:0.33.3" + "@img/sharp-libvips-darwin-arm64": "npm:1.0.2" + "@img/sharp-libvips-darwin-x64": "npm:1.0.2" + "@img/sharp-libvips-linux-arm": "npm:1.0.2" + "@img/sharp-libvips-linux-arm64": "npm:1.0.2" + "@img/sharp-libvips-linux-s390x": "npm:1.0.2" + "@img/sharp-libvips-linux-x64": "npm:1.0.2" + "@img/sharp-libvips-linuxmusl-arm64": "npm:1.0.2" + "@img/sharp-libvips-linuxmusl-x64": "npm:1.0.2" + "@img/sharp-linux-arm": "npm:0.33.3" + "@img/sharp-linux-arm64": "npm:0.33.3" + "@img/sharp-linux-s390x": "npm:0.33.3" + "@img/sharp-linux-x64": "npm:0.33.3" + "@img/sharp-linuxmusl-arm64": "npm:0.33.3" + "@img/sharp-linuxmusl-x64": "npm:0.33.3" + "@img/sharp-wasm32": "npm:0.33.3" + "@img/sharp-win32-ia32": "npm:0.33.3" + "@img/sharp-win32-x64": "npm:0.33.3" color: "npm:^4.2.3" - detect-libc: "npm:^2.0.2" - node-addon-api: "npm:^6.1.0" - node-gyp: "npm:latest" - prebuild-install: "npm:^7.1.1" - semver: "npm:^7.5.4" - simple-get: "npm:^4.0.1" - tar-fs: "npm:^3.0.4" - tunnel-agent: "npm:^0.6.0" - checksum: 10/f0e4a86881e590f86b05ea463229f62cd29afc2dca08b3f597889f872f118c2c456f382bf2c3e90e934b7a1d30f109cf5ed584cf5a23e79d6b6403a8dc0ebe32 + detect-libc: "npm:^2.0.3" + semver: "npm:^7.6.0" + dependenciesMeta: + "@img/sharp-darwin-arm64": + optional: true + "@img/sharp-darwin-x64": + optional: true + "@img/sharp-libvips-darwin-arm64": + optional: true + "@img/sharp-libvips-darwin-x64": + optional: true + "@img/sharp-libvips-linux-arm": + optional: true + "@img/sharp-libvips-linux-arm64": + optional: true + "@img/sharp-libvips-linux-s390x": + optional: true + "@img/sharp-libvips-linux-x64": + optional: true + "@img/sharp-libvips-linuxmusl-arm64": + optional: true + "@img/sharp-libvips-linuxmusl-x64": + optional: true + "@img/sharp-linux-arm": + optional: true + "@img/sharp-linux-arm64": + optional: true + "@img/sharp-linux-s390x": + optional: true + "@img/sharp-linux-x64": + optional: true + "@img/sharp-linuxmusl-arm64": + optional: true + "@img/sharp-linuxmusl-x64": + optional: true + "@img/sharp-wasm32": + optional: true + "@img/sharp-win32-ia32": + optional: true + "@img/sharp-win32-x64": + optional: true + checksum: 10/02bed36749a73c6d56219b86b880458565917d0815746b046aac69dba4afa980d34f3a20631d3146c07bdecd717eb80bf9303df14bcf323575471299ac756da6 languageName: node linkType: hard @@ -11840,24 +11940,6 @@ __metadata: languageName: node linkType: hard -"simple-concat@npm:^1.0.0": - version: 1.0.1 - resolution: "simple-concat@npm:1.0.1" - checksum: 10/4d211042cc3d73a718c21ac6c4e7d7a0363e184be6a5ad25c8a1502e49df6d0a0253979e3d50dbdd3f60ef6c6c58d756b5d66ac1e05cda9cacd2e9fc59e3876a - languageName: node - linkType: hard - -"simple-get@npm:^4.0.0, simple-get@npm:^4.0.1": - version: 4.0.1 - resolution: "simple-get@npm:4.0.1" - dependencies: - decompress-response: "npm:^6.0.0" - once: "npm:^1.3.1" - simple-concat: "npm:^1.0.0" - checksum: 10/93f1b32319782f78f2f2234e9ce34891b7ab6b990d19d8afefaa44423f5235ce2676aae42d6743fecac6c8dfff4b808d4c24fe5265be813d04769917a9a44f36 - languageName: node - linkType: hard - "simple-swizzle@npm:^0.2.2": version: 0.2.2 resolution: "simple-swizzle@npm:0.2.2" @@ -12068,14 +12150,14 @@ __metadata: linkType: hard "storybook@file:../../../code/lib/cli-storybook::locator=portable-stories-nextjs%40workspace%3A.": - version: 8.1.0-alpha.5 - resolution: "storybook@file:../../../code/lib/cli-storybook#../../../code/lib/cli-storybook::hash=6f2e56&locator=portable-stories-nextjs%40workspace%3A." + version: 8.1.0-alpha.7 + resolution: "storybook@file:../../../code/lib/cli-storybook#../../../code/lib/cli-storybook::hash=f4ae08&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/cli": "workspace:*" bin: sb: ./index.js storybook: ./index.js - checksum: 10/d2acea2b4b4a262aab8a97f90847cb53f62e004b1c18d2f583983f43bf781ef5f3cb2a0cec84b8ac00c8ad0f030982f5cb07643c078bccf403a629986d66871d + checksum: 10/4975a0a1000ff520cc202c55d6ba047b5fb2512a91d86d3c92fb90a894f3c7e2f1f482069ff3e88f076cd0984d2839c8a9800aa372e126b8827ff3448231281c languageName: node linkType: hard @@ -12115,20 +12197,6 @@ __metadata: languageName: node linkType: hard -"streamx@npm:^2.13.0, streamx@npm:^2.15.0": - version: 2.16.1 - resolution: "streamx@npm:2.16.1" - dependencies: - bare-events: "npm:^2.2.0" - fast-fifo: "npm:^1.1.0" - queue-tick: "npm:^1.0.1" - dependenciesMeta: - bare-events: - optional: true - checksum: 10/f6d0899adf089385d9c58a630fc705dc6c3931b18181c32860e5013955a339a3b763a4df62168f37c7fc56b1f7bb2a38db989fa9df487995278cb5d46f248da6 - languageName: node - linkType: hard - "string-length@npm:^4.0.1": version: 4.0.2 resolution: "string-length@npm:4.0.2" @@ -12250,13 +12318,6 @@ __metadata: languageName: node linkType: hard -"strip-json-comments@npm:~2.0.1": - version: 2.0.1 - resolution: "strip-json-comments@npm:2.0.1" - checksum: 10/1074ccb63270d32ca28edfb0a281c96b94dc679077828135141f27d52a5a398ef5e78bcf22809d23cadc2b81dfbe345eb5fd8699b385c8b1128907dec4a7d1e1 - languageName: node - linkType: hard - "style-loader@npm:^3.3.1": version: 3.3.4 resolution: "style-loader@npm:3.3.4" @@ -12330,7 +12391,7 @@ __metadata: languageName: node linkType: hard -"tar-fs@npm:^2.0.0, tar-fs@npm:^2.1.1": +"tar-fs@npm:^2.1.1": version: 2.1.1 resolution: "tar-fs@npm:2.1.1" dependencies: @@ -12342,23 +12403,6 @@ __metadata: languageName: node linkType: hard -"tar-fs@npm:^3.0.4": - version: 3.0.5 - resolution: "tar-fs@npm:3.0.5" - dependencies: - bare-fs: "npm:^2.1.1" - bare-path: "npm:^2.1.0" - pump: "npm:^3.0.0" - tar-stream: "npm:^3.1.5" - dependenciesMeta: - bare-fs: - optional: true - bare-path: - optional: true - checksum: 10/a15c18e80b872918c7dff22ff29db367c8014d1b3d34b0ec57cfe11645836dc01487c078a975a9d5e358f078f59e7b8adc5c671cc0848ba27b9b429669722bd8 - languageName: node - linkType: hard - "tar-stream@npm:^2.1.4": version: 2.2.0 resolution: "tar-stream@npm:2.2.0" @@ -12372,17 +12416,6 @@ __metadata: languageName: node linkType: hard -"tar-stream@npm:^3.1.5": - version: 3.1.7 - resolution: "tar-stream@npm:3.1.7" - dependencies: - b4a: "npm:^1.6.4" - fast-fifo: "npm:^1.2.0" - streamx: "npm:^2.15.0" - checksum: 10/b21a82705a72792544697c410451a4846af1f744176feb0ff11a7c3dd0896961552e3def5e1c9a6bbee4f0ae298b8252a1f4c9381e9f991553b9e4847976f05c - languageName: node - linkType: hard - "tar@npm:^6.1.11, tar@npm:^6.1.2, tar@npm:^6.2.0": version: 6.2.0 resolution: "tar@npm:6.2.0" @@ -12674,15 +12707,6 @@ __metadata: languageName: node linkType: hard -"tunnel-agent@npm:^0.6.0": - version: 0.6.0 - resolution: "tunnel-agent@npm:0.6.0" - dependencies: - safe-buffer: "npm:^5.0.1" - checksum: 10/7f0d9ed5c22404072b2ae8edc45c071772affd2ed14a74f03b4e71b4dd1a14c3714d85aed64abcaaee5fec2efc79002ba81155c708f4df65821b444abb0cfade - languageName: node - linkType: hard - "type-check@npm:^0.4.0, type-check@npm:~0.4.0": version: 0.4.0 resolution: "type-check@npm:0.4.0" @@ -13101,9 +13125,9 @@ __metadata: languageName: node linkType: hard -"webpack-dev-middleware@npm:^6.1.1": - version: 6.1.1 - resolution: "webpack-dev-middleware@npm:6.1.1" +"webpack-dev-middleware@npm:^6.1.2": + version: 6.1.3 + resolution: "webpack-dev-middleware@npm:6.1.3" dependencies: colorette: "npm:^2.0.10" memfs: "npm:^3.4.12" @@ -13115,7 +13139,7 @@ __metadata: peerDependenciesMeta: webpack: optional: true - checksum: 10/b0637584f18b02174fd7fc2e6278efb8e2fb5308abe4ffe73658e59ff53a62c05686f161b06bd5c41d42611aa395b8c8f087d7ff8cf2304232c097a694a5b94e + checksum: 10/ee699430c33c4dfa2a016becc85e32a9b04aa0b6edbce0bb173c4dfd29c80c77d192d14fd2f2ec500dbdede4e0f1c5557993aa20a04a44190750a1e8e13f6d67 languageName: node linkType: hard From fb24aef2a7ae8797239c22db010b40f722968f70 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Thu, 18 Apr 2024 12:29:44 +0200 Subject: [PATCH 255/380] remove path params aliasing --- code/frameworks/nextjs/package.json | 15 ------ code/frameworks/nextjs/src/dependency-map.ts | 27 ----------- code/frameworks/nextjs/src/preset.ts | 2 - .../src/routing/app-router-provider.tsx | 41 ++++++++++++++--- .../src/routing/path-params-provider-mock.tsx | 6 --- .../src/routing/path-params-provider.tsx | 46 ------------------- .../nextjs/yarn.lock | 4 +- 7 files changed, 37 insertions(+), 104 deletions(-) delete mode 100644 code/frameworks/nextjs/src/dependency-map.ts delete mode 100644 code/frameworks/nextjs/src/routing/path-params-provider-mock.tsx delete mode 100644 code/frameworks/nextjs/src/routing/path-params-provider.tsx diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 2d3ebb150170..65aebaa66c60 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -32,16 +32,6 @@ "require": "./dist/image-context.js", "import": "./dist/image-context.mjs" }, - "./dist/routing/path-params-provider": { - "types": "./dist/routing/path-params-provider.d.ts", - "require": "./dist/routing/path-params-provider.js", - "import": "./dist/routing/path-params-provider.mjs" - }, - "./dist/routing/path-params-provider-mock": { - "types": "./dist/routing/path-params-provider-mock.d.ts", - "require": "./dist/routing/path-params-provider-mock.js", - "import": "./dist/routing/path-params-provider-mock.mjs" - }, "./preset": { "types": "./dist/preset.d.ts", "require": "./dist/preset.js" @@ -69,9 +59,6 @@ ], "dist/image-context": [ "dist/image-context.d.ts" - ], - "dist/routing/path-params-provider": [ - "dist/routing/path-params-provider-mock.d.ts" ] } }, @@ -177,8 +164,6 @@ "./src/images/decorator.tsx", "./src/images/next-legacy-image.tsx", "./src/images/next-image.tsx", - "./src/routing/path-params-provider.tsx", - "./src/routing/path-params-provider-mock.tsx", "./src/font/webpack/loader/storybook-nextjs-font-loader.ts", "./src/rsc/server-only.ts", "./src/swc/next-swc-loader-patch.ts" diff --git a/code/frameworks/nextjs/src/dependency-map.ts b/code/frameworks/nextjs/src/dependency-map.ts deleted file mode 100644 index dda75c68ff16..000000000000 --- a/code/frameworks/nextjs/src/dependency-map.ts +++ /dev/null @@ -1,27 +0,0 @@ -import type { Configuration as WebpackConfig } from 'webpack'; -import semver from 'semver'; -import { getNextjsVersion, addScopedAlias } from './utils'; - -// Utility to assist in aliasing modules based on the version of Next.js -// This allows us to support multiple versions of Next.js with a single Storybook configuration -const mapping: Record> = { - '>14.2.0': { - '@storybook/nextjs/dist/routing/path-params-provider': - '@storybook/nextjs/dist/routing/path-params-provider-mock', - }, -}; - -export const configureAliasing = (baseConfig: WebpackConfig): void => { - const version = getNextjsVersion(); - const result: Record = {}; - - Object.keys(mapping).forEach((key) => { - if (semver.intersects(version, key)) { - Object.assign(result, mapping[key]); - } - }); - - Object.entries(result).forEach(([name, alias]) => { - addScopedAlias(baseConfig, name, alias); - }); -}; diff --git a/code/frameworks/nextjs/src/preset.ts b/code/frameworks/nextjs/src/preset.ts index c98e3a6add4d..e76db8104d1b 100644 --- a/code/frameworks/nextjs/src/preset.ts +++ b/code/frameworks/nextjs/src/preset.ts @@ -23,7 +23,6 @@ import { configureBabelLoader } from './babel/loader'; import { configureFastRefresh } from './fastRefresh/webpack'; import { configureAliases } from './aliases/webpack'; import { logger } from '@storybook/node-logger'; -import { configureAliasing } from './dependency-map'; export const addons: PresetProperty<'addons'> = [ dirname(require.resolve(join('@storybook/preset-react-webpack', 'package.json'))), @@ -135,7 +134,6 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig, configureStyledJsx(baseConfig); configureNodePolyfills(baseConfig); configureAliases(baseConfig); - configureAliasing(baseConfig); if (isDevelopment) { configureFastRefresh(baseConfig); diff --git a/code/frameworks/nextjs/src/routing/app-router-provider.tsx b/code/frameworks/nextjs/src/routing/app-router-provider.tsx index 606da513770d..f81c29a5fe59 100644 --- a/code/frameworks/nextjs/src/routing/app-router-provider.tsx +++ b/code/frameworks/nextjs/src/routing/app-router-provider.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useMemo } from 'react'; import { LayoutRouterContext, AppRouterContext, @@ -7,10 +7,10 @@ import { import { PathnameContext, SearchParamsContext, + PathParamsContext, } from 'next/dist/shared/lib/hooks-client-context.shared-runtime'; -// Using absolute path import to 1) avoid prebundling and 2) being able to substitute the module for Next.js < 14.2 -// eslint-disable-next-line import/no-extraneous-dependencies -import { PathParamsProvider } from '@storybook/nextjs/dist/routing/path-params-provider'; +import { type Params } from 'next/dist/shared/lib/router/utils/route-matcher'; +import { PAGE_SEGMENT_KEY } from 'next/dist/shared/lib/segment'; import type { FlightRouterState } from 'next/dist/server/app-render/types'; import type { RouteParams } from './types'; @@ -19,6 +19,32 @@ type AppRouterProviderProps = { routeParams: RouteParams; }; +// Since Next 14.2.x +// https://github.com/vercel/next.js/pull/60708/files#diff-7b6239af735eba0c401e1a0db1a04dd4575c19a031934f02d128cf3ac813757bR106 +function getSelectedParams(currentTree: FlightRouterState, params: Params = {}): Params { + const parallelRoutes = currentTree[1]; + + for (const parallelRoute of Object.values(parallelRoutes)) { + const segment = parallelRoute[0]; + const isDynamicParameter = Array.isArray(segment); + const segmentValue = isDynamicParameter ? segment[1] : segment; + if (!segmentValue || segmentValue.startsWith(PAGE_SEGMENT_KEY)) continue; + + // Ensure catchAll and optional catchall are turned into an array + const isCatchAll = isDynamicParameter && (segment[2] === 'c' || segment[2] === 'oc'); + + if (isCatchAll) { + params[segment[0]] = segment[1].split('/'); + } else if (isDynamicParameter) { + params[segment[0]] = segment[1]; + } + + params = getSelectedParams(parallelRoute, params); + } + + return params; +} + const getParallelRoutes = (segmentsList: Array): FlightRouterState => { const segment = segmentsList.shift(); @@ -37,10 +63,13 @@ export const AppRouterProvider: React.FC { + return getSelectedParams(tree); + }, [tree]); // https://github.com/vercel/next.js/blob/canary/packages/next/src/client/components/app-router.tsx#L436 return ( - + - + ); }; diff --git a/code/frameworks/nextjs/src/routing/path-params-provider-mock.tsx b/code/frameworks/nextjs/src/routing/path-params-provider-mock.tsx deleted file mode 100644 index e9a94d35a3f6..000000000000 --- a/code/frameworks/nextjs/src/routing/path-params-provider-mock.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import React from 'react'; - -// The mock is used for Next.js < 14.2, where the PathParamsProvider doesn't exist -export const PathParamsProvider: React.FC = ({ children }) => { - return <>{children}; -}; diff --git a/code/frameworks/nextjs/src/routing/path-params-provider.tsx b/code/frameworks/nextjs/src/routing/path-params-provider.tsx deleted file mode 100644 index 9fd139549bcd..000000000000 --- a/code/frameworks/nextjs/src/routing/path-params-provider.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import React, { useMemo } from 'react'; -import { PathParamsContext } from 'next/dist/shared/lib/hooks-client-context.shared-runtime'; -import { type Params } from 'next/dist/shared/lib/router/utils/route-matcher'; -import { PAGE_SEGMENT_KEY } from 'next/dist/shared/lib/segment'; -import type { FlightRouterState } from 'next/dist/server/app-render/types'; - -type PathParamsProviderProps = { - tree: FlightRouterState; -}; - -// from Next 14.2.x -// https://github.com/vercel/next.js/pull/60708/files#diff-7b6239af735eba0c401e1a0db1a04dd4575c19a031934f02d128cf3ac813757bR106 -function getSelectedParams(currentTree: FlightRouterState, params: Params = {}): Params { - const parallelRoutes = currentTree[1]; - - for (const parallelRoute of Object.values(parallelRoutes)) { - const segment = parallelRoute[0]; - const isDynamicParameter = Array.isArray(segment); - const segmentValue = isDynamicParameter ? segment[1] : segment; - if (!segmentValue || segmentValue.startsWith(PAGE_SEGMENT_KEY)) continue; - - // Ensure catchAll and optional catchall are turned into an array - const isCatchAll = isDynamicParameter && (segment[2] === 'c' || segment[2] === 'oc'); - - if (isCatchAll) { - params[segment[0]] = segment[1].split('/'); - } else if (isDynamicParameter) { - params[segment[0]] = segment[1]; - } - - params = getSelectedParams(parallelRoute, params); - } - - return params; -} - -export const PathParamsProvider: React.FC> = ({ - tree, - children, -}) => { - const pathParams = useMemo(() => { - return getSelectedParams(tree); - }, [tree]); - - return {children}; -}; diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock b/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock index 383f68faecb3..99d48a7714ec 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock @@ -3174,7 +3174,7 @@ __metadata: "@storybook/nextjs@file:../../../code/frameworks/nextjs::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.7 - resolution: "@storybook/nextjs@file:../../../code/frameworks/nextjs#../../../code/frameworks/nextjs::hash=42daab&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/nextjs@file:../../../code/frameworks/nextjs#../../../code/frameworks/nextjs::hash=ecd7b3&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@babel/core": "npm:^7.23.2" "@babel/plugin-syntax-bigint": "npm:^7.8.3" @@ -3234,7 +3234,7 @@ __metadata: optional: true webpack: optional: true - checksum: 10/49c6dc54f90ae110f520c1e199313bb601a4199954e5f6e0c3e479deeb56a7b56a6afadc3a97f2a514fe84fa9f7f94636557cf11a2c230f0bc817eddea7a8bf2 + checksum: 10/891ddb3195346b52cd70bc7fa9abaf8c58eca580bd0d46414b1ae3ac9867792b3b806b7fc0f514b7e7ea777709fae57903463f9910fa4c4afff6da6b64487f31 languageName: node linkType: hard From 2fb5ed55c7136623f53b66de467560d6519b47b1 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Thu, 18 Apr 2024 12:41:20 +0200 Subject: [PATCH 256/380] update snapshots --- .../src/errors/preview-errors.test.ts | 21 ++++++++++++++----- .../core-events/src/errors/preview-errors.ts | 2 +- 2 files changed, 17 insertions(+), 6 deletions(-) diff --git a/code/lib/core-events/src/errors/preview-errors.test.ts b/code/lib/core-events/src/errors/preview-errors.test.ts index 398646c4a624..fec373b143ee 100644 --- a/code/lib/core-events/src/errors/preview-errors.test.ts +++ b/code/lib/core-events/src/errors/preview-errors.test.ts @@ -8,11 +8,22 @@ describe('UnknownFlowArgTypesError', () => { raw: "SomeType['someProperty']", }; - const message = `"There was a failure when generating ArgTypes in Typescript for {"name":"signature","raw":"SomeType['someProperty']"} - This type is either not supported or it is a bug in Storybook. - If you think this is a bug, please open an issue in Github."`; - const typeError = new UnknownArgTypesError({ type, language: 'Typescript' }); - expect(typeError.message).toMatchInlineSnapshot(message); + expect(typeError.message).toMatchInlineSnapshot(` + "There was a failure when generating detailed ArgTypes in Typescript for: + + { + "name": "signature", + "raw": "SomeType['someProperty']" + } + + Storybook will fall back to use a generic type description instead. + + This type is either not supported or it is a bug in the docgen generation in Storybook. + If you think this is a bug, please detail it as much as possible in the Github issue. + + More info: https://github.com/storybookjs/storybook/issues/26606 + " + `); }); }); diff --git a/code/lib/core-events/src/errors/preview-errors.ts b/code/lib/core-events/src/errors/preview-errors.ts index 09b5224d0322..1f30378a3bca 100644 --- a/code/lib/core-events/src/errors/preview-errors.ts +++ b/code/lib/core-events/src/errors/preview-errors.ts @@ -272,7 +272,7 @@ export class UnknownArgTypesError extends StorybookError { ${JSON.stringify(this.data.type, null, 2)} - so Storybook will fall back to a generic type description. + Storybook will fall back to use a generic type description instead. This type is either not supported or it is a bug in the docgen generation in Storybook. If you think this is a bug, please detail it as much as possible in the Github issue.`; From f1808c8be19e4e4ce9bb7a40310ee771dcbc8b84 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 18 Apr 2024 13:14:29 +0200 Subject: [PATCH 257/380] Modal polishing --- .../src/components/sidebar/FileList.tsx | 1 + .../src/components/sidebar/FileSearchList.tsx | 13 +- .../components/sidebar/FileSearchModal.tsx | 146 ++++++++++-------- .../src/components/sidebar/useMeasure.tsx | 33 ++++ 4 files changed, 121 insertions(+), 72 deletions(-) create mode 100644 code/ui/manager/src/components/sidebar/useMeasure.tsx diff --git a/code/ui/manager/src/components/sidebar/FileList.tsx b/code/ui/manager/src/components/sidebar/FileList.tsx index b966c112b4e6..9ee0a7d0f35f 100644 --- a/code/ui/manager/src/components/sidebar/FileList.tsx +++ b/code/ui/manager/src/components/sidebar/FileList.tsx @@ -6,6 +6,7 @@ export const FileList = styled('div')(({ theme }) => ({ overflow: 'auto', msOverflowStyle: 'none', scrollbarWidth: 'none', + position: 'relative', '::-webkit-scrollbar': { display: 'none', }, diff --git a/code/ui/manager/src/components/sidebar/FileSearchList.tsx b/code/ui/manager/src/components/sidebar/FileSearchList.tsx index 447ecf8599b0..2cc27eaec015 100644 --- a/code/ui/manager/src/components/sidebar/FileSearchList.tsx +++ b/code/ui/manager/src/components/sidebar/FileSearchList.tsx @@ -89,6 +89,7 @@ const FileListItemExport = styled('li')(({ theme }) => ({ gap: '8px', alignItems: 'center', justifyContent: 'space-between', + fontSize: '14px', cursor: 'pointer', ':focus-visible': { @@ -145,8 +146,10 @@ const ChevronDownIconStyled = styled(ChevronDownIcon)(({ theme }) => ({ const DefaultExport = styled('span')(({ theme }) => ({ display: 'inline-block', padding: `1px ${theme.appBorderRadius}px`, - color: '#727272', - backgroundColor: '#F2F4F5', + borderRadius: '2px', + fontSize: '10px', + color: theme.base === 'dark' ? theme.color.lightest : '#727272', + backgroundColor: theme.base === 'dark' ? 'rgba(255, 255, 255, 0.1)' : '#F2F4F5', })); const NoResults = styled('div')(({ theme }) => ({ @@ -390,9 +393,3 @@ export const FileSearchList = memo(function FileSearchList({ return null; }); - -// border-radius: 2px; -// font-size: 10px; - -// apply font-size: 14px to sub items -// input sizing and icon positioning diff --git a/code/ui/manager/src/components/sidebar/FileSearchModal.tsx b/code/ui/manager/src/components/sidebar/FileSearchModal.tsx index 32e37252ccd9..e3be813631d3 100644 --- a/code/ui/manager/src/components/sidebar/FileSearchModal.tsx +++ b/code/ui/manager/src/components/sidebar/FileSearchModal.tsx @@ -36,31 +36,34 @@ import type { SearchResult } from './FileSearchList'; import { FileSearchList } from './FileSearchList'; import type { Channel } from '@storybook/channels'; import { extractSeededRequiredArgs, trySelectNewStory } from './FileSearchModal.utils'; +import { useMeasure } from './useMeasure'; const MODAL_HEIGHT = 418; -const MODAL_HEIGHT_MINIMIZED = 133; -const MODAL_DIFF_EVEN = Math.round((MODAL_HEIGHT - MODAL_HEIGHT_MINIMIZED) / 2) * 2; interface FileSearchModalProps { open: boolean; onOpenChange: (open: boolean) => void; } -interface ModalStyledProps { - minimized: boolean; -} +const ModalStyled = styled(Modal)(() => ({ + boxShadow: 'none', + background: 'transparent', +})); -const ModalStyled = styled(Modal)(({ minimized }) => ({ - top: minimized - ? `calc((100vh - ${MODAL_DIFF_EVEN}px) / 2)` - : `calc((100vh - ${MODAL_HEIGHT}px) / 2)`, - ...(!minimized && { - transform: 'translate(-50%, 0)', - transition: 'height 0.2s ease', - }), - animation: 'none', +const ModalChild = styled.div<{ height?: number }>(({ theme, height }) => ({ + backgroundColor: theme.background.bar, + borderRadius: 6, + boxShadow: `rgba(255, 255, 255, 0.05) 0 0 0 1px inset, rgba(14, 18, 22, 0.35) 0px 10px 18px -10px`, + padding: '16px', + transition: 'height 0.3s', + height: height ? `${height + 32}px` : 'auto', + overflow: 'hidden', })); +const ModalContent = styled(Modal.Content)({ + margin: 0, +}); + const ModalInput = styled(Form.Input)(({ theme }) => ({ paddingLeft: 40, paddingRight: 28, @@ -140,8 +143,14 @@ export const FileSearchModal = ({ open, onOpenChange }: FileSearchModalProps) => const emittedValue = useRef(null); const [error, setError] = useState(null); const api = useStorybookApi(); + const [modalContentRef, modalContentDimensions] = useMeasure(); + const [modalMaxHeight, setModalMaxHeight] = useState(modalContentDimensions.height); - const minimized = !isLoading && fileSearchQueryDeferred === ''; + useEffect(() => { + if (modalMaxHeight < modalContentDimensions.height) { + setModalMaxHeight(modalContentDimensions.height); + } + }, [modalContentDimensions.height, modalMaxHeight]); const [searchResults, setSearchResults] = useState(null); @@ -254,14 +263,20 @@ export const FileSearchModal = ({ open, onOpenChange }: FileSearchModalProps) => const channel = addons.getChannel(); const set = (data: FileComponentSearchResult) => { + const isLatestRequest = + data.result?.searchQuery === fileSearchQueryDeferred && data.result.files; + if (data.success) { - if (data.result?.searchQuery === fileSearchQueryDeferred && data.result.files) { + if (isLatestRequest) { setSearchResults(data.result.files); } } else { setError(data.error); } - setLoading(false); + + if (isLatestRequest) { + setLoading(false); + } }; channel.on(FILE_COMPONENT_SEARCH_RESPONSE, set); @@ -283,8 +298,7 @@ export const FileSearchModal = ({ open, onOpenChange }: FileSearchModalProps) => return ( onOpenChange(false); }} > - - - Add a new story - We will create a new story for your component - - - - - - { - startTransition(() => { - setFileSearchQuery((e.target as HTMLInputElement).value); - }); - }} - /> - {isLoading && ( - - - - )} - - { - - } - - {error && ( - - {error} - { - setError(null); - }} - /> - - )} + + + + Add a new story + We will create a new story for your component + + + + + + { + startTransition(() => { + setFileSearchQuery((e.target as HTMLInputElement).value); + }); + }} + /> + {isLoading && ( + + + + )} + + { + + } + + {error && ( + + {error} + { + setError(null); + }} + /> + + )} + ); }; diff --git a/code/ui/manager/src/components/sidebar/useMeasure.tsx b/code/ui/manager/src/components/sidebar/useMeasure.tsx new file mode 100644 index 000000000000..26d349bd216f --- /dev/null +++ b/code/ui/manager/src/components/sidebar/useMeasure.tsx @@ -0,0 +1,33 @@ +import React from 'react'; + +// Copied and modified from https://usehooks.com/usemeasure +export function useMeasure() { + const [dimensions, setDimensions] = React.useState({ + width: null, + height: null, + }); + + const prevObserver = React.useRef(null); + + const customRef = React.useCallback((node: T) => { + if (prevObserver.current) { + prevObserver.current.disconnect(); + prevObserver.current = null; + } + + if (node?.nodeType === Node.ELEMENT_NODE) { + const observer = new ResizeObserver(([entry]) => { + if (entry && entry.borderBoxSize) { + const { inlineSize: width, blockSize: height } = entry.borderBoxSize[0]; + + setDimensions({ width, height }); + } + }); + + observer.observe(node); + prevObserver.current = observer; + } + }, []); + + return [customRef, dimensions] as const; +} From 03039b675a2a02a3ce20579b27f2e0f0d46f031f Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 18 Apr 2024 15:04:16 +0200 Subject: [PATCH 258/380] allow args to contain function etc. --- code/addons/controls/package.json | 1 + code/addons/controls/src/manager.tsx | 21 ++++++++++++++----- .../src/utils/save-story/save-story.ts | 13 ++++++++++-- code/yarn.lock | 1 + 4 files changed, 29 insertions(+), 7 deletions(-) diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json index 482e56e196ee..5c9bcd56f1ee 100644 --- a/code/addons/controls/package.json +++ b/code/addons/controls/package.json @@ -54,6 +54,7 @@ "@storybook/blocks": "workspace:*", "dequal": "^2.0.2", "lodash": "^4.17.21", + "telejson": "^7.2.0", "ts-dedent": "^2.0.0" }, "devDependencies": { diff --git a/code/addons/controls/src/manager.tsx b/code/addons/controls/src/manager.tsx index 228a8ae31e66..802a52cf871e 100644 --- a/code/addons/controls/src/manager.tsx +++ b/code/addons/controls/src/manager.tsx @@ -1,3 +1,4 @@ +import { stringify } from 'telejson'; import React from 'react'; import { dequal as deepEqual } from 'dequal'; import { AddonPanel, Badge, Spaced } from '@storybook/components'; @@ -26,6 +27,14 @@ function Title() { ); } +const stringifyArgs = (args: Record) => + stringify(args, { + allowDate: true, + allowFunction: true, + allowUndefined: true, + allowSymbol: true, + }); + interface ResponseData { id: string; success: boolean; @@ -67,10 +76,12 @@ addons.register(ADDON_ID, (api) => { if (data.type !== 'story') throw new Error('Not a story'); return requestResponse(api, SAVE_STORY_REQUEST, SAVE_STORY_RESPONSE, { // Only send updated args - args: Object.entries(data.args || {}).reduce((acc, [key, value]) => { - if (!deepEqual(value, data.initialArgs?.[key])) acc[key] = value; - return acc; - }, {}), + args: stringifyArgs( + Object.entries(data.args || {}).reduce((acc, [key, value]) => { + if (!deepEqual(value, data.initialArgs?.[key])) acc[key] = value; + return acc; + }, {}) + ), csfId: data.id, importPath: data.importPath, }); @@ -80,7 +91,7 @@ addons.register(ADDON_ID, (api) => { const data = api.getCurrentStoryData(); if (data.type !== 'story') throw new Error('Not a story'); return requestResponse(api, SAVE_STORY_REQUEST, SAVE_STORY_RESPONSE, { - args: data.args, + args: data.args ? stringifyArgs(data.args) : data.args, csfId: data.id, importPath: data.importPath, name, diff --git a/code/lib/core-server/src/utils/save-story/save-story.ts b/code/lib/core-server/src/utils/save-story/save-story.ts index 6d2622f10e17..ea109b04d0fd 100644 --- a/code/lib/core-server/src/utils/save-story/save-story.ts +++ b/code/lib/core-server/src/utils/save-story/save-story.ts @@ -1,4 +1,5 @@ /* eslint-disable no-underscore-dangle */ +import { parse } from 'telejson'; import type { Channel } from '@storybook/channels'; import { SAVE_STORY_REQUEST, SAVE_STORY_RESPONSE, STORY_RENDERED } from '@storybook/core-events'; import { storyNameFromExport, toId } from '@storybook/csf'; @@ -11,12 +12,20 @@ import type { CoreConfig, Options } from '@storybook/types'; import { telemetry } from '@storybook/telemetry'; import { logger } from '@storybook/node-logger'; +const parseArgs = (args: string): Record => + parse(args, { + allowDate: true, + allowFunction: true, + allowUndefined: true, + allowSymbol: true, + }); + interface SaveStoryRequest { id: string; payload: { csfId: string; importPath: string; - args: Record; + args: string; name?: string; }; } @@ -73,7 +82,7 @@ export function initializeSaveStory(channel: Channel, options: Options, coreConf await updateArgsInCsfFile( name ? duplicateStoryWithNewName(parsed, storyName, name) : csf.getStoryExport(storyName), - args + parseArgs(args) ); // Writing the CSF file should trigger HMR, which causes the story to rerender. Delay the diff --git a/code/yarn.lock b/code/yarn.lock index 2ee01f76a383..d73b24c6441b 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -4994,6 +4994,7 @@ __metadata: lodash: "npm:^4.17.21" react: "npm:^18.2.0" react-dom: "npm:^18.2.0" + telejson: "npm:^7.2.0" ts-dedent: "npm:^2.0.0" languageName: unknown linkType: soft From cfec679380a8466c34afd1fff81bc9aedd12407c Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 18 Apr 2024 15:21:38 +0200 Subject: [PATCH 259/380] Add stories and polishing --- .../src/data/file-component-search.ts | 5 +- .../create-new-story-channel.test.ts | 13 +- .../create-new-story-channel.ts | 9 +- .../src/server-channel/file-search-channel.ts | 4 +- .../src/components/sidebar/FileList.tsx | 2 +- .../sidebar/FileSearchList.stories.tsx | 112 ++++++++++++++++++ .../src/components/sidebar/FileSearchList.tsx | 17 ++- .../FileSearchListSkeleton.stories.tsx | 15 +++ .../components/sidebar/FileSearchModal.tsx | 31 +++-- 9 files changed, 182 insertions(+), 26 deletions(-) create mode 100644 code/ui/manager/src/components/sidebar/FileSearchList.stories.tsx create mode 100644 code/ui/manager/src/components/sidebar/FileSearchListSkeleton.stories.tsx diff --git a/code/lib/core-events/src/data/file-component-search.ts b/code/lib/core-events/src/data/file-component-search.ts index 72877a07c55d..1f35b6e7f0db 100644 --- a/code/lib/core-events/src/data/file-component-search.ts +++ b/code/lib/core-events/src/data/file-component-search.ts @@ -6,19 +6,18 @@ export interface FileComponentSearchPayload { export interface FileComponentSearchResult { success: true | false; result: null | { + // The search query - Helps to identify the event on the frontend searchQuery: string; files: Array<{ // The filepath relative to the project root filepath: string; - // The search query - Helps to identify the event on the frontend - searchQuery: string; // A list of exported components exportedComponents: Array<{ // the name of the exported component name: string; // True, if the exported component is a default export default: boolean; - }>; + }> | null; }> | null; }; error: null | string; diff --git a/code/lib/core-server/src/server-channel/create-new-story-channel.test.ts b/code/lib/core-server/src/server-channel/create-new-story-channel.test.ts index 92244207ca8a..e9eecaef8796 100644 --- a/code/lib/core-server/src/server-channel/create-new-story-channel.test.ts +++ b/code/lib/core-server/src/server-channel/create-new-story-channel.test.ts @@ -3,7 +3,10 @@ import { initCreateNewStoryChannel } from './create-new-story-channel'; import path from 'path'; import type { ChannelTransport } from '@storybook/channels'; import { Channel } from '@storybook/channels'; -import { CREATE_NEW_STORYFILE, CREATE_NEW_STORYFILE_RESULT } from '@storybook/core-events'; +import { + CREATE_NEW_STORYFILE_REQUEST, + CREATE_NEW_STORYFILE_RESPONSE, +} from '@storybook/core-events'; vi.mock('@storybook/core-common', async (importOriginal) => { const actual = await importOriginal(); @@ -42,7 +45,7 @@ describe('createNewStoryChannel', () => { describe('initCreateNewStoryChannel', () => { it('should emit an event with a story id', async () => { - mockChannel.addListener(CREATE_NEW_STORYFILE_RESULT, createNewStoryFileEventListener); + mockChannel.addListener(CREATE_NEW_STORYFILE_RESPONSE, createNewStoryFileEventListener); const cwd = process.cwd(); initCreateNewStoryChannel(mockChannel, { @@ -59,7 +62,7 @@ describe('createNewStoryChannel', () => { }, } as any); - mockChannel.emit(CREATE_NEW_STORYFILE, { + mockChannel.emit(CREATE_NEW_STORYFILE_REQUEST, { componentFilePath: 'src/components/Page.jsx', componentExportName: 'Page', componentIsDefaultExport: true, @@ -81,7 +84,7 @@ describe('createNewStoryChannel', () => { }); it('should emit an error event if an error occurs', async () => { - mockChannel.addListener(CREATE_NEW_STORYFILE_RESULT, createNewStoryFileEventListener); + mockChannel.addListener(CREATE_NEW_STORYFILE_RESPONSE, createNewStoryFileEventListener); const cwd = process.cwd(); mockFs.writeFile.mockImplementation(() => { @@ -102,7 +105,7 @@ describe('createNewStoryChannel', () => { }, } as any); - mockChannel.emit(CREATE_NEW_STORYFILE, { + mockChannel.emit(CREATE_NEW_STORYFILE_REQUEST, { componentFilePath: 'src/components/Page.jsx', componentExportName: 'Page', componentIsDefaultExport: true, diff --git a/code/lib/core-server/src/server-channel/create-new-story-channel.ts b/code/lib/core-server/src/server-channel/create-new-story-channel.ts index 304c7411fba9..2e5282fd311f 100644 --- a/code/lib/core-server/src/server-channel/create-new-story-channel.ts +++ b/code/lib/core-server/src/server-channel/create-new-story-channel.ts @@ -6,6 +6,7 @@ import { CREATE_NEW_STORYFILE_RESPONSE, } from '@storybook/core-events'; import fs from 'node:fs/promises'; +import { existsSync } from 'node:fs'; import { getNewStoryFile } from '../utils/get-new-story-file'; import { getStoryId } from '../utils/get-story-id'; import path from 'node:path'; @@ -21,6 +22,12 @@ export function initCreateNewStoryChannel(channel: Channel, options: Options) { options ); + const relativeStoryFilePath = path.relative(process.cwd(), storyFilePath); + + if (existsSync(storyFilePath)) { + throw new Error(`Story file already exists at .${path.sep}${relativeStoryFilePath}`); + } + await fs.writeFile(storyFilePath, storyFileContent, 'utf-8'); const storyId = await getStoryId({ storyFilePath, exportedStoryName }, options); @@ -29,7 +36,7 @@ export function initCreateNewStoryChannel(channel: Channel, options: Options) { success: true, result: { storyId, - storyFilePath: `./${path.relative(process.cwd(), storyFilePath)}`, + storyFilePath: `./${relativeStoryFilePath}`, exportedStoryName, }, error: null, diff --git a/code/lib/core-server/src/server-channel/file-search-channel.ts b/code/lib/core-server/src/server-channel/file-search-channel.ts index 6d26aaede94a..f35db74624ae 100644 --- a/code/lib/core-server/src/server-channel/file-search-channel.ts +++ b/code/lib/core-server/src/server-channel/file-search-channel.ts @@ -67,7 +67,7 @@ export function initFileSearchChannel(channel: Channel, options: Options) { files: await Promise.all(entries), }, error: null, - } as FileComponentSearchResult); + } satisfies FileComponentSearchResult); } catch (e: any) { /** * Emits the search result event with an error message @@ -76,7 +76,7 @@ export function initFileSearchChannel(channel: Channel, options: Options) { success: false, result: null, error: `An error occurred while searching for components in the project.\n${e?.message}`, - } as FileComponentSearchResult); + } satisfies FileComponentSearchResult); } }); diff --git a/code/ui/manager/src/components/sidebar/FileList.tsx b/code/ui/manager/src/components/sidebar/FileList.tsx index 9ee0a7d0f35f..db1dadcb57bf 100644 --- a/code/ui/manager/src/components/sidebar/FileList.tsx +++ b/code/ui/manager/src/components/sidebar/FileList.tsx @@ -13,7 +13,7 @@ export const FileList = styled('div')(({ theme }) => ({ // after element which fades out the list '&::after': { content: '""', - position: 'absolute', + position: 'fixed', pointerEvents: 'none', bottom: 0, left: 0, diff --git a/code/ui/manager/src/components/sidebar/FileSearchList.stories.tsx b/code/ui/manager/src/components/sidebar/FileSearchList.stories.tsx new file mode 100644 index 000000000000..a0b458da679c --- /dev/null +++ b/code/ui/manager/src/components/sidebar/FileSearchList.stories.tsx @@ -0,0 +1,112 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { fn, fireEvent, findByText, expect } from '@storybook/test'; + +import { FileSearchList } from './FileSearchList'; + +const meta = { + component: FileSearchList, + args: { + onNewStory: fn(), + }, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + isLoading: true, + searchResults: null, + }, +}; + +export const Empty: Story = { + args: { + isLoading: false, + searchResults: [], + }, +}; + +export const WithResults: Story = { + play: async ({ canvasElement, args }) => { + // use react testing library + // select first item in the list and click on it + const firstItem = await findByText(canvasElement, 'module-multiple-exports.js'); + fireEvent.click(firstItem); + + const exportedElement1 = await findByText(canvasElement, 'module-multiple-exports'); + fireEvent.click(exportedElement1); + + expect(args.onNewStory).toHaveBeenCalledWith({ + componentExportName: 'default', + componentFilePath: 'src/module-multiple-exports.js', + componentIsDefaultExport: true, + }); + + const exportedElement2 = await findByText(canvasElement, 'namedExport'); + fireEvent.click(exportedElement2); + + expect(args.onNewStory).toHaveBeenCalledWith({ + componentExportName: 'namedExport', + componentFilePath: 'src/module-multiple-exports.js', + componentIsDefaultExport: false, + }); + + const singleExport = await findByText(canvasElement, 'module-single-export.js'); + fireEvent.click(singleExport); + + expect(args.onNewStory).toHaveBeenCalledWith({ + componentExportName: 'default', + componentFilePath: 'src/module-single-export.js', + componentIsDefaultExport: true, + }); + + expect(args.onNewStory).toHaveBeenCalledTimes(3); + + const noExportsModule1 = await findByText(canvasElement, 'no-exports-module.js'); + fireEvent.click(noExportsModule1); + + expect(args.onNewStory).toHaveBeenCalledTimes(3); + + const noExportsModule2 = await findByText(canvasElement, 'no-exports-module-1.js'); + fireEvent.click(noExportsModule2); + + expect(args.onNewStory).toHaveBeenCalledTimes(3); + }, + args: { + isLoading: false, + searchResults: [ + { + exportedComponents: [], + filepath: 'src/no-exports-module.js', + }, + { + exportedComponents: [ + { + default: true, + name: 'default', + }, + { + default: false, + name: 'namedExport', + }, + ], + filepath: 'src/module-multiple-exports.js', + }, + { + exportedComponents: null, + filepath: 'src/no-exports-module-1.js', + }, + { + exportedComponents: [ + { + default: true, + name: 'default', + }, + ], + filepath: 'src/module-single-export.js', + }, + ], + }, +}; diff --git a/code/ui/manager/src/components/sidebar/FileSearchList.tsx b/code/ui/manager/src/components/sidebar/FileSearchList.tsx index 2cc27eaec015..c12e1ec96756 100644 --- a/code/ui/manager/src/components/sidebar/FileSearchList.tsx +++ b/code/ui/manager/src/components/sidebar/FileSearchList.tsx @@ -1,4 +1,4 @@ -import React, { memo, useCallback, useLayoutEffect, useState } from 'react'; +import React, { memo, useCallback, useLayoutEffect, useMemo, useState } from 'react'; import { styled } from '@storybook/theming'; import { ChevronDownIcon, ChevronRightIcon, ComponentIcon } from '@storybook/icons'; import { FileSearchListLoadingSkeleton } from './FileSearchListSkeleton'; @@ -185,6 +185,17 @@ export const FileSearchList = memo(function FileSearchList({ const [selectedItem, setSelectedItem] = useState(null); const parentRef = React.useRef(); + const sortedSearchResults = useMemo(() => { + // search results with no exports should be at the end of the list + return [...(searchResults ?? [])]?.sort((a, b) => { + if (a.exportedComponents?.length && b.exportedComponents?.length < 1) { + return -1; + } + + return 0; + }); + }, [searchResults]); + const rowVirtualizer = useVirtualizer({ count: searchResults?.length || 0, getScrollElement: () => parentRef.current, @@ -348,7 +359,7 @@ export const FileSearchList = memo(function FileSearchList({ ); } - if (searchResults?.length > 0) { + if (sortedSearchResults?.length > 0) { return ( {rowVirtualizer.getVirtualItems().map((virtualItem) => { - const searchResult = searchResults[virtualItem.index]; + const searchResult = sortedSearchResults[virtualItem.index]; return searchResult.exportedComponents === null || searchResult.exportedComponents?.length === 0 ? ( ; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: {}, +}; diff --git a/code/ui/manager/src/components/sidebar/FileSearchModal.tsx b/code/ui/manager/src/components/sidebar/FileSearchModal.tsx index e3be813631d3..a0bf5a6be995 100644 --- a/code/ui/manager/src/components/sidebar/FileSearchModal.tsx +++ b/code/ui/manager/src/components/sidebar/FileSearchModal.tsx @@ -125,12 +125,17 @@ const ModalError = styled(Modal.Error)({ position: 'absolute', padding: '8px 40px 8px 16px', bottom: 0, + maxHeight: 'initial', + + '> div': { + padding: 0, + }, }); const ModalErrorCloseIcon = styled(CloseAltIcon)({ position: 'absolute', top: 8, - right: 16, + right: -24, cursor: 'pointer', }); @@ -258,6 +263,10 @@ export const FileSearchModal = ({ open, onOpenChange }: FileSearchModalProps) => [api, handleSuccessfullyCreatedStory, handleErrorWhenCreatingStory] ); + useEffect(() => { + setError(null); + }, [searchResults]); + useEffect(() => { setLoading(true); const channel = addons.getChannel(); @@ -347,17 +356,17 @@ export const FileSearchModal = ({ open, onOpenChange }: FileSearchModalProps) => /> } - {error && ( - - {error} - { - setError(null); - }} - /> - - )} + {error && fileSearchQueryDeferred !== '' && ( + + {error} + { + setError(null); + }} + /> + + )} ); }; From 2a4c28963533f47adb74fd3c53546bfb3a99b94e Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 18 Apr 2024 15:27:01 +0200 Subject: [PATCH 260/380] hopefully fix the e2e --- code/e2e-tests/save-from-controls.spec.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/code/e2e-tests/save-from-controls.spec.ts b/code/e2e-tests/save-from-controls.spec.ts index c0d083b6dda9..7428fd46fc60 100644 --- a/code/e2e-tests/save-from-controls.spec.ts +++ b/code/e2e-tests/save-from-controls.spec.ts @@ -33,7 +33,7 @@ test.describe('save-from-controls', () => { await sbPage.panelContent().locator('[data-short-label="Unsaved changes"]').isVisible(); // update the story - await sbPage.panelContent().locator('button').getByText('Update story').click(); + await sbPage.panelContent().locator('button').getByText('Update story').click({ force: true }); // Assert the file is saved const notification1 = await sbPage.page.waitForSelector('[title="Story saved"]'); @@ -49,12 +49,12 @@ test.describe('save-from-controls', () => { // Assert the footer is shown await sbPage.panelContent().locator('[data-short-label="Unsaved changes"]').isVisible(); - // clone the story - await sbPage + const buttons = await sbPage .panelContent() - .locator('button') - .getByLabel(/Create new story/) - .click(); + .locator('[aria-label="Create new story with these settings"]'); + + // clone the story + await buttons.click({ force: true }); const input = await sbPage.page.waitForSelector('[placeholder="Story export name"]'); await input.fill('ClonedStory' + id); From d90488453cb5aee0a3ecc2c49c042c247cfa0e42 Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Thu, 18 Apr 2024 15:16:27 +0200 Subject: [PATCH 261/380] Cherry-pick 343081be5e47149b569a71b822fcc2ff3cc6850c --- code/lib/core-events/package.json | 1 + .../lib/core-events/src/data/argtypes-info.ts | 9 ++++ code/lib/core-events/src/index.ts | 16 +++++-- code/lib/core-events/src/request-response.ts | 46 +++++++++++++++++++ .../create-new-story-channel.test.ts | 13 ++++-- .../create-new-story-channel.ts | 11 +++-- .../src/modules/preview-web/Preview.tsx | 27 +++++++++++ code/ui/manager/src/globals/exports.ts | 7 ++- 8 files changed, 115 insertions(+), 15 deletions(-) create mode 100644 code/lib/core-events/src/data/argtypes-info.ts create mode 100644 code/lib/core-events/src/request-response.ts diff --git a/code/lib/core-events/package.json b/code/lib/core-events/package.json index 699640debd0d..2cc265012563 100644 --- a/code/lib/core-events/package.json +++ b/code/lib/core-events/package.json @@ -78,6 +78,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { + "@storybook/csf": "^0.1.4", "ts-dedent": "^2.0.0" }, "devDependencies": { diff --git a/code/lib/core-events/src/data/argtypes-info.ts b/code/lib/core-events/src/data/argtypes-info.ts new file mode 100644 index 000000000000..c993c684768c --- /dev/null +++ b/code/lib/core-events/src/data/argtypes-info.ts @@ -0,0 +1,9 @@ +import type { ArgTypes } from '@storybook/csf'; + +export interface ArgTypesRequestPayload { + storyId: string; +} + +export interface ArgTypesResponsePayload { + argTypes: ArgTypes; +} diff --git a/code/lib/core-events/src/index.ts b/code/lib/core-events/src/index.ts index 37452d0a8d76..3a64992e3c12 100644 --- a/code/lib/core-events/src/index.ts +++ b/code/lib/core-events/src/index.ts @@ -78,8 +78,10 @@ enum events { FILE_COMPONENT_SEARCH_RESULT = 'fileComponentSearchResult', SAVE_STORY_REQUEST = 'saveStoryRequest', SAVE_STORY_RESPONSE = 'saveStoryResponse', - CREATE_NEW_STORYFILE = 'createNewStoryfile', - CREATE_NEW_STORYFILE_RESULT = 'createNewStoryfileResult', + ARGTYPES_INFO_REQUEST = 'argtypesInfoRequest', + ARGTYPES_INFO_RESPONSE = 'argtypesInfoResponse', + CREATE_NEW_STORYFILE_REQUEST = 'createNewStoryfileRequest', + CREATE_NEW_STORYFILE_RESPONSE = 'createNewStoryfileResponse', } // Enables: `import Events from ...` @@ -91,8 +93,8 @@ export const { CHANNEL_WS_DISCONNECT, CHANNEL_CREATED, CONFIG_ERROR, - CREATE_NEW_STORYFILE, - CREATE_NEW_STORYFILE_RESULT, + CREATE_NEW_STORYFILE_REQUEST, + CREATE_NEW_STORYFILE_RESPONSE, CURRENT_STORY_WAS_SET, DOCS_PREPARED, DOCS_RENDERED, @@ -140,8 +142,14 @@ export const { TELEMETRY_ERROR, SAVE_STORY_REQUEST, SAVE_STORY_RESPONSE, + ARGTYPES_INFO_REQUEST, + ARGTYPES_INFO_RESPONSE, } = events; +export * from './request-response'; + +export * from './data/argtypes-info'; + export interface WhatsNewCache { lastDismissedPost?: string; lastReadPost?: string; diff --git a/code/lib/core-events/src/request-response.ts b/code/lib/core-events/src/request-response.ts new file mode 100644 index 000000000000..88c8d1dddf77 --- /dev/null +++ b/code/lib/core-events/src/request-response.ts @@ -0,0 +1,46 @@ +import type { Channel } from '@storybook/channels'; + +class RequestResponseError extends Error {} + +export type RequestData = { + id: string; + payload: Payload; +}; + +export type ResponseData = + | { id: string; success: true; payload: Payload } + | { id: string; success: false; error?: string; payload?: Payload }; + +// eslint-disable-next-line @typescript-eslint/naming-convention +export const experimental_requestResponse = ( + channel: Channel, + requestEvent: string, + responseEvent: string, + payload: any, + timeout = 5000 +): Promise => { + let timeoutId: NodeJS.Timeout; + + return new Promise((resolve, reject) => { + const request: RequestData = { + id: Math.random().toString(16).slice(2), + payload, + }; + + const responseHandler = (response: ResponseData) => { + if (response.id !== request.id) return; + clearTimeout(timeoutId); + channel.off(responseEvent, responseHandler); + if (response.success) resolve(response.payload); + else reject(new RequestResponseError(response.error)); + }; + + channel.emit(requestEvent, request); + channel.on(responseEvent, responseHandler); + + timeoutId = setTimeout(() => { + channel.off(responseEvent, responseHandler); + reject(new RequestResponseError('Timed out waiting for response')); + }, timeout); + }); +}; diff --git a/code/lib/core-server/src/server-channel/create-new-story-channel.test.ts b/code/lib/core-server/src/server-channel/create-new-story-channel.test.ts index 289756ea540b..d9021723922d 100644 --- a/code/lib/core-server/src/server-channel/create-new-story-channel.test.ts +++ b/code/lib/core-server/src/server-channel/create-new-story-channel.test.ts @@ -3,7 +3,10 @@ import { initCreateNewStoryChannel } from './create-new-story-channel'; import path from 'path'; import type { ChannelTransport } from '@storybook/channels'; import { Channel } from '@storybook/channels'; -import { CREATE_NEW_STORYFILE, CREATE_NEW_STORYFILE_RESULT } from '@storybook/core-events'; +import { + CREATE_NEW_STORYFILE_REQUEST, + CREATE_NEW_STORYFILE_RESPONSE, +} from '@storybook/core-events'; vi.mock('@storybook/core-common', async (importOriginal) => { const actual = await importOriginal(); @@ -42,7 +45,7 @@ describe('createNewStoryChannel', () => { describe('initCreateNewStoryChannel', () => { it('should emit an event with a story id', async () => { - mockChannel.addListener(CREATE_NEW_STORYFILE_RESULT, createNewStoryFileEventListener); + mockChannel.addListener(CREATE_NEW_STORYFILE_RESPONSE, createNewStoryFileEventListener); const cwd = process.cwd(); initCreateNewStoryChannel(mockChannel, { @@ -59,7 +62,7 @@ describe('createNewStoryChannel', () => { }, } as any); - mockChannel.emit(CREATE_NEW_STORYFILE, { + mockChannel.emit(CREATE_NEW_STORYFILE_REQUEST, { componentFilePath: 'src/components/Page.jsx', componentExportName: 'Page', componentIsDefaultExport: true, @@ -79,7 +82,7 @@ describe('createNewStoryChannel', () => { }); it('should emit an error event if an error occurs', async () => { - mockChannel.addListener(CREATE_NEW_STORYFILE_RESULT, createNewStoryFileEventListener); + mockChannel.addListener(CREATE_NEW_STORYFILE_RESPONSE, createNewStoryFileEventListener); const cwd = process.cwd(); mockFs.writeFile.mockImplementation(() => { @@ -100,7 +103,7 @@ describe('createNewStoryChannel', () => { }, } as any); - mockChannel.emit(CREATE_NEW_STORYFILE, { + mockChannel.emit(CREATE_NEW_STORYFILE_REQUEST, { componentFilePath: 'src/components/Page.jsx', componentExportName: 'Page', componentIsDefaultExport: true, diff --git a/code/lib/core-server/src/server-channel/create-new-story-channel.ts b/code/lib/core-server/src/server-channel/create-new-story-channel.ts index 7546c5910a70..872b7fd08988 100644 --- a/code/lib/core-server/src/server-channel/create-new-story-channel.ts +++ b/code/lib/core-server/src/server-channel/create-new-story-channel.ts @@ -1,6 +1,9 @@ import type { Options } from '@storybook/types'; import type { Channel } from '@storybook/channels'; -import { CREATE_NEW_STORYFILE, CREATE_NEW_STORYFILE_RESULT } from '@storybook/core-events'; +import { + CREATE_NEW_STORYFILE_REQUEST, + CREATE_NEW_STORYFILE_RESPONSE, +} from '@storybook/core-events'; import fs from 'node:fs/promises'; import type { NewStoryData } from '../utils/get-new-story-file'; import { getNewStoryFile } from '../utils/get-new-story-file'; @@ -20,7 +23,7 @@ export function initCreateNewStoryChannel(channel: Channel, options: Options) { /** * Listens for events to create a new storyfile */ - channel.on(CREATE_NEW_STORYFILE, async (data: CreateNewStoryPayload) => { + channel.on(CREATE_NEW_STORYFILE_REQUEST, async (data: CreateNewStoryPayload) => { try { const { storyFilePath, exportedStoryName, storyFileContent } = await getNewStoryFile( data, @@ -31,7 +34,7 @@ export function initCreateNewStoryChannel(channel: Channel, options: Options) { const storyId = await getStoryId({ storyFilePath, exportedStoryName }, options); - channel.emit(CREATE_NEW_STORYFILE_RESULT, { + channel.emit(CREATE_NEW_STORYFILE_RESPONSE, { success: true, result: { storyId, @@ -39,7 +42,7 @@ export function initCreateNewStoryChannel(channel: Channel, options: Options) { error: null, } satisfies Result); } catch (e: any) { - channel.emit(CREATE_NEW_STORYFILE_RESULT, { + channel.emit(CREATE_NEW_STORYFILE_RESPONSE, { success: false, result: null, error: `An error occurred while creating a new story:\n${e?.message}`, diff --git a/code/lib/preview-api/src/modules/preview-web/Preview.tsx b/code/lib/preview-api/src/modules/preview-web/Preview.tsx index 29ea71045949..40596f6e1f21 100644 --- a/code/lib/preview-api/src/modules/preview-web/Preview.tsx +++ b/code/lib/preview-api/src/modules/preview-web/Preview.tsx @@ -1,6 +1,14 @@ import { global } from '@storybook/global'; import { deprecate, logger } from '@storybook/client-logger'; +import type { + ArgTypesRequestPayload, + ArgTypesResponsePayload, + RequestData, + ResponseData, +} from '@storybook/core-events'; import { + ARGTYPES_INFO_REQUEST, + ARGTYPES_INFO_RESPONSE, CONFIG_ERROR, FORCE_REMOUNT, FORCE_RE_RENDER, @@ -129,6 +137,7 @@ export class Preview { this.channel.on(STORY_INDEX_INVALIDATED, this.onStoryIndexChanged.bind(this)); this.channel.on(UPDATE_GLOBALS, this.onUpdateGlobals.bind(this)); this.channel.on(UPDATE_STORY_ARGS, this.onUpdateArgs.bind(this)); + this.channel.on(ARGTYPES_INFO_REQUEST, this.onRequestArgTypesInfo.bind(this)); this.channel.on(RESET_STORY_ARGS, this.onResetArgs.bind(this)); this.channel.on(FORCE_RE_RENDER, this.onForceReRender.bind(this)); this.channel.on(FORCE_REMOUNT, this.onForceRemount.bind(this)); @@ -295,6 +304,24 @@ export class Preview { }); } + async onRequestArgTypesInfo({ id, payload }: RequestData) { + try { + await this.storeInitializationPromise; + const story = await this.storyStoreValue?.loadStory(payload); + this.channel.emit(ARGTYPES_INFO_RESPONSE, { + id, + success: true, + payload: { argTypes: story?.argTypes || {} }, + } satisfies ResponseData); + } catch (e: any) { + this.channel.emit(ARGTYPES_INFO_RESPONSE, { + id, + success: false, + error: e?.message, + } satisfies ResponseData); + } + } + async onResetArgs({ storyId, argNames }: { storyId: string; argNames?: string[] }) { if (!this.storyStoreValue) throw new CalledPreviewMethodBeforeInitializationError({ methodName: 'onResetArgs' }); diff --git a/code/ui/manager/src/globals/exports.ts b/code/ui/manager/src/globals/exports.ts index f76f146adca5..55c33e03e3a1 100644 --- a/code/ui/manager/src/globals/exports.ts +++ b/code/ui/manager/src/globals/exports.ts @@ -131,11 +131,13 @@ export default { 'createBrowserChannel', ], '@storybook/core-events': [ + 'ARGTYPES_INFO_REQUEST', + 'ARGTYPES_INFO_RESPONSE', 'CHANNEL_CREATED', 'CHANNEL_WS_DISCONNECT', 'CONFIG_ERROR', - 'CREATE_NEW_STORYFILE', - 'CREATE_NEW_STORYFILE_RESULT', + 'CREATE_NEW_STORYFILE_REQUEST', + 'CREATE_NEW_STORYFILE_RESPONSE', 'CURRENT_STORY_WAS_SET', 'DOCS_PREPARED', 'DOCS_RENDERED', @@ -183,6 +185,7 @@ export default { 'UPDATE_GLOBALS', 'UPDATE_QUERY_PARAMS', 'UPDATE_STORY_ARGS', + 'experimental_requestResponse', ], '@storybook/core-events/manager-errors': [ 'Category', From 567f464060ee85c8989ac351af132412a6159d5a Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Thu, 18 Apr 2024 15:17:49 +0200 Subject: [PATCH 262/380] Move requestResponse util and types to core-events --- code/addons/controls/src/manager.tsx | 160 ++++++++---------- code/lib/core-events/src/data/save-story.ts | 14 ++ code/lib/core-events/src/index.ts | 1 + .../src/utils/save-story/save-story.ts | 43 ++--- code/yarn.lock | 1 + 5 files changed, 104 insertions(+), 115 deletions(-) create mode 100644 code/lib/core-events/src/data/save-story.ts diff --git a/code/addons/controls/src/manager.tsx b/code/addons/controls/src/manager.tsx index 802a52cf871e..d52291081bc2 100644 --- a/code/addons/controls/src/manager.tsx +++ b/code/addons/controls/src/manager.tsx @@ -2,8 +2,16 @@ import { stringify } from 'telejson'; import React from 'react'; import { dequal as deepEqual } from 'dequal'; import { AddonPanel, Badge, Spaced } from '@storybook/components'; -import { SAVE_STORY_REQUEST, SAVE_STORY_RESPONSE } from '@storybook/core-events'; -import type { API } from '@storybook/manager-api'; +import type { + ResponseData, + SaveStoryRequestPayload, + SaveStoryResponsePayload, +} from '@storybook/core-events'; +import { + SAVE_STORY_REQUEST, + SAVE_STORY_RESPONSE, + experimental_requestResponse, +} from '@storybook/core-events'; import { addons, types, useArgTypes } from '@storybook/manager-api'; import { color } from '@storybook/theming'; import { ControlsPanel } from './ControlsPanel'; @@ -35,67 +43,46 @@ const stringifyArgs = (args: Record) => allowSymbol: true, }); -interface ResponseData { - id: string; - success: boolean; - error?: string; - payload?: any; -} - -const requestResponse = ( - api: API, - requestEvent: string, - responseEvent: string, - payload: any, - timeout = 5000 -) => { - let timeoutId: NodeJS.Timeout; - return new Promise((resolve, reject) => { - const requestId = Math.random().toString(16).slice(2); - const responseHandler = (response: ResponseData) => { - if (response.id !== requestId) return; - clearTimeout(timeoutId); - api.off(responseEvent, responseHandler); - if (response.success) resolve(response.payload); - else reject(new Error(response.error)); - }; - - api.emit(requestEvent, { id: requestId, payload }); - api.on(responseEvent, responseHandler); - - timeoutId = setTimeout(() => { - api.off(responseEvent, responseHandler); - reject(new Error('Timed out waiting for response')); - }, timeout); - }); -}; - addons.register(ADDON_ID, (api) => { + const channel = addons.getChannel(); + const saveStory = async () => { const data = api.getCurrentStoryData(); if (data.type !== 'story') throw new Error('Not a story'); - return requestResponse(api, SAVE_STORY_REQUEST, SAVE_STORY_RESPONSE, { - // Only send updated args - args: stringifyArgs( - Object.entries(data.args || {}).reduce((acc, [key, value]) => { - if (!deepEqual(value, data.initialArgs?.[key])) acc[key] = value; - return acc; - }, {}) - ), - csfId: data.id, - importPath: data.importPath, - }); + + return experimental_requestResponse( + channel, + SAVE_STORY_REQUEST, + SAVE_STORY_RESPONSE, + { + // Only send updated args + args: stringifyArgs( + Object.entries(data.args || {}).reduce((acc, [key, value]) => { + if (!deepEqual(value, data.initialArgs?.[key])) acc[key] = value; + return acc; + }, {}) + ), + csfId: data.id, + importPath: data.importPath, + } satisfies SaveStoryRequestPayload + ); }; const createStory = async (name: string) => { const data = api.getCurrentStoryData(); if (data.type !== 'story') throw new Error('Not a story'); - return requestResponse(api, SAVE_STORY_REQUEST, SAVE_STORY_RESPONSE, { - args: data.args ? stringifyArgs(data.args) : data.args, - csfId: data.id, - importPath: data.importPath, - name, - }); + + return experimental_requestResponse( + channel, + SAVE_STORY_REQUEST, + SAVE_STORY_RESPONSE, + { + args: data.args && stringifyArgs(data.args), + csfId: data.id, + importPath: data.importPath, + name, + } satisfies SaveStoryRequestPayload + ); }; addons.add(ADDON_ID, { @@ -114,38 +101,41 @@ addons.register(ADDON_ID, (api) => { }, }); - api.on(SAVE_STORY_RESPONSE, ({ success, payload }) => { - if (!success) return; + channel.on( + SAVE_STORY_RESPONSE, + ({ success, payload }: ResponseData) => { + if (!success) return; - const { newStoryId, newStoryName, sourceStoryName } = payload; + const { newStoryId, newStoryName, sourceStoryName } = payload; - const data = api.getCurrentStoryData(); - if (data.type === 'story') api.resetStoryArgs(data); - if (newStoryId) api.selectStory(newStoryId); + const data = api.getCurrentStoryData(); + if (data.type === 'story') api.resetStoryArgs(data); + if (newStoryId) api.selectStory(newStoryId); - api.addNotification({ - id: 'save-story-success', - content: { - headline: newStoryName ? 'Story created' : 'Story saved', - subHeadline: newStoryName ? ( - <> - Added story {newStoryName} based on {sourceStoryName}. - - ) : ( - <> - Updated story {sourceStoryName}. - - ), - }, - duration: 8_000, - onClick: ({ onDismiss }) => { - onDismiss(); - if (newStoryId) api.selectStory(newStoryId); - }, - icon: { - name: 'passed', - color: color.positive, - }, - }); - }); + api.addNotification({ + id: 'save-story-success', + content: { + headline: newStoryName ? 'Story created' : 'Story saved', + subHeadline: newStoryName ? ( + <> + Added story {newStoryName} based on {sourceStoryName}. + + ) : ( + <> + Updated story {sourceStoryName}. + + ), + }, + duration: 8_000, + onClick: ({ onDismiss }) => { + onDismiss(); + if (newStoryId) api.selectStory(newStoryId); + }, + icon: { + name: 'passed', + color: color.positive, + }, + }); + } + ); }); diff --git a/code/lib/core-events/src/data/save-story.ts b/code/lib/core-events/src/data/save-story.ts new file mode 100644 index 000000000000..8dd4c009f044 --- /dev/null +++ b/code/lib/core-events/src/data/save-story.ts @@ -0,0 +1,14 @@ +export interface SaveStoryRequestPayload { + args: string | undefined; + csfId: string; + importPath: string; + name?: string; +} + +export interface SaveStoryResponsePayload { + csfId: string; + newStoryId?: string; + newStoryName?: string; + sourceFileName?: string; + sourceStoryName?: string; +} diff --git a/code/lib/core-events/src/index.ts b/code/lib/core-events/src/index.ts index 3a64992e3c12..5d2b881b44ac 100644 --- a/code/lib/core-events/src/index.ts +++ b/code/lib/core-events/src/index.ts @@ -149,6 +149,7 @@ export const { export * from './request-response'; export * from './data/argtypes-info'; +export * from './data/save-story'; export interface WhatsNewCache { lastDismissedPost?: string; diff --git a/code/lib/core-server/src/utils/save-story/save-story.ts b/code/lib/core-server/src/utils/save-story/save-story.ts index ea109b04d0fd..067b26f515cf 100644 --- a/code/lib/core-server/src/utils/save-story/save-story.ts +++ b/code/lib/core-server/src/utils/save-story/save-story.ts @@ -1,16 +1,22 @@ /* eslint-disable no-underscore-dangle */ import { parse } from 'telejson'; import type { Channel } from '@storybook/channels'; +import type { + RequestData, + ResponseData, + SaveStoryRequestPayload, + SaveStoryResponsePayload, +} from '@storybook/core-events'; import { SAVE_STORY_REQUEST, SAVE_STORY_RESPONSE, STORY_RENDERED } from '@storybook/core-events'; import { storyNameFromExport, toId } from '@storybook/csf'; import { readCsf, writeCsf } from '@storybook/csf-tools'; +import { logger } from '@storybook/node-logger'; +import type { CoreConfig, Options } from '@storybook/types'; +import { telemetry } from '@storybook/telemetry'; import { basename, join } from 'path'; import { updateArgsInCsfFile } from './update-args-in-csf-file'; import { duplicateStoryWithNewName } from './duplicate-story-with-new-name'; -import type { CoreConfig, Options } from '@storybook/types'; -import { telemetry } from '@storybook/telemetry'; -import { logger } from '@storybook/node-logger'; const parseArgs = (args: string): Record => parse(args, { @@ -20,33 +26,10 @@ const parseArgs = (args: string): Record => allowSymbol: true, }); -interface SaveStoryRequest { - id: string; - payload: { - csfId: string; - importPath: string; - args: string; - name?: string; - }; -} - -type SaveStoryResponse = ( - | { id: string; success: true } - | { id: string; success: false; error: string } -) & { - payload: { - csfId: string; - newStoryId?: string; - newStoryName?: string; - sourceFileName?: string; - sourceStoryName?: string; - }; -}; - class SaveStoryError extends Error {} export function initializeSaveStory(channel: Channel, options: Options, coreConfig: CoreConfig) { - channel.on(SAVE_STORY_REQUEST, async ({ id, payload }: SaveStoryRequest) => { + channel.on(SAVE_STORY_REQUEST, async ({ id, payload }: RequestData) => { const { csfId, importPath, args, name } = payload; let newStoryId; @@ -82,7 +65,7 @@ export function initializeSaveStory(channel: Channel, options: Options, coreConf await updateArgsInCsfFile( name ? duplicateStoryWithNewName(parsed, storyName, name) : csf.getStoryExport(storyName), - parseArgs(args) + args ? parseArgs(args) : {} ); // Writing the CSF file should trigger HMR, which causes the story to rerender. Delay the @@ -105,7 +88,7 @@ export function initializeSaveStory(channel: Channel, options: Options, coreConf sourceFileName, sourceStoryName, }, - } satisfies SaveStoryResponse); + } satisfies ResponseData); if (!coreConfig.disableTelemetry) { await telemetry('save-story', { @@ -125,7 +108,7 @@ export function initializeSaveStory(channel: Channel, options: Options, coreConf sourceFileName, sourceStoryName, }, - } satisfies SaveStoryResponse); + } satisfies ResponseData); logger.error( `Error writing to ${sourceFilePath}:\n${error.stack || error.message || error.toString()}` diff --git a/code/yarn.lock b/code/yarn.lock index d73b24c6441b..bb20a3544238 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5763,6 +5763,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/core-events@workspace:lib/core-events" dependencies: + "@storybook/csf": "npm:^0.1.4" chalk: "npm:^4.1.0" ts-dedent: "npm:^2.0.0" typescript: "npm:^5.3.2" From 8bfbaa877aa90ddf20b8dd70a2a1580b854a7ba2 Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Thu, 18 Apr 2024 15:40:54 +0200 Subject: [PATCH 263/380] Move requestResponse util to manager-api --- code/addons/controls/src/manager.tsx | 8 ++------ code/lib/core-events/src/data/request-response.ts | 8 ++++++++ code/lib/core-events/src/index.ts | 3 +-- code/lib/manager-api/src/index.tsx | 1 + .../src => manager-api/src/lib}/request-response.ts | 10 +--------- code/ui/manager/src/globals/exports.ts | 2 +- 6 files changed, 14 insertions(+), 18 deletions(-) create mode 100644 code/lib/core-events/src/data/request-response.ts rename code/lib/{core-events/src => manager-api/src/lib}/request-response.ts (82%) diff --git a/code/addons/controls/src/manager.tsx b/code/addons/controls/src/manager.tsx index d52291081bc2..135997f7a4c4 100644 --- a/code/addons/controls/src/manager.tsx +++ b/code/addons/controls/src/manager.tsx @@ -7,12 +7,8 @@ import type { SaveStoryRequestPayload, SaveStoryResponsePayload, } from '@storybook/core-events'; -import { - SAVE_STORY_REQUEST, - SAVE_STORY_RESPONSE, - experimental_requestResponse, -} from '@storybook/core-events'; -import { addons, types, useArgTypes } from '@storybook/manager-api'; +import { SAVE_STORY_REQUEST, SAVE_STORY_RESPONSE } from '@storybook/core-events'; +import { addons, experimental_requestResponse, types, useArgTypes } from '@storybook/manager-api'; import { color } from '@storybook/theming'; import { ControlsPanel } from './ControlsPanel'; import { ADDON_ID, PARAM_KEY } from './constants'; diff --git a/code/lib/core-events/src/data/request-response.ts b/code/lib/core-events/src/data/request-response.ts new file mode 100644 index 000000000000..7c4c0295b388 --- /dev/null +++ b/code/lib/core-events/src/data/request-response.ts @@ -0,0 +1,8 @@ +export type RequestData = { + id: string; + payload: Payload; +}; + +export type ResponseData = + | { id: string; success: true; payload: Payload } + | { id: string; success: false; error?: string; payload?: Payload }; diff --git a/code/lib/core-events/src/index.ts b/code/lib/core-events/src/index.ts index 5d2b881b44ac..b8b21ff41f41 100644 --- a/code/lib/core-events/src/index.ts +++ b/code/lib/core-events/src/index.ts @@ -146,9 +146,8 @@ export const { ARGTYPES_INFO_RESPONSE, } = events; -export * from './request-response'; - export * from './data/argtypes-info'; +export * from './data/request-response'; export * from './data/save-story'; export interface WhatsNewCache { diff --git a/code/lib/manager-api/src/index.tsx b/code/lib/manager-api/src/index.tsx index 0cb188bdb5d1..4e946fa5d618 100644 --- a/code/lib/manager-api/src/index.tsx +++ b/code/lib/manager-api/src/index.tsx @@ -69,6 +69,7 @@ import type { ModuleFn } from './lib/types'; import { types } from './lib/addons'; +export * from './lib/request-response'; export * from './lib/shortcut'; const { ActiveTabs } = layout; diff --git a/code/lib/core-events/src/request-response.ts b/code/lib/manager-api/src/lib/request-response.ts similarity index 82% rename from code/lib/core-events/src/request-response.ts rename to code/lib/manager-api/src/lib/request-response.ts index 88c8d1dddf77..dfbbda5b3b31 100644 --- a/code/lib/core-events/src/request-response.ts +++ b/code/lib/manager-api/src/lib/request-response.ts @@ -1,16 +1,8 @@ import type { Channel } from '@storybook/channels'; +import type { RequestData, ResponseData } from '@storybook/core-events'; class RequestResponseError extends Error {} -export type RequestData = { - id: string; - payload: Payload; -}; - -export type ResponseData = - | { id: string; success: true; payload: Payload } - | { id: string; success: false; error?: string; payload?: Payload }; - // eslint-disable-next-line @typescript-eslint/naming-convention export const experimental_requestResponse = ( channel: Channel, diff --git a/code/ui/manager/src/globals/exports.ts b/code/ui/manager/src/globals/exports.ts index 55c33e03e3a1..1cd291ce406f 100644 --- a/code/ui/manager/src/globals/exports.ts +++ b/code/ui/manager/src/globals/exports.ts @@ -185,7 +185,6 @@ export default { 'UPDATE_GLOBALS', 'UPDATE_QUERY_PARAMS', 'UPDATE_STORY_ARGS', - 'experimental_requestResponse', ], '@storybook/core-events/manager-errors': [ 'Category', @@ -476,6 +475,7 @@ export default { 'controlOrMetaSymbol', 'eventMatchesShortcut', 'eventToShortcut', + 'experimental_requestResponse', 'isMacLike', 'isShortcutTaken', 'keyToSymbol', From 0df8706b715ae87f2ea8176deb00c79af8864657 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 18 Apr 2024 19:47:00 +0200 Subject: [PATCH 264/380] Fix save-from-controls e2e test --- code/e2e-tests/save-from-controls.spec.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/code/e2e-tests/save-from-controls.spec.ts b/code/e2e-tests/save-from-controls.spec.ts index 7428fd46fc60..b70a1607595c 100644 --- a/code/e2e-tests/save-from-controls.spec.ts +++ b/code/e2e-tests/save-from-controls.spec.ts @@ -28,6 +28,7 @@ test.describe('save-from-controls', () => { const label = sbPage.panelContent().locator('textarea[name=label]'); const value = await label.inputValue(); await label.fill(value + ' Updated ' + id); + await label.blur(); // Assert the footer is shown await sbPage.panelContent().locator('[data-short-label="Unsaved changes"]').isVisible(); @@ -45,6 +46,7 @@ test.describe('save-from-controls', () => { // Update an arg await label.fill(value + ' Copied'); + await label.blur(); // Assert the footer is shown await sbPage.panelContent().locator('[data-short-label="Unsaved changes"]').isVisible(); From 76a59c2d26fbc805989226f3dce3d95f9f83fee9 Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Fri, 19 Apr 2024 14:12:10 +1000 Subject: [PATCH 265/380] Ensure that simultaneous onStoriesChanged don't clobber each other --- .../modules/preview-web/PreviewWeb.test.ts | 54 +++++++++++++++++++ .../preview-web/PreviewWithSelection.tsx | 8 +-- 2 files changed, 56 insertions(+), 6 deletions(-) diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts index 024e4f6bbda8..56b19d8f2218 100644 --- a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts @@ -2735,6 +2735,60 @@ describe('PreviewWeb', () => { }); }); + describe('if called twice simultaneously', () => { + it('does not get renders confused', async () => { + const [importGate, openImportGate] = createGate(); + const [importedGate, openImportedGate] = createGate(); + const newImportFn = vi.fn(async (path) => { + openImportedGate(); + await importGate; + return importFn(path); + }); + + document.location.search = '?id=component-one--a'; + const preview = await createAndRenderPreview(); + mockChannel.emit.mockClear(); + + preview.onStoriesChanged({ importFn: newImportFn }); + await importedGate; + preview.onStoriesChanged({ importFn }); + + openImportGate(); + await waitForRender(); + + expect(preview.storyRenders.length).toEqual(1); + }); + + it('renders the second importFn', async () => { + const [importGate, openImportGate] = createGate(); + const [importedGate, openImportedGate] = createGate(); + const secondImportFn = vi.fn(async (path) => { + openImportedGate(); + await importGate; + return importFn(path); + }); + + const thirdImportFn = vi.fn(async (path) => { + openImportedGate(); + await importGate; + return importFn(path); + }); + + document.location.search = '?id=component-one--a'; + const preview = await createAndRenderPreview(); + mockChannel.emit.mockClear(); + + preview.onStoriesChanged({ importFn: secondImportFn }); + await importedGate; + preview.onStoriesChanged({ importFn: thirdImportFn }); + + openImportGate(); + await waitForRender(); + + expect(thirdImportFn).toHaveBeenCalled(); + }); + }); + describe('when the current story changes', () => { const newComponentOneExports = merge({}, componentOneExports, { a: { args: { foo: 'edited' } }, diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx b/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx index b183a7488ba9..f4c15e000d14 100644 --- a/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx +++ b/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx @@ -352,12 +352,8 @@ export class PreviewWithSelection extends Preview Date: Fri, 19 Apr 2024 16:58:27 +1000 Subject: [PATCH 266/380] Renamed gates for clarity --- .../src/modules/preview-web/PreviewWeb.test.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts index 56b19d8f2218..664f71ee048d 100644 --- a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts @@ -2737,11 +2737,11 @@ describe('PreviewWeb', () => { describe('if called twice simultaneously', () => { it('does not get renders confused', async () => { - const [importGate, openImportGate] = createGate(); - const [importedGate, openImportedGate] = createGate(); + const [blockImportFnGate, openBlockImportFnGate] = createGate(); + const [importFnCalledGate, openImportFnCalledGate] = createGate(); const newImportFn = vi.fn(async (path) => { - openImportedGate(); - await importGate; + openImportFnCalledGate(); + await blockImportFnGate; return importFn(path); }); @@ -2750,10 +2750,10 @@ describe('PreviewWeb', () => { mockChannel.emit.mockClear(); preview.onStoriesChanged({ importFn: newImportFn }); - await importedGate; + await importFnCalledGate; preview.onStoriesChanged({ importFn }); - openImportGate(); + openBlockImportFnGate(); await waitForRender(); expect(preview.storyRenders.length).toEqual(1); From 2f715663c86ed8e4abb104afd547fe489c97243a Mon Sep 17 00:00:00 2001 From: Justin Gish Date: Wed, 27 Mar 2024 16:03:14 -0600 Subject: [PATCH 267/380] Updating Vuetify decorator example The Vuetify decorator example was expecting that the labels from the theme switcher would exactly match the vuetify theme keys from the vuetifyOptions. This change makes that association more explicit while also allowing the display labels to be different from the Vuetify theme keys. --- code/addons/themes/docs/api.md | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/code/addons/themes/docs/api.md b/code/addons/themes/docs/api.md index b499dd945744..f04e6658da31 100644 --- a/code/addons/themes/docs/api.md +++ b/code/addons/themes/docs/api.md @@ -166,7 +166,7 @@ export const withVuetifyTheme = ({ themes, defaultTheme }) => { setup() { const theme = useTheme(); - theme.global.name.value = selected; + theme.global.name.value = themes[selected]; return { theme, @@ -195,12 +195,13 @@ setup((app) => { export const decorators = [ withVuetifyTheme({ + // These keys are the labels that will be displayed in the toolbar theme switcher + // The values must match the theme keys from your VuetifyOptions themes: { light: 'light', dark: 'dark', - customTheme: 'myCustomTheme', + 'high contrast': 'highContrast', }, - defaultTheme: 'customTheme', // The key of your default theme + defaultTheme: 'light', // The key of your default theme }), -]; -``` +];``` From bedeb9aa7c3ef639e10c574f7cdb5f07a49cc8aa Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Fri, 19 Apr 2024 09:11:41 +0200 Subject: [PATCH 268/380] Update Vuetify decorator snippet --- code/addons/themes/docs/api.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/code/addons/themes/docs/api.md b/code/addons/themes/docs/api.md index f04e6658da31..0c8fc32996dd 100644 --- a/code/addons/themes/docs/api.md +++ b/code/addons/themes/docs/api.md @@ -195,13 +195,14 @@ setup((app) => { export const decorators = [ withVuetifyTheme({ - // These keys are the labels that will be displayed in the toolbar theme switcher + // These keys are the labels that will be displayed in the toolbar theme switcher // The values must match the theme keys from your VuetifyOptions themes: { light: 'light', dark: 'dark', - 'high contrast': 'highContrast', + 'high contrast': 'highContrast', }, defaultTheme: 'light', // The key of your default theme }), -];``` +]; +``` From 2cf3ea2af6fc61334c3e57c17638ee38c2b86eb5 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 19 Apr 2024 10:29:05 +0200 Subject: [PATCH 269/380] Polishing --- code/addons/measure/vitest.config.stories.tsx | 13 + .../src/data/file-component-search.ts | 2 + .../file-search-channel.test.ts | 17 +- .../src/server-channel/file-search-channel.ts | 8 + .../src/utils/get-new-story-file.ts | 15 +- .../lib/core-server/src/utils/search-files.ts | 8 +- code/ui/.storybook/main.ts | 5 +- .../src/components/sidebar/FileList.tsx | 207 ++++++- .../sidebar/FileSearchList.stories.tsx | 31 ++ .../src/components/sidebar/FileSearchList.tsx | 523 ++++++++---------- .../sidebar/FileSearchModal.stories.tsx | 17 + .../components/sidebar/FileSearchModal.tsx | 99 ++-- 12 files changed, 586 insertions(+), 359 deletions(-) create mode 100644 code/addons/measure/vitest.config.stories.tsx create mode 100644 code/ui/manager/src/components/sidebar/FileSearchModal.stories.tsx diff --git a/code/addons/measure/vitest.config.stories.tsx b/code/addons/measure/vitest.config.stories.tsx new file mode 100644 index 000000000000..bdf3c2979774 --- /dev/null +++ b/code/addons/measure/vitest.config.stories.tsx @@ -0,0 +1,13 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import VitestConfig from './vitest.config'; + +const meta = { + component: VitestConfig, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = {}; \ No newline at end of file diff --git a/code/lib/core-events/src/data/file-component-search.ts b/code/lib/core-events/src/data/file-component-search.ts index 1f35b6e7f0db..7737155a155f 100644 --- a/code/lib/core-events/src/data/file-component-search.ts +++ b/code/lib/core-events/src/data/file-component-search.ts @@ -11,6 +11,8 @@ export interface FileComponentSearchResult { files: Array<{ // The filepath relative to the project root filepath: string; + // Whether a corresponding story file exists + storyFileExists: boolean; // A list of exported components exportedComponents: Array<{ // the name of the exported component diff --git a/code/lib/core-server/src/server-channel/file-search-channel.test.ts b/code/lib/core-server/src/server-channel/file-search-channel.test.ts index 3316fab5f8dd..d1138d7bb3c9 100644 --- a/code/lib/core-server/src/server-channel/file-search-channel.test.ts +++ b/code/lib/core-server/src/server-channel/file-search-channel.test.ts @@ -1,6 +1,9 @@ import type { ChannelTransport } from '@storybook/channels'; import { Channel } from '@storybook/channels'; -import { FILE_COMPONENT_SEARCH, FILE_COMPONENT_SEARCH_RESULT } from '@storybook/core-events'; +import { + FILE_COMPONENT_SEARCH_RESPONSE, + FILE_COMPONENT_SEARCH_REQUEST, +} from '@storybook/core-events'; import { beforeEach, describe, expect, vi, it } from 'vitest'; import { initFileSearchChannel } from './file-search-channel'; @@ -47,8 +50,8 @@ describe('file-search-channel', () => { initFileSearchChannel(mockChannel, mockOptions as any); - mockChannel.addListener(FILE_COMPONENT_SEARCH_RESULT, searchResultChannelListener); - mockChannel.emit(FILE_COMPONENT_SEARCH, data); + mockChannel.addListener(FILE_COMPONENT_SEARCH_RESPONSE, searchResultChannelListener); + mockChannel.emit(FILE_COMPONENT_SEARCH_REQUEST, data); mocks.searchFiles.mockImplementation(async (...args) => { // @ts-expect-error Ignore type issue @@ -108,8 +111,8 @@ describe('file-search-channel', () => { initFileSearchChannel(mockChannel, mockOptions as any); - mockChannel.addListener(FILE_COMPONENT_SEARCH_RESULT, searchResultChannelListener); - mockChannel.emit(FILE_COMPONENT_SEARCH, data); + mockChannel.addListener(FILE_COMPONENT_SEARCH_RESPONSE, searchResultChannelListener); + mockChannel.emit(FILE_COMPONENT_SEARCH_REQUEST, data); mocks.searchFiles.mockImplementation(async (...args) => { // @ts-expect-error Ignore type issue @@ -139,9 +142,9 @@ describe('file-search-channel', () => { initFileSearchChannel(mockChannel, mockOptions as any); - mockChannel.addListener(FILE_COMPONENT_SEARCH_RESULT, searchResultChannelListener); + mockChannel.addListener(FILE_COMPONENT_SEARCH_RESPONSE, searchResultChannelListener); - mockChannel.emit(FILE_COMPONENT_SEARCH, data); + mockChannel.emit(FILE_COMPONENT_SEARCH_REQUEST, data); mocks.searchFiles.mockRejectedValue(new Error('ENOENT: no such file or directory')); diff --git a/code/lib/core-server/src/server-channel/file-search-channel.ts b/code/lib/core-server/src/server-channel/file-search-channel.ts index f35db74624ae..0522dd59a55b 100644 --- a/code/lib/core-server/src/server-channel/file-search-channel.ts +++ b/code/lib/core-server/src/server-channel/file-search-channel.ts @@ -7,6 +7,7 @@ import { } from '@storybook/core-common'; import path from 'path'; import fs from 'fs/promises'; +import { existsSync } from 'fs'; import { getParser } from '../utils/parser'; import { searchFiles } from '../utils/search-files'; @@ -15,6 +16,7 @@ import { FILE_COMPONENT_SEARCH_REQUEST, FILE_COMPONENT_SEARCH_RESPONSE, } from '@storybook/core-events'; +import { getStoryMetadata } from '../utils/get-new-story-file'; export function initFileSearchChannel(channel: Channel, options: Options) { /** @@ -46,15 +48,21 @@ export function initFileSearchChannel(channel: Channel, options: Options) { try { const content = await fs.readFile(path.join(projectRoot, file), 'utf-8'); + const { storyFileName } = getStoryMetadata(path.join(projectRoot, file)); + const dirname = path.dirname(file); + + const storyFileExists = existsSync(path.join(projectRoot, dirname, storyFileName)); const info = await parser.parse(content); return { filepath: file, exportedComponents: info.exports, + storyFileExists, }; } catch (e) { return { filepath: file, + storyFileExists: false, exportedComponents: null, }; } diff --git a/code/lib/core-server/src/utils/get-new-story-file.ts b/code/lib/core-server/src/utils/get-new-story-file.ts index 330b33903c7c..d402f8de5924 100644 --- a/code/lib/core-server/src/utils/get-new-story-file.ts +++ b/code/lib/core-server/src/utils/get-new-story-file.ts @@ -15,7 +15,6 @@ export async function getNewStoryFile( { componentFilePath, componentExportName, componentIsDefaultExport }: CreateNewStoryPayload, options: Options ) { - const isTypescript = /\.(ts|tsx|mts|cts)$/.test(componentFilePath); const cwd = getProjectRoot(); const frameworkPackageName = await getFrameworkName(options); @@ -29,8 +28,8 @@ export async function getNewStoryFile( const basenameWithoutExtension = basename.replace(extension, ''); const dirname = path.dirname(componentFilePath); + const { storyFileName, isTypescript } = getStoryMetadata(componentFilePath); const storyFileExtension = isTypescript ? 'tsx' : 'jsx'; - const storyFileName = `${basenameWithoutExtension}.stories.${storyFileExtension}`; const alternativeStoryFileName = `${basenameWithoutExtension}.${componentExportName}.stories.${storyFileExtension}`; const exportedStoryName = 'Default'; @@ -59,3 +58,15 @@ export async function getNewStoryFile( return { storyFilePath, exportedStoryName, storyFileContent }; } + +export const getStoryMetadata = (componentFilePath: string) => { + const isTypescript = /\.(ts|tsx|mts|cts)$/.test(componentFilePath); + const basename = path.basename(componentFilePath); + const extension = path.extname(componentFilePath); + const basenameWithoutExtension = basename.replace(extension, ''); + const storyFileExtension = isTypescript ? 'tsx' : 'jsx'; + return { + storyFileName: `${basenameWithoutExtension}.stories.${storyFileExtension}`, + isTypescript, + }; +}; diff --git a/code/lib/core-server/src/utils/search-files.ts b/code/lib/core-server/src/utils/search-files.ts index 3f6a8e669046..98557584c4fa 100644 --- a/code/lib/core-server/src/utils/search-files.ts +++ b/code/lib/core-server/src/utils/search-files.ts @@ -5,7 +5,13 @@ export type SearchResult = Array; */ const FILE_EXTENSIONS = ['js', 'mjs', 'cjs', 'jsx', 'mts', 'ts', 'tsx', 'cts']; -const IGNORED_FILES = ['**/node_modules/**', '**/*.spec.*', '**/*.test.*', '**/*.stories.*']; +const IGNORED_FILES = [ + '**/node_modules/**', + '**/*.spec.*', + '**/*.test.*', + '**/*.stories.*', + '**/storybook-static/**', +]; /** * Search for files in a directory that match the search query diff --git a/code/ui/.storybook/main.ts b/code/ui/.storybook/main.ts index 7c67fa3d58d8..094a3a1a4a83 100644 --- a/code/ui/.storybook/main.ts +++ b/code/ui/.storybook/main.ts @@ -57,7 +57,7 @@ const config: StorybookConfig = { '@storybook/addon-storysource', '@storybook/addon-designs', '@storybook/addon-a11y', - '@chromatic-com/storybook', + // '@chromatic-com/storybook', ], build: { test: { @@ -67,6 +67,9 @@ const config: StorybookConfig = { disableDocgen: false, }, }, + typescript: { + reactDocgen: 'react-docgen-typescript', + }, framework: { name: '@storybook/react-vite', options: {}, diff --git a/code/ui/manager/src/components/sidebar/FileList.tsx b/code/ui/manager/src/components/sidebar/FileList.tsx index db1dadcb57bf..a98614793e64 100644 --- a/code/ui/manager/src/components/sidebar/FileList.tsx +++ b/code/ui/manager/src/components/sidebar/FileList.tsx @@ -1,15 +1,9 @@ import { styled } from '@storybook/theming'; import { rgba } from 'polished'; +import { ChevronDownIcon, ChevronRightIcon, ComponentIcon } from '@storybook/icons'; -export const FileList = styled('div')(({ theme }) => ({ - height: '280px', - overflow: 'auto', - msOverflowStyle: 'none', - scrollbarWidth: 'none', - position: 'relative', - '::-webkit-scrollbar': { - display: 'none', - }, +export const FileListWrapper = styled('div')(({ theme }) => ({ + marginTop: '-16px', // after element which fades out the list '&::after': { content: '""', @@ -23,10 +17,18 @@ export const FileList = styled('div')(({ theme }) => ({ }, })); -export const FileListItem = styled('li')(({ theme }) => ({ - display: 'flex', - flexDirection: 'column', +export const FileList = styled('div')(({ theme }) => ({ + height: '280px', + overflow: 'auto', + msOverflowStyle: 'none', + scrollbarWidth: 'none', + position: 'relative', + '::-webkit-scrollbar': { + display: 'none', + }, +})); +export const FileListLi = styled('li')(({ theme }) => ({ ':focus-visible': { outline: 'none', @@ -40,3 +42,184 @@ export const FileListItem = styled('li')(({ theme }) => ({ }, }, })); + +export const FileListItem = styled('div')(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + position: 'relative', +})); + +export const FileListItemContentWrapper = styled.div<{ + selected: boolean; + disabled: boolean; + error: boolean; +}>(({ theme, selected, disabled, error }) => ({ + display: 'flex', + alignItems: 'flex-start', + gap: '8px', + alignSelf: 'stretch', + padding: '8px 16px', + cursor: 'pointer', + borderRadius: '4px', + + ...(selected && { + borderRadius: '4px', + background: theme.base === 'dark' ? 'rgba(255,255,255,.1)' : theme.color.mediumlight, + + '> svg': { + display: 'flex', + }, + }), + + ...(disabled && { + cursor: 'not-allowed', + + div: { + color: `${theme.color.mediumdark} !important`, + }, + }), + + ...(error && { + background: '#F9ECEC', + }), + + '&:hover': { + background: error + ? '#F9ECEC' + : theme.base === 'dark' + ? 'rgba(255,255,255,.1)' + : theme.color.mediumlight, + + '> svg': { + display: 'flex', + }, + }, +})); + +export const FileListUl = styled('ul')({ + margin: 0, + padding: '0 0 0 0', + width: '100%', + position: 'relative', +}); + +export const FileListItemContent = styled('div')({ + display: 'flex', + flexDirection: 'column', + alignItems: 'flex-start', + width: 'calc(100% - 50px)', +}); + +export const FileListIconWrapper = styled('div')<{ error: boolean }>(({ theme, error }) => ({ + color: error ? theme.color.negativeText : theme.color.secondary, +})); + +export const FileListItemLabel = styled('div')<{ error: boolean }>(({ theme, error }) => ({ + color: error + ? theme.color.negativeText + : theme.base === 'dark' + ? theme.color.lighter + : theme.color.darkest, + fontSize: '14px', + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', + overflow: 'hidden', + maxWidth: '100%', +})); + +export const FileListItemPath = styled('div')(({ theme }) => ({ + color: theme.color.mediumdark, + fontSize: '14px', + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', + overflow: 'hidden', + maxWidth: '100%', +})); + +export const FileListExport = styled('ul')(({ theme }) => ({ + margin: 0, + padding: 0, +})); + +export const FileListItemExport = styled('li')<{ error: boolean }>(({ theme, error }) => ({ + padding: '8px 16px 8px 16px', + marginLeft: '30px', + display: 'flex', + gap: '8px', + alignItems: 'center', + justifyContent: 'space-between', + fontSize: '14px', + cursor: 'pointer', + borderRadius: '4px', + + ':focus-visible': { + outline: 'none', + }, + + ...(error && { + background: '#F9ECEC', + color: theme.color.negativeText, + }), + + '&:hover,:focus-visible': { + background: error + ? '#F9ECEC' + : theme.base === 'dark' + ? 'rgba(255, 255, 255, 0.1)' + : theme.color.mediumlight, + + '> svg': { + display: 'flex', + }, + }, + + '> div > svg': { + color: error ? theme.color.negativeText : theme.color.secondary, + }, +})); + +export const FileListItemExportName = styled('div')(({ theme }) => ({ + display: 'flex', + alignItems: 'center', + gap: '8px', + width: 'calc(100% - 20px)', +})); + +export const FileListItemExportNameContent = styled('span')(({ theme }) => ({ + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', + overflow: 'hidden', + maxWidth: 'calc(100% - 160px)', + display: 'inline-block', +})); + +export const ChevronRightIconStyled = styled(ChevronRightIcon)(({ theme }) => ({ + display: 'none', + alignSelf: 'center', + color: theme.color.mediumdark, +})); + +export const ChevronDownIconStyled = styled(ChevronDownIcon)(({ theme }) => ({ + display: 'none', + alignSelf: 'center', + color: theme.color.mediumdark, +})); + +export const DefaultExport = styled('span')(({ theme }) => ({ + display: 'inline-block', + padding: `1px ${theme.appBorderRadius}px`, + borderRadius: '2px', + fontSize: '10px', + color: theme.base === 'dark' ? theme.color.lightest : '#727272', + backgroundColor: theme.base === 'dark' ? 'rgba(255, 255, 255, 0.1)' : '#F2F4F5', +})); + +export const NoResults = styled('div')(({ theme }) => ({ + padding: '0 10%', + textAlign: 'center', + color: theme.base === 'dark' ? theme.color.lightest : theme.defaultText, +})); + +export const NoResultsDescription = styled('p')(({ theme }) => ({ + color: theme.base === 'dark' ? theme.color.defaultText : theme.color.mediumdark, +})); diff --git a/code/ui/manager/src/components/sidebar/FileSearchList.stories.tsx b/code/ui/manager/src/components/sidebar/FileSearchList.stories.tsx index a0b458da679c..d7f6f32ba965 100644 --- a/code/ui/manager/src/components/sidebar/FileSearchList.stories.tsx +++ b/code/ui/manager/src/components/sidebar/FileSearchList.stories.tsx @@ -18,6 +18,7 @@ export const Default: Story = { args: { isLoading: true, searchResults: null, + errorItemId: null, }, }; @@ -25,6 +26,7 @@ export const Empty: Story = { args: { isLoading: false, searchResults: [], + errorItemId: null, }, }; @@ -76,12 +78,15 @@ export const WithResults: Story = { }, args: { isLoading: false, + errorItemId: null, searchResults: [ { exportedComponents: [], + storyFileExists: false, filepath: 'src/no-exports-module.js', }, { + storyFileExists: false, exportedComponents: [ { default: true, @@ -95,10 +100,12 @@ export const WithResults: Story = { filepath: 'src/module-multiple-exports.js', }, { + storyFileExists: false, exportedComponents: null, filepath: 'src/no-exports-module-1.js', }, { + storyFileExists: false, exportedComponents: [ { default: true, @@ -107,6 +114,30 @@ export const WithResults: Story = { ], filepath: 'src/module-single-export.js', }, + { + storyFileExists: true, + exportedComponents: [ + { + default: true, + name: 'default', + }, + { + default: false, + name: 'namedExportWithStory', + }, + ], + filepath: 'src/has-story-file-with-multiple-exports.js', + }, + { + storyFileExists: true, + exportedComponents: [ + { + default: true, + name: 'default', + }, + ], + filepath: 'src/has-story-file.js', + }, ], }, }; diff --git a/code/ui/manager/src/components/sidebar/FileSearchList.tsx b/code/ui/manager/src/components/sidebar/FileSearchList.tsx index c12e1ec96756..b02d30503950 100644 --- a/code/ui/manager/src/components/sidebar/FileSearchList.tsx +++ b/code/ui/manager/src/components/sidebar/FileSearchList.tsx @@ -1,173 +1,43 @@ import React, { memo, useCallback, useLayoutEffect, useMemo, useState } from 'react'; -import { styled } from '@storybook/theming'; -import { ChevronDownIcon, ChevronRightIcon, ComponentIcon } from '@storybook/icons'; +import { ComponentIcon } from '@storybook/icons'; import { FileSearchListLoadingSkeleton } from './FileSearchListSkeleton'; -import { FileList, FileListItem } from './FileList'; +import { + ChevronDownIconStyled, + ChevronRightIconStyled, + DefaultExport, + FileList, + FileListExport, + FileListIconWrapper, + FileListItem, + FileListItemContent, + FileListItemContentWrapper, + FileListItemExport, + FileListItemExportName, + FileListItemExportNameContent, + FileListItemLabel, + FileListItemPath, + FileListLi, + FileListUl, + FileListWrapper, + NoResults, + NoResultsDescription, +} from './FileList'; import type { VirtualItem } from '@tanstack/react-virtual'; import { useVirtualizer } from '@tanstack/react-virtual'; import type { CreateNewStoryPayload, FileComponentSearchResult } from '@storybook/core-events'; import { WithTooltip, TooltipNote } from '@storybook/components'; -const FileListItemContentWrapper = styled.div<{ selected: boolean; disabled: boolean }>( - ({ theme, selected, disabled }) => ({ - display: 'flex', - alignItems: 'flex-start', - gap: '8px', - alignSelf: 'stretch', - padding: '8px 16px', - cursor: 'pointer', - - ...(selected && { - borderRadius: '4px', - background: theme.base === 'dark' ? 'rgba(255,255,255,.1)' : theme.color.mediumlight, - - '> svg': { - display: 'flex', - }, - }), - - ...(disabled && { - cursor: 'not-allowed', - }), - - '&:hover': { - borderRadius: '4px', - background: theme.base === 'dark' ? 'rgba(255,255,255,.1)' : theme.color.mediumlight, - - '> svg': { - display: 'flex', - }, - }, - }) -); - -const FileListUl = styled('ul')({ - margin: 0, - padding: 0, - width: '100%', - position: 'relative', -}); - -const FileListItemContent = styled('div')({ - display: 'flex', - flexDirection: 'column', - alignItems: 'flex-start', - width: 'calc(100% - 50px)', -}); - -const FileListIconWrapper = styled('div')(({ theme }) => ({ - color: theme.color.secondary, -})); - -const FileListItemLabel = styled('div')(({ theme }) => ({ - color: theme.base === 'dark' ? theme.color.lighter : theme.color.darkest, - fontSize: '14px', - whiteSpace: 'nowrap', - textOverflow: 'ellipsis', - overflow: 'hidden', - maxWidth: '100%', -})); - -const FileListItemPath = styled('div')(({ theme }) => ({ - color: theme.color.mediumdark, - fontSize: '14px', - whiteSpace: 'nowrap', - textOverflow: 'ellipsis', - overflow: 'hidden', - maxWidth: '100%', -})); - -const FileListExport = styled('ul')(({ theme }) => ({ - margin: 0, - padding: 0, -})); - -const FileListItemExport = styled('li')(({ theme }) => ({ - padding: '8px 16px 8px 16px', - marginLeft: '30px', - display: 'flex', - gap: '8px', - alignItems: 'center', - justifyContent: 'space-between', - fontSize: '14px', - cursor: 'pointer', - - ':focus-visible': { - outline: 'none', - borderRadius: '4px', - background: theme.base === 'dark' ? 'rgba(255,255,255,.1)' : theme.color.mediumlight, - - '> svg': { - display: 'flex', - }, - }, - - '&:hover': { - borderRadius: '4px', - background: theme.base === 'dark' ? 'rgba(255, 255, 255, 0.1)' : theme.color.mediumlight, - - '> svg': { - display: 'flex', - }, - }, - - '> div > svg': { - color: theme.color.secondary, - }, -})); - -const FileListItemExportName = styled('div')(({ theme }) => ({ - display: 'flex', - alignItems: 'center', - gap: '8px', - width: 'calc(100% - 20px)', -})); - -const FileListItemExportNameContent = styled('span')(({ theme }) => ({ - whiteSpace: 'nowrap', - textOverflow: 'ellipsis', - overflow: 'hidden', - maxWidth: 'calc(100% - 160px)', - display: 'inline-block', -})); - -const ChevronRightIconStyled = styled(ChevronRightIcon)(({ theme }) => ({ - display: 'none', - alignSelf: 'center', - color: theme.color.mediumdark, -})); - -const ChevronDownIconStyled = styled(ChevronDownIcon)(({ theme }) => ({ - display: 'none', - alignSelf: 'center', - color: theme.color.mediumdark, -})); - -const DefaultExport = styled('span')(({ theme }) => ({ - display: 'inline-block', - padding: `1px ${theme.appBorderRadius}px`, - borderRadius: '2px', - fontSize: '10px', - color: theme.base === 'dark' ? theme.color.lightest : '#727272', - backgroundColor: theme.base === 'dark' ? 'rgba(255, 255, 255, 0.1)' : '#F2F4F5', -})); - -const NoResults = styled('div')(({ theme }) => ({ - padding: '0 10%', - textAlign: 'center', - color: theme.base === 'dark' ? theme.color.lightest : theme.defaultText, -})); - -const NoResultsDescription = styled('p')(({ theme }) => ({ - color: theme.base === 'dark' ? theme.color.defaultText : theme.color.mediumdark, -})); - export type SearchResult = FileComponentSearchResult['result']['files'][0]; +export interface NewStoryPayload extends CreateNewStoryPayload { + selectedItemId: string | number; +} + interface FileSearchListProps { isLoading: boolean; searchResults: Array | null; - onNewStory: (props: CreateNewStoryPayload) => void; + onNewStory: (props: NewStoryPayload) => void; + errorItemId?: number | string; } interface FileItemContentProps { @@ -177,10 +47,23 @@ interface FileItemContentProps { as?: 'div'; } +interface FileItemSelectionPayload { + virtualItem: VirtualItem; + searchResult: SearchResult; + itemId: string; +} + +interface FileItemComponentSelectionPayload { + searchResult: SearchResult; + component: SearchResult['exportedComponents'][0]; + id: string; +} + export const FileSearchList = memo(function FileSearchList({ isLoading, searchResults, onNewStory, + errorItemId, }: FileSearchListProps) { const [selectedItem, setSelectedItem] = useState(null); const parentRef = React.useRef(); @@ -188,7 +71,21 @@ export const FileSearchList = memo(function FileSearchList({ const sortedSearchResults = useMemo(() => { // search results with no exports should be at the end of the list return [...(searchResults ?? [])]?.sort((a, b) => { - if (a.exportedComponents?.length && b.exportedComponents?.length < 1) { + const isADisabled = + a.exportedComponents === null || + a.exportedComponents?.length === 0 || + (a.storyFileExists && a.exportedComponents?.length < 2); + + const isBDisabled = + b.exportedComponents === null || + b.exportedComponents?.length === 0 || + (b.storyFileExists && b.exportedComponents?.length < 2); + + if (isADisabled && !isBDisabled) { + return 1; + } + + if (!isADisabled && isBDisabled) { return -1; } @@ -199,6 +96,7 @@ export const FileSearchList = memo(function FileSearchList({ const rowVirtualizer = useVirtualizer({ count: searchResults?.length || 0, getScrollElement: () => parentRef.current, + paddingStart: 16, paddingEnd: 40, estimateSize: () => 54, overscan: 2, @@ -213,7 +111,7 @@ export const FileSearchList = memo(function FileSearchList({ }, [rowVirtualizer, selectedItem]); const handleFileItemSelection = useCallback( - ({ virtualItem, searchResult }: { virtualItem: VirtualItem; searchResult: SearchResult }) => { + ({ virtualItem, searchResult, itemId }: FileItemSelectionPayload) => { if (searchResult?.exportedComponents?.length > 1) { setSelectedItem((sItem) => { if (sItem === virtualItem.index) { @@ -222,11 +120,12 @@ export const FileSearchList = memo(function FileSearchList({ return virtualItem.index; }); - } else if (searchResult?.exportedComponents?.length === 1) { + } else if (searchResult?.exportedComponents?.length === 1 && !searchResult?.storyFileExists) { onNewStory({ componentExportName: searchResult.exportedComponents[0].name, componentFilePath: searchResult.filepath, componentIsDefaultExport: searchResult.exportedComponents[0].default, + selectedItemId: itemId, }); } }, @@ -234,113 +133,117 @@ export const FileSearchList = memo(function FileSearchList({ ); const handleFileItemComponentSelection = useCallback( - ({ - searchResult, - component, - }: { - searchResult: SearchResult; - component: SearchResult['exportedComponents'][0]; - }) => { + ({ searchResult, component, id }: FileItemComponentSelectionPayload) => { onNewStory({ componentExportName: component.name, componentFilePath: searchResult.filepath, componentIsDefaultExport: component.default, + selectedItemId: id, }); }, [onNewStory] ); const ListItem = useCallback( - ({ virtualItem, selected, searchResult, as }: FileItemContentProps) => ( - { - handleFileItemSelection({ virtualItem, searchResult }); - }} - onKeyUp={(event) => { - if (event.key === 'Enter') { - handleFileItemSelection({ virtualItem, searchResult }); - } - }} - > - { + const itemError = errorItemId === searchResult.filepath; + const itemSelected = selected === virtualItem.index; + + return ( + { + handleFileItemSelection({ virtualItem, itemId: searchResult.filepath, searchResult }); + }} + onKeyUp={(event) => { + if (event.key === 'Enter') { + handleFileItemSelection({ virtualItem, itemId: searchResult.filepath, searchResult }); + } + }} > - - - - - {searchResult.filepath.split('/').at(-1)} - {searchResult.filepath} - - {selected === virtualItem.index ? : } - - {searchResult?.exportedComponents?.length > 1 && selected === virtualItem.index && ( - { - e.stopPropagation(); - }} - onKeyUp={(e) => { - if (e.key === 'Enter') { - e.stopPropagation(); - } - }} + - {searchResult.exportedComponents?.map((component) => ( - { - handleFileItemComponentSelection({ searchResult, component }); - }} - onKeyUp={(event) => { - if (event.key === 'Enter') { - handleFileItemComponentSelection({ searchResult, component }); - } - }} - > - - - {component.default ? ( - <> - - {searchResult.filepath.split('/').at(-1)?.split('.')?.at(0)} - - Default export - - ) : ( - component.name - )} - - - - ))} - - )} - - ), - [handleFileItemComponentSelection, handleFileItemSelection, rowVirtualizer] + + + + + + {searchResult.filepath.split('/').at(-1)} + + {searchResult.filepath} + + {itemSelected ? : } + + {searchResult?.exportedComponents?.length > 1 && itemSelected && ( + { + e.stopPropagation(); + }} + onKeyUp={(e) => { + if (e.key === 'Enter') { + e.stopPropagation(); + } + }} + > + {searchResult.exportedComponents?.map((component, itemExportId) => { + const itemExportError = errorItemId === `${searchResult.filepath}_${itemExportId}`; + return ( + { + handleFileItemComponentSelection({ + searchResult, + component, + id: `${searchResult.filepath}_${itemExportId}`, + }); + }} + onKeyUp={(event) => { + if (event.key === 'Enter') { + handleFileItemComponentSelection({ + searchResult, + component, + id: `${searchResult.filepath}_${itemExportId}`, + }); + } + }} + > + + + {component.default ? ( + <> + + {searchResult.filepath.split('/').at(-1)?.split('.')?.at(0)} + + Default export + + ) : ( + component.name + )} + + + + ); + })} + + )} + + ); + }, + [handleFileItemComponentSelection, handleFileItemSelection, errorItemId] ); if (isLoading && (searchResults === null || searchResults?.length === 0)) { @@ -361,44 +264,76 @@ export const FileSearchList = memo(function FileSearchList({ if (sortedSearchResults?.length > 0) { return ( - - - {rowVirtualizer.getVirtualItems().map((virtualItem) => { - const searchResult = sortedSearchResults[virtualItem.index]; - return searchResult.exportedComponents === null || - searchResult.exportedComponents?.length === 0 ? ( - - } - > - - - ) : ( - - ); - })} - - + + + + {rowVirtualizer.getVirtualItems().map((virtualItem) => { + const searchResult = sortedSearchResults[virtualItem.index]; + const noExports = + searchResult.exportedComponents === null || + searchResult.exportedComponents?.length === 0; + const hasStoryFile = + searchResult.exportedComponents?.length === 1 && searchResult.storyFileExists; + + const itemProps = {}; + + return ( + + {noExports || hasStoryFile ? ( + + } + > + + + ) : ( + + )} + + ); + })} + + + ); } diff --git a/code/ui/manager/src/components/sidebar/FileSearchModal.stories.tsx b/code/ui/manager/src/components/sidebar/FileSearchModal.stories.tsx new file mode 100644 index 000000000000..7e31196e6908 --- /dev/null +++ b/code/ui/manager/src/components/sidebar/FileSearchModal.stories.tsx @@ -0,0 +1,17 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { FileSearchModal } from './FileSearchModal'; + +const meta = { + component: FileSearchModal, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + open: true + } +}; \ No newline at end of file diff --git a/code/ui/manager/src/components/sidebar/FileSearchModal.tsx b/code/ui/manager/src/components/sidebar/FileSearchModal.tsx index a0bf5a6be995..3f4f7c946c07 100644 --- a/code/ui/manager/src/components/sidebar/FileSearchModal.tsx +++ b/code/ui/manager/src/components/sidebar/FileSearchModal.tsx @@ -32,7 +32,7 @@ import { import { addons, useStorybookApi } from '@storybook/manager-api'; import { useDebounce } from '../../hooks/useDebounce'; -import type { SearchResult } from './FileSearchList'; +import type { NewStoryPayload, SearchResult } from './FileSearchList'; import { FileSearchList } from './FileSearchList'; import type { Channel } from '@storybook/channels'; import { extractSeededRequiredArgs, trySelectNewStory } from './FileSearchModal.utils'; @@ -126,6 +126,11 @@ const ModalError = styled(Modal.Error)({ padding: '8px 40px 8px 16px', bottom: 0, maxHeight: 'initial', + width: '100%', + + div: { + wordBreak: 'break-word', + }, '> div': { padding: 0, @@ -146,7 +151,9 @@ export const FileSearchModal = ({ open, onOpenChange }: FileSearchModalProps) => const fileSearchQueryDebounced = useDebounce(fileSearchQuery, 200); const fileSearchQueryDeferred = useDeferredValue(fileSearchQueryDebounced); const emittedValue = useRef(null); - const [error, setError] = useState(null); + const [error, setError] = useState<{ selectedItemId?: number | string; error: string } | null>( + null + ); const api = useStorybookApi(); const [modalContentRef, modalContentDimensions] = useMeasure(); const [modalMaxHeight, setModalMaxHeight] = useState(modalContentDimensions.height); @@ -190,12 +197,53 @@ export const FileSearchModal = ({ open, onOpenChange }: FileSearchModalProps) => [api, onOpenChange] ); + const handleFileSearch = useCallback(() => { + setLoading(true); + const channel = addons.getChannel(); + + const set = (data: FileComponentSearchResult) => { + const isLatestRequest = + data.result?.searchQuery === fileSearchQueryDeferred && data.result.files; + + if (data.success) { + if (isLatestRequest) { + setSearchResults(data.result.files); + } + } else { + setError({ error: data.error }); + } + + if (isLatestRequest) { + channel.off(FILE_COMPONENT_SEARCH_RESPONSE, set); + setLoading(false); + emittedValue.current = null; + } + }; + + channel.on(FILE_COMPONENT_SEARCH_RESPONSE, set); + + if (fileSearchQueryDeferred !== '' && emittedValue.current !== fileSearchQueryDeferred) { + emittedValue.current = fileSearchQueryDeferred; + channel.emit(FILE_COMPONENT_SEARCH_REQUEST, { + searchQuery: fileSearchQueryDeferred, + } satisfies FileComponentSearchPayload); + } else { + setSearchResults(null); + setLoading(false); + } + + return () => { + channel.off(FILE_COMPONENT_SEARCH_RESPONSE, set); + }; + }, [fileSearchQueryDeferred]); + const handleCreateNewStory = useCallback( async ({ componentExportName, componentFilePath, componentIsDefaultExport, - }: CreateNewStoryPayload) => { + selectedItemId, + }: NewStoryPayload) => { try { const channel = addons.getChannel(); @@ -254,7 +302,7 @@ export const FileSearchModal = ({ open, onOpenChange }: FileSearchModalProps) => handleSuccessfullyCreatedStory(componentExportName); } else { - setError(createNewStoryResult.error); + setError({ selectedItemId: selectedItemId, error: createNewStoryResult.error }); } } catch (e) { handleErrorWhenCreatingStory(); @@ -265,45 +313,11 @@ export const FileSearchModal = ({ open, onOpenChange }: FileSearchModalProps) => useEffect(() => { setError(null); - }, [searchResults]); + }, [fileSearchQueryDeferred]); useEffect(() => { - setLoading(true); - const channel = addons.getChannel(); - - const set = (data: FileComponentSearchResult) => { - const isLatestRequest = - data.result?.searchQuery === fileSearchQueryDeferred && data.result.files; - - if (data.success) { - if (isLatestRequest) { - setSearchResults(data.result.files); - } - } else { - setError(data.error); - } - - if (isLatestRequest) { - setLoading(false); - } - }; - - channel.on(FILE_COMPONENT_SEARCH_RESPONSE, set); - - if (fileSearchQueryDeferred !== '' && emittedValue.current !== fileSearchQueryDeferred) { - emittedValue.current = fileSearchQueryDeferred; - channel.emit(FILE_COMPONENT_SEARCH_REQUEST, { - searchQuery: fileSearchQueryDeferred, - } satisfies FileComponentSearchPayload); - } else { - setSearchResults(null); - setLoading(false); - } - - return () => { - channel.off(FILE_COMPONENT_SEARCH_RESPONSE, set); - }; - }, [fileSearchQueryDeferred, setSearchResults, setLoading]); + return handleFileSearch(); + }, [handleFileSearch]); return ( { {error && fileSearchQueryDeferred !== '' && ( - {error} +
{error.error}
{ setError(null); From e0af40b48a0cd0b91384506a2667bddb73085a5e Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 19 Apr 2024 10:48:44 +0200 Subject: [PATCH 270/380] Polish skeleton --- .../components/sidebar/FileSearchListSkeleton.tsx | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/code/ui/manager/src/components/sidebar/FileSearchListSkeleton.tsx b/code/ui/manager/src/components/sidebar/FileSearchListSkeleton.tsx index d54cd473f7d0..f8050f4942f6 100644 --- a/code/ui/manager/src/components/sidebar/FileSearchListSkeleton.tsx +++ b/code/ui/manager/src/components/sidebar/FileSearchListSkeleton.tsx @@ -15,36 +15,41 @@ const FileListItemContentSkeleton = styled('div')({ flexDirection: 'column', alignItems: 'flex-start', width: '100%', + borderRadius: '3px', }); const FileListIconWrapperSkeleton = styled.div(({ theme }) => ({ width: '14px', height: '14px', + borderRadius: '3px', + marginTop: '1px', background: theme.base === 'dark' ? 'rgba(255,255,255,.1)' : 'rgba(0,0,0,.1)', animation: `${theme.animation.glow} 1.5s ease-in-out infinite`, })); const FileListItemSkeleton = styled.div(({ theme }) => ({ - height: '14px', + height: '16px', + borderRadius: '3px', background: theme.base === 'dark' ? 'rgba(255,255,255,.1)' : 'rgba(0,0,0,.1)', animation: `${theme.animation.glow} 1.5s ease-in-out infinite`, width: '100%', + maxWidth: '100%', '+ div': { - marginTop: '8px', + marginTop: '6px', }, })); export const FileSearchListLoadingSkeleton = () => { return ( - {[1, 2, 3, 4, 5].map((result) => ( + {[1, 2, 3].map((result) => ( - - + + From c3f0177374e2d27a04bb6cf8b8521b86033e97a7 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 19 Apr 2024 10:49:04 +0200 Subject: [PATCH 271/380] Polish no results --- code/ui/manager/src/components/sidebar/FileList.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/code/ui/manager/src/components/sidebar/FileList.tsx b/code/ui/manager/src/components/sidebar/FileList.tsx index a98614793e64..0ad499740aa5 100644 --- a/code/ui/manager/src/components/sidebar/FileList.tsx +++ b/code/ui/manager/src/components/sidebar/FileList.tsx @@ -215,11 +215,14 @@ export const DefaultExport = styled('span')(({ theme }) => ({ })); export const NoResults = styled('div')(({ theme }) => ({ - padding: '0 10%', textAlign: 'center', - color: theme.base === 'dark' ? theme.color.lightest : theme.defaultText, + maxWidth: '334px', + margin: '16px auto 0 auto', + fontSize: '14px', + color: theme.base === 'dark' ? theme.color.lightest : '#000', })); export const NoResultsDescription = styled('p')(({ theme }) => ({ + margin: 0, color: theme.base === 'dark' ? theme.color.defaultText : theme.color.mediumdark, })); From d7039ef542ca54aa864c17826978fcf328328c2c Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Fri, 19 Apr 2024 12:22:32 +0200 Subject: [PATCH 272/380] Implement file formatting --- .../src/utils/save-story/save-story.ts | 38 +++++++++++++++---- 1 file changed, 31 insertions(+), 7 deletions(-) diff --git a/code/lib/core-server/src/utils/save-story/save-story.ts b/code/lib/core-server/src/utils/save-story/save-story.ts index 067b26f515cf..b7cd292ce218 100644 --- a/code/lib/core-server/src/utils/save-story/save-story.ts +++ b/code/lib/core-server/src/utils/save-story/save-story.ts @@ -1,4 +1,5 @@ /* eslint-disable no-underscore-dangle */ +import fs from 'node:fs/promises'; import { parse } from 'telejson'; import type { Channel } from '@storybook/channels'; import type { @@ -9,7 +10,7 @@ import type { } from '@storybook/core-events'; import { SAVE_STORY_REQUEST, SAVE_STORY_RESPONSE, STORY_RENDERED } from '@storybook/core-events'; import { storyNameFromExport, toId } from '@storybook/csf'; -import { readCsf, writeCsf } from '@storybook/csf-tools'; +import { printCsf, readCsf } from '@storybook/csf-tools'; import { logger } from '@storybook/node-logger'; import type { CoreConfig, Options } from '@storybook/types'; import { telemetry } from '@storybook/telemetry'; @@ -17,6 +18,7 @@ import { telemetry } from '@storybook/telemetry'; import { basename, join } from 'path'; import { updateArgsInCsfFile } from './update-args-in-csf-file'; import { duplicateStoryWithNewName } from './duplicate-story-with-new-name'; +import { formatFileContent } from '@storybook/core-common'; const parseArgs = (args: string): Record => parse(args, { @@ -26,17 +28,34 @@ const parseArgs = (args: string): Record => allowSymbol: true, }); +// Removes extra newlines between story properties. See https://github.com/benjamn/recast/issues/242 +// Only updates the part of the code for the story with the given name. +const removeExtraNewlines = (code: string, name: string) => { + const anything = '(.|\r\n|\r|\n)'; // Multiline match for any character. + const newline = '(\r\n|\r|\n)'; // Either newlines or carriage returns may be used in the file. + const closing = newline + '};' + newline; // Marks the end of the story definition. + const regex = new RegExp( + // Looks for an export by the given name, considers the first closing brace on its own line + // to be the end of the story definition. + `^(?${anything}*)(?export const ${name} =${anything}+?${closing})(?${anything}*)$` + ); + const { before, story, after } = code.match(regex)?.groups || {}; + return story + ? before + story.replaceAll(/(\r\n|\r|\n)(\r\n|\r|\n)([ \t]*[a-z0-9_]+): /gi, '$2$3:') + after + : code; +}; + class SaveStoryError extends Error {} export function initializeSaveStory(channel: Channel, options: Options, coreConfig: CoreConfig) { channel.on(SAVE_STORY_REQUEST, async ({ id, payload }: RequestData) => { const { csfId, importPath, args, name } = payload; - let newStoryId; - let newStoryName; - let sourceFileName; - let sourceFilePath; - let sourceStoryName; + let newStoryId: string | undefined; + let newStoryName: string | undefined; + let sourceFileName: string; + let sourceFilePath: string; + let sourceStoryName: string; try { sourceFileName = basename(importPath); @@ -68,6 +87,11 @@ export function initializeSaveStory(channel: Channel, options: Options, coreConf args ? parseArgs(args) : {} ); + const code = await formatFileContent( + sourceFilePath, + removeExtraNewlines(printCsf(csf).code, name || storyName) + ); + // Writing the CSF file should trigger HMR, which causes the story to rerender. Delay the // response until that happens, but don't wait too long. await Promise.all([ @@ -75,7 +99,7 @@ export function initializeSaveStory(channel: Channel, options: Options, coreConf channel.on(STORY_RENDERED, resolve); setTimeout(() => resolve(channel.off(STORY_RENDERED, resolve)), 3000); }), - writeCsf(csf, sourceFilePath), + fs.writeFile(sourceFilePath, code), ]); channel.emit(SAVE_STORY_RESPONSE, { From 3ebe4f7278775dab737ac063a9520a96e396ef46 Mon Sep 17 00:00:00 2001 From: goodactive Date: Fri, 19 Apr 2024 18:33:04 +0800 Subject: [PATCH 273/380] chore: remove repetitive words Signed-off-by: goodactive --- MIGRATION.md | 2 +- code/lib/preview-api/src/modules/store/csf/stepRunners.ts | 2 +- .../src/components/notifications/NotificationItem.stories.tsx | 2 +- scripts/release/__tests__/ensure-next-ahead.test.ts | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index eecaf94950a2..9fd48608203c 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -5049,7 +5049,7 @@ SB 5.1.0 added [support for project root `babel.config.js` files](https://github ### React native server -Storybook 5.1 contains a major overhaul of `@storybook/react-native` as compared to 4.1 (we didn't ship a version of RN in 5.0 due to timing constraints). Storybook for RN consists of an an UI for browsing stories on-device or in a simulator, and an optional webserver which can also be used to browse stories and web addons. +Storybook 5.1 contains a major overhaul of `@storybook/react-native` as compared to 4.1 (we didn't ship a version of RN in 5.0 due to timing constraints). Storybook for RN consists of an UI for browsing stories on-device or in a simulator, and an optional webserver which can also be used to browse stories and web addons. 5.1 refactors both pieces: diff --git a/code/lib/preview-api/src/modules/store/csf/stepRunners.ts b/code/lib/preview-api/src/modules/store/csf/stepRunners.ts index 2a5b5be88e17..efc2d583bf31 100644 --- a/code/lib/preview-api/src/modules/store/csf/stepRunners.ts +++ b/code/lib/preview-api/src/modules/store/csf/stepRunners.ts @@ -3,7 +3,7 @@ import type { Renderer, StepRunner } from '@storybook/types'; /** * Compose step runners to create a single step runner that applies each step runner in order. * - * A step runner is a a function that takes a defined step: `step('label', () => { ... })` + * A step runner is a function that takes a defined step: `step('label', () => { ... })` * and runs it. The prototypical example is from `@storybook/addon-interactions` where the * step runner will decorate all instrumented code inside the step with information about the * label. diff --git a/code/ui/manager/src/components/notifications/NotificationItem.stories.tsx b/code/ui/manager/src/components/notifications/NotificationItem.stories.tsx index af4c7fcc8e57..a3b87acdcf52 100644 --- a/code/ui/manager/src/components/notifications/NotificationItem.stories.tsx +++ b/code/ui/manager/src/components/notifications/NotificationItem.stories.tsx @@ -218,7 +218,7 @@ export const BookIconLongSubHeadline: Story = { content: { headline: 'Storybook has a book icon!', subHeadline: - 'Find out more! by clicking on on buttons and downloading some applications. Find out more! by clicking on buttons and downloading some applications', + 'Find out more! by clicking on buttons and downloading some applications. Find out more! by clicking on buttons and downloading some applications', }, icon: , link: undefined, diff --git a/scripts/release/__tests__/ensure-next-ahead.test.ts b/scripts/release/__tests__/ensure-next-ahead.test.ts index d7a3f99c03b7..0b21ebee8447 100644 --- a/scripts/release/__tests__/ensure-next-ahead.test.ts +++ b/scripts/release/__tests__/ensure-next-ahead.test.ts @@ -76,7 +76,7 @@ describe('Ensure next ahead', () => { expect(bumpVersion.run).toHaveBeenCalledWith({ exact: '2.1.0-alpha.0' }); }); - it('should bump version to 2.1.0-alpha.0 when main is 2.0.0 and and next is 2.0.0-rc.10', async () => { + it('should bump version to 2.1.0-alpha.0 when main is 2.0.0 and next is 2.0.0-rc.10', async () => { fsExtra.__setMockFiles({ [CODE_PACKAGE_JSON_PATH]: JSON.stringify({ version: '2.0.0-rc.10' }), }); From fa134a9e8fbdd6f54c102d29db30d7ed3a05f17b Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 19 Apr 2024 12:34:38 +0200 Subject: [PATCH 274/380] Add FileSearchModal --- .../components/src/components/Modal/Modal.tsx | 4 +- .../src/components/sidebar/FileList.tsx | 2 +- .../sidebar/FileSearchList.stories.tsx | 3 + .../src/components/sidebar/FileSearchList.tsx | 26 +- .../sidebar/FileSearchModal.stories.tsx | 124 ++++++++- .../components/sidebar/FileSearchModal.tsx | 245 +++--------------- .../manager/src/components/sidebar/Search.tsx | 4 +- 7 files changed, 183 insertions(+), 225 deletions(-) diff --git a/code/ui/components/src/components/Modal/Modal.tsx b/code/ui/components/src/components/Modal/Modal.tsx index 33bac379d2b1..ad5ddaa85b4e 100644 --- a/code/ui/components/src/components/Modal/Modal.tsx +++ b/code/ui/components/src/components/Modal/Modal.tsx @@ -11,6 +11,7 @@ interface ModalProps extends Omit, 'chi onEscapeKeyDown?: ContentProps['onEscapeKeyDown']; onInteractOutside?: ContentProps['onInteractOutside']; className?: string; + container?: HTMLElement; } export const initial = { opacity: 0 }; @@ -24,11 +25,12 @@ function BaseModal({ onEscapeKeyDown, onInteractOutside = (ev) => ev.preventDefault(), className, + container, ...rootProps }: ModalProps) { return ( - + diff --git a/code/ui/manager/src/components/sidebar/FileList.tsx b/code/ui/manager/src/components/sidebar/FileList.tsx index 0ad499740aa5..0e242d528076 100644 --- a/code/ui/manager/src/components/sidebar/FileList.tsx +++ b/code/ui/manager/src/components/sidebar/FileList.tsx @@ -217,7 +217,7 @@ export const DefaultExport = styled('span')(({ theme }) => ({ export const NoResults = styled('div')(({ theme }) => ({ textAlign: 'center', maxWidth: '334px', - margin: '16px auto 0 auto', + margin: '16px auto 50px auto', fontSize: '14px', color: theme.base === 'dark' ? theme.color.lightest : '#000', })); diff --git a/code/ui/manager/src/components/sidebar/FileSearchList.stories.tsx b/code/ui/manager/src/components/sidebar/FileSearchList.stories.tsx index d7f6f32ba965..6aa590c6d34a 100644 --- a/code/ui/manager/src/components/sidebar/FileSearchList.stories.tsx +++ b/code/ui/manager/src/components/sidebar/FileSearchList.stories.tsx @@ -41,6 +41,7 @@ export const WithResults: Story = { fireEvent.click(exportedElement1); expect(args.onNewStory).toHaveBeenCalledWith({ + selectedItemId: 'src/module-multiple-exports.js_0', componentExportName: 'default', componentFilePath: 'src/module-multiple-exports.js', componentIsDefaultExport: true, @@ -50,6 +51,7 @@ export const WithResults: Story = { fireEvent.click(exportedElement2); expect(args.onNewStory).toHaveBeenCalledWith({ + selectedItemId: 'src/module-multiple-exports.js_1', componentExportName: 'namedExport', componentFilePath: 'src/module-multiple-exports.js', componentIsDefaultExport: false, @@ -59,6 +61,7 @@ export const WithResults: Story = { fireEvent.click(singleExport); expect(args.onNewStory).toHaveBeenCalledWith({ + selectedItemId: 'src/module-single-export.js', componentExportName: 'default', componentFilePath: 'src/module-single-export.js', componentIsDefaultExport: true, diff --git a/code/ui/manager/src/components/sidebar/FileSearchList.tsx b/code/ui/manager/src/components/sidebar/FileSearchList.tsx index b02d30503950..0319e73b9ba1 100644 --- a/code/ui/manager/src/components/sidebar/FileSearchList.tsx +++ b/code/ui/manager/src/components/sidebar/FileSearchList.tsx @@ -154,14 +154,6 @@ export const FileSearchList = memo(function FileSearchList({ aria-expanded={itemSelected} aria-controls={`file-list-export-${virtualItem.index}`} id={`file-list-item-wrapper-${virtualItem.index}`} - onClick={(event) => { - handleFileItemSelection({ virtualItem, itemId: searchResult.filepath, searchResult }); - }} - onKeyUp={(event) => { - if (event.key === 'Enter') { - handleFileItemSelection({ virtualItem, itemId: searchResult.filepath, searchResult }); - } - }} > ); }, - [handleFileItemComponentSelection, handleFileItemSelection, errorItemId] + [handleFileItemComponentSelection, errorItemId] ); if (isLoading && (searchResults === null || searchResults?.length === 0)) { @@ -286,6 +278,22 @@ export const FileSearchList = memo(function FileSearchList({ key={virtualItem.key} data-index={virtualItem.index} ref={rowVirtualizer.measureElement} + onClick={() => { + handleFileItemSelection({ + virtualItem, + itemId: searchResult.filepath, + searchResult, + }); + }} + onKeyUp={(event) => { + if (event.key === 'Enter') { + handleFileItemSelection({ + virtualItem, + itemId: searchResult.filepath, + searchResult, + }); + } + }} style={{ position: 'absolute', top: 0, diff --git a/code/ui/manager/src/components/sidebar/FileSearchModal.stories.tsx b/code/ui/manager/src/components/sidebar/FileSearchModal.stories.tsx index 7e31196e6908..d27d61b0457e 100644 --- a/code/ui/manager/src/components/sidebar/FileSearchModal.stories.tsx +++ b/code/ui/manager/src/components/sidebar/FileSearchModal.stories.tsx @@ -1,17 +1,133 @@ import type { Meta, StoryObj } from '@storybook/react'; +import { findByText, fireEvent, fn, expect } from '@storybook/test'; +import { WithResults } from './FileSearchList.stories'; +import React, { useState } from 'react'; import { FileSearchModal } from './FileSearchModal'; const meta = { component: FileSearchModal, + args: { + open: true, + setError: fn(), + onCreateNewStory: fn(), + onOpenChange: fn(), + setFileSearchQuery: fn(), + }, + // This decorator is used to show the modal in the side by side view + decorators: [ + (Story, context) => { + const [container, setContainer] = useState(null); + + if (context.globals.theme === 'side-by-side') { + return ( +
{ + setContainer(element); + }} + style={{ + width: '100%', + height: '100%', + minHeight: '600px', + transform: 'translateZ(0)', + }} + > + {Story({ args: { ...context.args, container } })} +
+ ); + } + + return Story(); + }, + ], } satisfies Meta; export default meta; type Story = StoryObj; -export const Default: Story = { +export const InitialState: Story = { + args: { + fileSearchQuery: '', + fileSearchQueryDeferred: '', + isLoading: false, + error: null, + searchResults: null, + }, +}; + +export const Loading: Story = { + args: { + fileSearchQuery: 'src', + fileSearchQueryDeferred: 'src', + isLoading: true, + error: null, + searchResults: null, + }, +}; + +export const LoadingWithPreviousResults: Story = { + args: { + fileSearchQuery: 'src', + fileSearchQueryDeferred: 'src', + isLoading: true, + error: null, + searchResults: WithResults.args.searchResults, + }, +}; + +export const Empty: Story = { + args: { + fileSearchQuery: 'src', + fileSearchQueryDeferred: 'src', + isLoading: false, + error: null, + searchResults: [], + }, +}; + +export const WithSearchResults: Story = { + args: { + fileSearchQuery: 'src', + fileSearchQueryDeferred: 'src', + isLoading: false, + error: null, + searchResults: WithResults.args.searchResults, + }, + play: async ({ canvasElement, args }) => { + const parent = canvasElement.parentNode as HTMLElement; + + const moduleSingleExport = await findByText(parent, 'module-single-export.js'); + await fireEvent.click(moduleSingleExport); + + expect(args.onCreateNewStory).toHaveBeenCalledWith({ + componentExportName: 'default', + componentFilePath: 'src/module-single-export.js', + componentIsDefaultExport: true, + selectedItemId: 'src/module-single-export.js', + }); + }, +}; + +export const WithSearchResultsAndError: Story = { + args: { + fileSearchQuery: 'src', + fileSearchQueryDeferred: 'src', + isLoading: false, + error: { error: 'Some error occured', selectedItemId: 'src/module-multiple-exports.js' }, + searchResults: WithResults.args.searchResults, + }, +}; + +export const WithSearchResultsAndMultiLineError: Story = { args: { - open: true - } -}; \ No newline at end of file + fileSearchQuery: 'src', + fileSearchQueryDeferred: 'src', + isLoading: false, + error: { + error: 'A very long error occured. A very long error occured. A very long error occured.', + selectedItemId: 'src/module-multiple-exports.js', + }, + searchResults: WithResults.args.searchResults, + }, +}; diff --git a/code/ui/manager/src/components/sidebar/FileSearchModal.tsx b/code/ui/manager/src/components/sidebar/FileSearchModal.tsx index 3f4f7c946c07..0c948128d7fb 100644 --- a/code/ui/manager/src/components/sidebar/FileSearchModal.tsx +++ b/code/ui/manager/src/components/sidebar/FileSearchModal.tsx @@ -8,7 +8,7 @@ import React, { } from 'react'; import { Modal, Form } from '@storybook/components'; import { styled } from '@storybook/theming'; -import { AlertIcon, CheckIcon, CloseAltIcon, RefreshIcon, SearchIcon } from '@storybook/icons'; +import { AlertIcon, CheckIcon, CloseAltIcon, SearchIcon, SyncIcon } from '@storybook/icons'; import type { ArgTypesInfoPayload, ArgTypesInfoResult, @@ -40,11 +40,6 @@ import { useMeasure } from './useMeasure'; const MODAL_HEIGHT = 418; -interface FileSearchModalProps { - open: boolean; - onOpenChange: (open: boolean) => void; -} - const ModalStyled = styled(Modal)(() => ({ boxShadow: 'none', background: 'transparent', @@ -110,7 +105,7 @@ const LoadingIcon = styled.div(({ theme }) => ({ top: 0, right: 16, zIndex: 1, - color: theme.textMutedColor, + color: theme.darkest, display: 'flex', alignItems: 'center', height: '100%', @@ -139,24 +134,42 @@ const ModalError = styled(Modal.Error)({ const ModalErrorCloseIcon = styled(CloseAltIcon)({ position: 'absolute', - top: 8, + top: 4, right: -24, cursor: 'pointer', }); -export const FileSearchModal = ({ open, onOpenChange }: FileSearchModalProps) => { - const [, startTransition] = useTransition(); - const [isLoading, setLoading] = useState(false); - const [fileSearchQuery, setFileSearchQuery] = useState(''); - const fileSearchQueryDebounced = useDebounce(fileSearchQuery, 200); - const fileSearchQueryDeferred = useDeferredValue(fileSearchQueryDebounced); - const emittedValue = useRef(null); - const [error, setError] = useState<{ selectedItemId?: number | string; error: string } | null>( - null - ); - const api = useStorybookApi(); +type Error = { selectedItemId?: number | string; error: string } | null; + +interface FileSearchModalProps { + open: boolean; + onOpenChange: (open: boolean) => void; + fileSearchQuery: string; + fileSearchQueryDeferred: string; + setFileSearchQuery: (query: string) => void; + isLoading: boolean; + error: Error; + searchResults: SearchResult[] | null; + onCreateNewStory: (payload: NewStoryPayload) => void; + setError: (error: Error) => void; + container?: HTMLElement; +} + +export const FileSearchModal = ({ + open, + onOpenChange, + fileSearchQuery, + setFileSearchQuery, + isLoading, + error, + searchResults, + onCreateNewStory, + setError, + container, +}: FileSearchModalProps) => { const [modalContentRef, modalContentDimensions] = useMeasure(); const [modalMaxHeight, setModalMaxHeight] = useState(modalContentDimensions.height); + const [, startTransition] = useTransition(); useEffect(() => { if (modalMaxHeight < modalContentDimensions.height) { @@ -164,161 +177,6 @@ export const FileSearchModal = ({ open, onOpenChange }: FileSearchModalProps) => } }, [modalContentDimensions.height, modalMaxHeight]); - const [searchResults, setSearchResults] = useState(null); - - const handleErrorWhenCreatingStory = useCallback(() => { - api.addNotification({ - id: 'create-new-story-file-error', - content: { - headline: 'Error while creating story file', - subHeadline: `Take a look at your developer console for more information`, - }, - duration: 8_000, - icon: , - }); - - onOpenChange(false); - }, [api, onOpenChange]); - - const handleSuccessfullyCreatedStory = useCallback( - (componentExportName: string) => { - api.addNotification({ - id: 'create-new-story-file-success', - content: { - headline: 'Story file created', - subHeadline: `${componentExportName} was created`, - }, - duration: 8_000, - icon: , - }); - - onOpenChange(false); - }, - [api, onOpenChange] - ); - - const handleFileSearch = useCallback(() => { - setLoading(true); - const channel = addons.getChannel(); - - const set = (data: FileComponentSearchResult) => { - const isLatestRequest = - data.result?.searchQuery === fileSearchQueryDeferred && data.result.files; - - if (data.success) { - if (isLatestRequest) { - setSearchResults(data.result.files); - } - } else { - setError({ error: data.error }); - } - - if (isLatestRequest) { - channel.off(FILE_COMPONENT_SEARCH_RESPONSE, set); - setLoading(false); - emittedValue.current = null; - } - }; - - channel.on(FILE_COMPONENT_SEARCH_RESPONSE, set); - - if (fileSearchQueryDeferred !== '' && emittedValue.current !== fileSearchQueryDeferred) { - emittedValue.current = fileSearchQueryDeferred; - channel.emit(FILE_COMPONENT_SEARCH_REQUEST, { - searchQuery: fileSearchQueryDeferred, - } satisfies FileComponentSearchPayload); - } else { - setSearchResults(null); - setLoading(false); - } - - return () => { - channel.off(FILE_COMPONENT_SEARCH_RESPONSE, set); - }; - }, [fileSearchQueryDeferred]); - - const handleCreateNewStory = useCallback( - async ({ - componentExportName, - componentFilePath, - componentIsDefaultExport, - selectedItemId, - }: NewStoryPayload) => { - try { - const channel = addons.getChannel(); - - const createNewStoryResult = await oncePromise( - { - channel, - request: { - name: CREATE_NEW_STORYFILE_REQUEST, - payload: { - componentExportName, - componentFilePath, - componentIsDefaultExport, - }, - }, - resolveEvent: CREATE_NEW_STORYFILE_RESPONSE, - } - ); - - if (createNewStoryResult.success) { - setError(null); - - const storyId = createNewStoryResult.result.storyId; - - await trySelectNewStory(api.selectStory, storyId); - - const argTypesInfoResult = await oncePromise({ - channel, - request: { - name: ARGTYPES_INFO_REQUEST, - payload: { storyId }, - }, - resolveEvent: ARGTYPES_INFO_RESPONSE, - }); - - if (argTypesInfoResult.success) { - const argTypes = argTypesInfoResult.result.argTypes; - - const requiredArgs = extractSeededRequiredArgs(argTypes); - - await oncePromise({ - channel, - request: { - name: SAVE_STORY_REQUEST, - payload: { - id: storyId, - payload: { - args: requiredArgs, - importPath: createNewStoryResult.result.storyFilePath, - csfId: storyId, - }, - }, - }, - resolveEvent: SAVE_STORY_RESPONSE, - }); - } - - handleSuccessfullyCreatedStory(componentExportName); - } else { - setError({ selectedItemId: selectedItemId, error: createNewStoryResult.error }); - } - } catch (e) { - handleErrorWhenCreatingStory(); - } - }, - [api, handleSuccessfullyCreatedStory, handleErrorWhenCreatingStory] - ); - - useEffect(() => { - setError(null); - }, [fileSearchQueryDeferred]); - - useEffect(() => { - return handleFileSearch(); - }, [handleFileSearch]); - return ( onInteractOutside={() => { onOpenChange(false); }} + container={container} > - + Add a new story @@ -358,7 +215,7 @@ export const FileSearchModal = ({ open, onOpenChange }: FileSearchModalProps) => /> {isLoading && ( - + )} @@ -367,12 +224,12 @@ export const FileSearchModal = ({ open, onOpenChange }: FileSearchModalProps) => errorItemId={error?.selectedItemId} isLoading={isLoading} searchResults={searchResults} - onNewStory={handleCreateNewStory} + onNewStory={onCreateNewStory} /> } - {error && fileSearchQueryDeferred !== '' && ( + {error && fileSearchQuery !== '' && (
{error.error}
 ); }; - -interface OncePromiseOptions { - channel: Channel; - request: { - name: string; - payload: Payload; - }; - resolveEvent: string; -} - -function oncePromise({ - channel, - request, - resolveEvent, -}: OncePromiseOptions): Promise { - return new Promise((resolve, reject) => { - channel.once(resolveEvent, (data: Result) => { - resolve(data); - }); - - channel.emit(request.name, request.payload as Payload); - - // If the channel supports error events, you can reject the promise on error - channel.once(resolveEvent, (error: any) => { - reject(error); - }); - }); -} diff --git a/code/ui/manager/src/components/sidebar/Search.tsx b/code/ui/manager/src/components/sidebar/Search.tsx index c4116ba87997..28010a0785da 100644 --- a/code/ui/manager/src/components/sidebar/Search.tsx +++ b/code/ui/manager/src/components/sidebar/Search.tsx @@ -22,7 +22,7 @@ import { isSearchResult, isExpandType } from './types'; import { scrollIntoView, searchItem } from '../../utils/tree'; import { getGroupStatus, getHighestStatus } from '../../utils/status'; import { useLayout } from '../layout/LayoutProvider'; -import { FileSearchModal } from './FileSearchModal'; +import { FileSearchModalContainer } from './FileSearchModal'; const { document } = global; @@ -427,7 +427,7 @@ export const Search = React.memo<{ - From ccf154fc6e0715f2e966f1c6ca93c9ab0171ea0e Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 19 Apr 2024 12:35:42 +0200 Subject: [PATCH 275/380] pick https://github.com/storybookjs/storybook/pull/26882/files#diff-d40226fcb115b93feafb896e096305e58bd7bfdde052bdb05da560b4177182b2 --- .../src/modules/preview-web/PreviewWithSelection.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx b/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx index b183a7488ba9..f4c15e000d14 100644 --- a/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx +++ b/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx @@ -352,12 +352,8 @@ export class PreviewWithSelection extends Preview Date: Fri, 19 Apr 2024 12:41:24 +0200 Subject: [PATCH 276/380] Separate CreateNewStoryFileModal from FileSearchModal --- .../sidebar/CreateNewStoryFileModal.tsx | 244 ++++++++++++++++++ .../manager/src/components/sidebar/Search.tsx | 4 +- 2 files changed, 246 insertions(+), 2 deletions(-) create mode 100644 code/ui/manager/src/components/sidebar/CreateNewStoryFileModal.tsx diff --git a/code/ui/manager/src/components/sidebar/CreateNewStoryFileModal.tsx b/code/ui/manager/src/components/sidebar/CreateNewStoryFileModal.tsx new file mode 100644 index 000000000000..b4dfb3e79ecd --- /dev/null +++ b/code/ui/manager/src/components/sidebar/CreateNewStoryFileModal.tsx @@ -0,0 +1,244 @@ +import React, { useCallback, useDeferredValue, useEffect, useRef, useState } from 'react'; +import { AlertIcon, CheckIcon } from '@storybook/icons'; +import type { + ArgTypesInfoPayload, + ArgTypesInfoResult, + CreateNewStoryPayload, + CreateNewStoryResult, + FileComponentSearchPayload, + FileComponentSearchResult, + SaveStoryRequest, + SaveStoryResponse, +} from '@storybook/core-events'; +import { + ARGTYPES_INFO_REQUEST, + ARGTYPES_INFO_RESPONSE, + CREATE_NEW_STORYFILE_REQUEST, + CREATE_NEW_STORYFILE_RESPONSE, + FILE_COMPONENT_SEARCH_REQUEST, + FILE_COMPONENT_SEARCH_RESPONSE, + SAVE_STORY_REQUEST, + SAVE_STORY_RESPONSE, +} from '@storybook/core-events'; +import { addons, useStorybookApi } from '@storybook/manager-api'; + +import { useDebounce } from '../../hooks/useDebounce'; +import type { NewStoryPayload, SearchResult } from './FileSearchList'; +import type { Channel } from '@storybook/channels'; +import { extractSeededRequiredArgs, trySelectNewStory } from './FileSearchModal.utils'; +import { FileSearchModal } from './FileSearchModal'; + +interface CreateNewStoryFileModalProps { + open: boolean; + onOpenChange: (open: boolean) => void; +} + +export const CreateNewStoryFileModal = ({ open, onOpenChange }: CreateNewStoryFileModalProps) => { + const [isLoading, setLoading] = useState(false); + const [fileSearchQuery, setFileSearchQuery] = useState(''); + const fileSearchQueryDebounced = useDebounce(fileSearchQuery, 600); + const fileSearchQueryDeferred = useDeferredValue(fileSearchQueryDebounced); + const emittedValue = useRef(null); + const [error, setError] = useState<{ selectedItemId?: number | string; error: string } | null>( + null + ); + const api = useStorybookApi(); + + const [searchResults, setSearchResults] = useState(null); + + const handleErrorWhenCreatingStory = useCallback(() => { + api.addNotification({ + id: 'create-new-story-file-error', + content: { + headline: 'Error while creating story file', + subHeadline: `Take a look at your developer console for more information`, + }, + duration: 8_000, + icon: , + }); + + onOpenChange(false); + }, [api, onOpenChange]); + + const handleSuccessfullyCreatedStory = useCallback( + (componentExportName: string) => { + api.addNotification({ + id: 'create-new-story-file-success', + content: { + headline: 'Story file created', + subHeadline: `${componentExportName} was created`, + }, + duration: 8_000, + icon: , + }); + + onOpenChange(false); + }, + [api, onOpenChange] + ); + + const handleFileSearch = useCallback(() => { + setLoading(true); + const channel = addons.getChannel(); + + const set = (data: FileComponentSearchResult) => { + const isLatestRequest = + data.result?.searchQuery === fileSearchQueryDeferred && data.result.files; + + if (data.success) { + if (isLatestRequest) { + setSearchResults(data.result.files); + } + } else { + setError({ error: data.error }); + } + + if (isLatestRequest) { + channel.off(FILE_COMPONENT_SEARCH_RESPONSE, set); + setLoading(false); + emittedValue.current = null; + } + }; + + channel.on(FILE_COMPONENT_SEARCH_RESPONSE, set); + + if (fileSearchQueryDeferred !== '' && emittedValue.current !== fileSearchQueryDeferred) { + emittedValue.current = fileSearchQueryDeferred; + channel.emit(FILE_COMPONENT_SEARCH_REQUEST, { + searchQuery: fileSearchQueryDeferred, + } satisfies FileComponentSearchPayload); + } else { + setSearchResults(null); + setLoading(false); + } + + return () => { + channel.off(FILE_COMPONENT_SEARCH_RESPONSE, set); + }; + }, [fileSearchQueryDeferred]); + + const handleCreateNewStory = useCallback( + async ({ + componentExportName, + componentFilePath, + componentIsDefaultExport, + selectedItemId, + }: NewStoryPayload) => { + try { + const channel = addons.getChannel(); + + const createNewStoryResult = await oncePromise( + { + channel, + request: { + name: CREATE_NEW_STORYFILE_REQUEST, + payload: { + componentExportName, + componentFilePath, + componentIsDefaultExport, + }, + }, + resolveEvent: CREATE_NEW_STORYFILE_RESPONSE, + } + ); + + if (createNewStoryResult.success) { + setError(null); + + const storyId = createNewStoryResult.result.storyId; + + await trySelectNewStory(api.selectStory, storyId); + + const argTypesInfoResult = await oncePromise({ + channel, + request: { + name: ARGTYPES_INFO_REQUEST, + payload: { storyId }, + }, + resolveEvent: ARGTYPES_INFO_RESPONSE, + }); + + if (argTypesInfoResult.success) { + const argTypes = argTypesInfoResult.result.argTypes; + + const requiredArgs = extractSeededRequiredArgs(argTypes); + + await oncePromise({ + channel, + request: { + name: SAVE_STORY_REQUEST, + payload: { + id: storyId, + payload: { + args: requiredArgs, + importPath: createNewStoryResult.result.storyFilePath, + csfId: storyId, + }, + }, + }, + resolveEvent: SAVE_STORY_RESPONSE, + }); + } + + handleSuccessfullyCreatedStory(componentExportName); + } else { + setError({ selectedItemId: selectedItemId, error: createNewStoryResult.error }); + } + } catch (e) { + handleErrorWhenCreatingStory(); + } + }, + [api, handleSuccessfullyCreatedStory, handleErrorWhenCreatingStory] + ); + + useEffect(() => { + setError(null); + }, [fileSearchQueryDeferred]); + + useEffect(() => { + return handleFileSearch(); + }, [handleFileSearch]); + + return ( + + ); +}; + +interface OncePromiseOptions { + channel: Channel; + request: { + name: string; + payload: Payload; + }; + resolveEvent: string; +} + +function oncePromise({ + channel, + request, + resolveEvent, +}: OncePromiseOptions): Promise { + return new Promise((resolve, reject) => { + channel.once(resolveEvent, (data: Result) => { + resolve(data); + }); + + channel.emit(request.name, request.payload as Payload); + + // If the channel supports error events, you can reject the promise on error + channel.once(resolveEvent, (error: any) => { + reject(error); + }); + }); +} diff --git a/code/ui/manager/src/components/sidebar/Search.tsx b/code/ui/manager/src/components/sidebar/Search.tsx index 28010a0785da..4e87d462d3ca 100644 --- a/code/ui/manager/src/components/sidebar/Search.tsx +++ b/code/ui/manager/src/components/sidebar/Search.tsx @@ -22,7 +22,7 @@ import { isSearchResult, isExpandType } from './types'; import { scrollIntoView, searchItem } from '../../utils/tree'; import { getGroupStatus, getHighestStatus } from '../../utils/status'; import { useLayout } from '../layout/LayoutProvider'; -import { FileSearchModalContainer } from './FileSearchModal'; +import { CreateNewStoryFileModal } from './CreateNewStoryFileModal'; const { document } = global; @@ -427,7 +427,7 @@ export const Search = React.memo<{ - From 53ec3dd0e51bc3f89011927d71ffcd01202cc7c8 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 19 Apr 2024 13:13:34 +0200 Subject: [PATCH 277/380] dedupe --- code/yarn.lock | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/yarn.lock b/code/yarn.lock index bb20a3544238..55d06346003c 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -1996,7 +1996,7 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:7.24.0, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.22.6, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2": +"@babel/runtime@npm:7.24.0": version: 7.24.0 resolution: "@babel/runtime@npm:7.24.0" dependencies: @@ -2014,7 +2014,7 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:^7.22.15": +"@babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.22.15, @babel/runtime@npm:^7.22.6, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2": version: 7.24.4 resolution: "@babel/runtime@npm:7.24.4" dependencies: From 640213e056bffd520215c85246c40c125e8375a5 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Fri, 19 Apr 2024 13:35:51 +0200 Subject: [PATCH 278/380] Implement redirect and Redirect error boundary --- .../src/export-mocks/navigation/index.ts | 39 +++++++++++-------- .../nextjs/src/fastRefresh/webpack.ts | 9 ++--- .../nextjs/src/routing/decorator.tsx | 5 ++- 3 files changed, 30 insertions(+), 23 deletions(-) diff --git a/code/frameworks/nextjs/src/export-mocks/navigation/index.ts b/code/frameworks/nextjs/src/export-mocks/navigation/index.ts index dd9e9a692e6f..81a0ab6f20d2 100644 --- a/code/frameworks/nextjs/src/export-mocks/navigation/index.ts +++ b/code/frameworks/nextjs/src/export-mocks/navigation/index.ts @@ -1,7 +1,9 @@ import type { Mock } from '@storybook/test'; import { fn } from '@storybook/test'; +import * as actual from 'next/dist/client/components/navigation'; import { NextjsRouterMocksNotAvailable } from '@storybook/core-events/preview-errors'; -import * as originalNavigation from 'next/dist/client/components/navigation'; +import { RedirectStatusCode } from 'next/dist/client/components/redirect-status-code'; +import { getRedirectError } from 'next/dist/client/components/redirect'; let navigationAPI: { push: Mock; @@ -56,34 +58,37 @@ export const getRouter = () => { export * from 'next/dist/client/components/navigation'; // mock utilities/overrides (as of Next v14.2.0) -export const redirect = fn().mockName('next/navigation::redirect'); +export const redirect = fn( + (url: string, type: actual.RedirectType = actual.RedirectType.replace): never => { + throw getRedirectError(url, type, RedirectStatusCode.SeeOther); + } +).mockName('next/navigation::redirect'); + +export const permanentRedirect = fn( + (url: string, type: actual.RedirectType = actual.RedirectType.replace): never => { + throw getRedirectError(url, type, RedirectStatusCode.SeeOther); + } +).mockName('next/navigation::permanentRedirect'); // passthrough mocks - keep original implementation but allow for spying -export const useSearchParams = fn(originalNavigation.useSearchParams).mockName( +export const useSearchParams = fn(actual.useSearchParams).mockName( 'next/navigation::useSearchParams' ); -export const usePathname = fn(originalNavigation.usePathname).mockName( - 'next/navigation::usePathname' -); -export const useSelectedLayoutSegment = fn(originalNavigation.useSelectedLayoutSegment).mockName( +export const usePathname = fn(actual.usePathname).mockName('next/navigation::usePathname'); +export const useSelectedLayoutSegment = fn(actual.useSelectedLayoutSegment).mockName( 'next/navigation::useSelectedLayoutSegment' ); -export const useSelectedLayoutSegments = fn(originalNavigation.useSelectedLayoutSegments).mockName( +export const useSelectedLayoutSegments = fn(actual.useSelectedLayoutSegments).mockName( 'next/navigation::useSelectedLayoutSegments' ); -export const useRouter = fn(originalNavigation.useRouter).mockName('next/navigation::useRouter'); -export const useServerInsertedHTML = fn(originalNavigation.useServerInsertedHTML).mockName( +export const useRouter = fn(actual.useRouter).mockName('next/navigation::useRouter'); +export const useServerInsertedHTML = fn(actual.useServerInsertedHTML).mockName( 'next/navigation::useServerInsertedHTML' ); -export const notFound = fn(originalNavigation.notFound).mockName('next/navigation::notFound'); -export const permanentRedirect = fn(originalNavigation.permanentRedirect).mockName( - 'next/navigation::permanentRedirect' -); +export const notFound = fn(actual.notFound).mockName('next/navigation::notFound'); // Params, not exported by Next.js, is manually declared to avoid inference issues. interface Params { [key: string]: string | string[]; } -export const useParams = fn<[], Params>(originalNavigation.useParams).mockName( - 'next/navigation::useParams' -); +export const useParams = fn<[], Params>(actual.useParams).mockName('next/navigation::useParams'); diff --git a/code/frameworks/nextjs/src/fastRefresh/webpack.ts b/code/frameworks/nextjs/src/fastRefresh/webpack.ts index 83e91518383d..f9bb9d6c51e7 100644 --- a/code/frameworks/nextjs/src/fastRefresh/webpack.ts +++ b/code/frameworks/nextjs/src/fastRefresh/webpack.ts @@ -4,10 +4,9 @@ import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'; export const configureFastRefresh = (baseConfig: WebpackConfig): void => { baseConfig.plugins = [ ...(baseConfig.plugins ?? []), - new ReactRefreshWebpackPlugin({ - overlay: { - sockIntegration: 'whm', - }, - }), + // overlay is disabled as it is shown with caught errors in error boundaries + // and the next app router is using error boundaries to redirect + // TODO use the Next error overlay + new ReactRefreshWebpackPlugin({ overlay: false }), ]; }; diff --git a/code/frameworks/nextjs/src/routing/decorator.tsx b/code/frameworks/nextjs/src/routing/decorator.tsx index 4979b6e3b08a..b31aa0f318be 100644 --- a/code/frameworks/nextjs/src/routing/decorator.tsx +++ b/code/frameworks/nextjs/src/routing/decorator.tsx @@ -3,6 +3,7 @@ import type { Addon_StoryContext } from '@storybook/types'; import { AppRouterProvider } from './app-router-provider'; import { PageRouterProvider } from './page-router-provider'; import type { RouteParams, NextAppDirectory } from './types'; +import { RedirectBoundary } from 'next/dist/client/components/redirect-boundary'; const defaultRouterParams: RouteParams = { pathname: '/', @@ -27,7 +28,9 @@ export const RouterDecorator = ( ...parameters.nextjs?.navigation, }} > - + + + ); } From 551704b181b19bf953dcdcdd487c487d1f7eab7c Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Fri, 19 Apr 2024 14:03:26 +0200 Subject: [PATCH 279/380] Fix error handling for saveStory --- code/addons/controls/src/SaveStory.tsx | 12 +- code/addons/controls/src/manager.tsx | 123 ++++++++++-------- .../src/utils/save-story/save-story.ts | 8 +- 3 files changed, 78 insertions(+), 65 deletions(-) diff --git a/code/addons/controls/src/SaveStory.tsx b/code/addons/controls/src/SaveStory.tsx index acf9143eb46c..614e8364ff74 100644 --- a/code/addons/controls/src/SaveStory.tsx +++ b/code/addons/controls/src/SaveStory.tsx @@ -99,15 +99,9 @@ export const SaveStory = ({ saveStory, createStory, resetArgs }: SaveStoryProps) const onSaveStory = async () => { if (saving) return; - try { - setErrorMessage(null); - setSaving(true); - await saveStory(); - setSaving(false); - } catch (e: any) { - setErrorMessage(e.message); - setSaving(false); - } + setSaving(true); + await saveStory().catch(() => {}); + setSaving(false); }; const onShowForm = () => { diff --git a/code/addons/controls/src/manager.tsx b/code/addons/controls/src/manager.tsx index 135997f7a4c4..7c7ba68f1133 100644 --- a/code/addons/controls/src/manager.tsx +++ b/code/addons/controls/src/manager.tsx @@ -46,29 +46,57 @@ addons.register(ADDON_ID, (api) => { const data = api.getCurrentStoryData(); if (data.type !== 'story') throw new Error('Not a story'); - return experimental_requestResponse( - channel, - SAVE_STORY_REQUEST, - SAVE_STORY_RESPONSE, - { - // Only send updated args - args: stringifyArgs( - Object.entries(data.args || {}).reduce((acc, [key, value]) => { - if (!deepEqual(value, data.initialArgs?.[key])) acc[key] = value; - return acc; - }, {}) - ), - csfId: data.id, - importPath: data.importPath, - } satisfies SaveStoryRequestPayload - ); + try { + const response = await experimental_requestResponse( + channel, + SAVE_STORY_REQUEST, + SAVE_STORY_RESPONSE, + { + // Only send updated args + args: stringifyArgs( + Object.entries(data.args || {}).reduce((acc, [key, value]) => { + if (!deepEqual(value, data.initialArgs?.[key])) acc[key] = value; + return acc; + }, {}) + ), + csfId: data.id, + importPath: data.importPath, + } satisfies SaveStoryRequestPayload + ); + + api.addNotification({ + id: 'save-story-success', + icon: { name: 'passed', color: color.positive }, + content: { + headline: 'Story saved', + subHeadline: ( + <> + Updated story {response.sourceStoryName}. + + ), + }, + duration: 8_000, + }); + } catch (error: any) { + api.addNotification({ + id: 'save-story-error', + icon: { name: 'failed', color: color.negative }, + content: { + headline: 'Failed to save story', + subHeadline: + error?.message || 'Check the Storybook process on the command line for more details.', + }, + duration: 8_000, + }); + throw error; + } }; const createStory = async (name: string) => { const data = api.getCurrentStoryData(); if (data.type !== 'story') throw new Error('Not a story'); - return experimental_requestResponse( + const response = await experimental_requestResponse( channel, SAVE_STORY_REQUEST, SAVE_STORY_RESPONSE, @@ -79,6 +107,24 @@ addons.register(ADDON_ID, (api) => { name, } satisfies SaveStoryRequestPayload ); + + api.addNotification({ + id: 'save-story-success', + icon: { name: 'passed', color: color.positive }, + content: { + headline: 'Story created', + subHeadline: ( + <> + Added story {response.newStoryName} based on {response.sourceStoryName}. + + ), + }, + duration: 8_000, + onClick: ({ onDismiss }) => { + onDismiss(); + api.selectStory(response.newStoryId); + }, + }); }; addons.add(ADDON_ID, { @@ -97,41 +143,14 @@ addons.register(ADDON_ID, (api) => { }, }); - channel.on( - SAVE_STORY_RESPONSE, - ({ success, payload }: ResponseData) => { - if (!success) return; + channel.on(SAVE_STORY_RESPONSE, (data: ResponseData) => { + if (!data.success) return; + const story = api.getCurrentStoryData(); + if (story.type !== 'story') return; - const { newStoryId, newStoryName, sourceStoryName } = payload; - - const data = api.getCurrentStoryData(); - if (data.type === 'story') api.resetStoryArgs(data); - if (newStoryId) api.selectStory(newStoryId); - - api.addNotification({ - id: 'save-story-success', - content: { - headline: newStoryName ? 'Story created' : 'Story saved', - subHeadline: newStoryName ? ( - <> - Added story {newStoryName} based on {sourceStoryName}. - - ) : ( - <> - Updated story {sourceStoryName}. - - ), - }, - duration: 8_000, - onClick: ({ onDismiss }) => { - onDismiss(); - if (newStoryId) api.selectStory(newStoryId); - }, - icon: { - name: 'passed', - color: color.positive, - }, - }); + api.resetStoryArgs(story); + if (data.payload.newStoryId) { + api.selectStory(data.payload.newStoryId); } - ); + }); }); diff --git a/code/lib/core-server/src/utils/save-story/save-story.ts b/code/lib/core-server/src/utils/save-story/save-story.ts index b7cd292ce218..c87dc5ce131b 100644 --- a/code/lib/core-server/src/utils/save-story/save-story.ts +++ b/code/lib/core-server/src/utils/save-story/save-story.ts @@ -53,9 +53,9 @@ export function initializeSaveStory(channel: Channel, options: Options, coreConf let newStoryId: string | undefined; let newStoryName: string | undefined; - let sourceFileName: string; - let sourceFilePath: string; - let sourceStoryName: string; + let sourceFileName: string | undefined; + let sourceFilePath: string | undefined; + let sourceStoryName: string | undefined; try { sourceFileName = basename(importPath); @@ -124,7 +124,7 @@ export function initializeSaveStory(channel: Channel, options: Options, coreConf channel.emit(SAVE_STORY_RESPONSE, { id, success: false, - error: error.message, + error: error instanceof SaveStoryError ? error.message : undefined, payload: { csfId, newStoryId, From 20d0e7ec9818f1828516fde8048243614f9789dc Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Fri, 19 Apr 2024 14:04:17 +0200 Subject: [PATCH 280/380] Fix babel traverse issue --- .../core-server/src/utils/save-story/update-args-in-csf-file.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/code/lib/core-server/src/utils/save-story/update-args-in-csf-file.ts b/code/lib/core-server/src/utils/save-story/update-args-in-csf-file.ts index b3737893625b..d51ba1ad73d9 100644 --- a/code/lib/core-server/src/utils/save-story/update-args-in-csf-file.ts +++ b/code/lib/core-server/src/utils/save-story/update-args-in-csf-file.ts @@ -83,6 +83,8 @@ export const updateArgsInCsfFile = async (node: t.Node, input: Record Date: Fri, 19 Apr 2024 14:13:06 +0200 Subject: [PATCH 281/380] Wait a while --- code/addons/controls/src/SaveStory.stories.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/code/addons/controls/src/SaveStory.stories.tsx b/code/addons/controls/src/SaveStory.stories.tsx index 948ebf87fb0e..fd62c211cad1 100644 --- a/code/addons/controls/src/SaveStory.stories.tsx +++ b/code/addons/controls/src/SaveStory.stories.tsx @@ -39,8 +39,9 @@ export const Created: Story = { const submitButton = await within(dialog).findByRole('button', { name: /Create/i }); await userEvent.click(submitButton); }); - - await expect(context.args.createStory).toHaveBeenCalledWith('MyNewStory'); + await waitFor(async () => { + await expect(context.args.createStory).toHaveBeenCalledWith('MyNewStory'); + }); }, }; From 3e6e7e2b0b93b466bb753c351cf2f0deae9a5e44 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Fri, 19 Apr 2024 14:51:43 +0200 Subject: [PATCH 282/380] Copy Next patch of console.error --- code/frameworks/nextjs/src/preview.tsx | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/code/frameworks/nextjs/src/preview.tsx b/code/frameworks/nextjs/src/preview.tsx index 8f141e7b1ef0..99d800fe109e 100644 --- a/code/frameworks/nextjs/src/preview.tsx +++ b/code/frameworks/nextjs/src/preview.tsx @@ -17,6 +17,7 @@ import { createRouter } from '@storybook/nextjs/router.mock'; // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore we must ignore types here as during compilation they are not generated yet import { createNavigation } from '@storybook/nextjs/navigation.mock'; +import { isNextRouterError } from 'next/dist/client/components/is-next-router-error'; function addNextHeadCount() { const meta = document.createElement('meta'); @@ -25,8 +26,33 @@ function addNextHeadCount() { document.head.appendChild(meta); } +function isAsyncClientComponentError(error: unknown) { + return ( + typeof error === 'string' && + (error.includes('A component was suspended by an uncached promise.') || + error.includes('async/await is not yet supported in Client Components')) + ); +} addNextHeadCount(); +// Copying Next patch of console.error: +// https://github.com/vercel/next.js/blob/a74deb63e310df473583ab6f7c1783bc609ca236/packages/next/src/client/app-index.tsx#L15 +const origConsoleError = globalThis.console.error; +globalThis.console.error = (...args: unknown[]) => { + const error = args[0]; + if (isNextRouterError(error) || isAsyncClientComponentError(error)) { + return; + } + origConsoleError.apply(globalThis.console, args); +}; + +globalThis.addEventListener('error', (ev: WindowEventMap['error']): void => { + if (isNextRouterError(ev.error) || isAsyncClientComponentError(ev.error)) { + ev.preventDefault(); + return; + } +}); + export const decorators: Addon_DecoratorFunction[] = [ StyledJsxDecorator, ImageDecorator, From 1c194d89eccd1935104f18a39dee36c39a922144 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 19 Apr 2024 14:56:12 +0200 Subject: [PATCH 283/380] Cleanup --- code/addons/measure/vitest.config.stories.tsx | 13 ------- code/ui/.storybook/main.ts | 5 +-- .../components/sidebar/FileSearchModal.tsx | 39 ++----------------- .../sidebar => hooks}/useMeasure.tsx | 0 4 files changed, 5 insertions(+), 52 deletions(-) delete mode 100644 code/addons/measure/vitest.config.stories.tsx rename code/ui/manager/src/{components/sidebar => hooks}/useMeasure.tsx (100%) diff --git a/code/addons/measure/vitest.config.stories.tsx b/code/addons/measure/vitest.config.stories.tsx deleted file mode 100644 index bdf3c2979774..000000000000 --- a/code/addons/measure/vitest.config.stories.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; - -import VitestConfig from './vitest.config'; - -const meta = { - component: VitestConfig, -} satisfies Meta; - -export default meta; - -type Story = StoryObj; - -export const Default: Story = {}; \ No newline at end of file diff --git a/code/ui/.storybook/main.ts b/code/ui/.storybook/main.ts index 094a3a1a4a83..7c67fa3d58d8 100644 --- a/code/ui/.storybook/main.ts +++ b/code/ui/.storybook/main.ts @@ -57,7 +57,7 @@ const config: StorybookConfig = { '@storybook/addon-storysource', '@storybook/addon-designs', '@storybook/addon-a11y', - // '@chromatic-com/storybook', + '@chromatic-com/storybook', ], build: { test: { @@ -67,9 +67,6 @@ const config: StorybookConfig = { disableDocgen: false, }, }, - typescript: { - reactDocgen: 'react-docgen-typescript', - }, framework: { name: '@storybook/react-vite', options: {}, diff --git a/code/ui/manager/src/components/sidebar/FileSearchModal.tsx b/code/ui/manager/src/components/sidebar/FileSearchModal.tsx index 0c948128d7fb..4fb0717c4c6b 100644 --- a/code/ui/manager/src/components/sidebar/FileSearchModal.tsx +++ b/code/ui/manager/src/components/sidebar/FileSearchModal.tsx @@ -1,42 +1,11 @@ -import React, { - useCallback, - useDeferredValue, - useEffect, - useRef, - useState, - useTransition, -} from 'react'; +import React, { useEffect, useState, useTransition } from 'react'; import { Modal, Form } from '@storybook/components'; import { styled } from '@storybook/theming'; -import { AlertIcon, CheckIcon, CloseAltIcon, SearchIcon, SyncIcon } from '@storybook/icons'; -import type { - ArgTypesInfoPayload, - ArgTypesInfoResult, - CreateNewStoryPayload, - CreateNewStoryResult, - FileComponentSearchPayload, - FileComponentSearchResult, - SaveStoryRequest, - SaveStoryResponse, -} from '@storybook/core-events'; -import { - ARGTYPES_INFO_REQUEST, - ARGTYPES_INFO_RESPONSE, - CREATE_NEW_STORYFILE_REQUEST, - CREATE_NEW_STORYFILE_RESPONSE, - FILE_COMPONENT_SEARCH_REQUEST, - FILE_COMPONENT_SEARCH_RESPONSE, - SAVE_STORY_REQUEST, - SAVE_STORY_RESPONSE, -} from '@storybook/core-events'; -import { addons, useStorybookApi } from '@storybook/manager-api'; - -import { useDebounce } from '../../hooks/useDebounce'; +import { CloseAltIcon, SearchIcon, SyncIcon } from '@storybook/icons'; + import type { NewStoryPayload, SearchResult } from './FileSearchList'; import { FileSearchList } from './FileSearchList'; -import type { Channel } from '@storybook/channels'; -import { extractSeededRequiredArgs, trySelectNewStory } from './FileSearchModal.utils'; -import { useMeasure } from './useMeasure'; +import { useMeasure } from '../../hooks/useMeasure'; const MODAL_HEIGHT = 418; diff --git a/code/ui/manager/src/components/sidebar/useMeasure.tsx b/code/ui/manager/src/hooks/useMeasure.tsx similarity index 100% rename from code/ui/manager/src/components/sidebar/useMeasure.tsx rename to code/ui/manager/src/hooks/useMeasure.tsx From d16983eaa7fae79de7cdc7a1604ac5a40a7f5ba6 Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Fri, 19 Apr 2024 15:02:01 +0200 Subject: [PATCH 284/380] Fix stories --- .../addons/controls/src/SaveStory.stories.tsx | 27 +++++++++++-------- 1 file changed, 16 insertions(+), 11 deletions(-) diff --git a/code/addons/controls/src/SaveStory.stories.tsx b/code/addons/controls/src/SaveStory.stories.tsx index fd62c211cad1..9dbe620da7fb 100644 --- a/code/addons/controls/src/SaveStory.stories.tsx +++ b/code/addons/controls/src/SaveStory.stories.tsx @@ -1,8 +1,9 @@ +import React from 'react'; import { action } from '@storybook/addon-actions'; import type { Meta, StoryObj } from '@storybook/react'; import { SaveStory } from './SaveStory'; -import { expect, fireEvent, fn, userEvent, waitFor, within } from '@storybook/test'; +import { expect, fireEvent, fn, userEvent, within } from '@storybook/test'; const meta = { component: SaveStory, @@ -14,6 +15,13 @@ const meta = { parameters: { layout: 'fullscreen', }, + decorators: [ + (Story) => ( +
+ +
+ ), + ], } satisfies Meta; export default meta; @@ -25,6 +33,7 @@ export const Creating = { play: async ({ canvasElement }) => { const createButton = await within(canvasElement).findByRole('button', { name: /Create/i }); await fireEvent.click(createButton); + await new Promise((resolve) => setTimeout(resolve, 300)); }, } satisfies Story; @@ -32,16 +41,12 @@ export const Created: Story = { play: async (context) => { await Creating.play(context); - await waitFor(async () => { - const dialog = await within(document.body).findByRole('dialog'); - const input = await within(dialog).findByRole('textbox'); - await userEvent.type(input, 'MyNewStory'); - const submitButton = await within(dialog).findByRole('button', { name: /Create/i }); - await userEvent.click(submitButton); - }); - await waitFor(async () => { - await expect(context.args.createStory).toHaveBeenCalledWith('MyNewStory'); - }); + const dialog = await within(document.body).findByRole('dialog'); + const input = await within(dialog).findByRole('textbox'); + await userEvent.type(input, 'MyNewStory'); + + fireEvent.submit(dialog.getElementsByTagName('form')[0]); + await expect(context.args.createStory).toHaveBeenCalledWith('MyNewStory'); }, }; From 9077f9e972f16e3cd86513bac684019ee4771f57 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 19 Apr 2024 15:34:39 +0200 Subject: [PATCH 285/380] Move icons to FileSearchList --- .../manager/src/components/sidebar/FileList.tsx | 13 +------------ .../src/components/sidebar/FileSearchList.tsx | 17 ++++++++++++++--- 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/code/ui/manager/src/components/sidebar/FileList.tsx b/code/ui/manager/src/components/sidebar/FileList.tsx index 0e242d528076..a0b516aaf487 100644 --- a/code/ui/manager/src/components/sidebar/FileList.tsx +++ b/code/ui/manager/src/components/sidebar/FileList.tsx @@ -1,3 +1,4 @@ +import type { StyledComponent } from '@storybook/theming'; import { styled } from '@storybook/theming'; import { rgba } from 'polished'; import { ChevronDownIcon, ChevronRightIcon, ComponentIcon } from '@storybook/icons'; @@ -193,18 +194,6 @@ export const FileListItemExportNameContent = styled('span')(({ theme }) => ({ display: 'inline-block', })); -export const ChevronRightIconStyled = styled(ChevronRightIcon)(({ theme }) => ({ - display: 'none', - alignSelf: 'center', - color: theme.color.mediumdark, -})); - -export const ChevronDownIconStyled = styled(ChevronDownIcon)(({ theme }) => ({ - display: 'none', - alignSelf: 'center', - color: theme.color.mediumdark, -})); - export const DefaultExport = styled('span')(({ theme }) => ({ display: 'inline-block', padding: `1px ${theme.appBorderRadius}px`, diff --git a/code/ui/manager/src/components/sidebar/FileSearchList.tsx b/code/ui/manager/src/components/sidebar/FileSearchList.tsx index 0319e73b9ba1..261dbb04850d 100644 --- a/code/ui/manager/src/components/sidebar/FileSearchList.tsx +++ b/code/ui/manager/src/components/sidebar/FileSearchList.tsx @@ -1,9 +1,8 @@ import React, { memo, useCallback, useLayoutEffect, useMemo, useState } from 'react'; -import { ComponentIcon } from '@storybook/icons'; +import { ChevronDownIcon, ChevronRightIcon, ComponentIcon } from '@storybook/icons'; +import { styled } from '@storybook/theming'; import { FileSearchListLoadingSkeleton } from './FileSearchListSkeleton'; import { - ChevronDownIconStyled, - ChevronRightIconStyled, DefaultExport, FileList, FileListExport, @@ -33,6 +32,18 @@ export interface NewStoryPayload extends CreateNewStoryPayload { selectedItemId: string | number; } +const ChevronRightIconStyled = styled(ChevronRightIcon)(({ theme }) => ({ + display: 'none', + alignSelf: 'center', + color: theme.color.mediumdark, +})); + +const ChevronDownIconStyled = styled(ChevronDownIcon)(({ theme }) => ({ + display: 'none', + alignSelf: 'center', + color: theme.color.mediumdark, +})); + interface FileSearchListProps { isLoading: boolean; searchResults: Array | null; From f29966ece1f4313040b9e3a11e76ab1ef78c1c7d Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 19 Apr 2024 16:12:44 +0200 Subject: [PATCH 286/380] Fix test --- .../core-server/src/server-channel/file-search-channel.test.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/code/lib/core-server/src/server-channel/file-search-channel.test.ts b/code/lib/core-server/src/server-channel/file-search-channel.test.ts index d1138d7bb3c9..4b2954ac0514 100644 --- a/code/lib/core-server/src/server-channel/file-search-channel.test.ts +++ b/code/lib/core-server/src/server-channel/file-search-channel.test.ts @@ -97,6 +97,7 @@ describe('file-search-channel', () => { }, ], filepath: 'src/es-module.js', + storyFileExists: false, }, ], searchQuery: 'es-module', From 1378113c19a188603e0ed2adfdc189a69ac8ae2d Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 19 Apr 2024 16:44:11 +0200 Subject: [PATCH 287/380] Retrigger search after succefull story creation --- .../src/components/sidebar/CreateNewStoryFileModal.tsx | 8 +++++++- .../src/components/sidebar/FileSearchModal.utils.tsx | 7 +++++-- 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/code/ui/manager/src/components/sidebar/CreateNewStoryFileModal.tsx b/code/ui/manager/src/components/sidebar/CreateNewStoryFileModal.tsx index b4dfb3e79ecd..d0902cd43556 100644 --- a/code/ui/manager/src/components/sidebar/CreateNewStoryFileModal.tsx +++ b/code/ui/manager/src/components/sidebar/CreateNewStoryFileModal.tsx @@ -181,6 +181,7 @@ export const CreateNewStoryFileModal = ({ open, onOpenChange }: CreateNewStoryFi } handleSuccessfullyCreatedStory(componentExportName); + handleFileSearch(); } else { setError({ selectedItemId: selectedItemId, error: createNewStoryResult.error }); } @@ -188,7 +189,12 @@ export const CreateNewStoryFileModal = ({ open, onOpenChange }: CreateNewStoryFi handleErrorWhenCreatingStory(); } }, - [api, handleSuccessfullyCreatedStory, handleErrorWhenCreatingStory] + [ + api.selectStory, + handleSuccessfullyCreatedStory, + handleFileSearch, + handleErrorWhenCreatingStory, + ] ); useEffect(() => { diff --git a/code/ui/manager/src/components/sidebar/FileSearchModal.utils.tsx b/code/ui/manager/src/components/sidebar/FileSearchModal.utils.tsx index d53adde3059c..dd1a4c9aec1e 100644 --- a/code/ui/manager/src/components/sidebar/FileSearchModal.utils.tsx +++ b/code/ui/manager/src/components/sidebar/FileSearchModal.utils.tsx @@ -17,8 +17,11 @@ export function extractSeededRequiredArgs(argTypes: ArgTypes) { break; case 'union': case 'enum': - case 'intersection': - if ('value' in argType.type) { + const valueName = (argType.type.value?.[0] as any).name; + if ( + 'value' in argType.type && + (valueName === 'string' || valueName === 'number' || valueName === 'boolean') + ) { acc[key] = argType.type.value[0]; } break; From 2e5a457b2fbae98e8d6f263ac43850ac01e169e3 Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Fri, 19 Apr 2024 17:07:11 +0200 Subject: [PATCH 288/380] Fix modal snapshot --- .../src/components/Modal/Modal.stories.tsx | 69 ++++++++++++------- 1 file changed, 43 insertions(+), 26 deletions(-) diff --git a/code/ui/components/src/components/Modal/Modal.stories.tsx b/code/ui/components/src/components/Modal/Modal.stories.tsx index 20af542e2c31..658683e6368b 100644 --- a/code/ui/components/src/components/Modal/Modal.stories.tsx +++ b/code/ui/components/src/components/Modal/Modal.stories.tsx @@ -128,30 +128,47 @@ export const FixedWidthAndHeight: Story = { }, }; -export const StyledComponents = { - render: () => ( - - - - Hello - Lorem ipsum dolor sit amet. - - - - One - Two - - Right - - Another section - - - - - - - - Oops. Something went wrong. - - ), +export const StyledComponents: Story = { + args: { + ...Default.args, + width: 500, + }, + render: (props) => { + const [isOpen, setOpen] = useState(false); + + return ( + <> + + + + Hello + Lorem ipsum dolor sit amet. + + + + One + Two + + Right + + Another section + + + + + + + + Oops. Something went wrong. + + + + ); + }, + play: async ({ canvasElement }) => { + const canvas = within(canvasElement.parentElement!); + const button = canvas.getAllByText('Open modal')[0]; + await userEvent.click(button); + await expect(canvas.findByText('Hello')).resolves.toBeInTheDocument(); + }, }; From f2da3b41c6296ce280beadd8bf9b8ff108842480 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Fri, 19 Apr 2024 17:13:51 +0200 Subject: [PATCH 289/380] fix the test-runner-prod step --- scripts/tasks/test-runner-build.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/tasks/test-runner-build.ts b/scripts/tasks/test-runner-build.ts index 2dd783abaf00..9cecf1672120 100644 --- a/scripts/tasks/test-runner-build.ts +++ b/scripts/tasks/test-runner-build.ts @@ -13,7 +13,7 @@ export const testRunnerBuild: Task & { port: number } = { async run({ sandboxDir, junitFilename }, { dryRun, debug }) { const execOptions = { cwd: sandboxDir }; const flags = [ - `--url http://localhost:${this.port}`, + `--url http://127.0.0.1:${this.port}`, '--junit', '--maxWorkers=2', '--failOnConsole', From 3b959d3d237a9bd3fe684a873ce6a54fd7710074 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Fri, 19 Apr 2024 18:22:16 +0200 Subject: [PATCH 290/380] add logs to try and debug flakiness --- .../core-server/src/presets/common-manager.ts | 1 + code/lib/manager-api/src/index.tsx | 22 +++++++++++++--- code/lib/manager-api/src/lib/stories.ts | 4 +++ code/lib/manager-api/src/modules/stories.ts | 26 ++++++++++++++++++- code/ui/manager/src/container/Sidebar.tsx | 1 + 5 files changed, 49 insertions(+), 5 deletions(-) diff --git a/code/lib/core-server/src/presets/common-manager.ts b/code/lib/core-server/src/presets/common-manager.ts index 0564f8e00b92..138f6064fcce 100644 --- a/code/lib/core-server/src/presets/common-manager.ts +++ b/code/lib/core-server/src/presets/common-manager.ts @@ -17,6 +17,7 @@ addons.register(STATIC_FILTER, (api) => { {} as Record ); + console.log('Registering STATIC_FILTER'); api.experimental_setFilter(STATIC_FILTER, (item) => { const tags = item.tags || []; return tags.filter((tag) => excludeTags[tag]).length === 0; diff --git a/code/lib/manager-api/src/index.tsx b/code/lib/manager-api/src/index.tsx index fbb8b74a6420..baa1874f672d 100644 --- a/code/lib/manager-api/src/index.tsx +++ b/code/lib/manager-api/src/index.tsx @@ -167,12 +167,19 @@ class ManagerProvider extends Component { navigate, } = props; + console.log('creating store', this.state); const store = new Store({ getState: () => this.state, - setState: (stateChange: Partial, callback) => { - this.setState(stateChange, () => callback(this.state)); - - return this.state; + setState: async (stateChange: Partial, callback) => { + // attempting to turn this into async to fix timing issues + return new Promise((resolve) => { + console.log('calling setState with stateChange', stateChange); + this.setState(stateChange, () => { + console.log('calling the callback of setState with ', this.state); + callback(this.state); + resolve(this.state); + }); + }); }, }); @@ -181,12 +188,14 @@ class ManagerProvider extends Component { this.state = store.getInitialState(getInitialState({ ...routeData, ...optionsData })); + console.log('initializing with state:', this.state); const apiData = { navigate, store, provider: props.provider, }; + console.log('initializing modules'); this.modules = [ provider, channel, @@ -208,6 +217,10 @@ class ManagerProvider extends Component { // Create our initial state by combining the initial state of all modules, then overlaying any saved state const state = getInitialState(this.state, ...this.modules.map((m) => m.state!)); + console.log('overriding with with state:', { + before: getInitialState(this.state), + after: state, + }); // Get our API by combining the APIs exported by each module const api: API = Object.assign(this.api, { navigate }, ...this.modules.map((m) => m.api)); @@ -217,6 +230,7 @@ class ManagerProvider extends Component { static getDerivedStateFromProps(props: ManagerProviderProps, state: State): State { if (state.path !== props.path) { + console.log('derived state is:', state); return { ...state, location: props.location, diff --git a/code/lib/manager-api/src/lib/stories.ts b/code/lib/manager-api/src/lib/stories.ts index 9d6b1817e677..ab52462f3827 100644 --- a/code/lib/manager-api/src/lib/stories.ts +++ b/code/lib/manager-api/src/lib/stories.ts @@ -162,6 +162,10 @@ export const transformStoryIndexToStoriesHash = ( const entryValues = Object.values(index.entries).filter((entry: any) => { let result = true; + console.log( + 'Time to filter out the index - ' + + (Object.keys(filters).length > 0 ? 'and there is a filter' : 'but there is no filter') + ); Object.values(filters).forEach((filter: any) => { if (result === false) { return; diff --git a/code/lib/manager-api/src/modules/stories.ts b/code/lib/manager-api/src/modules/stories.ts index 78c3307f179f..c8861f64f720 100644 --- a/code/lib/manager-api/src/modules/stories.ts +++ b/code/lib/manager-api/src/modules/stories.ts @@ -533,6 +533,7 @@ export const init: ModuleFn = ({ return; } + console.log('calling api.setIndex from api.fetchIndex'); await api.setIndex(storyIndex); } catch (err: any) { await store.setState({ indexError: err }); @@ -543,6 +544,12 @@ export const init: ModuleFn = ({ // so we can cast one to the other easily enough setIndex: async (input) => { const { index: oldHash, status, filters } = store.getState(); + console.log( + `api.setIndex calling transformStoryIndexToStoriesHash with ${ + Object.keys(filters).length + } filters` + ); + const newHash = transformStoryIndexToStoriesHash(input, { provider, docsOptions, @@ -639,6 +646,7 @@ export const init: ModuleFn = ({ if (index) { // We need to re-prepare the index + console.log('calling api.setIndex from experimental_updateStatus'); await api.setIndex(index); const refs = await fullAPI.getRefs(); @@ -649,9 +657,15 @@ export const init: ModuleFn = ({ }, experimental_setFilter: async (id, filterFunction) => { const { internal_index: index } = store.getState(); + console.log('experimental_setFilter inner function', { + index, + filters: store.getState().filters, + filterFunction, + }); await store.setState({ filters: { ...store.getState().filters, [id]: filterFunction } }); if (index) { + console.log('calling api.setIndex from experimental_setFilter'); await api.setIndex(index); const refs = await fullAPI.getRefs(); @@ -781,6 +795,7 @@ export const init: ModuleFn = ({ const { ref } = getEventMetadata(this, fullAPI)!; if (!ref) { + console.log('calling api.setIndex from SET_INDEX listener when there is no ref'); api.setIndex(index); const options = api.getCurrentParameter('options'); fullAPI.setOptions(removeRemovedOptions(options!)); @@ -855,7 +870,9 @@ export const init: ModuleFn = ({ provider.channel?.on(SET_CONFIG, () => { const config = provider.getConfig(); + console.log('getting config'); if (config?.sidebar?.filters) { + console.log("there are filters, let's set them"); store.setState({ filters: { ...store.getState().filters, @@ -867,6 +884,7 @@ export const init: ModuleFn = ({ const config = provider.getConfig(); + console.log('setting initial state'); return { api, state: { @@ -878,8 +896,14 @@ export const init: ModuleFn = ({ filters: config?.sidebar?.filters || {}, }, init: async () => { - provider.channel?.on(STORY_INDEX_INVALIDATED, () => api.fetchIndex()); + provider.channel?.on(STORY_INDEX_INVALIDATED, () => { + console.log('calling api.fetchIndex from STORY_INDEX_INVALIDATED event'); + api.fetchIndex(); + }); + + console.log('calling api.fetchIndex from stories module init - started'); await api.fetchIndex(); + console.log('calling api.fetchIndex from stories module init - completed'); }, }; }; diff --git a/code/ui/manager/src/container/Sidebar.tsx b/code/ui/manager/src/container/Sidebar.tsx index 21d9cf09ef6c..6bbe2e1f1a83 100755 --- a/code/ui/manager/src/container/Sidebar.tsx +++ b/code/ui/manager/src/container/Sidebar.tsx @@ -49,6 +49,7 @@ const Sidebar = React.memo(function Sideber({ onMenuClick }: SidebarProps) { // eslint-disable-next-line react-hooks/exhaustive-deps const top = useMemo(() => Object.values(topItems), [Object.keys(topItems).join('')]); + console.log('Sidebar context mapper - ', { indexCount: index ? Object.keys(index).length : 0 }); return { title: name, url, From a007256a7ec4be351d99fdf6392d91acbb87d87b Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 19 Apr 2024 22:09:27 +0200 Subject: [PATCH 291/380] WIP --- .../lib/core-events/src/data/argtypes-info.ts | 4 +- .../core-events/src/data/create-new-story.ts | 14 +- .../src/data/file-component-search.ts | 37 ++---- .../core-events/src/data/request-response.ts | 4 +- code/lib/core-events/src/data/save-story.ts | 32 ++--- .../create-new-story-channel.test.ts | 27 ++-- .../create-new-story-channel.ts | 68 +++++----- .../file-search-channel.test.ts | 27 ++-- .../src/server-channel/file-search-channel.ts | 120 ++++++++++-------- .../src/utils/get-new-story-file.ts | 8 +- .../src/utils/save-story/save-story.ts | 11 +- .../src/modules/preview-web/Preview.tsx | 1 + code/ui/manager/package.json | 1 + .../sidebar/CreateNewStoryFileModal.tsx | 72 ++++++----- .../src/components/sidebar/FileSearchList.tsx | 13 +- code/yarn.lock | 1 + 16 files changed, 235 insertions(+), 205 deletions(-) diff --git a/code/lib/core-events/src/data/argtypes-info.ts b/code/lib/core-events/src/data/argtypes-info.ts index c993c684768c..7013b986885d 100644 --- a/code/lib/core-events/src/data/argtypes-info.ts +++ b/code/lib/core-events/src/data/argtypes-info.ts @@ -1,8 +1,6 @@ import type { ArgTypes } from '@storybook/csf'; -export interface ArgTypesRequestPayload { - storyId: string; -} +export interface ArgTypesRequestPayload {} export interface ArgTypesResponsePayload { argTypes: ArgTypes; diff --git a/code/lib/core-events/src/data/create-new-story.ts b/code/lib/core-events/src/data/create-new-story.ts index 7c85817e0cfe..bc973019b7af 100644 --- a/code/lib/core-events/src/data/create-new-story.ts +++ b/code/lib/core-events/src/data/create-new-story.ts @@ -1,4 +1,4 @@ -export interface CreateNewStoryPayload { +export interface CreateNewStoryRequestPayload { // The filepath of the component for which the Story should be generated for (relative to the project root) componentFilePath: string; // The name of the exported component @@ -7,12 +7,8 @@ export interface CreateNewStoryPayload { componentIsDefaultExport: boolean; } -export interface CreateNewStoryResult { - success: true | false; - result: null | { - storyId: string; - storyFilePath: string; - exportedStoryName: string; - }; - error: null | string; +export interface CreateNewStoryResponsePayload { + storyId: string; + storyFilePath: string; + exportedStoryName: string; } diff --git a/code/lib/core-events/src/data/file-component-search.ts b/code/lib/core-events/src/data/file-component-search.ts index 7737155a155f..000ae3e3d4c9 100644 --- a/code/lib/core-events/src/data/file-component-search.ts +++ b/code/lib/core-events/src/data/file-component-search.ts @@ -1,26 +1,17 @@ -export interface FileComponentSearchPayload { - // A regular string or a glob pattern - searchQuery?: string; -} +export interface FileComponentSearchRequestPayload {} -export interface FileComponentSearchResult { - success: true | false; - result: null | { - // The search query - Helps to identify the event on the frontend - searchQuery: string; - files: Array<{ - // The filepath relative to the project root - filepath: string; - // Whether a corresponding story file exists - storyFileExists: boolean; - // A list of exported components - exportedComponents: Array<{ - // the name of the exported component - name: string; - // True, if the exported component is a default export - default: boolean; - }> | null; +export interface FileComponentSearchResponsePayload { + files: Array<{ + // The filepath relative to the project root + filepath: string; + // Whether a corresponding story file exists + storyFileExists: boolean; + // A list of exported components + exportedComponents: Array<{ + // the name of the exported component + name: string; + // True, if the exported component is a default export + default: boolean; }> | null; - }; - error: null | string; + }> | null; } diff --git a/code/lib/core-events/src/data/request-response.ts b/code/lib/core-events/src/data/request-response.ts index 7c4c0295b388..998ebcdc0f3d 100644 --- a/code/lib/core-events/src/data/request-response.ts +++ b/code/lib/core-events/src/data/request-response.ts @@ -4,5 +4,5 @@ export type RequestData = { }; export type ResponseData = - | { id: string; success: true; payload: Payload } - | { id: string; success: false; error?: string; payload?: Payload }; + | { id: string; success: true; error: null; payload: Payload } + | { id: string; success: false; error: string; payload: null }; diff --git a/code/lib/core-events/src/data/save-story.ts b/code/lib/core-events/src/data/save-story.ts index 47f7e1ab5d05..8dd4c009f044 100644 --- a/code/lib/core-events/src/data/save-story.ts +++ b/code/lib/core-events/src/data/save-story.ts @@ -1,22 +1,14 @@ -export interface SaveStoryRequest { - id: string; - payload: { - csfId: string; - importPath: string; - args: Record; - name?: string; - }; +export interface SaveStoryRequestPayload { + args: string | undefined; + csfId: string; + importPath: string; + name?: string; } -export type SaveStoryResponse = ( - | { id: string; success: true } - | { id: string; success: false; error: string } -) & { - payload: { - csfId: string; - newStoryId?: string; - newStoryName?: string; - sourceFileName?: string; - sourceStoryName?: string; - }; -}; +export interface SaveStoryResponsePayload { + csfId: string; + newStoryId?: string; + newStoryName?: string; + sourceFileName?: string; + sourceStoryName?: string; +} diff --git a/code/lib/core-server/src/server-channel/create-new-story-channel.test.ts b/code/lib/core-server/src/server-channel/create-new-story-channel.test.ts index e9eecaef8796..2414743be406 100644 --- a/code/lib/core-server/src/server-channel/create-new-story-channel.test.ts +++ b/code/lib/core-server/src/server-channel/create-new-story-channel.test.ts @@ -3,6 +3,7 @@ import { initCreateNewStoryChannel } from './create-new-story-channel'; import path from 'path'; import type { ChannelTransport } from '@storybook/channels'; import { Channel } from '@storybook/channels'; +import type { CreateNewStoryRequestPayload, RequestData } from '@storybook/core-events'; import { CREATE_NEW_STORYFILE_REQUEST, CREATE_NEW_STORYFILE_RESPONSE, @@ -63,9 +64,12 @@ describe('createNewStoryChannel', () => { } as any); mockChannel.emit(CREATE_NEW_STORYFILE_REQUEST, { - componentFilePath: 'src/components/Page.jsx', - componentExportName: 'Page', - componentIsDefaultExport: true, + id: 'components-page--default', + payload: { + componentFilePath: 'src/components/Page.jsx', + componentExportName: 'Page', + componentIsDefaultExport: true, + }, }); await vi.waitFor(() => { @@ -74,7 +78,8 @@ describe('createNewStoryChannel', () => { expect(createNewStoryFileEventListener).toHaveBeenCalledWith({ error: null, - result: { + id: 'components-page--default', + payload: { storyId: 'components-page--default', storyFilePath: './src/components/Page.stories.jsx', exportedStoryName: 'Default', @@ -106,10 +111,13 @@ describe('createNewStoryChannel', () => { } as any); mockChannel.emit(CREATE_NEW_STORYFILE_REQUEST, { - componentFilePath: 'src/components/Page.jsx', - componentExportName: 'Page', - componentIsDefaultExport: true, - }); + id: 'components-page--default', + payload: { + componentFilePath: 'src/components/Page.jsx', + componentExportName: 'Page', + componentIsDefaultExport: true, + }, + } satisfies RequestData); await vi.waitFor(() => { expect(createNewStoryFileEventListener).toHaveBeenCalled(); @@ -117,7 +125,8 @@ describe('createNewStoryChannel', () => { expect(createNewStoryFileEventListener).toHaveBeenCalledWith({ error: 'Failed to write file', - result: null, + payload: null, + id: 'components-page--default', success: false, }); }); diff --git a/code/lib/core-server/src/server-channel/create-new-story-channel.ts b/code/lib/core-server/src/server-channel/create-new-story-channel.ts index 2e5282fd311f..669598ad14a1 100644 --- a/code/lib/core-server/src/server-channel/create-new-story-channel.ts +++ b/code/lib/core-server/src/server-channel/create-new-story-channel.ts @@ -1,6 +1,11 @@ import type { Options } from '@storybook/types'; import type { Channel } from '@storybook/channels'; -import type { CreateNewStoryPayload, CreateNewStoryResult } from '@storybook/core-events'; +import type { + CreateNewStoryRequestPayload, + CreateNewStoryResponsePayload, + RequestData, + ResponseData, +} from '@storybook/core-events'; import { CREATE_NEW_STORYFILE_REQUEST, CREATE_NEW_STORYFILE_RESPONSE, @@ -15,40 +20,45 @@ export function initCreateNewStoryChannel(channel: Channel, options: Options) { /** * Listens for events to create a new storyfile */ - channel.on(CREATE_NEW_STORYFILE_REQUEST, async (data: CreateNewStoryPayload) => { - try { - const { storyFilePath, exportedStoryName, storyFileContent } = await getNewStoryFile( - data, - options - ); + channel.on( + CREATE_NEW_STORYFILE_REQUEST, + async (data: RequestData) => { + try { + const { storyFilePath, exportedStoryName, storyFileContent } = await getNewStoryFile( + data.payload, + options + ); - const relativeStoryFilePath = path.relative(process.cwd(), storyFilePath); + const relativeStoryFilePath = path.relative(process.cwd(), storyFilePath); - if (existsSync(storyFilePath)) { - throw new Error(`Story file already exists at .${path.sep}${relativeStoryFilePath}`); - } + if (existsSync(storyFilePath)) { + throw new Error(`Story file already exists at .${path.sep}${relativeStoryFilePath}`); + } - await fs.writeFile(storyFilePath, storyFileContent, 'utf-8'); + await fs.writeFile(storyFilePath, storyFileContent, 'utf-8'); - const storyId = await getStoryId({ storyFilePath, exportedStoryName }, options); + const storyId = await getStoryId({ storyFilePath, exportedStoryName }, options); - channel.emit(CREATE_NEW_STORYFILE_RESPONSE, { - success: true, - result: { - storyId, - storyFilePath: `./${relativeStoryFilePath}`, - exportedStoryName, - }, - error: null, - } satisfies CreateNewStoryResult); - } catch (e: any) { - channel.emit(CREATE_NEW_STORYFILE_RESPONSE, { - success: false, - result: null, - error: e?.message, - } satisfies CreateNewStoryResult); + channel.emit(CREATE_NEW_STORYFILE_RESPONSE, { + success: true, + id: storyId, + payload: { + storyId, + storyFilePath: `./${relativeStoryFilePath}`, + exportedStoryName, + }, + error: null, + } satisfies ResponseData); + } catch (e: any) { + channel.emit(CREATE_NEW_STORYFILE_RESPONSE, { + success: false, + id: data.id, + payload: null, + error: e?.message, + } satisfies ResponseData); + } } - }); + ); return channel; } diff --git a/code/lib/core-server/src/server-channel/file-search-channel.test.ts b/code/lib/core-server/src/server-channel/file-search-channel.test.ts index 4b2954ac0514..0b4295ee145f 100644 --- a/code/lib/core-server/src/server-channel/file-search-channel.test.ts +++ b/code/lib/core-server/src/server-channel/file-search-channel.test.ts @@ -1,5 +1,6 @@ import type { ChannelTransport } from '@storybook/channels'; import { Channel } from '@storybook/channels'; +import type { RequestData, FileComponentSearchRequestPayload } from '@storybook/core-events'; import { FILE_COMPONENT_SEARCH_RESPONSE, FILE_COMPONENT_SEARCH_REQUEST, @@ -51,7 +52,10 @@ describe('file-search-channel', () => { initFileSearchChannel(mockChannel, mockOptions as any); mockChannel.addListener(FILE_COMPONENT_SEARCH_RESPONSE, searchResultChannelListener); - mockChannel.emit(FILE_COMPONENT_SEARCH_REQUEST, data); + mockChannel.emit(FILE_COMPONENT_SEARCH_REQUEST, { + id: data.searchQuery, + payload: {}, + } satisfies RequestData); mocks.searchFiles.mockImplementation(async (...args) => { // @ts-expect-error Ignore type issue @@ -66,8 +70,9 @@ describe('file-search-channel', () => { ); expect(searchResultChannelListener).toHaveBeenCalledWith({ + id: data.searchQuery, error: null, - result: { + payload: { files: [ { exportedComponents: [ @@ -100,7 +105,6 @@ describe('file-search-channel', () => { storyFileExists: false, }, ], - searchQuery: 'es-module', }, success: true, }); @@ -113,7 +117,10 @@ describe('file-search-channel', () => { initFileSearchChannel(mockChannel, mockOptions as any); mockChannel.addListener(FILE_COMPONENT_SEARCH_RESPONSE, searchResultChannelListener); - mockChannel.emit(FILE_COMPONENT_SEARCH_REQUEST, data); + mockChannel.emit(FILE_COMPONENT_SEARCH_REQUEST, { + id: data.searchQuery, + payload: {}, + } satisfies RequestData); mocks.searchFiles.mockImplementation(async (...args) => { // @ts-expect-error Ignore type issue @@ -128,10 +135,10 @@ describe('file-search-channel', () => { ); expect(searchResultChannelListener).toHaveBeenCalledWith({ + id: data.searchQuery, error: null, - result: { + payload: { files: [], - searchQuery: 'no-file-for-search-query', }, success: true, }); @@ -145,7 +152,10 @@ describe('file-search-channel', () => { mockChannel.addListener(FILE_COMPONENT_SEARCH_RESPONSE, searchResultChannelListener); - mockChannel.emit(FILE_COMPONENT_SEARCH_REQUEST, data); + mockChannel.emit(FILE_COMPONENT_SEARCH_REQUEST, { + id: data.searchQuery, + payload: {}, + } satisfies RequestData); mocks.searchFiles.mockRejectedValue(new Error('ENOENT: no such file or directory')); @@ -154,9 +164,10 @@ describe('file-search-channel', () => { }); expect(searchResultChannelListener).toHaveBeenCalledWith({ + id: data.searchQuery, + payload: null, error: 'An error occurred while searching for components in the project.\nENOENT: no such file or directory', - result: null, success: false, }); }); diff --git a/code/lib/core-server/src/server-channel/file-search-channel.ts b/code/lib/core-server/src/server-channel/file-search-channel.ts index 0522dd59a55b..007091d222d0 100644 --- a/code/lib/core-server/src/server-channel/file-search-channel.ts +++ b/code/lib/core-server/src/server-channel/file-search-channel.ts @@ -11,7 +11,12 @@ import { existsSync } from 'fs'; import { getParser } from '../utils/parser'; import { searchFiles } from '../utils/search-files'; -import type { FileComponentSearchPayload, FileComponentSearchResult } from '@storybook/core-events'; +import type { + FileComponentSearchRequestPayload, + FileComponentSearchResponsePayload, + RequestData, + ResponseData, +} from '@storybook/core-events'; import { FILE_COMPONENT_SEARCH_REQUEST, FILE_COMPONENT_SEARCH_RESPONSE, @@ -22,71 +27,74 @@ export function initFileSearchChannel(channel: Channel, options: Options) { /** * Listens for a search query event and searches for files in the project */ - channel.on(FILE_COMPONENT_SEARCH_REQUEST, async (data: FileComponentSearchPayload) => { - try { - const searchQuery = data?.searchQuery; - - if (!searchQuery) { - return; - } + channel.on( + FILE_COMPONENT_SEARCH_REQUEST, + async (data: RequestData) => { + const searchQuery = data.id; + try { + if (!searchQuery) { + return; + } - const frameworkName = await getFrameworkName(options); + const frameworkName = await getFrameworkName(options); - const rendererName = (await extractProperRendererNameFromFramework( - frameworkName - )) as SupportedRenderers; + const rendererName = (await extractProperRendererNameFromFramework( + frameworkName + )) as SupportedRenderers; - const projectRoot = getProjectRoot(); + const projectRoot = getProjectRoot(); - const files = await searchFiles({ - searchQuery, - cwd: projectRoot, - }); + const files = await searchFiles({ + searchQuery, + cwd: projectRoot, + }); - const entries = files.map(async (file) => { - const parser = getParser(rendererName); + const entries = files.map(async (file) => { + const parser = getParser(rendererName); - try { - const content = await fs.readFile(path.join(projectRoot, file), 'utf-8'); - const { storyFileName } = getStoryMetadata(path.join(projectRoot, file)); - const dirname = path.dirname(file); + try { + const content = await fs.readFile(path.join(projectRoot, file), 'utf-8'); + const { storyFileName } = getStoryMetadata(path.join(projectRoot, file)); + const dirname = path.dirname(file); - const storyFileExists = existsSync(path.join(projectRoot, dirname, storyFileName)); - const info = await parser.parse(content); + const storyFileExists = existsSync(path.join(projectRoot, dirname, storyFileName)); + const info = await parser.parse(content); - return { - filepath: file, - exportedComponents: info.exports, - storyFileExists, - }; - } catch (e) { - return { - filepath: file, - storyFileExists: false, - exportedComponents: null, - }; - } - }); + return { + filepath: file, + exportedComponents: info.exports, + storyFileExists, + }; + } catch (e) { + return { + filepath: file, + storyFileExists: false, + exportedComponents: null, + }; + } + }); - channel.emit(FILE_COMPONENT_SEARCH_RESPONSE, { - success: true, - result: { - searchQuery, - files: await Promise.all(entries), - }, - error: null, - } satisfies FileComponentSearchResult); - } catch (e: any) { - /** - * Emits the search result event with an error message - */ - channel.emit(FILE_COMPONENT_SEARCH_RESPONSE, { - success: false, - result: null, - error: `An error occurred while searching for components in the project.\n${e?.message}`, - } satisfies FileComponentSearchResult); + channel.emit(FILE_COMPONENT_SEARCH_RESPONSE, { + success: true, + id: searchQuery, + payload: { + files: await Promise.all(entries), + }, + error: null, + } satisfies ResponseData); + } catch (e: any) { + /** + * Emits the search result event with an error message + */ + channel.emit(FILE_COMPONENT_SEARCH_RESPONSE, { + success: false, + id: searchQuery ?? '', + payload: null, + error: `An error occurred while searching for components in the project.\n${e?.message}`, + } satisfies ResponseData); + } } - }); + ); return channel; } diff --git a/code/lib/core-server/src/utils/get-new-story-file.ts b/code/lib/core-server/src/utils/get-new-story-file.ts index d402f8de5924..2839368975f5 100644 --- a/code/lib/core-server/src/utils/get-new-story-file.ts +++ b/code/lib/core-server/src/utils/get-new-story-file.ts @@ -9,10 +9,14 @@ import path from 'node:path'; import fs from 'node:fs'; import { getTypeScriptTemplateForNewStoryFile } from './new-story-templates/typescript'; import { getJavaScriptTemplateForNewStoryFile } from './new-story-templates/javascript'; -import type { CreateNewStoryPayload } from '@storybook/core-events'; +import type { CreateNewStoryRequestPayload } from '@storybook/core-events'; export async function getNewStoryFile( - { componentFilePath, componentExportName, componentIsDefaultExport }: CreateNewStoryPayload, + { + componentFilePath, + componentExportName, + componentIsDefaultExport, + }: CreateNewStoryRequestPayload, options: Options ) { const cwd = getProjectRoot(); diff --git a/code/lib/core-server/src/utils/save-story/save-story.ts b/code/lib/core-server/src/utils/save-story/save-story.ts index c87dc5ce131b..506be3147439 100644 --- a/code/lib/core-server/src/utils/save-story/save-story.ts +++ b/code/lib/core-server/src/utils/save-story/save-story.ts @@ -112,6 +112,7 @@ export function initializeSaveStory(channel: Channel, options: Options, coreConf sourceFileName, sourceStoryName, }, + error: null, } satisfies ResponseData); if (!coreConfig.disableTelemetry) { @@ -124,14 +125,8 @@ export function initializeSaveStory(channel: Channel, options: Options, coreConf channel.emit(SAVE_STORY_RESPONSE, { id, success: false, - error: error instanceof SaveStoryError ? error.message : undefined, - payload: { - csfId, - newStoryId, - newStoryName, - sourceFileName, - sourceStoryName, - }, + error: error instanceof SaveStoryError ? error.message : 'Unknown error', + payload: null, } satisfies ResponseData); logger.error( diff --git a/code/lib/preview-api/src/modules/preview-web/Preview.tsx b/code/lib/preview-api/src/modules/preview-web/Preview.tsx index 40596f6e1f21..ee4524c32ecf 100644 --- a/code/lib/preview-api/src/modules/preview-web/Preview.tsx +++ b/code/lib/preview-api/src/modules/preview-web/Preview.tsx @@ -312,6 +312,7 @@ export class Preview { id, success: true, payload: { argTypes: story?.argTypes || {} }, + error: null, } satisfies ResponseData); } catch (e: any) { this.channel.emit(ARGTYPES_INFO_RESPONSE, { diff --git a/code/ui/manager/package.json b/code/ui/manager/package.json index 4389243ad4b9..0c8e86d7bdaa 100644 --- a/code/ui/manager/package.json +++ b/code/ui/manager/package.json @@ -108,6 +108,7 @@ "resolve-from": "^5.0.0", "semver": "^7.3.7", "store2": "^2.14.2", + "telejson": "^7.2.0", "ts-dedent": "^2.0.0", "typescript": "^5.3.2" }, diff --git a/code/ui/manager/src/components/sidebar/CreateNewStoryFileModal.tsx b/code/ui/manager/src/components/sidebar/CreateNewStoryFileModal.tsx index d0902cd43556..6c0c6c3c0f68 100644 --- a/code/ui/manager/src/components/sidebar/CreateNewStoryFileModal.tsx +++ b/code/ui/manager/src/components/sidebar/CreateNewStoryFileModal.tsx @@ -1,14 +1,17 @@ import React, { useCallback, useDeferredValue, useEffect, useRef, useState } from 'react'; import { AlertIcon, CheckIcon } from '@storybook/icons'; +import { stringify } from 'telejson'; import type { - ArgTypesInfoPayload, - ArgTypesInfoResult, - CreateNewStoryPayload, - CreateNewStoryResult, - FileComponentSearchPayload, - FileComponentSearchResult, - SaveStoryRequest, - SaveStoryResponse, + ArgTypesRequestPayload, + ArgTypesResponsePayload, + CreateNewStoryRequestPayload, + CreateNewStoryResponsePayload, + FileComponentSearchRequestPayload, + FileComponentSearchResponsePayload, + RequestData, + ResponseData, + SaveStoryRequestPayload, + SaveStoryResponsePayload, } from '@storybook/core-events'; import { ARGTYPES_INFO_REQUEST, @@ -81,13 +84,12 @@ export const CreateNewStoryFileModal = ({ open, onOpenChange }: CreateNewStoryFi setLoading(true); const channel = addons.getChannel(); - const set = (data: FileComponentSearchResult) => { - const isLatestRequest = - data.result?.searchQuery === fileSearchQueryDeferred && data.result.files; + const set = (data: ResponseData) => { + const isLatestRequest = data.id === fileSearchQueryDeferred && data.payload.files; if (data.success) { if (isLatestRequest) { - setSearchResults(data.result.files); + setSearchResults(data.payload.files); } } else { setError({ error: data.error }); @@ -105,8 +107,9 @@ export const CreateNewStoryFileModal = ({ open, onOpenChange }: CreateNewStoryFi if (fileSearchQueryDeferred !== '' && emittedValue.current !== fileSearchQueryDeferred) { emittedValue.current = fileSearchQueryDeferred; channel.emit(FILE_COMPONENT_SEARCH_REQUEST, { - searchQuery: fileSearchQueryDeferred, - } satisfies FileComponentSearchPayload); + id: fileSearchQueryDeferred, + payload: {}, + } satisfies RequestData); } else { setSearchResults(null); setLoading(false); @@ -127,51 +130,58 @@ export const CreateNewStoryFileModal = ({ open, onOpenChange }: CreateNewStoryFi try { const channel = addons.getChannel(); - const createNewStoryResult = await oncePromise( - { - channel, - request: { - name: CREATE_NEW_STORYFILE_REQUEST, + const createNewStoryResult = await oncePromise< + CreateNewStoryRequestPayload, + CreateNewStoryResponsePayload + >({ + channel, + request: { + name: CREATE_NEW_STORYFILE_REQUEST, + payload: { + id: `${selectedItemId}`, payload: { componentExportName, componentFilePath, componentIsDefaultExport, }, }, - resolveEvent: CREATE_NEW_STORYFILE_RESPONSE, - } - ); + }, + resolveEvent: CREATE_NEW_STORYFILE_RESPONSE, + }); if (createNewStoryResult.success) { setError(null); - const storyId = createNewStoryResult.result.storyId; + const storyId = createNewStoryResult.payload.storyId; await trySelectNewStory(api.selectStory, storyId); - const argTypesInfoResult = await oncePromise({ + const argTypesInfoResult = await oncePromise< + ArgTypesRequestPayload, + ArgTypesResponsePayload + >({ channel, request: { name: ARGTYPES_INFO_REQUEST, - payload: { storyId }, + payload: { id: storyId, payload: {} }, }, resolveEvent: ARGTYPES_INFO_RESPONSE, }); if (argTypesInfoResult.success) { - const argTypes = argTypesInfoResult.result.argTypes; + const argTypes = argTypesInfoResult.payload.argTypes; const requiredArgs = extractSeededRequiredArgs(argTypes); - await oncePromise({ + await oncePromise({ channel, request: { name: SAVE_STORY_REQUEST, payload: { id: storyId, payload: { - args: requiredArgs, - importPath: createNewStoryResult.result.storyFilePath, + args: stringify(requiredArgs), + importPath: createNewStoryResult.payload.storyFilePath, csfId: storyId, }, }, @@ -234,9 +244,9 @@ function oncePromise({ channel, request, resolveEvent, -}: OncePromiseOptions): Promise { +}: OncePromiseOptions>): Promise> { return new Promise((resolve, reject) => { - channel.once(resolveEvent, (data: Result) => { + channel.once(resolveEvent, (data: ResponseData) => { resolve(data); }); diff --git a/code/ui/manager/src/components/sidebar/FileSearchList.tsx b/code/ui/manager/src/components/sidebar/FileSearchList.tsx index 261dbb04850d..4025b6bf169c 100644 --- a/code/ui/manager/src/components/sidebar/FileSearchList.tsx +++ b/code/ui/manager/src/components/sidebar/FileSearchList.tsx @@ -23,12 +23,16 @@ import { } from './FileList'; import type { VirtualItem } from '@tanstack/react-virtual'; import { useVirtualizer } from '@tanstack/react-virtual'; -import type { CreateNewStoryPayload, FileComponentSearchResult } from '@storybook/core-events'; +import type { + CreateNewStoryRequestPayload, + FileComponentSearchResponsePayload, + ResponseData, +} from '@storybook/core-events'; import { WithTooltip, TooltipNote } from '@storybook/components'; -export type SearchResult = FileComponentSearchResult['result']['files'][0]; +export type SearchResult = ResponseData['payload']['files'][0]; -export interface NewStoryPayload extends CreateNewStoryPayload { +export interface NewStoryPayload extends CreateNewStoryRequestPayload { selectedItemId: string | number; } @@ -55,7 +59,6 @@ interface FileItemContentProps { virtualItem: VirtualItem; selected: number | null; searchResult: SearchResult; - as?: 'div'; } interface FileItemSelectionPayload { @@ -156,7 +159,7 @@ export const FileSearchList = memo(function FileSearchList({ ); const ListItem = useCallback( - ({ virtualItem, selected, searchResult, as }: FileItemContentProps) => { + ({ virtualItem, selected, searchResult }: FileItemContentProps) => { const itemError = errorItemId === searchResult.filepath; const itemSelected = selected === virtualItem.index; diff --git a/code/yarn.lock b/code/yarn.lock index f1ab6c38976d..f033288f0024 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -6136,6 +6136,7 @@ __metadata: resolve-from: "npm:^5.0.0" semver: "npm:^7.3.7" store2: "npm:^2.14.2" + telejson: "npm:^7.2.0" ts-dedent: "npm:^2.0.0" typescript: "npm:^5.3.2" languageName: unknown From 3cf984672053bd51d73c2e10043b7f64e05df018 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Sat, 20 Apr 2024 22:11:21 +0200 Subject: [PATCH 292/380] Finalize Create New Story File feature --- code/addons/controls/src/manager.tsx | 50 ++++--- .../lib/core-events/src/data/argtypes-info.ts | 4 +- .../core-events/src/data/create-new-story.ts | 2 + .../create-new-story-channel.ts | 5 +- .../src/utils/get-new-story-file.ts | 12 +- .../manager-api/src/lib/request-response.ts | 4 +- .../src/modules/preview-web/Preview.tsx | 1 + .../sidebar/CreateNewStoryFileModal.tsx | 125 ++++++------------ .../src/components/sidebar/FileSearchList.tsx | 2 + .../sidebar/FileSearchModal.utils.tsx | 8 +- .../sidebar/IconSymbols.stories.tsx | 13 ++ 11 files changed, 98 insertions(+), 128 deletions(-) create mode 100644 code/ui/manager/src/components/sidebar/IconSymbols.stories.tsx diff --git a/code/addons/controls/src/manager.tsx b/code/addons/controls/src/manager.tsx index 7c7ba68f1133..d7195cd544e1 100644 --- a/code/addons/controls/src/manager.tsx +++ b/code/addons/controls/src/manager.tsx @@ -47,22 +47,20 @@ addons.register(ADDON_ID, (api) => { if (data.type !== 'story') throw new Error('Not a story'); try { - const response = await experimental_requestResponse( - channel, - SAVE_STORY_REQUEST, - SAVE_STORY_RESPONSE, - { - // Only send updated args - args: stringifyArgs( - Object.entries(data.args || {}).reduce((acc, [key, value]) => { - if (!deepEqual(value, data.initialArgs?.[key])) acc[key] = value; - return acc; - }, {}) - ), - csfId: data.id, - importPath: data.importPath, - } satisfies SaveStoryRequestPayload - ); + const response = await experimental_requestResponse< + SaveStoryRequestPayload, + SaveStoryResponsePayload + >(channel, SAVE_STORY_REQUEST, SAVE_STORY_RESPONSE, { + // Only send updated args + args: stringifyArgs( + Object.entries(data.args || {}).reduce((acc, [key, value]) => { + if (!deepEqual(value, data.initialArgs?.[key])) acc[key] = value; + return acc; + }, {}) + ), + csfId: data.id, + importPath: data.importPath, + }); api.addNotification({ id: 'save-story-success', @@ -96,17 +94,15 @@ addons.register(ADDON_ID, (api) => { const data = api.getCurrentStoryData(); if (data.type !== 'story') throw new Error('Not a story'); - const response = await experimental_requestResponse( - channel, - SAVE_STORY_REQUEST, - SAVE_STORY_RESPONSE, - { - args: data.args && stringifyArgs(data.args), - csfId: data.id, - importPath: data.importPath, - name, - } satisfies SaveStoryRequestPayload - ); + const response = await experimental_requestResponse< + SaveStoryRequestPayload, + SaveStoryResponsePayload + >(channel, SAVE_STORY_REQUEST, SAVE_STORY_RESPONSE, { + args: data.args && stringifyArgs(data.args), + csfId: data.id, + importPath: data.importPath, + name, + }); api.addNotification({ id: 'save-story-success', diff --git a/code/lib/core-events/src/data/argtypes-info.ts b/code/lib/core-events/src/data/argtypes-info.ts index 7013b986885d..c993c684768c 100644 --- a/code/lib/core-events/src/data/argtypes-info.ts +++ b/code/lib/core-events/src/data/argtypes-info.ts @@ -1,6 +1,8 @@ import type { ArgTypes } from '@storybook/csf'; -export interface ArgTypesRequestPayload {} +export interface ArgTypesRequestPayload { + storyId: string; +} export interface ArgTypesResponsePayload { argTypes: ArgTypes; diff --git a/code/lib/core-events/src/data/create-new-story.ts b/code/lib/core-events/src/data/create-new-story.ts index bc973019b7af..1443e8234f56 100644 --- a/code/lib/core-events/src/data/create-new-story.ts +++ b/code/lib/core-events/src/data/create-new-story.ts @@ -5,6 +5,8 @@ export interface CreateNewStoryRequestPayload { componentExportName: string; // is default export componentIsDefaultExport: boolean; + // The amount of exports in the file + componentExportCount: number; } export interface CreateNewStoryResponsePayload { diff --git a/code/lib/core-server/src/server-channel/create-new-story-channel.ts b/code/lib/core-server/src/server-channel/create-new-story-channel.ts index 669598ad14a1..f003cb54a0cb 100644 --- a/code/lib/core-server/src/server-channel/create-new-story-channel.ts +++ b/code/lib/core-server/src/server-channel/create-new-story-channel.ts @@ -15,6 +15,7 @@ import { existsSync } from 'node:fs'; import { getNewStoryFile } from '../utils/get-new-story-file'; import { getStoryId } from '../utils/get-story-id'; import path from 'node:path'; +import { getProjectRoot } from '@storybook/core-common'; export function initCreateNewStoryChannel(channel: Channel, options: Options) { /** @@ -29,7 +30,7 @@ export function initCreateNewStoryChannel(channel: Channel, options: Options) { options ); - const relativeStoryFilePath = path.relative(process.cwd(), storyFilePath); + const relativeStoryFilePath = path.relative(getProjectRoot(), storyFilePath); if (existsSync(storyFilePath)) { throw new Error(`Story file already exists at .${path.sep}${relativeStoryFilePath}`); @@ -41,7 +42,7 @@ export function initCreateNewStoryChannel(channel: Channel, options: Options) { channel.emit(CREATE_NEW_STORYFILE_RESPONSE, { success: true, - id: storyId, + id: data.id, payload: { storyId, storyFilePath: `./${relativeStoryFilePath}`, diff --git a/code/lib/core-server/src/utils/get-new-story-file.ts b/code/lib/core-server/src/utils/get-new-story-file.ts index 2839368975f5..be03c48d8e35 100644 --- a/code/lib/core-server/src/utils/get-new-story-file.ts +++ b/code/lib/core-server/src/utils/get-new-story-file.ts @@ -16,6 +16,7 @@ export async function getNewStoryFile( componentFilePath, componentExportName, componentIsDefaultExport, + componentExportCount, }: CreateNewStoryRequestPayload, options: Options ) { @@ -54,13 +55,14 @@ export async function getNewStoryFile( exportedStoryName, }); - const doesStoryFileExist = fs.existsSync(path.join(cwd, storyFileName)); + const doesStoryFileExist = fs.existsSync(path.join(cwd, dirname, storyFileName)); - const storyFilePath = doesStoryFileExist - ? path.join(cwd, dirname, alternativeStoryFileName) - : path.join(cwd, dirname, storyFileName); + const storyFilePath = + doesStoryFileExist && componentExportCount > 1 + ? path.join(cwd, dirname, alternativeStoryFileName) + : path.join(cwd, dirname, storyFileName); - return { storyFilePath, exportedStoryName, storyFileContent }; + return { storyFilePath, exportedStoryName, storyFileContent, dirname }; } export const getStoryMetadata = (componentFilePath: string) => { diff --git a/code/lib/manager-api/src/lib/request-response.ts b/code/lib/manager-api/src/lib/request-response.ts index dfbbda5b3b31..c52e8ad8da2d 100644 --- a/code/lib/manager-api/src/lib/request-response.ts +++ b/code/lib/manager-api/src/lib/request-response.ts @@ -4,11 +4,11 @@ import type { RequestData, ResponseData } from '@storybook/core-events'; class RequestResponseError extends Error {} // eslint-disable-next-line @typescript-eslint/naming-convention -export const experimental_requestResponse = ( +export const experimental_requestResponse = ( channel: Channel, requestEvent: string, responseEvent: string, - payload: any, + payload: RequestPayload, timeout = 5000 ): Promise => { let timeoutId: NodeJS.Timeout; diff --git a/code/lib/preview-api/src/modules/preview-web/Preview.tsx b/code/lib/preview-api/src/modules/preview-web/Preview.tsx index ee4524c32ecf..69dace1ba1a3 100644 --- a/code/lib/preview-api/src/modules/preview-web/Preview.tsx +++ b/code/lib/preview-api/src/modules/preview-web/Preview.tsx @@ -318,6 +318,7 @@ export class Preview { this.channel.emit(ARGTYPES_INFO_RESPONSE, { id, success: false, + payload: null, error: e?.message, } satisfies ResponseData); } diff --git a/code/ui/manager/src/components/sidebar/CreateNewStoryFileModal.tsx b/code/ui/manager/src/components/sidebar/CreateNewStoryFileModal.tsx index 6c0c6c3c0f68..b68ef9336c57 100644 --- a/code/ui/manager/src/components/sidebar/CreateNewStoryFileModal.tsx +++ b/code/ui/manager/src/components/sidebar/CreateNewStoryFileModal.tsx @@ -23,11 +23,10 @@ import { SAVE_STORY_REQUEST, SAVE_STORY_RESPONSE, } from '@storybook/core-events'; -import { addons, useStorybookApi } from '@storybook/manager-api'; +import { addons, experimental_requestResponse, useStorybookApi } from '@storybook/manager-api'; import { useDebounce } from '../../hooks/useDebounce'; import type { NewStoryPayload, SearchResult } from './FileSearchList'; -import type { Channel } from '@storybook/channels'; import { extractSeededRequiredArgs, trySelectNewStory } from './FileSearchModal.utils'; import { FileSearchModal } from './FileSearchModal'; @@ -36,6 +35,14 @@ interface CreateNewStoryFileModalProps { onOpenChange: (open: boolean) => void; } +const stringifyArgs = (args: Record) => + stringify(args, { + allowDate: true, + allowFunction: true, + allowUndefined: true, + allowSymbol: true, + }); + export const CreateNewStoryFileModal = ({ open, onOpenChange }: CreateNewStoryFileModalProps) => { const [isLoading, setLoading] = useState(false); const [fileSearchQuery, setFileSearchQuery] = useState(''); @@ -125,82 +132,60 @@ export const CreateNewStoryFileModal = ({ open, onOpenChange }: CreateNewStoryFi componentExportName, componentFilePath, componentIsDefaultExport, + componentExportCount, selectedItemId, }: NewStoryPayload) => { try { const channel = addons.getChannel(); - const createNewStoryResult = await oncePromise< + const createNewStoryResult = await experimental_requestResponse< CreateNewStoryRequestPayload, CreateNewStoryResponsePayload - >({ - channel, - request: { - name: CREATE_NEW_STORYFILE_REQUEST, - payload: { - id: `${selectedItemId}`, - payload: { - componentExportName, - componentFilePath, - componentIsDefaultExport, - }, - }, - }, - resolveEvent: CREATE_NEW_STORYFILE_RESPONSE, + >(channel, CREATE_NEW_STORYFILE_REQUEST, CREATE_NEW_STORYFILE_RESPONSE, { + componentExportName, + componentFilePath, + componentIsDefaultExport, + componentExportCount, }); - if (createNewStoryResult.success) { - setError(null); + setError(null); - const storyId = createNewStoryResult.payload.storyId; + const storyId = createNewStoryResult.storyId; - await trySelectNewStory(api.selectStory, storyId); + await trySelectNewStory(api.selectStory, storyId); - const argTypesInfoResult = await oncePromise< + try { + const argTypesInfoResult = await experimental_requestResponse< ArgTypesRequestPayload, ArgTypesResponsePayload - >({ - channel, - request: { - name: ARGTYPES_INFO_REQUEST, - payload: { id: storyId, payload: {} }, - }, - resolveEvent: ARGTYPES_INFO_RESPONSE, + >(channel, ARGTYPES_INFO_REQUEST, ARGTYPES_INFO_RESPONSE, { + storyId, }); - if (argTypesInfoResult.success) { - const argTypes = argTypesInfoResult.payload.argTypes; - - const requiredArgs = extractSeededRequiredArgs(argTypes); + const argTypes = argTypesInfoResult.argTypes; - await oncePromise({ - channel, - request: { - name: SAVE_STORY_REQUEST, - payload: { - id: storyId, - payload: { - args: stringify(requiredArgs), - importPath: createNewStoryResult.payload.storyFilePath, - csfId: storyId, - }, - }, - }, - resolveEvent: SAVE_STORY_RESPONSE, - }); - } + const requiredArgs = extractSeededRequiredArgs(argTypes); - handleSuccessfullyCreatedStory(componentExportName); - handleFileSearch(); - } else { - setError({ selectedItemId: selectedItemId, error: createNewStoryResult.error }); - } + await experimental_requestResponse( + channel, + SAVE_STORY_REQUEST, + SAVE_STORY_RESPONSE, + { + args: stringifyArgs(requiredArgs), + importPath: createNewStoryResult.storyFilePath, + csfId: storyId, + } + ); + } catch (e) {} + + handleSuccessfullyCreatedStory(componentExportName); + handleFileSearch(); } catch (e) { - handleErrorWhenCreatingStory(); + setError({ selectedItemId: selectedItemId, error: e?.message }); } }, [ - api.selectStory, + api?.selectStory, handleSuccessfullyCreatedStory, handleFileSearch, handleErrorWhenCreatingStory, @@ -230,31 +215,3 @@ export const CreateNewStoryFileModal = ({ open, onOpenChange }: CreateNewStoryFi /> ); }; - -interface OncePromiseOptions { - channel: Channel; - request: { - name: string; - payload: Payload; - }; - resolveEvent: string; -} - -function oncePromise({ - channel, - request, - resolveEvent, -}: OncePromiseOptions>): Promise> { - return new Promise((resolve, reject) => { - channel.once(resolveEvent, (data: ResponseData) => { - resolve(data); - }); - - channel.emit(request.name, request.payload as Payload); - - // If the channel supports error events, you can reject the promise on error - channel.once(resolveEvent, (error: any) => { - reject(error); - }); - }); -} diff --git a/code/ui/manager/src/components/sidebar/FileSearchList.tsx b/code/ui/manager/src/components/sidebar/FileSearchList.tsx index 4025b6bf169c..8765d3b3da87 100644 --- a/code/ui/manager/src/components/sidebar/FileSearchList.tsx +++ b/code/ui/manager/src/components/sidebar/FileSearchList.tsx @@ -140,6 +140,7 @@ export const FileSearchList = memo(function FileSearchList({ componentFilePath: searchResult.filepath, componentIsDefaultExport: searchResult.exportedComponents[0].default, selectedItemId: itemId, + componentExportCount: 1, }); } }, @@ -153,6 +154,7 @@ export const FileSearchList = memo(function FileSearchList({ componentFilePath: searchResult.filepath, componentIsDefaultExport: component.default, selectedItemId: id, + componentExportCount: searchResult.exportedComponents.length, }); }, [onNewStory] diff --git a/code/ui/manager/src/components/sidebar/FileSearchModal.utils.tsx b/code/ui/manager/src/components/sidebar/FileSearchModal.utils.tsx index dd1a4c9aec1e..5dd02ba67806 100644 --- a/code/ui/manager/src/components/sidebar/FileSearchModal.utils.tsx +++ b/code/ui/manager/src/components/sidebar/FileSearchModal.utils.tsx @@ -17,13 +17,7 @@ export function extractSeededRequiredArgs(argTypes: ArgTypes) { break; case 'union': case 'enum': - const valueName = (argType.type.value?.[0] as any).name; - if ( - 'value' in argType.type && - (valueName === 'string' || valueName === 'number' || valueName === 'boolean') - ) { - acc[key] = argType.type.value[0]; - } + acc[key] = argType.options?.[0]; break; case 'array': acc[key] = []; diff --git a/code/ui/manager/src/components/sidebar/IconSymbols.stories.tsx b/code/ui/manager/src/components/sidebar/IconSymbols.stories.tsx new file mode 100644 index 000000000000..76136230d3d8 --- /dev/null +++ b/code/ui/manager/src/components/sidebar/IconSymbols.stories.tsx @@ -0,0 +1,13 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { IconSymbols } from './IconSymbols'; + +const meta = { + component: IconSymbols, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = {}; From 6a961aade2a1a13d6e3673cedc528ea8057f2b7e Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Sat, 20 Apr 2024 22:40:03 +0200 Subject: [PATCH 293/380] Fix tests --- .../src/components/sidebar/FileSearchModal.utils.test.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/code/ui/manager/src/components/sidebar/FileSearchModal.utils.test.tsx b/code/ui/manager/src/components/sidebar/FileSearchModal.utils.test.tsx index cbb3e8c2e2e5..aa7481952ba7 100644 --- a/code/ui/manager/src/components/sidebar/FileSearchModal.utils.test.tsx +++ b/code/ui/manager/src/components/sidebar/FileSearchModal.utils.test.tsx @@ -34,8 +34,9 @@ describe('FileSearchModal.utils', () => { type: { name: 'union', required: true, - value: ['a', 'b', 'c'] as any, + value: [], }, + options: ['a', 'b', 'c'], }, union: { type: { name: 'union', required: false, value: [] }, @@ -44,8 +45,9 @@ describe('FileSearchModal.utils', () => { type: { name: 'enum', required: true, - value: ['a', 'b', 'c'] as any, + value: [], }, + options: ['a', 'b', 'c'], }, enum: { type: { name: 'union', required: false, value: [] }, From bda5336c598f04adc3204c2057ed5fee2a4b5114 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Sat, 20 Apr 2024 22:42:21 +0200 Subject: [PATCH 294/380] Fix TypeScript errors --- code/lib/core-server/src/utils/get-new-story-file.test.ts | 2 ++ code/ui/manager/src/components/sidebar/FileList.tsx | 2 -- code/ui/manager/src/components/sidebar/Search.tsx | 1 - 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/code/lib/core-server/src/utils/get-new-story-file.test.ts b/code/lib/core-server/src/utils/get-new-story-file.test.ts index e9f204f1fe0c..91b06d9027b0 100644 --- a/code/lib/core-server/src/utils/get-new-story-file.test.ts +++ b/code/lib/core-server/src/utils/get-new-story-file.test.ts @@ -17,6 +17,7 @@ describe('get-new-story-file', () => { componentFilePath: 'src/components/Page.tsx', componentExportName: 'Page', componentIsDefaultExport: false, + componentExportCount: 1, }, { presets: { @@ -54,6 +55,7 @@ describe('get-new-story-file', () => { componentFilePath: 'src/components/Page.jsx', componentExportName: 'Page', componentIsDefaultExport: true, + componentExportCount: 1, }, { presets: { diff --git a/code/ui/manager/src/components/sidebar/FileList.tsx b/code/ui/manager/src/components/sidebar/FileList.tsx index a0b516aaf487..e5087a132639 100644 --- a/code/ui/manager/src/components/sidebar/FileList.tsx +++ b/code/ui/manager/src/components/sidebar/FileList.tsx @@ -1,7 +1,5 @@ -import type { StyledComponent } from '@storybook/theming'; import { styled } from '@storybook/theming'; import { rgba } from 'polished'; -import { ChevronDownIcon, ChevronRightIcon, ComponentIcon } from '@storybook/icons'; export const FileListWrapper = styled('div')(({ theme }) => ({ marginTop: '-16px', diff --git a/code/ui/manager/src/components/sidebar/Search.tsx b/code/ui/manager/src/components/sidebar/Search.tsx index 4e87d462d3ca..6cfa55ec415e 100644 --- a/code/ui/manager/src/components/sidebar/Search.tsx +++ b/code/ui/manager/src/components/sidebar/Search.tsx @@ -392,7 +392,6 @@ export const Search = React.memo<{ - {/* @ts-expect-error (TODO) */} {!isMobile && enableShortcuts && !isOpen && ( From 8f9b5ae1e029d0e0825ee2225866f50b840536ec Mon Sep 17 00:00:00 2001 From: Tobbe Lundberg Date: Sat, 20 Apr 2024 22:42:30 +0200 Subject: [PATCH 295/380] react-dom-shim: Support React 19 --- code/lib/react-dom-shim/src/preset.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/code/lib/react-dom-shim/src/preset.ts b/code/lib/react-dom-shim/src/preset.ts index e863a53262b6..fbcb353c3827 100644 --- a/code/lib/react-dom-shim/src/preset.ts +++ b/code/lib/react-dom-shim/src/preset.ts @@ -6,7 +6,7 @@ import { readFile } from 'fs/promises'; * Get react-dom version from the resolvedReact preset, which points to either * a root react-dom dependency or the react-dom dependency shipped with addon-docs */ -const getIsReactVersion18 = async (options: Options) => { +const getIsReactVersion18or19 = async (options: Options) => { const { legacyRootApi } = (await options.presets.apply<{ legacyRootApi?: boolean } | null>('frameworkOptions')) || {}; @@ -24,11 +24,11 @@ const getIsReactVersion18 = async (options: Options) => { } const { version } = JSON.parse(await readFile(join(reactDom, 'package.json'), 'utf-8')); - return version.startsWith('18') || version.startsWith('0.0.0'); + return version.startsWith('18') || version.startsWith('19') || version.startsWith('0.0.0'); }; export const webpackFinal = async (config: any, options: Options) => { - const isReactVersion18 = await getIsReactVersion18(options); + const isReactVersion18 = await getIsReactVersion18or19(options); if (isReactVersion18) { return config; } @@ -46,7 +46,7 @@ export const webpackFinal = async (config: any, options: Options) => { }; export const viteFinal = async (config: any, options: Options) => { - const isReactVersion18 = await getIsReactVersion18(options); + const isReactVersion18 = await getIsReactVersion18or19(options); if (isReactVersion18) { return config; } From fcc3ca57330de5ca39e372a05fac56ac1f8a9936 Mon Sep 17 00:00:00 2001 From: Aaron Reisman Date: Sat, 20 Apr 2024 15:04:33 -0700 Subject: [PATCH 296/380] chore: fix rendering of stateful tabs component --- .../src/components/tabs/tabs.stories.tsx | 24 +++++++++++++++++++ .../components/src/components/tabs/tabs.tsx | 7 +----- 2 files changed, 25 insertions(+), 6 deletions(-) diff --git a/code/ui/components/src/components/tabs/tabs.stories.tsx b/code/ui/components/src/components/tabs/tabs.stories.tsx index a3c40fd8a9d9..658b994b1e2e 100644 --- a/code/ui/components/src/components/tabs/tabs.stories.tsx +++ b/code/ui/components/src/components/tabs/tabs.stories.tsx @@ -18,6 +18,11 @@ interface FibonacciMap { [key: string]: number; } +function Counter() { + const [count, setCount] = React.useState(0); + return ; +} + function fibonacci(num: number, memo?: FibonacciMap): number { if (!memo) { memo = {}; @@ -376,3 +381,22 @@ export const StatelessWithCustomEmpty = { /> ), } satisfies StoryObj; + +export const StatefulWithStatefulPanel = { + render: (args) => { + const [update, setUpdate] = React.useState(0); + return ( +
+ + +
+ +
+
+ +
+ +
+ ); + }, +} satisfies Story; diff --git a/code/ui/components/src/components/tabs/tabs.tsx b/code/ui/components/src/components/tabs/tabs.tsx index 5b0cbb2b5612..3d90fb3f9e58 100644 --- a/code/ui/components/src/components/tabs/tabs.tsx +++ b/code/ui/components/src/components/tabs/tabs.tsx @@ -145,18 +145,13 @@ export const Tabs: FC = memo( emptyState, showToolsWhenEmpty, }) => { - const idList = childrenToList(children) - .map((i) => i.id) - .join(','); - const list = useMemo( () => childrenToList(children).map((i, index) => ({ ...i, active: selected ? i.id === selected : index === 0, })), - // eslint-disable-next-line react-hooks/exhaustive-deps -- we're using idList as a replacement for children - [selected, idList] + [children, selected] ); const { visibleList, tabBarRef, tabRefs, AddonTab } = useList(list); From f9ba2f1f250d3375320c879ca9d27e7fc71c5a4f Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Mon, 22 Apr 2024 12:32:39 +0200 Subject: [PATCH 297/380] test 'nextjs/default-ts' instead of 'nextjs/default-js' in e2e tests --- code/e2e-tests/framework-nextjs.spec.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/code/e2e-tests/framework-nextjs.spec.ts b/code/e2e-tests/framework-nextjs.spec.ts index 61233dd5ac25..c1a15c2632ef 100644 --- a/code/e2e-tests/framework-nextjs.spec.ts +++ b/code/e2e-tests/framework-nextjs.spec.ts @@ -10,7 +10,7 @@ test.describe('Next.js', () => { // TODO: improve these E2E tests given that we have more version of Next.js to test // and this only tests nextjs/default-js test.skip( - !templateName?.includes('nextjs/default-js'), + !templateName?.includes('nextjs/default-ts'), 'Only run this test for the Frameworks that support next/navigation' ); @@ -66,7 +66,7 @@ test.describe('Next.js', () => { sbPage = new SbPage(page); await sbPage.navigateToStory( - 'stories/frameworks/nextjs-nextjs-default-js/Navigation', + 'stories/frameworks/nextjs-nextjs-default-ts/Navigation', 'default' ); root = sbPage.previewRoot(); @@ -100,7 +100,7 @@ test.describe('Next.js', () => { test.beforeEach(async ({ page }) => { sbPage = new SbPage(page); - await sbPage.navigateToStory('stories/frameworks/nextjs-nextjs-default-js/Router', 'default'); + await sbPage.navigateToStory('stories/frameworks/nextjs-nextjs-default-ts/Router', 'default'); root = sbPage.previewRoot(); }); From 6dadc7c1b492e532d9da4275ab53c7a95836b449 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Mon, 22 Apr 2024 13:07:46 +0200 Subject: [PATCH 298/380] fix migration --- MIGRATION.md | 816 +++++++++++++++++++++++++-------------------------- 1 file changed, 404 insertions(+), 412 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index 4c540855603a..2141d4dde078 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -1,411 +1,409 @@

Migration

-- [\<\<\<\<\<\<\< HEAD - CommonJS with Vite is deprecated - Using implicit actions during rendering is deprecated - typescript.skipBabel deprecated - Primary doc block accepts of prop - Subtitle block and `parameters.componentSubtitle` - Addons no longer need a peer dependency on React](#-head---commonjs-with-vite-is-deprecated---using-implicit-actions-during-rendering-is-deprecated---typescriptskipbabel-deprecated---primary-doc-block-accepts-of-prop---subtitle-block-and-parameterscomponentsubtitle---addons-no-longer-need-a-peer-dependency-on-react) - - [From version 8.0 to 8.1.0](#from-version-80-to-810) - - [Subtitle block and `parameters.componentSubtitle`](#subtitle-block-and-parameterscomponentsubtitle) - - [From version 7.x to 8.0.0](#from-version-7x-to-800) - - [Portable stories](#portable-stories) - - [Project annotations are now merged instead of overwritten in composeStory](#project-annotations-are-now-merged-instead-of-overwritten-in-composestory) - - [Type change in `composeStories` API](#type-change-in-composestories-api) - - [Composed Vue stories are now components instead of functions](#composed-vue-stories-are-now-components-instead-of-functions) - - [Tab addons are now routed to a query parameter](#tab-addons-are-now-routed-to-a-query-parameter) - - [Default keyboard shortcuts changed](#default-keyboard-shortcuts-changed) - - [Manager addons are now rendered with React 18](#manager-addons-are-now-rendered-with-react-18) - - [Removal of `storiesOf`-API](#removal-of-storiesof-api) - - [Removed deprecated shim packages](#removed-deprecated-shim-packages) - - [Framework-specific Vite plugins have to be explicitly added](#framework-specific-vite-plugins-have-to-be-explicitly-added) - - [For React:](#for-react) - - [For Vue:](#for-vue) - - [For Svelte (without Sveltekit):](#for-svelte-without-sveltekit) - - [For Preact:](#for-preact) - - [For Solid:](#for-solid) - - [For Qwik:](#for-qwik) - - [TurboSnap Vite plugin is no longer needed](#turbosnap-vite-plugin-is-no-longer-needed) - - [`--webpack-stats-json` option renamed `--stats-json`](#--webpack-stats-json-option-renamed---stats-json) - - [Implicit actions can not be used during rendering (for example in the play function)](#implicit-actions-can-not-be-used-during-rendering-for-example-in-the-play-function) - - [MDX related changes](#mdx-related-changes) - - [MDX is upgraded to v3](#mdx-is-upgraded-to-v3) - - [Dropping support for \*.stories.mdx (CSF in MDX) format and MDX1 support](#dropping-support-for-storiesmdx-csf-in-mdx-format-and-mdx1-support) - - [Dropping support for id, name and story in Story block](#dropping-support-for-id-name-and-story-in-story-block) - - [Core changes](#core-changes) - - [`framework.options.builder.useSWC` for Webpack5-based projects removed](#frameworkoptionsbuilderuseswc-for-webpack5-based-projects-removed) - - [Removed `@babel/core` and `babel-loader` from `@storybook/builder-webpack5`](#removed-babelcore-and-babel-loader-from-storybookbuilder-webpack5) - - [`framework.options.fastRefresh` for Webpack5-based projects removed](#frameworkoptionsfastrefresh-for-webpack5-based-projects-removed) - - [`typescript.skipBabel` removed](#typescriptskipbabel-removed) - - [Dropping support for Yarn 1](#dropping-support-for-yarn-1) - - [Dropping support for Node.js 16](#dropping-support-for-nodejs-16) - - [Autotitle breaking fixes](#autotitle-breaking-fixes) - - [Storyshots has been removed](#storyshots-has-been-removed) - - [UI layout state has changed shape](#ui-layout-state-has-changed-shape) - - [New UI and props for Button and IconButton components](#new-ui-and-props-for-button-and-iconbutton-components) - - [Icons is deprecated](#icons-is-deprecated) - - [Removed postinstall](#removed-postinstall) - - [Removed stories.json](#removed-storiesjson) - - [Removed `sb babelrc` command](#removed-sb-babelrc-command) - - [Changed interfaces for `@storybook/router` components](#changed-interfaces-for-storybookrouter-components) - - [Extract no longer batches](#extract-no-longer-batches) - - [Framework-specific changes](#framework-specific-changes) - - [React](#react) - - [`react-docgen` component analysis by default](#react-docgen-component-analysis-by-default) - - [Next.js](#nextjs) - - [Require Next.js 13.5 and up](#require-nextjs-135-and-up) - - [Automatic SWC mode detection](#automatic-swc-mode-detection) - - [RSC config moved to React renderer](#rsc-config-moved-to-react-renderer) - - [Vue](#vue) - - [Require Vue 3 and up](#require-vue-3-and-up) - - [Angular](#angular) - - [Require Angular 15 and up](#require-angular-15-and-up) - - [Svelte](#svelte) - - [Require Svelte 4 and up](#require-svelte-4-and-up) - - [Preact](#preact) - - [Require Preact 10 and up](#require-preact-10-and-up) - - [No longer adds default Babel plugins](#no-longer-adds-default-babel-plugins) - - [Web Components](#web-components) - - [Dropping default babel plugins in Webpack5-based projects](#dropping-default-babel-plugins-in-webpack5-based-projects) - - [Deprecations which are now removed](#deprecations-which-are-now-removed) - - [Removed `config` preset](#removed-config-preset) - - [Removed `passArgsFirst` option](#removed-passargsfirst-option) - - [Methods and properties from AddonStore](#methods-and-properties-from-addonstore) - - [Methods and properties from PreviewAPI](#methods-and-properties-from-previewapi) - - [Removals in @storybook/components](#removals-in-storybookcomponents) - - [Removals in @storybook/types](#removals-in-storybooktypes) - - [--use-npm flag in storybook CLI](#--use-npm-flag-in-storybook-cli) - - [hideNoControlsWarning parameter from addon controls](#hidenocontrolswarning-parameter-from-addon-controls) - - [`setGlobalConfig` from `@storybook/react`](#setglobalconfig-from-storybookreact) - - [StorybookViteConfig type from @storybook/builder-vite](#storybookviteconfig-type-from-storybookbuilder-vite) - - [props from WithTooltipComponent from @storybook/components](#props-from-withtooltipcomponent-from-storybookcomponents) - - [LinkTo direct import from addon-links](#linkto-direct-import-from-addon-links) - - [DecoratorFn, Story, ComponentStory, ComponentStoryObj, ComponentStoryFn and ComponentMeta TypeScript types](#decoratorfn-story-componentstory-componentstoryobj-componentstoryfn-and-componentmeta-typescript-types) - - ["Framework" TypeScript types](#framework-typescript-types) - - [`navigateToSettingsPage` method from Storybook's manager-api](#navigatetosettingspage-method-from-storybooks-manager-api) - - [storyIndexers](#storyindexers) - - [Deprecated docs parameters](#deprecated-docs-parameters) - - [Description Doc block properties](#description-doc-block-properties) - - [Story Doc block properties](#story-doc-block-properties) - - [Manager API expandAll and collapseAll methods](#manager-api-expandall-and-collapseall-methods) - - [`ArgsTable` Doc block removed](#argstable-doc-block-removed) - - [`Source` Doc block properties](#source-doc-block-properties) - - [`Canvas` Doc block properties](#canvas-doc-block-properties) - - [`Primary` Doc block properties](#primary-doc-block-properties) - - [`createChannel` from `@storybook/postmessage` and `@storybook/channel-websocket`](#createchannel-from-storybookpostmessage-and-storybookchannel-websocket) - - [StoryStore and methods deprecated](#storystore-and-methods-deprecated) - - [Addon author changes](#addon-author-changes) - - [Tab addons cannot manually route, Tool addons can filter their visibility via tabId](#tab-addons-cannot-manually-route-tool-addons-can-filter-their-visibility-via-tabid) - - [Removed `config` preset](#removed-config-preset-1) - - [From version 7.5.0 to 7.6.0](#from-version-750-to-760) - - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated) - - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated) - - [typescript.skipBabel deprecated](#typescriptskipbabel-deprecated) - - [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop) - - [Subtitle block and `parameters.componentSubtitle`](#subtitle-block-and-parameterscomponentsubtitle-1) - - [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react) - - [From version 7.4.0 to 7.5.0](#from-version-740-to-750) - - [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated) - - [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers) - - [From version 7.0.0 to 7.2.0](#from-version-700-to-720) - - [Addon API is more type-strict](#addon-api-is-more-type-strict) - - [Addon-controls hideNoControlsWarning parameter is deprecated](#addon-controls-hidenocontrolswarning-parameter-is-deprecated) - - [From version 6.5.x to 7.0.0](#from-version-65x-to-700) - - [7.0 breaking changes](#70-breaking-changes) - - [Dropped support for Node 15 and below](#dropped-support-for-node-15-and-below) - - [Default export in Preview.js](#default-export-in-previewjs) - - [ESM format in Main.js](#esm-format-in-mainjs) - - [Modern browser support](#modern-browser-support) - - [React peer dependencies required](#react-peer-dependencies-required) - - [start-storybook / build-storybook binaries removed](#start-storybook--build-storybook-binaries-removed) - - [New Framework API](#new-framework-api) - - [Available framework packages](#available-framework-packages) - - [Framework field mandatory](#framework-field-mandatory) - - [frameworkOptions renamed](#frameworkoptions-renamed) - - [builderOptions renamed](#builderoptions-renamed) - - [TypeScript: StorybookConfig type moved](#typescript-storybookconfig-type-moved) - - [Titles are statically computed](#titles-are-statically-computed) - - [Framework standalone build moved](#framework-standalone-build-moved) - - [Change of root html IDs](#change-of-root-html-ids) - - [Stories glob matches MDX files](#stories-glob-matches-mdx-files) - - [Add strict mode](#add-strict-mode) - - [Importing plain markdown files with `transcludeMarkdown` has changed](#importing-plain-markdown-files-with-transcludemarkdown-has-changed) - - [Stories field in .storybook/main.js is mandatory](#stories-field-in-storybookmainjs-is-mandatory) - - [Stricter global types](#stricter-global-types) - - [Deploying build artifacts](#deploying-build-artifacts) - - [Dropped support for file URLs](#dropped-support-for-file-urls) - - [Serving with nginx](#serving-with-nginx) - - [Ignore story files from node\_modules](#ignore-story-files-from-node_modules) - - [7.0 Core changes](#70-core-changes) - - [7.0 feature flags removed](#70-feature-flags-removed) - - [Story context is prepared before for supporting fine grained updates](#story-context-is-prepared-before-for-supporting-fine-grained-updates) - - [Changed decorator order between preview.js and addons/frameworks](#changed-decorator-order-between-previewjs-and-addonsframeworks) - - [Dark mode detection](#dark-mode-detection) - - [`addons.setConfig` should now be imported from `@storybook/manager-api`.](#addonssetconfig-should-now-be-imported-from-storybookmanager-api) - - [7.0 core addons changes](#70-core-addons-changes) - - [Removed auto injection of @storybook/addon-actions decorator](#removed-auto-injection-of-storybookaddon-actions-decorator) - - [Addon-backgrounds: Removed deprecated grid parameter](#addon-backgrounds-removed-deprecated-grid-parameter) - - [Addon-a11y: Removed deprecated withA11y decorator](#addon-a11y-removed-deprecated-witha11y-decorator) - - [Addon-interactions: Interactions debugger is now default](#addon-interactions-interactions-debugger-is-now-default) - - [7.0 Vite changes](#70-vite-changes) - - [Vite builder uses Vite config automatically](#vite-builder-uses-vite-config-automatically) - - [Vite cache moved to node\_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook) - - [7.0 Webpack changes](#70-webpack-changes) - - [Webpack4 support discontinued](#webpack4-support-discontinued) - - [Babel mode v7 exclusively](#babel-mode-v7-exclusively) - - [Postcss removed](#postcss-removed) - - [Removed DLL flags](#removed-dll-flags) - - [7.0 Framework-specific changes](#70-framework-specific-changes) - - [Angular: Removed deprecated `component` and `propsMeta` field](#angular-removed-deprecated-component-and-propsmeta-field) - - [Angular: Drop support for Angular \< 14](#angular-drop-support-for-angular--14) - - [Angular: Drop support for calling Storybook directly](#angular-drop-support-for-calling-storybook-directly) - - [Angular: Application providers and ModuleWithProviders](#angular-application-providers-and-modulewithproviders) - - [Angular: Removed legacy renderer](#angular-removed-legacy-renderer) - - [Next.js: use the `@storybook/nextjs` framework](#nextjs-use-the-storybooknextjs-framework) - - [SvelteKit: needs the `@storybook/sveltekit` framework](#sveltekit-needs-the-storybooksveltekit-framework) - - [Vue3: replaced app export with setup](#vue3-replaced-app-export-with-setup) - - [Web-components: dropped lit-html v1 support](#web-components-dropped-lit-html-v1-support) - - [Create React App: dropped CRA4 support](#create-react-app-dropped-cra4-support) - - [HTML: No longer auto-dedents source code](#html-no-longer-auto-dedents-source-code) - - [7.0 Addon authors changes](#70-addon-authors-changes) - - [New Addons API](#new-addons-api) - - [Specific instructions for addon creators](#specific-instructions-for-addon-creators) - - [Specific instructions for addon users](#specific-instructions-for-addon-users) - - [register.js removed](#registerjs-removed) - - [No more default export from `@storybook/addons`](#no-more-default-export-from-storybookaddons) - - [No more configuration for manager](#no-more-configuration-for-manager) - - [Icons API changed](#icons-api-changed) - - [Removed global client APIs](#removed-global-client-apis) - - [framework parameter renamed to renderer](#framework-parameter-renamed-to-renderer) - - [7.0 Docs changes](#70-docs-changes) - - [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) - - [Explicit `` elements are no longer syntax highlighted](#explicit-code-elements-are-no-longer-syntax-highlighted) - - [Dropped source loader / storiesOf static snippets](#dropped-source-loader--storiesof-static-snippets) - - [Removed docs.getContainer and getPage parameters](#removed-docsgetcontainer-and-getpage-parameters) - - [Addon-docs: Removed deprecated blocks.js entry](#addon-docs-removed-deprecated-blocksjs-entry) - - [Dropped addon-docs manual babel configuration](#dropped-addon-docs-manual-babel-configuration) - - [Dropped addon-docs manual configuration](#dropped-addon-docs-manual-configuration) - - [Autoplay in docs](#autoplay-in-docs) - - [Removed STORYBOOK\_REACT\_CLASSES global](#removed-storybook_react_classes-global) - - [7.0 Deprecations and default changes](#70-deprecations-and-default-changes) - - [storyStoreV7 enabled by default](#storystorev7-enabled-by-default) - - [`Story` type deprecated](#story-type-deprecated) - - [`ComponentStory`, `ComponentStoryObj`, `ComponentStoryFn` and `ComponentMeta` types are deprecated](#componentstory-componentstoryobj-componentstoryfn-and-componentmeta-types-are-deprecated) - - [Renamed `renderToDOM` to `renderToCanvas`](#renamed-rendertodom-to-rendertocanvas) - - [Renamed `XFramework` to `XRenderer`](#renamed-xframework-to-xrenderer) - - [Renamed `DecoratorFn` to `Decorator`](#renamed-decoratorfn-to-decorator) - - [CLI option `--use-npm` deprecated](#cli-option---use-npm-deprecated) - - ['config' preset entry replaced with 'previewAnnotations'](#config-preset-entry-replaced-with-previewannotations) - - [From version 6.4.x to 6.5.0](#from-version-64x-to-650) - - [Vue 3 upgrade](#vue-3-upgrade) - - [React18 new root API](#react18-new-root-api) - - [Renamed isToolshown to showToolbar](#renamed-istoolshown-to-showtoolbar) - - [Dropped support for addon-actions addDecorators](#dropped-support-for-addon-actions-adddecorators) - - [Vite builder renamed](#vite-builder-renamed) - - [Docs framework refactor for React](#docs-framework-refactor-for-react) - - [Opt-in MDX2 support](#opt-in-mdx2-support) - - [CSF3 auto-title improvements](#csf3-auto-title-improvements) - - [Auto-title filename case](#auto-title-filename-case) - - [Auto-title redundant filename](#auto-title-redundant-filename) - - [Auto-title always prefixes](#auto-title-always-prefixes) - - [6.5 Deprecations](#65-deprecations) - - [Deprecated register.js](#deprecated-registerjs) - - [From version 6.3.x to 6.4.0](#from-version-63x-to-640) - - [Automigrate](#automigrate) - - [CRA5 upgrade](#cra5-upgrade) - - [CSF3 enabled](#csf3-enabled) - - [Optional titles](#optional-titles) - - [String literal titles](#string-literal-titles) - - [StoryObj type](#storyobj-type) - - [Story Store v7](#story-store-v7) - - [Behavioral differences](#behavioral-differences) - - [Main.js framework field](#mainjs-framework-field) - - [Using the v7 store](#using-the-v7-store) - - [v7-style story sort](#v7-style-story-sort) - - [v7 default sort behavior](#v7-default-sort-behavior) - - [v7 Store API changes for addon authors](#v7-store-api-changes-for-addon-authors) - - [Storyshots compatibility in the v7 store](#storyshots-compatibility-in-the-v7-store) - - [Emotion11 quasi-compatibility](#emotion11-quasi-compatibility) - - [Babel mode v7](#babel-mode-v7) - - [Loader behavior with args changes](#loader-behavior-with-args-changes) - - [6.4 Angular changes](#64-angular-changes) - - [SB Angular builder](#sb-angular-builder) - - [Angular13](#angular13) - - [Angular component parameter removed](#angular-component-parameter-removed) - - [6.4 deprecations](#64-deprecations) - - [Deprecated --static-dir CLI flag](#deprecated---static-dir-cli-flag) - - [From version 6.2.x to 6.3.0](#from-version-62x-to-630) - - [Webpack 5](#webpack-5) - - [Fixing hoisting issues](#fixing-hoisting-issues) - - [Webpack 5 manager build](#webpack-5-manager-build) - - [Wrong webpack version](#wrong-webpack-version) - - [Angular 12 upgrade](#angular-12-upgrade) - - [Lit support](#lit-support) - - [No longer inferring default values of args](#no-longer-inferring-default-values-of-args) - - [6.3 deprecations](#63-deprecations) - - [Deprecated addon-knobs](#deprecated-addon-knobs) - - [Deprecated scoped blocks imports](#deprecated-scoped-blocks-imports) - - [Deprecated layout URL params](#deprecated-layout-url-params) - - [From version 6.1.x to 6.2.0](#from-version-61x-to-620) - - [MDX pattern tweaked](#mdx-pattern-tweaked) - - [6.2 Angular overhaul](#62-angular-overhaul) - - [New Angular storyshots format](#new-angular-storyshots-format) - - [Deprecated Angular story component](#deprecated-angular-story-component) - - [New Angular renderer](#new-angular-renderer) - - [Components without selectors](#components-without-selectors) - - [Packages now available as ESModules](#packages-now-available-as-esmodules) - - [6.2 Deprecations](#62-deprecations) - - [Deprecated implicit PostCSS loader](#deprecated-implicit-postcss-loader) - - [Deprecated default PostCSS plugins](#deprecated-default-postcss-plugins) - - [Deprecated showRoots config option](#deprecated-showroots-config-option) - - [Deprecated control.options](#deprecated-controloptions) - - [Deprecated storybook components html entry point](#deprecated-storybook-components-html-entry-point) - - [From version 6.0.x to 6.1.0](#from-version-60x-to-610) - - [Addon-backgrounds preset](#addon-backgrounds-preset) - - [Single story hoisting](#single-story-hoisting) - - [React peer dependencies](#react-peer-dependencies) - - [6.1 deprecations](#61-deprecations) - - [Deprecated DLL flags](#deprecated-dll-flags) - - [Deprecated storyFn](#deprecated-storyfn) - - [Deprecated onBeforeRender](#deprecated-onbeforerender) - - [Deprecated grid parameter](#deprecated-grid-parameter) - - [Deprecated package-composition disabled parameter](#deprecated-package-composition-disabled-parameter) - - [From version 5.3.x to 6.0.x](#from-version-53x-to-60x) - - [Hoisted CSF annotations](#hoisted-csf-annotations) - - [Zero config typescript](#zero-config-typescript) - - [Correct globs in main.js](#correct-globs-in-mainjs) - - [CRA preset removed](#cra-preset-removed) - - [Core-JS dependency errors](#core-js-dependency-errors) - - [Args passed as first argument to story](#args-passed-as-first-argument-to-story) - - [6.0 Docs breaking changes](#60-docs-breaking-changes) - - [Remove framework-specific docs presets](#remove-framework-specific-docs-presets) - - [Preview/Props renamed](#previewprops-renamed) - - [Docs theme separated](#docs-theme-separated) - - [DocsPage slots removed](#docspage-slots-removed) - - [React prop tables with Typescript](#react-prop-tables-with-typescript) - - [ConfigureJSX true by default in React](#configurejsx-true-by-default-in-react) - - [User babelrc disabled by default in MDX](#user-babelrc-disabled-by-default-in-mdx) - - [Docs description parameter](#docs-description-parameter) - - [6.0 Inline stories](#60-inline-stories) - - [New addon presets](#new-addon-presets) - - [Removed babel-preset-vue from Vue preset](#removed-babel-preset-vue-from-vue-preset) - - [Removed Deprecated APIs](#removed-deprecated-apis) - - [New setStories event](#new-setstories-event) - - [Removed renderCurrentStory event](#removed-rendercurrentstory-event) - - [Removed hierarchy separators](#removed-hierarchy-separators) - - [No longer pass denormalized parameters to storySort](#no-longer-pass-denormalized-parameters-to-storysort) - - [Client API changes](#client-api-changes) - - [Removed Legacy Story APIs](#removed-legacy-story-apis) - - [Can no longer add decorators/parameters after stories](#can-no-longer-add-decoratorsparameters-after-stories) - - [Changed Parameter Handling](#changed-parameter-handling) - - [Simplified Render Context](#simplified-render-context) - - [Story Store immutable outside of configuration](#story-store-immutable-outside-of-configuration) - - [Improved story source handling](#improved-story-source-handling) - - [6.0 Addon API changes](#60-addon-api-changes) - - [Consistent local addon paths in main.js](#consistent-local-addon-paths-in-mainjs) - - [Deprecated setAddon](#deprecated-setaddon) - - [Deprecated disabled parameter](#deprecated-disabled-parameter) - - [Actions addon uses parameters](#actions-addon-uses-parameters) - - [Removed action decorator APIs](#removed-action-decorator-apis) - - [Removed withA11y decorator](#removed-witha11y-decorator) - - [Essentials addon disables differently](#essentials-addon-disables-differently) - - [Backgrounds addon has a new api](#backgrounds-addon-has-a-new-api) - - [6.0 Deprecations](#60-deprecations) - - [Deprecated addon-info, addon-notes](#deprecated-addon-info-addon-notes) - - [Deprecated addon-contexts](#deprecated-addon-contexts) - - [Removed addon-centered](#removed-addon-centered) - - [Deprecated polymer](#deprecated-polymer) - - [Deprecated immutable options parameters](#deprecated-immutable-options-parameters) - - [Deprecated addParameters and addDecorator](#deprecated-addparameters-and-adddecorator) - - [Deprecated clearDecorators](#deprecated-cleardecorators) - - [Deprecated configure](#deprecated-configure) - - [Deprecated support for duplicate kinds](#deprecated-support-for-duplicate-kinds) - - [From version 5.2.x to 5.3.x](#from-version-52x-to-53x) - - [To main.js configuration](#to-mainjs-configuration) - - [Using main.js](#using-mainjs) - - [Using preview.js](#using-previewjs) - - [Using manager.js](#using-managerjs) - - [Create React App preset](#create-react-app-preset) - - [Description doc block](#description-doc-block) - - [React Native Async Storage](#react-native-async-storage) - - [Deprecate displayName parameter](#deprecate-displayname-parameter) - - [Unified docs preset](#unified-docs-preset) - - [Simplified hierarchy separators](#simplified-hierarchy-separators) - - [Addon StoryShots Puppeteer uses external puppeteer](#addon-storyshots-puppeteer-uses-external-puppeteer) - - [From version 5.1.x to 5.2.x](#from-version-51x-to-52x) - - [Source-loader](#source-loader) - - [Default viewports](#default-viewports) - - [Grid toolbar-feature](#grid-toolbar-feature) - - [Docs mode docgen](#docs-mode-docgen) - - [storySort option](#storysort-option) - - [From version 5.1.x to 5.1.10](#from-version-51x-to-5110) - - [babel.config.js support](#babelconfigjs-support) - - [From version 5.0.x to 5.1.x](#from-version-50x-to-51x) - - [React native server](#react-native-server) - - [Angular 7](#angular-7) - - [CoreJS 3](#corejs-3) - - [From version 5.0.1 to 5.0.2](#from-version-501-to-502) - - [Deprecate webpack extend mode](#deprecate-webpack-extend-mode) - - [From version 4.1.x to 5.0.x](#from-version-41x-to-50x) - - [sortStoriesByKind](#sortstoriesbykind) - - [Webpack config simplification](#webpack-config-simplification) - - [Theming overhaul](#theming-overhaul) - - [Story hierarchy defaults](#story-hierarchy-defaults) - - [Options addon deprecated](#options-addon-deprecated) - - [Individual story decorators](#individual-story-decorators) - - [Addon backgrounds uses parameters](#addon-backgrounds-uses-parameters) - - [Addon cssresources name attribute renamed](#addon-cssresources-name-attribute-renamed) - - [Addon viewport uses parameters](#addon-viewport-uses-parameters) - - [Addon a11y uses parameters, decorator renamed](#addon-a11y-uses-parameters-decorator-renamed) - - [Addon centered decorator deprecated](#addon-centered-decorator-deprecated) - - [New keyboard shortcuts defaults](#new-keyboard-shortcuts-defaults) - - [New URL structure](#new-url-structure) - - [Rename of the `--secure` cli parameter to `--https`](#rename-of-the---secure-cli-parameter-to---https) - - [Vue integration](#vue-integration) - - [From version 4.0.x to 4.1.x](#from-version-40x-to-41x) - - [Private addon config](#private-addon-config) - - [React 15.x](#react-15x) - - [From version 3.4.x to 4.0.x](#from-version-34x-to-40x) - - [React 16.3+](#react-163) - - [Generic addons](#generic-addons) - - [Knobs select ordering](#knobs-select-ordering) - - [Knobs URL parameters](#knobs-url-parameters) - - [Keyboard shortcuts moved](#keyboard-shortcuts-moved) - - [Removed addWithInfo](#removed-addwithinfo) - - [Removed RN packager](#removed-rn-packager) - - [Removed RN addons](#removed-rn-addons) - - [Storyshots Changes](#storyshots-changes) - - [Webpack 4](#webpack-4) - - [Babel 7](#babel-7) - - [Create-react-app](#create-react-app) - - [Upgrade CRA1 to babel 7](#upgrade-cra1-to-babel-7) - - [Migrate CRA1 while keeping babel 6](#migrate-cra1-while-keeping-babel-6) - - [start-storybook opens browser](#start-storybook-opens-browser) - - [CLI Rename](#cli-rename) - - [Addon story parameters](#addon-story-parameters) - - [From version 3.3.x to 3.4.x](#from-version-33x-to-34x) - - [From version 3.2.x to 3.3.x](#from-version-32x-to-33x) - - [`babel-core` is now a peer dependency #2494](#babel-core-is-now-a-peer-dependency-2494) - - [Base webpack config now contains vital plugins #1775](#base-webpack-config-now-contains-vital-plugins-1775) - - [Refactored Knobs](#refactored-knobs) - - [From version 3.1.x to 3.2.x](#from-version-31x-to-32x) - - [Moved TypeScript addons definitions](#moved-typescript-addons-definitions) - - [Updated Addons API](#updated-addons-api) - - [From version 3.0.x to 3.1.x](#from-version-30x-to-31x) - - [Moved TypeScript definitions](#moved-typescript-definitions) - - [Deprecated head.html](#deprecated-headhtml) - - [From version 2.x.x to 3.x.x](#from-version-2xx-to-3xx) - - [Webpack upgrade](#webpack-upgrade) - - [Packages renaming](#packages-renaming) - - [Deprecated embedded addons](#deprecated-embedded-addons) +- [From version 8.0 to 8.1.0](#from-version-80-to-810) + - [Subtitle block and `parameters.componentSubtitle`](#subtitle-block-and-parameterscomponentsubtitle) +- [From version 7.x to 8.0.0](#from-version-7x-to-800) + - [Portable stories](#portable-stories) + - [Project annotations are now merged instead of overwritten in composeStory](#project-annotations-are-now-merged-instead-of-overwritten-in-composestory) + - [Type change in `composeStories` API](#type-change-in-composestories-api) + - [Composed Vue stories are now components instead of functions](#composed-vue-stories-are-now-components-instead-of-functions) + - [Tab addons are now routed to a query parameter](#tab-addons-are-now-routed-to-a-query-parameter) + - [Default keyboard shortcuts changed](#default-keyboard-shortcuts-changed) + - [Manager addons are now rendered with React 18](#manager-addons-are-now-rendered-with-react-18) + - [Removal of `storiesOf`-API](#removal-of-storiesof-api) + - [Removed deprecated shim packages](#removed-deprecated-shim-packages) + - [Framework-specific Vite plugins have to be explicitly added](#framework-specific-vite-plugins-have-to-be-explicitly-added) + - [For React:](#for-react) + - [For Vue:](#for-vue) + - [For Svelte (without Sveltekit):](#for-svelte-without-sveltekit) + - [For Preact:](#for-preact) + - [For Solid:](#for-solid) + - [For Qwik:](#for-qwik) + - [TurboSnap Vite plugin is no longer needed](#turbosnap-vite-plugin-is-no-longer-needed) + - [`--webpack-stats-json` option renamed `--stats-json`](#--webpack-stats-json-option-renamed---stats-json) + - [Implicit actions can not be used during rendering (for example in the play function)](#implicit-actions-can-not-be-used-during-rendering-for-example-in-the-play-function) + - [MDX related changes](#mdx-related-changes) + - [MDX is upgraded to v3](#mdx-is-upgraded-to-v3) + - [Dropping support for \*.stories.mdx (CSF in MDX) format and MDX1 support](#dropping-support-for-storiesmdx-csf-in-mdx-format-and-mdx1-support) + - [Dropping support for id, name and story in Story block](#dropping-support-for-id-name-and-story-in-story-block) + - [Core changes](#core-changes) + - [`framework.options.builder.useSWC` for Webpack5-based projects removed](#frameworkoptionsbuilderuseswc-for-webpack5-based-projects-removed) + - [Removed `@babel/core` and `babel-loader` from `@storybook/builder-webpack5`](#removed-babelcore-and-babel-loader-from-storybookbuilder-webpack5) + - [`framework.options.fastRefresh` for Webpack5-based projects removed](#frameworkoptionsfastrefresh-for-webpack5-based-projects-removed) + - [`typescript.skipBabel` removed](#typescriptskipbabel-removed) + - [Dropping support for Yarn 1](#dropping-support-for-yarn-1) + - [Dropping support for Node.js 16](#dropping-support-for-nodejs-16) + - [Autotitle breaking fixes](#autotitle-breaking-fixes) + - [Storyshots has been removed](#storyshots-has-been-removed) + - [UI layout state has changed shape](#ui-layout-state-has-changed-shape) + - [New UI and props for Button and IconButton components](#new-ui-and-props-for-button-and-iconbutton-components) + - [Icons is deprecated](#icons-is-deprecated) + - [Removed postinstall](#removed-postinstall) + - [Removed stories.json](#removed-storiesjson) + - [Removed `sb babelrc` command](#removed-sb-babelrc-command) + - [Changed interfaces for `@storybook/router` components](#changed-interfaces-for-storybookrouter-components) + - [Extract no longer batches](#extract-no-longer-batches) + - [Framework-specific changes](#framework-specific-changes) + - [React](#react) + - [`react-docgen` component analysis by default](#react-docgen-component-analysis-by-default) + - [Next.js](#nextjs) + - [Require Next.js 13.5 and up](#require-nextjs-135-and-up) + - [Automatic SWC mode detection](#automatic-swc-mode-detection) + - [RSC config moved to React renderer](#rsc-config-moved-to-react-renderer) + - [Vue](#vue) + - [Require Vue 3 and up](#require-vue-3-and-up) + - [Angular](#angular) + - [Require Angular 15 and up](#require-angular-15-and-up) + - [Svelte](#svelte) + - [Require Svelte 4 and up](#require-svelte-4-and-up) + - [Preact](#preact) + - [Require Preact 10 and up](#require-preact-10-and-up) + - [No longer adds default Babel plugins](#no-longer-adds-default-babel-plugins) + - [Web Components](#web-components) + - [Dropping default babel plugins in Webpack5-based projects](#dropping-default-babel-plugins-in-webpack5-based-projects) + - [Deprecations which are now removed](#deprecations-which-are-now-removed) + - [Removed `config` preset](#removed-config-preset) + - [Removed `passArgsFirst` option](#removed-passargsfirst-option) + - [Methods and properties from AddonStore](#methods-and-properties-from-addonstore) + - [Methods and properties from PreviewAPI](#methods-and-properties-from-previewapi) + - [Removals in @storybook/components](#removals-in-storybookcomponents) + - [Removals in @storybook/types](#removals-in-storybooktypes) + - [--use-npm flag in storybook CLI](#--use-npm-flag-in-storybook-cli) + - [hideNoControlsWarning parameter from addon controls](#hidenocontrolswarning-parameter-from-addon-controls) + - [`setGlobalConfig` from `@storybook/react`](#setglobalconfig-from-storybookreact) + - [StorybookViteConfig type from @storybook/builder-vite](#storybookviteconfig-type-from-storybookbuilder-vite) + - [props from WithTooltipComponent from @storybook/components](#props-from-withtooltipcomponent-from-storybookcomponents) + - [LinkTo direct import from addon-links](#linkto-direct-import-from-addon-links) + - [DecoratorFn, Story, ComponentStory, ComponentStoryObj, ComponentStoryFn and ComponentMeta TypeScript types](#decoratorfn-story-componentstory-componentstoryobj-componentstoryfn-and-componentmeta-typescript-types) + - ["Framework" TypeScript types](#framework-typescript-types) + - [`navigateToSettingsPage` method from Storybook's manager-api](#navigatetosettingspage-method-from-storybooks-manager-api) + - [storyIndexers](#storyindexers) + - [Deprecated docs parameters](#deprecated-docs-parameters) + - [Description Doc block properties](#description-doc-block-properties) + - [Story Doc block properties](#story-doc-block-properties) + - [Manager API expandAll and collapseAll methods](#manager-api-expandall-and-collapseall-methods) + - [`ArgsTable` Doc block removed](#argstable-doc-block-removed) + - [`Source` Doc block properties](#source-doc-block-properties) + - [`Canvas` Doc block properties](#canvas-doc-block-properties) + - [`Primary` Doc block properties](#primary-doc-block-properties) + - [`createChannel` from `@storybook/postmessage` and `@storybook/channel-websocket`](#createchannel-from-storybookpostmessage-and-storybookchannel-websocket) + - [StoryStore and methods deprecated](#storystore-and-methods-deprecated) + - [Addon author changes](#addon-author-changes) + - [Tab addons cannot manually route, Tool addons can filter their visibility via tabId](#tab-addons-cannot-manually-route-tool-addons-can-filter-their-visibility-via-tabid) + - [Removed `config` preset](#removed-config-preset-1) +- [From version 7.5.0 to 7.6.0](#from-version-750-to-760) + - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated) + - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated) + - [typescript.skipBabel deprecated](#typescriptskipbabel-deprecated) + - [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop) + - [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react) +- [From version 7.4.0 to 7.5.0](#from-version-740-to-750) + - [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated) + - [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers) +- [From version 7.0.0 to 7.2.0](#from-version-700-to-720) + - [Addon API is more type-strict](#addon-api-is-more-type-strict) + - [Addon-controls hideNoControlsWarning parameter is deprecated](#addon-controls-hidenocontrolswarning-parameter-is-deprecated) +- [From version 6.5.x to 7.0.0](#from-version-65x-to-700) + - [7.0 breaking changes](#70-breaking-changes) + - [Dropped support for Node 15 and below](#dropped-support-for-node-15-and-below) + - [Default export in Preview.js](#default-export-in-previewjs) + - [ESM format in Main.js](#esm-format-in-mainjs) + - [Modern browser support](#modern-browser-support) + - [React peer dependencies required](#react-peer-dependencies-required) + - [start-storybook / build-storybook binaries removed](#start-storybook--build-storybook-binaries-removed) + - [New Framework API](#new-framework-api) + - [Available framework packages](#available-framework-packages) + - [Framework field mandatory](#framework-field-mandatory) + - [frameworkOptions renamed](#frameworkoptions-renamed) + - [builderOptions renamed](#builderoptions-renamed) + - [TypeScript: StorybookConfig type moved](#typescript-storybookconfig-type-moved) + - [Titles are statically computed](#titles-are-statically-computed) + - [Framework standalone build moved](#framework-standalone-build-moved) + - [Change of root html IDs](#change-of-root-html-ids) + - [Stories glob matches MDX files](#stories-glob-matches-mdx-files) + - [Add strict mode](#add-strict-mode) + - [Importing plain markdown files with `transcludeMarkdown` has changed](#importing-plain-markdown-files-with-transcludemarkdown-has-changed) + - [Stories field in .storybook/main.js is mandatory](#stories-field-in-storybookmainjs-is-mandatory) + - [Stricter global types](#stricter-global-types) + - [Deploying build artifacts](#deploying-build-artifacts) + - [Dropped support for file URLs](#dropped-support-for-file-urls) + - [Serving with nginx](#serving-with-nginx) + - [Ignore story files from node\_modules](#ignore-story-files-from-node_modules) + - [7.0 Core changes](#70-core-changes) + - [7.0 feature flags removed](#70-feature-flags-removed) + - [Story context is prepared before for supporting fine grained updates](#story-context-is-prepared-before-for-supporting-fine-grained-updates) + - [Changed decorator order between preview.js and addons/frameworks](#changed-decorator-order-between-previewjs-and-addonsframeworks) + - [Dark mode detection](#dark-mode-detection) + - [`addons.setConfig` should now be imported from `@storybook/manager-api`.](#addonssetconfig-should-now-be-imported-from-storybookmanager-api) + - [7.0 core addons changes](#70-core-addons-changes) + - [Removed auto injection of @storybook/addon-actions decorator](#removed-auto-injection-of-storybookaddon-actions-decorator) + - [Addon-backgrounds: Removed deprecated grid parameter](#addon-backgrounds-removed-deprecated-grid-parameter) + - [Addon-a11y: Removed deprecated withA11y decorator](#addon-a11y-removed-deprecated-witha11y-decorator) + - [Addon-interactions: Interactions debugger is now default](#addon-interactions-interactions-debugger-is-now-default) + - [7.0 Vite changes](#70-vite-changes) + - [Vite builder uses Vite config automatically](#vite-builder-uses-vite-config-automatically) + - [Vite cache moved to node\_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook) + - [7.0 Webpack changes](#70-webpack-changes) + - [Webpack4 support discontinued](#webpack4-support-discontinued) + - [Babel mode v7 exclusively](#babel-mode-v7-exclusively) + - [Postcss removed](#postcss-removed) + - [Removed DLL flags](#removed-dll-flags) + - [7.0 Framework-specific changes](#70-framework-specific-changes) + - [Angular: Removed deprecated `component` and `propsMeta` field](#angular-removed-deprecated-component-and-propsmeta-field) + - [Angular: Drop support for Angular \< 14](#angular-drop-support-for-angular--14) + - [Angular: Drop support for calling Storybook directly](#angular-drop-support-for-calling-storybook-directly) + - [Angular: Application providers and ModuleWithProviders](#angular-application-providers-and-modulewithproviders) + - [Angular: Removed legacy renderer](#angular-removed-legacy-renderer) + - [Next.js: use the `@storybook/nextjs` framework](#nextjs-use-the-storybooknextjs-framework) + - [SvelteKit: needs the `@storybook/sveltekit` framework](#sveltekit-needs-the-storybooksveltekit-framework) + - [Vue3: replaced app export with setup](#vue3-replaced-app-export-with-setup) + - [Web-components: dropped lit-html v1 support](#web-components-dropped-lit-html-v1-support) + - [Create React App: dropped CRA4 support](#create-react-app-dropped-cra4-support) + - [HTML: No longer auto-dedents source code](#html-no-longer-auto-dedents-source-code) + - [7.0 Addon authors changes](#70-addon-authors-changes) + - [New Addons API](#new-addons-api) + - [Specific instructions for addon creators](#specific-instructions-for-addon-creators) + - [Specific instructions for addon users](#specific-instructions-for-addon-users) + - [register.js removed](#registerjs-removed) + - [No more default export from `@storybook/addons`](#no-more-default-export-from-storybookaddons) + - [No more configuration for manager](#no-more-configuration-for-manager) + - [Icons API changed](#icons-api-changed) + - [Removed global client APIs](#removed-global-client-apis) + - [framework parameter renamed to renderer](#framework-parameter-renamed-to-renderer) + - [7.0 Docs changes](#70-docs-changes) + - [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) + - [Explicit `` elements are no longer syntax highlighted](#explicit-code-elements-are-no-longer-syntax-highlighted) + - [Dropped source loader / storiesOf static snippets](#dropped-source-loader--storiesof-static-snippets) + - [Removed docs.getContainer and getPage parameters](#removed-docsgetcontainer-and-getpage-parameters) + - [Addon-docs: Removed deprecated blocks.js entry](#addon-docs-removed-deprecated-blocksjs-entry) + - [Dropped addon-docs manual babel configuration](#dropped-addon-docs-manual-babel-configuration) + - [Dropped addon-docs manual configuration](#dropped-addon-docs-manual-configuration) + - [Autoplay in docs](#autoplay-in-docs) + - [Removed STORYBOOK\_REACT\_CLASSES global](#removed-storybook_react_classes-global) + - [7.0 Deprecations and default changes](#70-deprecations-and-default-changes) + - [storyStoreV7 enabled by default](#storystorev7-enabled-by-default) + - [`Story` type deprecated](#story-type-deprecated) + - [`ComponentStory`, `ComponentStoryObj`, `ComponentStoryFn` and `ComponentMeta` types are deprecated](#componentstory-componentstoryobj-componentstoryfn-and-componentmeta-types-are-deprecated) + - [Renamed `renderToDOM` to `renderToCanvas`](#renamed-rendertodom-to-rendertocanvas) + - [Renamed `XFramework` to `XRenderer`](#renamed-xframework-to-xrenderer) + - [Renamed `DecoratorFn` to `Decorator`](#renamed-decoratorfn-to-decorator) + - [CLI option `--use-npm` deprecated](#cli-option---use-npm-deprecated) + - ['config' preset entry replaced with 'previewAnnotations'](#config-preset-entry-replaced-with-previewannotations) +- [From version 6.4.x to 6.5.0](#from-version-64x-to-650) + - [Vue 3 upgrade](#vue-3-upgrade) + - [React18 new root API](#react18-new-root-api) + - [Renamed isToolshown to showToolbar](#renamed-istoolshown-to-showtoolbar) + - [Dropped support for addon-actions addDecorators](#dropped-support-for-addon-actions-adddecorators) + - [Vite builder renamed](#vite-builder-renamed) + - [Docs framework refactor for React](#docs-framework-refactor-for-react) + - [Opt-in MDX2 support](#opt-in-mdx2-support) + - [CSF3 auto-title improvements](#csf3-auto-title-improvements) + - [Auto-title filename case](#auto-title-filename-case) + - [Auto-title redundant filename](#auto-title-redundant-filename) + - [Auto-title always prefixes](#auto-title-always-prefixes) + - [6.5 Deprecations](#65-deprecations) + - [Deprecated register.js](#deprecated-registerjs) +- [From version 6.3.x to 6.4.0](#from-version-63x-to-640) + - [Automigrate](#automigrate) + - [CRA5 upgrade](#cra5-upgrade) + - [CSF3 enabled](#csf3-enabled) + - [Optional titles](#optional-titles) + - [String literal titles](#string-literal-titles) + - [StoryObj type](#storyobj-type) + - [Story Store v7](#story-store-v7) + - [Behavioral differences](#behavioral-differences) + - [Main.js framework field](#mainjs-framework-field) + - [Using the v7 store](#using-the-v7-store) + - [v7-style story sort](#v7-style-story-sort) + - [v7 default sort behavior](#v7-default-sort-behavior) + - [v7 Store API changes for addon authors](#v7-store-api-changes-for-addon-authors) + - [Storyshots compatibility in the v7 store](#storyshots-compatibility-in-the-v7-store) + - [Emotion11 quasi-compatibility](#emotion11-quasi-compatibility) + - [Babel mode v7](#babel-mode-v7) + - [Loader behavior with args changes](#loader-behavior-with-args-changes) + - [6.4 Angular changes](#64-angular-changes) + - [SB Angular builder](#sb-angular-builder) + - [Angular13](#angular13) + - [Angular component parameter removed](#angular-component-parameter-removed) + - [6.4 deprecations](#64-deprecations) + - [Deprecated --static-dir CLI flag](#deprecated---static-dir-cli-flag) +- [From version 6.2.x to 6.3.0](#from-version-62x-to-630) + - [Webpack 5](#webpack-5) + - [Fixing hoisting issues](#fixing-hoisting-issues) + - [Webpack 5 manager build](#webpack-5-manager-build) + - [Wrong webpack version](#wrong-webpack-version) + - [Angular 12 upgrade](#angular-12-upgrade) + - [Lit support](#lit-support) + - [No longer inferring default values of args](#no-longer-inferring-default-values-of-args) + - [6.3 deprecations](#63-deprecations) + - [Deprecated addon-knobs](#deprecated-addon-knobs) + - [Deprecated scoped blocks imports](#deprecated-scoped-blocks-imports) + - [Deprecated layout URL params](#deprecated-layout-url-params) +- [From version 6.1.x to 6.2.0](#from-version-61x-to-620) + - [MDX pattern tweaked](#mdx-pattern-tweaked) + - [6.2 Angular overhaul](#62-angular-overhaul) + - [New Angular storyshots format](#new-angular-storyshots-format) + - [Deprecated Angular story component](#deprecated-angular-story-component) + - [New Angular renderer](#new-angular-renderer) + - [Components without selectors](#components-without-selectors) + - [Packages now available as ESModules](#packages-now-available-as-esmodules) + - [6.2 Deprecations](#62-deprecations) + - [Deprecated implicit PostCSS loader](#deprecated-implicit-postcss-loader) + - [Deprecated default PostCSS plugins](#deprecated-default-postcss-plugins) + - [Deprecated showRoots config option](#deprecated-showroots-config-option) + - [Deprecated control.options](#deprecated-controloptions) + - [Deprecated storybook components html entry point](#deprecated-storybook-components-html-entry-point) +- [From version 6.0.x to 6.1.0](#from-version-60x-to-610) + - [Addon-backgrounds preset](#addon-backgrounds-preset) + - [Single story hoisting](#single-story-hoisting) + - [React peer dependencies](#react-peer-dependencies) + - [6.1 deprecations](#61-deprecations) + - [Deprecated DLL flags](#deprecated-dll-flags) + - [Deprecated storyFn](#deprecated-storyfn) + - [Deprecated onBeforeRender](#deprecated-onbeforerender) + - [Deprecated grid parameter](#deprecated-grid-parameter) + - [Deprecated package-composition disabled parameter](#deprecated-package-composition-disabled-parameter) +- [From version 5.3.x to 6.0.x](#from-version-53x-to-60x) + - [Hoisted CSF annotations](#hoisted-csf-annotations) + - [Zero config typescript](#zero-config-typescript) + - [Correct globs in main.js](#correct-globs-in-mainjs) + - [CRA preset removed](#cra-preset-removed) + - [Core-JS dependency errors](#core-js-dependency-errors) + - [Args passed as first argument to story](#args-passed-as-first-argument-to-story) + - [6.0 Docs breaking changes](#60-docs-breaking-changes) + - [Remove framework-specific docs presets](#remove-framework-specific-docs-presets) + - [Preview/Props renamed](#previewprops-renamed) + - [Docs theme separated](#docs-theme-separated) + - [DocsPage slots removed](#docspage-slots-removed) + - [React prop tables with Typescript](#react-prop-tables-with-typescript) + - [ConfigureJSX true by default in React](#configurejsx-true-by-default-in-react) + - [User babelrc disabled by default in MDX](#user-babelrc-disabled-by-default-in-mdx) + - [Docs description parameter](#docs-description-parameter) + - [6.0 Inline stories](#60-inline-stories) + - [New addon presets](#new-addon-presets) + - [Removed babel-preset-vue from Vue preset](#removed-babel-preset-vue-from-vue-preset) + - [Removed Deprecated APIs](#removed-deprecated-apis) + - [New setStories event](#new-setstories-event) + - [Removed renderCurrentStory event](#removed-rendercurrentstory-event) + - [Removed hierarchy separators](#removed-hierarchy-separators) + - [No longer pass denormalized parameters to storySort](#no-longer-pass-denormalized-parameters-to-storysort) + - [Client API changes](#client-api-changes) + - [Removed Legacy Story APIs](#removed-legacy-story-apis) + - [Can no longer add decorators/parameters after stories](#can-no-longer-add-decoratorsparameters-after-stories) + - [Changed Parameter Handling](#changed-parameter-handling) + - [Simplified Render Context](#simplified-render-context) + - [Story Store immutable outside of configuration](#story-store-immutable-outside-of-configuration) + - [Improved story source handling](#improved-story-source-handling) + - [6.0 Addon API changes](#60-addon-api-changes) + - [Consistent local addon paths in main.js](#consistent-local-addon-paths-in-mainjs) + - [Deprecated setAddon](#deprecated-setaddon) + - [Deprecated disabled parameter](#deprecated-disabled-parameter) + - [Actions addon uses parameters](#actions-addon-uses-parameters) + - [Removed action decorator APIs](#removed-action-decorator-apis) + - [Removed withA11y decorator](#removed-witha11y-decorator) + - [Essentials addon disables differently](#essentials-addon-disables-differently) + - [Backgrounds addon has a new api](#backgrounds-addon-has-a-new-api) + - [6.0 Deprecations](#60-deprecations) + - [Deprecated addon-info, addon-notes](#deprecated-addon-info-addon-notes) + - [Deprecated addon-contexts](#deprecated-addon-contexts) + - [Removed addon-centered](#removed-addon-centered) + - [Deprecated polymer](#deprecated-polymer) + - [Deprecated immutable options parameters](#deprecated-immutable-options-parameters) + - [Deprecated addParameters and addDecorator](#deprecated-addparameters-and-adddecorator) + - [Deprecated clearDecorators](#deprecated-cleardecorators) + - [Deprecated configure](#deprecated-configure) + - [Deprecated support for duplicate kinds](#deprecated-support-for-duplicate-kinds) +- [From version 5.2.x to 5.3.x](#from-version-52x-to-53x) + - [To main.js configuration](#to-mainjs-configuration) + - [Using main.js](#using-mainjs) + - [Using preview.js](#using-previewjs) + - [Using manager.js](#using-managerjs) + - [Create React App preset](#create-react-app-preset) + - [Description doc block](#description-doc-block) + - [React Native Async Storage](#react-native-async-storage) + - [Deprecate displayName parameter](#deprecate-displayname-parameter) + - [Unified docs preset](#unified-docs-preset) + - [Simplified hierarchy separators](#simplified-hierarchy-separators) + - [Addon StoryShots Puppeteer uses external puppeteer](#addon-storyshots-puppeteer-uses-external-puppeteer) +- [From version 5.1.x to 5.2.x](#from-version-51x-to-52x) + - [Source-loader](#source-loader) + - [Default viewports](#default-viewports) + - [Grid toolbar-feature](#grid-toolbar-feature) + - [Docs mode docgen](#docs-mode-docgen) + - [storySort option](#storysort-option) +- [From version 5.1.x to 5.1.10](#from-version-51x-to-5110) + - [babel.config.js support](#babelconfigjs-support) +- [From version 5.0.x to 5.1.x](#from-version-50x-to-51x) + - [React native server](#react-native-server) + - [Angular 7](#angular-7) + - [CoreJS 3](#corejs-3) +- [From version 5.0.1 to 5.0.2](#from-version-501-to-502) + - [Deprecate webpack extend mode](#deprecate-webpack-extend-mode) +- [From version 4.1.x to 5.0.x](#from-version-41x-to-50x) + - [sortStoriesByKind](#sortstoriesbykind) + - [Webpack config simplification](#webpack-config-simplification) + - [Theming overhaul](#theming-overhaul) + - [Story hierarchy defaults](#story-hierarchy-defaults) + - [Options addon deprecated](#options-addon-deprecated) + - [Individual story decorators](#individual-story-decorators) + - [Addon backgrounds uses parameters](#addon-backgrounds-uses-parameters) + - [Addon cssresources name attribute renamed](#addon-cssresources-name-attribute-renamed) + - [Addon viewport uses parameters](#addon-viewport-uses-parameters) + - [Addon a11y uses parameters, decorator renamed](#addon-a11y-uses-parameters-decorator-renamed) + - [Addon centered decorator deprecated](#addon-centered-decorator-deprecated) + - [New keyboard shortcuts defaults](#new-keyboard-shortcuts-defaults) + - [New URL structure](#new-url-structure) + - [Rename of the `--secure` cli parameter to `--https`](#rename-of-the---secure-cli-parameter-to---https) + - [Vue integration](#vue-integration) +- [From version 4.0.x to 4.1.x](#from-version-40x-to-41x) + - [Private addon config](#private-addon-config) + - [React 15.x](#react-15x) +- [From version 3.4.x to 4.0.x](#from-version-34x-to-40x) + - [React 16.3+](#react-163) + - [Generic addons](#generic-addons) + - [Knobs select ordering](#knobs-select-ordering) + - [Knobs URL parameters](#knobs-url-parameters) + - [Keyboard shortcuts moved](#keyboard-shortcuts-moved) + - [Removed addWithInfo](#removed-addwithinfo) + - [Removed RN packager](#removed-rn-packager) + - [Removed RN addons](#removed-rn-addons) + - [Storyshots Changes](#storyshots-changes) + - [Webpack 4](#webpack-4) + - [Babel 7](#babel-7) + - [Create-react-app](#create-react-app) + - [Upgrade CRA1 to babel 7](#upgrade-cra1-to-babel-7) + - [Migrate CRA1 while keeping babel 6](#migrate-cra1-while-keeping-babel-6) + - [start-storybook opens browser](#start-storybook-opens-browser) + - [CLI Rename](#cli-rename) + - [Addon story parameters](#addon-story-parameters) +- [From version 3.3.x to 3.4.x](#from-version-33x-to-34x) +- [From version 3.2.x to 3.3.x](#from-version-32x-to-33x) + - [`babel-core` is now a peer dependency #2494](#babel-core-is-now-a-peer-dependency-2494) + - [Base webpack config now contains vital plugins #1775](#base-webpack-config-now-contains-vital-plugins-1775) + - [Refactored Knobs](#refactored-knobs) +- [From version 3.1.x to 3.2.x](#from-version-31x-to-32x) + - [Moved TypeScript addons definitions](#moved-typescript-addons-definitions) + - [Updated Addons API](#updated-addons-api) +- [From version 3.0.x to 3.1.x](#from-version-30x-to-31x) + - [Moved TypeScript definitions](#moved-typescript-definitions) + - [Deprecated head.html](#deprecated-headhtml) +- [From version 2.x.x to 3.x.x](#from-version-2xx-to-3xx) + - [Webpack upgrade](#webpack-upgrade) + - [Packages renaming](#packages-renaming) + - [Deprecated embedded addons](#deprecated-embedded-addons) ## From version 8.0 to 8.1.0 @@ -1384,12 +1382,6 @@ We will remove the `typescript.skipBabel` option in Storybook 8.0. Please use `t The `Primary` doc block now also accepts an `of` prop as described in the [Doc Blocks](#doc-blocks) section. It still accepts being passed `name` or no props at all. -##### Subtitle block and `parameters.componentSubtitle` - -The `Subtitle` block now accepts an `of` prop, which can be a reference to a CSF file or a default export (meta). - -`parameters.componentSubtitle` has been deprecated to be consistent with other parameters related to autodocs, instead use `parameters.docs.subtitle`. - #### Addons no longer need a peer dependency on React Historically the majority of addons have had a peer dependency on React and a handful of Storybook core packages. In most cases this has not been necessary since 7.0 because the Storybook manager makes those available on the global scope. It has created an unnecessary burden for users in non-React projects. From 3889e83c6c37eace04f54f0d369455e7bfb2f56e Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Mon, 22 Apr 2024 13:15:19 +0200 Subject: [PATCH 299/380] rename Subtitle stories --- .../ui/blocks/src/blocks/Subtitle.stories.tsx | 52 +++++++++---------- ... ButtonWithMetaSubtitleAsBoth.stories.tsx} | 2 +- ...taSubtitleAsComponentSubtitle.stories.tsx} | 0 ...ithMetaSubtitleAsDocsSubtitle.stories.tsx} | 0 4 files changed, 27 insertions(+), 27 deletions(-) rename code/ui/blocks/src/examples/{ButtonWithMetaSubtitleInBoth.stories.tsx => ButtonWithMetaSubtitleAsBoth.stories.tsx} (93%) rename code/ui/blocks/src/examples/{ButtonWithMetaSubtitleInComponentSubtitle.stories.tsx => ButtonWithMetaSubtitleAsComponentSubtitle.stories.tsx} (100%) rename code/ui/blocks/src/examples/{ButtonWithMetaSubtitleInDocsSubtitle.stories.tsx => ButtonWithMetaSubtitleAsDocsSubtitle.stories.tsx} (100%) diff --git a/code/ui/blocks/src/blocks/Subtitle.stories.tsx b/code/ui/blocks/src/blocks/Subtitle.stories.tsx index f1a87cd4160e..4fe4a2ef6a19 100644 --- a/code/ui/blocks/src/blocks/Subtitle.stories.tsx +++ b/code/ui/blocks/src/blocks/Subtitle.stories.tsx @@ -2,9 +2,9 @@ import type { Meta, StoryObj } from '@storybook/react'; import React from 'react'; import { Subtitle } from './Subtitle'; import * as DefaultButtonStories from '../examples/Button.stories'; -import * as ButtonStoriesWithMetaSubtitleInBoth from '../examples/ButtonWithMetaSubtitleInBoth.stories'; -import * as ButtonStoriesWithMetaSubtitleInComponentSubtitle from '../examples/ButtonWithMetaSubtitleInComponentSubtitle.stories'; -import * as ButtonStoriesWithMetaSubtitleInDocsSubtitle from '../examples/ButtonWithMetaSubtitleInDocsSubtitle.stories'; +import * as ButtonStoriesWithMetaSubtitleAsBoth from '../examples/ButtonWithMetaSubtitleAsBoth.stories'; +import * as ButtonStoriesWithMetaSubtitleAsComponentSubtitle from '../examples/ButtonWithMetaSubtitleAsComponentSubtitle.stories'; +import * as ButtonStoriesWithMetaSubtitleAsDocsSubtitle from '../examples/ButtonWithMetaSubtitleAsDocsSubtitle.stories'; const meta: Meta = { component: Subtitle, @@ -23,56 +23,56 @@ export default meta; type Story = StoryObj; -export const OfCSFFileInBoth: Story = { +export const OfCSFFileAsBoth: Story = { args: { - of: ButtonStoriesWithMetaSubtitleInBoth, + of: ButtonStoriesWithMetaSubtitleAsBoth, }, parameters: { - relativeCsfPaths: ['../examples/ButtonWithMetaSubtitleInBoth.stories'], + relativeCsfPaths: ['../examples/ButtonWithMetaSubtitleAsBoth.stories'], }, }; -export const OfCSFFileInComponentSubtitle: Story = { - name: 'Of CSF File In parameters.componentSubtitle', +export const OfCSFFileAsComponentSubtitle: Story = { + name: 'Of CSF File As parameters.componentSubtitle', args: { - of: ButtonStoriesWithMetaSubtitleInComponentSubtitle, + of: ButtonStoriesWithMetaSubtitleAsComponentSubtitle, }, parameters: { - relativeCsfPaths: ['../examples/ButtonWithMetaSubtitleInComponentSubtitle.stories'], + relativeCsfPaths: ['../examples/ButtonWithMetaSubtitleAsComponentSubtitle.stories'], }, }; -export const OfCSFFileInDocsSubtitle: Story = { - name: 'Of CSF File In parameters.docs.subtitle', +export const OfCSFFileAsDocsSubtitle: Story = { + name: 'Of CSF File As parameters.docs.subtitle', args: { - of: ButtonStoriesWithMetaSubtitleInDocsSubtitle, + of: ButtonStoriesWithMetaSubtitleAsDocsSubtitle, }, parameters: { - relativeCsfPaths: ['../examples/ButtonWithMetaSubtitleInDocsSubtitle.stories'], + relativeCsfPaths: ['../examples/ButtonWithMetaSubtitleAsDocsSubtitle.stories'], }, }; -export const OfMetaInBoth: Story = { +export const OfMetaAsBoth: Story = { args: { - of: ButtonStoriesWithMetaSubtitleInBoth.default, + of: ButtonStoriesWithMetaSubtitleAsBoth.default, }, parameters: { - relativeCsfPaths: ['../examples/ButtonWithMetaSubtitleInBoth.stories'], + relativeCsfPaths: ['../examples/ButtonWithMetaSubtitleAsBoth.stories'], }, }; -export const OfMetaInComponentSubtitle: Story = { - name: 'Of Meta In parameters.componentSubtitle', +export const OfMetaAsComponentSubtitle: Story = { + name: 'Of Meta As parameters.componentSubtitle', args: { - of: ButtonStoriesWithMetaSubtitleInComponentSubtitle.default, + of: ButtonStoriesWithMetaSubtitleAsComponentSubtitle.default, }, parameters: { - relativeCsfPaths: ['../examples/ButtonWithMetaSubtitleInComponentSubtitle.stories'], + relativeCsfPaths: ['../examples/ButtonWithMetaSubtitleAsComponentSubtitle.stories'], }, }; -export const OfMetaInDocsSubtitle: Story = { - name: 'Of Meta In parameters.docs.subtitle', +export const OfMetaAsDocsSubtitle: Story = { + name: 'Of Meta As parameters.docs.subtitle', args: { - of: ButtonStoriesWithMetaSubtitleInDocsSubtitle.default, + of: ButtonStoriesWithMetaSubtitleAsDocsSubtitle.default, }, parameters: { - relativeCsfPaths: ['../examples/ButtonWithMetaSubtitleInDocsSubtitle.stories'], + relativeCsfPaths: ['../examples/ButtonWithMetaSubtitleAsDocsSubtitle.stories'], }, }; export const DefaultAttached: Story = { @@ -100,5 +100,5 @@ export const OfStringMetaAttached: Story = { }; export const Children: Story = { parameters: { relativeCsfPaths: ['../examples/Button.stories'], attached: true }, - render: () => This subtitle is set inside the Subtitle element., + render: () => This subtitle is a string passed as a children, }; diff --git a/code/ui/blocks/src/examples/ButtonWithMetaSubtitleInBoth.stories.tsx b/code/ui/blocks/src/examples/ButtonWithMetaSubtitleAsBoth.stories.tsx similarity index 93% rename from code/ui/blocks/src/examples/ButtonWithMetaSubtitleInBoth.stories.tsx rename to code/ui/blocks/src/examples/ButtonWithMetaSubtitleAsBoth.stories.tsx index 27327f062d8d..5b4235c07c57 100644 --- a/code/ui/blocks/src/examples/ButtonWithMetaSubtitleInBoth.stories.tsx +++ b/code/ui/blocks/src/examples/ButtonWithMetaSubtitleAsBoth.stories.tsx @@ -21,7 +21,7 @@ const meta = { export default meta; type Story = StoryObj; -export const WithMetaSubtitleInBoth: Story = { +export const WithMetaSubtitleAsBoth: Story = { args: { primary: true, label: 'Button', diff --git a/code/ui/blocks/src/examples/ButtonWithMetaSubtitleInComponentSubtitle.stories.tsx b/code/ui/blocks/src/examples/ButtonWithMetaSubtitleAsComponentSubtitle.stories.tsx similarity index 100% rename from code/ui/blocks/src/examples/ButtonWithMetaSubtitleInComponentSubtitle.stories.tsx rename to code/ui/blocks/src/examples/ButtonWithMetaSubtitleAsComponentSubtitle.stories.tsx diff --git a/code/ui/blocks/src/examples/ButtonWithMetaSubtitleInDocsSubtitle.stories.tsx b/code/ui/blocks/src/examples/ButtonWithMetaSubtitleAsDocsSubtitle.stories.tsx similarity index 100% rename from code/ui/blocks/src/examples/ButtonWithMetaSubtitleInDocsSubtitle.stories.tsx rename to code/ui/blocks/src/examples/ButtonWithMetaSubtitleAsDocsSubtitle.stories.tsx From ee0dd00e28c9cd1d8d07c77a4c74065dd4329c6d Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Mon, 22 Apr 2024 14:19:52 +0200 Subject: [PATCH 300/380] simplify Title extraction --- code/ui/blocks/src/blocks/Title.stories.tsx | 9 ++-- code/ui/blocks/src/blocks/Title.tsx | 48 +++++---------------- 2 files changed, 15 insertions(+), 42 deletions(-) diff --git a/code/ui/blocks/src/blocks/Title.stories.tsx b/code/ui/blocks/src/blocks/Title.stories.tsx index 0eca0b8d2283..a75b6ef72d98 100644 --- a/code/ui/blocks/src/blocks/Title.stories.tsx +++ b/code/ui/blocks/src/blocks/Title.stories.tsx @@ -20,16 +20,14 @@ export default meta; type Story = StoryObj; -export const OfCSFFileInComponentTitle: Story = { - name: 'Of CSF File with title', +export const OfCSFFile: Story = { args: { of: DefaultButtonStories, }, parameters: { relativeCsfPaths: ['../examples/Button.stories'] }, }; -export const OfMetaInComponentTitle: Story = { - name: 'Of meta with title', +export const OfMeta: Story = { args: { of: DefaultButtonStories, }, @@ -46,8 +44,9 @@ export const OfStringMetaAttached: Story = { export const Children: Story = { args: { - children: 'Custom title', + children: 'Title as children', }, + parameters: { relativeCsfPaths: ['../examples/Button.stories'], attached: false }, }; export const DefaultAttached: Story = { diff --git a/code/ui/blocks/src/blocks/Title.tsx b/code/ui/blocks/src/blocks/Title.tsx index a530b720a0cb..55b85ebad717 100644 --- a/code/ui/blocks/src/blocks/Title.tsx +++ b/code/ui/blocks/src/blocks/Title.tsx @@ -1,8 +1,7 @@ import type { ComponentTitle } from '@storybook/types'; import type { FunctionComponent, ReactNode } from 'react'; -import React, { useContext } from 'react'; +import React from 'react'; import { Title as PureTitle } from '../components'; -import { DocsContext } from './DocsContext'; import type { Of } from './useOf'; import { useOf } from './useOf'; @@ -23,28 +22,7 @@ const STORY_KIND_PATH_SEPARATOR = /\s*\/\s*/; export const extractTitle = (title: ComponentTitle) => { const groups = title.trim().split(STORY_KIND_PATH_SEPARATOR); - return (groups && groups[groups.length - 1]) || title; -}; - -const getTitleFromResolvedOf = (resolvedOf: ReturnType): string | null => { - switch (resolvedOf.type) { - case 'meta': { - return resolvedOf.preparedMeta.title || null; - } - case 'story': - case 'component': { - throw new Error( - `Unsupported module type. Title's \`of\` prop only supports \`meta\`, got: ${ - (resolvedOf as any).type - }` - ); - } - default: { - throw new Error( - `Unrecognized module type resolved from 'useOf', got: ${(resolvedOf as any).type}` - ); - } - } + return groups?.[groups?.length - 1] || title; }; export const Title: FunctionComponent = (props) => { @@ -54,21 +32,17 @@ export const Title: FunctionComponent = (props) => { throw new Error('Unexpected `of={undefined}`, did you mistype a CSF file reference?'); } - const context = useContext(DocsContext); - - let content; - if (of) { - const resolvedOf = useOf(of || 'meta'); - content = getTitleFromResolvedOf(resolvedOf); - } - - if (!content) { - content = children; + let preparedMeta; + try { + preparedMeta = useOf(of || 'meta', ['meta']).preparedMeta; + } catch (error) { + if (children && !error.message.includes('did you forget to use ?')) { + // ignore error about unattached CSF since we can still render children + throw error; + } } - if (!content) { - content = extractTitle(context.storyById().title); - } + const content = children || extractTitle(preparedMeta.title); return content ? {content} : null; }; From 688cf1823b9541cc1b41cfbfeddbfb9b8c202242 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Mon, 22 Apr 2024 14:26:18 +0200 Subject: [PATCH 301/380] Move migration note --- MIGRATION.md | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index 2e791f511499..34c0ca87c685 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -2,6 +2,7 @@ - [From version 8.0 to 8.1.0](#from-version-80-to-810) - [Subtitle block and `parameters.componentSubtitle`](#subtitle-block-and-parameterscomponentsubtitle) + - [Title block](#title-block) - [From version 7.x to 8.0.0](#from-version-7x-to-800) - [Portable stories](#portable-stories) - [Project annotations are now merged instead of overwritten in composeStory](#project-annotations-are-now-merged-instead-of-overwritten-in-composestory) @@ -413,6 +414,12 @@ The `Subtitle` block now accepts an `of` prop, which can be a reference to a CSF `parameters.componentSubtitle` has been deprecated to be consistent with other parameters related to autodocs, instead use `parameters.docs.subtitle`. +##### Title block + +The `Title` block now accepts an `of` prop, which can be a reference to a CSF file or a default export (meta). + +It still accepts being passed `children`. + ## From version 7.x to 8.0.0 ### Portable stories @@ -2656,10 +2663,6 @@ Additionally to changing the docs information architecture, we've updated the AP The primary change of the `Meta` block is the ability to attach to CSF files with `` as described above. -##### Title block - -The `Title` block now also accepts an `of` prop as described above. It still accepts being passed `children`. - ##### 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. From 7b2ddea221a8eac43eb45a738d2408e7ef072a16 Mon Sep 17 00:00:00 2001 From: storybook-bot <32066757+storybook-bot@users.noreply.github.com> Date: Mon, 22 Apr 2024 13:01:42 +0000 Subject: [PATCH 302/380] Update CHANGELOG.md for v8.0.9 [skip ci] --- CHANGELOG.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index ef1c0ad4edbf..d93c3b996486 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,14 @@ +## 8.0.9 + +- Addon-docs: Fix MDX compilation when using `@vitejs/plugin-react-swc` with plugins - [#26837](https://github.com/storybookjs/storybook/pull/26837), thanks @JReinhold! +- CSF: Fix typings for control and other properties of argTypes - [#26824](https://github.com/storybookjs/storybook/pull/26824), thanks @kasperpeulen! +- Controls: Fix crashing when docgen extraction partially fails - [#26862](https://github.com/storybookjs/storybook/pull/26862), thanks @yannbf! +- Doc Tools: Signature Type Error Handling - [#26774](https://github.com/storybookjs/storybook/pull/26774), thanks @ethriel3695! +- Next.js: Move sharp into optional deps - [#26787](https://github.com/storybookjs/storybook/pull/26787), thanks @shuta13! +- Nextjs: Support next 14.2 useParams functionality - [#26874](https://github.com/storybookjs/storybook/pull/26874), thanks @yannbf! +- Test: Remove chai as dependency of @storybook/test - [#26852](https://github.com/storybookjs/storybook/pull/26852), thanks @kasperpeulen! +- UI: Fix sidebar search hanging when selecting a story in touch mode - [#26807](https://github.com/storybookjs/storybook/pull/26807), thanks @JReinhold! + ## 8.0.8 - Automigration: Fix name of VTA addon - [#26816](https://github.com/storybookjs/storybook/pull/26816), thanks @valentinpalkovic! From d310cb97aae51792f67c4108cbe47df128a842b6 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 22 Apr 2024 15:36:00 +0200 Subject: [PATCH 303/380] Fix tests --- code/lib/core-events/src/data/create-new-story.ts | 3 +++ .../src/server-channel/create-new-story-channel.test.ts | 3 ++- .../src/server-channel/create-new-story-channel.ts | 7 +++---- 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/code/lib/core-events/src/data/create-new-story.ts b/code/lib/core-events/src/data/create-new-story.ts index 1443e8234f56..362ca55511d4 100644 --- a/code/lib/core-events/src/data/create-new-story.ts +++ b/code/lib/core-events/src/data/create-new-story.ts @@ -10,7 +10,10 @@ export interface CreateNewStoryRequestPayload { } export interface CreateNewStoryResponsePayload { + // The story id storyId: string; + // The story file path relative to the cwd storyFilePath: string; + // The name of the story export in the file exportedStoryName: string; } diff --git a/code/lib/core-server/src/server-channel/create-new-story-channel.test.ts b/code/lib/core-server/src/server-channel/create-new-story-channel.test.ts index 2414743be406..12aa76d02f5d 100644 --- a/code/lib/core-server/src/server-channel/create-new-story-channel.test.ts +++ b/code/lib/core-server/src/server-channel/create-new-story-channel.test.ts @@ -81,7 +81,7 @@ describe('createNewStoryChannel', () => { id: 'components-page--default', payload: { storyId: 'components-page--default', - storyFilePath: './src/components/Page.stories.jsx', + storyFilePath: path.join('src', 'components', 'Page.stories.jsx'), exportedStoryName: 'Default', }, success: true, @@ -116,6 +116,7 @@ describe('createNewStoryChannel', () => { componentFilePath: 'src/components/Page.jsx', componentExportName: 'Page', componentIsDefaultExport: true, + componentExportCount: 1, }, } satisfies RequestData); diff --git a/code/lib/core-server/src/server-channel/create-new-story-channel.ts b/code/lib/core-server/src/server-channel/create-new-story-channel.ts index f003cb54a0cb..d11ab389ecc3 100644 --- a/code/lib/core-server/src/server-channel/create-new-story-channel.ts +++ b/code/lib/core-server/src/server-channel/create-new-story-channel.ts @@ -15,7 +15,6 @@ import { existsSync } from 'node:fs'; import { getNewStoryFile } from '../utils/get-new-story-file'; import { getStoryId } from '../utils/get-story-id'; import path from 'node:path'; -import { getProjectRoot } from '@storybook/core-common'; export function initCreateNewStoryChannel(channel: Channel, options: Options) { /** @@ -30,10 +29,10 @@ export function initCreateNewStoryChannel(channel: Channel, options: Options) { options ); - const relativeStoryFilePath = path.relative(getProjectRoot(), storyFilePath); + const relativeStoryFilePath = path.relative(process.cwd(), storyFilePath); if (existsSync(storyFilePath)) { - throw new Error(`Story file already exists at .${path.sep}${relativeStoryFilePath}`); + throw new Error(`Story file already exists at ${relativeStoryFilePath}`); } await fs.writeFile(storyFilePath, storyFileContent, 'utf-8'); @@ -45,7 +44,7 @@ export function initCreateNewStoryChannel(channel: Channel, options: Options) { id: data.id, payload: { storyId, - storyFilePath: `./${relativeStoryFilePath}`, + storyFilePath: path.relative(process.cwd(), storyFilePath), exportedStoryName, }, error: null, From 7702cb647a605d51533cc368a44ce40cef2fbbfa Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Tue, 23 Apr 2024 04:46:45 -0600 Subject: [PATCH 304/380] Fix Modals in onboarding and add stories to manager's Storybook --- code/addons/onboarding/package.json | 4 ++- .../src/components/Confetti/Confetti.tsx | 2 +- .../WelcomeModal/WelcomeModal.stories.tsx | 31 +++++++++++++++++-- .../WelcomeModal/WelcomeModal.styled.tsx | 5 +++ .../features/WelcomeModal/WelcomeModal.tsx | 9 +++--- .../WriteStoriesModal.stories.tsx | 28 ++++++++++++++++- .../WriteStoriesModal.styled.tsx | 5 +++ .../WriteStoriesModal/WriteStoriesModal.tsx | 7 +++-- code/ui/.storybook/main.ts | 4 +++ 9 files changed, 84 insertions(+), 11 deletions(-) diff --git a/code/addons/onboarding/package.json b/code/addons/onboarding/package.json index 8919cabdb5b6..b4d1940b6b3a 100644 --- a/code/addons/onboarding/package.json +++ b/code/addons/onboarding/package.json @@ -45,6 +45,9 @@ "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/addon-bundle.ts" }, + "dependencies": { + "react-confetti": "^6.1.0" + }, "devDependencies": { "@radix-ui/react-dialog": "^1.0.5", "@storybook/channels": "workspace:*", @@ -59,7 +62,6 @@ "@storybook/types": "workspace:*", "framer-motion": "^11.0.3", "react": "^18.2.0", - "react-confetti": "^6.1.0", "react-dom": "^18.2.0", "react-joyride": "^2.7.2", "react-use-measure": "^2.1.1", diff --git a/code/addons/onboarding/src/components/Confetti/Confetti.tsx b/code/addons/onboarding/src/components/Confetti/Confetti.tsx index 5f0658dc462b..763a835e88a8 100644 --- a/code/addons/onboarding/src/components/Confetti/Confetti.tsx +++ b/code/addons/onboarding/src/components/Confetti/Confetti.tsx @@ -1,4 +1,4 @@ -import { ReactConfetti } from 'react-confetti/src/ReactConfetti'; +import ReactConfetti from 'react-confetti'; import React, { useEffect } from 'react'; import { styled } from '@storybook/theming'; import { createPortal } from 'react-dom'; diff --git a/code/addons/onboarding/src/features/WelcomeModal/WelcomeModal.stories.tsx b/code/addons/onboarding/src/features/WelcomeModal/WelcomeModal.stories.tsx index ecf153295ee6..791698211dfe 100644 --- a/code/addons/onboarding/src/features/WelcomeModal/WelcomeModal.stories.tsx +++ b/code/addons/onboarding/src/features/WelcomeModal/WelcomeModal.stories.tsx @@ -1,11 +1,38 @@ -import React from 'react'; +import React, { useState } from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import { WelcomeModal } from './WelcomeModal'; const meta: Meta = { component: WelcomeModal, - decorators: [(storyFn) =>
{storyFn()}
], + // This decorator is used to show the modal in the side by side view + decorators: [ + (Story, context) => { + const [container, setContainer] = useState(undefined); + + if (context.globals.theme === 'side-by-side') { + return ( +
{ + if (element) { + setContainer(element); + } + }} + style={{ + width: '100%', + height: '100%', + minHeight: '600px', + transform: 'translateZ(0)', + }} + > + {Story({ args: { ...context.args, container } })} +
+ ); + } + + return Story(); + }, + ], }; export default meta; diff --git a/code/addons/onboarding/src/features/WelcomeModal/WelcomeModal.styled.tsx b/code/addons/onboarding/src/features/WelcomeModal/WelcomeModal.styled.tsx index 503c97e102ef..8728edfa6045 100644 --- a/code/addons/onboarding/src/features/WelcomeModal/WelcomeModal.styled.tsx +++ b/code/addons/onboarding/src/features/WelcomeModal/WelcomeModal.styled.tsx @@ -1,5 +1,10 @@ import { ArrowRightIcon } from '@storybook/icons'; import { keyframes, styled } from '@storybook/theming'; +import { Modal } from '@storybook/components'; + +export const ModalWrapper = styled(Modal)` + background: white; +`; export const ModalContentWrapper = styled.div` border-radius: 5px; diff --git a/code/addons/onboarding/src/features/WelcomeModal/WelcomeModal.tsx b/code/addons/onboarding/src/features/WelcomeModal/WelcomeModal.tsx index c971eecfa22f..a8000fd6ea63 100644 --- a/code/addons/onboarding/src/features/WelcomeModal/WelcomeModal.tsx +++ b/code/addons/onboarding/src/features/WelcomeModal/WelcomeModal.tsx @@ -1,4 +1,3 @@ -import { Modal } from '@storybook/components'; import type { FC } from 'react'; import React from 'react'; @@ -15,17 +14,19 @@ import { Circle2, Circle3, TopContent, + ModalWrapper, } from './WelcomeModal.styled'; interface WelcomeModalProps { onProceed: () => void; skipOnboarding: () => void; + container?: HTMLElement; } -export const WelcomeModal: FC = ({ onProceed, skipOnboarding }) => { +export const WelcomeModal: FC = ({ onProceed, skipOnboarding, container }) => { return (
- + @@ -48,7 +49,7 @@ export const WelcomeModal: FC = ({ onProceed, skipOnboarding - +
); }; diff --git a/code/addons/onboarding/src/features/WriteStoriesModal/WriteStoriesModal.stories.tsx b/code/addons/onboarding/src/features/WriteStoriesModal/WriteStoriesModal.stories.tsx index d2fe6ba470b4..6902466a8e15 100644 --- a/code/addons/onboarding/src/features/WriteStoriesModal/WriteStoriesModal.stories.tsx +++ b/code/addons/onboarding/src/features/WriteStoriesModal/WriteStoriesModal.stories.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import { waitFor, within, expect, fn } from '@storybook/test'; @@ -33,6 +33,7 @@ const meta: Meta = { }), }, }, + decorators: [ (storyFn, context) => { (context.args.api.getData as typeof getData) @@ -42,6 +43,31 @@ const meta: Meta = { .mockReturnValueOnce({ some: 'data' }); return
{storyFn()}
; }, + (Story, context) => { + const [container, setContainer] = useState(undefined); + + if (context.globals.theme === 'side-by-side') { + return ( +
{ + if (element) { + setContainer(element); + } + }} + style={{ + width: '100%', + height: '100%', + minHeight: '600px', + transform: 'translateZ(0)', + }} + > + {Story({ args: { ...context.args, container } })} +
+ ); + } + + return Story(); + }, ], }; diff --git a/code/addons/onboarding/src/features/WriteStoriesModal/WriteStoriesModal.styled.tsx b/code/addons/onboarding/src/features/WriteStoriesModal/WriteStoriesModal.styled.tsx index b47dba7c7c39..9b63cf6daf3d 100644 --- a/code/addons/onboarding/src/features/WriteStoriesModal/WriteStoriesModal.styled.tsx +++ b/code/addons/onboarding/src/features/WriteStoriesModal/WriteStoriesModal.styled.tsx @@ -1,4 +1,9 @@ import { keyframes, styled } from '@storybook/theming'; +import { Modal } from '@storybook/components'; + +export const ModalWrapper = styled(Modal)` + background: white; +`; export const ModalContent = styled.div` display: flex; diff --git a/code/addons/onboarding/src/features/WriteStoriesModal/WriteStoriesModal.tsx b/code/addons/onboarding/src/features/WriteStoriesModal/WriteStoriesModal.tsx index 7bfb4ea3a2e9..333e1826bb2e 100644 --- a/code/addons/onboarding/src/features/WriteStoriesModal/WriteStoriesModal.tsx +++ b/code/addons/onboarding/src/features/WriteStoriesModal/WriteStoriesModal.tsx @@ -12,6 +12,7 @@ import { Main, ModalContent, ModalTitle, + ModalWrapper, SpanHighlight, Step2Text, } from './WriteStoriesModal.styled'; @@ -41,6 +42,7 @@ interface WriteStoriesModalProps { addonsStore: AddonStore; codeSnippets: CodeSnippets; skipOnboarding: () => void; + container?: HTMLElement; } export const WriteStoriesModal: FC = ({ @@ -49,6 +51,7 @@ export const WriteStoriesModal: FC = ({ addonsStore, skipOnboarding, codeSnippets, + container, }) => { const [step, setStep] = useState<'imports' | 'meta' | 'story' | 'args' | 'customStory'>( 'imports' @@ -91,7 +94,7 @@ export const WriteStoriesModal: FC = ({ }, [api, step]); return ( - + {codeSnippets ? ( = ({ - + ); }; diff --git a/code/ui/.storybook/main.ts b/code/ui/.storybook/main.ts index 7c67fa3d58d8..55a7a09b611d 100644 --- a/code/ui/.storybook/main.ts +++ b/code/ui/.storybook/main.ts @@ -23,6 +23,10 @@ const allStories = [ directory: '../../addons/controls/src', // TODO other addons? titlePrefix: '@addons/controls', }, + { + directory: '../../addons/onboarding/src', + titlePrefix: '@addons/onboarding', + }, ]; /** From 466a774abbad0acbb59133b06275286586a0f192 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Tue, 23 Apr 2024 05:06:37 -0600 Subject: [PATCH 305/380] Upgrade babel dependencies --- code/addons/docs/package.json | 2 +- code/frameworks/nextjs/package.json | 24 +- code/lib/cli/package.json | 4 +- code/lib/codemod/package.json | 6 +- code/lib/core-server/package.json | 2 +- code/lib/csf-tools/package.json | 8 +- code/lib/docs-tools/package.json | 2 +- code/yarn.lock | 1105 ++++++++++++++++----------- 8 files changed, 685 insertions(+), 468 deletions(-) diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index 77ccd00d086e..20c26d3fa9d5 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -98,7 +98,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@babel/core": "^7.12.3", + "@babel/core": "^7.24.4", "@mdx-js/react": "^3.0.0", "@storybook/blocks": "workspace:*", "@storybook/client-logger": "workspace:*", diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 65aebaa66c60..e2a136996b8c 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -75,19 +75,19 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@babel/core": "^7.23.2", + "@babel/core": "^7.24.4", "@babel/plugin-syntax-bigint": "^7.8.3", "@babel/plugin-syntax-dynamic-import": "^7.8.3", - "@babel/plugin-syntax-import-assertions": "^7.22.5", - "@babel/plugin-transform-class-properties": "^7.22.5", - "@babel/plugin-transform-export-namespace-from": "^7.22.11", - "@babel/plugin-transform-numeric-separator": "^7.22.11", - "@babel/plugin-transform-object-rest-spread": "^7.22.15", - "@babel/plugin-transform-runtime": "^7.23.2", - "@babel/preset-env": "^7.23.2", - "@babel/preset-react": "^7.22.15", - "@babel/preset-typescript": "^7.23.2", - "@babel/runtime": "^7.23.2", + "@babel/plugin-syntax-import-assertions": "^7.24.1", + "@babel/plugin-transform-class-properties": "^7.24.1", + "@babel/plugin-transform-export-namespace-from": "^7.24.1", + "@babel/plugin-transform-numeric-separator": "^7.24.1", + "@babel/plugin-transform-object-rest-spread": "^7.24.1", + "@babel/plugin-transform-runtime": "^7.24.3", + "@babel/preset-env": "^7.24.4", + "@babel/preset-react": "^7.24.1", + "@babel/preset-typescript": "^7.24.1", + "@babel/runtime": "^7.24.4", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11", "@storybook/addon-actions": "workspace:*", "@storybook/builder-webpack5": "workspace:*", @@ -121,7 +121,7 @@ "tsconfig-paths-webpack-plugin": "^4.0.1" }, "devDependencies": { - "@babel/types": "^7.23.0", + "@babel/types": "^7.24.0", "@types/babel__core": "^7", "@types/babel__plugin-transform-runtime": "^7", "@types/babel__preset-env": "^7", diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json index 200eae0d10e8..1ea9d9ca1181 100644 --- a/code/lib/cli/package.json +++ b/code/lib/cli/package.json @@ -56,8 +56,8 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@babel/core": "^7.23.0", - "@babel/types": "^7.23.0", + "@babel/core": "^7.24.4", + "@babel/types": "^7.24.0", "@ndelangen/get-tarball": "^3.0.7", "@storybook/codemod": "workspace:*", "@storybook/core-common": "workspace:*", diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index 46f9ad028a5e..46037afa5e46 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -54,9 +54,9 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@babel/core": "^7.23.2", - "@babel/preset-env": "^7.23.2", - "@babel/types": "^7.23.0", + "@babel/core": "^7.24.4", + "@babel/preset-env": "^7.24.4", + "@babel/types": "^7.24.0", "@storybook/csf": "^0.1.4", "@storybook/csf-tools": "workspace:*", "@storybook/node-logger": "workspace:*", diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index 9261d64f6e48..f044cd25733e 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -56,7 +56,7 @@ }, "dependencies": { "@aw-web-design/x-default-browser": "1.4.126", - "@babel/core": "^7.23.9", + "@babel/core": "^7.24.4", "@babel/parser": "^7.24.4", "@discoveryjs/json-ext": "^0.5.3", "@storybook/builder-manager": "workspace:*", diff --git a/code/lib/csf-tools/package.json b/code/lib/csf-tools/package.json index 430b347c2451..0c76c17e7758 100644 --- a/code/lib/csf-tools/package.json +++ b/code/lib/csf-tools/package.json @@ -42,10 +42,10 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@babel/generator": "^7.23.0", - "@babel/parser": "^7.23.0", - "@babel/traverse": "^7.23.2", - "@babel/types": "^7.23.0", + "@babel/generator": "^7.24.4", + "@babel/parser": "^7.24.4", + "@babel/traverse": "^7.24.1", + "@babel/types": "^7.24.0", "@storybook/csf": "^0.1.4", "@storybook/types": "workspace:*", "fs-extra": "^11.1.0", diff --git a/code/lib/docs-tools/package.json b/code/lib/docs-tools/package.json index 087113cd0229..5af72a730ae4 100644 --- a/code/lib/docs-tools/package.json +++ b/code/lib/docs-tools/package.json @@ -54,7 +54,7 @@ "lodash": "^4.17.21" }, "devDependencies": { - "@babel/preset-react": "^7.23.3", + "@babel/preset-react": "^7.24.1", "babel-plugin-react-docgen": "4.2.1", "require-from-string": "^2.0.2", "typescript": "^5.3.2" diff --git a/code/yarn.lock b/code/yarn.lock index f033288f0024..e1b518ce055d 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -360,20 +360,20 @@ __metadata: languageName: node linkType: hard -"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.16.0, @babel/code-frame@npm:^7.16.7, @babel/code-frame@npm:^7.21.4, @babel/code-frame@npm:^7.23.5": - version: 7.23.5 - resolution: "@babel/code-frame@npm:7.23.5" +"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.16.0, @babel/code-frame@npm:^7.16.7, @babel/code-frame@npm:^7.21.4, @babel/code-frame@npm:^7.23.5, @babel/code-frame@npm:^7.24.1, @babel/code-frame@npm:^7.24.2": + version: 7.24.2 + resolution: "@babel/code-frame@npm:7.24.2" dependencies: - "@babel/highlight": "npm:^7.23.4" - chalk: "npm:^2.4.2" - checksum: 10c0/a10e843595ddd9f97faa99917414813c06214f4d9205294013e20c70fbdf4f943760da37dec1d998bf3e6fc20fa2918a47c0e987a7e458663feb7698063ad7c6 + "@babel/highlight": "npm:^7.24.2" + picocolors: "npm:^1.0.0" + checksum: 10c0/d1d4cba89475ab6aab7a88242e1fd73b15ecb9f30c109b69752956434d10a26a52cbd37727c4eca104b6d45227bd1dfce39a6a6f4a14c9b2f07f871e968cf406 languageName: node linkType: hard -"@babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.23.5": - version: 7.23.5 - resolution: "@babel/compat-data@npm:7.23.5" - checksum: 10c0/081278ed46131a890ad566a59c61600a5f9557bd8ee5e535890c8548192532ea92590742fd74bd9db83d74c669ef8a04a7e1c85cdea27f960233e3b83c3a957c +"@babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.23.5, @babel/compat-data@npm:^7.24.4": + version: 7.24.4 + resolution: "@babel/compat-data@npm:7.24.4" + checksum: 10c0/9cd8a9cd28a5ca6db5d0e27417d609f95a8762b655e8c9c97fd2de08997043ae99f0139007083c5e607601c6122e8432c85fe391731b19bf26ad458fa0c60dd3 languageName: node linkType: hard @@ -400,7 +400,7 @@ __metadata: languageName: node linkType: hard -"@babel/core@npm:7.24.0, @babel/core@npm:^7.12.0, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.16, @babel/core@npm:^7.18.9, @babel/core@npm:^7.20.12, @babel/core@npm:^7.23.0, @babel/core@npm:^7.23.2, @babel/core@npm:^7.23.9, @babel/core@npm:^7.3.4, @babel/core@npm:^7.7.5": +"@babel/core@npm:7.24.0": version: 7.24.0 resolution: "@babel/core@npm:7.24.0" dependencies: @@ -423,7 +423,30 @@ __metadata: languageName: node linkType: hard -"@babel/generator@npm:7.23.6, @babel/generator@npm:^7.12.11, @babel/generator@npm:^7.23.0, @babel/generator@npm:^7.23.6": +"@babel/core@npm:^7.12.0, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.16, @babel/core@npm:^7.18.9, @babel/core@npm:^7.20.12, @babel/core@npm:^7.23.0, @babel/core@npm:^7.23.2, @babel/core@npm:^7.24.4, @babel/core@npm:^7.3.4, @babel/core@npm:^7.7.5": + version: 7.24.4 + resolution: "@babel/core@npm:7.24.4" + dependencies: + "@ampproject/remapping": "npm:^2.2.0" + "@babel/code-frame": "npm:^7.24.2" + "@babel/generator": "npm:^7.24.4" + "@babel/helper-compilation-targets": "npm:^7.23.6" + "@babel/helper-module-transforms": "npm:^7.23.3" + "@babel/helpers": "npm:^7.24.4" + "@babel/parser": "npm:^7.24.4" + "@babel/template": "npm:^7.24.0" + "@babel/traverse": "npm:^7.24.1" + "@babel/types": "npm:^7.24.0" + convert-source-map: "npm:^2.0.0" + debug: "npm:^4.1.0" + gensync: "npm:^1.0.0-beta.2" + json5: "npm:^2.2.3" + semver: "npm:^6.3.1" + checksum: 10c0/fc136966583e64d6f84f4a676368de6ab4583aa87f867186068655b30ef67f21f8e65a88c6d446a7efd219ad7ffb9185c82e8a90183ee033f6f47b5026641e16 + languageName: node + linkType: hard + +"@babel/generator@npm:7.23.6": version: 7.23.6 resolution: "@babel/generator@npm:7.23.6" dependencies: @@ -435,6 +458,18 @@ __metadata: languageName: node linkType: hard +"@babel/generator@npm:^7.12.11, @babel/generator@npm:^7.23.6, @babel/generator@npm:^7.24.1, @babel/generator@npm:^7.24.4": + version: 7.24.4 + resolution: "@babel/generator@npm:7.24.4" + dependencies: + "@babel/types": "npm:^7.24.0" + "@jridgewell/gen-mapping": "npm:^0.3.5" + "@jridgewell/trace-mapping": "npm:^0.3.25" + jsesc: "npm:^2.5.1" + checksum: 10c0/67a1b2f7cc985aaaa11b01e8ddd4fffa4f285837bc7a209738eb8203aa34bdafeb8507ed75fd883ddbabd641a036ca0a8d984e760f28ad4a9d60bff29d0a60bb + languageName: node + linkType: hard + "@babel/helper-annotate-as-pure@npm:7.22.5, @babel/helper-annotate-as-pure@npm:^7.18.6, @babel/helper-annotate-as-pure@npm:^7.22.5": version: 7.22.5 resolution: "@babel/helper-annotate-as-pure@npm:7.22.5" @@ -453,7 +488,7 @@ __metadata: languageName: node linkType: hard -"@babel/helper-compilation-targets@npm:^7.12.0, @babel/helper-compilation-targets@npm:^7.22.15, @babel/helper-compilation-targets@npm:^7.22.6, @babel/helper-compilation-targets@npm:^7.23.6": +"@babel/helper-compilation-targets@npm:^7.12.0, @babel/helper-compilation-targets@npm:^7.22.6, @babel/helper-compilation-targets@npm:^7.23.6": version: 7.23.6 resolution: "@babel/helper-compilation-targets@npm:7.23.6" dependencies: @@ -466,22 +501,22 @@ __metadata: languageName: node linkType: hard -"@babel/helper-create-class-features-plugin@npm:^7.18.6, @babel/helper-create-class-features-plugin@npm:^7.21.0, @babel/helper-create-class-features-plugin@npm:^7.22.15, @babel/helper-create-class-features-plugin@npm:^7.23.5, @babel/helper-create-class-features-plugin@npm:^7.24.0": - version: 7.24.0 - resolution: "@babel/helper-create-class-features-plugin@npm:7.24.0" +"@babel/helper-create-class-features-plugin@npm:^7.18.6, @babel/helper-create-class-features-plugin@npm:^7.21.0, @babel/helper-create-class-features-plugin@npm:^7.24.1, @babel/helper-create-class-features-plugin@npm:^7.24.4": + version: 7.24.4 + resolution: "@babel/helper-create-class-features-plugin@npm:7.24.4" dependencies: "@babel/helper-annotate-as-pure": "npm:^7.22.5" "@babel/helper-environment-visitor": "npm:^7.22.20" "@babel/helper-function-name": "npm:^7.23.0" "@babel/helper-member-expression-to-functions": "npm:^7.23.0" "@babel/helper-optimise-call-expression": "npm:^7.22.5" - "@babel/helper-replace-supers": "npm:^7.22.20" + "@babel/helper-replace-supers": "npm:^7.24.1" "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5" "@babel/helper-split-export-declaration": "npm:^7.22.6" semver: "npm:^6.3.1" peerDependencies: "@babel/core": ^7.0.0 - checksum: 10c0/341548496df202805489422a160bba75b111d994c64d788a397c35f01784632af48bf06023af8aa2fe72c2c254f8c885b4e0f7f3df5ef17a37370f2feaf80328 + checksum: 10c0/6ebb38375dcd44c79f40008c2de4d023376cf436c135439f15c9c54603c2d6a8ada39b2e07be545da684d9e40b602a0cb0d1670f3877d056deb5f0d786c4bf86 languageName: node linkType: hard @@ -513,9 +548,9 @@ __metadata: languageName: node linkType: hard -"@babel/helper-define-polyfill-provider@npm:^0.6.0": - version: 0.6.0 - resolution: "@babel/helper-define-polyfill-provider@npm:0.6.0" +"@babel/helper-define-polyfill-provider@npm:^0.6.0, @babel/helper-define-polyfill-provider@npm:^0.6.1, @babel/helper-define-polyfill-provider@npm:^0.6.2": + version: 0.6.2 + resolution: "@babel/helper-define-polyfill-provider@npm:0.6.2" dependencies: "@babel/helper-compilation-targets": "npm:^7.22.6" "@babel/helper-plugin-utils": "npm:^7.22.5" @@ -524,7 +559,7 @@ __metadata: resolve: "npm:^1.14.2" peerDependencies: "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0 - checksum: 10c0/bf6af52fadbbebc5bf71166b91eac4fc21431ec9b0d2a94063f3a3d900ed44aa1384ad23e920a85e7a657fcf3e80edb2eaaac9d902bd1e632f3b50c836b45c53 + checksum: 10c0/f777fe0ee1e467fdaaac059c39ed203bdc94ef2465fb873316e9e1acfc511a276263724b061e3b0af2f6d7ad3ff174f2bb368fde236a860e0f650fda43d7e022 languageName: node linkType: hard @@ -554,7 +589,7 @@ __metadata: languageName: node linkType: hard -"@babel/helper-member-expression-to-functions@npm:^7.22.15, @babel/helper-member-expression-to-functions@npm:^7.23.0": +"@babel/helper-member-expression-to-functions@npm:^7.23.0": version: 7.23.0 resolution: "@babel/helper-member-expression-to-functions@npm:7.23.0" dependencies: @@ -563,12 +598,12 @@ __metadata: languageName: node linkType: hard -"@babel/helper-module-imports@npm:^7.16.7, @babel/helper-module-imports@npm:^7.22.15, @babel/helper-module-imports@npm:^7.8.3": - version: 7.22.15 - resolution: "@babel/helper-module-imports@npm:7.22.15" +"@babel/helper-module-imports@npm:^7.16.7, @babel/helper-module-imports@npm:^7.22.15, @babel/helper-module-imports@npm:^7.24.1, @babel/helper-module-imports@npm:^7.24.3, @babel/helper-module-imports@npm:^7.8.3": + version: 7.24.3 + resolution: "@babel/helper-module-imports@npm:7.24.3" dependencies: - "@babel/types": "npm:^7.22.15" - checksum: 10c0/4e0d7fc36d02c1b8c8b3006dfbfeedf7a367d3334a04934255de5128115ea0bafdeb3e5736a2559917f0653e4e437400d54542da0468e08d3cbc86d3bbfa8f30 + "@babel/types": "npm:^7.24.0" + checksum: 10c0/052c188adcd100f5e8b6ff0c9643ddaabc58b6700d3bbbc26804141ad68375a9f97d9d173658d373d31853019e65f62610239e3295cdd58e573bdcb2fded188d languageName: node linkType: hard @@ -616,16 +651,16 @@ __metadata: languageName: node linkType: hard -"@babel/helper-replace-supers@npm:^7.22.20": - version: 7.22.20 - resolution: "@babel/helper-replace-supers@npm:7.22.20" +"@babel/helper-replace-supers@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/helper-replace-supers@npm:7.24.1" dependencies: "@babel/helper-environment-visitor": "npm:^7.22.20" - "@babel/helper-member-expression-to-functions": "npm:^7.22.15" + "@babel/helper-member-expression-to-functions": "npm:^7.23.0" "@babel/helper-optimise-call-expression": "npm:^7.22.5" peerDependencies: "@babel/core": ^7.0.0 - checksum: 10c0/6b0858811ad46873817c90c805015d63300e003c5a85c147a17d9845fa2558a02047c3cc1f07767af59014b2dd0fa75b503e5bc36e917f360e9b67bb6f1e79f4 + checksum: 10c0/d39a3df7892b7c3c0e307fb229646168a9bd35e26a72080c2530729322600e8cff5f738f44a14860a2358faffa741b6a6a0d6749f113387b03ddbfa0ec10e1a0 languageName: node linkType: hard @@ -657,9 +692,9 @@ __metadata: linkType: hard "@babel/helper-string-parser@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/helper-string-parser@npm:7.23.4" - checksum: 10c0/f348d5637ad70b6b54b026d6544bd9040f78d24e7ec245a0fc42293968181f6ae9879c22d89744730d246ce8ec53588f716f102addd4df8bbc79b73ea10004ac + version: 7.24.1 + resolution: "@babel/helper-string-parser@npm:7.24.1" + checksum: 10c0/2f9bfcf8d2f9f083785df0501dbab92770111ece2f90d120352fda6dd2a7d47db11b807d111e6f32aa1ba6d763fe2dc6603d153068d672a5d0ad33ca802632b2 languageName: node linkType: hard @@ -670,7 +705,7 @@ __metadata: languageName: node linkType: hard -"@babel/helper-validator-option@npm:^7.22.15, @babel/helper-validator-option@npm:^7.23.5": +"@babel/helper-validator-option@npm:^7.23.5": version: 7.23.5 resolution: "@babel/helper-validator-option@npm:7.23.5" checksum: 10c0/af45d5c0defb292ba6fd38979e8f13d7da63f9623d8ab9ededc394f67eb45857d2601278d151ae9affb6e03d5d608485806cd45af08b4468a0515cf506510e94 @@ -688,79 +723,83 @@ __metadata: languageName: node linkType: hard -"@babel/helpers@npm:^7.23.9, @babel/helpers@npm:^7.24.0": - version: 7.24.0 - resolution: "@babel/helpers@npm:7.24.0" +"@babel/helpers@npm:^7.23.9, @babel/helpers@npm:^7.24.0, @babel/helpers@npm:^7.24.4": + version: 7.24.4 + resolution: "@babel/helpers@npm:7.24.4" dependencies: "@babel/template": "npm:^7.24.0" - "@babel/traverse": "npm:^7.24.0" + "@babel/traverse": "npm:^7.24.1" "@babel/types": "npm:^7.24.0" - checksum: 10c0/dd27c9f11c1c5244ef312fae37636f2fcc69c541c46508017b846c4cf680af059f1922ce84e3f778f123a70d027ded75c96070ee8e906f3bc52dc26dc43df608 + checksum: 10c0/747ef62b7fe87de31a2f3c19ff337a86cbb79be2f6c18af63133b614ab5a8f6da5b06ae4b06fb0e71271cb6a27efec6f8b6c9f44c60b8a18777832dc7929e6c5 languageName: node linkType: hard -"@babel/highlight@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/highlight@npm:7.23.4" +"@babel/highlight@npm:^7.24.2": + version: 7.24.2 + resolution: "@babel/highlight@npm:7.24.2" dependencies: "@babel/helper-validator-identifier": "npm:^7.22.20" chalk: "npm:^2.4.2" js-tokens: "npm:^4.0.0" - checksum: 10c0/fbff9fcb2f5539289c3c097d130e852afd10d89a3a08ac0b5ebebbc055cc84a4bcc3dcfed463d488cde12dd0902ef1858279e31d7349b2e8cee43913744bda33 + picocolors: "npm:^1.0.0" + checksum: 10c0/98ce00321daedeed33a4ed9362dc089a70375ff1b3b91228b9f05e6591d387a81a8cba68886e207861b8871efa0bc997ceabdd9c90f6cce3ee1b2f7f941b42db languageName: node linkType: hard -"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.11.5, @babel/parser@npm:^7.13.16, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.21.4, @babel/parser@npm:^7.23.0, @babel/parser@npm:^7.23.5, @babel/parser@npm:^7.23.6, @babel/parser@npm:^7.23.9, @babel/parser@npm:^7.24.0, @babel/parser@npm:^7.4.5, @babel/parser@npm:^7.6.0, @babel/parser@npm:^7.9.6": - version: 7.24.0 - resolution: "@babel/parser@npm:7.24.0" +"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.11.5, @babel/parser@npm:^7.13.16, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.21.4, @babel/parser@npm:^7.23.0, @babel/parser@npm:^7.23.5, @babel/parser@npm:^7.23.6, @babel/parser@npm:^7.23.9, @babel/parser@npm:^7.24.0, @babel/parser@npm:^7.24.1, @babel/parser@npm:^7.24.4, @babel/parser@npm:^7.4.5, @babel/parser@npm:^7.6.0, @babel/parser@npm:^7.9.6": + version: 7.24.4 + resolution: "@babel/parser@npm:7.24.4" bin: parser: ./bin/babel-parser.js - checksum: 10c0/77593d0b9de9906823c4d653bb6cda1c7593837598516330f655f70cba6224a37def7dbe5b4dad0038482d407d8d209eb8be5f48ca9a13357d769f829c5adb8e + checksum: 10c0/8381e1efead5069cb7ed2abc3a583f4a86289b2f376c75cecc69f59a8eb36df18274b1886cecf2f97a6a0dff5334b27330f58535be9b3e4e26102cc50e12eac8 languageName: node linkType: hard -"@babel/parser@npm:^7.24.4": +"@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:^7.24.4": version: 7.24.4 - resolution: "@babel/parser@npm:7.24.4" - bin: - parser: ./bin/babel-parser.js - checksum: 10c0/8381e1efead5069cb7ed2abc3a583f4a86289b2f376c75cecc69f59a8eb36df18274b1886cecf2f97a6a0dff5334b27330f58535be9b3e4e26102cc50e12eac8 + resolution: "@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:7.24.4" + dependencies: + "@babel/helper-environment-visitor": "npm:^7.22.20" + "@babel/helper-plugin-utils": "npm:^7.24.0" + peerDependencies: + "@babel/core": ^7.0.0 + checksum: 10c0/9aed453a1a21e4fd29add0b4a2d82a2c6f43a47c80d28411f8327f2a714064bc93a6f622c701d263970e0d72d7901d28f7f51e91ba91a31306efe8f17c411182 languageName: node linkType: hard -"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.23.3" +"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.23.3, @babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0 - checksum: 10c0/356a4e9fc52d7ca761ce6857fc58e2295c2785d22565760e6a5680be86c6e5883ab86e0ba25ef572882c01713d3a31ae6cfa3e3222cdb95e6026671dab1fa415 + checksum: 10c0/d4e592e6fc4878654243d2e7b51ea86471b868a8cb09de29e73b65d2b64159990c6c198fd7c9c2af2e38b1cddf70206243792853c47384a84f829dada152f605 languageName: node linkType: hard -"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:7.23.3" +"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:^7.23.3, @babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5" - "@babel/plugin-transform-optional-chaining": "npm:^7.23.3" + "@babel/plugin-transform-optional-chaining": "npm:^7.24.1" peerDependencies: "@babel/core": ^7.13.0 - checksum: 10c0/a8785f099d55ca71ed89815e0f3a636a80c16031f80934cfec17c928d096ee0798964733320c8b145ef36ba429c5e19d5107b06231e0ab6777cfb0f01adfdc23 + checksum: 10c0/351c36e45795a7890d610ab9041a52f4078a59429f6e74c281984aa44149a10d43e82b3a8172c703c0d5679471e165d1c02b6d2e45a677958ee301b89403f202 languageName: node linkType: hard -"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:^7.23.7": - version: 7.23.7 - resolution: "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:7.23.7" +"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:^7.23.7, @babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:7.24.1" dependencies: "@babel/helper-environment-visitor": "npm:^7.22.20" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0 - checksum: 10c0/355746e21ad7f43e4f4daef54cfe2ef461ecd19446b2afedd53c39df1bf9aa2eeeeaabee2279b1321de89a97c9360e4f76e9ba950fee50ff1676c25f6929d625 + checksum: 10c0/d7dd5a59a54635a3152895dcaa68f3370bb09d1f9906c1e72232ff759159e6be48de4a598a993c986997280a2dc29922a48aaa98020f16439f3f57ad72788354 languageName: node linkType: hard @@ -777,15 +816,15 @@ __metadata: linkType: hard "@babel/plugin-proposal-decorators@npm:^7.13.5, @babel/plugin-proposal-decorators@npm:^7.22.7": - version: 7.24.0 - resolution: "@babel/plugin-proposal-decorators@npm:7.24.0" + version: 7.24.1 + resolution: "@babel/plugin-proposal-decorators@npm:7.24.1" dependencies: - "@babel/helper-create-class-features-plugin": "npm:^7.24.0" + "@babel/helper-create-class-features-plugin": "npm:^7.24.1" "@babel/helper-plugin-utils": "npm:^7.24.0" - "@babel/plugin-syntax-decorators": "npm:^7.24.0" + "@babel/plugin-syntax-decorators": "npm:^7.24.1" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/6bf16cb2b5b2f1b63b5ea964853cd3b3419c8285296b5bf64a64127c9d5c1b2e6829e84bd92734e4b71df67686d8f36fb01bb8a45fc52bcece7503b73bc42ec7 + checksum: 10c0/ffe49522ada6581f1c760b777dbd913afcd204e11e6907c4f2c293ce6d30961449ac19d9960250d8743a1f60e21cb667e51a3af15992dfe7627105e039c46a9b languageName: node linkType: hard @@ -893,14 +932,14 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-syntax-decorators@npm:^7.24.0": - version: 7.24.0 - resolution: "@babel/plugin-syntax-decorators@npm:7.24.0" +"@babel/plugin-syntax-decorators@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-syntax-decorators@npm:7.24.1" dependencies: "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/6c11801e062772d4e1b0b418a4732574128b1dfc13193a2909fa93937346746aaa7046f88f6026ff3c80777c967d0fe2e4bb19a1d3fb399e8349c81741e4f471 + checksum: 10c0/14028a746f86efbdd47e4961456bb53d656e9e3461890f66b1b01032151d15fda5ba99fcaa60232a229a33aa9e73b11c2597b706d5074c520155757e372cd17b languageName: node linkType: hard @@ -926,36 +965,36 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-syntax-flow@npm:^7.22.5": - version: 7.22.5 - resolution: "@babel/plugin-syntax-flow@npm:7.22.5" +"@babel/plugin-syntax-flow@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-syntax-flow@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/07afc7df02141597968532bfbfa3f6c0ad21a2bdd885d0e5e035dcf60fdf35f0995631c9750b464e1a6f2feea14160a82787f914e88e8f7115dc99f09853e43e + checksum: 10c0/618de04360a96111408abdaafaba2efbaef0d90faad029d50e0281eaad5d7c7bd2ce4420bbac0ee27ad84c2b7bbc3e48f782064f81ed5bc40c398637991004c7 languageName: node linkType: hard -"@babel/plugin-syntax-import-assertions@npm:^7.22.5, @babel/plugin-syntax-import-assertions@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-syntax-import-assertions@npm:7.23.3" +"@babel/plugin-syntax-import-assertions@npm:^7.23.3, @babel/plugin-syntax-import-assertions@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-syntax-import-assertions@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/7db8b59f75667bada2293353bb66b9d5651a673b22c72f47da9f5c46e719142481601b745f9822212fd7522f92e26e8576af37116f85dae1b5e5967f80d0faab + checksum: 10c0/72f0340d73e037f0702c61670054e0af66ece7282c5c2f4ba8de059390fee502de282defdf15959cd9f71aa18dc5c5e4e7a0fde317799a0600c6c4e0a656d82b languageName: node linkType: hard -"@babel/plugin-syntax-import-attributes@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-syntax-import-attributes@npm:7.23.3" +"@babel/plugin-syntax-import-attributes@npm:^7.23.3, @babel/plugin-syntax-import-attributes@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-syntax-import-attributes@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/99b40d33d79205a8e04bb5dea56fd72906ffc317513b20ca7319e7683e18fce8ea2eea5e9171056f92b979dc0ab1e31b2cb5171177a5ba61e05b54fe7850a606 + checksum: 10c0/309634e3335777aee902552b2cf244c4a8050213cc878b3fb9d70ad8cbbff325dc46ac5e5791836ff477ea373b27832238205f6ceaff81f7ea7c4c7e8fbb13bb languageName: node linkType: hard @@ -981,14 +1020,14 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-syntax-jsx@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-syntax-jsx@npm:7.23.3" +"@babel/plugin-syntax-jsx@npm:^7.23.3, @babel/plugin-syntax-jsx@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-syntax-jsx@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/563bb7599b868773f1c7c1d441ecc9bc53aeb7832775da36752c926fc402a1fa5421505b39e724f71eb217c13e4b93117e081cac39723b0e11dac4c897f33c3e + checksum: 10c0/6cec76fbfe6ca81c9345c2904d8d9a8a0df222f9269f0962ed6eb2eb8f3f10c2f15e993d1ef09dbaf97726bf1792b5851cf5bd9a769f966a19448df6be95d19a languageName: node linkType: hard @@ -1080,14 +1119,14 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-syntax-typescript@npm:^7.23.3, @babel/plugin-syntax-typescript@npm:^7.3.3": - version: 7.23.3 - resolution: "@babel/plugin-syntax-typescript@npm:7.23.3" +"@babel/plugin-syntax-typescript@npm:^7.24.1, @babel/plugin-syntax-typescript@npm:^7.3.3": + version: 7.24.1 + resolution: "@babel/plugin-syntax-typescript@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/4d6e9cdb9d0bfb9bd9b220fc951d937fce2ca69135ec121153572cebe81d86abc9a489208d6b69ee5f10cadcaeffa10d0425340a5029e40e14a6025021b90948 + checksum: 10c0/7a81e277dcfe3138847e8e5944e02a42ff3c2e864aea6f33fd9b70d1556d12b0e70f0d56cc1985d353c91bcbf8fe163e6cc17418da21129b7f7f1d8b9ac00c93 languageName: node linkType: hard @@ -1103,18 +1142,18 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-arrow-functions@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-arrow-functions@npm:7.23.3" +"@babel/plugin-transform-arrow-functions@npm:^7.23.3, @babel/plugin-transform-arrow-functions@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-arrow-functions@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/b128315c058f5728d29b0b78723659b11de88247ea4d0388f0b935cddf60a80c40b9067acf45cbbe055bd796928faef152a09d9e4a0695465aca4394d9f109ca + checksum: 10c0/f44bfacf087dc21b422bab99f4e9344ee7b695b05c947dacae66de05c723ab9d91800be7edc1fa016185e8c819f3aca2b4a5f66d8a4d1e47d9bad80b8fa55b8e languageName: node linkType: hard -"@babel/plugin-transform-async-generator-functions@npm:7.23.9, @babel/plugin-transform-async-generator-functions@npm:^7.23.9": +"@babel/plugin-transform-async-generator-functions@npm:7.23.9": version: 7.23.9 resolution: "@babel/plugin-transform-async-generator-functions@npm:7.23.9" dependencies: @@ -1128,7 +1167,21 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-async-to-generator@npm:7.23.3, @babel/plugin-transform-async-to-generator@npm:^7.23.3": +"@babel/plugin-transform-async-generator-functions@npm:^7.23.9, @babel/plugin-transform-async-generator-functions@npm:^7.24.3": + version: 7.24.3 + resolution: "@babel/plugin-transform-async-generator-functions@npm:7.24.3" + dependencies: + "@babel/helper-environment-visitor": "npm:^7.22.20" + "@babel/helper-plugin-utils": "npm:^7.24.0" + "@babel/helper-remap-async-to-generator": "npm:^7.22.20" + "@babel/plugin-syntax-async-generators": "npm:^7.8.4" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10c0/55ceed059f819dcccbfe69600bfa1c055ada466bd54eda117cfdd2cf773dd85799e2f6556e4a559b076e93b9704abcca2aef9d72aad7dc8a5d3d17886052f1d3 + languageName: node + linkType: hard + +"@babel/plugin-transform-async-to-generator@npm:7.23.3": version: 7.23.3 resolution: "@babel/plugin-transform-async-to-generator@npm:7.23.3" dependencies: @@ -1141,284 +1194,297 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-block-scoped-functions@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-block-scoped-functions@npm:7.23.3" +"@babel/plugin-transform-async-to-generator@npm:^7.23.3, @babel/plugin-transform-async-to-generator@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-async-to-generator@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-module-imports": "npm:^7.24.1" + "@babel/helper-plugin-utils": "npm:^7.24.0" + "@babel/helper-remap-async-to-generator": "npm:^7.22.20" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/82c12a11277528184a979163de7189ceb00129f60dd930b0d5313454310bf71205f302fb2bf0430247161c8a22aaa9fb9eec1459f9f7468206422c191978fd59 + checksum: 10c0/3731ba8e83cbea1ab22905031f25b3aeb0b97c6467360a2cc685352f16e7c786417d8883bc747f5a0beff32266bdb12a05b6292e7b8b75967087200a7bc012c4 languageName: node linkType: hard -"@babel/plugin-transform-block-scoping@npm:^7.23.4, @babel/plugin-transform-block-scoping@npm:^7.8.3": - version: 7.23.4 - resolution: "@babel/plugin-transform-block-scoping@npm:7.23.4" +"@babel/plugin-transform-block-scoped-functions@npm:^7.23.3, @babel/plugin-transform-block-scoped-functions@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-block-scoped-functions@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/83006804dddf980ab1bcd6d67bc381e24b58c776507c34f990468f820d0da71dba3697355ca4856532fa2eeb2a1e3e73c780f03760b5507a511cbedb0308e276 + checksum: 10c0/6fbaa85f5204f34845dfc0bebf62fdd3ac5a286241c85651e59d426001e7a1785ac501f154e093e0b8ee49e1f51e3f8b06575a5ae8d4a9406d43e4816bf18c37 languageName: node linkType: hard -"@babel/plugin-transform-class-properties@npm:^7.22.5, @babel/plugin-transform-class-properties@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-class-properties@npm:7.23.3" +"@babel/plugin-transform-block-scoping@npm:^7.23.4, @babel/plugin-transform-block-scoping@npm:^7.24.4, @babel/plugin-transform-block-scoping@npm:^7.8.3": + version: 7.24.4 + resolution: "@babel/plugin-transform-block-scoping@npm:7.24.4" dependencies: - "@babel/helper-create-class-features-plugin": "npm:^7.22.15" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/bca30d576f539eef216494b56d610f1a64aa9375de4134bc021d9660f1fa735b1d7cc413029f22abc0b7cb737e3a57935c8ae9d8bd1730921ccb1deebce51bfd + checksum: 10c0/62f55fd1b60a115506e9553c3bf925179b1ab8a42dc31471c4e3ada20573a488b5c5e3317145da352493ef07f1d9750ce1f8a49cb3f39489ac1ab42e5ddc883d languageName: node linkType: hard -"@babel/plugin-transform-class-static-block@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-class-static-block@npm:7.23.4" +"@babel/plugin-transform-class-properties@npm:^7.22.5, @babel/plugin-transform-class-properties@npm:^7.23.3, @babel/plugin-transform-class-properties@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-class-properties@npm:7.24.1" dependencies: - "@babel/helper-create-class-features-plugin": "npm:^7.22.15" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-create-class-features-plugin": "npm:^7.24.1" + "@babel/helper-plugin-utils": "npm:^7.24.0" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10c0/00dff042ac9df4ae67b5ef98b1137cc72e0a24e6d911dc200540a8cb1f00b4cff367a922aeb22da17da662079f0abcd46ee1c5f4cdf37ceebf6ff1639bb9af27 + languageName: node + linkType: hard + +"@babel/plugin-transform-class-static-block@npm:^7.23.4, @babel/plugin-transform-class-static-block@npm:^7.24.4": + version: 7.24.4 + resolution: "@babel/plugin-transform-class-static-block@npm:7.24.4" + dependencies: + "@babel/helper-create-class-features-plugin": "npm:^7.24.4" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/plugin-syntax-class-static-block": "npm:^7.14.5" peerDependencies: "@babel/core": ^7.12.0 - checksum: 10c0/fdca96640ef29d8641a7f8de106f65f18871b38cc01c0f7b696d2b49c76b77816b30a812c08e759d06dd10b4d9b3af6b5e4ac22a2017a88c4077972224b77ab0 + checksum: 10c0/19dfeaf4a2ac03695034f7211a8b5ad89103b224608ac3e91791055107c5fe4d7ebe5d9fbb31b4a91265694af78762260642eb270f4b239c175984ee4b253f80 languageName: node linkType: hard -"@babel/plugin-transform-classes@npm:^7.23.8": - version: 7.23.8 - resolution: "@babel/plugin-transform-classes@npm:7.23.8" +"@babel/plugin-transform-classes@npm:^7.23.8, @babel/plugin-transform-classes@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-classes@npm:7.24.1" dependencies: "@babel/helper-annotate-as-pure": "npm:^7.22.5" "@babel/helper-compilation-targets": "npm:^7.23.6" "@babel/helper-environment-visitor": "npm:^7.22.20" "@babel/helper-function-name": "npm:^7.23.0" - "@babel/helper-plugin-utils": "npm:^7.22.5" - "@babel/helper-replace-supers": "npm:^7.22.20" + "@babel/helper-plugin-utils": "npm:^7.24.0" + "@babel/helper-replace-supers": "npm:^7.24.1" "@babel/helper-split-export-declaration": "npm:^7.22.6" globals: "npm:^11.1.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/227ac5166501e04d9e7fbd5eda6869b084ffa4af6830ac12544ac6ea14953ca00eb1762b0df9349c0f6c8d2a799385910f558066cd0fb85b9ca437b1131a6043 + checksum: 10c0/586a95826be4d68056fa23d8e6c34353ce2ea59bf3ca8cf62bc784e60964d492d76e1b48760c43fd486ffb65a79d3fed9a4f91289e4f526f88c3b6acc0dfb00e languageName: node linkType: hard -"@babel/plugin-transform-computed-properties@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-computed-properties@npm:7.23.3" +"@babel/plugin-transform-computed-properties@npm:^7.23.3, @babel/plugin-transform-computed-properties@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-computed-properties@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" - "@babel/template": "npm:^7.22.15" + "@babel/helper-plugin-utils": "npm:^7.24.0" + "@babel/template": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/3ca8a006f8e652b58c21ecb84df1d01a73f0a96b1d216fd09a890b235dd90cb966b152b603b88f7e850ae238644b1636ce5c30b7c029c0934b43383932372e4a + checksum: 10c0/8292c508b656b7722e2c2ca0f6f31339852e3ed2b9b80f6e068a4010e961b431ca109ecd467fc906283f4b1574c1e7b1cb68d35a4dea12079d386c15ff7e0eac languageName: node linkType: hard -"@babel/plugin-transform-destructuring@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-destructuring@npm:7.23.3" +"@babel/plugin-transform-destructuring@npm:^7.23.3, @babel/plugin-transform-destructuring@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-destructuring@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/717e9a62c1b0c93c507f87b4eaf839ec08d3c3147f14d74ae240d8749488d9762a8b3950132be620a069bde70f4b3e4ee9867b226c973fcc40f3cdec975cde71 + checksum: 10c0/a08e706a9274a699abc3093f38c72d4a5354eac11c44572cc9ea049915b6e03255744297069fd94fcce82380725c5d6b1b11b9a84c0081aa3aa6fc2fdab98ef6 languageName: node linkType: hard -"@babel/plugin-transform-dotall-regex@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-dotall-regex@npm:7.23.3" +"@babel/plugin-transform-dotall-regex@npm:^7.23.3, @babel/plugin-transform-dotall-regex@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-dotall-regex@npm:7.24.1" dependencies: "@babel/helper-create-regexp-features-plugin": "npm:^7.22.15" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/6c89286d1277c2a63802a453c797c87c1203f89e4c25115f7b6620f5fce15d8c8d37af613222f6aa497aa98773577a6ec8752e79e13d59bc5429270677ea010b + checksum: 10c0/758def705ec5a87ef910280dc2df5d2fda59dc5d4771c1725c7aed0988ae5b79e29aeb48109120301a3e1c6c03dfac84700469de06f38ca92c96834e09eadf5d languageName: node linkType: hard -"@babel/plugin-transform-duplicate-keys@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-duplicate-keys@npm:7.23.3" +"@babel/plugin-transform-duplicate-keys@npm:^7.23.3, @babel/plugin-transform-duplicate-keys@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-duplicate-keys@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/7e2640e4e6adccd5e7b0615b6e9239d7c98363e21c52086ea13759dfa11cf7159b255fc5331c2de435639ea8eb6acefae115ae0d797a3d19d12587652f8052a5 + checksum: 10c0/41072f57f83a6c2b15f3ee0b6779cdca105ff3d98061efe92ac02d6c7b90fdb6e7e293b8a4d5b9c690d9ae5d3ae73e6bde4596dc4d8c66526a0e5e1abc73c88c languageName: node linkType: hard -"@babel/plugin-transform-dynamic-import@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-dynamic-import@npm:7.23.4" +"@babel/plugin-transform-dynamic-import@npm:^7.23.4, @babel/plugin-transform-dynamic-import@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-dynamic-import@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/plugin-syntax-dynamic-import": "npm:^7.8.3" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/19ae4a4a2ca86d35224734c41c48b2aa6a13139f3cfa1cbd18c0e65e461de8b65687dec7e52b7a72bb49db04465394c776aa1b13a2af5dc975b2a0cde3dcab67 + checksum: 10c0/7e2834780e9b5251ef341854043a89c91473b83c335358620ca721554877e64e416aeb3288a35f03e825c4958e07d5d00ead08c4490fadc276a21fe151d812f1 languageName: node linkType: hard -"@babel/plugin-transform-exponentiation-operator@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-exponentiation-operator@npm:7.23.3" +"@babel/plugin-transform-exponentiation-operator@npm:^7.23.3, @babel/plugin-transform-exponentiation-operator@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-exponentiation-operator@npm:7.24.1" dependencies: "@babel/helper-builder-binary-assignment-operator-visitor": "npm:^7.22.15" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/5c33ee6a1bdc52fcdf0807f445b27e3fbdce33008531885e65a699762327565fffbcfde8395be7f21bcb22d582e425eddae45650c986462bb84ba68f43687516 + checksum: 10c0/f0fc4c5a9add25fd6bf23dabe6752e9b7c0a2b2554933dddfd16601245a2ba332b647951079c782bf3b94c6330e3638b9b4e0227f469a7c1c707446ba0eba6c7 languageName: node linkType: hard -"@babel/plugin-transform-export-namespace-from@npm:^7.22.11, @babel/plugin-transform-export-namespace-from@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-export-namespace-from@npm:7.23.4" +"@babel/plugin-transform-export-namespace-from@npm:^7.23.4, @babel/plugin-transform-export-namespace-from@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-export-namespace-from@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/plugin-syntax-export-namespace-from": "npm:^7.8.3" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/38bf04f851e36240bbe83ace4169da626524f4107bfb91f05b4ad93a5fb6a36d5b3d30b8883c1ba575ccfc1bac7938e90ca2e3cb227f7b3f4a9424beec6fd4a7 + checksum: 10c0/510bb23b2423d5fbffef69b356e4050929c21a7627e8194b1506dd935c7d9cbbd696c9ae9d7c3bcd7e6e7b69561b0b290c2d72d446327b40fc20ce40bbca6712 languageName: node linkType: hard -"@babel/plugin-transform-flow-strip-types@npm:^7.22.5": - version: 7.22.5 - resolution: "@babel/plugin-transform-flow-strip-types@npm:7.22.5" +"@babel/plugin-transform-flow-strip-types@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-flow-strip-types@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" - "@babel/plugin-syntax-flow": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" + "@babel/plugin-syntax-flow": "npm:^7.24.1" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/5949a8e5214e3fc65d31dab0551423cea9d9eef35faa5d0004707ba7347baf96166aa400907ce7498f754db4e1e9d039ca434a508546b0dc9fdae9a42e814c1a + checksum: 10c0/e6aa9cbad0441867598d390d4df65bc8c6b797574673e4eedbdae0cc528e81e00f4b2cd38f7d138b0f04bcdd2540384a9812d5d76af5abfa06aee1c7fc20ca58 languageName: node linkType: hard -"@babel/plugin-transform-for-of@npm:^7.23.6": - version: 7.23.6 - resolution: "@babel/plugin-transform-for-of@npm:7.23.6" +"@babel/plugin-transform-for-of@npm:^7.23.6, @babel/plugin-transform-for-of@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-for-of@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/46681b6ab10f3ca2d961f50d4096b62ab5d551e1adad84e64be1ee23e72eb2f26a1e30e617e853c74f1349fffe4af68d33921a128543b6f24b6d46c09a3e2aec + checksum: 10c0/e4bc92b1f334246e62d4bde079938df940794db564742034f6597f2e38bd426e11ae8c5670448e15dd6e45c462f2a9ab3fa87259bddf7c08553ffd9457fc2b2c languageName: node linkType: hard -"@babel/plugin-transform-function-name@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-function-name@npm:7.23.3" +"@babel/plugin-transform-function-name@npm:^7.23.3, @babel/plugin-transform-function-name@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-function-name@npm:7.24.1" dependencies: - "@babel/helper-compilation-targets": "npm:^7.22.15" + "@babel/helper-compilation-targets": "npm:^7.23.6" "@babel/helper-function-name": "npm:^7.23.0" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/89cb9747802118048115cf92a8f310752f02030549b26f008904990cbdc86c3d4a68e07ca3b5c46de8a46ed4df2cb576ac222c74c56de67253d2a3ddc2956083 + checksum: 10c0/65c1735ec3b5e43db9b5aebf3c16171c04b3050c92396b9e22dda0d2aaf51f43fdcf147f70a40678fd9a4ee2272a5acec4826e9c21bcf968762f4c184897ad75 languageName: node linkType: hard -"@babel/plugin-transform-json-strings@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-json-strings@npm:7.23.4" +"@babel/plugin-transform-json-strings@npm:^7.23.4, @babel/plugin-transform-json-strings@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-json-strings@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/plugin-syntax-json-strings": "npm:^7.8.3" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/39e82223992a9ad857722ae051291935403852ad24b0dd64c645ca1c10517b6bf9822377d88643fed8b3e61a4e3f7e5ae41cf90eb07c40a786505d47d5970e54 + checksum: 10c0/13d9b6a3c31ab4be853b3d49d8d1171f9bd8198562fd75da8f31e7de31398e1cfa6eb1d073bed93c9746e4f9c47a53b20f8f4c255ece3f88c90852ad3181dc2d languageName: node linkType: hard -"@babel/plugin-transform-literals@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-literals@npm:7.23.3" +"@babel/plugin-transform-literals@npm:^7.23.3, @babel/plugin-transform-literals@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-literals@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/8292106b106201464c2bfdd5c014fe6a9ca1c0256eb0a8031deb20081e21906fe68b156186f77d993c23eeab6d8d6f5f66e8895eec7ed97ce6de5dbcafbcd7f4 + checksum: 10c0/a27cc7d565ee57b5a2bf136fa889c5c2f5988545ae7b3b2c83a7afe5dd37dfac80dca88b1c633c65851ce6af7d2095c04c01228657ce0198f918e64b5ccd01fa languageName: node linkType: hard -"@babel/plugin-transform-logical-assignment-operators@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-logical-assignment-operators@npm:7.23.4" +"@babel/plugin-transform-logical-assignment-operators@npm:^7.23.4, @babel/plugin-transform-logical-assignment-operators@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-logical-assignment-operators@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/plugin-syntax-logical-assignment-operators": "npm:^7.10.4" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/87b034dd13143904e405887e6125d76c27902563486efc66b7d9a9d8f9406b76c6ac42d7b37224014af5783d7edb465db0cdecd659fa3227baad0b3a6a35deff + checksum: 10c0/98a2e0843ddfe51443c1bfcf08ba40ad8856fd4f8e397b392a5390a54f257c8c1b9a99d8ffc0fc7e8c55cce45e2cd9c2795a4450303f48f501bcbd662de44554 languageName: node linkType: hard -"@babel/plugin-transform-member-expression-literals@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-member-expression-literals@npm:7.23.3" +"@babel/plugin-transform-member-expression-literals@npm:^7.23.3, @babel/plugin-transform-member-expression-literals@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-member-expression-literals@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/687f24f3ec60b627fef6e87b9e2770df77f76727b9d5f54fa4c84a495bb24eb4a20f1a6240fa22d339d45aac5eaeb1b39882e941bfd00cf498f9c53478d1ec88 + checksum: 10c0/2af731d02aa4c757ef80c46df42264128cbe45bfd15e1812d1a595265b690a44ad036041c406a73411733540e1c4256d8174705ae6b8cfaf757fc175613993fd languageName: node linkType: hard -"@babel/plugin-transform-modules-amd@npm:^7.13.0, @babel/plugin-transform-modules-amd@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-modules-amd@npm:7.23.3" +"@babel/plugin-transform-modules-amd@npm:^7.13.0, @babel/plugin-transform-modules-amd@npm:^7.23.3, @babel/plugin-transform-modules-amd@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-modules-amd@npm:7.24.1" dependencies: "@babel/helper-module-transforms": "npm:^7.23.3" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/9f7ec036f7cfc588833a4dd117a44813b64aa4c1fd5bfb6c78f60198c1d290938213090c93a46f97a68a2490fad909e21a82b2472e95da74d108c125df21c8d5 + checksum: 10c0/71fd04e5e7026e6e52701214b1e9f7508ba371b757e5075fbb938a79235ed66a54ce65f89bb92b59159e9f03f01b392e6c4de6d255b948bec975a90cfd6809ef languageName: node linkType: hard -"@babel/plugin-transform-modules-commonjs@npm:^7.13.8, @babel/plugin-transform-modules-commonjs@npm:^7.23.0, @babel/plugin-transform-modules-commonjs@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-modules-commonjs@npm:7.23.3" +"@babel/plugin-transform-modules-commonjs@npm:^7.13.8, @babel/plugin-transform-modules-commonjs@npm:^7.23.0, @babel/plugin-transform-modules-commonjs@npm:^7.23.3, @babel/plugin-transform-modules-commonjs@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-modules-commonjs@npm:7.24.1" dependencies: "@babel/helper-module-transforms": "npm:^7.23.3" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/helper-simple-access": "npm:^7.22.5" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/5c8840c5c9ecba39367ae17c973ed13dbc43234147b77ae780eec65010e2a9993c5d717721b23e8179f7cf49decdd325c509b241d69cfbf92aa647a1d8d5a37d + checksum: 10c0/efb3ea2047604a7eb44a9289311ebb29842fe6510ff8b66a77a60440448c65e1312a60dc48191ed98246bdbd163b5b6f3348a0669bcc0e3809e69c7c776b20fa languageName: node linkType: hard -"@babel/plugin-transform-modules-systemjs@npm:^7.23.9": - version: 7.23.9 - resolution: "@babel/plugin-transform-modules-systemjs@npm:7.23.9" +"@babel/plugin-transform-modules-systemjs@npm:^7.23.9, @babel/plugin-transform-modules-systemjs@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-modules-systemjs@npm:7.24.1" dependencies: "@babel/helper-hoist-variables": "npm:^7.22.5" "@babel/helper-module-transforms": "npm:^7.23.3" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/helper-validator-identifier": "npm:^7.22.20" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/1926631fe9d87c0c53427a3420ad49da62d53320d0016b6afab64e5417a672aa5bdff3ea1d24746ffa1e43319c28a80f5d8cef0ad214760d399c293b5850500f + checksum: 10c0/38145f8abe8a4ce2b41adabe5d65eb7bd54a139dc58e2885fec975eb5cf247bd938c1dd9f09145c46dbe57d25dd0ef7f00a020e5eb0cbe8195b2065d51e2d93d languageName: node linkType: hard -"@babel/plugin-transform-modules-umd@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-modules-umd@npm:7.23.3" +"@babel/plugin-transform-modules-umd@npm:^7.23.3, @babel/plugin-transform-modules-umd@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-modules-umd@npm:7.24.1" dependencies: "@babel/helper-module-transforms": "npm:^7.23.3" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/f0d2f890a15b4367d0d8f160bed7062bdb145c728c24e9bfbc1211c7925aae5df72a88df3832c92dd2011927edfed4da1b1249e4c78402e893509316c0c2caa6 + checksum: 10c0/14c90c58562b54e17fe4a8ded3f627f9a993648f8378ef00cb2f6c34532032b83290d2ad54c7fff4f0c2cd49091bda780f8cc28926ec4b77a6c2141105a2e699 languageName: node linkType: hard @@ -1434,160 +1500,159 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-new-target@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-new-target@npm:7.23.3" +"@babel/plugin-transform-new-target@npm:^7.23.3, @babel/plugin-transform-new-target@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-new-target@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/f489b9e1f17b42b2ba6312d58351e757cb23a8409f64f2bb6af4c09d015359588a5d68943b20756f141d0931a94431c782f3ed1225228a930a04b07be0c31b04 + checksum: 10c0/c4cabe628163855f175a8799eb73d692b6f1dc347aae5022af0c253f80c92edb962e48ddccc98b691eff3d5d8e53c9a8f10894c33ba4cebc2e2f8f8fe554fb7a languageName: node linkType: hard -"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.22.11, @babel/plugin-transform-nullish-coalescing-operator@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-nullish-coalescing-operator@npm:7.23.4" +"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.22.11, @babel/plugin-transform-nullish-coalescing-operator@npm:^7.23.4, @babel/plugin-transform-nullish-coalescing-operator@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-nullish-coalescing-operator@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/plugin-syntax-nullish-coalescing-operator": "npm:^7.8.3" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/bce490d22da5c87ff27fffaff6ad5a4d4979b8d7b72e30857f191e9c1e1824ba73bb8d7081166289369e388f94f0ce5383a593b1fc84d09464a062c75f824b0b + checksum: 10c0/c8532951506fb031287280cebeef10aa714f8a7cea2b62a13c805f0e0af945ba77a7c87e4bbbe4c37fe973e0e5d5e649cfac7f0374f57efc54cdf9656362a392 languageName: node linkType: hard -"@babel/plugin-transform-numeric-separator@npm:^7.22.11, @babel/plugin-transform-numeric-separator@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-numeric-separator@npm:7.23.4" +"@babel/plugin-transform-numeric-separator@npm:^7.23.4, @babel/plugin-transform-numeric-separator@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-numeric-separator@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/plugin-syntax-numeric-separator": "npm:^7.10.4" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/e34902da4f5588dc4812c92cb1f6a5e3e3647baf7b4623e30942f551bf1297621abec4e322ebfa50b320c987c0f34d9eb4355b3d289961d9035e2126e3119c12 + checksum: 10c0/15e2b83292e586fb4f5b4b4021d4821a806ca6de2b77d5ad6c4e07aa7afa23704e31b4d683dac041afc69ac51b2461b96e8c98e46311cc1faba54c73f235044f languageName: node linkType: hard "@babel/plugin-transform-object-assign@npm:^7.8.3": - version: 7.22.5 - resolution: "@babel/plugin-transform-object-assign@npm:7.22.5" + version: 7.24.1 + resolution: "@babel/plugin-transform-object-assign@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/c80ca956ccc45c68a6f35e8aea80e08c0a653e4baf243727d4258f242d312d71be20e3fad35a1f2cd9d58b30dcbb5cdf5f8d6c6614a3f8c6079d90f9b1dadee6 + checksum: 10c0/eb30beac71a5930ecdfc8740b184f22dd2043b1ac6f9f6818fb2e10ddfbdd6536b4ddb0d00af2c9f4a375823f52a566915eb598bea0633484aa5ff5db4e547fd languageName: node linkType: hard -"@babel/plugin-transform-object-rest-spread@npm:^7.22.15, @babel/plugin-transform-object-rest-spread@npm:^7.24.0": - version: 7.24.0 - resolution: "@babel/plugin-transform-object-rest-spread@npm:7.24.0" +"@babel/plugin-transform-object-rest-spread@npm:^7.24.0, @babel/plugin-transform-object-rest-spread@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-object-rest-spread@npm:7.24.1" dependencies: - "@babel/compat-data": "npm:^7.23.5" "@babel/helper-compilation-targets": "npm:^7.23.6" "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/plugin-syntax-object-rest-spread": "npm:^7.8.3" - "@babel/plugin-transform-parameters": "npm:^7.23.3" + "@babel/plugin-transform-parameters": "npm:^7.24.1" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/02fe8b99ee6329e68b97b1b1b5410e50c6c20470e73dcd1d287c6ddb5623c654dce82327b2a3f6710ee3b512fe4950e43ab81d0bbc33d771f0cad3bc3cef87c6 + checksum: 10c0/e301f1a66b63bafc2bce885305cc88ab30ec875b5e2c7933fb7f9cbf0d954685aa10334ffcecf147ba19d6a1d7ffab37baf4ce871849d395941c56fdb3060f73 languageName: node linkType: hard -"@babel/plugin-transform-object-super@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-object-super@npm:7.23.3" +"@babel/plugin-transform-object-super@npm:^7.23.3, @babel/plugin-transform-object-super@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-object-super@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" - "@babel/helper-replace-supers": "npm:^7.22.20" + "@babel/helper-plugin-utils": "npm:^7.24.0" + "@babel/helper-replace-supers": "npm:^7.24.1" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/a6856fd8c0afbe5b3318c344d4d201d009f4051e2f6ff6237ff2660593e93c5997a58772b13d639077c3e29ced3440247b29c496cd77b13af1e7559a70009775 + checksum: 10c0/d30e6b9e59a707efd7ed524fc0a8deeea046011a6990250f2e9280516683138e2d13d9c52daf41d78407bdab0378aef7478326f2a15305b773d851cb6e106157 languageName: node linkType: hard -"@babel/plugin-transform-optional-catch-binding@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-optional-catch-binding@npm:7.23.4" +"@babel/plugin-transform-optional-catch-binding@npm:^7.23.4, @babel/plugin-transform-optional-catch-binding@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-optional-catch-binding@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/plugin-syntax-optional-catch-binding": "npm:^7.8.3" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/4ef61812af0e4928485e28301226ce61139a8b8cea9e9a919215ebec4891b9fea2eb7a83dc3090e2679b7d7b2c8653da601fbc297d2addc54a908b315173991e + checksum: 10c0/68408b9ef772d9aa5dccf166c86dc4d2505990ce93e03dcfc65c73fb95c2511248e009ba9ccf5b96405fb85de1c16ad8291016b1cc5689ee4becb1e3050e0ae7 languageName: node linkType: hard -"@babel/plugin-transform-optional-chaining@npm:^7.23.0, @babel/plugin-transform-optional-chaining@npm:^7.23.3, @babel/plugin-transform-optional-chaining@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-optional-chaining@npm:7.23.4" +"@babel/plugin-transform-optional-chaining@npm:^7.23.0, @babel/plugin-transform-optional-chaining@npm:^7.23.4, @babel/plugin-transform-optional-chaining@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-optional-chaining@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5" "@babel/plugin-syntax-optional-chaining": "npm:^7.8.3" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/305b773c29ad61255b0e83ec1e92b2f7af6aa58be4cba1e3852bddaa14f7d2afd7b4438f41c28b179d6faac7eb8d4fb5530a17920294f25d459b8f84406bfbfb + checksum: 10c0/b4688795229c9e9ce978eccf979fe515eb4e8d864d2dcd696baa937c8db13e3d46cff664a3cd6119dfe60e261f5d359b10c6783effab7cc91d75d03ad7f43d05 languageName: node linkType: hard -"@babel/plugin-transform-parameters@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-parameters@npm:7.23.3" +"@babel/plugin-transform-parameters@npm:^7.23.3, @babel/plugin-transform-parameters@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-parameters@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/a8d4cbe0f6ba68d158f5b4215c63004fc37a1fdc539036eb388a9792017c8496ea970a1932ccb929308f61e53dc56676ed01d8df6f42bc0a85c7fd5ba82482b7 + checksum: 10c0/eee8d2f72d3ee0876dc8d85f949f4adf34685cfe36c814ebc20c96315f3891a53d43c764d636b939e34d55e6a6a4af9aa57ed0d7f9439eb5771a07277c669e55 languageName: node linkType: hard -"@babel/plugin-transform-private-methods@npm:^7.22.5, @babel/plugin-transform-private-methods@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-private-methods@npm:7.23.3" +"@babel/plugin-transform-private-methods@npm:^7.22.5, @babel/plugin-transform-private-methods@npm:^7.23.3, @babel/plugin-transform-private-methods@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-private-methods@npm:7.24.1" dependencies: - "@babel/helper-create-class-features-plugin": "npm:^7.22.15" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-create-class-features-plugin": "npm:^7.24.1" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/745a655edcd111b7f91882b921671ca0613079760d8c9befe336b8a9bc4ce6bb49c0c08941831c950afb1b225b4b2d3eaac8842e732db095b04db38efd8c34f4 + checksum: 10c0/d8e18587d2a8b71a795da5e8841b0e64f1525a99ad73ea8b9caa331bc271d69646e2e1e749fd634321f3df9d126070208ddac22a27ccf070566b2efb74fecd99 languageName: node linkType: hard -"@babel/plugin-transform-private-property-in-object@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-private-property-in-object@npm:7.23.4" +"@babel/plugin-transform-private-property-in-object@npm:^7.23.4, @babel/plugin-transform-private-property-in-object@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-private-property-in-object@npm:7.24.1" dependencies: "@babel/helper-annotate-as-pure": "npm:^7.22.5" - "@babel/helper-create-class-features-plugin": "npm:^7.22.15" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-create-class-features-plugin": "npm:^7.24.1" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/plugin-syntax-private-property-in-object": "npm:^7.14.5" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/8d31b28f24204b4d13514cd3a8f3033abf575b1a6039759ddd6e1d82dd33ba7281f9bc85c9f38072a665d69bfa26dc40737eefaf9d397b024654a483d2357bf5 + checksum: 10c0/33d2b9737de7667d7a1b704eef99bfecc6736157d9ea28c2e09010d5f25e33ff841c41d89a4430c5d47f4eb3384e24770fa0ec79600e1e38d6d16e2f9333b4b5 languageName: node linkType: hard -"@babel/plugin-transform-property-literals@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-property-literals@npm:7.23.3" +"@babel/plugin-transform-property-literals@npm:^7.23.3, @babel/plugin-transform-property-literals@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-property-literals@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/b2549f23f90cf276c2e3058c2225c3711c2ad1c417e336d3391199445a9776dd791b83be47b2b9a7ae374b40652d74b822387e31fa5267a37bf49c122e1a9747 + checksum: 10c0/3bf3e01f7bb8215a8b6d0081b6f86fea23e3a4543b619e059a264ede028bc58cdfb0acb2c43271271915a74917effa547bc280ac636a9901fa9f2fb45623f87e languageName: node linkType: hard -"@babel/plugin-transform-react-display-name@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-react-display-name@npm:7.23.3" +"@babel/plugin-transform-react-display-name@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-react-display-name@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/3aed142af7bd1aed1df2bdad91ed33ba1cdd5c3c67ce6eafba821ff72f129162a197ffb55f1eb1775af276abd5545934489a8257fef6c6665ddf253a4f39a939 + checksum: 10c0/adf1a3cb0df8134533a558a9072a67e34127fd489dfe431c3348a86dd41f3e74861d5d5134bbb68f61a9cdb3f7e79b2acea1346be94ce4d3328a64e5a9e09be1 languageName: node linkType: hard @@ -1603,28 +1668,28 @@ __metadata: linkType: hard "@babel/plugin-transform-react-jsx-self@npm:^7.18.6": - version: 7.22.5 - resolution: "@babel/plugin-transform-react-jsx-self@npm:7.22.5" + version: 7.24.1 + resolution: "@babel/plugin-transform-react-jsx-self@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/263091bdede1f448cb2c59b84eb69972c15d3f022c929a75337bd20d8b65551ac38cd26dad1946eaa93289643506b10ddaea3445a28cb8fca5a773a22a0df90b + checksum: 10c0/ea362ff94b535c753f560eb1f5e063dc72bbbca17ed58837a949a7b289d5eacc7b0a28296d1932c94429b168d6040cdee5484a59b9e3c021f169e0ee137e6a27 languageName: node linkType: hard "@babel/plugin-transform-react-jsx-source@npm:^7.19.6": - version: 7.22.5 - resolution: "@babel/plugin-transform-react-jsx-source@npm:7.22.5" + version: 7.24.1 + resolution: "@babel/plugin-transform-react-jsx-source@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/defc9debb76b4295e3617ef7795a0533dbbecef6f51bf5ba4bfc162df892a84fd39e14d5f1b9a5aad7b09b97074fef4c6756f9d2036eef5a9874acabe198f75a + checksum: 10c0/ea8e3263c0dc51fbc97c156cc647150a757cc56de10781287353d0ce9b2dcd6b6d93d573c0142d7daf5d6fb554c74fa1971ae60764924ea711161d8458739b63 languageName: node linkType: hard -"@babel/plugin-transform-react-jsx@npm:^7.22.15, @babel/plugin-transform-react-jsx@npm:^7.22.5": +"@babel/plugin-transform-react-jsx@npm:^7.22.5, @babel/plugin-transform-react-jsx@npm:^7.23.4": version: 7.23.4 resolution: "@babel/plugin-transform-react-jsx@npm:7.23.4" dependencies: @@ -1639,42 +1704,42 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-react-pure-annotations@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-react-pure-annotations@npm:7.23.3" +"@babel/plugin-transform-react-pure-annotations@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-react-pure-annotations@npm:7.24.1" dependencies: "@babel/helper-annotate-as-pure": "npm:^7.22.5" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/76287adeab656fb7f39243e5ab6a8c60069cf69fffeebd1566457d56cb2f966366a23bd755d3e369f4d0437459e3b76243df370caa7d7d2287a8560b66c53ca2 + checksum: 10c0/9eb3056fcaadd63d404fd5652b2a3f693bc4758ba753fee5b5c580c7a64346eeeb94e5a4f77a99c76f3cf06d1f1ad6c227647cd0b1219efe3d00cafa5a6e7b2a languageName: node linkType: hard -"@babel/plugin-transform-regenerator@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-regenerator@npm:7.23.3" +"@babel/plugin-transform-regenerator@npm:^7.23.3, @babel/plugin-transform-regenerator@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-regenerator@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" regenerator-transform: "npm:^0.15.2" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/3b0e989ae5db78894ee300b24e07fbcec490c39ab48629c519377581cf94e90308f4ddc10a8914edc9f403e2d3ac7a7ae0ae09003629d852da03e2ba846299c6 + checksum: 10c0/0a333585d7c0b38d31cc549d0f3cf7c396d1d50b6588a307dc58325505ddd4f5446188bc536c4779431b396251801b3f32d6d8e87db8274bc84e8c41950737f7 languageName: node linkType: hard -"@babel/plugin-transform-reserved-words@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-reserved-words@npm:7.23.3" +"@babel/plugin-transform-reserved-words@npm:^7.23.3, @babel/plugin-transform-reserved-words@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-reserved-words@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/4e6d61f6c9757592661cfbd2c39c4f61551557b98cb5f0995ef10f5540f67e18dde8a42b09716d58943b6e4b7ef5c9bcf19902839e7328a4d49149e0fecdbfcd + checksum: 10c0/936d6e73cafb2cbb495f6817c6f8463288dbc9ab3c44684b931ebc1ece24f0d55dfabc1a75ba1de5b48843d0fef448dcfdbecb8485e4014f8f41d0d1440c536f languageName: node linkType: hard -"@babel/plugin-transform-runtime@npm:7.24.0, @babel/plugin-transform-runtime@npm:^7.13.9, @babel/plugin-transform-runtime@npm:^7.23.2": +"@babel/plugin-transform-runtime@npm:7.24.0": version: 7.24.0 resolution: "@babel/plugin-transform-runtime@npm:7.24.0" dependencies: @@ -1690,120 +1755,136 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-shorthand-properties@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-shorthand-properties@npm:7.23.3" +"@babel/plugin-transform-runtime@npm:^7.13.9, @babel/plugin-transform-runtime@npm:^7.23.2, @babel/plugin-transform-runtime@npm:^7.24.3": + version: 7.24.3 + resolution: "@babel/plugin-transform-runtime@npm:7.24.3" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-module-imports": "npm:^7.24.3" + "@babel/helper-plugin-utils": "npm:^7.24.0" + babel-plugin-polyfill-corejs2: "npm:^0.4.10" + babel-plugin-polyfill-corejs3: "npm:^0.10.1" + babel-plugin-polyfill-regenerator: "npm:^0.6.1" + semver: "npm:^6.3.1" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/c423c66fec0b6503f50561741754c84366ef9e9818442c8881fbaa90cc363fd137084b9431cdc00ed2f1fd8c8a1a5982c4a7e1f2af3769db4caf2ac7ea55d4f0 + checksum: 10c0/ee01967bf405d84bd95ca4089166a18fb23fe9851a6da53dcf712a7f8ba003319996f21f320d568ec76126e18adfaee978206ccda86eef7652d47cc9a052e75e languageName: node linkType: hard -"@babel/plugin-transform-spread@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-spread@npm:7.23.3" +"@babel/plugin-transform-shorthand-properties@npm:^7.23.3, @babel/plugin-transform-shorthand-properties@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-shorthand-properties@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10c0/8273347621183aada3cf1f3019d8d5f29467ba13a75b72cb405bc7f23b7e05fd85f4edb1e4d9f0103153dddb61826a42dc24d466480d707f8932c1923a4c25fa + languageName: node + linkType: hard + +"@babel/plugin-transform-spread@npm:^7.23.3, @babel/plugin-transform-spread@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-spread@npm:7.24.1" + dependencies: + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/a348e4ae47e4ceeceb760506ec7bf835ccc18a2cf70ec74ebfbe41bc172fa2412b05b7d1b86836f8aee375e41a04ff20486074778d0e2d19d668b33dc52e9dbb + checksum: 10c0/50a0302e344546d57e5c9f4dea575f88e084352eeac4e9a3e238c41739eef2df1daf4a7ebbb3ccb7acd3447f6a5ce9938405f98bf5f5583deceb8257f5a673c9 languageName: node linkType: hard -"@babel/plugin-transform-sticky-regex@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-sticky-regex@npm:7.23.3" +"@babel/plugin-transform-sticky-regex@npm:^7.23.3, @babel/plugin-transform-sticky-regex@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-sticky-regex@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/cd15c407906b41e4b924ea151e455c11274dba050771ee7154ad88a1a274140ac5e84efc8d08c4379f2f0cec8a09e4a0a3b2a3a954ba6a67d9fb35df1c714c56 + checksum: 10c0/786fe2ae11ef9046b9fa95677935abe495031eebf1274ad03f2054a20adea7b9dbd00336ac0b143f7924bc562e5e09793f6e8613607674b97e067d4838ccc4a0 languageName: node linkType: hard -"@babel/plugin-transform-template-literals@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-template-literals@npm:7.23.3" +"@babel/plugin-transform-template-literals@npm:^7.23.3, @babel/plugin-transform-template-literals@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-template-literals@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/9b5f43788b9ffcb8f2b445a16b1aa40fcf23cb0446a4649445f098ec6b4cb751f243a535da623d59fefe48f4c40552f5621187a61811779076bab26863e3373d + checksum: 10c0/f73bcda5488eb81c6e7a876498d9e6b72be32fca5a4d9db9053491a2d1300cd27b889b463fd2558f3cd5826a85ed00f61d81b234aa55cb5a0abf1b6fa1bd5026 languageName: node linkType: hard -"@babel/plugin-transform-typeof-symbol@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-typeof-symbol@npm:7.23.3" +"@babel/plugin-transform-typeof-symbol@npm:^7.23.3, @babel/plugin-transform-typeof-symbol@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-typeof-symbol@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/50e81d84c6059878be2a0e41e0d790cab10882cfb8fa85e8c2665ccb0b3cd7233f49197f17427bc7c1b36c80e07076640ecf1b641888d78b9cb91bc16478d84a + checksum: 10c0/d392f549bfd13414f59feecdf3fb286f266a3eb9107a9de818e57907bda56eed08d1f6f8e314d09bf99252df026a7fd4d5df839acd45078a777abcebaa9a8593 languageName: node linkType: hard -"@babel/plugin-transform-typescript@npm:^7.13.0, @babel/plugin-transform-typescript@npm:^7.23.3": - version: 7.23.5 - resolution: "@babel/plugin-transform-typescript@npm:7.23.5" +"@babel/plugin-transform-typescript@npm:^7.13.0, @babel/plugin-transform-typescript@npm:^7.24.1": + version: 7.24.4 + resolution: "@babel/plugin-transform-typescript@npm:7.24.4" dependencies: "@babel/helper-annotate-as-pure": "npm:^7.22.5" - "@babel/helper-create-class-features-plugin": "npm:^7.23.5" - "@babel/helper-plugin-utils": "npm:^7.22.5" - "@babel/plugin-syntax-typescript": "npm:^7.23.3" + "@babel/helper-create-class-features-plugin": "npm:^7.24.4" + "@babel/helper-plugin-utils": "npm:^7.24.0" + "@babel/plugin-syntax-typescript": "npm:^7.24.1" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/75d6689bfdf4c9462b5fb21107c295717c9bedffe5eae8b22b0a65c9603660683d55e020df83825de13792358043bd939f48efc2b3a293b5210a608076c94934 + checksum: 10c0/fa6625046f219cdc75061025c8031ada75ef631b137f1442e3d0054ba4e63548eb12cf55e2e1f442c889aa5fdd76d0d0b7904fdf812ce4c38748446227acc798 languageName: node linkType: hard -"@babel/plugin-transform-unicode-escapes@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-unicode-escapes@npm:7.23.3" +"@babel/plugin-transform-unicode-escapes@npm:^7.23.3, @babel/plugin-transform-unicode-escapes@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-unicode-escapes@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/f1ed54742dc982666f471df5d087cfda9c6dbf7842bec2d0f7893ed359b142a38c0210358f297ab5c7a3e11ec0dfb0e523de2e2edf48b62f257aaadd5f068866 + checksum: 10c0/67a72a1ed99639de6a93aead35b1993cb3f0eb178a8991fcef48732c38c9f0279c85bbe1e2e2477b85afea873e738ff0955a35057635ce67bc149038e2d8a28e languageName: node linkType: hard -"@babel/plugin-transform-unicode-property-regex@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-unicode-property-regex@npm:7.23.3" +"@babel/plugin-transform-unicode-property-regex@npm:^7.23.3, @babel/plugin-transform-unicode-property-regex@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-unicode-property-regex@npm:7.24.1" dependencies: "@babel/helper-create-regexp-features-plugin": "npm:^7.22.15" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/dca5702d43fac70351623a12e4dfa454fd028a67498888522b644fd1a02534fabd440106897e886ebcc6ce6a39c58094ca29953b6f51bc67372aa8845a5ae49f + checksum: 10c0/d9d9752df7d51bf9357c0bf3762fe16b8c841fca9ecf4409a16f15ccc34be06e8e71abfaee1251b7d451227e70e6b873b36f86b090efdb20f6f7de5fdb6c7a05 languageName: node linkType: hard -"@babel/plugin-transform-unicode-regex@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-unicode-regex@npm:7.23.3" +"@babel/plugin-transform-unicode-regex@npm:^7.23.3, @babel/plugin-transform-unicode-regex@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-unicode-regex@npm:7.24.1" dependencies: "@babel/helper-create-regexp-features-plugin": "npm:^7.22.15" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/df824dcca2f6e731f61d69103e87d5dd974d8a04e46e28684a4ba935ae633d876bded09b8db890fd72d0caf7b9638e2672b753671783613cc78d472951e2df8c + checksum: 10c0/6046ab38e5d14ed97dbb921bd79ac1d7ad9d3286da44a48930e980b16896db2df21e093563ec3c916a630dc346639bf47c5924a33902a06fe3bbb5cdc7ef5f2f languageName: node linkType: hard -"@babel/plugin-transform-unicode-sets-regex@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-unicode-sets-regex@npm:7.23.3" +"@babel/plugin-transform-unicode-sets-regex@npm:^7.23.3, @babel/plugin-transform-unicode-sets-regex@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-unicode-sets-regex@npm:7.24.1" dependencies: "@babel/helper-create-regexp-features-plugin": "npm:^7.22.15" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0 - checksum: 10c0/30fe1d29af8395a867d40a63a250ca89072033d9bc7d4587eeebeaf4ad7f776aab83064321bfdb1d09d7e29a1d392852361f4f60a353f0f4d1a3b435dcbf256b + checksum: 10c0/b6c1f6b90afeeddf97e5713f72575787fcb7179be7b4c961869bfbc66915f66540dc49da93e4369da15596bd44b896d1eb8a50f5e1fd907abd7a1a625901006b languageName: node linkType: hard @@ -1817,7 +1898,7 @@ __metadata: languageName: node linkType: hard -"@babel/preset-env@npm:7.24.0, @babel/preset-env@npm:^7.16.5, @babel/preset-env@npm:^7.23.2": +"@babel/preset-env@npm:7.24.0": version: 7.24.0 resolution: "@babel/preset-env@npm:7.24.0" dependencies: @@ -1907,16 +1988,107 @@ __metadata: languageName: node linkType: hard +"@babel/preset-env@npm:^7.16.5, @babel/preset-env@npm:^7.23.2, @babel/preset-env@npm:^7.24.4": + version: 7.24.4 + resolution: "@babel/preset-env@npm:7.24.4" + dependencies: + "@babel/compat-data": "npm:^7.24.4" + "@babel/helper-compilation-targets": "npm:^7.23.6" + "@babel/helper-plugin-utils": "npm:^7.24.0" + "@babel/helper-validator-option": "npm:^7.23.5" + "@babel/plugin-bugfix-firefox-class-in-computed-class-key": "npm:^7.24.4" + "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "npm:^7.24.1" + "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "npm:^7.24.1" + "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "npm:^7.24.1" + "@babel/plugin-proposal-private-property-in-object": "npm:7.21.0-placeholder-for-preset-env.2" + "@babel/plugin-syntax-async-generators": "npm:^7.8.4" + "@babel/plugin-syntax-class-properties": "npm:^7.12.13" + "@babel/plugin-syntax-class-static-block": "npm:^7.14.5" + "@babel/plugin-syntax-dynamic-import": "npm:^7.8.3" + "@babel/plugin-syntax-export-namespace-from": "npm:^7.8.3" + "@babel/plugin-syntax-import-assertions": "npm:^7.24.1" + "@babel/plugin-syntax-import-attributes": "npm:^7.24.1" + "@babel/plugin-syntax-import-meta": "npm:^7.10.4" + "@babel/plugin-syntax-json-strings": "npm:^7.8.3" + "@babel/plugin-syntax-logical-assignment-operators": "npm:^7.10.4" + "@babel/plugin-syntax-nullish-coalescing-operator": "npm:^7.8.3" + "@babel/plugin-syntax-numeric-separator": "npm:^7.10.4" + "@babel/plugin-syntax-object-rest-spread": "npm:^7.8.3" + "@babel/plugin-syntax-optional-catch-binding": "npm:^7.8.3" + "@babel/plugin-syntax-optional-chaining": "npm:^7.8.3" + "@babel/plugin-syntax-private-property-in-object": "npm:^7.14.5" + "@babel/plugin-syntax-top-level-await": "npm:^7.14.5" + "@babel/plugin-syntax-unicode-sets-regex": "npm:^7.18.6" + "@babel/plugin-transform-arrow-functions": "npm:^7.24.1" + "@babel/plugin-transform-async-generator-functions": "npm:^7.24.3" + "@babel/plugin-transform-async-to-generator": "npm:^7.24.1" + "@babel/plugin-transform-block-scoped-functions": "npm:^7.24.1" + "@babel/plugin-transform-block-scoping": "npm:^7.24.4" + "@babel/plugin-transform-class-properties": "npm:^7.24.1" + "@babel/plugin-transform-class-static-block": "npm:^7.24.4" + "@babel/plugin-transform-classes": "npm:^7.24.1" + "@babel/plugin-transform-computed-properties": "npm:^7.24.1" + "@babel/plugin-transform-destructuring": "npm:^7.24.1" + "@babel/plugin-transform-dotall-regex": "npm:^7.24.1" + "@babel/plugin-transform-duplicate-keys": "npm:^7.24.1" + "@babel/plugin-transform-dynamic-import": "npm:^7.24.1" + "@babel/plugin-transform-exponentiation-operator": "npm:^7.24.1" + "@babel/plugin-transform-export-namespace-from": "npm:^7.24.1" + "@babel/plugin-transform-for-of": "npm:^7.24.1" + "@babel/plugin-transform-function-name": "npm:^7.24.1" + "@babel/plugin-transform-json-strings": "npm:^7.24.1" + "@babel/plugin-transform-literals": "npm:^7.24.1" + "@babel/plugin-transform-logical-assignment-operators": "npm:^7.24.1" + "@babel/plugin-transform-member-expression-literals": "npm:^7.24.1" + "@babel/plugin-transform-modules-amd": "npm:^7.24.1" + "@babel/plugin-transform-modules-commonjs": "npm:^7.24.1" + "@babel/plugin-transform-modules-systemjs": "npm:^7.24.1" + "@babel/plugin-transform-modules-umd": "npm:^7.24.1" + "@babel/plugin-transform-named-capturing-groups-regex": "npm:^7.22.5" + "@babel/plugin-transform-new-target": "npm:^7.24.1" + "@babel/plugin-transform-nullish-coalescing-operator": "npm:^7.24.1" + "@babel/plugin-transform-numeric-separator": "npm:^7.24.1" + "@babel/plugin-transform-object-rest-spread": "npm:^7.24.1" + "@babel/plugin-transform-object-super": "npm:^7.24.1" + "@babel/plugin-transform-optional-catch-binding": "npm:^7.24.1" + "@babel/plugin-transform-optional-chaining": "npm:^7.24.1" + "@babel/plugin-transform-parameters": "npm:^7.24.1" + "@babel/plugin-transform-private-methods": "npm:^7.24.1" + "@babel/plugin-transform-private-property-in-object": "npm:^7.24.1" + "@babel/plugin-transform-property-literals": "npm:^7.24.1" + "@babel/plugin-transform-regenerator": "npm:^7.24.1" + "@babel/plugin-transform-reserved-words": "npm:^7.24.1" + "@babel/plugin-transform-shorthand-properties": "npm:^7.24.1" + "@babel/plugin-transform-spread": "npm:^7.24.1" + "@babel/plugin-transform-sticky-regex": "npm:^7.24.1" + "@babel/plugin-transform-template-literals": "npm:^7.24.1" + "@babel/plugin-transform-typeof-symbol": "npm:^7.24.1" + "@babel/plugin-transform-unicode-escapes": "npm:^7.24.1" + "@babel/plugin-transform-unicode-property-regex": "npm:^7.24.1" + "@babel/plugin-transform-unicode-regex": "npm:^7.24.1" + "@babel/plugin-transform-unicode-sets-regex": "npm:^7.24.1" + "@babel/preset-modules": "npm:0.1.6-no-external-plugins" + babel-plugin-polyfill-corejs2: "npm:^0.4.10" + babel-plugin-polyfill-corejs3: "npm:^0.10.4" + babel-plugin-polyfill-regenerator: "npm:^0.6.1" + core-js-compat: "npm:^3.31.0" + semver: "npm:^6.3.1" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10c0/72a79d0cd38cb26f143509dd0c58db34b5b1ae90116863f55a404f0eb06a64a3cdcb1abd0b6435fafe463bbf55b82ffcf56aedee91e8d37797bf53e4ae74c413 + languageName: node + linkType: hard + "@babel/preset-flow@npm:^7.13.13, @babel/preset-flow@npm:^7.22.15": - version: 7.22.15 - resolution: "@babel/preset-flow@npm:7.22.15" + version: 7.24.1 + resolution: "@babel/preset-flow@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" - "@babel/helper-validator-option": "npm:^7.22.15" - "@babel/plugin-transform-flow-strip-types": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" + "@babel/helper-validator-option": "npm:^7.23.5" + "@babel/plugin-transform-flow-strip-types": "npm:^7.24.1" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/7eef0c84ec1889d6c4f7a67d7d1a81703420eed123a8c23f25af148eead77907f0bd701f3e729fdb37d3ddb2a373bf43938b36a9ba17f546111ddb9521466b92 + checksum: 10c0/e2209158d68a456b8f9d6cd6c810e692f3ab8ca28edba99afcecaacd657ace7cc905e566f84d6da06e537836a2f830bc6ddf4cb34006d57303ff9a40a94fa433 languageName: node linkType: hard @@ -1933,49 +2105,49 @@ __metadata: languageName: node linkType: hard -"@babel/preset-react@npm:^7.22.15, @babel/preset-react@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/preset-react@npm:7.23.3" +"@babel/preset-react@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/preset-react@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" - "@babel/helper-validator-option": "npm:^7.22.15" - "@babel/plugin-transform-react-display-name": "npm:^7.23.3" - "@babel/plugin-transform-react-jsx": "npm:^7.22.15" + "@babel/helper-plugin-utils": "npm:^7.24.0" + "@babel/helper-validator-option": "npm:^7.23.5" + "@babel/plugin-transform-react-display-name": "npm:^7.24.1" + "@babel/plugin-transform-react-jsx": "npm:^7.23.4" "@babel/plugin-transform-react-jsx-development": "npm:^7.22.5" - "@babel/plugin-transform-react-pure-annotations": "npm:^7.23.3" + "@babel/plugin-transform-react-pure-annotations": "npm:^7.24.1" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/cecb2493e09fd4ffa5effcef1d06e968386b1bfe077a99834f7e8ef249208274fca62fe5a6b3986ef1c1c3900b2eb409adb528ae1b73dba31397b16f9262e83c + checksum: 10c0/a842abc5a024ed68a0ce4c1244607d40165cb6f8cf1817ebda282e470f20302d81c6a61cb41c1a31aa6c4e99ce93df4dd9e998a8ded1417c25d7480f0e14103a languageName: node linkType: hard -"@babel/preset-typescript@npm:^7.13.0, @babel/preset-typescript@npm:^7.22.5, @babel/preset-typescript@npm:^7.23.0, @babel/preset-typescript@npm:^7.23.2": - version: 7.23.3 - resolution: "@babel/preset-typescript@npm:7.23.3" +"@babel/preset-typescript@npm:^7.13.0, @babel/preset-typescript@npm:^7.22.5, @babel/preset-typescript@npm:^7.23.0, @babel/preset-typescript@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/preset-typescript@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" - "@babel/helper-validator-option": "npm:^7.22.15" - "@babel/plugin-syntax-jsx": "npm:^7.23.3" - "@babel/plugin-transform-modules-commonjs": "npm:^7.23.3" - "@babel/plugin-transform-typescript": "npm:^7.23.3" + "@babel/helper-plugin-utils": "npm:^7.24.0" + "@babel/helper-validator-option": "npm:^7.23.5" + "@babel/plugin-syntax-jsx": "npm:^7.24.1" + "@babel/plugin-transform-modules-commonjs": "npm:^7.24.1" + "@babel/plugin-transform-typescript": "npm:^7.24.1" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/e72b654c7f0f08b35d7e1c0e3a59c0c13037f295c425760b8b148aa7dde01e6ddd982efc525710f997a1494fafdd55cb525738c016609e7e4d703d02014152b7 + checksum: 10c0/0033dc6fbc898ed0d8017c83a2dd5e095c82909e2f83e48cf9f305e3e9287148758c179ad90f27912cf98ca68bfec3643c57c70c0ca34d3a6c50dc8243aef406 languageName: node linkType: hard "@babel/register@npm:^7.13.16, @babel/register@npm:^7.22.15": - version: 7.22.15 - resolution: "@babel/register@npm:7.22.15" + version: 7.23.7 + resolution: "@babel/register@npm:7.23.7" dependencies: clone-deep: "npm:^4.0.1" find-cache-dir: "npm:^2.0.0" make-dir: "npm:^2.1.0" - pirates: "npm:^4.0.5" + pirates: "npm:^4.0.6" source-map-support: "npm:^0.5.16" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10c0/895cc773c3b3eae909478ea2a9735ef6edd634b04b4aaaad2ce576fd591c2b3c70ff8c90423e769a291bee072186e7e4801480c1907e31ba3053c6cdba5571cb + checksum: 10c0/b2466e41a4394e725b57e139ba45c3f61b88546d3cb443e84ce46cb34071b60c6cdb706a14c58a1443db530691a54f51da1f0c97f6c1aecbb838a2fb7eb5dbb9 languageName: node linkType: hard @@ -1987,12 +2159,12 @@ __metadata: linkType: hard "@babel/runtime-corejs3@npm:^7.10.2": - version: 7.23.1 - resolution: "@babel/runtime-corejs3@npm:7.23.1" + version: 7.24.4 + resolution: "@babel/runtime-corejs3@npm:7.24.4" dependencies: core-js-pure: "npm:^3.30.2" regenerator-runtime: "npm:^0.14.0" - checksum: 10c0/6e2c2b11779ff56c88b1f3a8742498640f7271ad4fcf9cfd24052bbb236a5e7c4c7c8d81cda751da3b4effa678736303deb78441c5752e63bfb90d6453fd870f + checksum: 10c0/121bec9a0b505e2995c4b71cf480167e006e8ee423f77bccc38975bfbfbfdb191192ff03557c18fad6de8f2b85c12c49aaa4b92d1d5fe0c0e136da664129be1e languageName: node linkType: hard @@ -2023,7 +2195,7 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.22.15, @babel/runtime@npm:^7.22.6, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2": +"@babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.22.15, @babel/runtime@npm:^7.22.6, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.24.4, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2": version: 7.24.4 resolution: "@babel/runtime@npm:7.24.4" dependencies: @@ -2052,21 +2224,21 @@ __metadata: languageName: node linkType: hard -"@babel/traverse@npm:^7.1.6, @babel/traverse@npm:^7.16.0, @babel/traverse@npm:^7.18.9, @babel/traverse@npm:^7.23.2, @babel/traverse@npm:^7.23.9, @babel/traverse@npm:^7.24.0, @babel/traverse@npm:^7.4.5": - version: 7.24.0 - resolution: "@babel/traverse@npm:7.24.0" +"@babel/traverse@npm:^7.1.6, @babel/traverse@npm:^7.16.0, @babel/traverse@npm:^7.18.9, @babel/traverse@npm:^7.23.9, @babel/traverse@npm:^7.24.0, @babel/traverse@npm:^7.24.1, @babel/traverse@npm:^7.4.5": + version: 7.24.1 + resolution: "@babel/traverse@npm:7.24.1" dependencies: - "@babel/code-frame": "npm:^7.23.5" - "@babel/generator": "npm:^7.23.6" + "@babel/code-frame": "npm:^7.24.1" + "@babel/generator": "npm:^7.24.1" "@babel/helper-environment-visitor": "npm:^7.22.20" "@babel/helper-function-name": "npm:^7.23.0" "@babel/helper-hoist-variables": "npm:^7.22.5" "@babel/helper-split-export-declaration": "npm:^7.22.6" - "@babel/parser": "npm:^7.24.0" + "@babel/parser": "npm:^7.24.1" "@babel/types": "npm:^7.24.0" debug: "npm:^4.3.1" globals: "npm:^11.1.0" - checksum: 10c0/55ffd2b0ce0fbd0a09051edc4def4fb1e96f35e0b100c0dc2a7429df569971ae312c290e980e423471f350961705698a257c7eea8c8304918024cc26f02468ba + checksum: 10c0/c087b918f6823776537ba246136c70e7ce0719fc05361ebcbfd16f4e6f2f6f1f8f4f9167f1d9b675f27d12074839605189cc9d689de20b89a85e7c140f23daab languageName: node linkType: hard @@ -3471,7 +3643,7 @@ __metadata: languageName: node linkType: hard -"@jridgewell/trace-mapping@npm:^0.3.12, @jridgewell/trace-mapping@npm:^0.3.17, @jridgewell/trace-mapping@npm:^0.3.18, @jridgewell/trace-mapping@npm:^0.3.20, @jridgewell/trace-mapping@npm:^0.3.24, @jridgewell/trace-mapping@npm:^0.3.9": +"@jridgewell/trace-mapping@npm:^0.3.12, @jridgewell/trace-mapping@npm:^0.3.17, @jridgewell/trace-mapping@npm:^0.3.18, @jridgewell/trace-mapping@npm:^0.3.20, @jridgewell/trace-mapping@npm:^0.3.24, @jridgewell/trace-mapping@npm:^0.3.25, @jridgewell/trace-mapping@npm:^0.3.9": version: 0.3.25 resolution: "@jridgewell/trace-mapping@npm:0.3.25" dependencies: @@ -5035,7 +5207,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/addon-docs@workspace:addons/docs" dependencies: - "@babel/core": "npm:^7.12.3" + "@babel/core": "npm:^7.24.4" "@mdx-js/mdx": "npm:^3.0.0" "@mdx-js/react": "npm:^3.0.0" "@rollup/pluginutils": "npm:^5.0.2" @@ -5586,8 +5758,8 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/cli@workspace:lib/cli" dependencies: - "@babel/core": "npm:^7.23.0" - "@babel/types": "npm:^7.23.0" + "@babel/core": "npm:^7.24.4" + "@babel/types": "npm:^7.24.0" "@ndelangen/get-tarball": "npm:^3.0.7" "@storybook/codemod": "workspace:*" "@storybook/core-common": "workspace:*" @@ -5648,9 +5820,9 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/codemod@workspace:lib/codemod" dependencies: - "@babel/core": "npm:^7.23.2" - "@babel/preset-env": "npm:^7.23.2" - "@babel/types": "npm:^7.23.0" + "@babel/core": "npm:^7.24.4" + "@babel/preset-env": "npm:^7.24.4" + "@babel/types": "npm:^7.24.0" "@storybook/csf": "npm:^0.1.4" "@storybook/csf-tools": "workspace:*" "@storybook/node-logger": "workspace:*" @@ -5784,7 +5956,7 @@ __metadata: resolution: "@storybook/core-server@workspace:lib/core-server" dependencies: "@aw-web-design/x-default-browser": "npm:1.4.126" - "@babel/core": "npm:^7.23.9" + "@babel/core": "npm:^7.24.4" "@babel/parser": "npm:^7.24.4" "@discoveryjs/json-ext": "npm:^0.5.3" "@storybook/addon-docs": "workspace:*" @@ -5871,10 +6043,10 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/csf-tools@workspace:lib/csf-tools" dependencies: - "@babel/generator": "npm:^7.23.0" - "@babel/parser": "npm:^7.23.0" - "@babel/traverse": "npm:^7.23.2" - "@babel/types": "npm:^7.23.0" + "@babel/generator": "npm:^7.24.4" + "@babel/parser": "npm:^7.24.4" + "@babel/traverse": "npm:^7.24.1" + "@babel/types": "npm:^7.24.0" "@storybook/csf": "npm:^0.1.4" "@storybook/types": "workspace:*" "@types/fs-extra": "npm:^11.0.1" @@ -5916,7 +6088,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/docs-tools@workspace:lib/docs-tools" dependencies: - "@babel/preset-react": "npm:^7.23.3" + "@babel/preset-react": "npm:^7.24.1" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" "@storybook/preview-api": "workspace:*" @@ -6146,20 +6318,20 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/nextjs@workspace:frameworks/nextjs" dependencies: - "@babel/core": "npm:^7.23.2" + "@babel/core": "npm:^7.24.4" "@babel/plugin-syntax-bigint": "npm:^7.8.3" "@babel/plugin-syntax-dynamic-import": "npm:^7.8.3" - "@babel/plugin-syntax-import-assertions": "npm:^7.22.5" - "@babel/plugin-transform-class-properties": "npm:^7.22.5" - "@babel/plugin-transform-export-namespace-from": "npm:^7.22.11" - "@babel/plugin-transform-numeric-separator": "npm:^7.22.11" - "@babel/plugin-transform-object-rest-spread": "npm:^7.22.15" - "@babel/plugin-transform-runtime": "npm:^7.23.2" - "@babel/preset-env": "npm:^7.23.2" - "@babel/preset-react": "npm:^7.22.15" - "@babel/preset-typescript": "npm:^7.23.2" - "@babel/runtime": "npm:^7.23.2" - "@babel/types": "npm:^7.23.0" + "@babel/plugin-syntax-import-assertions": "npm:^7.24.1" + "@babel/plugin-transform-class-properties": "npm:^7.24.1" + "@babel/plugin-transform-export-namespace-from": "npm:^7.24.1" + "@babel/plugin-transform-numeric-separator": "npm:^7.24.1" + "@babel/plugin-transform-object-rest-spread": "npm:^7.24.1" + "@babel/plugin-transform-runtime": "npm:^7.24.3" + "@babel/preset-env": "npm:^7.24.4" + "@babel/preset-react": "npm:^7.24.1" + "@babel/preset-typescript": "npm:^7.24.1" + "@babel/runtime": "npm:^7.24.4" + "@babel/types": "npm:^7.24.0" "@pmmmwh/react-refresh-webpack-plugin": "npm:^0.5.11" "@storybook/addon-actions": "workspace:*" "@storybook/builder-webpack5": "workspace:*" @@ -10380,6 +10552,19 @@ __metadata: languageName: node linkType: hard +"babel-plugin-polyfill-corejs2@npm:^0.4.10": + version: 0.4.11 + resolution: "babel-plugin-polyfill-corejs2@npm:0.4.11" + dependencies: + "@babel/compat-data": "npm:^7.22.6" + "@babel/helper-define-polyfill-provider": "npm:^0.6.2" + semver: "npm:^6.3.1" + peerDependencies: + "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0 + checksum: 10c0/b2217bc8d5976cf8142453ed44daabf0b2e0e75518f24eac83b54a8892e87a88f1bd9089daa92fd25df979ecd0acfd29b6bc28c4182c1c46344cee15ef9bce84 + languageName: node + linkType: hard + "babel-plugin-polyfill-corejs2@npm:^0.4.8": version: 0.4.9 resolution: "babel-plugin-polyfill-corejs2@npm:0.4.9" @@ -10393,6 +10578,18 @@ __metadata: languageName: node linkType: hard +"babel-plugin-polyfill-corejs3@npm:^0.10.1, babel-plugin-polyfill-corejs3@npm:^0.10.4": + version: 0.10.4 + resolution: "babel-plugin-polyfill-corejs3@npm:0.10.4" + dependencies: + "@babel/helper-define-polyfill-provider": "npm:^0.6.1" + core-js-compat: "npm:^3.36.1" + peerDependencies: + "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0 + checksum: 10c0/31b92cd3dfb5b417da8dfcf0deaa4b8b032b476d7bb31ca51c66127cf25d41e89260e89d17bc004b2520faa38aa9515fafabf81d89f9d4976e9dc1163e4a7c41 + languageName: node + linkType: hard + "babel-plugin-polyfill-corejs3@npm:^0.9.0": version: 0.9.0 resolution: "babel-plugin-polyfill-corejs3@npm:0.9.0" @@ -10416,6 +10613,17 @@ __metadata: languageName: node linkType: hard +"babel-plugin-polyfill-regenerator@npm:^0.6.1": + version: 0.6.2 + resolution: "babel-plugin-polyfill-regenerator@npm:0.6.2" + dependencies: + "@babel/helper-define-polyfill-provider": "npm:^0.6.2" + peerDependencies: + "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0 + checksum: 10c0/bc541037cf7620bc84ddb75a1c0ce3288f90e7d2799c070a53f8a495c8c8ae0316447becb06f958dd25dcce2a2fce855d318ecfa48036a1ddb218d55aa38a744 + languageName: node + linkType: hard + "babel-plugin-react-docgen@npm:4.2.1, babel-plugin-react-docgen@npm:^4.2.1": version: 4.2.1 resolution: "babel-plugin-react-docgen@npm:4.2.1" @@ -12227,6 +12435,15 @@ __metadata: languageName: node linkType: hard +"core-js-compat@npm:^3.36.1": + version: 3.37.0 + resolution: "core-js-compat@npm:3.37.0" + dependencies: + browserslist: "npm:^4.23.0" + checksum: 10c0/ca6ba7d200f7a4a850fd5cba58b40ab78139d3f301bad7b53816eafe0cfb000523e72882069ddaba440794b950ed101225668bf7b97b73e54a5e3384a8215e03 + languageName: node + linkType: hard + "core-js-pure@npm:^3.23.3, core-js-pure@npm:^3.30.2": version: 3.33.0 resolution: "core-js-pure@npm:3.33.0" @@ -22707,7 +22924,7 @@ __metadata: languageName: node linkType: hard -"pirates@npm:^4.0.5": +"pirates@npm:^4.0.6": version: 4.0.6 resolution: "pirates@npm:4.0.6" checksum: 10c0/00d5fa51f8dded94d7429700fb91a0c1ead00ae2c7fd27089f0c5b63e6eca36197fe46384631872690a66f390c5e27198e99006ab77ae472692ab9c2ca903f36 From 9fc3a0fd5d792aacb1833328c1b5c861438341b8 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Tue, 23 Apr 2024 05:08:37 -0600 Subject: [PATCH 306/380] Update kitchen-sink lock files --- .../nextjs/yarn.lock | 1842 ++++++++++++----- .../react/yarn.lock | 1572 ++++++++++---- .../svelte/yarn.lock | 1502 ++++++++++---- .../vue3/yarn.lock | 1502 ++++++++++---- 4 files changed, 4529 insertions(+), 1889 deletions(-) diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock b/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock index 99d48a7714ec..c6b4f419a9d9 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock @@ -50,14 +50,31 @@ __metadata: languageName: node linkType: hard -"@babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.23.3, @babel/compat-data@npm:^7.23.5": +"@babel/code-frame@npm:^7.24.1, @babel/code-frame@npm:^7.24.2": + version: 7.24.2 + resolution: "@babel/code-frame@npm:7.24.2" + dependencies: + "@babel/highlight": "npm:^7.24.2" + picocolors: "npm:^1.0.0" + checksum: 10/7db8f5b36ffa3f47a37f58f61e3d130b9ecad21961f3eede7e2a4ac2c7e4a5efb6e9d03a810c669bc986096831b6c0dfc2c3082673d93351b82359c1b03e0590 + languageName: node + linkType: hard + +"@babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.23.5": version: 7.23.5 resolution: "@babel/compat-data@npm:7.23.5" checksum: 10/088f14f646ecbddd5ef89f120a60a1b3389a50a9705d44603dca77662707d0175a5e0e0da3943c3298f1907a4ab871468656fbbf74bb7842cd8b0686b2c19736 languageName: node linkType: hard -"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3, @babel/core@npm:^7.18.9, @babel/core@npm:^7.23.0, @babel/core@npm:^7.23.2, @babel/core@npm:^7.23.9": +"@babel/compat-data@npm:^7.24.4": + version: 7.24.4 + resolution: "@babel/compat-data@npm:7.24.4" + checksum: 10/e51faec0ac8259f03cc5029d2b4a944b4fee44cb5188c11530769d5beb81f384d031dba951febc3e33dbb48ceb8045b1184f5c1ac4c5f86ab1f5e951e9aaf7af + languageName: node + linkType: hard + +"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3, @babel/core@npm:^7.18.9, @babel/core@npm:^7.23.0, @babel/core@npm:^7.23.9": version: 7.23.9 resolution: "@babel/core@npm:7.23.9" dependencies: @@ -80,7 +97,30 @@ __metadata: languageName: node linkType: hard -"@babel/generator@npm:^7.23.0, @babel/generator@npm:^7.23.6, @babel/generator@npm:^7.7.2": +"@babel/core@npm:^7.24.4": + version: 7.24.4 + resolution: "@babel/core@npm:7.24.4" + dependencies: + "@ampproject/remapping": "npm:^2.2.0" + "@babel/code-frame": "npm:^7.24.2" + "@babel/generator": "npm:^7.24.4" + "@babel/helper-compilation-targets": "npm:^7.23.6" + "@babel/helper-module-transforms": "npm:^7.23.3" + "@babel/helpers": "npm:^7.24.4" + "@babel/parser": "npm:^7.24.4" + "@babel/template": "npm:^7.24.0" + "@babel/traverse": "npm:^7.24.1" + "@babel/types": "npm:^7.24.0" + convert-source-map: "npm:^2.0.0" + debug: "npm:^4.1.0" + gensync: "npm:^1.0.0-beta.2" + json5: "npm:^2.2.3" + semver: "npm:^6.3.1" + checksum: 10/1e049f8df26be0fe5be36173fd7c33dfb004eeeec28152fea83c90e71784f9a6f2237296f43a2ee7d9041e2a33a05f43da48ce2d4e0cd473a682328ca07ce7e0 + languageName: node + linkType: hard + +"@babel/generator@npm:^7.23.6, @babel/generator@npm:^7.7.2": version: 7.23.6 resolution: "@babel/generator@npm:7.23.6" dependencies: @@ -92,6 +132,18 @@ __metadata: languageName: node linkType: hard +"@babel/generator@npm:^7.24.1, @babel/generator@npm:^7.24.4": + version: 7.24.4 + resolution: "@babel/generator@npm:7.24.4" + dependencies: + "@babel/types": "npm:^7.24.0" + "@jridgewell/gen-mapping": "npm:^0.3.5" + "@jridgewell/trace-mapping": "npm:^0.3.25" + jsesc: "npm:^2.5.1" + checksum: 10/69e1772dcf8f95baec951f422cca091d59a3f29b5eedc989ad87f7262289b94625983f6fe654302ca17aae0a32f9232332b83fcc85533311d6267b09c58b1061 + languageName: node + linkType: hard + "@babel/helper-annotate-as-pure@npm:^7.22.5": version: 7.22.5 resolution: "@babel/helper-annotate-as-pure@npm:7.22.5" @@ -110,7 +162,7 @@ __metadata: languageName: node linkType: hard -"@babel/helper-compilation-targets@npm:^7.22.15, @babel/helper-compilation-targets@npm:^7.22.6, @babel/helper-compilation-targets@npm:^7.23.6": +"@babel/helper-compilation-targets@npm:^7.22.6, @babel/helper-compilation-targets@npm:^7.23.6": version: 7.23.6 resolution: "@babel/helper-compilation-targets@npm:7.23.6" dependencies: @@ -142,6 +194,25 @@ __metadata: languageName: node linkType: hard +"@babel/helper-create-class-features-plugin@npm:^7.24.1, @babel/helper-create-class-features-plugin@npm:^7.24.4": + version: 7.24.4 + resolution: "@babel/helper-create-class-features-plugin@npm:7.24.4" + dependencies: + "@babel/helper-annotate-as-pure": "npm:^7.22.5" + "@babel/helper-environment-visitor": "npm:^7.22.20" + "@babel/helper-function-name": "npm:^7.23.0" + "@babel/helper-member-expression-to-functions": "npm:^7.23.0" + "@babel/helper-optimise-call-expression": "npm:^7.22.5" + "@babel/helper-replace-supers": "npm:^7.24.1" + "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5" + "@babel/helper-split-export-declaration": "npm:^7.22.6" + semver: "npm:^6.3.1" + peerDependencies: + "@babel/core": ^7.0.0 + checksum: 10/86153719d98e4402f92f24d6b1be94e6b59c0236a6cc36b173a570a64b5156dbc2f16ccfe3c8485dc795524ca88acca65b14863be63049586668c45567f2acd4 + languageName: node + linkType: hard + "@babel/helper-create-regexp-features-plugin@npm:^7.18.6, @babel/helper-create-regexp-features-plugin@npm:^7.22.15, @babel/helper-create-regexp-features-plugin@npm:^7.22.5": version: 7.22.15 resolution: "@babel/helper-create-regexp-features-plugin@npm:7.22.15" @@ -155,9 +226,9 @@ __metadata: languageName: node linkType: hard -"@babel/helper-define-polyfill-provider@npm:^0.5.0": - version: 0.5.0 - resolution: "@babel/helper-define-polyfill-provider@npm:0.5.0" +"@babel/helper-define-polyfill-provider@npm:^0.6.1, @babel/helper-define-polyfill-provider@npm:^0.6.2": + version: 0.6.2 + resolution: "@babel/helper-define-polyfill-provider@npm:0.6.2" dependencies: "@babel/helper-compilation-targets": "npm:^7.22.6" "@babel/helper-plugin-utils": "npm:^7.22.5" @@ -166,7 +237,7 @@ __metadata: resolve: "npm:^1.14.2" peerDependencies: "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0 - checksum: 10/f849e816ec4b182a3e8fa8e09ff016f88bb95259cd6b2190b815c48f83c3d3b68e973a8ec72acc5086bfe93705cbd46ec089c06476421d858597780e42235a03 + checksum: 10/bb32ec12024d3f16e70641bc125d2534a97edbfdabbc9f69001ec9c4ce46f877c7a224c566aa6c8c510c3b0def2e43dc4433bf6a40896ba5ce0cef4ea5ccbcff languageName: node linkType: hard @@ -214,6 +285,15 @@ __metadata: languageName: node linkType: hard +"@babel/helper-module-imports@npm:^7.24.1, @babel/helper-module-imports@npm:^7.24.3": + version: 7.24.3 + resolution: "@babel/helper-module-imports@npm:7.24.3" + dependencies: + "@babel/types": "npm:^7.24.0" + checksum: 10/42fe124130b78eeb4bb6af8c094aa749712be0f4606f46716ce74bc18a5ea91c918c547c8bb2307a2e4b33f163e4ad2cb6a7b45f80448e624eae45b597ea3499 + languageName: node + linkType: hard + "@babel/helper-module-transforms@npm:^7.23.3": version: 7.23.3 resolution: "@babel/helper-module-transforms@npm:7.23.3" @@ -245,6 +325,13 @@ __metadata: languageName: node linkType: hard +"@babel/helper-plugin-utils@npm:^7.24.0": + version: 7.24.0 + resolution: "@babel/helper-plugin-utils@npm:7.24.0" + checksum: 10/dc8c7af321baf7653d93315beffee1790eb2c464b4f529273a24c8743a3f3095bf3f2d11828cb2c52d56282ef43a4bdc67a79c9ab8dd845e35d01871f3f28a0e + languageName: node + linkType: hard + "@babel/helper-remap-async-to-generator@npm:^7.22.20": version: 7.22.20 resolution: "@babel/helper-remap-async-to-generator@npm:7.22.20" @@ -271,6 +358,19 @@ __metadata: languageName: node linkType: hard +"@babel/helper-replace-supers@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/helper-replace-supers@npm:7.24.1" + dependencies: + "@babel/helper-environment-visitor": "npm:^7.22.20" + "@babel/helper-member-expression-to-functions": "npm:^7.23.0" + "@babel/helper-optimise-call-expression": "npm:^7.22.5" + peerDependencies: + "@babel/core": ^7.0.0 + checksum: 10/1103b28ce0cc7fba903c21bc78035c696ff191bdbbe83c20c37030a2e10ae6254924556d942cdf8c44c48ba606a8266fdb105e6bb10945de9285f79cb1905df1 + languageName: node + linkType: hard + "@babel/helper-simple-access@npm:^7.22.5": version: 7.22.5 resolution: "@babel/helper-simple-access@npm:7.22.5" @@ -341,6 +441,17 @@ __metadata: languageName: node linkType: hard +"@babel/helpers@npm:^7.24.4": + version: 7.24.4 + resolution: "@babel/helpers@npm:7.24.4" + dependencies: + "@babel/template": "npm:^7.24.0" + "@babel/traverse": "npm:^7.24.1" + "@babel/types": "npm:^7.24.0" + checksum: 10/54a9d0f86f2803fcc216cfa23b66b871ea0fa0a892af1c9a79075872c2437de71afbb150ed8216f30e00b19a0b9c5c9d5845173d170e1ebfbbf8887839b89dde + languageName: node + linkType: hard + "@babel/highlight@npm:^7.23.4": version: 7.23.4 resolution: "@babel/highlight@npm:7.23.4" @@ -352,6 +463,18 @@ __metadata: languageName: node linkType: hard +"@babel/highlight@npm:^7.24.2": + version: 7.24.2 + resolution: "@babel/highlight@npm:7.24.2" + dependencies: + "@babel/helper-validator-identifier": "npm:^7.22.20" + chalk: "npm:^2.4.2" + js-tokens: "npm:^4.0.0" + picocolors: "npm:^1.0.0" + checksum: 10/4555124235f34403bb28f55b1de58edf598491cc181c75f8afc8fe529903cb598cd52fe3bf2faab9bc1f45c299681ef0e44eea7a848bb85c500c5a4fe13f54f6 + languageName: node + linkType: hard + "@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.23.0, @babel/parser@npm:^7.23.9": version: 7.23.9 resolution: "@babel/parser@npm:7.23.9" @@ -361,39 +484,60 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.23.3" +"@babel/parser@npm:^7.24.0, @babel/parser@npm:^7.24.1, @babel/parser@npm:^7.24.4": + version: 7.24.4 + resolution: "@babel/parser@npm:7.24.4" + bin: + parser: ./bin/babel-parser.js + checksum: 10/3742cc5068036287e6395269dce5a2735e6349cdc8d4b53297c75f98c580d7e1c8cb43235623999d151f2ef975d677dbc2c2357573a1855caa71c271bf3046c9 + languageName: node + linkType: hard + +"@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:^7.24.4": + version: 7.24.4 + resolution: "@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:7.24.4" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-environment-visitor": "npm:^7.22.20" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0 - checksum: 10/ddbaf2c396b7780f15e80ee01d6dd790db076985f3dfeb6527d1a8d4cacf370e49250396a3aa005b2c40233cac214a106232f83703d5e8491848bde273938232 + checksum: 10/1439e2ceec512b72f05f036503bf2c31e807d1b75ae22cf2676145e9f20740960a1c9575ea3065c6fb9f44f6b46163aab76eac513694ffa10de674e3cdd6219e languageName: node linkType: hard -"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:7.23.3" +"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" + peerDependencies: + "@babel/core": ^7.0.0 + checksum: 10/ec5fddc8db6de0e0082a883f21141d6f4f9f9f0bc190d662a732b5e9a506aae5d7d2337049a1bf055d7cb7add6f128036db6d4f47de5e9ac1be29e043c8b7ca8 + languageName: node + linkType: hard + +"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:7.24.1" + dependencies: + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5" - "@babel/plugin-transform-optional-chaining": "npm:^7.23.3" + "@babel/plugin-transform-optional-chaining": "npm:^7.24.1" peerDependencies: "@babel/core": ^7.13.0 - checksum: 10/434b9d710ae856fa1a456678cc304fbc93915af86d581ee316e077af746a709a741ea39d7e1d4f5b98861b629cc7e87f002d3138f5e836775632466d4c74aef2 + checksum: 10/e18235463e716ac2443938aaec3c18b40c417a1746fba0fa4c26cf4d71326b76ef26c002081ab1b445abfae98e063d561519aa55672dddc1ef80b3940211ffbb languageName: node linkType: hard -"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:^7.23.7": - version: 7.23.7 - resolution: "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:7.23.7" +"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:7.24.1" dependencies: "@babel/helper-environment-visitor": "npm:^7.22.20" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0 - checksum: 10/3b0c9554cd0048e6e7341d7b92f29d400dbc6a5a4fc2f86dbed881d32e02ece9b55bc520387bae2eac22a5ab38a0b205c29b52b181294d99b4dd75e27309b548 + checksum: 10/3483f329bb099b438d05e5e206229ddbc1703972a69ba0240a796b5477369930b0ab2e7f6c9539ecad2cea8b0c08fa65498778b92cf87ad3d156f613de1fd2fa languageName: node linkType: hard @@ -483,25 +627,25 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-syntax-import-assertions@npm:^7.22.5, @babel/plugin-syntax-import-assertions@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-syntax-import-assertions@npm:7.23.3" +"@babel/plugin-syntax-import-assertions@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-syntax-import-assertions@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/883e6b35b2da205138caab832d54505271a3fee3fc1e8dc0894502434fc2b5d517cbe93bbfbfef8068a0fb6ec48ebc9eef3f605200a489065ba43d8cddc1c9a7 + checksum: 10/2a463928a63b62052e9fb8f8b0018aa11a926e94f32c168260ae012afe864875c6176c6eb361e13f300542c31316dad791b08a5b8ed92436a3095c7a0e4fce65 languageName: node linkType: hard -"@babel/plugin-syntax-import-attributes@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-syntax-import-attributes@npm:7.23.3" +"@babel/plugin-syntax-import-attributes@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-syntax-import-attributes@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/9aed7661ffb920ca75df9f494757466ca92744e43072e0848d87fa4aa61a3f2ee5a22198ac1959856c036434b5614a8f46f1fb70298835dbe28220cdd1d4c11e + checksum: 10/87c8aa4a5ef931313f956871b27f2c051556f627b97ed21e9a5890ca4906b222d89062a956cde459816f5e0dec185ff128d7243d3fdc389504522acb88f0464e languageName: node linkType: hard @@ -538,6 +682,17 @@ __metadata: languageName: node linkType: hard +"@babel/plugin-syntax-jsx@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-syntax-jsx@npm:7.24.1" + dependencies: + "@babel/helper-plugin-utils": "npm:^7.24.0" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10/712f7e7918cb679f106769f57cfab0bc99b311032665c428b98f4c3e2e6d567601d45386a4f246df6a80d741e1f94192b3f008800d66c4f1daae3ad825c243f0 + languageName: node + linkType: hard + "@babel/plugin-syntax-logical-assignment-operators@npm:^7.10.4, @babel/plugin-syntax-logical-assignment-operators@npm:^7.8.3": version: 7.10.4 resolution: "@babel/plugin-syntax-logical-assignment-operators@npm:7.10.4" @@ -637,6 +792,17 @@ __metadata: languageName: node linkType: hard +"@babel/plugin-syntax-typescript@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-syntax-typescript@npm:7.24.1" + dependencies: + "@babel/helper-plugin-utils": "npm:^7.24.0" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10/bf4bd70788d5456b5f75572e47a2e31435c7c4e43609bd4dffd2cc0c7a6cf90aabcf6cd389e351854de9a64412a07d30effef5373251fe8f6a4c9db0c0163bda + languageName: node + linkType: hard + "@babel/plugin-syntax-unicode-sets-regex@npm:^7.18.6": version: 7.18.6 resolution: "@babel/plugin-syntax-unicode-sets-regex@npm:7.18.6" @@ -649,67 +815,67 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-arrow-functions@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-arrow-functions@npm:7.23.3" +"@babel/plugin-transform-arrow-functions@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-arrow-functions@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/1e99118176e5366c2636064d09477016ab5272b2a92e78b8edb571d20bc3eaa881789a905b20042942c3c2d04efc530726cf703f937226db5ebc495f5d067e66 + checksum: 10/58f9aa9b0de8382f8cfa3f1f1d40b69d98cd2f52340e2391733d0af745fdddda650ba392e509bc056157c880a2f52834a38ab2c5aa5569af8c61bb6ecbf45f34 languageName: node linkType: hard -"@babel/plugin-transform-async-generator-functions@npm:^7.23.9": - version: 7.23.9 - resolution: "@babel/plugin-transform-async-generator-functions@npm:7.23.9" +"@babel/plugin-transform-async-generator-functions@npm:^7.24.3": + version: 7.24.3 + resolution: "@babel/plugin-transform-async-generator-functions@npm:7.24.3" dependencies: "@babel/helper-environment-visitor": "npm:^7.22.20" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/helper-remap-async-to-generator": "npm:^7.22.20" "@babel/plugin-syntax-async-generators": "npm:^7.8.4" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/d402494087a6b803803eb5ab46b837aab100a04c4c5148e38bfa943ea1bbfc1ecfb340f1ced68972564312d3580f550c125f452372e77607a558fbbaf98c31c0 + checksum: 10/4ccc3755a3d51544cd43575db2c5c2ef42cdcd35bd5940d13cdf23f04c75496290e79ea585a62427ec6bd508a1bffb329e01556cd1114be9b38ae4254935cd19 languageName: node linkType: hard -"@babel/plugin-transform-async-to-generator@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-async-to-generator@npm:7.23.3" +"@babel/plugin-transform-async-to-generator@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-async-to-generator@npm:7.24.1" dependencies: - "@babel/helper-module-imports": "npm:^7.22.15" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-module-imports": "npm:^7.24.1" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/helper-remap-async-to-generator": "npm:^7.22.20" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/2e9d9795d4b3b3d8090332104e37061c677f29a1ce65bcbda4099a32d243e5d9520270a44bbabf0fb1fb40d463bd937685b1a1042e646979086c546d55319c3c + checksum: 10/429004a6596aa5c9e707b604156f49a146f8d029e31a3152b1649c0b56425264fda5fd38e5db1ddaeb33c3fe45c97dc8078d7abfafe3542a979b49f229801135 languageName: node linkType: hard -"@babel/plugin-transform-block-scoped-functions@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-block-scoped-functions@npm:7.23.3" +"@babel/plugin-transform-block-scoped-functions@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-block-scoped-functions@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/e63b16d94ee5f4d917e669da3db5ea53d1e7e79141a2ec873c1e644678cdafe98daa556d0d359963c827863d6b3665d23d4938a94a4c5053a1619c4ebd01d020 + checksum: 10/d8e18bd57b156da1cd4d3c1780ab9ea03afed56c6824ca8e6e74f67959d7989a0e953ec370fe9b417759314f2eef30c8c437395ce63ada2e26c2f469e4704f82 languageName: node linkType: hard -"@babel/plugin-transform-block-scoping@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-block-scoping@npm:7.23.4" +"@babel/plugin-transform-block-scoping@npm:^7.24.4": + version: 7.24.4 + resolution: "@babel/plugin-transform-block-scoping@npm:7.24.4" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/bbb965a3acdfb03559806d149efbd194ac9c983b260581a60efcb15eb9fbe20e3054667970800146d867446db1c1398f8e4ee87f4454233e49b8f8ce947bd99b + checksum: 10/4093fa109cd256e8ad0b26e3ffa67ec6dac4078a1a24b7755bed63e650cf938b2a315e01696c35b221db1a37606f93cb82696c8d1bf563c2a9845620e551736e languageName: node linkType: hard -"@babel/plugin-transform-class-properties@npm:^7.22.5, @babel/plugin-transform-class-properties@npm:^7.23.3": +"@babel/plugin-transform-class-properties@npm:^7.22.5": version: 7.23.3 resolution: "@babel/plugin-transform-class-properties@npm:7.23.3" dependencies: @@ -721,116 +887,128 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-class-static-block@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-class-static-block@npm:7.23.4" +"@babel/plugin-transform-class-properties@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-class-properties@npm:7.24.1" dependencies: - "@babel/helper-create-class-features-plugin": "npm:^7.22.15" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-create-class-features-plugin": "npm:^7.24.1" + "@babel/helper-plugin-utils": "npm:^7.24.0" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10/95779e9eef0c0638b9631c297d48aee53ffdbb2b1b5221bf40d7eccd566a8e34f859ff3571f8f20b9159b67f1bff7d7dc81da191c15d69fbae5a645197eae7e0 + languageName: node + linkType: hard + +"@babel/plugin-transform-class-static-block@npm:^7.24.4": + version: 7.24.4 + resolution: "@babel/plugin-transform-class-static-block@npm:7.24.4" + dependencies: + "@babel/helper-create-class-features-plugin": "npm:^7.24.4" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/plugin-syntax-class-static-block": "npm:^7.14.5" peerDependencies: "@babel/core": ^7.12.0 - checksum: 10/c8bfaba19a674fc2eb54edad71e958647360474e3163e8226f1acd63e4e2dbec32a171a0af596c1dc5359aee402cc120fea7abd1fb0e0354b6527f0fc9e8aa1e + checksum: 10/3b1db3308b57ba21d47772a9f183804234c23fd64c9ca40915d2d65c5dc7a48b49a6de16b8b90b7a354eacbb51232a862f0fca3dbd23e27d34641f511decddab languageName: node linkType: hard -"@babel/plugin-transform-classes@npm:^7.23.8": - version: 7.23.8 - resolution: "@babel/plugin-transform-classes@npm:7.23.8" +"@babel/plugin-transform-classes@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-classes@npm:7.24.1" dependencies: "@babel/helper-annotate-as-pure": "npm:^7.22.5" "@babel/helper-compilation-targets": "npm:^7.23.6" "@babel/helper-environment-visitor": "npm:^7.22.20" "@babel/helper-function-name": "npm:^7.23.0" - "@babel/helper-plugin-utils": "npm:^7.22.5" - "@babel/helper-replace-supers": "npm:^7.22.20" + "@babel/helper-plugin-utils": "npm:^7.24.0" + "@babel/helper-replace-supers": "npm:^7.24.1" "@babel/helper-split-export-declaration": "npm:^7.22.6" globals: "npm:^11.1.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/4bb4b19e7a39871c4414fb44fc5f2cc47c78f993b74c43238dfb99c9dac2d15cb99b43f8a3d42747580e1807d2b8f5e13ce7e95e593fd839bd176aa090bf9a23 + checksum: 10/eb7f4a3d852cfa20f4efd299929c564bd2b45106ac1cf4ac8b0c87baf078d4a15c39b8a21bbb01879c1922acb9baaf3c9b150486e18d84b30129e9671639793d languageName: node linkType: hard -"@babel/plugin-transform-computed-properties@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-computed-properties@npm:7.23.3" +"@babel/plugin-transform-computed-properties@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-computed-properties@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" - "@babel/template": "npm:^7.22.15" + "@babel/helper-plugin-utils": "npm:^7.24.0" + "@babel/template": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/e75593e02c5ea473c17839e3c9d597ce3697bf039b66afe9a4d06d086a87fb3d95850b4174476897afc351dc1b46a9ec3165ee6e8fbad3732c0d65f676f855ad + checksum: 10/62bbfe1bd508517d96ba6909e68b1adb9dfd24ea61af1f4b0aa909bfc5e476044afe9c55b10ef74508fd147aa665e818df67ece834d164a9fd69b80c9ede3875 languageName: node linkType: hard -"@babel/plugin-transform-destructuring@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-destructuring@npm:7.23.3" +"@babel/plugin-transform-destructuring@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-destructuring@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/5abd93718af5a61f8f6a97d2ccac9139499752dd5b2c533d7556fb02947ae01b2f51d4c4f5e64df569e8783d3743270018eb1fa979c43edec7dd1377acf107ed + checksum: 10/03d9a81cd9eeb24d48e207be536d460d6ad228238ac70da9b7ad4bae799847bb3be0aecfa4ea6223752f3a8d4ada3a58cd9a0f8fc70c01fdfc87ad0618f897d3 languageName: node linkType: hard -"@babel/plugin-transform-dotall-regex@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-dotall-regex@npm:7.23.3" +"@babel/plugin-transform-dotall-regex@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-dotall-regex@npm:7.24.1" dependencies: "@babel/helper-create-regexp-features-plugin": "npm:^7.22.15" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/a2dbbf7f1ea16a97948c37df925cb364337668c41a3948b8d91453f140507bd8a3429030c7ce66d09c299987b27746c19a2dd18b6f17dcb474854b14fd9159a3 + checksum: 10/7f623d25b6f213b94ebc1754e9e31c1077c8e288626d8b7bfa76a97b067ce80ddcd0ede402a546706c65002c0ccf45cd5ec621511c2668eed31ebcabe8391d35 languageName: node linkType: hard -"@babel/plugin-transform-duplicate-keys@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-duplicate-keys@npm:7.23.3" +"@babel/plugin-transform-duplicate-keys@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-duplicate-keys@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/c2a21c34dc0839590cd945192cbc46fde541a27e140c48fe1808315934664cdbf18db64889e23c4eeb6bad9d3e049482efdca91d29de5734ffc887c4fbabaa16 + checksum: 10/de600a958ad146fc8aca71fd2dfa5ebcfdb97df4eaa530fc9a4b0d28d85442ddb9b7039f260b396785211e88c6817125a94c183459763c363847e8c84f318ff0 languageName: node linkType: hard -"@babel/plugin-transform-dynamic-import@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-dynamic-import@npm:7.23.4" +"@babel/plugin-transform-dynamic-import@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-dynamic-import@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/plugin-syntax-dynamic-import": "npm:^7.8.3" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/57a722604c430d9f3dacff22001a5f31250e34785d4969527a2ae9160fa86858d0892c5b9ff7a06a04076f8c76c9e6862e0541aadca9c057849961343aab0845 + checksum: 10/59fc561ee40b1a69f969c12c6c5fac206226d6642213985a569dd0f99f8e41c0f4eaedebd36936c255444a8335079842274c42a975a433beadb436d4c5abb79b languageName: node linkType: hard -"@babel/plugin-transform-exponentiation-operator@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-exponentiation-operator@npm:7.23.3" +"@babel/plugin-transform-exponentiation-operator@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-exponentiation-operator@npm:7.24.1" dependencies: "@babel/helper-builder-binary-assignment-operator-visitor": "npm:^7.22.15" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/00d05ab14ad0f299160fcf9d8f55a1cc1b740e012ab0b5ce30207d2365f091665115557af7d989cd6260d075a252d9e4283de5f2b247dfbbe0e42ae586e6bf66 + checksum: 10/f90841fe1a1e9f680b4209121d3e2992f923e85efcd322b26e5901c180ef44ff727fb89790803a23fac49af34c1ce2e480018027c22b4573b615512ac5b6fc50 languageName: node linkType: hard -"@babel/plugin-transform-export-namespace-from@npm:^7.22.11, @babel/plugin-transform-export-namespace-from@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-export-namespace-from@npm:7.23.4" +"@babel/plugin-transform-export-namespace-from@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-export-namespace-from@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/plugin-syntax-export-namespace-from": "npm:^7.8.3" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/9f770a81bfd03b48d6ba155d452946fd56d6ffe5b7d871e9ec2a0b15e0f424273b632f3ed61838b90015b25bbda988896b7a46c7d964fbf8f6feb5820b309f93 + checksum: 10/bc710ac231919df9555331885748385c11c5e695d7271824fe56fba51dd637d48d3e5cd52e1c69f2b1a384fbbb41552572bc1ca3a2285ee29571f002e9bb2421 languageName: node linkType: hard @@ -846,86 +1024,86 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-for-of@npm:^7.23.6": - version: 7.23.6 - resolution: "@babel/plugin-transform-for-of@npm:7.23.6" +"@babel/plugin-transform-for-of@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-for-of@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/b84ef1f26a2db316237ae6d10fa7c22c70ac808ed0b8e095a8ecf9101551636cbb026bee9fb95a0a7944f3b8278ff9636a9088cb4a4ac5b84830a13829242735 + checksum: 10/befd0908c3f6b31f9fa9363a3c112d25eaa0bc4a79cfad1f0a8bb5010937188b043a44fb23443bc8ffbcc40c015bb25f80e4cc585ce5cc580708e2d56e76fe37 languageName: node linkType: hard -"@babel/plugin-transform-function-name@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-function-name@npm:7.23.3" +"@babel/plugin-transform-function-name@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-function-name@npm:7.24.1" dependencies: - "@babel/helper-compilation-targets": "npm:^7.22.15" + "@babel/helper-compilation-targets": "npm:^7.23.6" "@babel/helper-function-name": "npm:^7.23.0" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/355c6dbe07c919575ad42b2f7e020f320866d72f8b79181a16f8e0cd424a2c761d979f03f47d583d9471b55dcd68a8a9d829b58e1eebcd572145b934b48975a6 + checksum: 10/31eb3c75297dda7265f78eba627c446f2324e30ec0124a645ccc3e9f341254aaa40d6787bd62b2280d77c0a5c9fbfce1da2c200ef7c7f8e0a1b16a8eb3644c6f languageName: node linkType: hard -"@babel/plugin-transform-json-strings@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-json-strings@npm:7.23.4" +"@babel/plugin-transform-json-strings@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-json-strings@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/plugin-syntax-json-strings": "npm:^7.8.3" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/f9019820233cf8955d8ba346df709a0683c120fe86a24ed1c9f003f2db51197b979efc88f010d558a12e1491210fc195a43cd1c7fee5e23b92da38f793a875de + checksum: 10/f42302d42fc81ac00d14e9e5d80405eb80477d7f9039d7208e712d6bcd486a4e3b32fdfa07b5f027d6c773723d8168193ee880f93b0e430c828e45f104fb82a4 languageName: node linkType: hard -"@babel/plugin-transform-literals@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-literals@npm:7.23.3" +"@babel/plugin-transform-literals@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-literals@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/519a544cd58586b9001c4c9b18da25a62f17d23c48600ff7a685d75ca9eb18d2c5e8f5476f067f0a8f1fea2a31107eff950b9864833061e6076dcc4bdc3e71ed + checksum: 10/2df94e9478571852483aca7588419e574d76bde97583e78551c286f498e01321e7dbb1d0ef67bee16e8f950688f79688809cfde370c5c4b84c14d841a3ef217a languageName: node linkType: hard -"@babel/plugin-transform-logical-assignment-operators@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-logical-assignment-operators@npm:7.23.4" +"@babel/plugin-transform-logical-assignment-operators@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-logical-assignment-operators@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/plugin-syntax-logical-assignment-operators": "npm:^7.10.4" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/2ae1dc9b4ff3bf61a990ff3accdecb2afe3a0ca649b3e74c010078d1cdf29ea490f50ac0a905306a2bcf9ac177889a39ac79bdcc3a0fdf220b3b75fac18d39b5 + checksum: 10/895f2290adf457cbf327428bdb4fb90882a38a22f729bcf0629e8ad66b9b616d2721fbef488ac00411b647489d1dda1d20171bb3772d0796bb7ef5ecf057808a languageName: node linkType: hard -"@babel/plugin-transform-member-expression-literals@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-member-expression-literals@npm:7.23.3" +"@babel/plugin-transform-member-expression-literals@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-member-expression-literals@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/95cec13c36d447c5aa6b8e4c778b897eeba66dcb675edef01e0d2afcec9e8cb9726baf4f81b4bbae7a782595aed72e6a0d44ffb773272c3ca180fada99bf92db + checksum: 10/4ea641cc14a615f9084e45ad2319f95e2fee01c77ec9789685e7e11a6c286238a426a98f9c1ed91568a047d8ac834393e06e8c82d1ff01764b7aa61bee8e9023 languageName: node linkType: hard -"@babel/plugin-transform-modules-amd@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-modules-amd@npm:7.23.3" +"@babel/plugin-transform-modules-amd@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-modules-amd@npm:7.24.1" dependencies: "@babel/helper-module-transforms": "npm:^7.23.3" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/48c87dee2c7dae8ed40d16901f32c9e58be4ef87bf2c3985b51dd2e78e82081f3bad0a39ee5cf6e8909e13e954e2b4bedef0a8141922f281ed833ddb59ed9be2 + checksum: 10/5a324f7c630cf0be1f09098a3a36248c2521622f2c7ea1a44a5980f54b718f5e0dd4af92a337f4b445a8824c8d533853ebea7c16de829b8a7bc8bcca127d4d73 languageName: node linkType: hard @@ -942,29 +1120,42 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-modules-systemjs@npm:^7.23.9": - version: 7.23.9 - resolution: "@babel/plugin-transform-modules-systemjs@npm:7.23.9" +"@babel/plugin-transform-modules-commonjs@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-modules-commonjs@npm:7.24.1" + dependencies: + "@babel/helper-module-transforms": "npm:^7.23.3" + "@babel/helper-plugin-utils": "npm:^7.24.0" + "@babel/helper-simple-access": "npm:^7.22.5" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10/7326a62ed5f766f93ee75684868635b59884e2801533207ea11561c296de53037949fecad4055d828fa7ebeb6cc9e55908aa3e7c13f930ded3e62ad9f24680d7 + languageName: node + linkType: hard + +"@babel/plugin-transform-modules-systemjs@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-modules-systemjs@npm:7.24.1" dependencies: "@babel/helper-hoist-variables": "npm:^7.22.5" "@babel/helper-module-transforms": "npm:^7.23.3" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/helper-validator-identifier": "npm:^7.22.20" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/4bb800e5a9d0d668d7421ae3672fccff7d5f2a36621fd87414d7ece6d6f4d93627f9644cfecacae934bc65ffc131c8374242aaa400cca874dcab9b281a21aff0 + checksum: 10/565ec4518037b3d957431e29bda97b3d2fbb2e245fb5ba19889310ccb8fb71353e8ce2c325cc8d3fbc5a376d3af7d7e21782d5f502c46f8da077bee7807a590f languageName: node linkType: hard -"@babel/plugin-transform-modules-umd@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-modules-umd@npm:7.23.3" +"@babel/plugin-transform-modules-umd@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-modules-umd@npm:7.24.1" dependencies: "@babel/helper-module-transforms": "npm:^7.23.3" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/e3f3af83562d687899555c7826b3faf0ab93ee7976898995b1d20cbe7f4451c55e05b0e17bfb3e549937cbe7573daf5400b752912a241b0a8a64d2457c7626e5 + checksum: 10/323bb9367e1967117a829f67788ec2ff55504b4faf8f6d83ec85d398e50b41cf7d1c375c67d63883dd7ad5e75b35c8ae776d89e422330ec0c0a1fda24e362083 languageName: node linkType: hard @@ -980,18 +1171,18 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-new-target@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-new-target@npm:7.23.3" +"@babel/plugin-transform-new-target@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-new-target@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/e5053389316fce73ad5201b7777437164f333e24787fbcda4ae489cd2580dbbbdfb5694a7237bad91fabb46b591d771975d69beb1c740b82cb4761625379f00b + checksum: 10/e0d3af66cd0fad29c9d0e3fc65e711255e18b77e2e35bbd8f10059e3db7de6c16799ef74e704daf784950feb71e7a93c5bf2c771d98f1ca3fba1ff2e0240b24a languageName: node linkType: hard -"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.22.11, @babel/plugin-transform-nullish-coalescing-operator@npm:^7.23.4": +"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.22.11": version: 7.23.4 resolution: "@babel/plugin-transform-nullish-coalescing-operator@npm:7.23.4" dependencies: @@ -1003,58 +1194,69 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-numeric-separator@npm:^7.22.11, @babel/plugin-transform-numeric-separator@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-numeric-separator@npm:7.23.4" +"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-nullish-coalescing-operator@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" + "@babel/plugin-syntax-nullish-coalescing-operator": "npm:^7.8.3" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10/74025e191ceb7cefc619c15d33753aab81300a03d81b96ae249d9b599bc65878f962d608f452462d3aad5d6e334b7ab2b09a6bdcfe8d101fe77ac7aacca4261e + languageName: node + linkType: hard + +"@babel/plugin-transform-numeric-separator@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-numeric-separator@npm:7.24.1" + dependencies: + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/plugin-syntax-numeric-separator": "npm:^7.10.4" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/6ba0e5db3c620a3ec81f9e94507c821f483c15f196868df13fa454cbac719a5449baf73840f5b6eb7d77311b24a2cf8e45db53700d41727f693d46f7caf3eec3 + checksum: 10/3247bd7d409574fc06c59e0eb573ae7470d6d61ecf780df40b550102bb4406747d8f39dcbec57eb59406df6c565a86edd3b429e396ad02e4ce201ad92050832e languageName: node linkType: hard -"@babel/plugin-transform-object-rest-spread@npm:^7.22.15, @babel/plugin-transform-object-rest-spread@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-object-rest-spread@npm:7.23.4" +"@babel/plugin-transform-object-rest-spread@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-object-rest-spread@npm:7.24.1" dependencies: - "@babel/compat-data": "npm:^7.23.3" - "@babel/helper-compilation-targets": "npm:^7.22.15" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-compilation-targets": "npm:^7.23.6" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/plugin-syntax-object-rest-spread": "npm:^7.8.3" - "@babel/plugin-transform-parameters": "npm:^7.23.3" + "@babel/plugin-transform-parameters": "npm:^7.24.1" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/656f09c4ec629856e807d5b386559166ae417ff75943abce19656b2c6de5101dfd0aaf23f9074e854339370b4e09f57518d3202457046ee5b567ded531005479 + checksum: 10/ff6eeefbc5497cf33d62dc86b797c6db0e9455d6a4945d6952f3b703d04baab048974c6573b503e0ec097b8112d3b98b5f4ee516e1b8a74ed47aebba4d9d2643 languageName: node linkType: hard -"@babel/plugin-transform-object-super@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-object-super@npm:7.23.3" +"@babel/plugin-transform-object-super@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-object-super@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" - "@babel/helper-replace-supers": "npm:^7.22.20" + "@babel/helper-plugin-utils": "npm:^7.24.0" + "@babel/helper-replace-supers": "npm:^7.24.1" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/e495497186f621fa79026e183b4f1fbb172fd9df812cbd2d7f02c05b08adbe58012b1a6eb6dd58d11a30343f6ec80d0f4074f9b501d70aa1c94df76d59164c53 + checksum: 10/d34d437456a54e2a5dcb26e9cf09ed4c55528f2a327c5edca92c93e9483c37176e228d00d6e0cf767f3d6fdbef45ae3a5d034a7c59337a009e20ae541c8220fa languageName: node linkType: hard -"@babel/plugin-transform-optional-catch-binding@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-optional-catch-binding@npm:7.23.4" +"@babel/plugin-transform-optional-catch-binding@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-optional-catch-binding@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/plugin-syntax-optional-catch-binding": "npm:^7.8.3" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/d50b5ee142cdb088d8b5de1ccf7cea85b18b85d85b52f86618f6e45226372f01ad4cdb29abd4fd35ea99a71fefb37009e0107db7a787dcc21d4d402f97470faf + checksum: 10/ff7c02449d32a6de41e003abb38537b4a1ad90b1eaa4c0b578cb1b55548201a677588a8c47f3e161c72738400ae811a6673ea7b8a734344755016ca0ac445dac languageName: node linkType: hard -"@babel/plugin-transform-optional-chaining@npm:^7.23.0, @babel/plugin-transform-optional-chaining@npm:^7.23.3, @babel/plugin-transform-optional-chaining@npm:^7.23.4": +"@babel/plugin-transform-optional-chaining@npm:^7.23.0": version: 7.23.4 resolution: "@babel/plugin-transform-optional-chaining@npm:7.23.4" dependencies: @@ -1067,18 +1269,31 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-parameters@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-parameters@npm:7.23.3" +"@babel/plugin-transform-optional-chaining@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-optional-chaining@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" + "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5" + "@babel/plugin-syntax-optional-chaining": "npm:^7.8.3" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/a8c36c3fc25f9daa46c4f6db47ea809c395dc4abc7f01c4b1391f6e5b0cd62b83b6016728b02a6a8ac21aca56207c9ec66daefc0336e9340976978de7e6e28df + checksum: 10/d41031b8e472b9b30aacd905a1561904bcec597dd888ad639b234971714dc9cd0dcb60df91a89219fc72e4feeb148e20f97bcddc39d7676e743ff0c23f62a7eb languageName: node linkType: hard -"@babel/plugin-transform-private-methods@npm:^7.22.5, @babel/plugin-transform-private-methods@npm:^7.23.3": +"@babel/plugin-transform-parameters@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-parameters@npm:7.24.1" + dependencies: + "@babel/helper-plugin-utils": "npm:^7.24.0" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10/c289c188710cd1c60991db169d8173b6e8e05624ae61a7da0b64354100bfba9e44bc1332dd9223c4e3fe1b9cbc0c061e76e7c7b3a75c9588bf35d0ffec428070 + languageName: node + linkType: hard + +"@babel/plugin-transform-private-methods@npm:^7.22.5": version: 7.23.3 resolution: "@babel/plugin-transform-private-methods@npm:7.23.3" dependencies: @@ -1090,39 +1305,51 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-private-property-in-object@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-private-property-in-object@npm:7.23.4" +"@babel/plugin-transform-private-methods@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-private-methods@npm:7.24.1" + dependencies: + "@babel/helper-create-class-features-plugin": "npm:^7.24.1" + "@babel/helper-plugin-utils": "npm:^7.24.0" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10/7208c30bb3f3fbc73fb3a88bdcb78cd5cddaf6d523eb9d67c0c04e78f6fc6319ece89f4a5abc41777ceab16df55b3a13a4120e0efc9275ca6d2d89beaba80aa0 + languageName: node + linkType: hard + +"@babel/plugin-transform-private-property-in-object@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-private-property-in-object@npm:7.24.1" dependencies: "@babel/helper-annotate-as-pure": "npm:^7.22.5" - "@babel/helper-create-class-features-plugin": "npm:^7.22.15" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-create-class-features-plugin": "npm:^7.24.1" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/plugin-syntax-private-property-in-object": "npm:^7.14.5" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/02eef2ee98fa86ee5052ed9bf0742d6d22b510b5df2fcce0b0f5615d6001f7786c6b31505e7f1c2f446406d8fb33603a5316d957cfa5b8365cbf78ddcc24fa42 + checksum: 10/466d1943960c2475c0361eba2ea72d504d4d8329a8e293af0eedd26887bf30a074515b330ea84be77331ace77efbf5533d5f04f8cff63428d2615f4a509ae7a4 languageName: node linkType: hard -"@babel/plugin-transform-property-literals@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-property-literals@npm:7.23.3" +"@babel/plugin-transform-property-literals@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-property-literals@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/16b048c8e87f25095f6d53634ab7912992f78e6997a6ff549edc3cf519db4fca01c7b4e0798530d7f6a05228ceee479251245cdd850a5531c6e6f404104d6cc9 + checksum: 10/a73646d7ecd95b3931a3ead82c7d5efeb46e68ba362de63eb437d33531f294ec18bd31b6d24238cd3b6a3b919a6310c4a0ba4a2629927721d4d10b0518eb7715 languageName: node linkType: hard -"@babel/plugin-transform-react-display-name@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-react-display-name@npm:7.23.3" +"@babel/plugin-transform-react-display-name@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-react-display-name@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/7f86964e8434d3ddbd3c81d2690c9b66dbf1cd8bd9512e2e24500e9fa8cf378bc52c0853270b3b82143aba5965aec04721df7abdb768f952b44f5c6e0b198779 + checksum: 10/4cc7268652bd73a9e249db006d7278e3e90c033684e59801012311536f1ff93eb63fea845325035533aa281e428e6ec2ae0ad04659893ec1318250ddcf4a2f77 languageName: node linkType: hard @@ -1137,7 +1364,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-react-jsx@npm:^7.22.15, @babel/plugin-transform-react-jsx@npm:^7.22.5": +"@babel/plugin-transform-react-jsx@npm:^7.22.5, @babel/plugin-transform-react-jsx@npm:^7.23.4": version: 7.23.4 resolution: "@babel/plugin-transform-react-jsx@npm:7.23.4" dependencies: @@ -1152,110 +1379,110 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-react-pure-annotations@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-react-pure-annotations@npm:7.23.3" +"@babel/plugin-transform-react-pure-annotations@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-react-pure-annotations@npm:7.24.1" dependencies: "@babel/helper-annotate-as-pure": "npm:^7.22.5" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/9ea3698b1d422561d93c0187ac1ed8f2367e4250b10e259785ead5aa643c265830fd0f4cf5087a5bedbc4007444c06da2f2006686613220acf0949895f453666 + checksum: 10/06a6bfe80f1f36408d07dd80c48cf9f61177c8e5d814e80ddbe88cfad81a8b86b3110e1fe9d1ac943db77e74497daa7f874b5490c788707106ad26ecfbe44813 languageName: node linkType: hard -"@babel/plugin-transform-regenerator@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-regenerator@npm:7.23.3" +"@babel/plugin-transform-regenerator@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-regenerator@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" regenerator-transform: "npm:^0.15.2" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/7fdacc7b40008883871b519c9e5cdea493f75495118ccc56ac104b874983569a24edd024f0f5894ba1875c54ee2b442f295d6241c3280e61c725d0dd3317c8e6 + checksum: 10/a04319388a0a7931c3f8e15715d01444c32519692178b70deccc86d53304e74c0f589a4268f6c68578d86f75e934dd1fe6e6ed9071f54ee8379f356f88ef6e42 languageName: node linkType: hard -"@babel/plugin-transform-reserved-words@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-reserved-words@npm:7.23.3" +"@babel/plugin-transform-reserved-words@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-reserved-words@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/298c4440ddc136784ff920127cea137168e068404e635dc946ddb5d7b2a27b66f1dd4c4acb01f7184478ff7d5c3e7177a127279479926519042948fb7fa0fa48 + checksum: 10/132c6040c65aabae2d98a39289efb5c51a8632546dc50d2ad032c8660aec307fbed74ef499856ea4f881fc8505905f49b48e0270585da2ea3d50b75e962afd89 languageName: node linkType: hard -"@babel/plugin-transform-runtime@npm:^7.23.2": - version: 7.23.9 - resolution: "@babel/plugin-transform-runtime@npm:7.23.9" +"@babel/plugin-transform-runtime@npm:^7.24.3": + version: 7.24.3 + resolution: "@babel/plugin-transform-runtime@npm:7.24.3" dependencies: - "@babel/helper-module-imports": "npm:^7.22.15" - "@babel/helper-plugin-utils": "npm:^7.22.5" - babel-plugin-polyfill-corejs2: "npm:^0.4.8" - babel-plugin-polyfill-corejs3: "npm:^0.9.0" - babel-plugin-polyfill-regenerator: "npm:^0.5.5" + "@babel/helper-module-imports": "npm:^7.24.3" + "@babel/helper-plugin-utils": "npm:^7.24.0" + babel-plugin-polyfill-corejs2: "npm:^0.4.10" + babel-plugin-polyfill-corejs3: "npm:^0.10.1" + babel-plugin-polyfill-regenerator: "npm:^0.6.1" semver: "npm:^6.3.1" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/d942e5852f100d0de5021c4d1fda9e30c28b94aa846e09588476dd82c058fb6869a30be0cf915362bf23b5f3504aa150ca3c3b0299dbd0a86b3b1f5f744c2333 + checksum: 10/7f545c628993b527ae1cb028106168ec29873160a5d98aed947509b61e826fa52b6e2bd2c56504b4a5084555becc9841fa7842e61f822a050dd6ff5baff726ce languageName: node linkType: hard -"@babel/plugin-transform-shorthand-properties@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-shorthand-properties@npm:7.23.3" +"@babel/plugin-transform-shorthand-properties@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-shorthand-properties@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/5d677a03676f9fff969b0246c423d64d77502e90a832665dc872a5a5e05e5708161ce1effd56bb3c0f2c20a1112fca874be57c8a759d8b08152755519281f326 + checksum: 10/006a2032d1c57dca76579ce6598c679c2f20525afef0a36e9d42affe3c8cf33c1427581ad696b519cc75dfee46c5e8ecdf0c6a29ffb14250caa3e16dd68cb424 languageName: node linkType: hard -"@babel/plugin-transform-spread@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-spread@npm:7.23.3" +"@babel/plugin-transform-spread@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-spread@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/c6372d2f788fd71d85aba12fbe08ee509e053ed27457e6674a4f9cae41ff885e2eb88aafea8fadd0ccf990601fc69ec596fa00959e05af68a15461a8d97a548d + checksum: 10/0b60cfe2f700ec2c9c1af979bb805860258539648dadcd482a5ddfc2330b733fb61bb60266404f3e068246ad0d6376040b4f9c5ab9037a3d777624d64acd89e9 languageName: node linkType: hard -"@babel/plugin-transform-sticky-regex@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-sticky-regex@npm:7.23.3" +"@babel/plugin-transform-sticky-regex@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-sticky-regex@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/53e55eb2575b7abfdb4af7e503a2bf7ef5faf8bf6b92d2cd2de0700bdd19e934e5517b23e6dfed94ba50ae516b62f3f916773ef7d9bc81f01503f585051e2949 + checksum: 10/e326e96a9eeb6bb01dbc4d3362f989411490671b97f62edf378b8fb102c463a018b777f28da65344d41b22aa6efcdfa01ed43d2b11fdcf202046d3174be137c5 languageName: node linkType: hard -"@babel/plugin-transform-template-literals@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-template-literals@npm:7.23.3" +"@babel/plugin-transform-template-literals@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-template-literals@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/b16c5cb0b8796be0118e9c144d15bdc0d20a7f3f59009c6303a6e9a8b74c146eceb3f05186f5b97afcba7cfa87e34c1585a22186e3d5b22f2fd3d27d959d92b2 + checksum: 10/4c9009c72321caf20e3b6328bbe9d7057006c5ae57b794cf247a37ca34d87dfec5e27284169a16df5a6235a083bf0f3ab9e1bfcb005d1c8b75b04aed75652621 languageName: node linkType: hard -"@babel/plugin-transform-typeof-symbol@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-typeof-symbol@npm:7.23.3" +"@babel/plugin-transform-typeof-symbol@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-typeof-symbol@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/0af7184379d43afac7614fc89b1bdecce4e174d52f4efaeee8ec1a4f2c764356c6dba3525c0685231f1cbf435b6dd4ee9e738d7417f3b10ce8bbe869c32f4384 + checksum: 10/3dda5074abf8b5df9cdef697d6ebe14a72c199bd6c2019991d033d9ad91b0be937b126b8f34c3c5a9725afee9016a3776aeef3e3b06ab9b3f54f2dd5b5aefa37 languageName: node linkType: hard @@ -1273,72 +1500,87 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-unicode-escapes@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-unicode-escapes@npm:7.23.3" +"@babel/plugin-transform-typescript@npm:^7.24.1": + version: 7.24.4 + resolution: "@babel/plugin-transform-typescript@npm:7.24.4" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-annotate-as-pure": "npm:^7.22.5" + "@babel/helper-create-class-features-plugin": "npm:^7.24.4" + "@babel/helper-plugin-utils": "npm:^7.24.0" + "@babel/plugin-syntax-typescript": "npm:^7.24.1" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/561c429183a54b9e4751519a3dfba6014431e9cdc1484fad03bdaf96582dfc72c76a4f8661df2aeeae7c34efd0fa4d02d3b83a2f63763ecf71ecc925f9cc1f60 + checksum: 10/e8d66fbafd6cbfeca2ebe77c4fc67537be9e01813f835ce097fa91329b0cd7ba587a9cf4c4a1df661cdde438741cb3c63d2ab95c97354eb89d7682a4d99bea5d languageName: node linkType: hard -"@babel/plugin-transform-unicode-property-regex@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-unicode-property-regex@npm:7.23.3" +"@babel/plugin-transform-unicode-escapes@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-unicode-escapes@npm:7.24.1" + dependencies: + "@babel/helper-plugin-utils": "npm:^7.24.0" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10/d39041ff6b0cef78271ebe88be6dfd2882a3c6250a54ddae783f1b9adc815e8486a7d0ca054fabfa3fde1301c531d5be89224999fc7be83ff1eda9b77d173051 + languageName: node + linkType: hard + +"@babel/plugin-transform-unicode-property-regex@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-unicode-property-regex@npm:7.24.1" dependencies: "@babel/helper-create-regexp-features-plugin": "npm:^7.22.15" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/2298461a194758086d17c23c26c7de37aa533af910f9ebf31ebd0893d4aa317468043d23f73edc782ec21151d3c46cf0ff8098a83b725c49a59de28a1d4d6225 + checksum: 10/276099b4483e707f80b054e2d29bc519158bfe52461ef5ff76f70727d592df17e30b1597ef4d8a0f04d810f6cb5a8dd887bdc1d0540af3744751710ef280090f languageName: node linkType: hard -"@babel/plugin-transform-unicode-regex@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-unicode-regex@npm:7.23.3" +"@babel/plugin-transform-unicode-regex@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-unicode-regex@npm:7.24.1" dependencies: "@babel/helper-create-regexp-features-plugin": "npm:^7.22.15" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/c5f835d17483ba899787f92e313dfa5b0055e3deab332f1d254078a2bba27ede47574b6599fcf34d3763f0c048ae0779dc21d2d8db09295edb4057478dc80a9a + checksum: 10/400a0927bdb1425b4c0dc68a61b5b2d7d17c7d9f0e07317a1a6a373c080ef94be1dd65fdc4ac9a78fcdb58f89fd128450c7bc0d5b8ca0ae7eca3fbd98e50acba languageName: node linkType: hard -"@babel/plugin-transform-unicode-sets-regex@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-unicode-sets-regex@npm:7.23.3" +"@babel/plugin-transform-unicode-sets-regex@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-unicode-sets-regex@npm:7.24.1" dependencies: "@babel/helper-create-regexp-features-plugin": "npm:^7.22.15" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0 - checksum: 10/79d0b4c951955ca68235c87b91ab2b393c96285f8aeaa34d6db416d2ddac90000c9bd6e8c4d82b60a2b484da69930507245035f28ba63c6cae341cf3ba68fdef + checksum: 10/364342fb8e382dfaa23628b88e6484dc1097e53fb7199f4d338f1e2cd71d839bb0a35a9b1380074f6a10adb2e98b79d53ca3ec78c0b8c557ca895ffff42180df languageName: node linkType: hard -"@babel/preset-env@npm:^7.23.2": - version: 7.23.9 - resolution: "@babel/preset-env@npm:7.23.9" +"@babel/preset-env@npm:^7.24.4": + version: 7.24.4 + resolution: "@babel/preset-env@npm:7.24.4" dependencies: - "@babel/compat-data": "npm:^7.23.5" + "@babel/compat-data": "npm:^7.24.4" "@babel/helper-compilation-targets": "npm:^7.23.6" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/helper-validator-option": "npm:^7.23.5" - "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "npm:^7.23.3" - "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "npm:^7.23.3" - "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "npm:^7.23.7" + "@babel/plugin-bugfix-firefox-class-in-computed-class-key": "npm:^7.24.4" + "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "npm:^7.24.1" + "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "npm:^7.24.1" + "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "npm:^7.24.1" "@babel/plugin-proposal-private-property-in-object": "npm:7.21.0-placeholder-for-preset-env.2" "@babel/plugin-syntax-async-generators": "npm:^7.8.4" "@babel/plugin-syntax-class-properties": "npm:^7.12.13" "@babel/plugin-syntax-class-static-block": "npm:^7.14.5" "@babel/plugin-syntax-dynamic-import": "npm:^7.8.3" "@babel/plugin-syntax-export-namespace-from": "npm:^7.8.3" - "@babel/plugin-syntax-import-assertions": "npm:^7.23.3" - "@babel/plugin-syntax-import-attributes": "npm:^7.23.3" + "@babel/plugin-syntax-import-assertions": "npm:^7.24.1" + "@babel/plugin-syntax-import-attributes": "npm:^7.24.1" "@babel/plugin-syntax-import-meta": "npm:^7.10.4" "@babel/plugin-syntax-json-strings": "npm:^7.8.3" "@babel/plugin-syntax-logical-assignment-operators": "npm:^7.10.4" @@ -1350,63 +1592,63 @@ __metadata: "@babel/plugin-syntax-private-property-in-object": "npm:^7.14.5" "@babel/plugin-syntax-top-level-await": "npm:^7.14.5" "@babel/plugin-syntax-unicode-sets-regex": "npm:^7.18.6" - "@babel/plugin-transform-arrow-functions": "npm:^7.23.3" - "@babel/plugin-transform-async-generator-functions": "npm:^7.23.9" - "@babel/plugin-transform-async-to-generator": "npm:^7.23.3" - "@babel/plugin-transform-block-scoped-functions": "npm:^7.23.3" - "@babel/plugin-transform-block-scoping": "npm:^7.23.4" - "@babel/plugin-transform-class-properties": "npm:^7.23.3" - "@babel/plugin-transform-class-static-block": "npm:^7.23.4" - "@babel/plugin-transform-classes": "npm:^7.23.8" - "@babel/plugin-transform-computed-properties": "npm:^7.23.3" - "@babel/plugin-transform-destructuring": "npm:^7.23.3" - "@babel/plugin-transform-dotall-regex": "npm:^7.23.3" - "@babel/plugin-transform-duplicate-keys": "npm:^7.23.3" - "@babel/plugin-transform-dynamic-import": "npm:^7.23.4" - "@babel/plugin-transform-exponentiation-operator": "npm:^7.23.3" - "@babel/plugin-transform-export-namespace-from": "npm:^7.23.4" - "@babel/plugin-transform-for-of": "npm:^7.23.6" - "@babel/plugin-transform-function-name": "npm:^7.23.3" - "@babel/plugin-transform-json-strings": "npm:^7.23.4" - "@babel/plugin-transform-literals": "npm:^7.23.3" - "@babel/plugin-transform-logical-assignment-operators": "npm:^7.23.4" - "@babel/plugin-transform-member-expression-literals": "npm:^7.23.3" - "@babel/plugin-transform-modules-amd": "npm:^7.23.3" - "@babel/plugin-transform-modules-commonjs": "npm:^7.23.3" - "@babel/plugin-transform-modules-systemjs": "npm:^7.23.9" - "@babel/plugin-transform-modules-umd": "npm:^7.23.3" + "@babel/plugin-transform-arrow-functions": "npm:^7.24.1" + "@babel/plugin-transform-async-generator-functions": "npm:^7.24.3" + "@babel/plugin-transform-async-to-generator": "npm:^7.24.1" + "@babel/plugin-transform-block-scoped-functions": "npm:^7.24.1" + "@babel/plugin-transform-block-scoping": "npm:^7.24.4" + "@babel/plugin-transform-class-properties": "npm:^7.24.1" + "@babel/plugin-transform-class-static-block": "npm:^7.24.4" + "@babel/plugin-transform-classes": "npm:^7.24.1" + "@babel/plugin-transform-computed-properties": "npm:^7.24.1" + "@babel/plugin-transform-destructuring": "npm:^7.24.1" + "@babel/plugin-transform-dotall-regex": "npm:^7.24.1" + "@babel/plugin-transform-duplicate-keys": "npm:^7.24.1" + "@babel/plugin-transform-dynamic-import": "npm:^7.24.1" + "@babel/plugin-transform-exponentiation-operator": "npm:^7.24.1" + "@babel/plugin-transform-export-namespace-from": "npm:^7.24.1" + "@babel/plugin-transform-for-of": "npm:^7.24.1" + "@babel/plugin-transform-function-name": "npm:^7.24.1" + "@babel/plugin-transform-json-strings": "npm:^7.24.1" + "@babel/plugin-transform-literals": "npm:^7.24.1" + "@babel/plugin-transform-logical-assignment-operators": "npm:^7.24.1" + "@babel/plugin-transform-member-expression-literals": "npm:^7.24.1" + "@babel/plugin-transform-modules-amd": "npm:^7.24.1" + "@babel/plugin-transform-modules-commonjs": "npm:^7.24.1" + "@babel/plugin-transform-modules-systemjs": "npm:^7.24.1" + "@babel/plugin-transform-modules-umd": "npm:^7.24.1" "@babel/plugin-transform-named-capturing-groups-regex": "npm:^7.22.5" - "@babel/plugin-transform-new-target": "npm:^7.23.3" - "@babel/plugin-transform-nullish-coalescing-operator": "npm:^7.23.4" - "@babel/plugin-transform-numeric-separator": "npm:^7.23.4" - "@babel/plugin-transform-object-rest-spread": "npm:^7.23.4" - "@babel/plugin-transform-object-super": "npm:^7.23.3" - "@babel/plugin-transform-optional-catch-binding": "npm:^7.23.4" - "@babel/plugin-transform-optional-chaining": "npm:^7.23.4" - "@babel/plugin-transform-parameters": "npm:^7.23.3" - "@babel/plugin-transform-private-methods": "npm:^7.23.3" - "@babel/plugin-transform-private-property-in-object": "npm:^7.23.4" - "@babel/plugin-transform-property-literals": "npm:^7.23.3" - "@babel/plugin-transform-regenerator": "npm:^7.23.3" - "@babel/plugin-transform-reserved-words": "npm:^7.23.3" - "@babel/plugin-transform-shorthand-properties": "npm:^7.23.3" - "@babel/plugin-transform-spread": "npm:^7.23.3" - "@babel/plugin-transform-sticky-regex": "npm:^7.23.3" - "@babel/plugin-transform-template-literals": "npm:^7.23.3" - "@babel/plugin-transform-typeof-symbol": "npm:^7.23.3" - "@babel/plugin-transform-unicode-escapes": "npm:^7.23.3" - "@babel/plugin-transform-unicode-property-regex": "npm:^7.23.3" - "@babel/plugin-transform-unicode-regex": "npm:^7.23.3" - "@babel/plugin-transform-unicode-sets-regex": "npm:^7.23.3" + "@babel/plugin-transform-new-target": "npm:^7.24.1" + "@babel/plugin-transform-nullish-coalescing-operator": "npm:^7.24.1" + "@babel/plugin-transform-numeric-separator": "npm:^7.24.1" + "@babel/plugin-transform-object-rest-spread": "npm:^7.24.1" + "@babel/plugin-transform-object-super": "npm:^7.24.1" + "@babel/plugin-transform-optional-catch-binding": "npm:^7.24.1" + "@babel/plugin-transform-optional-chaining": "npm:^7.24.1" + "@babel/plugin-transform-parameters": "npm:^7.24.1" + "@babel/plugin-transform-private-methods": "npm:^7.24.1" + "@babel/plugin-transform-private-property-in-object": "npm:^7.24.1" + "@babel/plugin-transform-property-literals": "npm:^7.24.1" + "@babel/plugin-transform-regenerator": "npm:^7.24.1" + "@babel/plugin-transform-reserved-words": "npm:^7.24.1" + "@babel/plugin-transform-shorthand-properties": "npm:^7.24.1" + "@babel/plugin-transform-spread": "npm:^7.24.1" + "@babel/plugin-transform-sticky-regex": "npm:^7.24.1" + "@babel/plugin-transform-template-literals": "npm:^7.24.1" + "@babel/plugin-transform-typeof-symbol": "npm:^7.24.1" + "@babel/plugin-transform-unicode-escapes": "npm:^7.24.1" + "@babel/plugin-transform-unicode-property-regex": "npm:^7.24.1" + "@babel/plugin-transform-unicode-regex": "npm:^7.24.1" + "@babel/plugin-transform-unicode-sets-regex": "npm:^7.24.1" "@babel/preset-modules": "npm:0.1.6-no-external-plugins" - babel-plugin-polyfill-corejs2: "npm:^0.4.8" - babel-plugin-polyfill-corejs3: "npm:^0.9.0" - babel-plugin-polyfill-regenerator: "npm:^0.5.5" + babel-plugin-polyfill-corejs2: "npm:^0.4.10" + babel-plugin-polyfill-corejs3: "npm:^0.10.4" + babel-plugin-polyfill-regenerator: "npm:^0.6.1" core-js-compat: "npm:^3.31.0" semver: "npm:^6.3.1" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/0214ac9434a2496eac7f56c0c91164421232ff2083a66e1ccab633ca91e262828e54a5cbdb9036e8fe53d53530b6597aa98c99de8ff07b5193ffd95f21dc9d2c + checksum: 10/3d5cbdc2501bc1959fc76ed9d409d0ee5264bc475fa809958fd2e8e7db9b12f8eccdae750a0e05d25207373c42ca115b42bb3d5c743bc770cb12b6af05bf3bd8 languageName: node linkType: hard @@ -1436,23 +1678,23 @@ __metadata: languageName: node linkType: hard -"@babel/preset-react@npm:^7.22.15": - version: 7.23.3 - resolution: "@babel/preset-react@npm:7.23.3" +"@babel/preset-react@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/preset-react@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" - "@babel/helper-validator-option": "npm:^7.22.15" - "@babel/plugin-transform-react-display-name": "npm:^7.23.3" - "@babel/plugin-transform-react-jsx": "npm:^7.22.15" + "@babel/helper-plugin-utils": "npm:^7.24.0" + "@babel/helper-validator-option": "npm:^7.23.5" + "@babel/plugin-transform-react-display-name": "npm:^7.24.1" + "@babel/plugin-transform-react-jsx": "npm:^7.23.4" "@babel/plugin-transform-react-jsx-development": "npm:^7.22.5" - "@babel/plugin-transform-react-pure-annotations": "npm:^7.23.3" + "@babel/plugin-transform-react-pure-annotations": "npm:^7.24.1" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/ef6aef131b2f36e2883e9da0d832903643cb3c9ad4f32e04fb3eecae59e4221d583139e8d8f973e25c28d15aafa6b3e60fe9f25c5fd09abd3e2df03b8637bdd2 + checksum: 10/a796c609ace7d58a56b42b6630cdd9e1d896ce2f8b35331b9ea040eaaf3cc9aa99cd2614e379a27c10410f34e89355e2739c7097e8065ce5e40900a77b13d716 languageName: node linkType: hard -"@babel/preset-typescript@npm:^7.23.0, @babel/preset-typescript@npm:^7.23.2": +"@babel/preset-typescript@npm:^7.23.0": version: 7.23.3 resolution: "@babel/preset-typescript@npm:7.23.3" dependencies: @@ -1467,6 +1709,21 @@ __metadata: languageName: node linkType: hard +"@babel/preset-typescript@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/preset-typescript@npm:7.24.1" + dependencies: + "@babel/helper-plugin-utils": "npm:^7.24.0" + "@babel/helper-validator-option": "npm:^7.23.5" + "@babel/plugin-syntax-jsx": "npm:^7.24.1" + "@babel/plugin-transform-modules-commonjs": "npm:^7.24.1" + "@babel/plugin-transform-typescript": "npm:^7.24.1" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10/ba774bd427c9f376769ddbc2723f5801a6b30113a7c3aaa14c36215508e347a527fdae98cfc294f0ecb283d800ee0c1f74e66e38e84c9bc9ed2fe6ed50dcfaf8 + languageName: node + linkType: hard + "@babel/register@npm:^7.22.15": version: 7.23.7 resolution: "@babel/register@npm:7.23.7" @@ -1489,7 +1746,7 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2": +"@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2": version: 7.23.9 resolution: "@babel/runtime@npm:7.23.9" dependencies: @@ -1498,6 +1755,15 @@ __metadata: languageName: node linkType: hard +"@babel/runtime@npm:^7.24.4": + version: 7.24.4 + resolution: "@babel/runtime@npm:7.24.4" + dependencies: + regenerator-runtime: "npm:^0.14.0" + checksum: 10/8ec8ce2c145bc7e31dd39ab66df124f357f65c11489aefacb30f431bae913b9aaa66aa5efe5321ea2bf8878af3fcee338c87e7599519a952e3a6f83aa1b03308 + languageName: node + linkType: hard + "@babel/template@npm:^7.22.15, @babel/template@npm:^7.23.9, @babel/template@npm:^7.3.3": version: 7.23.9 resolution: "@babel/template@npm:7.23.9" @@ -1509,7 +1775,18 @@ __metadata: languageName: node linkType: hard -"@babel/traverse@npm:^7.18.9, @babel/traverse@npm:^7.23.2, @babel/traverse@npm:^7.23.9": +"@babel/template@npm:^7.24.0": + version: 7.24.0 + resolution: "@babel/template@npm:7.24.0" + dependencies: + "@babel/code-frame": "npm:^7.23.5" + "@babel/parser": "npm:^7.24.0" + "@babel/types": "npm:^7.24.0" + checksum: 10/8c538338c7de8fac8ada691a5a812bdcbd60bd4a4eb5adae2cc9ee19773e8fb1a724312a00af9e1ce49056ffd3c3475e7287b5668cf6360bfb3f8ac827a06ffe + languageName: node + linkType: hard + +"@babel/traverse@npm:^7.18.9, @babel/traverse@npm:^7.23.9": version: 7.23.9 resolution: "@babel/traverse@npm:7.23.9" dependencies: @@ -1527,6 +1804,24 @@ __metadata: languageName: node linkType: hard +"@babel/traverse@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/traverse@npm:7.24.1" + dependencies: + "@babel/code-frame": "npm:^7.24.1" + "@babel/generator": "npm:^7.24.1" + "@babel/helper-environment-visitor": "npm:^7.22.20" + "@babel/helper-function-name": "npm:^7.23.0" + "@babel/helper-hoist-variables": "npm:^7.22.5" + "@babel/helper-split-export-declaration": "npm:^7.22.6" + "@babel/parser": "npm:^7.24.1" + "@babel/types": "npm:^7.24.0" + debug: "npm:^4.3.1" + globals: "npm:^11.1.0" + checksum: 10/b9b0173c286ef549e179f3725df3c4958069ad79fe5b9840adeb99692eb4a5a08db4e735c0f086aab52e7e08ec711cee9e7c06cb908d8035641d1382172308d3 + languageName: node + linkType: hard + "@babel/types@npm:^7.0.0, @babel/types@npm:^7.18.9, @babel/types@npm:^7.20.7, @babel/types@npm:^7.22.15, @babel/types@npm:^7.22.19, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.23.4, @babel/types@npm:^7.23.6, @babel/types@npm:^7.23.9, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.8.3": version: 7.23.9 resolution: "@babel/types@npm:7.23.9" @@ -1538,6 +1833,17 @@ __metadata: languageName: node linkType: hard +"@babel/types@npm:^7.24.0": + version: 7.24.0 + resolution: "@babel/types@npm:7.24.0" + dependencies: + "@babel/helper-string-parser": "npm:^7.23.4" + "@babel/helper-validator-identifier": "npm:^7.22.20" + to-fast-properties: "npm:^2.0.0" + checksum: 10/a0b4875ce2e132f9daff0d5b27c7f4c4fcc97f2b084bdc5834e92c9d32592778489029e65d99d00c406da612d87b72d7a236c0afccaa1435c028d0c94c9b6da4 + languageName: node + linkType: hard + "@base2/pretty-print-object@npm:1.0.1": version: 1.0.1 resolution: "@base2/pretty-print-object@npm:1.0.1" @@ -2269,6 +2575,17 @@ __metadata: languageName: node linkType: hard +"@jridgewell/gen-mapping@npm:^0.3.5": + version: 0.3.5 + resolution: "@jridgewell/gen-mapping@npm:0.3.5" + dependencies: + "@jridgewell/set-array": "npm:^1.2.1" + "@jridgewell/sourcemap-codec": "npm:^1.4.10" + "@jridgewell/trace-mapping": "npm:^0.3.24" + checksum: 10/81587b3c4dd8e6c60252122937cea0c637486311f4ed208b52b62aae2e7a87598f63ec330e6cd0984af494bfb16d3f0d60d3b21d7e5b4aedd2602ff3fe9d32e2 + languageName: node + linkType: hard + "@jridgewell/resolve-uri@npm:^3.1.0": version: 3.1.2 resolution: "@jridgewell/resolve-uri@npm:3.1.2" @@ -2283,6 +2600,13 @@ __metadata: languageName: node linkType: hard +"@jridgewell/set-array@npm:^1.2.1": + version: 1.2.1 + resolution: "@jridgewell/set-array@npm:1.2.1" + checksum: 10/832e513a85a588f8ed4f27d1279420d8547743cc37fcad5a5a76fc74bb895b013dfe614d0eed9cb860048e6546b798f8f2652020b4b2ba0561b05caa8c654b10 + languageName: node + linkType: hard + "@jridgewell/source-map@npm:^0.3.3": version: 0.3.5 resolution: "@jridgewell/source-map@npm:0.3.5" @@ -2310,6 +2634,16 @@ __metadata: languageName: node linkType: hard +"@jridgewell/trace-mapping@npm:^0.3.24, @jridgewell/trace-mapping@npm:^0.3.25": + version: 0.3.25 + resolution: "@jridgewell/trace-mapping@npm:0.3.25" + dependencies: + "@jridgewell/resolve-uri": "npm:^3.1.0" + "@jridgewell/sourcemap-codec": "npm:^1.4.14" + checksum: 10/dced32160a44b49d531b80a4a2159dceab6b3ddf0c8e95a0deae4b0e894b172defa63d5ac52a19c2068e1fe7d31ea4ba931fbeec103233ecb4208953967120fc + languageName: node + linkType: hard + "@mdx-js/react@npm:^3.0.0": version: 3.0.1 resolution: "@mdx-js/react@npm:3.0.1" @@ -2396,136 +2730,393 @@ __metadata: languageName: node linkType: hard -"@next/swc-win32-x64-msvc@npm:14.2.2": - version: 14.2.2 - resolution: "@next/swc-win32-x64-msvc@npm:14.2.2" - conditions: os=win32 & cpu=x64 +"@next/swc-win32-x64-msvc@npm:14.2.2": + version: 14.2.2 + resolution: "@next/swc-win32-x64-msvc@npm:14.2.2" + conditions: os=win32 & cpu=x64 + languageName: node + linkType: hard + +"@nodelib/fs.scandir@npm:2.1.5": + version: 2.1.5 + resolution: "@nodelib/fs.scandir@npm:2.1.5" + dependencies: + "@nodelib/fs.stat": "npm:2.0.5" + run-parallel: "npm:^1.1.9" + checksum: 10/6ab2a9b8a1d67b067922c36f259e3b3dfd6b97b219c540877a4944549a4d49ea5ceba5663905ab5289682f1f3c15ff441d02f0447f620a42e1cb5e1937174d4b + languageName: node + linkType: hard + +"@nodelib/fs.stat@npm:2.0.5, @nodelib/fs.stat@npm:^2.0.2": + version: 2.0.5 + resolution: "@nodelib/fs.stat@npm:2.0.5" + checksum: 10/012480b5ca9d97bff9261571dbbec7bbc6033f69cc92908bc1ecfad0792361a5a1994bc48674b9ef76419d056a03efadfce5a6cf6dbc0a36559571a7a483f6f0 + languageName: node + linkType: hard + +"@nodelib/fs.walk@npm:^1.2.3, @nodelib/fs.walk@npm:^1.2.8": + version: 1.2.8 + resolution: "@nodelib/fs.walk@npm:1.2.8" + dependencies: + "@nodelib/fs.scandir": "npm:2.1.5" + fastq: "npm:^1.6.0" + checksum: 10/40033e33e96e97d77fba5a238e4bba4487b8284678906a9f616b5579ddaf868a18874c0054a75402c9fbaaa033a25ceae093af58c9c30278e35c23c9479e79b0 + languageName: node + linkType: hard + +"@npmcli/agent@npm:^2.0.0": + version: 2.2.1 + resolution: "@npmcli/agent@npm:2.2.1" + dependencies: + agent-base: "npm:^7.1.0" + http-proxy-agent: "npm:^7.0.0" + https-proxy-agent: "npm:^7.0.1" + lru-cache: "npm:^10.0.1" + socks-proxy-agent: "npm:^8.0.1" + checksum: 10/d4a48128f61e47f2f5c89315a5350e265dc619987e635bd62b52b29c7ed93536e724e721418c0ce352ceece86c13043c67aba1b70c3f5cc72fce6bb746706162 + languageName: node + linkType: hard + +"@npmcli/fs@npm:^3.1.0": + version: 3.1.0 + resolution: "@npmcli/fs@npm:3.1.0" + dependencies: + semver: "npm:^7.3.5" + checksum: 10/f3a7ab3a31de65e42aeb6ed03ed035ef123d2de7af4deb9d4a003d27acc8618b57d9fb9d259fe6c28ca538032a028f37337264388ba27d26d37fff7dde22476e + languageName: node + linkType: hard + +"@pkgjs/parseargs@npm:^0.11.0": + version: 0.11.0 + resolution: "@pkgjs/parseargs@npm:0.11.0" + checksum: 10/115e8ceeec6bc69dff2048b35c0ab4f8bbee12d8bb6c1f4af758604586d802b6e669dcb02dda61d078de42c2b4ddce41b3d9e726d7daa6b4b850f4adbf7333ff + languageName: node + linkType: hard + +"@pmmmwh/react-refresh-webpack-plugin@npm:^0.5.11": + version: 0.5.11 + resolution: "@pmmmwh/react-refresh-webpack-plugin@npm:0.5.11" + dependencies: + ansi-html-community: "npm:^0.0.8" + common-path-prefix: "npm:^3.0.0" + core-js-pure: "npm:^3.23.3" + error-stack-parser: "npm:^2.0.6" + find-up: "npm:^5.0.0" + html-entities: "npm:^2.1.0" + loader-utils: "npm:^2.0.4" + schema-utils: "npm:^3.0.0" + source-map: "npm:^0.7.3" + peerDependencies: + "@types/webpack": 4.x || 5.x + react-refresh: ">=0.10.0 <1.0.0" + sockjs-client: ^1.4.0 + type-fest: ">=0.17.0 <5.0.0" + webpack: ">=4.43.0 <6.0.0" + webpack-dev-server: 3.x || 4.x + webpack-hot-middleware: 2.x + webpack-plugin-serve: 0.x || 1.x + peerDependenciesMeta: + "@types/webpack": + optional: true + sockjs-client: + optional: true + type-fest: + optional: true + webpack-dev-server: + optional: true + webpack-hot-middleware: + optional: true + webpack-plugin-serve: + optional: true + checksum: 10/ee7eff63ef930c8ec37b341d12f180598a5173938a5b8d1d7c53306eab10b3f3f23adcba4824e5a93ddcd0cf185a90baa0b6f483f27a320dd86ad61941940eb6 + languageName: node + linkType: hard + +"@radix-ui/primitive@npm:1.0.1": + version: 1.0.1 + resolution: "@radix-ui/primitive@npm:1.0.1" + dependencies: + "@babel/runtime": "npm:^7.13.10" + checksum: 10/2b93e161d3fdabe9a64919def7fa3ceaecf2848341e9211520c401181c9eaebb8451c630b066fad2256e5c639c95edc41de0ba59c40eff37e799918d019822d1 + languageName: node + linkType: hard + +"@radix-ui/react-compose-refs@npm:1.0.1": + version: 1.0.1 + resolution: "@radix-ui/react-compose-refs@npm:1.0.1" + dependencies: + "@babel/runtime": "npm:^7.13.10" + peerDependencies: + "@types/react": "*" + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/2b9a613b6db5bff8865588b6bf4065f73021b3d16c0a90b2d4c23deceeb63612f1f15de188227ebdc5f88222cab031be617a9dd025874c0487b303be3e5cc2a8 + languageName: node + linkType: hard + +"@radix-ui/react-context@npm:1.0.1": + version: 1.0.1 + resolution: "@radix-ui/react-context@npm:1.0.1" + dependencies: + "@babel/runtime": "npm:^7.13.10" + peerDependencies: + "@types/react": "*" + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/a02187a3bae3a0f1be5fab5ad19c1ef06ceff1028d957e4d9994f0186f594a9c3d93ee34bacb86d1fa8eb274493362944398e1c17054d12cb3b75384f9ae564b + languageName: node + linkType: hard + +"@radix-ui/react-dialog@npm:^1.0.5": + version: 1.0.5 + resolution: "@radix-ui/react-dialog@npm:1.0.5" + dependencies: + "@babel/runtime": "npm:^7.13.10" + "@radix-ui/primitive": "npm:1.0.1" + "@radix-ui/react-compose-refs": "npm:1.0.1" + "@radix-ui/react-context": "npm:1.0.1" + "@radix-ui/react-dismissable-layer": "npm:1.0.5" + "@radix-ui/react-focus-guards": "npm:1.0.1" + "@radix-ui/react-focus-scope": "npm:1.0.4" + "@radix-ui/react-id": "npm:1.0.1" + "@radix-ui/react-portal": "npm:1.0.4" + "@radix-ui/react-presence": "npm:1.0.1" + "@radix-ui/react-primitive": "npm:1.0.3" + "@radix-ui/react-slot": "npm:1.0.2" + "@radix-ui/react-use-controllable-state": "npm:1.0.1" + aria-hidden: "npm:^1.1.1" + react-remove-scroll: "npm:2.5.5" + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 10/adbd7301586db712616a0f8dd54a25e7544853cbf61b5d6e279215d479f57ac35157847ee424d54a7e707969a926ca0a7c28934400c9ac224bd0c7cc19229aca + languageName: node + linkType: hard + +"@radix-ui/react-dismissable-layer@npm:1.0.5": + version: 1.0.5 + resolution: "@radix-ui/react-dismissable-layer@npm:1.0.5" + dependencies: + "@babel/runtime": "npm:^7.13.10" + "@radix-ui/primitive": "npm:1.0.1" + "@radix-ui/react-compose-refs": "npm:1.0.1" + "@radix-ui/react-primitive": "npm:1.0.3" + "@radix-ui/react-use-callback-ref": "npm:1.0.1" + "@radix-ui/react-use-escape-keydown": "npm:1.0.3" + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 10/f1626d69bb50ec226032bb7d8c5abaaf7359c2d7660309b0ed3daaedd91f30717573aac1a1cb82d589b7f915cf464b95a12da0a3b91b6acfefb6fbbc62b992de + languageName: node + linkType: hard + +"@radix-ui/react-focus-guards@npm:1.0.1": + version: 1.0.1 + resolution: "@radix-ui/react-focus-guards@npm:1.0.1" + dependencies: + "@babel/runtime": "npm:^7.13.10" + peerDependencies: + "@types/react": "*" + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/1f8ca8f83b884b3612788d0742f3f054e327856d90a39841a47897dbed95e114ee512362ae314177de226d05310047cabbf66b686ae86ad1b65b6b295be24ef7 + languageName: node + linkType: hard + +"@radix-ui/react-focus-scope@npm:1.0.4": + version: 1.0.4 + resolution: "@radix-ui/react-focus-scope@npm:1.0.4" + dependencies: + "@babel/runtime": "npm:^7.13.10" + "@radix-ui/react-compose-refs": "npm:1.0.1" + "@radix-ui/react-primitive": "npm:1.0.3" + "@radix-ui/react-use-callback-ref": "npm:1.0.1" + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 10/3590e74c6b682737c7ac4bf8db41b3df7b09a0320f3836c619e487df9915451e5dafade9923a74383a7366c59e9436f5fff4301d70c0d15928e0e16b36e58bc9 languageName: node linkType: hard -"@nodelib/fs.scandir@npm:2.1.5": - version: 2.1.5 - resolution: "@nodelib/fs.scandir@npm:2.1.5" +"@radix-ui/react-id@npm:1.0.1": + version: 1.0.1 + resolution: "@radix-ui/react-id@npm:1.0.1" dependencies: - "@nodelib/fs.stat": "npm:2.0.5" - run-parallel: "npm:^1.1.9" - checksum: 10/6ab2a9b8a1d67b067922c36f259e3b3dfd6b97b219c540877a4944549a4d49ea5ceba5663905ab5289682f1f3c15ff441d02f0447f620a42e1cb5e1937174d4b + "@babel/runtime": "npm:^7.13.10" + "@radix-ui/react-use-layout-effect": "npm:1.0.1" + peerDependencies: + "@types/react": "*" + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/446a453d799cc790dd2a1583ff8328da88271bff64530b5a17c102fa7fb35eece3cf8985359d416f65e330cd81aa7b8fe984ea125fc4f4eaf4b3801d698e49fe languageName: node linkType: hard -"@nodelib/fs.stat@npm:2.0.5, @nodelib/fs.stat@npm:^2.0.2": - version: 2.0.5 - resolution: "@nodelib/fs.stat@npm:2.0.5" - checksum: 10/012480b5ca9d97bff9261571dbbec7bbc6033f69cc92908bc1ecfad0792361a5a1994bc48674b9ef76419d056a03efadfce5a6cf6dbc0a36559571a7a483f6f0 +"@radix-ui/react-portal@npm:1.0.4": + version: 1.0.4 + resolution: "@radix-ui/react-portal@npm:1.0.4" + dependencies: + "@babel/runtime": "npm:^7.13.10" + "@radix-ui/react-primitive": "npm:1.0.3" + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 10/c4cf35e2f26a89703189d0eef3ceeeb706ae0832e98e558730a5e929ca7c72c7cb510413a24eca94c7732f8d659a1e81942bec7b90540cb73ce9e4885d040b64 languageName: node linkType: hard -"@nodelib/fs.walk@npm:^1.2.3, @nodelib/fs.walk@npm:^1.2.8": - version: 1.2.8 - resolution: "@nodelib/fs.walk@npm:1.2.8" +"@radix-ui/react-presence@npm:1.0.1": + version: 1.0.1 + resolution: "@radix-ui/react-presence@npm:1.0.1" dependencies: - "@nodelib/fs.scandir": "npm:2.1.5" - fastq: "npm:^1.6.0" - checksum: 10/40033e33e96e97d77fba5a238e4bba4487b8284678906a9f616b5579ddaf868a18874c0054a75402c9fbaaa033a25ceae093af58c9c30278e35c23c9479e79b0 + "@babel/runtime": "npm:^7.13.10" + "@radix-ui/react-compose-refs": "npm:1.0.1" + "@radix-ui/react-use-layout-effect": "npm:1.0.1" + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 10/406f0b5a54ea4e7881e15bddc3863234bb14bf3abd4a6e56ea57c6df6f9265a9ad5cfa158e3a98614f0dcbbb7c5f537e1f7158346e57cc3f29b522d62cf28823 languageName: node linkType: hard -"@npmcli/agent@npm:^2.0.0": - version: 2.2.1 - resolution: "@npmcli/agent@npm:2.2.1" +"@radix-ui/react-primitive@npm:1.0.3": + version: 1.0.3 + resolution: "@radix-ui/react-primitive@npm:1.0.3" dependencies: - agent-base: "npm:^7.1.0" - http-proxy-agent: "npm:^7.0.0" - https-proxy-agent: "npm:^7.0.1" - lru-cache: "npm:^10.0.1" - socks-proxy-agent: "npm:^8.0.1" - checksum: 10/d4a48128f61e47f2f5c89315a5350e265dc619987e635bd62b52b29c7ed93536e724e721418c0ce352ceece86c13043c67aba1b70c3f5cc72fce6bb746706162 + "@babel/runtime": "npm:^7.13.10" + "@radix-ui/react-slot": "npm:1.0.2" + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 10/bedb934ac07c710dc5550a7bfc7065d47e099d958cde1d37e4b1947ae5451f1b7e6f8ff5965e242578bf2c619065e6038c3a3aa779e5eafa7da3e3dbc685799f languageName: node linkType: hard -"@npmcli/fs@npm:^3.1.0": - version: 3.1.0 - resolution: "@npmcli/fs@npm:3.1.0" +"@radix-ui/react-slot@npm:1.0.2, @radix-ui/react-slot@npm:^1.0.2": + version: 1.0.2 + resolution: "@radix-ui/react-slot@npm:1.0.2" dependencies: - semver: "npm:^7.3.5" - checksum: 10/f3a7ab3a31de65e42aeb6ed03ed035ef123d2de7af4deb9d4a003d27acc8618b57d9fb9d259fe6c28ca538032a028f37337264388ba27d26d37fff7dde22476e + "@babel/runtime": "npm:^7.13.10" + "@radix-ui/react-compose-refs": "npm:1.0.1" + peerDependencies: + "@types/react": "*" + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/734866561e991438fbcf22af06e56b272ed6ee8f7b536489ee3bf2f736f8b53bf6bc14ebde94834aa0aceda854d018a0ce20bb171defffbaed1f566006cbb887 languageName: node linkType: hard -"@pkgjs/parseargs@npm:^0.11.0": - version: 0.11.0 - resolution: "@pkgjs/parseargs@npm:0.11.0" - checksum: 10/115e8ceeec6bc69dff2048b35c0ab4f8bbee12d8bb6c1f4af758604586d802b6e669dcb02dda61d078de42c2b4ddce41b3d9e726d7daa6b4b850f4adbf7333ff +"@radix-ui/react-use-callback-ref@npm:1.0.1": + version: 1.0.1 + resolution: "@radix-ui/react-use-callback-ref@npm:1.0.1" + dependencies: + "@babel/runtime": "npm:^7.13.10" + peerDependencies: + "@types/react": "*" + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/b9fd39911c3644bbda14a84e4fca080682bef84212b8d8931fcaa2d2814465de242c4cfd8d7afb3020646bead9c5e539d478cea0a7031bee8a8a3bb164f3bc4c languageName: node linkType: hard -"@pmmmwh/react-refresh-webpack-plugin@npm:^0.5.11": - version: 0.5.11 - resolution: "@pmmmwh/react-refresh-webpack-plugin@npm:0.5.11" +"@radix-ui/react-use-controllable-state@npm:1.0.1": + version: 1.0.1 + resolution: "@radix-ui/react-use-controllable-state@npm:1.0.1" dependencies: - ansi-html-community: "npm:^0.0.8" - common-path-prefix: "npm:^3.0.0" - core-js-pure: "npm:^3.23.3" - error-stack-parser: "npm:^2.0.6" - find-up: "npm:^5.0.0" - html-entities: "npm:^2.1.0" - loader-utils: "npm:^2.0.4" - schema-utils: "npm:^3.0.0" - source-map: "npm:^0.7.3" + "@babel/runtime": "npm:^7.13.10" + "@radix-ui/react-use-callback-ref": "npm:1.0.1" peerDependencies: - "@types/webpack": 4.x || 5.x - react-refresh: ">=0.10.0 <1.0.0" - sockjs-client: ^1.4.0 - type-fest: ">=0.17.0 <5.0.0" - webpack: ">=4.43.0 <6.0.0" - webpack-dev-server: 3.x || 4.x - webpack-hot-middleware: 2.x - webpack-plugin-serve: 0.x || 1.x + "@types/react": "*" + react: ^16.8 || ^17.0 || ^18.0 peerDependenciesMeta: - "@types/webpack": - optional: true - sockjs-client: - optional: true - type-fest: - optional: true - webpack-dev-server: - optional: true - webpack-hot-middleware: - optional: true - webpack-plugin-serve: + "@types/react": optional: true - checksum: 10/ee7eff63ef930c8ec37b341d12f180598a5173938a5b8d1d7c53306eab10b3f3f23adcba4824e5a93ddcd0cf185a90baa0b6f483f27a320dd86ad61941940eb6 + checksum: 10/dee2be1937d293c3a492cb6d279fc11495a8f19dc595cdbfe24b434e917302f9ac91db24e8cc5af9a065f3f209c3423115b5442e65a5be9fd1e9091338972be9 languageName: node linkType: hard -"@radix-ui/react-compose-refs@npm:1.0.1": - version: 1.0.1 - resolution: "@radix-ui/react-compose-refs@npm:1.0.1" +"@radix-ui/react-use-escape-keydown@npm:1.0.3": + version: 1.0.3 + resolution: "@radix-ui/react-use-escape-keydown@npm:1.0.3" dependencies: "@babel/runtime": "npm:^7.13.10" + "@radix-ui/react-use-callback-ref": "npm:1.0.1" peerDependencies: "@types/react": "*" react: ^16.8 || ^17.0 || ^18.0 peerDependenciesMeta: "@types/react": optional: true - checksum: 10/2b9a613b6db5bff8865588b6bf4065f73021b3d16c0a90b2d4c23deceeb63612f1f15de188227ebdc5f88222cab031be617a9dd025874c0487b303be3e5cc2a8 + checksum: 10/c6ed0d9ce780f67f924980eb305af1f6cce2a8acbaf043a58abe0aa3cc551d9aa76ccee14531df89bbee302ead7ecc7fce330886f82d4672c5eda52f357ef9b8 languageName: node linkType: hard -"@radix-ui/react-slot@npm:^1.0.2": - version: 1.0.2 - resolution: "@radix-ui/react-slot@npm:1.0.2" +"@radix-ui/react-use-layout-effect@npm:1.0.1": + version: 1.0.1 + resolution: "@radix-ui/react-use-layout-effect@npm:1.0.1" dependencies: "@babel/runtime": "npm:^7.13.10" - "@radix-ui/react-compose-refs": "npm:1.0.1" peerDependencies: "@types/react": "*" react: ^16.8 || ^17.0 || ^18.0 peerDependenciesMeta: "@types/react": optional: true - checksum: 10/734866561e991438fbcf22af06e56b272ed6ee8f7b536489ee3bf2f736f8b53bf6bc14ebde94834aa0aceda854d018a0ce20bb171defffbaed1f566006cbb887 + checksum: 10/bed9c7e8de243a5ec3b93bb6a5860950b0dba359b6680c84d57c7a655e123dec9b5891c5dfe81ab970652e7779fe2ad102a23177c7896dde95f7340817d47ae5 languageName: node linkType: hard @@ -2563,7 +3154,7 @@ __metadata: "@storybook/addon-actions@file:../../../code/addons/actions::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.7 - resolution: "@storybook/addon-actions@file:../../../code/addons/actions#../../../code/addons/actions::hash=6004d9&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/addon-actions@file:../../../code/addons/actions#../../../code/addons/actions::hash=966388&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-events": "workspace:*" "@storybook/global": "npm:^5.0.0" @@ -2571,37 +3162,39 @@ __metadata: dequal: "npm:^2.0.2" polished: "npm:^4.2.2" uuid: "npm:^9.0.0" - checksum: 10/c8bfd628f1ff4a5472b63b7126842eed94a7b8c93f65fee3bfff9a8db71ae45ea63ee7d656b42f29355729f787366e14d434abb75402645a5d0b80d48e1bbc90 + checksum: 10/ed9d4c392a62f9869255be32f64ca2b02184f5ff8bc5af66c92d9268e5dca24cb96bb80b422f853d2638ad89ff227675b8c2f644d11c8f2a24a37ff23793cd9b languageName: node linkType: hard "@storybook/addon-backgrounds@file:../../../code/addons/backgrounds::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.7 - resolution: "@storybook/addon-backgrounds@file:../../../code/addons/backgrounds#../../../code/addons/backgrounds::hash=445bce&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/addon-backgrounds@file:../../../code/addons/backgrounds#../../../code/addons/backgrounds::hash=01e510&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" memoizerific: "npm:^1.11.3" ts-dedent: "npm:^2.0.0" - checksum: 10/7f2c66b7516beeeb976d227f27f0cebd600ac5d3abada7d5e01c30d10cc053059f15b607cb78f1c2d03c82a8294fb61598cbca41c3c5f3cf432e79587d4d15a2 + checksum: 10/ab6d7c92ac90fcd6791f49313394c19499b0b7e9683e1e3ea09842a939bbe85559ba9638194934cb128721a32c9b3397baf13ed6aabdac2b6128e48512b295af languageName: node linkType: hard "@storybook/addon-controls@file:../../../code/addons/controls::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.7 - resolution: "@storybook/addon-controls@file:../../../code/addons/controls#../../../code/addons/controls::hash=784f9c&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/addon-controls@file:../../../code/addons/controls#../../../code/addons/controls::hash=85cf2f&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/blocks": "workspace:*" + dequal: "npm:^2.0.2" lodash: "npm:^4.17.21" + telejson: "npm:^7.2.0" ts-dedent: "npm:^2.0.0" - checksum: 10/6e4db5b470f526bb357af93fd6757fe8d4976f4fdb1c3856b828f408780e27645038bdc70e318de40f8fc069a359d4d822ada860df8cffd41daf5506b5468642 + checksum: 10/2c33ed89e175f9a998776f653d1f9f7231465fb7db5cf647c9e3d1d93f35837e64ff3e723265d4cd1fa1b3e7a25b5163b79b0c99faa3d23fc0ff0c9905c634d2 languageName: node linkType: hard "@storybook/addon-docs@file:../../../code/addons/docs::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.7 - resolution: "@storybook/addon-docs@file:../../../code/addons/docs#../../../code/addons/docs::hash=9453ad&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/addon-docs@file:../../../code/addons/docs#../../../code/addons/docs::hash=1316f0&locator=portable-stories-nextjs%40workspace%3A." dependencies: - "@babel/core": "npm:^7.12.3" + "@babel/core": "npm:^7.24.4" "@mdx-js/react": "npm:^3.0.0" "@storybook/blocks": "workspace:*" "@storybook/client-logger": "workspace:*" @@ -2621,13 +3214,13 @@ __metadata: rehype-external-links: "npm:^3.0.0" rehype-slug: "npm:^6.0.0" ts-dedent: "npm:^2.0.0" - checksum: 10/ab4de80de2f39340299317bebaf82598557655052bc1e55bd7ffc31b6ab91a3605f734991666d0cf3b18f0d0c411e2fc117aec76bdfe197854f1085c1e9bde3d + checksum: 10/e7f7fba777e2a06ceba3930da615587902410ee765776c02f7ae1be4864aca8990397c192064ab10ed1c67a40943d0e07b6833670d5a2b71c92c4ee74eb54659 languageName: node linkType: hard "@storybook/addon-essentials@file:../../../code/addons/essentials::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.7 - resolution: "@storybook/addon-essentials@file:../../../code/addons/essentials#../../../code/addons/essentials::hash=80691b&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/addon-essentials@file:../../../code/addons/essentials#../../../code/addons/essentials::hash=716654&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/addon-actions": "workspace:*" "@storybook/addon-backgrounds": "workspace:*" @@ -2643,22 +3236,22 @@ __metadata: "@storybook/node-logger": "workspace:*" "@storybook/preview-api": "workspace:*" ts-dedent: "npm:^2.0.0" - checksum: 10/0479f4d2f488ab30b371fd9f2bd5c12b7dcd029aac9a1f8f774701886d941b63c0ec4f50c221469ea220582ce4720d7386b9458cf15a29bf2c03eb51a6c70d13 + checksum: 10/c1b11269a0da8289306c112b360d2bb6f050aa99a5263be79fdc776bd519bf2a38a5c5659f6050b308f19a80c2862d6df56b7b679639d0ddf445bd7ca97850da languageName: node linkType: hard "@storybook/addon-highlight@file:../../../code/addons/highlight::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.7 - resolution: "@storybook/addon-highlight@file:../../../code/addons/highlight#../../../code/addons/highlight::hash=7ee0d6&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/addon-highlight@file:../../../code/addons/highlight#../../../code/addons/highlight::hash=993b1b&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" - checksum: 10/1e7db616fd4ddc6dd32583e6aff3df57d0ff001d2a5de8f990de53625d041b9f09bc6ec729accd0b528f24d54a954e10677bfbeeed07e938c00cbaed1d19c5b9 + checksum: 10/ab5eb230218718bfcf5505096d0745bb561c4109579e4c476d78ec7f73908e0decf292d21c4a635d98e369fc42a33d476649f2f8279b2ad7b9da69c32bc50368 languageName: node linkType: hard "@storybook/addon-interactions@file:../../../code/addons/interactions::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.7 - resolution: "@storybook/addon-interactions@file:../../../code/addons/interactions#../../../code/addons/interactions::hash=41e54e&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/addon-interactions@file:../../../code/addons/interactions#../../../code/addons/interactions::hash=397921&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" "@storybook/instrumenter": "workspace:*" @@ -2666,49 +3259,49 @@ __metadata: "@storybook/types": "workspace:*" polished: "npm:^4.2.2" ts-dedent: "npm:^2.2.0" - checksum: 10/064652b4c5ed667349beef06dae49684bd28bc743c109077d46e7070336e536e09b9a117bd3cf501c9e11244c699a5ef5b4ac5f576178a9a8daee5882dd5d04d + checksum: 10/b5ef21d4cc4c68de5b4bde6e2eba1b4ac149dfb49e0af3d963f40715c5b7b9ac065118e16edb3de26b78fc2ce4510ecbbef5229b0794b48c5f194a840e54704e languageName: node linkType: hard "@storybook/addon-measure@file:../../../code/addons/measure::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.7 - resolution: "@storybook/addon-measure@file:../../../code/addons/measure#../../../code/addons/measure::hash=1bf2c0&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/addon-measure@file:../../../code/addons/measure#../../../code/addons/measure::hash=29247d&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" tiny-invariant: "npm:^1.3.1" - checksum: 10/dbb3076c99da811d94598070cb57ed19b2a00c875668fc8d586f93d59585b6f2485f04998f61294cd037b43f8d03f21b53d1918c73d1bb9c8652bf6aa6737530 + checksum: 10/5e576ded94bd8b8f36f907073c7e1cbc3d3307763b685e2dac8298f099841fe846c9e0105e64f82ab9996adc94f962cea7406e300bb6b1ba75b01ffcce8af3ec languageName: node linkType: hard "@storybook/addon-outline@file:../../../code/addons/outline::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.7 - resolution: "@storybook/addon-outline@file:../../../code/addons/outline#../../../code/addons/outline::hash=2a387b&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/addon-outline@file:../../../code/addons/outline#../../../code/addons/outline::hash=86d290&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" ts-dedent: "npm:^2.0.0" - checksum: 10/bc58cf5bb670333b33fa2c2414b17b0bf97ffdf92bafe89eef04f1965479f7833c388087ebb478f152780c9119f8795ae169125291419fd7e74d11cbb1410540 + checksum: 10/aee8785f7f242e0fb23070d7b31b64b922205b367f32d89d1ee3898469456a192a53377de5df67bcb024e92efdfc39e168bb7c5f9dc6bb3198854b56666a3d57 languageName: node linkType: hard "@storybook/addon-toolbars@file:../../../code/addons/toolbars::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.7 - resolution: "@storybook/addon-toolbars@file:../../../code/addons/toolbars#../../../code/addons/toolbars::hash=dba398&locator=portable-stories-nextjs%40workspace%3A." - checksum: 10/14efee7b4f58d0ee846a71aa6d614a0927a80e32c90f677325e17d0d2402ed38effc226a69c9856073dbb809d84c4c7606c339f99be6b46a6a12e0f3ce2f075b + resolution: "@storybook/addon-toolbars@file:../../../code/addons/toolbars#../../../code/addons/toolbars::hash=2a1821&locator=portable-stories-nextjs%40workspace%3A." + checksum: 10/a03029b1e981a4e06e299e9c1181d36e23db739c1b1b8efd5ff181a6e3d9577d790ac69a3f10fc5b9580a95c193eee3e241f8a354022eddbaa8e2d81f3f75584 languageName: node linkType: hard "@storybook/addon-viewport@file:../../../code/addons/viewport::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.7 - resolution: "@storybook/addon-viewport@file:../../../code/addons/viewport#../../../code/addons/viewport::hash=939ad5&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/addon-viewport@file:../../../code/addons/viewport#../../../code/addons/viewport::hash=f175c3&locator=portable-stories-nextjs%40workspace%3A." dependencies: memoizerific: "npm:^1.11.3" - checksum: 10/ab29c073f7d3ce1e9466672441885600429ebbba1742bc2eb0f8656853f25d9a0d86ff865f41a5b76f0809d6929a955cbc7dba716d3834887300fd3813bfa045 + checksum: 10/64f618b94952b6ff6f6db7357610c732663db5f95dfc3f72c21cf80317c827a18e9eebf3ca24f5b27426ac97628bb16bb15314f5f624ccc3e1219614a891ee3c languageName: node linkType: hard "@storybook/blocks@file:../../../code/ui/blocks::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.7 - resolution: "@storybook/blocks@file:../../../code/ui/blocks#../../../code/ui/blocks::hash=e528b8&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/blocks@file:../../../code/ui/blocks#../../../code/ui/blocks::hash=8fb5e1&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" @@ -2742,13 +3335,13 @@ __metadata: optional: true react-dom: optional: true - checksum: 10/8c5b561b365792c9cb0fbd556c20a6a69ae3e894be43b9251bf131f5b4a542b2734c981d8164992ce0cf0cc70ee8643bcdb30a09d0860c7d1a8fccff3404f79e + checksum: 10/714a875998da26fdc67047b372f4b79e20a59357fe6aa66444fef83ee827cba14a70c02e423b9867b96b3156705398c0a57c3f7b449bff0605169153530467de languageName: node linkType: hard "@storybook/builder-manager@file:../../../code/builders/builder-manager::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.7 - resolution: "@storybook/builder-manager@file:../../../code/builders/builder-manager#../../../code/builders/builder-manager::hash=cdb753&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/builder-manager@file:../../../code/builders/builder-manager#../../../code/builders/builder-manager::hash=1cb036&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@fal-works/esbuild-plugin-global-externals": "npm:^2.1.2" "@storybook/core-common": "workspace:*" @@ -2764,13 +3357,13 @@ __metadata: fs-extra: "npm:^11.1.0" process: "npm:^0.11.10" util: "npm:^0.12.4" - checksum: 10/32bdfc42175480e59defece1f67634d40d2d039668c81e372736ac6990b2144cdd2676f9f9859250fbb5d7855cd12729f0107a64a07e32eb6a9704daf76d816b + checksum: 10/d3a768b0b42d2537605b3b7832b21f6ebd9a5c6d207c6925db6ef3adb647a4af23bd42dbe86546d4ef18d2b13fa408da03ff06a8639ed0cf0c2c4cdcec5cdf1a languageName: node linkType: hard "@storybook/builder-webpack5@file:../../../code/builders/builder-webpack5::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.7 - resolution: "@storybook/builder-webpack5@file:../../../code/builders/builder-webpack5#../../../code/builders/builder-webpack5::hash=097abc&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/builder-webpack5@file:../../../code/builders/builder-webpack5#../../../code/builders/builder-webpack5::hash=136502&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" @@ -2809,29 +3402,29 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 10/82379d860d3065157ad2033724299128efa169fd831d1002b2aba10232e9ae8dd93a788aae0522b8ad0cb6472754e298568f44e341154b94530f16f6683cd475 + checksum: 10/8861a56b17ba33f3d60a993612ba641b12721fa67edddf2bb0274091463a9b875090d5cfd149198e1c4d2baadb96fcd435ddbcfc82b02525dbb67e4ea57348ae languageName: node linkType: hard "@storybook/channels@file:../../../code/lib/channels::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.7 - resolution: "@storybook/channels@file:../../../code/lib/channels#../../../code/lib/channels::hash=c002e8&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/channels@file:../../../code/lib/channels#../../../code/lib/channels::hash=fcc84e&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" "@storybook/global": "npm:^5.0.0" telejson: "npm:^7.2.0" tiny-invariant: "npm:^1.3.1" - checksum: 10/011d5c3631e39ecb2e0bee1d18c238d27a3b2523f674775ced4a187b589a3165504f2e685b77334347f01c415fb07b2ecf748ad0ad12c926b188a8450db6e5b2 + checksum: 10/ef037acc097c4018b7481776d677a5c93da9bb886b2548ab1fa5bf2de8c3e39be627f7a5751af9b8758837582ee7db872a025c02f5e00f29d253cd17828eb8ce languageName: node linkType: hard "@storybook/cli@file:../../../code/lib/cli::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.7 - resolution: "@storybook/cli@file:../../../code/lib/cli#../../../code/lib/cli::hash=4c4245&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/cli@file:../../../code/lib/cli#../../../code/lib/cli::hash=652a32&locator=portable-stories-nextjs%40workspace%3A." dependencies: - "@babel/core": "npm:^7.23.0" - "@babel/types": "npm:^7.23.0" + "@babel/core": "npm:^7.24.4" + "@babel/types": "npm:^7.24.0" "@ndelangen/get-tarball": "npm:^3.0.7" "@storybook/codemod": "workspace:*" "@storybook/core-common": "workspace:*" @@ -2869,26 +3462,26 @@ __metadata: bin: getstorybook: ./bin/index.js sb: ./bin/index.js - checksum: 10/6e3c6c9e15ddafb9444d51c973b5fa83b11d57943dd339cfaa5f51386b1590da12e43cc84f15707080d69cee3edbef79d9dac8d18a0ed4a9c950f180b52e239e + checksum: 10/a28b1d90beb3e8a3666823ff15b8ae4476fea15080e4e688834f684fe46917e06e6f9c1fd3c09d513d2a872ca3bd302a7a7bf76a4a0812e892d786ca29a1c451 languageName: node linkType: hard "@storybook/client-logger@file:../../../code/lib/client-logger::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.7 - resolution: "@storybook/client-logger@file:../../../code/lib/client-logger#../../../code/lib/client-logger::hash=3fcc66&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/client-logger@file:../../../code/lib/client-logger#../../../code/lib/client-logger::hash=28d039&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/global": "npm:^5.0.0" - checksum: 10/b9659c0914a46c81a0c8b2ab88741832504b4d87da0e785219ea5182154690d5d37107b42923143f598f36bf263b15a6f4dfa14522bdcada8abd97a581981ca3 + checksum: 10/5e11f5b9da08fe9be5be72b1bba63643444aee54b1bfb02b54281d8c5c757f791e5c2a45e7447c605a57ea787d9070384233b7d315f3fe16ac9e3c6e16dd4164 languageName: node linkType: hard "@storybook/codemod@file:../../../code/lib/codemod::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.7 - resolution: "@storybook/codemod@file:../../../code/lib/codemod#../../../code/lib/codemod::hash=1c69c7&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/codemod@file:../../../code/lib/codemod#../../../code/lib/codemod::hash=f630a3&locator=portable-stories-nextjs%40workspace%3A." dependencies: - "@babel/core": "npm:^7.23.2" - "@babel/preset-env": "npm:^7.23.2" - "@babel/types": "npm:^7.23.0" + "@babel/core": "npm:^7.24.4" + "@babel/preset-env": "npm:^7.24.4" + "@babel/types": "npm:^7.24.0" "@storybook/csf": "npm:^0.1.4" "@storybook/csf-tools": "workspace:*" "@storybook/node-logger": "workspace:*" @@ -2901,14 +3494,15 @@ __metadata: prettier: "npm:^3.1.1" recast: "npm:^0.23.5" tiny-invariant: "npm:^1.3.1" - checksum: 10/7a45f976805757518ab87011b5708999e4c4692911cbdfa721f662167d61f8aff1a75ced263cc0842187cd16195a2a46816a638c4e89d878bd9af182fb0d4b95 + checksum: 10/9c9e913b2bc43edc260a7957b6d88b95c1db6c3502227cd5f5c4ff8eb815d68fb2050ecab86bd8629c60a90ab384ac6d77006242bc6fbfbce9e632c59a9a73d2 languageName: node linkType: hard "@storybook/components@file:../../../code/ui/components::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.7 - resolution: "@storybook/components@file:../../../code/ui/components#../../../code/ui/components::hash=609416&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/components@file:../../../code/ui/components#../../../code/ui/components::hash=59b042&locator=portable-stories-nextjs%40workspace%3A." dependencies: + "@radix-ui/react-dialog": "npm:^1.0.5" "@radix-ui/react-slot": "npm:^1.0.2" "@storybook/client-logger": "workspace:*" "@storybook/csf": "npm:^0.1.4" @@ -2921,13 +3515,13 @@ __metadata: peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: 10/adb48901ccd03c10b6c64b8b902372a8044355a2d4c5e3c396e1b2015c8cab610d04459fe8e1b603a0ef372f27ac68e0e6595c3b701e9c6488a47d1070642276 + checksum: 10/67fcb9cf30da426ce2d5bbf6eaaecd27d7116c711bf4e9d57d79538cd430dca1d5a4d4d5fc396e558f880553d86b43b57c420f20e9516846208716ce514da265 languageName: node linkType: hard "@storybook/core-common@file:../../../code/lib/core-common::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.7 - resolution: "@storybook/core-common@file:../../../code/lib/core-common#../../../code/lib/core-common::hash=c9ae25&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/core-common@file:../../../code/lib/core-common#../../../code/lib/core-common::hash=3637bb&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-events": "workspace:*" "@storybook/csf-tools": "workspace:*" @@ -2963,25 +3557,27 @@ __metadata: peerDependenciesMeta: prettier: optional: true - checksum: 10/55582fc9caefb8c87cf2367b64acecf11ac266fb0c28f26bdf4ca161f11ecfb1876cde9106f49e68ec112267c58624a21041c5c790bc275a213f1621e16fcc85 + checksum: 10/444a8a07b4be1b80c65efaacedb81c59e69f954c8e8c77c7dbdf27a536f8dc44802d9684ece23266953b8849789f64d756daef02f4617203aa097464b3065863 languageName: node linkType: hard "@storybook/core-events@file:../../../code/lib/core-events::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.7 - resolution: "@storybook/core-events@file:../../../code/lib/core-events#../../../code/lib/core-events::hash=47f752&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/core-events@file:../../../code/lib/core-events#../../../code/lib/core-events::hash=80b42e&locator=portable-stories-nextjs%40workspace%3A." dependencies: + "@storybook/csf": "npm:^0.1.4" ts-dedent: "npm:^2.0.0" - checksum: 10/40f34bd3746cc94ecb5f8f3fcc516c9f7bd8fc12f48977fdf3987a0e9f0c5306235657c731d379b16f3de4fe0d53754b67196608009b06927d57eed8f44a89ae + checksum: 10/614b861c1761ab86274f580c08d7c6841fe179cc475cc4c80ec4295549d6c842ff07bebf52351d0e7aedf9a027ddb6590ec76bca5ba80a4505dcaaea42fbc09f languageName: node linkType: hard "@storybook/core-server@file:../../../code/lib/core-server::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.7 - resolution: "@storybook/core-server@file:../../../code/lib/core-server#../../../code/lib/core-server::hash=d5e086&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/core-server@file:../../../code/lib/core-server#../../../code/lib/core-server::hash=82fafe&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@aw-web-design/x-default-browser": "npm:1.4.126" - "@babel/core": "npm:^7.23.9" + "@babel/core": "npm:^7.24.4" + "@babel/parser": "npm:^7.24.4" "@discoveryjs/json-ext": "npm:^0.5.3" "@storybook/builder-manager": "workspace:*" "@storybook/channels": "workspace:*" @@ -2998,16 +3594,16 @@ __metadata: "@storybook/telemetry": "workspace:*" "@storybook/types": "workspace:*" "@types/detect-port": "npm:^1.3.0" + "@types/diff": "npm:^5.0.9" "@types/node": "npm:^18.0.0" "@types/pretty-hrtime": "npm:^1.0.0" "@types/semver": "npm:^7.3.4" better-opn: "npm:^3.0.2" chalk: "npm:^4.1.0" - cjs-module-lexer: "npm:^1.2.3" cli-table3: "npm:^0.6.1" compression: "npm:^1.7.4" detect-port: "npm:^1.3.0" - es-module-lexer: "npm:^1.5.0" + diff: "npm:^5.2.0" express: "npm:^4.17.3" fs-extra: "npm:^11.1.0" globby: "npm:^14.0.1" @@ -3025,47 +3621,47 @@ __metadata: util-deprecate: "npm:^1.0.2" watchpack: "npm:^2.2.0" ws: "npm:^8.2.3" - checksum: 10/c1e7052671b91921fafaf7a2faccc0b7a80d870f44a8c36753b455f514952cd8b8b281e2a7486957ca32d2100d2143cc913b3e8542624c84074df92567903a76 + checksum: 10/630a8a4a9b0bf4c9912e4bf295df09a52f4f04976a82b212979e9f24e9b42480d37ca828fbcefbfce1409406e6225bc4e2e681ac4f7fe60626218e2b5e1fea04 languageName: node linkType: hard "@storybook/core-webpack@file:../../../code/lib/core-webpack::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.7 - resolution: "@storybook/core-webpack@file:../../../code/lib/core-webpack#../../../code/lib/core-webpack::hash=c7e54c&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/core-webpack@file:../../../code/lib/core-webpack#../../../code/lib/core-webpack::hash=51f292&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-common": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/types": "workspace:*" "@types/node": "npm:^18.0.0" ts-dedent: "npm:^2.0.0" - checksum: 10/4bebf551445b0567fd2f47d5827839c6f8f0c8ffb4bb0968a4ffe20a3704a6cfe6928447b6bedbb3bcb95bd574f9a87184692d17e9f23eef16aebf2348ddd599 + checksum: 10/2aa3e59de39aeb2d32054fca48323e67057b3a57f17831584fcffea420833b668152edfd018e845f36995e5d50a15bd68a9f42c47da73e3be10149ee3ed13296 languageName: node linkType: hard "@storybook/csf-plugin@file:../../../code/lib/csf-plugin::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.7 - resolution: "@storybook/csf-plugin@file:../../../code/lib/csf-plugin#../../../code/lib/csf-plugin::hash=af3a0b&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/csf-plugin@file:../../../code/lib/csf-plugin#../../../code/lib/csf-plugin::hash=959b31&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/csf-tools": "workspace:*" unplugin: "npm:^1.3.1" - checksum: 10/675bedecfbd0d0deffa986ee402ef9aabc74ea3d91ee1c30d02d297ba3dc262bb148d59cfdcfe331ab920c1dde904df808c1f74f51a7feb46b90a7860ccd4ab9 + checksum: 10/cd08a6fcfa7df93e1a2cad0e2d069a66fb4bf983132ed79cc0c6e410adb469f47e2f3d93742b4183ffe9bee2b9bd22493b42665e36b9f54e5194f9c7edebae28 languageName: node linkType: hard "@storybook/csf-tools@file:../../../code/lib/csf-tools::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.7 - resolution: "@storybook/csf-tools@file:../../../code/lib/csf-tools#../../../code/lib/csf-tools::hash=672378&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/csf-tools@file:../../../code/lib/csf-tools#../../../code/lib/csf-tools::hash=25e230&locator=portable-stories-nextjs%40workspace%3A." dependencies: - "@babel/generator": "npm:^7.23.0" - "@babel/parser": "npm:^7.23.0" - "@babel/traverse": "npm:^7.23.2" - "@babel/types": "npm:^7.23.0" + "@babel/generator": "npm:^7.24.4" + "@babel/parser": "npm:^7.24.4" + "@babel/traverse": "npm:^7.24.1" + "@babel/types": "npm:^7.24.0" "@storybook/csf": "npm:^0.1.4" "@storybook/types": "workspace:*" fs-extra: "npm:^11.1.0" recast: "npm:^0.23.5" ts-dedent: "npm:^2.0.0" - checksum: 10/c3d29f831bfc4a1d404a25301140e5f9bb364e080dd10429e72f3576a3581005788c3ce5c7c50fd1ba012a3dd0f469880250872a799ba202edf3e441e2af8b57 + checksum: 10/ff70e6f6613a353423d84d2aaa09bf9c14a8eae1d9711bd35883931886a5ce489b17de8dcf042bfd798f8746ce3cba26cbbeba88b2252cbcacb326b301c131ba languageName: node linkType: hard @@ -3096,7 +3692,7 @@ __metadata: "@storybook/docs-tools@file:../../../code/lib/docs-tools::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.7 - resolution: "@storybook/docs-tools@file:../../../code/lib/docs-tools#../../../code/lib/docs-tools::hash=f77653&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/docs-tools@file:../../../code/lib/docs-tools#../../../code/lib/docs-tools::hash=51a276&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" @@ -3106,7 +3702,7 @@ __metadata: assert: "npm:^2.1.0" doctrine: "npm:^3.0.0" lodash: "npm:^4.17.21" - checksum: 10/55545067636d51223718c53d31f6fb7b9724793c4da7a8034517f1eb152c59799bcbf1da4a24ceb30ace46b074ad4d543d66aa4cbdb438f4160dd2f9769c03f0 + checksum: 10/f6ed72e99322458ab189b667640d4612a3726db7b28fbcc25fa98ef89d20cb3377e776e3192866eca143823c2618406c0cda5dba1904ef461d79abebd4dcc5ab languageName: node linkType: hard @@ -3129,7 +3725,7 @@ __metadata: "@storybook/instrumenter@file:../../../code/lib/instrumenter::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.7 - resolution: "@storybook/instrumenter@file:../../../code/lib/instrumenter#../../../code/lib/instrumenter::hash=cdd3b4&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/instrumenter@file:../../../code/lib/instrumenter#../../../code/lib/instrumenter::hash=8415dd&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" @@ -3138,13 +3734,13 @@ __metadata: "@storybook/preview-api": "workspace:*" "@vitest/utils": "npm:^1.3.1" util: "npm:^0.12.4" - checksum: 10/040d6c9b45ba8a021deb572ae198e31d12a0bdce95846abaa6d603e7db6cfeb7c2e9f28d7fafdcc4b358a2c4e836436958fc92792388e6cc3adeffca978d9c46 + checksum: 10/d04c25681234640b52bc1cce890d985bb06e69053038dfb16f46e5da2b9a634517d903e8e04d943e340acd884dd0ac54c5c2b0bd53a645ce00d0b73d429fdf9e languageName: node linkType: hard "@storybook/manager-api@file:../../../code/lib/manager-api::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.7 - resolution: "@storybook/manager-api@file:../../../code/lib/manager-api#../../../code/lib/manager-api::hash=70ba3e&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/manager-api@file:../../../code/lib/manager-api#../../../code/lib/manager-api::hash=8452a7&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" @@ -3161,34 +3757,34 @@ __metadata: store2: "npm:^2.14.2" telejson: "npm:^7.2.0" ts-dedent: "npm:^2.0.0" - checksum: 10/c5d0635ce2e725ee4640801afc1ca21120eb5af398f0a466f1bdfdb87dbbdc7d97ce3aabe9dcc53ee0b210cc4631d23ec01960cc72d6f768ee6657e3f2966095 + checksum: 10/057ae6e615270b4ce7c3ae23ed22d5642f5c2bba1a6d1486ceba407ef09e03eae604ee59cdd1425a44023c19cf1a7106d95c77c07859ef801bcf74f900be31db languageName: node linkType: hard "@storybook/manager@file:../../../code/ui/manager::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.7 - resolution: "@storybook/manager@file:../../../code/ui/manager#../../../code/ui/manager::hash=a2a1d4&locator=portable-stories-nextjs%40workspace%3A." - checksum: 10/315ddc6341701e89d0fb17b42acd32b754aafcf05b37b96b1202b58a415bc0b822601fd8d2fbfd4eaac9f76bda89af4041c555374ae12c6abac60cc3d486f813 + resolution: "@storybook/manager@file:../../../code/ui/manager#../../../code/ui/manager::hash=443ad8&locator=portable-stories-nextjs%40workspace%3A." + checksum: 10/b2e3fbd4455622dea0a484aff7f8d702029450722d3edb333dc9a2e9dda5cbcf8c09e43528d094da87e6ebd786997d33f4fd2f6756d49debd884db1853e2a0b6 languageName: node linkType: hard "@storybook/nextjs@file:../../../code/frameworks/nextjs::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.7 - resolution: "@storybook/nextjs@file:../../../code/frameworks/nextjs#../../../code/frameworks/nextjs::hash=ecd7b3&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/nextjs@file:../../../code/frameworks/nextjs#../../../code/frameworks/nextjs::hash=4bedef&locator=portable-stories-nextjs%40workspace%3A." dependencies: - "@babel/core": "npm:^7.23.2" + "@babel/core": "npm:^7.24.4" "@babel/plugin-syntax-bigint": "npm:^7.8.3" "@babel/plugin-syntax-dynamic-import": "npm:^7.8.3" - "@babel/plugin-syntax-import-assertions": "npm:^7.22.5" - "@babel/plugin-transform-class-properties": "npm:^7.22.5" - "@babel/plugin-transform-export-namespace-from": "npm:^7.22.11" - "@babel/plugin-transform-numeric-separator": "npm:^7.22.11" - "@babel/plugin-transform-object-rest-spread": "npm:^7.22.15" - "@babel/plugin-transform-runtime": "npm:^7.23.2" - "@babel/preset-env": "npm:^7.23.2" - "@babel/preset-react": "npm:^7.22.15" - "@babel/preset-typescript": "npm:^7.23.2" - "@babel/runtime": "npm:^7.23.2" + "@babel/plugin-syntax-import-assertions": "npm:^7.24.1" + "@babel/plugin-transform-class-properties": "npm:^7.24.1" + "@babel/plugin-transform-export-namespace-from": "npm:^7.24.1" + "@babel/plugin-transform-numeric-separator": "npm:^7.24.1" + "@babel/plugin-transform-object-rest-spread": "npm:^7.24.1" + "@babel/plugin-transform-runtime": "npm:^7.24.3" + "@babel/preset-env": "npm:^7.24.4" + "@babel/preset-react": "npm:^7.24.1" + "@babel/preset-typescript": "npm:^7.24.1" + "@babel/runtime": "npm:^7.24.4" "@pmmmwh/react-refresh-webpack-plugin": "npm:^0.5.11" "@storybook/addon-actions": "workspace:*" "@storybook/builder-webpack5": "workspace:*" @@ -3234,20 +3830,20 @@ __metadata: optional: true webpack: optional: true - checksum: 10/891ddb3195346b52cd70bc7fa9abaf8c58eca580bd0d46414b1ae3ac9867792b3b806b7fc0f514b7e7ea777709fae57903463f9910fa4c4afff6da6b64487f31 + checksum: 10/bd08fb9ff000d4d03277dcadc2e242ece5113b9651d53b015921717da406a3c79d99cf160b2a3eb6fbc228dbb74d2f16c231cf0bc7344ebab7f331a47f6f6dce languageName: node linkType: hard "@storybook/node-logger@file:../../../code/lib/node-logger::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.7 - resolution: "@storybook/node-logger@file:../../../code/lib/node-logger#../../../code/lib/node-logger::hash=d94edd&locator=portable-stories-nextjs%40workspace%3A." - checksum: 10/1095793116385c3d2247349869659cd7147094c2a77efa4cd925a051a0d03742563d74dd7cbc578e1de9a06d0637247a06bcafa665c43cb2f482240f3bb178af + resolution: "@storybook/node-logger@file:../../../code/lib/node-logger#../../../code/lib/node-logger::hash=9c930a&locator=portable-stories-nextjs%40workspace%3A." + checksum: 10/d0ad16cb66cf3fc9ae142413aa39bf7d985af6713f34beefe76f2742aa34e35707bbcf63b7660006d2c8b66be07f6e8f4838bc3d4e9218ed32f00f0e4caf68ca languageName: node linkType: hard "@storybook/preset-react-webpack@file:../../../code/presets/react-webpack::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.7 - resolution: "@storybook/preset-react-webpack@file:../../../code/presets/react-webpack#../../../code/presets/react-webpack::hash=3d1792&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/preset-react-webpack@file:../../../code/presets/react-webpack#../../../code/presets/react-webpack::hash=b22678&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/core-webpack": "workspace:*" "@storybook/docs-tools": "workspace:*" @@ -3270,13 +3866,13 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 10/77a6a3b5ee2db73619642b72aa8976bf54cbc454c5aa781b6499bf55694b0f28fc4bed4f3e683d4e4964646ce793e5054a567d5d789ac5d5fd5d09794490b9a3 + checksum: 10/b3f09572a4497aabac169ff9f252b5d697351f112fc8ad47591546a504ed23ced549c60998073ebf924c868eb0a45c2e23ea8dca8a8803e066a989977416967f languageName: node linkType: hard "@storybook/preview-api@file:../../../code/lib/preview-api::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.7 - resolution: "@storybook/preview-api@file:../../../code/lib/preview-api#../../../code/lib/preview-api::hash=ad0fb2&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/preview-api@file:../../../code/lib/preview-api#../../../code/lib/preview-api::hash=c6c7d0&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" @@ -3292,14 +3888,14 @@ __metadata: tiny-invariant: "npm:^1.3.1" ts-dedent: "npm:^2.0.0" util-deprecate: "npm:^1.0.2" - checksum: 10/b6da482ccf3c0a502876d3b662a641dad102166cc55816d4f7a0e05b9a10907255f77db13a418dc272912a59136e0ddac4c518653aaa6ee7f79387fd4008c4e9 + checksum: 10/f3f4b245024f4ad1a55b932815ae0c7da9f75a83e98f4d2103d09a239a16f4378bbcb191cb67a0a882d2dd755be3133c6baf82fe446af7e165f1476c606966e5 languageName: node linkType: hard "@storybook/preview@file:../../../code/lib/preview::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.7 - resolution: "@storybook/preview@file:../../../code/lib/preview#../../../code/lib/preview::hash=edab9e&locator=portable-stories-nextjs%40workspace%3A." - checksum: 10/96674966bbea60cff6399f3bc44fdcb57d765fae1d55b6c1eab0dfadc3a4c36ee55a26ba04762dab5ab0f57e86c5ac45e57bf90fa5a41e716f75877b4b3b617a + resolution: "@storybook/preview@file:../../../code/lib/preview#../../../code/lib/preview::hash=97910c&locator=portable-stories-nextjs%40workspace%3A." + checksum: 10/765d33b8bbe183caf21dba08a93d96cfd4059b3267a7835464eeeffac1cab946ade3c4193185374b644c7abb630be54d36886a019fc94ffbaad82d8bb6f7eb4d languageName: node linkType: hard @@ -3323,11 +3919,11 @@ __metadata: "@storybook/react-dom-shim@file:../../../code/lib/react-dom-shim::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.7 - resolution: "@storybook/react-dom-shim@file:../../../code/lib/react-dom-shim#../../../code/lib/react-dom-shim::hash=3e505c&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/react-dom-shim@file:../../../code/lib/react-dom-shim#../../../code/lib/react-dom-shim::hash=f93b2f&locator=portable-stories-nextjs%40workspace%3A." peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: 10/983e0f5f9dc3449173eb42e8a98a65fbac1247cf8b2f102b3438eec53ff4fdce51c84b0eb7aa7a34f002600e84a17c632397290e9614a8bb8d363fa0cb68a01a + checksum: 10/8f3a8451ae416d1b006910553477b48929f397f777e7bad1997c9f3d6edc9b8fb1911f5f21c17d687ae50e01423f8010ad4c7c48d50b73bc59259b1babb0134e languageName: node linkType: hard @@ -3369,18 +3965,18 @@ __metadata: "@storybook/router@file:../../../code/lib/router::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.7 - resolution: "@storybook/router@file:../../../code/lib/router#../../../code/lib/router::hash=bd2ec4&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/router@file:../../../code/lib/router#../../../code/lib/router::hash=e80678&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" memoizerific: "npm:^1.11.3" qs: "npm:^6.10.0" - checksum: 10/226f011fb5068ed708650f9e6ff2cbf8fdf84dd7eee43dfdeb36c828aca0551a78f53f6e6fadf0c477a74b8f9c70a66c6c6ef637e5bf2684c4a8e46e74ba58ae + checksum: 10/93eb90aa2440b0a1b8533d3a51709d47f5cda489b604cf84926d382dd49286a1c9a1167f4b15c2764c9791033ea8cd288005541c72ef21b7a62dc33d89fbe151 languageName: node linkType: hard "@storybook/telemetry@file:../../../code/lib/telemetry::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.7 - resolution: "@storybook/telemetry@file:../../../code/lib/telemetry#../../../code/lib/telemetry::hash=9296ee&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/telemetry@file:../../../code/lib/telemetry#../../../code/lib/telemetry::hash=cf20f8&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-common": "workspace:*" @@ -3390,13 +3986,13 @@ __metadata: fetch-retry: "npm:^5.0.2" fs-extra: "npm:^11.1.0" read-pkg-up: "npm:^7.0.1" - checksum: 10/0c7be274ef3ee1108857d012827ef3c0ceec404f11c4e3a7c2cadd69245737d8e46678ea30c581d2b52dbf0980f9893d4521f96330b335b702d07224c837f068 + checksum: 10/0e5c4cffe47aa7d5066b17a6504821dcffde1540aaf99ef072c29e787a7a07d2ea5bb5b1aa222d83d0b4f174129ae22d52a579e58cc3cc36b4452eadf1b85001 languageName: node linkType: hard "@storybook/test@file:../../../code/lib/test::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.7 - resolution: "@storybook/test@file:../../../code/lib/test#../../../code/lib/test::hash=76eeb0&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/test@file:../../../code/lib/test#../../../code/lib/test::hash=865200&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" @@ -3408,13 +4004,13 @@ __metadata: "@vitest/expect": "npm:1.3.1" "@vitest/spy": "npm:^1.3.1" util: "npm:^0.12.4" - checksum: 10/739ea1586f3925a7e791f397e42f9ae2c1994df173e200a757700c2039af2eae7ee36c8aad163d69a46c716ccec73b7a6930f8c2aaa05429de45f2638bc76054 + checksum: 10/1adbfa7043d22c19bfc0a5899082752f622e2b25b15a564e4f71b753834d4300a3b9ec3964445cab62fb1224e78f0d1297a4a0865860f90039df297f2145984f languageName: node linkType: hard "@storybook/theming@file:../../../code/lib/theming::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.7 - resolution: "@storybook/theming@file:../../../code/lib/theming#../../../code/lib/theming::hash=444382&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/theming@file:../../../code/lib/theming#../../../code/lib/theming::hash=5ce8f7&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@emotion/use-insertion-effect-with-fallbacks": "npm:^1.0.1" "@storybook/client-logger": "workspace:*" @@ -3428,18 +4024,18 @@ __metadata: optional: true react-dom: optional: true - checksum: 10/fce2b08b28299dab7ebb21b2e66153bfa1fa592f55bdf40893f34618fa95e89839b3acd752a62065278148886bc144c272b330285f555ebfebeaceb996456f56 + checksum: 10/728b8c02ee168b384efcd376b9c90ce3e46ab301a7a58347669b2ac0ec71aba6f87238f1f5bbb4116d2f7d6c0a66abd514baddce2e30ffce61952852e94842ec languageName: node linkType: hard "@storybook/types@file:../../../code/lib/types::locator=portable-stories-nextjs%40workspace%3A.": version: 8.1.0-alpha.7 - resolution: "@storybook/types@file:../../../code/lib/types#../../../code/lib/types::hash=40be7e&locator=portable-stories-nextjs%40workspace%3A." + resolution: "@storybook/types@file:../../../code/lib/types#../../../code/lib/types::hash=23f842&locator=portable-stories-nextjs%40workspace%3A." dependencies: "@storybook/channels": "workspace:*" "@types/express": "npm:^4.7.0" file-system-cache: "npm:2.3.0" - checksum: 10/e05ca8e0de199b56817d274a3543fd2a18412cf574604c1dc2943dd77c1c5578e22b9704b005785922c32340fdb897cc536ccecbf5e02d61ef58d5d654fa97f2 + checksum: 10/27a50c8aa554c766a89eed019e7cb343777549015c19b8dd8bb84c2db72e2dc11ebacb55610173afd0fc97dc400f946b3f09ebd3e0123ee5cce014d3b37cebce languageName: node linkType: hard @@ -3622,6 +4218,13 @@ __metadata: languageName: node linkType: hard +"@types/diff@npm:^5.0.9": + version: 5.2.0 + resolution: "@types/diff@npm:5.2.0" + checksum: 10/e1d3e6e9fd9d5386496c8716dd89316288d139cd8159a064f886a079149d05d65289b7b725ce1e333d4e77ce8024e210c6e281e9875a636fc17b4c760c2cf85f + languageName: node + linkType: hard + "@types/doctrine@npm:^0.0.3": version: 0.0.3 resolution: "@types/doctrine@npm:0.0.3" @@ -4698,6 +5301,15 @@ __metadata: languageName: node linkType: hard +"aria-hidden@npm:^1.1.1": + version: 1.2.4 + resolution: "aria-hidden@npm:1.2.4" + dependencies: + tslib: "npm:^2.0.0" + checksum: 10/df4bc15423aaaba3729a7d40abcbf6d3fffa5b8fd5eb33d3ac8b7da0110c47552fca60d97f2e1edfbb68a27cae1da499f1c3896966efb3e26aac4e3b57e3cc8b + languageName: node + linkType: hard + "aria-query@npm:5.1.3": version: 5.1.3 resolution: "aria-query@npm:5.1.3" @@ -4868,39 +5480,39 @@ __metadata: languageName: node linkType: hard -"babel-plugin-polyfill-corejs2@npm:^0.4.8": - version: 0.4.8 - resolution: "babel-plugin-polyfill-corejs2@npm:0.4.8" +"babel-plugin-polyfill-corejs2@npm:^0.4.10": + version: 0.4.11 + resolution: "babel-plugin-polyfill-corejs2@npm:0.4.11" dependencies: "@babel/compat-data": "npm:^7.22.6" - "@babel/helper-define-polyfill-provider": "npm:^0.5.0" + "@babel/helper-define-polyfill-provider": "npm:^0.6.2" semver: "npm:^6.3.1" peerDependencies: "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0 - checksum: 10/6b5a79bdc1c43edf857fd3a82966b3c7ff4a90eee00ca8d663e0a98304d6e285a05759d64a4dbc16e04a2a5ea1f248673d8bf789711be5e694e368f19884887c + checksum: 10/9c79908bed61b9f52190f254e22d3dca6ce25769738642579ba8d23832f3f9414567a90d8367a31831fa45d9b9607ac43d8d07ed31167d8ca8cda22871f4c7a1 languageName: node linkType: hard -"babel-plugin-polyfill-corejs3@npm:^0.9.0": - version: 0.9.0 - resolution: "babel-plugin-polyfill-corejs3@npm:0.9.0" +"babel-plugin-polyfill-corejs3@npm:^0.10.1, babel-plugin-polyfill-corejs3@npm:^0.10.4": + version: 0.10.4 + resolution: "babel-plugin-polyfill-corejs3@npm:0.10.4" dependencies: - "@babel/helper-define-polyfill-provider": "npm:^0.5.0" - core-js-compat: "npm:^3.34.0" + "@babel/helper-define-polyfill-provider": "npm:^0.6.1" + core-js-compat: "npm:^3.36.1" peerDependencies: "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0 - checksum: 10/efdf9ba82e7848a2c66e0522adf10ac1646b16f271a9006b61a22f976b849de22a07c54c8826887114842ccd20cc9a4617b61e8e0789227a74378ab508e715cd + checksum: 10/a69ed5a95bb55e9b7ea37307d56113f7e24054d479c15de6d50fa61388b5334bed1f9b6414cde6c575fa910a4de4d1ab4f2d22720967d57c4fec9d1b8f61b355 languageName: node linkType: hard -"babel-plugin-polyfill-regenerator@npm:^0.5.5": - version: 0.5.5 - resolution: "babel-plugin-polyfill-regenerator@npm:0.5.5" +"babel-plugin-polyfill-regenerator@npm:^0.6.1": + version: 0.6.2 + resolution: "babel-plugin-polyfill-regenerator@npm:0.6.2" dependencies: - "@babel/helper-define-polyfill-provider": "npm:^0.5.0" + "@babel/helper-define-polyfill-provider": "npm:^0.6.2" peerDependencies: "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0 - checksum: 10/3a9b4828673b23cd648dcfb571eadcd9d3fadfca0361d0a7c6feeb5a30474e92faaa49f067a6e1c05e49b6a09812879992028ff3ef3446229ff132d6e1de7eb6 + checksum: 10/150233571072b6b3dfe946242da39cba8587b7f908d1c006f7545fc88b0e3c3018d445739beb61e7a75835f0c2751dbe884a94ff9b245ec42369d9267e0e1b3f languageName: node linkType: hard @@ -5167,7 +5779,7 @@ __metadata: languageName: node linkType: hard -"browserslist@npm:^4.21.10, browserslist@npm:^4.22.2, browserslist@npm:^4.22.3": +"browserslist@npm:^4.21.10, browserslist@npm:^4.22.2, browserslist@npm:^4.22.3, browserslist@npm:^4.23.0": version: 4.23.0 resolution: "browserslist@npm:4.23.0" dependencies: @@ -5768,7 +6380,7 @@ __metadata: languageName: node linkType: hard -"core-js-compat@npm:^3.31.0, core-js-compat@npm:^3.34.0": +"core-js-compat@npm:^3.31.0": version: 3.36.0 resolution: "core-js-compat@npm:3.36.0" dependencies: @@ -5777,6 +6389,15 @@ __metadata: languageName: node linkType: hard +"core-js-compat@npm:^3.36.1": + version: 3.37.0 + resolution: "core-js-compat@npm:3.37.0" + dependencies: + browserslist: "npm:^4.23.0" + checksum: 10/5f33d7ba45acc9ceb45544d844090edfd14e46a64c2424df24084347405182c1156588cc3a877fc580c005a0b13b8a1af26bb6c73fe73f22eede89b5483b482d + languageName: node + linkType: hard + "core-js-pure@npm:^3.23.3": version: 3.36.0 resolution: "core-js-pure@npm:3.36.0" @@ -6239,6 +6860,13 @@ __metadata: languageName: node linkType: hard +"detect-node-es@npm:^1.1.0": + version: 1.1.0 + resolution: "detect-node-es@npm:1.1.0" + checksum: 10/e46307d7264644975b71c104b9f028ed1d3d34b83a15b8a22373640ce5ea630e5640b1078b8ea15f202b54641da71e4aa7597093bd4b91f113db520a26a37449 + languageName: node + linkType: hard + "detect-package-manager@npm:^2.0.1": version: 2.0.1 resolution: "detect-package-manager@npm:2.0.1" @@ -6268,6 +6896,13 @@ __metadata: languageName: node linkType: hard +"diff@npm:^5.2.0": + version: 5.2.0 + resolution: "diff@npm:5.2.0" + checksum: 10/01b7b440f83a997350a988e9d2f558366c0f90f15be19f4aa7f1bb3109a4e153dfc3b9fbf78e14ea725717017407eeaa2271e3896374a0181e8f52445740846d + languageName: node + linkType: hard + "diffie-hellman@npm:^5.0.0": version: 5.0.3 resolution: "diffie-hellman@npm:5.0.3" @@ -7494,6 +8129,13 @@ __metadata: languageName: node linkType: hard +"get-nonce@npm:^1.0.0": + version: 1.0.1 + resolution: "get-nonce@npm:1.0.1" + checksum: 10/ad5104871d114a694ecc506a2d406e2331beccb961fe1e110dc25556b38bcdbf399a823a8a375976cd8889668156a9561e12ebe3fa6a4c6ba169c8466c2ff868 + languageName: node + linkType: hard + "get-npm-tarball-url@npm:^2.0.3": version: 2.1.0 resolution: "get-npm-tarball-url@npm:2.1.0" @@ -8117,6 +8759,15 @@ __metadata: languageName: node linkType: hard +"invariant@npm:^2.2.4": + version: 2.2.4 + resolution: "invariant@npm:2.2.4" + dependencies: + loose-envify: "npm:^1.0.0" + checksum: 10/cc3182d793aad82a8d1f0af697b462939cb46066ec48bbf1707c150ad5fad6406137e91a262022c269702e01621f35ef60269f6c0d7fd178487959809acdfb14 + languageName: node + linkType: hard + "ip-address@npm:^9.0.5": version: 9.0.5 resolution: "ip-address@npm:9.0.5" @@ -9432,7 +10083,7 @@ __metadata: languageName: node linkType: hard -"loose-envify@npm:^1.1.0, loose-envify@npm:^1.4.0": +"loose-envify@npm:^1.0.0, loose-envify@npm:^1.1.0, loose-envify@npm:^1.4.0": version: 1.4.0 resolution: "loose-envify@npm:1.4.0" dependencies: @@ -11209,6 +11860,58 @@ __metadata: languageName: node linkType: hard +"react-remove-scroll-bar@npm:^2.3.3": + version: 2.3.6 + resolution: "react-remove-scroll-bar@npm:2.3.6" + dependencies: + react-style-singleton: "npm:^2.2.1" + tslib: "npm:^2.0.0" + peerDependencies: + "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/5ab8eda61d5b10825447d11e9c824486c929351a471457c22452caa19b6898e18c3af6a46c3fa68010c713baed1eb9956106d068b4a1058bdcf97a1a9bbed734 + languageName: node + linkType: hard + +"react-remove-scroll@npm:2.5.5": + version: 2.5.5 + resolution: "react-remove-scroll@npm:2.5.5" + dependencies: + react-remove-scroll-bar: "npm:^2.3.3" + react-style-singleton: "npm:^2.2.1" + tslib: "npm:^2.1.0" + use-callback-ref: "npm:^1.3.0" + use-sidecar: "npm:^1.1.2" + peerDependencies: + "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/f0646ac384ce3852d1f41e30a9f9e251b11cf3b430d1d114c937c8fa7f90a895c06378d0d6b6ff0b2d00cbccf15e845921944fd6074ae67a0fb347a718106d88 + languageName: node + linkType: hard + +"react-style-singleton@npm:^2.2.1": + version: 2.2.1 + resolution: "react-style-singleton@npm:2.2.1" + dependencies: + get-nonce: "npm:^1.0.0" + invariant: "npm:^2.2.4" + tslib: "npm:^2.0.0" + peerDependencies: + "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/80c58fd6aac3594e351e2e7b048d8a5b09508adb21031a38b3c40911fe58295572eddc640d4b20a7be364842c8ed1120fe30097e22ea055316b375b88d4ff02a + languageName: node + linkType: hard + "react@npm:^16.8.0 || ^17.0.0 || ^18.0.0, react@npm:^18.2.0": version: 18.2.0 resolution: "react@npm:18.2.0" @@ -12682,7 +13385,7 @@ __metadata: languageName: node linkType: hard -"tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.0.3, tslib@npm:^2.4.0": +"tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.4.0": version: 2.6.2 resolution: "tslib@npm:2.6.2" checksum: 10/bd26c22d36736513980091a1e356378e8b662ded04204453d353a7f34a4c21ed0afc59b5f90719d4ba756e581a162ecbf93118dc9c6be5acf70aa309188166ca @@ -12996,6 +13699,37 @@ __metadata: languageName: node linkType: hard +"use-callback-ref@npm:^1.3.0": + version: 1.3.2 + resolution: "use-callback-ref@npm:1.3.2" + dependencies: + tslib: "npm:^2.0.0" + peerDependencies: + "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/3be76eae71b52ab233b4fde974eddeff72e67e6723100a0c0297df4b0d60daabedfa706ffb314d0a52645f2c1235e50fdbd53d99f374eb5df68c74d412e98a9b + languageName: node + linkType: hard + +"use-sidecar@npm:^1.1.2": + version: 1.1.2 + resolution: "use-sidecar@npm:1.1.2" + dependencies: + detect-node-es: "npm:^1.1.0" + tslib: "npm:^2.0.0" + peerDependencies: + "@types/react": ^16.9.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/ec99e31aefeb880f6dc4d02cb19a01d123364954f857811470ece32872f70d6c3eadbe4d073770706a9b7db6136f2a9fbf1bb803e07fbb21e936a47479281690 + languageName: node + linkType: hard + "util-deprecate@npm:^1.0.1, util-deprecate@npm:^1.0.2, util-deprecate@npm:~1.0.1": version: 1.0.2 resolution: "util-deprecate@npm:1.0.2" diff --git a/test-storybooks/portable-stories-kitchen-sink/react/yarn.lock b/test-storybooks/portable-stories-kitchen-sink/react/yarn.lock index e56c0e31080a..0629b1e9f6ed 100644 --- a/test-storybooks/portable-stories-kitchen-sink/react/yarn.lock +++ b/test-storybooks/portable-stories-kitchen-sink/react/yarn.lock @@ -50,14 +50,31 @@ __metadata: languageName: node linkType: hard -"@babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.23.3, @babel/compat-data@npm:^7.23.5": +"@babel/code-frame@npm:^7.24.1, @babel/code-frame@npm:^7.24.2": + version: 7.24.2 + resolution: "@babel/code-frame@npm:7.24.2" + dependencies: + "@babel/highlight": "npm:^7.24.2" + picocolors: "npm:^1.0.0" + checksum: 10/7db8f5b36ffa3f47a37f58f61e3d130b9ecad21961f3eede7e2a4ac2c7e4a5efb6e9d03a810c669bc986096831b6c0dfc2c3082673d93351b82359c1b03e0590 + languageName: node + linkType: hard + +"@babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.23.5": version: 7.23.5 resolution: "@babel/compat-data@npm:7.23.5" checksum: 10/088f14f646ecbddd5ef89f120a60a1b3389a50a9705d44603dca77662707d0175a5e0e0da3943c3298f1907a4ab871468656fbbf74bb7842cd8b0686b2c19736 languageName: node linkType: hard -"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3, @babel/core@npm:^7.18.9, @babel/core@npm:^7.23.0, @babel/core@npm:^7.23.2, @babel/core@npm:^7.23.5, @babel/core@npm:^7.23.9": +"@babel/compat-data@npm:^7.24.4": + version: 7.24.4 + resolution: "@babel/compat-data@npm:7.24.4" + checksum: 10/e51faec0ac8259f03cc5029d2b4a944b4fee44cb5188c11530769d5beb81f384d031dba951febc3e33dbb48ceb8045b1184f5c1ac4c5f86ab1f5e951e9aaf7af + languageName: node + linkType: hard + +"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3, @babel/core@npm:^7.18.9, @babel/core@npm:^7.23.0, @babel/core@npm:^7.23.5, @babel/core@npm:^7.23.9": version: 7.23.9 resolution: "@babel/core@npm:7.23.9" dependencies: @@ -80,7 +97,30 @@ __metadata: languageName: node linkType: hard -"@babel/generator@npm:^7.23.0, @babel/generator@npm:^7.23.6, @babel/generator@npm:^7.7.2": +"@babel/core@npm:^7.24.4": + version: 7.24.4 + resolution: "@babel/core@npm:7.24.4" + dependencies: + "@ampproject/remapping": "npm:^2.2.0" + "@babel/code-frame": "npm:^7.24.2" + "@babel/generator": "npm:^7.24.4" + "@babel/helper-compilation-targets": "npm:^7.23.6" + "@babel/helper-module-transforms": "npm:^7.23.3" + "@babel/helpers": "npm:^7.24.4" + "@babel/parser": "npm:^7.24.4" + "@babel/template": "npm:^7.24.0" + "@babel/traverse": "npm:^7.24.1" + "@babel/types": "npm:^7.24.0" + convert-source-map: "npm:^2.0.0" + debug: "npm:^4.1.0" + gensync: "npm:^1.0.0-beta.2" + json5: "npm:^2.2.3" + semver: "npm:^6.3.1" + checksum: 10/1e049f8df26be0fe5be36173fd7c33dfb004eeeec28152fea83c90e71784f9a6f2237296f43a2ee7d9041e2a33a05f43da48ce2d4e0cd473a682328ca07ce7e0 + languageName: node + linkType: hard + +"@babel/generator@npm:^7.23.6, @babel/generator@npm:^7.7.2": version: 7.23.6 resolution: "@babel/generator@npm:7.23.6" dependencies: @@ -92,6 +132,18 @@ __metadata: languageName: node linkType: hard +"@babel/generator@npm:^7.24.1, @babel/generator@npm:^7.24.4": + version: 7.24.4 + resolution: "@babel/generator@npm:7.24.4" + dependencies: + "@babel/types": "npm:^7.24.0" + "@jridgewell/gen-mapping": "npm:^0.3.5" + "@jridgewell/trace-mapping": "npm:^0.3.25" + jsesc: "npm:^2.5.1" + checksum: 10/69e1772dcf8f95baec951f422cca091d59a3f29b5eedc989ad87f7262289b94625983f6fe654302ca17aae0a32f9232332b83fcc85533311d6267b09c58b1061 + languageName: node + linkType: hard + "@babel/helper-annotate-as-pure@npm:^7.22.5": version: 7.22.5 resolution: "@babel/helper-annotate-as-pure@npm:7.22.5" @@ -110,7 +162,7 @@ __metadata: languageName: node linkType: hard -"@babel/helper-compilation-targets@npm:^7.22.15, @babel/helper-compilation-targets@npm:^7.22.6, @babel/helper-compilation-targets@npm:^7.23.6": +"@babel/helper-compilation-targets@npm:^7.22.6, @babel/helper-compilation-targets@npm:^7.23.6": version: 7.23.6 resolution: "@babel/helper-compilation-targets@npm:7.23.6" dependencies: @@ -142,6 +194,25 @@ __metadata: languageName: node linkType: hard +"@babel/helper-create-class-features-plugin@npm:^7.24.1, @babel/helper-create-class-features-plugin@npm:^7.24.4": + version: 7.24.4 + resolution: "@babel/helper-create-class-features-plugin@npm:7.24.4" + dependencies: + "@babel/helper-annotate-as-pure": "npm:^7.22.5" + "@babel/helper-environment-visitor": "npm:^7.22.20" + "@babel/helper-function-name": "npm:^7.23.0" + "@babel/helper-member-expression-to-functions": "npm:^7.23.0" + "@babel/helper-optimise-call-expression": "npm:^7.22.5" + "@babel/helper-replace-supers": "npm:^7.24.1" + "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5" + "@babel/helper-split-export-declaration": "npm:^7.22.6" + semver: "npm:^6.3.1" + peerDependencies: + "@babel/core": ^7.0.0 + checksum: 10/86153719d98e4402f92f24d6b1be94e6b59c0236a6cc36b173a570a64b5156dbc2f16ccfe3c8485dc795524ca88acca65b14863be63049586668c45567f2acd4 + languageName: node + linkType: hard + "@babel/helper-create-regexp-features-plugin@npm:^7.18.6, @babel/helper-create-regexp-features-plugin@npm:^7.22.15, @babel/helper-create-regexp-features-plugin@npm:^7.22.5": version: 7.22.15 resolution: "@babel/helper-create-regexp-features-plugin@npm:7.22.15" @@ -155,9 +226,9 @@ __metadata: languageName: node linkType: hard -"@babel/helper-define-polyfill-provider@npm:^0.5.0": - version: 0.5.0 - resolution: "@babel/helper-define-polyfill-provider@npm:0.5.0" +"@babel/helper-define-polyfill-provider@npm:^0.6.1, @babel/helper-define-polyfill-provider@npm:^0.6.2": + version: 0.6.2 + resolution: "@babel/helper-define-polyfill-provider@npm:0.6.2" dependencies: "@babel/helper-compilation-targets": "npm:^7.22.6" "@babel/helper-plugin-utils": "npm:^7.22.5" @@ -166,7 +237,7 @@ __metadata: resolve: "npm:^1.14.2" peerDependencies: "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0 - checksum: 10/f849e816ec4b182a3e8fa8e09ff016f88bb95259cd6b2190b815c48f83c3d3b68e973a8ec72acc5086bfe93705cbd46ec089c06476421d858597780e42235a03 + checksum: 10/bb32ec12024d3f16e70641bc125d2534a97edbfdabbc9f69001ec9c4ce46f877c7a224c566aa6c8c510c3b0def2e43dc4433bf6a40896ba5ce0cef4ea5ccbcff languageName: node linkType: hard @@ -214,6 +285,15 @@ __metadata: languageName: node linkType: hard +"@babel/helper-module-imports@npm:^7.24.1": + version: 7.24.3 + resolution: "@babel/helper-module-imports@npm:7.24.3" + dependencies: + "@babel/types": "npm:^7.24.0" + checksum: 10/42fe124130b78eeb4bb6af8c094aa749712be0f4606f46716ce74bc18a5ea91c918c547c8bb2307a2e4b33f163e4ad2cb6a7b45f80448e624eae45b597ea3499 + languageName: node + linkType: hard + "@babel/helper-module-transforms@npm:^7.23.3": version: 7.23.3 resolution: "@babel/helper-module-transforms@npm:7.23.3" @@ -245,6 +325,13 @@ __metadata: languageName: node linkType: hard +"@babel/helper-plugin-utils@npm:^7.24.0": + version: 7.24.0 + resolution: "@babel/helper-plugin-utils@npm:7.24.0" + checksum: 10/dc8c7af321baf7653d93315beffee1790eb2c464b4f529273a24c8743a3f3095bf3f2d11828cb2c52d56282ef43a4bdc67a79c9ab8dd845e35d01871f3f28a0e + languageName: node + linkType: hard + "@babel/helper-remap-async-to-generator@npm:^7.22.20": version: 7.22.20 resolution: "@babel/helper-remap-async-to-generator@npm:7.22.20" @@ -271,6 +358,19 @@ __metadata: languageName: node linkType: hard +"@babel/helper-replace-supers@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/helper-replace-supers@npm:7.24.1" + dependencies: + "@babel/helper-environment-visitor": "npm:^7.22.20" + "@babel/helper-member-expression-to-functions": "npm:^7.23.0" + "@babel/helper-optimise-call-expression": "npm:^7.22.5" + peerDependencies: + "@babel/core": ^7.0.0 + checksum: 10/1103b28ce0cc7fba903c21bc78035c696ff191bdbbe83c20c37030a2e10ae6254924556d942cdf8c44c48ba606a8266fdb105e6bb10945de9285f79cb1905df1 + languageName: node + linkType: hard + "@babel/helper-simple-access@npm:^7.22.5": version: 7.22.5 resolution: "@babel/helper-simple-access@npm:7.22.5" @@ -341,6 +441,17 @@ __metadata: languageName: node linkType: hard +"@babel/helpers@npm:^7.24.4": + version: 7.24.4 + resolution: "@babel/helpers@npm:7.24.4" + dependencies: + "@babel/template": "npm:^7.24.0" + "@babel/traverse": "npm:^7.24.1" + "@babel/types": "npm:^7.24.0" + checksum: 10/54a9d0f86f2803fcc216cfa23b66b871ea0fa0a892af1c9a79075872c2437de71afbb150ed8216f30e00b19a0b9c5c9d5845173d170e1ebfbbf8887839b89dde + languageName: node + linkType: hard + "@babel/highlight@npm:^7.23.4": version: 7.23.4 resolution: "@babel/highlight@npm:7.23.4" @@ -352,6 +463,18 @@ __metadata: languageName: node linkType: hard +"@babel/highlight@npm:^7.24.2": + version: 7.24.2 + resolution: "@babel/highlight@npm:7.24.2" + dependencies: + "@babel/helper-validator-identifier": "npm:^7.22.20" + chalk: "npm:^2.4.2" + js-tokens: "npm:^4.0.0" + picocolors: "npm:^1.0.0" + checksum: 10/4555124235f34403bb28f55b1de58edf598491cc181c75f8afc8fe529903cb598cd52fe3bf2faab9bc1f45c299681ef0e44eea7a848bb85c500c5a4fe13f54f6 + languageName: node + linkType: hard + "@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.23.0, @babel/parser@npm:^7.23.9": version: 7.23.9 resolution: "@babel/parser@npm:7.23.9" @@ -361,39 +484,60 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.23.3" +"@babel/parser@npm:^7.24.0, @babel/parser@npm:^7.24.1, @babel/parser@npm:^7.24.4": + version: 7.24.4 + resolution: "@babel/parser@npm:7.24.4" + bin: + parser: ./bin/babel-parser.js + checksum: 10/3742cc5068036287e6395269dce5a2735e6349cdc8d4b53297c75f98c580d7e1c8cb43235623999d151f2ef975d677dbc2c2357573a1855caa71c271bf3046c9 + languageName: node + linkType: hard + +"@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:^7.24.4": + version: 7.24.4 + resolution: "@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:7.24.4" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-environment-visitor": "npm:^7.22.20" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0 - checksum: 10/ddbaf2c396b7780f15e80ee01d6dd790db076985f3dfeb6527d1a8d4cacf370e49250396a3aa005b2c40233cac214a106232f83703d5e8491848bde273938232 + checksum: 10/1439e2ceec512b72f05f036503bf2c31e807d1b75ae22cf2676145e9f20740960a1c9575ea3065c6fb9f44f6b46163aab76eac513694ffa10de674e3cdd6219e languageName: node linkType: hard -"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:7.23.3" +"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" + peerDependencies: + "@babel/core": ^7.0.0 + checksum: 10/ec5fddc8db6de0e0082a883f21141d6f4f9f9f0bc190d662a732b5e9a506aae5d7d2337049a1bf055d7cb7add6f128036db6d4f47de5e9ac1be29e043c8b7ca8 + languageName: node + linkType: hard + +"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:7.24.1" + dependencies: + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5" - "@babel/plugin-transform-optional-chaining": "npm:^7.23.3" + "@babel/plugin-transform-optional-chaining": "npm:^7.24.1" peerDependencies: "@babel/core": ^7.13.0 - checksum: 10/434b9d710ae856fa1a456678cc304fbc93915af86d581ee316e077af746a709a741ea39d7e1d4f5b98861b629cc7e87f002d3138f5e836775632466d4c74aef2 + checksum: 10/e18235463e716ac2443938aaec3c18b40c417a1746fba0fa4c26cf4d71326b76ef26c002081ab1b445abfae98e063d561519aa55672dddc1ef80b3940211ffbb languageName: node linkType: hard -"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:^7.23.7": - version: 7.23.7 - resolution: "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:7.23.7" +"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:7.24.1" dependencies: "@babel/helper-environment-visitor": "npm:^7.22.20" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0 - checksum: 10/3b0c9554cd0048e6e7341d7b92f29d400dbc6a5a4fc2f86dbed881d32e02ece9b55bc520387bae2eac22a5ab38a0b205c29b52b181294d99b4dd75e27309b548 + checksum: 10/3483f329bb099b438d05e5e206229ddbc1703972a69ba0240a796b5477369930b0ab2e7f6c9539ecad2cea8b0c08fa65498778b92cf87ad3d156f613de1fd2fa languageName: node linkType: hard @@ -483,25 +627,25 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-syntax-import-assertions@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-syntax-import-assertions@npm:7.23.3" +"@babel/plugin-syntax-import-assertions@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-syntax-import-assertions@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/883e6b35b2da205138caab832d54505271a3fee3fc1e8dc0894502434fc2b5d517cbe93bbfbfef8068a0fb6ec48ebc9eef3f605200a489065ba43d8cddc1c9a7 + checksum: 10/2a463928a63b62052e9fb8f8b0018aa11a926e94f32c168260ae012afe864875c6176c6eb361e13f300542c31316dad791b08a5b8ed92436a3095c7a0e4fce65 languageName: node linkType: hard -"@babel/plugin-syntax-import-attributes@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-syntax-import-attributes@npm:7.23.3" +"@babel/plugin-syntax-import-attributes@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-syntax-import-attributes@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/9aed7661ffb920ca75df9f494757466ca92744e43072e0848d87fa4aa61a3f2ee5a22198ac1959856c036434b5614a8f46f1fb70298835dbe28220cdd1d4c11e + checksum: 10/87c8aa4a5ef931313f956871b27f2c051556f627b97ed21e9a5890ca4906b222d89062a956cde459816f5e0dec185ff128d7243d3fdc389504522acb88f0464e languageName: node linkType: hard @@ -649,67 +793,67 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-arrow-functions@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-arrow-functions@npm:7.23.3" +"@babel/plugin-transform-arrow-functions@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-arrow-functions@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/1e99118176e5366c2636064d09477016ab5272b2a92e78b8edb571d20bc3eaa881789a905b20042942c3c2d04efc530726cf703f937226db5ebc495f5d067e66 + checksum: 10/58f9aa9b0de8382f8cfa3f1f1d40b69d98cd2f52340e2391733d0af745fdddda650ba392e509bc056157c880a2f52834a38ab2c5aa5569af8c61bb6ecbf45f34 languageName: node linkType: hard -"@babel/plugin-transform-async-generator-functions@npm:^7.23.9": - version: 7.23.9 - resolution: "@babel/plugin-transform-async-generator-functions@npm:7.23.9" +"@babel/plugin-transform-async-generator-functions@npm:^7.24.3": + version: 7.24.3 + resolution: "@babel/plugin-transform-async-generator-functions@npm:7.24.3" dependencies: "@babel/helper-environment-visitor": "npm:^7.22.20" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/helper-remap-async-to-generator": "npm:^7.22.20" "@babel/plugin-syntax-async-generators": "npm:^7.8.4" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/d402494087a6b803803eb5ab46b837aab100a04c4c5148e38bfa943ea1bbfc1ecfb340f1ced68972564312d3580f550c125f452372e77607a558fbbaf98c31c0 + checksum: 10/4ccc3755a3d51544cd43575db2c5c2ef42cdcd35bd5940d13cdf23f04c75496290e79ea585a62427ec6bd508a1bffb329e01556cd1114be9b38ae4254935cd19 languageName: node linkType: hard -"@babel/plugin-transform-async-to-generator@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-async-to-generator@npm:7.23.3" +"@babel/plugin-transform-async-to-generator@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-async-to-generator@npm:7.24.1" dependencies: - "@babel/helper-module-imports": "npm:^7.22.15" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-module-imports": "npm:^7.24.1" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/helper-remap-async-to-generator": "npm:^7.22.20" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/2e9d9795d4b3b3d8090332104e37061c677f29a1ce65bcbda4099a32d243e5d9520270a44bbabf0fb1fb40d463bd937685b1a1042e646979086c546d55319c3c + checksum: 10/429004a6596aa5c9e707b604156f49a146f8d029e31a3152b1649c0b56425264fda5fd38e5db1ddaeb33c3fe45c97dc8078d7abfafe3542a979b49f229801135 languageName: node linkType: hard -"@babel/plugin-transform-block-scoped-functions@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-block-scoped-functions@npm:7.23.3" +"@babel/plugin-transform-block-scoped-functions@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-block-scoped-functions@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/e63b16d94ee5f4d917e669da3db5ea53d1e7e79141a2ec873c1e644678cdafe98daa556d0d359963c827863d6b3665d23d4938a94a4c5053a1619c4ebd01d020 + checksum: 10/d8e18bd57b156da1cd4d3c1780ab9ea03afed56c6824ca8e6e74f67959d7989a0e953ec370fe9b417759314f2eef30c8c437395ce63ada2e26c2f469e4704f82 languageName: node linkType: hard -"@babel/plugin-transform-block-scoping@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-block-scoping@npm:7.23.4" +"@babel/plugin-transform-block-scoping@npm:^7.24.4": + version: 7.24.4 + resolution: "@babel/plugin-transform-block-scoping@npm:7.24.4" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/bbb965a3acdfb03559806d149efbd194ac9c983b260581a60efcb15eb9fbe20e3054667970800146d867446db1c1398f8e4ee87f4454233e49b8f8ce947bd99b + checksum: 10/4093fa109cd256e8ad0b26e3ffa67ec6dac4078a1a24b7755bed63e650cf938b2a315e01696c35b221db1a37606f93cb82696c8d1bf563c2a9845620e551736e languageName: node linkType: hard -"@babel/plugin-transform-class-properties@npm:^7.22.5, @babel/plugin-transform-class-properties@npm:^7.23.3": +"@babel/plugin-transform-class-properties@npm:^7.22.5": version: 7.23.3 resolution: "@babel/plugin-transform-class-properties@npm:7.23.3" dependencies: @@ -721,116 +865,128 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-class-static-block@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-class-static-block@npm:7.23.4" +"@babel/plugin-transform-class-properties@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-class-properties@npm:7.24.1" dependencies: - "@babel/helper-create-class-features-plugin": "npm:^7.22.15" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-create-class-features-plugin": "npm:^7.24.1" + "@babel/helper-plugin-utils": "npm:^7.24.0" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10/95779e9eef0c0638b9631c297d48aee53ffdbb2b1b5221bf40d7eccd566a8e34f859ff3571f8f20b9159b67f1bff7d7dc81da191c15d69fbae5a645197eae7e0 + languageName: node + linkType: hard + +"@babel/plugin-transform-class-static-block@npm:^7.24.4": + version: 7.24.4 + resolution: "@babel/plugin-transform-class-static-block@npm:7.24.4" + dependencies: + "@babel/helper-create-class-features-plugin": "npm:^7.24.4" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/plugin-syntax-class-static-block": "npm:^7.14.5" peerDependencies: "@babel/core": ^7.12.0 - checksum: 10/c8bfaba19a674fc2eb54edad71e958647360474e3163e8226f1acd63e4e2dbec32a171a0af596c1dc5359aee402cc120fea7abd1fb0e0354b6527f0fc9e8aa1e + checksum: 10/3b1db3308b57ba21d47772a9f183804234c23fd64c9ca40915d2d65c5dc7a48b49a6de16b8b90b7a354eacbb51232a862f0fca3dbd23e27d34641f511decddab languageName: node linkType: hard -"@babel/plugin-transform-classes@npm:^7.23.8": - version: 7.23.8 - resolution: "@babel/plugin-transform-classes@npm:7.23.8" +"@babel/plugin-transform-classes@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-classes@npm:7.24.1" dependencies: "@babel/helper-annotate-as-pure": "npm:^7.22.5" "@babel/helper-compilation-targets": "npm:^7.23.6" "@babel/helper-environment-visitor": "npm:^7.22.20" "@babel/helper-function-name": "npm:^7.23.0" - "@babel/helper-plugin-utils": "npm:^7.22.5" - "@babel/helper-replace-supers": "npm:^7.22.20" + "@babel/helper-plugin-utils": "npm:^7.24.0" + "@babel/helper-replace-supers": "npm:^7.24.1" "@babel/helper-split-export-declaration": "npm:^7.22.6" globals: "npm:^11.1.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/4bb4b19e7a39871c4414fb44fc5f2cc47c78f993b74c43238dfb99c9dac2d15cb99b43f8a3d42747580e1807d2b8f5e13ce7e95e593fd839bd176aa090bf9a23 + checksum: 10/eb7f4a3d852cfa20f4efd299929c564bd2b45106ac1cf4ac8b0c87baf078d4a15c39b8a21bbb01879c1922acb9baaf3c9b150486e18d84b30129e9671639793d languageName: node linkType: hard -"@babel/plugin-transform-computed-properties@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-computed-properties@npm:7.23.3" +"@babel/plugin-transform-computed-properties@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-computed-properties@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" - "@babel/template": "npm:^7.22.15" + "@babel/helper-plugin-utils": "npm:^7.24.0" + "@babel/template": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/e75593e02c5ea473c17839e3c9d597ce3697bf039b66afe9a4d06d086a87fb3d95850b4174476897afc351dc1b46a9ec3165ee6e8fbad3732c0d65f676f855ad + checksum: 10/62bbfe1bd508517d96ba6909e68b1adb9dfd24ea61af1f4b0aa909bfc5e476044afe9c55b10ef74508fd147aa665e818df67ece834d164a9fd69b80c9ede3875 languageName: node linkType: hard -"@babel/plugin-transform-destructuring@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-destructuring@npm:7.23.3" +"@babel/plugin-transform-destructuring@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-destructuring@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/5abd93718af5a61f8f6a97d2ccac9139499752dd5b2c533d7556fb02947ae01b2f51d4c4f5e64df569e8783d3743270018eb1fa979c43edec7dd1377acf107ed + checksum: 10/03d9a81cd9eeb24d48e207be536d460d6ad228238ac70da9b7ad4bae799847bb3be0aecfa4ea6223752f3a8d4ada3a58cd9a0f8fc70c01fdfc87ad0618f897d3 languageName: node linkType: hard -"@babel/plugin-transform-dotall-regex@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-dotall-regex@npm:7.23.3" +"@babel/plugin-transform-dotall-regex@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-dotall-regex@npm:7.24.1" dependencies: "@babel/helper-create-regexp-features-plugin": "npm:^7.22.15" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/a2dbbf7f1ea16a97948c37df925cb364337668c41a3948b8d91453f140507bd8a3429030c7ce66d09c299987b27746c19a2dd18b6f17dcb474854b14fd9159a3 + checksum: 10/7f623d25b6f213b94ebc1754e9e31c1077c8e288626d8b7bfa76a97b067ce80ddcd0ede402a546706c65002c0ccf45cd5ec621511c2668eed31ebcabe8391d35 languageName: node linkType: hard -"@babel/plugin-transform-duplicate-keys@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-duplicate-keys@npm:7.23.3" +"@babel/plugin-transform-duplicate-keys@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-duplicate-keys@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/c2a21c34dc0839590cd945192cbc46fde541a27e140c48fe1808315934664cdbf18db64889e23c4eeb6bad9d3e049482efdca91d29de5734ffc887c4fbabaa16 + checksum: 10/de600a958ad146fc8aca71fd2dfa5ebcfdb97df4eaa530fc9a4b0d28d85442ddb9b7039f260b396785211e88c6817125a94c183459763c363847e8c84f318ff0 languageName: node linkType: hard -"@babel/plugin-transform-dynamic-import@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-dynamic-import@npm:7.23.4" +"@babel/plugin-transform-dynamic-import@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-dynamic-import@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/plugin-syntax-dynamic-import": "npm:^7.8.3" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/57a722604c430d9f3dacff22001a5f31250e34785d4969527a2ae9160fa86858d0892c5b9ff7a06a04076f8c76c9e6862e0541aadca9c057849961343aab0845 + checksum: 10/59fc561ee40b1a69f969c12c6c5fac206226d6642213985a569dd0f99f8e41c0f4eaedebd36936c255444a8335079842274c42a975a433beadb436d4c5abb79b languageName: node linkType: hard -"@babel/plugin-transform-exponentiation-operator@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-exponentiation-operator@npm:7.23.3" +"@babel/plugin-transform-exponentiation-operator@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-exponentiation-operator@npm:7.24.1" dependencies: "@babel/helper-builder-binary-assignment-operator-visitor": "npm:^7.22.15" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/00d05ab14ad0f299160fcf9d8f55a1cc1b740e012ab0b5ce30207d2365f091665115557af7d989cd6260d075a252d9e4283de5f2b247dfbbe0e42ae586e6bf66 + checksum: 10/f90841fe1a1e9f680b4209121d3e2992f923e85efcd322b26e5901c180ef44ff727fb89790803a23fac49af34c1ce2e480018027c22b4573b615512ac5b6fc50 languageName: node linkType: hard -"@babel/plugin-transform-export-namespace-from@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-export-namespace-from@npm:7.23.4" +"@babel/plugin-transform-export-namespace-from@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-export-namespace-from@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/plugin-syntax-export-namespace-from": "npm:^7.8.3" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/9f770a81bfd03b48d6ba155d452946fd56d6ffe5b7d871e9ec2a0b15e0f424273b632f3ed61838b90015b25bbda988896b7a46c7d964fbf8f6feb5820b309f93 + checksum: 10/bc710ac231919df9555331885748385c11c5e695d7271824fe56fba51dd637d48d3e5cd52e1c69f2b1a384fbbb41552572bc1ca3a2285ee29571f002e9bb2421 languageName: node linkType: hard @@ -846,86 +1002,86 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-for-of@npm:^7.23.6": - version: 7.23.6 - resolution: "@babel/plugin-transform-for-of@npm:7.23.6" +"@babel/plugin-transform-for-of@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-for-of@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/b84ef1f26a2db316237ae6d10fa7c22c70ac808ed0b8e095a8ecf9101551636cbb026bee9fb95a0a7944f3b8278ff9636a9088cb4a4ac5b84830a13829242735 + checksum: 10/befd0908c3f6b31f9fa9363a3c112d25eaa0bc4a79cfad1f0a8bb5010937188b043a44fb23443bc8ffbcc40c015bb25f80e4cc585ce5cc580708e2d56e76fe37 languageName: node linkType: hard -"@babel/plugin-transform-function-name@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-function-name@npm:7.23.3" +"@babel/plugin-transform-function-name@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-function-name@npm:7.24.1" dependencies: - "@babel/helper-compilation-targets": "npm:^7.22.15" + "@babel/helper-compilation-targets": "npm:^7.23.6" "@babel/helper-function-name": "npm:^7.23.0" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/355c6dbe07c919575ad42b2f7e020f320866d72f8b79181a16f8e0cd424a2c761d979f03f47d583d9471b55dcd68a8a9d829b58e1eebcd572145b934b48975a6 + checksum: 10/31eb3c75297dda7265f78eba627c446f2324e30ec0124a645ccc3e9f341254aaa40d6787bd62b2280d77c0a5c9fbfce1da2c200ef7c7f8e0a1b16a8eb3644c6f languageName: node linkType: hard -"@babel/plugin-transform-json-strings@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-json-strings@npm:7.23.4" +"@babel/plugin-transform-json-strings@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-json-strings@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/plugin-syntax-json-strings": "npm:^7.8.3" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/f9019820233cf8955d8ba346df709a0683c120fe86a24ed1c9f003f2db51197b979efc88f010d558a12e1491210fc195a43cd1c7fee5e23b92da38f793a875de + checksum: 10/f42302d42fc81ac00d14e9e5d80405eb80477d7f9039d7208e712d6bcd486a4e3b32fdfa07b5f027d6c773723d8168193ee880f93b0e430c828e45f104fb82a4 languageName: node linkType: hard -"@babel/plugin-transform-literals@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-literals@npm:7.23.3" +"@babel/plugin-transform-literals@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-literals@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/519a544cd58586b9001c4c9b18da25a62f17d23c48600ff7a685d75ca9eb18d2c5e8f5476f067f0a8f1fea2a31107eff950b9864833061e6076dcc4bdc3e71ed + checksum: 10/2df94e9478571852483aca7588419e574d76bde97583e78551c286f498e01321e7dbb1d0ef67bee16e8f950688f79688809cfde370c5c4b84c14d841a3ef217a languageName: node linkType: hard -"@babel/plugin-transform-logical-assignment-operators@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-logical-assignment-operators@npm:7.23.4" +"@babel/plugin-transform-logical-assignment-operators@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-logical-assignment-operators@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/plugin-syntax-logical-assignment-operators": "npm:^7.10.4" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/2ae1dc9b4ff3bf61a990ff3accdecb2afe3a0ca649b3e74c010078d1cdf29ea490f50ac0a905306a2bcf9ac177889a39ac79bdcc3a0fdf220b3b75fac18d39b5 + checksum: 10/895f2290adf457cbf327428bdb4fb90882a38a22f729bcf0629e8ad66b9b616d2721fbef488ac00411b647489d1dda1d20171bb3772d0796bb7ef5ecf057808a languageName: node linkType: hard -"@babel/plugin-transform-member-expression-literals@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-member-expression-literals@npm:7.23.3" +"@babel/plugin-transform-member-expression-literals@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-member-expression-literals@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/95cec13c36d447c5aa6b8e4c778b897eeba66dcb675edef01e0d2afcec9e8cb9726baf4f81b4bbae7a782595aed72e6a0d44ffb773272c3ca180fada99bf92db + checksum: 10/4ea641cc14a615f9084e45ad2319f95e2fee01c77ec9789685e7e11a6c286238a426a98f9c1ed91568a047d8ac834393e06e8c82d1ff01764b7aa61bee8e9023 languageName: node linkType: hard -"@babel/plugin-transform-modules-amd@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-modules-amd@npm:7.23.3" +"@babel/plugin-transform-modules-amd@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-modules-amd@npm:7.24.1" dependencies: "@babel/helper-module-transforms": "npm:^7.23.3" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/48c87dee2c7dae8ed40d16901f32c9e58be4ef87bf2c3985b51dd2e78e82081f3bad0a39ee5cf6e8909e13e954e2b4bedef0a8141922f281ed833ddb59ed9be2 + checksum: 10/5a324f7c630cf0be1f09098a3a36248c2521622f2c7ea1a44a5980f54b718f5e0dd4af92a337f4b445a8824c8d533853ebea7c16de829b8a7bc8bcca127d4d73 languageName: node linkType: hard @@ -942,29 +1098,42 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-modules-systemjs@npm:^7.23.9": - version: 7.23.9 - resolution: "@babel/plugin-transform-modules-systemjs@npm:7.23.9" +"@babel/plugin-transform-modules-commonjs@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-modules-commonjs@npm:7.24.1" + dependencies: + "@babel/helper-module-transforms": "npm:^7.23.3" + "@babel/helper-plugin-utils": "npm:^7.24.0" + "@babel/helper-simple-access": "npm:^7.22.5" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10/7326a62ed5f766f93ee75684868635b59884e2801533207ea11561c296de53037949fecad4055d828fa7ebeb6cc9e55908aa3e7c13f930ded3e62ad9f24680d7 + languageName: node + linkType: hard + +"@babel/plugin-transform-modules-systemjs@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-modules-systemjs@npm:7.24.1" dependencies: "@babel/helper-hoist-variables": "npm:^7.22.5" "@babel/helper-module-transforms": "npm:^7.23.3" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/helper-validator-identifier": "npm:^7.22.20" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/4bb800e5a9d0d668d7421ae3672fccff7d5f2a36621fd87414d7ece6d6f4d93627f9644cfecacae934bc65ffc131c8374242aaa400cca874dcab9b281a21aff0 + checksum: 10/565ec4518037b3d957431e29bda97b3d2fbb2e245fb5ba19889310ccb8fb71353e8ce2c325cc8d3fbc5a376d3af7d7e21782d5f502c46f8da077bee7807a590f languageName: node linkType: hard -"@babel/plugin-transform-modules-umd@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-modules-umd@npm:7.23.3" +"@babel/plugin-transform-modules-umd@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-modules-umd@npm:7.24.1" dependencies: "@babel/helper-module-transforms": "npm:^7.23.3" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/e3f3af83562d687899555c7826b3faf0ab93ee7976898995b1d20cbe7f4451c55e05b0e17bfb3e549937cbe7573daf5400b752912a241b0a8a64d2457c7626e5 + checksum: 10/323bb9367e1967117a829f67788ec2ff55504b4faf8f6d83ec85d398e50b41cf7d1c375c67d63883dd7ad5e75b35c8ae776d89e422330ec0c0a1fda24e362083 languageName: node linkType: hard @@ -980,18 +1149,18 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-new-target@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-new-target@npm:7.23.3" +"@babel/plugin-transform-new-target@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-new-target@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/e5053389316fce73ad5201b7777437164f333e24787fbcda4ae489cd2580dbbbdfb5694a7237bad91fabb46b591d771975d69beb1c740b82cb4761625379f00b + checksum: 10/e0d3af66cd0fad29c9d0e3fc65e711255e18b77e2e35bbd8f10059e3db7de6c16799ef74e704daf784950feb71e7a93c5bf2c771d98f1ca3fba1ff2e0240b24a languageName: node linkType: hard -"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.22.11, @babel/plugin-transform-nullish-coalescing-operator@npm:^7.23.4": +"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.22.11": version: 7.23.4 resolution: "@babel/plugin-transform-nullish-coalescing-operator@npm:7.23.4" dependencies: @@ -1003,58 +1172,69 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-numeric-separator@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-numeric-separator@npm:7.23.4" +"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-nullish-coalescing-operator@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" + "@babel/plugin-syntax-nullish-coalescing-operator": "npm:^7.8.3" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10/74025e191ceb7cefc619c15d33753aab81300a03d81b96ae249d9b599bc65878f962d608f452462d3aad5d6e334b7ab2b09a6bdcfe8d101fe77ac7aacca4261e + languageName: node + linkType: hard + +"@babel/plugin-transform-numeric-separator@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-numeric-separator@npm:7.24.1" + dependencies: + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/plugin-syntax-numeric-separator": "npm:^7.10.4" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/6ba0e5db3c620a3ec81f9e94507c821f483c15f196868df13fa454cbac719a5449baf73840f5b6eb7d77311b24a2cf8e45db53700d41727f693d46f7caf3eec3 + checksum: 10/3247bd7d409574fc06c59e0eb573ae7470d6d61ecf780df40b550102bb4406747d8f39dcbec57eb59406df6c565a86edd3b429e396ad02e4ce201ad92050832e languageName: node linkType: hard -"@babel/plugin-transform-object-rest-spread@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-object-rest-spread@npm:7.23.4" +"@babel/plugin-transform-object-rest-spread@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-object-rest-spread@npm:7.24.1" dependencies: - "@babel/compat-data": "npm:^7.23.3" - "@babel/helper-compilation-targets": "npm:^7.22.15" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-compilation-targets": "npm:^7.23.6" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/plugin-syntax-object-rest-spread": "npm:^7.8.3" - "@babel/plugin-transform-parameters": "npm:^7.23.3" + "@babel/plugin-transform-parameters": "npm:^7.24.1" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/656f09c4ec629856e807d5b386559166ae417ff75943abce19656b2c6de5101dfd0aaf23f9074e854339370b4e09f57518d3202457046ee5b567ded531005479 + checksum: 10/ff6eeefbc5497cf33d62dc86b797c6db0e9455d6a4945d6952f3b703d04baab048974c6573b503e0ec097b8112d3b98b5f4ee516e1b8a74ed47aebba4d9d2643 languageName: node linkType: hard -"@babel/plugin-transform-object-super@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-object-super@npm:7.23.3" +"@babel/plugin-transform-object-super@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-object-super@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" - "@babel/helper-replace-supers": "npm:^7.22.20" + "@babel/helper-plugin-utils": "npm:^7.24.0" + "@babel/helper-replace-supers": "npm:^7.24.1" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/e495497186f621fa79026e183b4f1fbb172fd9df812cbd2d7f02c05b08adbe58012b1a6eb6dd58d11a30343f6ec80d0f4074f9b501d70aa1c94df76d59164c53 + checksum: 10/d34d437456a54e2a5dcb26e9cf09ed4c55528f2a327c5edca92c93e9483c37176e228d00d6e0cf767f3d6fdbef45ae3a5d034a7c59337a009e20ae541c8220fa languageName: node linkType: hard -"@babel/plugin-transform-optional-catch-binding@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-optional-catch-binding@npm:7.23.4" +"@babel/plugin-transform-optional-catch-binding@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-optional-catch-binding@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/plugin-syntax-optional-catch-binding": "npm:^7.8.3" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/d50b5ee142cdb088d8b5de1ccf7cea85b18b85d85b52f86618f6e45226372f01ad4cdb29abd4fd35ea99a71fefb37009e0107db7a787dcc21d4d402f97470faf + checksum: 10/ff7c02449d32a6de41e003abb38537b4a1ad90b1eaa4c0b578cb1b55548201a677588a8c47f3e161c72738400ae811a6673ea7b8a734344755016ca0ac445dac languageName: node linkType: hard -"@babel/plugin-transform-optional-chaining@npm:^7.23.0, @babel/plugin-transform-optional-chaining@npm:^7.23.3, @babel/plugin-transform-optional-chaining@npm:^7.23.4": +"@babel/plugin-transform-optional-chaining@npm:^7.23.0": version: 7.23.4 resolution: "@babel/plugin-transform-optional-chaining@npm:7.23.4" dependencies: @@ -1067,18 +1247,31 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-parameters@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-parameters@npm:7.23.3" +"@babel/plugin-transform-optional-chaining@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-optional-chaining@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" + "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5" + "@babel/plugin-syntax-optional-chaining": "npm:^7.8.3" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/a8c36c3fc25f9daa46c4f6db47ea809c395dc4abc7f01c4b1391f6e5b0cd62b83b6016728b02a6a8ac21aca56207c9ec66daefc0336e9340976978de7e6e28df + checksum: 10/d41031b8e472b9b30aacd905a1561904bcec597dd888ad639b234971714dc9cd0dcb60df91a89219fc72e4feeb148e20f97bcddc39d7676e743ff0c23f62a7eb languageName: node linkType: hard -"@babel/plugin-transform-private-methods@npm:^7.22.5, @babel/plugin-transform-private-methods@npm:^7.23.3": +"@babel/plugin-transform-parameters@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-parameters@npm:7.24.1" + dependencies: + "@babel/helper-plugin-utils": "npm:^7.24.0" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10/c289c188710cd1c60991db169d8173b6e8e05624ae61a7da0b64354100bfba9e44bc1332dd9223c4e3fe1b9cbc0c061e76e7c7b3a75c9588bf35d0ffec428070 + languageName: node + linkType: hard + +"@babel/plugin-transform-private-methods@npm:^7.22.5": version: 7.23.3 resolution: "@babel/plugin-transform-private-methods@npm:7.23.3" dependencies: @@ -1090,28 +1283,40 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-private-property-in-object@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-private-property-in-object@npm:7.23.4" +"@babel/plugin-transform-private-methods@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-private-methods@npm:7.24.1" + dependencies: + "@babel/helper-create-class-features-plugin": "npm:^7.24.1" + "@babel/helper-plugin-utils": "npm:^7.24.0" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10/7208c30bb3f3fbc73fb3a88bdcb78cd5cddaf6d523eb9d67c0c04e78f6fc6319ece89f4a5abc41777ceab16df55b3a13a4120e0efc9275ca6d2d89beaba80aa0 + languageName: node + linkType: hard + +"@babel/plugin-transform-private-property-in-object@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-private-property-in-object@npm:7.24.1" dependencies: "@babel/helper-annotate-as-pure": "npm:^7.22.5" - "@babel/helper-create-class-features-plugin": "npm:^7.22.15" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-create-class-features-plugin": "npm:^7.24.1" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/plugin-syntax-private-property-in-object": "npm:^7.14.5" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/02eef2ee98fa86ee5052ed9bf0742d6d22b510b5df2fcce0b0f5615d6001f7786c6b31505e7f1c2f446406d8fb33603a5316d957cfa5b8365cbf78ddcc24fa42 + checksum: 10/466d1943960c2475c0361eba2ea72d504d4d8329a8e293af0eedd26887bf30a074515b330ea84be77331ace77efbf5533d5f04f8cff63428d2615f4a509ae7a4 languageName: node linkType: hard -"@babel/plugin-transform-property-literals@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-property-literals@npm:7.23.3" +"@babel/plugin-transform-property-literals@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-property-literals@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/16b048c8e87f25095f6d53634ab7912992f78e6997a6ff549edc3cf519db4fca01c7b4e0798530d7f6a05228ceee479251245cdd850a5531c6e6f404104d6cc9 + checksum: 10/a73646d7ecd95b3931a3ead82c7d5efeb46e68ba362de63eb437d33531f294ec18bd31b6d24238cd3b6a3b919a6310c4a0ba4a2629927721d4d10b0518eb7715 languageName: node linkType: hard @@ -1137,82 +1342,82 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-regenerator@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-regenerator@npm:7.23.3" +"@babel/plugin-transform-regenerator@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-regenerator@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" regenerator-transform: "npm:^0.15.2" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/7fdacc7b40008883871b519c9e5cdea493f75495118ccc56ac104b874983569a24edd024f0f5894ba1875c54ee2b442f295d6241c3280e61c725d0dd3317c8e6 + checksum: 10/a04319388a0a7931c3f8e15715d01444c32519692178b70deccc86d53304e74c0f589a4268f6c68578d86f75e934dd1fe6e6ed9071f54ee8379f356f88ef6e42 languageName: node linkType: hard -"@babel/plugin-transform-reserved-words@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-reserved-words@npm:7.23.3" +"@babel/plugin-transform-reserved-words@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-reserved-words@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/298c4440ddc136784ff920127cea137168e068404e635dc946ddb5d7b2a27b66f1dd4c4acb01f7184478ff7d5c3e7177a127279479926519042948fb7fa0fa48 + checksum: 10/132c6040c65aabae2d98a39289efb5c51a8632546dc50d2ad032c8660aec307fbed74ef499856ea4f881fc8505905f49b48e0270585da2ea3d50b75e962afd89 languageName: node linkType: hard -"@babel/plugin-transform-shorthand-properties@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-shorthand-properties@npm:7.23.3" +"@babel/plugin-transform-shorthand-properties@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-shorthand-properties@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/5d677a03676f9fff969b0246c423d64d77502e90a832665dc872a5a5e05e5708161ce1effd56bb3c0f2c20a1112fca874be57c8a759d8b08152755519281f326 + checksum: 10/006a2032d1c57dca76579ce6598c679c2f20525afef0a36e9d42affe3c8cf33c1427581ad696b519cc75dfee46c5e8ecdf0c6a29ffb14250caa3e16dd68cb424 languageName: node linkType: hard -"@babel/plugin-transform-spread@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-spread@npm:7.23.3" +"@babel/plugin-transform-spread@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-spread@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/c6372d2f788fd71d85aba12fbe08ee509e053ed27457e6674a4f9cae41ff885e2eb88aafea8fadd0ccf990601fc69ec596fa00959e05af68a15461a8d97a548d + checksum: 10/0b60cfe2f700ec2c9c1af979bb805860258539648dadcd482a5ddfc2330b733fb61bb60266404f3e068246ad0d6376040b4f9c5ab9037a3d777624d64acd89e9 languageName: node linkType: hard -"@babel/plugin-transform-sticky-regex@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-sticky-regex@npm:7.23.3" +"@babel/plugin-transform-sticky-regex@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-sticky-regex@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/53e55eb2575b7abfdb4af7e503a2bf7ef5faf8bf6b92d2cd2de0700bdd19e934e5517b23e6dfed94ba50ae516b62f3f916773ef7d9bc81f01503f585051e2949 + checksum: 10/e326e96a9eeb6bb01dbc4d3362f989411490671b97f62edf378b8fb102c463a018b777f28da65344d41b22aa6efcdfa01ed43d2b11fdcf202046d3174be137c5 languageName: node linkType: hard -"@babel/plugin-transform-template-literals@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-template-literals@npm:7.23.3" +"@babel/plugin-transform-template-literals@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-template-literals@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/b16c5cb0b8796be0118e9c144d15bdc0d20a7f3f59009c6303a6e9a8b74c146eceb3f05186f5b97afcba7cfa87e34c1585a22186e3d5b22f2fd3d27d959d92b2 + checksum: 10/4c9009c72321caf20e3b6328bbe9d7057006c5ae57b794cf247a37ca34d87dfec5e27284169a16df5a6235a083bf0f3ab9e1bfcb005d1c8b75b04aed75652621 languageName: node linkType: hard -"@babel/plugin-transform-typeof-symbol@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-typeof-symbol@npm:7.23.3" +"@babel/plugin-transform-typeof-symbol@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-typeof-symbol@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/0af7184379d43afac7614fc89b1bdecce4e174d52f4efaeee8ec1a4f2c764356c6dba3525c0685231f1cbf435b6dd4ee9e738d7417f3b10ce8bbe869c32f4384 + checksum: 10/3dda5074abf8b5df9cdef697d6ebe14a72c199bd6c2019991d033d9ad91b0be937b126b8f34c3c5a9725afee9016a3776aeef3e3b06ab9b3f54f2dd5b5aefa37 languageName: node linkType: hard @@ -1230,72 +1435,73 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-unicode-escapes@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-unicode-escapes@npm:7.23.3" +"@babel/plugin-transform-unicode-escapes@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-unicode-escapes@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/561c429183a54b9e4751519a3dfba6014431e9cdc1484fad03bdaf96582dfc72c76a4f8661df2aeeae7c34efd0fa4d02d3b83a2f63763ecf71ecc925f9cc1f60 + checksum: 10/d39041ff6b0cef78271ebe88be6dfd2882a3c6250a54ddae783f1b9adc815e8486a7d0ca054fabfa3fde1301c531d5be89224999fc7be83ff1eda9b77d173051 languageName: node linkType: hard -"@babel/plugin-transform-unicode-property-regex@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-unicode-property-regex@npm:7.23.3" +"@babel/plugin-transform-unicode-property-regex@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-unicode-property-regex@npm:7.24.1" dependencies: "@babel/helper-create-regexp-features-plugin": "npm:^7.22.15" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/2298461a194758086d17c23c26c7de37aa533af910f9ebf31ebd0893d4aa317468043d23f73edc782ec21151d3c46cf0ff8098a83b725c49a59de28a1d4d6225 + checksum: 10/276099b4483e707f80b054e2d29bc519158bfe52461ef5ff76f70727d592df17e30b1597ef4d8a0f04d810f6cb5a8dd887bdc1d0540af3744751710ef280090f languageName: node linkType: hard -"@babel/plugin-transform-unicode-regex@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-unicode-regex@npm:7.23.3" +"@babel/plugin-transform-unicode-regex@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-unicode-regex@npm:7.24.1" dependencies: "@babel/helper-create-regexp-features-plugin": "npm:^7.22.15" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/c5f835d17483ba899787f92e313dfa5b0055e3deab332f1d254078a2bba27ede47574b6599fcf34d3763f0c048ae0779dc21d2d8db09295edb4057478dc80a9a + checksum: 10/400a0927bdb1425b4c0dc68a61b5b2d7d17c7d9f0e07317a1a6a373c080ef94be1dd65fdc4ac9a78fcdb58f89fd128450c7bc0d5b8ca0ae7eca3fbd98e50acba languageName: node linkType: hard -"@babel/plugin-transform-unicode-sets-regex@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-unicode-sets-regex@npm:7.23.3" +"@babel/plugin-transform-unicode-sets-regex@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-unicode-sets-regex@npm:7.24.1" dependencies: "@babel/helper-create-regexp-features-plugin": "npm:^7.22.15" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0 - checksum: 10/79d0b4c951955ca68235c87b91ab2b393c96285f8aeaa34d6db416d2ddac90000c9bd6e8c4d82b60a2b484da69930507245035f28ba63c6cae341cf3ba68fdef + checksum: 10/364342fb8e382dfaa23628b88e6484dc1097e53fb7199f4d338f1e2cd71d839bb0a35a9b1380074f6a10adb2e98b79d53ca3ec78c0b8c557ca895ffff42180df languageName: node linkType: hard -"@babel/preset-env@npm:^7.23.2": - version: 7.23.9 - resolution: "@babel/preset-env@npm:7.23.9" +"@babel/preset-env@npm:^7.24.4": + version: 7.24.4 + resolution: "@babel/preset-env@npm:7.24.4" dependencies: - "@babel/compat-data": "npm:^7.23.5" + "@babel/compat-data": "npm:^7.24.4" "@babel/helper-compilation-targets": "npm:^7.23.6" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/helper-validator-option": "npm:^7.23.5" - "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "npm:^7.23.3" - "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "npm:^7.23.3" - "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "npm:^7.23.7" + "@babel/plugin-bugfix-firefox-class-in-computed-class-key": "npm:^7.24.4" + "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "npm:^7.24.1" + "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "npm:^7.24.1" + "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "npm:^7.24.1" "@babel/plugin-proposal-private-property-in-object": "npm:7.21.0-placeholder-for-preset-env.2" "@babel/plugin-syntax-async-generators": "npm:^7.8.4" "@babel/plugin-syntax-class-properties": "npm:^7.12.13" "@babel/plugin-syntax-class-static-block": "npm:^7.14.5" "@babel/plugin-syntax-dynamic-import": "npm:^7.8.3" "@babel/plugin-syntax-export-namespace-from": "npm:^7.8.3" - "@babel/plugin-syntax-import-assertions": "npm:^7.23.3" - "@babel/plugin-syntax-import-attributes": "npm:^7.23.3" + "@babel/plugin-syntax-import-assertions": "npm:^7.24.1" + "@babel/plugin-syntax-import-attributes": "npm:^7.24.1" "@babel/plugin-syntax-import-meta": "npm:^7.10.4" "@babel/plugin-syntax-json-strings": "npm:^7.8.3" "@babel/plugin-syntax-logical-assignment-operators": "npm:^7.10.4" @@ -1307,63 +1513,63 @@ __metadata: "@babel/plugin-syntax-private-property-in-object": "npm:^7.14.5" "@babel/plugin-syntax-top-level-await": "npm:^7.14.5" "@babel/plugin-syntax-unicode-sets-regex": "npm:^7.18.6" - "@babel/plugin-transform-arrow-functions": "npm:^7.23.3" - "@babel/plugin-transform-async-generator-functions": "npm:^7.23.9" - "@babel/plugin-transform-async-to-generator": "npm:^7.23.3" - "@babel/plugin-transform-block-scoped-functions": "npm:^7.23.3" - "@babel/plugin-transform-block-scoping": "npm:^7.23.4" - "@babel/plugin-transform-class-properties": "npm:^7.23.3" - "@babel/plugin-transform-class-static-block": "npm:^7.23.4" - "@babel/plugin-transform-classes": "npm:^7.23.8" - "@babel/plugin-transform-computed-properties": "npm:^7.23.3" - "@babel/plugin-transform-destructuring": "npm:^7.23.3" - "@babel/plugin-transform-dotall-regex": "npm:^7.23.3" - "@babel/plugin-transform-duplicate-keys": "npm:^7.23.3" - "@babel/plugin-transform-dynamic-import": "npm:^7.23.4" - "@babel/plugin-transform-exponentiation-operator": "npm:^7.23.3" - "@babel/plugin-transform-export-namespace-from": "npm:^7.23.4" - "@babel/plugin-transform-for-of": "npm:^7.23.6" - "@babel/plugin-transform-function-name": "npm:^7.23.3" - "@babel/plugin-transform-json-strings": "npm:^7.23.4" - "@babel/plugin-transform-literals": "npm:^7.23.3" - "@babel/plugin-transform-logical-assignment-operators": "npm:^7.23.4" - "@babel/plugin-transform-member-expression-literals": "npm:^7.23.3" - "@babel/plugin-transform-modules-amd": "npm:^7.23.3" - "@babel/plugin-transform-modules-commonjs": "npm:^7.23.3" - "@babel/plugin-transform-modules-systemjs": "npm:^7.23.9" - "@babel/plugin-transform-modules-umd": "npm:^7.23.3" + "@babel/plugin-transform-arrow-functions": "npm:^7.24.1" + "@babel/plugin-transform-async-generator-functions": "npm:^7.24.3" + "@babel/plugin-transform-async-to-generator": "npm:^7.24.1" + "@babel/plugin-transform-block-scoped-functions": "npm:^7.24.1" + "@babel/plugin-transform-block-scoping": "npm:^7.24.4" + "@babel/plugin-transform-class-properties": "npm:^7.24.1" + "@babel/plugin-transform-class-static-block": "npm:^7.24.4" + "@babel/plugin-transform-classes": "npm:^7.24.1" + "@babel/plugin-transform-computed-properties": "npm:^7.24.1" + "@babel/plugin-transform-destructuring": "npm:^7.24.1" + "@babel/plugin-transform-dotall-regex": "npm:^7.24.1" + "@babel/plugin-transform-duplicate-keys": "npm:^7.24.1" + "@babel/plugin-transform-dynamic-import": "npm:^7.24.1" + "@babel/plugin-transform-exponentiation-operator": "npm:^7.24.1" + "@babel/plugin-transform-export-namespace-from": "npm:^7.24.1" + "@babel/plugin-transform-for-of": "npm:^7.24.1" + "@babel/plugin-transform-function-name": "npm:^7.24.1" + "@babel/plugin-transform-json-strings": "npm:^7.24.1" + "@babel/plugin-transform-literals": "npm:^7.24.1" + "@babel/plugin-transform-logical-assignment-operators": "npm:^7.24.1" + "@babel/plugin-transform-member-expression-literals": "npm:^7.24.1" + "@babel/plugin-transform-modules-amd": "npm:^7.24.1" + "@babel/plugin-transform-modules-commonjs": "npm:^7.24.1" + "@babel/plugin-transform-modules-systemjs": "npm:^7.24.1" + "@babel/plugin-transform-modules-umd": "npm:^7.24.1" "@babel/plugin-transform-named-capturing-groups-regex": "npm:^7.22.5" - "@babel/plugin-transform-new-target": "npm:^7.23.3" - "@babel/plugin-transform-nullish-coalescing-operator": "npm:^7.23.4" - "@babel/plugin-transform-numeric-separator": "npm:^7.23.4" - "@babel/plugin-transform-object-rest-spread": "npm:^7.23.4" - "@babel/plugin-transform-object-super": "npm:^7.23.3" - "@babel/plugin-transform-optional-catch-binding": "npm:^7.23.4" - "@babel/plugin-transform-optional-chaining": "npm:^7.23.4" - "@babel/plugin-transform-parameters": "npm:^7.23.3" - "@babel/plugin-transform-private-methods": "npm:^7.23.3" - "@babel/plugin-transform-private-property-in-object": "npm:^7.23.4" - "@babel/plugin-transform-property-literals": "npm:^7.23.3" - "@babel/plugin-transform-regenerator": "npm:^7.23.3" - "@babel/plugin-transform-reserved-words": "npm:^7.23.3" - "@babel/plugin-transform-shorthand-properties": "npm:^7.23.3" - "@babel/plugin-transform-spread": "npm:^7.23.3" - "@babel/plugin-transform-sticky-regex": "npm:^7.23.3" - "@babel/plugin-transform-template-literals": "npm:^7.23.3" - "@babel/plugin-transform-typeof-symbol": "npm:^7.23.3" - "@babel/plugin-transform-unicode-escapes": "npm:^7.23.3" - "@babel/plugin-transform-unicode-property-regex": "npm:^7.23.3" - "@babel/plugin-transform-unicode-regex": "npm:^7.23.3" - "@babel/plugin-transform-unicode-sets-regex": "npm:^7.23.3" + "@babel/plugin-transform-new-target": "npm:^7.24.1" + "@babel/plugin-transform-nullish-coalescing-operator": "npm:^7.24.1" + "@babel/plugin-transform-numeric-separator": "npm:^7.24.1" + "@babel/plugin-transform-object-rest-spread": "npm:^7.24.1" + "@babel/plugin-transform-object-super": "npm:^7.24.1" + "@babel/plugin-transform-optional-catch-binding": "npm:^7.24.1" + "@babel/plugin-transform-optional-chaining": "npm:^7.24.1" + "@babel/plugin-transform-parameters": "npm:^7.24.1" + "@babel/plugin-transform-private-methods": "npm:^7.24.1" + "@babel/plugin-transform-private-property-in-object": "npm:^7.24.1" + "@babel/plugin-transform-property-literals": "npm:^7.24.1" + "@babel/plugin-transform-regenerator": "npm:^7.24.1" + "@babel/plugin-transform-reserved-words": "npm:^7.24.1" + "@babel/plugin-transform-shorthand-properties": "npm:^7.24.1" + "@babel/plugin-transform-spread": "npm:^7.24.1" + "@babel/plugin-transform-sticky-regex": "npm:^7.24.1" + "@babel/plugin-transform-template-literals": "npm:^7.24.1" + "@babel/plugin-transform-typeof-symbol": "npm:^7.24.1" + "@babel/plugin-transform-unicode-escapes": "npm:^7.24.1" + "@babel/plugin-transform-unicode-property-regex": "npm:^7.24.1" + "@babel/plugin-transform-unicode-regex": "npm:^7.24.1" + "@babel/plugin-transform-unicode-sets-regex": "npm:^7.24.1" "@babel/preset-modules": "npm:0.1.6-no-external-plugins" - babel-plugin-polyfill-corejs2: "npm:^0.4.8" - babel-plugin-polyfill-corejs3: "npm:^0.9.0" - babel-plugin-polyfill-regenerator: "npm:^0.5.5" + babel-plugin-polyfill-corejs2: "npm:^0.4.10" + babel-plugin-polyfill-corejs3: "npm:^0.10.4" + babel-plugin-polyfill-regenerator: "npm:^0.6.1" core-js-compat: "npm:^3.31.0" semver: "npm:^6.3.1" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/0214ac9434a2496eac7f56c0c91164421232ff2083a66e1ccab633ca91e262828e54a5cbdb9036e8fe53d53530b6597aa98c99de8ff07b5193ffd95f21dc9d2c + checksum: 10/3d5cbdc2501bc1959fc76ed9d409d0ee5264bc475fa809958fd2e8e7db9b12f8eccdae750a0e05d25207373c42ca115b42bb3d5c743bc770cb12b6af05bf3bd8 languageName: node linkType: hard @@ -1450,7 +1656,18 @@ __metadata: languageName: node linkType: hard -"@babel/traverse@npm:^7.18.9, @babel/traverse@npm:^7.23.2, @babel/traverse@npm:^7.23.9": +"@babel/template@npm:^7.24.0": + version: 7.24.0 + resolution: "@babel/template@npm:7.24.0" + dependencies: + "@babel/code-frame": "npm:^7.23.5" + "@babel/parser": "npm:^7.24.0" + "@babel/types": "npm:^7.24.0" + checksum: 10/8c538338c7de8fac8ada691a5a812bdcbd60bd4a4eb5adae2cc9ee19773e8fb1a724312a00af9e1ce49056ffd3c3475e7287b5668cf6360bfb3f8ac827a06ffe + languageName: node + linkType: hard + +"@babel/traverse@npm:^7.18.9, @babel/traverse@npm:^7.23.9": version: 7.23.9 resolution: "@babel/traverse@npm:7.23.9" dependencies: @@ -1468,6 +1685,24 @@ __metadata: languageName: node linkType: hard +"@babel/traverse@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/traverse@npm:7.24.1" + dependencies: + "@babel/code-frame": "npm:^7.24.1" + "@babel/generator": "npm:^7.24.1" + "@babel/helper-environment-visitor": "npm:^7.22.20" + "@babel/helper-function-name": "npm:^7.23.0" + "@babel/helper-hoist-variables": "npm:^7.22.5" + "@babel/helper-split-export-declaration": "npm:^7.22.6" + "@babel/parser": "npm:^7.24.1" + "@babel/types": "npm:^7.24.0" + debug: "npm:^4.3.1" + globals: "npm:^11.1.0" + checksum: 10/b9b0173c286ef549e179f3725df3c4958069ad79fe5b9840adeb99692eb4a5a08db4e735c0f086aab52e7e08ec711cee9e7c06cb908d8035641d1382172308d3 + languageName: node + linkType: hard + "@babel/types@npm:^7.0.0, @babel/types@npm:^7.18.9, @babel/types@npm:^7.20.7, @babel/types@npm:^7.22.15, @babel/types@npm:^7.22.19, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.23.6, @babel/types@npm:^7.23.9, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.8.3": version: 7.23.9 resolution: "@babel/types@npm:7.23.9" @@ -1479,6 +1714,17 @@ __metadata: languageName: node linkType: hard +"@babel/types@npm:^7.24.0": + version: 7.24.0 + resolution: "@babel/types@npm:7.24.0" + dependencies: + "@babel/helper-string-parser": "npm:^7.23.4" + "@babel/helper-validator-identifier": "npm:^7.22.20" + to-fast-properties: "npm:^2.0.0" + checksum: 10/a0b4875ce2e132f9daff0d5b27c7f4c4fcc97f2b084bdc5834e92c9d32592778489029e65d99d00c406da612d87b72d7a236c0afccaa1435c028d0c94c9b6da4 + languageName: node + linkType: hard + "@base2/pretty-print-object@npm:1.0.1": version: 1.0.1 resolution: "@base2/pretty-print-object@npm:1.0.1" @@ -2250,6 +2496,17 @@ __metadata: languageName: node linkType: hard +"@jridgewell/gen-mapping@npm:^0.3.5": + version: 0.3.5 + resolution: "@jridgewell/gen-mapping@npm:0.3.5" + dependencies: + "@jridgewell/set-array": "npm:^1.2.1" + "@jridgewell/sourcemap-codec": "npm:^1.4.10" + "@jridgewell/trace-mapping": "npm:^0.3.24" + checksum: 10/81587b3c4dd8e6c60252122937cea0c637486311f4ed208b52b62aae2e7a87598f63ec330e6cd0984af494bfb16d3f0d60d3b21d7e5b4aedd2602ff3fe9d32e2 + languageName: node + linkType: hard + "@jridgewell/resolve-uri@npm:^3.1.0": version: 3.1.2 resolution: "@jridgewell/resolve-uri@npm:3.1.2" @@ -2264,6 +2521,13 @@ __metadata: languageName: node linkType: hard +"@jridgewell/set-array@npm:^1.2.1": + version: 1.2.1 + resolution: "@jridgewell/set-array@npm:1.2.1" + checksum: 10/832e513a85a588f8ed4f27d1279420d8547743cc37fcad5a5a76fc74bb895b013dfe614d0eed9cb860048e6546b798f8f2652020b4b2ba0561b05caa8c654b10 + languageName: node + linkType: hard + "@jridgewell/sourcemap-codec@npm:^1.4.10, @jridgewell/sourcemap-codec@npm:^1.4.13, @jridgewell/sourcemap-codec@npm:^1.4.14, @jridgewell/sourcemap-codec@npm:^1.4.15": version: 1.4.15 resolution: "@jridgewell/sourcemap-codec@npm:1.4.15" @@ -2281,138 +2545,405 @@ __metadata: languageName: node linkType: hard -"@mdx-js/react@npm:^3.0.0": - version: 3.0.1 - resolution: "@mdx-js/react@npm:3.0.1" +"@jridgewell/trace-mapping@npm:^0.3.24, @jridgewell/trace-mapping@npm:^0.3.25": + version: 0.3.25 + resolution: "@jridgewell/trace-mapping@npm:0.3.25" + dependencies: + "@jridgewell/resolve-uri": "npm:^3.1.0" + "@jridgewell/sourcemap-codec": "npm:^1.4.14" + checksum: 10/dced32160a44b49d531b80a4a2159dceab6b3ddf0c8e95a0deae4b0e894b172defa63d5ac52a19c2068e1fe7d31ea4ba931fbeec103233ecb4208953967120fc + languageName: node + linkType: hard + +"@mdx-js/react@npm:^3.0.0": + version: 3.0.1 + resolution: "@mdx-js/react@npm:3.0.1" + dependencies: + "@types/mdx": "npm:^2.0.0" + peerDependencies: + "@types/react": ">=16" + react: ">=16" + checksum: 10/d566407af11e76f498f8133fbfa8a9d8a2ad80dc7a66ca109d29fcb92e953a2d2d7aaedc0c28571d126f1967faeb126dd2e4ab4ea474c994bf5c76fa204c5997 + languageName: node + linkType: hard + +"@ndelangen/get-tarball@npm:^3.0.7": + version: 3.0.9 + resolution: "@ndelangen/get-tarball@npm:3.0.9" + dependencies: + gunzip-maybe: "npm:^1.4.2" + pump: "npm:^3.0.0" + tar-fs: "npm:^2.1.1" + checksum: 10/39697cef2b92f6e08e3590467cc6da88cd6757b2a27cb9208879c2316ed71d6be4608892ee0a86eb0343140da1a5df498f93a32c2aaf8f1fbd90f883f08b5f63 + languageName: node + linkType: hard + +"@nodelib/fs.scandir@npm:2.1.5": + version: 2.1.5 + resolution: "@nodelib/fs.scandir@npm:2.1.5" + dependencies: + "@nodelib/fs.stat": "npm:2.0.5" + run-parallel: "npm:^1.1.9" + checksum: 10/6ab2a9b8a1d67b067922c36f259e3b3dfd6b97b219c540877a4944549a4d49ea5ceba5663905ab5289682f1f3c15ff441d02f0447f620a42e1cb5e1937174d4b + languageName: node + linkType: hard + +"@nodelib/fs.stat@npm:2.0.5, @nodelib/fs.stat@npm:^2.0.2": + version: 2.0.5 + resolution: "@nodelib/fs.stat@npm:2.0.5" + checksum: 10/012480b5ca9d97bff9261571dbbec7bbc6033f69cc92908bc1ecfad0792361a5a1994bc48674b9ef76419d056a03efadfce5a6cf6dbc0a36559571a7a483f6f0 + languageName: node + linkType: hard + +"@nodelib/fs.walk@npm:^1.2.3, @nodelib/fs.walk@npm:^1.2.8": + version: 1.2.8 + resolution: "@nodelib/fs.walk@npm:1.2.8" + dependencies: + "@nodelib/fs.scandir": "npm:2.1.5" + fastq: "npm:^1.6.0" + checksum: 10/40033e33e96e97d77fba5a238e4bba4487b8284678906a9f616b5579ddaf868a18874c0054a75402c9fbaaa033a25ceae093af58c9c30278e35c23c9479e79b0 + languageName: node + linkType: hard + +"@npmcli/agent@npm:^2.0.0": + version: 2.2.1 + resolution: "@npmcli/agent@npm:2.2.1" + dependencies: + agent-base: "npm:^7.1.0" + http-proxy-agent: "npm:^7.0.0" + https-proxy-agent: "npm:^7.0.1" + lru-cache: "npm:^10.0.1" + socks-proxy-agent: "npm:^8.0.1" + checksum: 10/d4a48128f61e47f2f5c89315a5350e265dc619987e635bd62b52b29c7ed93536e724e721418c0ce352ceece86c13043c67aba1b70c3f5cc72fce6bb746706162 + languageName: node + linkType: hard + +"@npmcli/fs@npm:^3.1.0": + version: 3.1.0 + resolution: "@npmcli/fs@npm:3.1.0" + dependencies: + semver: "npm:^7.3.5" + checksum: 10/f3a7ab3a31de65e42aeb6ed03ed035ef123d2de7af4deb9d4a003d27acc8618b57d9fb9d259fe6c28ca538032a028f37337264388ba27d26d37fff7dde22476e + languageName: node + linkType: hard + +"@pkgjs/parseargs@npm:^0.11.0": + version: 0.11.0 + resolution: "@pkgjs/parseargs@npm:0.11.0" + checksum: 10/115e8ceeec6bc69dff2048b35c0ab4f8bbee12d8bb6c1f4af758604586d802b6e669dcb02dda61d078de42c2b4ddce41b3d9e726d7daa6b4b850f4adbf7333ff + languageName: node + linkType: hard + +"@playwright/experimental-ct-core@npm:1.42.1": + version: 1.42.1 + resolution: "@playwright/experimental-ct-core@npm:1.42.1" + dependencies: + playwright: "npm:1.42.1" + playwright-core: "npm:1.42.1" + vite: "npm:^5.0.12" + bin: + playwright: cli.js + checksum: 10/ec62a3f0b8c82720101741884f2c5125f1daaba01fc6c9d3eee627b28ce5f9a40f2abc44bd2f40dd1a6a1856d1540468d13b7c05e301cf576d0c8d2984ca722d + languageName: node + linkType: hard + +"@playwright/experimental-ct-react@npm:^1.42.1": + version: 1.42.1 + resolution: "@playwright/experimental-ct-react@npm:1.42.1" + dependencies: + "@playwright/experimental-ct-core": "npm:1.42.1" + "@vitejs/plugin-react": "npm:^4.2.1" + bin: + playwright: cli.js + checksum: 10/ab9a6475c9466df397c57a65b44343b73caf115b21db2cadd1ab6057c9fef98f024b3caa459543a6686ea11cae3888f56eb40683744df237f5b30abf31d7cc35 + languageName: node + linkType: hard + +"@radix-ui/primitive@npm:1.0.1": + version: 1.0.1 + resolution: "@radix-ui/primitive@npm:1.0.1" + dependencies: + "@babel/runtime": "npm:^7.13.10" + checksum: 10/2b93e161d3fdabe9a64919def7fa3ceaecf2848341e9211520c401181c9eaebb8451c630b066fad2256e5c639c95edc41de0ba59c40eff37e799918d019822d1 + languageName: node + linkType: hard + +"@radix-ui/react-compose-refs@npm:1.0.1": + version: 1.0.1 + resolution: "@radix-ui/react-compose-refs@npm:1.0.1" + dependencies: + "@babel/runtime": "npm:^7.13.10" + peerDependencies: + "@types/react": "*" + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/2b9a613b6db5bff8865588b6bf4065f73021b3d16c0a90b2d4c23deceeb63612f1f15de188227ebdc5f88222cab031be617a9dd025874c0487b303be3e5cc2a8 + languageName: node + linkType: hard + +"@radix-ui/react-context@npm:1.0.1": + version: 1.0.1 + resolution: "@radix-ui/react-context@npm:1.0.1" + dependencies: + "@babel/runtime": "npm:^7.13.10" + peerDependencies: + "@types/react": "*" + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/a02187a3bae3a0f1be5fab5ad19c1ef06ceff1028d957e4d9994f0186f594a9c3d93ee34bacb86d1fa8eb274493362944398e1c17054d12cb3b75384f9ae564b + languageName: node + linkType: hard + +"@radix-ui/react-dialog@npm:^1.0.5": + version: 1.0.5 + resolution: "@radix-ui/react-dialog@npm:1.0.5" + dependencies: + "@babel/runtime": "npm:^7.13.10" + "@radix-ui/primitive": "npm:1.0.1" + "@radix-ui/react-compose-refs": "npm:1.0.1" + "@radix-ui/react-context": "npm:1.0.1" + "@radix-ui/react-dismissable-layer": "npm:1.0.5" + "@radix-ui/react-focus-guards": "npm:1.0.1" + "@radix-ui/react-focus-scope": "npm:1.0.4" + "@radix-ui/react-id": "npm:1.0.1" + "@radix-ui/react-portal": "npm:1.0.4" + "@radix-ui/react-presence": "npm:1.0.1" + "@radix-ui/react-primitive": "npm:1.0.3" + "@radix-ui/react-slot": "npm:1.0.2" + "@radix-ui/react-use-controllable-state": "npm:1.0.1" + aria-hidden: "npm:^1.1.1" + react-remove-scroll: "npm:2.5.5" + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 10/adbd7301586db712616a0f8dd54a25e7544853cbf61b5d6e279215d479f57ac35157847ee424d54a7e707969a926ca0a7c28934400c9ac224bd0c7cc19229aca + languageName: node + linkType: hard + +"@radix-ui/react-dismissable-layer@npm:1.0.5": + version: 1.0.5 + resolution: "@radix-ui/react-dismissable-layer@npm:1.0.5" + dependencies: + "@babel/runtime": "npm:^7.13.10" + "@radix-ui/primitive": "npm:1.0.1" + "@radix-ui/react-compose-refs": "npm:1.0.1" + "@radix-ui/react-primitive": "npm:1.0.3" + "@radix-ui/react-use-callback-ref": "npm:1.0.1" + "@radix-ui/react-use-escape-keydown": "npm:1.0.3" + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 10/f1626d69bb50ec226032bb7d8c5abaaf7359c2d7660309b0ed3daaedd91f30717573aac1a1cb82d589b7f915cf464b95a12da0a3b91b6acfefb6fbbc62b992de + languageName: node + linkType: hard + +"@radix-ui/react-focus-guards@npm:1.0.1": + version: 1.0.1 + resolution: "@radix-ui/react-focus-guards@npm:1.0.1" dependencies: - "@types/mdx": "npm:^2.0.0" + "@babel/runtime": "npm:^7.13.10" peerDependencies: - "@types/react": ">=16" - react: ">=16" - checksum: 10/d566407af11e76f498f8133fbfa8a9d8a2ad80dc7a66ca109d29fcb92e953a2d2d7aaedc0c28571d126f1967faeb126dd2e4ab4ea474c994bf5c76fa204c5997 + "@types/react": "*" + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/1f8ca8f83b884b3612788d0742f3f054e327856d90a39841a47897dbed95e114ee512362ae314177de226d05310047cabbf66b686ae86ad1b65b6b295be24ef7 languageName: node linkType: hard -"@ndelangen/get-tarball@npm:^3.0.7": - version: 3.0.9 - resolution: "@ndelangen/get-tarball@npm:3.0.9" +"@radix-ui/react-focus-scope@npm:1.0.4": + version: 1.0.4 + resolution: "@radix-ui/react-focus-scope@npm:1.0.4" dependencies: - gunzip-maybe: "npm:^1.4.2" - pump: "npm:^3.0.0" - tar-fs: "npm:^2.1.1" - checksum: 10/39697cef2b92f6e08e3590467cc6da88cd6757b2a27cb9208879c2316ed71d6be4608892ee0a86eb0343140da1a5df498f93a32c2aaf8f1fbd90f883f08b5f63 + "@babel/runtime": "npm:^7.13.10" + "@radix-ui/react-compose-refs": "npm:1.0.1" + "@radix-ui/react-primitive": "npm:1.0.3" + "@radix-ui/react-use-callback-ref": "npm:1.0.1" + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 10/3590e74c6b682737c7ac4bf8db41b3df7b09a0320f3836c619e487df9915451e5dafade9923a74383a7366c59e9436f5fff4301d70c0d15928e0e16b36e58bc9 languageName: node linkType: hard -"@nodelib/fs.scandir@npm:2.1.5": - version: 2.1.5 - resolution: "@nodelib/fs.scandir@npm:2.1.5" +"@radix-ui/react-id@npm:1.0.1": + version: 1.0.1 + resolution: "@radix-ui/react-id@npm:1.0.1" dependencies: - "@nodelib/fs.stat": "npm:2.0.5" - run-parallel: "npm:^1.1.9" - checksum: 10/6ab2a9b8a1d67b067922c36f259e3b3dfd6b97b219c540877a4944549a4d49ea5ceba5663905ab5289682f1f3c15ff441d02f0447f620a42e1cb5e1937174d4b - languageName: node - linkType: hard - -"@nodelib/fs.stat@npm:2.0.5, @nodelib/fs.stat@npm:^2.0.2": - version: 2.0.5 - resolution: "@nodelib/fs.stat@npm:2.0.5" - checksum: 10/012480b5ca9d97bff9261571dbbec7bbc6033f69cc92908bc1ecfad0792361a5a1994bc48674b9ef76419d056a03efadfce5a6cf6dbc0a36559571a7a483f6f0 + "@babel/runtime": "npm:^7.13.10" + "@radix-ui/react-use-layout-effect": "npm:1.0.1" + peerDependencies: + "@types/react": "*" + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/446a453d799cc790dd2a1583ff8328da88271bff64530b5a17c102fa7fb35eece3cf8985359d416f65e330cd81aa7b8fe984ea125fc4f4eaf4b3801d698e49fe languageName: node linkType: hard -"@nodelib/fs.walk@npm:^1.2.3, @nodelib/fs.walk@npm:^1.2.8": - version: 1.2.8 - resolution: "@nodelib/fs.walk@npm:1.2.8" +"@radix-ui/react-portal@npm:1.0.4": + version: 1.0.4 + resolution: "@radix-ui/react-portal@npm:1.0.4" dependencies: - "@nodelib/fs.scandir": "npm:2.1.5" - fastq: "npm:^1.6.0" - checksum: 10/40033e33e96e97d77fba5a238e4bba4487b8284678906a9f616b5579ddaf868a18874c0054a75402c9fbaaa033a25ceae093af58c9c30278e35c23c9479e79b0 + "@babel/runtime": "npm:^7.13.10" + "@radix-ui/react-primitive": "npm:1.0.3" + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 10/c4cf35e2f26a89703189d0eef3ceeeb706ae0832e98e558730a5e929ca7c72c7cb510413a24eca94c7732f8d659a1e81942bec7b90540cb73ce9e4885d040b64 languageName: node linkType: hard -"@npmcli/agent@npm:^2.0.0": - version: 2.2.1 - resolution: "@npmcli/agent@npm:2.2.1" +"@radix-ui/react-presence@npm:1.0.1": + version: 1.0.1 + resolution: "@radix-ui/react-presence@npm:1.0.1" dependencies: - agent-base: "npm:^7.1.0" - http-proxy-agent: "npm:^7.0.0" - https-proxy-agent: "npm:^7.0.1" - lru-cache: "npm:^10.0.1" - socks-proxy-agent: "npm:^8.0.1" - checksum: 10/d4a48128f61e47f2f5c89315a5350e265dc619987e635bd62b52b29c7ed93536e724e721418c0ce352ceece86c13043c67aba1b70c3f5cc72fce6bb746706162 + "@babel/runtime": "npm:^7.13.10" + "@radix-ui/react-compose-refs": "npm:1.0.1" + "@radix-ui/react-use-layout-effect": "npm:1.0.1" + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 10/406f0b5a54ea4e7881e15bddc3863234bb14bf3abd4a6e56ea57c6df6f9265a9ad5cfa158e3a98614f0dcbbb7c5f537e1f7158346e57cc3f29b522d62cf28823 languageName: node linkType: hard -"@npmcli/fs@npm:^3.1.0": - version: 3.1.0 - resolution: "@npmcli/fs@npm:3.1.0" +"@radix-ui/react-primitive@npm:1.0.3": + version: 1.0.3 + resolution: "@radix-ui/react-primitive@npm:1.0.3" dependencies: - semver: "npm:^7.3.5" - checksum: 10/f3a7ab3a31de65e42aeb6ed03ed035ef123d2de7af4deb9d4a003d27acc8618b57d9fb9d259fe6c28ca538032a028f37337264388ba27d26d37fff7dde22476e + "@babel/runtime": "npm:^7.13.10" + "@radix-ui/react-slot": "npm:1.0.2" + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 10/bedb934ac07c710dc5550a7bfc7065d47e099d958cde1d37e4b1947ae5451f1b7e6f8ff5965e242578bf2c619065e6038c3a3aa779e5eafa7da3e3dbc685799f languageName: node linkType: hard -"@pkgjs/parseargs@npm:^0.11.0": - version: 0.11.0 - resolution: "@pkgjs/parseargs@npm:0.11.0" - checksum: 10/115e8ceeec6bc69dff2048b35c0ab4f8bbee12d8bb6c1f4af758604586d802b6e669dcb02dda61d078de42c2b4ddce41b3d9e726d7daa6b4b850f4adbf7333ff +"@radix-ui/react-slot@npm:1.0.2, @radix-ui/react-slot@npm:^1.0.2": + version: 1.0.2 + resolution: "@radix-ui/react-slot@npm:1.0.2" + dependencies: + "@babel/runtime": "npm:^7.13.10" + "@radix-ui/react-compose-refs": "npm:1.0.1" + peerDependencies: + "@types/react": "*" + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/734866561e991438fbcf22af06e56b272ed6ee8f7b536489ee3bf2f736f8b53bf6bc14ebde94834aa0aceda854d018a0ce20bb171defffbaed1f566006cbb887 languageName: node linkType: hard -"@playwright/experimental-ct-core@npm:1.42.1": - version: 1.42.1 - resolution: "@playwright/experimental-ct-core@npm:1.42.1" +"@radix-ui/react-use-callback-ref@npm:1.0.1": + version: 1.0.1 + resolution: "@radix-ui/react-use-callback-ref@npm:1.0.1" dependencies: - playwright: "npm:1.42.1" - playwright-core: "npm:1.42.1" - vite: "npm:^5.0.12" - bin: - playwright: cli.js - checksum: 10/ec62a3f0b8c82720101741884f2c5125f1daaba01fc6c9d3eee627b28ce5f9a40f2abc44bd2f40dd1a6a1856d1540468d13b7c05e301cf576d0c8d2984ca722d + "@babel/runtime": "npm:^7.13.10" + peerDependencies: + "@types/react": "*" + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/b9fd39911c3644bbda14a84e4fca080682bef84212b8d8931fcaa2d2814465de242c4cfd8d7afb3020646bead9c5e539d478cea0a7031bee8a8a3bb164f3bc4c languageName: node linkType: hard -"@playwright/experimental-ct-react@npm:^1.42.1": - version: 1.42.1 - resolution: "@playwright/experimental-ct-react@npm:1.42.1" +"@radix-ui/react-use-controllable-state@npm:1.0.1": + version: 1.0.1 + resolution: "@radix-ui/react-use-controllable-state@npm:1.0.1" dependencies: - "@playwright/experimental-ct-core": "npm:1.42.1" - "@vitejs/plugin-react": "npm:^4.2.1" - bin: - playwright: cli.js - checksum: 10/ab9a6475c9466df397c57a65b44343b73caf115b21db2cadd1ab6057c9fef98f024b3caa459543a6686ea11cae3888f56eb40683744df237f5b30abf31d7cc35 + "@babel/runtime": "npm:^7.13.10" + "@radix-ui/react-use-callback-ref": "npm:1.0.1" + peerDependencies: + "@types/react": "*" + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/dee2be1937d293c3a492cb6d279fc11495a8f19dc595cdbfe24b434e917302f9ac91db24e8cc5af9a065f3f209c3423115b5442e65a5be9fd1e9091338972be9 languageName: node linkType: hard -"@radix-ui/react-compose-refs@npm:1.0.1": - version: 1.0.1 - resolution: "@radix-ui/react-compose-refs@npm:1.0.1" +"@radix-ui/react-use-escape-keydown@npm:1.0.3": + version: 1.0.3 + resolution: "@radix-ui/react-use-escape-keydown@npm:1.0.3" dependencies: "@babel/runtime": "npm:^7.13.10" + "@radix-ui/react-use-callback-ref": "npm:1.0.1" peerDependencies: "@types/react": "*" react: ^16.8 || ^17.0 || ^18.0 peerDependenciesMeta: "@types/react": optional: true - checksum: 10/2b9a613b6db5bff8865588b6bf4065f73021b3d16c0a90b2d4c23deceeb63612f1f15de188227ebdc5f88222cab031be617a9dd025874c0487b303be3e5cc2a8 + checksum: 10/c6ed0d9ce780f67f924980eb305af1f6cce2a8acbaf043a58abe0aa3cc551d9aa76ccee14531df89bbee302ead7ecc7fce330886f82d4672c5eda52f357ef9b8 languageName: node linkType: hard -"@radix-ui/react-slot@npm:^1.0.2": - version: 1.0.2 - resolution: "@radix-ui/react-slot@npm:1.0.2" +"@radix-ui/react-use-layout-effect@npm:1.0.1": + version: 1.0.1 + resolution: "@radix-ui/react-use-layout-effect@npm:1.0.1" dependencies: "@babel/runtime": "npm:^7.13.10" - "@radix-ui/react-compose-refs": "npm:1.0.1" peerDependencies: "@types/react": "*" react: ^16.8 || ^17.0 || ^18.0 peerDependenciesMeta: "@types/react": optional: true - checksum: 10/734866561e991438fbcf22af06e56b272ed6ee8f7b536489ee3bf2f736f8b53bf6bc14ebde94834aa0aceda854d018a0ce20bb171defffbaed1f566006cbb887 + checksum: 10/bed9c7e8de243a5ec3b93bb6a5860950b0dba359b6680c84d57c7a655e123dec9b5891c5dfe81ab970652e7779fe2ad102a23177c7896dde95f7340817d47ae5 languageName: node linkType: hard @@ -2583,11 +3114,9 @@ __metadata: resolution: "@storybook/addon-controls@portal:../../../code/addons/controls::locator=portable-stories-react%40workspace%3A." dependencies: "@storybook/blocks": "workspace:*" - "@storybook/core-common": "workspace:*" - cjs-module-lexer: "npm:^1.2.3" - es-module-lexer: "npm:^1.5.0" - globby: "npm:^14.0.1" + dequal: "npm:^2.0.2" lodash: "npm:^4.17.21" + telejson: "npm:^7.2.0" ts-dedent: "npm:^2.0.0" languageName: node linkType: soft @@ -2596,7 +3125,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/addon-docs@portal:../../../code/addons/docs::locator=portable-stories-react%40workspace%3A." dependencies: - "@babel/core": "npm:^7.12.3" + "@babel/core": "npm:^7.24.4" "@mdx-js/react": "npm:^3.0.0" "@storybook/blocks": "workspace:*" "@storybook/client-logger": "workspace:*" @@ -2701,7 +3230,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:^0.1.4" "@storybook/docs-tools": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" @@ -2805,8 +3334,8 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/cli@portal:../../../code/lib/cli::locator=portable-stories-react%40workspace%3A." dependencies: - "@babel/core": "npm:^7.23.0" - "@babel/types": "npm:^7.23.0" + "@babel/core": "npm:^7.24.4" + "@babel/types": "npm:^7.24.0" "@ndelangen/get-tarball": "npm:^3.0.7" "@storybook/codemod": "workspace:*" "@storybook/core-common": "workspace:*" @@ -2859,10 +3388,10 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/codemod@portal:../../../code/lib/codemod::locator=portable-stories-react%40workspace%3A." dependencies: - "@babel/core": "npm:^7.23.2" - "@babel/preset-env": "npm:^7.23.2" - "@babel/types": "npm:^7.23.0" - "@storybook/csf": "npm:^0.1.2" + "@babel/core": "npm:^7.24.4" + "@babel/preset-env": "npm:^7.24.4" + "@babel/types": "npm:^7.24.0" + "@storybook/csf": "npm:^0.1.4" "@storybook/csf-tools": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/types": "workspace:*" @@ -2881,9 +3410,10 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/components@portal:../../../code/ui/components::locator=portable-stories-react%40workspace%3A." dependencies: + "@radix-ui/react-dialog": "npm:^1.0.5" "@radix-ui/react-slot": "npm:^1.0.2" "@storybook/client-logger": "workspace:*" - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:^0.1.4" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" "@storybook/theming": "workspace:*" @@ -2921,6 +3451,7 @@ __metadata: node-fetch: "npm:^2.0.0" picomatch: "npm:^2.3.0" pkg-dir: "npm:^5.0.0" + prettier-fallback: "npm:prettier@^3" pretty-hrtime: "npm:^1.0.3" resolve-from: "npm:^5.0.0" semver: "npm:^7.3.7" @@ -2928,6 +3459,11 @@ __metadata: tiny-invariant: "npm:^1.3.1" ts-dedent: "npm:^2.0.0" util: "npm:^0.12.4" + peerDependencies: + prettier: ^2 || ^3 + peerDependenciesMeta: + prettier: + optional: true languageName: node linkType: soft @@ -2935,6 +3471,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/core-events@portal:../../../code/lib/core-events::locator=portable-stories-react%40workspace%3A." dependencies: + "@storybook/csf": "npm:^0.1.4" ts-dedent: "npm:^2.0.0" languageName: node linkType: soft @@ -2944,13 +3481,14 @@ __metadata: resolution: "@storybook/core-server@portal:../../../code/lib/core-server::locator=portable-stories-react%40workspace%3A." dependencies: "@aw-web-design/x-default-browser": "npm:1.4.126" - "@babel/core": "npm:^7.23.9" + "@babel/core": "npm:^7.24.4" + "@babel/parser": "npm:^7.24.4" "@discoveryjs/json-ext": "npm:^0.5.3" "@storybook/builder-manager": "workspace:*" "@storybook/channels": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:^0.1.4" "@storybook/csf-tools": "workspace:*" "@storybook/docs-mdx": "npm:3.0.0" "@storybook/global": "npm:^5.0.0" @@ -2961,6 +3499,7 @@ __metadata: "@storybook/telemetry": "workspace:*" "@storybook/types": "workspace:*" "@types/detect-port": "npm:^1.3.0" + "@types/diff": "npm:^5.0.9" "@types/node": "npm:^18.0.0" "@types/pretty-hrtime": "npm:^1.0.0" "@types/semver": "npm:^7.3.4" @@ -2969,6 +3508,7 @@ __metadata: cli-table3: "npm:^0.6.1" compression: "npm:^1.7.4" detect-port: "npm:^1.3.0" + diff: "npm:^5.2.0" express: "npm:^4.17.3" fs-extra: "npm:^11.1.0" globby: "npm:^14.0.1" @@ -3002,11 +3542,11 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/csf-tools@portal:../../../code/lib/csf-tools::locator=portable-stories-react%40workspace%3A." dependencies: - "@babel/generator": "npm:^7.23.0" - "@babel/parser": "npm:^7.23.0" - "@babel/traverse": "npm:^7.23.2" - "@babel/types": "npm:^7.23.0" - "@storybook/csf": "npm:^0.1.2" + "@babel/generator": "npm:^7.24.4" + "@babel/parser": "npm:^7.24.4" + "@babel/traverse": "npm:^7.24.1" + "@babel/types": "npm:^7.24.0" + "@storybook/csf": "npm:^0.1.4" "@storybook/types": "workspace:*" fs-extra: "npm:^11.1.0" recast: "npm:^0.23.5" @@ -3023,12 +3563,12 @@ __metadata: languageName: node linkType: hard -"@storybook/csf@npm:^0.1.2": - version: 0.1.2 - resolution: "@storybook/csf@npm:0.1.2" +"@storybook/csf@npm:^0.1.4": + version: 0.1.4 + resolution: "@storybook/csf@npm:0.1.4" dependencies: type-fest: "npm:^2.19.0" - checksum: 10/11168df65e7b6bd0e5d31e7e805c8ba80397fc190cb33424e043b72bbd85d8f826dba082503992d7f606b72484337ab9d091eca947550613e241fbef57780d4c + checksum: 10/105f3bd748613b775e87454a8470e36733d0ac25b4b88aa9dbebe060f92ff8d5fda1c98289657039d980ecc8d4d59079ef559a42e211568dc97e19d245117156 languageName: node linkType: hard @@ -3044,6 +3584,7 @@ __metadata: resolution: "@storybook/docs-tools@portal:../../../code/lib/docs-tools::locator=portable-stories-react%40workspace%3A." dependencies: "@storybook/core-common": "workspace:*" + "@storybook/core-events": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/types": "workspace:*" "@types/doctrine": "npm:^0.0.3" @@ -3091,7 +3632,7 @@ __metadata: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:^0.1.4" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" "@storybook/router": "workspace:*" @@ -3125,7 +3666,7 @@ __metadata: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:^0.1.4" "@storybook/global": "npm:^5.0.0" "@storybook/types": "workspace:*" "@types/qs": "npm:^6.9.5" @@ -3248,7 +3789,6 @@ __metadata: "@testing-library/user-event": "npm:^14.5.2" "@vitest/expect": "npm:1.3.1" "@vitest/spy": "npm:^1.3.1" - chai: "npm:^4.4.1" util: "npm:^0.12.4" languageName: node linkType: soft @@ -3587,6 +4127,13 @@ __metadata: languageName: node linkType: hard +"@types/diff@npm:^5.0.9": + version: 5.2.0 + resolution: "@types/diff@npm:5.2.0" + checksum: 10/e1d3e6e9fd9d5386496c8716dd89316288d139cd8159a064f886a079149d05d65289b7b725ce1e333d4e77ce8024e210c6e281e9875a636fc17b4c760c2cf85f + languageName: node + linkType: hard + "@types/doctrine@npm:^0.0.3": version: 0.0.3 resolution: "@types/doctrine@npm:0.0.3" @@ -4464,6 +5011,15 @@ __metadata: languageName: node linkType: hard +"aria-hidden@npm:^1.1.1": + version: 1.2.4 + resolution: "aria-hidden@npm:1.2.4" + dependencies: + tslib: "npm:^2.0.0" + checksum: 10/df4bc15423aaaba3729a7d40abcbf6d3fffa5b8fd5eb33d3ac8b7da0110c47552fca60d97f2e1edfbb68a27cae1da499f1c3896966efb3e26aac4e3b57e3cc8b + languageName: node + linkType: hard + "aria-query@npm:5.1.3": version: 5.1.3 resolution: "aria-query@npm:5.1.3" @@ -4653,39 +5209,39 @@ __metadata: languageName: node linkType: hard -"babel-plugin-polyfill-corejs2@npm:^0.4.8": - version: 0.4.8 - resolution: "babel-plugin-polyfill-corejs2@npm:0.4.8" +"babel-plugin-polyfill-corejs2@npm:^0.4.10": + version: 0.4.11 + resolution: "babel-plugin-polyfill-corejs2@npm:0.4.11" dependencies: "@babel/compat-data": "npm:^7.22.6" - "@babel/helper-define-polyfill-provider": "npm:^0.5.0" + "@babel/helper-define-polyfill-provider": "npm:^0.6.2" semver: "npm:^6.3.1" peerDependencies: "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0 - checksum: 10/6b5a79bdc1c43edf857fd3a82966b3c7ff4a90eee00ca8d663e0a98304d6e285a05759d64a4dbc16e04a2a5ea1f248673d8bf789711be5e694e368f19884887c + checksum: 10/9c79908bed61b9f52190f254e22d3dca6ce25769738642579ba8d23832f3f9414567a90d8367a31831fa45d9b9607ac43d8d07ed31167d8ca8cda22871f4c7a1 languageName: node linkType: hard -"babel-plugin-polyfill-corejs3@npm:^0.9.0": - version: 0.9.0 - resolution: "babel-plugin-polyfill-corejs3@npm:0.9.0" +"babel-plugin-polyfill-corejs3@npm:^0.10.4": + version: 0.10.4 + resolution: "babel-plugin-polyfill-corejs3@npm:0.10.4" dependencies: - "@babel/helper-define-polyfill-provider": "npm:^0.5.0" - core-js-compat: "npm:^3.34.0" + "@babel/helper-define-polyfill-provider": "npm:^0.6.1" + core-js-compat: "npm:^3.36.1" peerDependencies: "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0 - checksum: 10/efdf9ba82e7848a2c66e0522adf10ac1646b16f271a9006b61a22f976b849de22a07c54c8826887114842ccd20cc9a4617b61e8e0789227a74378ab508e715cd + checksum: 10/a69ed5a95bb55e9b7ea37307d56113f7e24054d479c15de6d50fa61388b5334bed1f9b6414cde6c575fa910a4de4d1ab4f2d22720967d57c4fec9d1b8f61b355 languageName: node linkType: hard -"babel-plugin-polyfill-regenerator@npm:^0.5.5": - version: 0.5.5 - resolution: "babel-plugin-polyfill-regenerator@npm:0.5.5" +"babel-plugin-polyfill-regenerator@npm:^0.6.1": + version: 0.6.2 + resolution: "babel-plugin-polyfill-regenerator@npm:0.6.2" dependencies: - "@babel/helper-define-polyfill-provider": "npm:^0.5.0" + "@babel/helper-define-polyfill-provider": "npm:^0.6.2" peerDependencies: "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0 - checksum: 10/3a9b4828673b23cd648dcfb571eadcd9d3fadfca0361d0a7c6feeb5a30474e92faaa49f067a6e1c05e49b6a09812879992028ff3ef3446229ff132d6e1de7eb6 + checksum: 10/150233571072b6b3dfe946242da39cba8587b7f908d1c006f7545fc88b0e3c3018d445739beb61e7a75835f0c2751dbe884a94ff9b245ec42369d9267e0e1b3f languageName: node linkType: hard @@ -4867,7 +5423,7 @@ __metadata: languageName: node linkType: hard -"browserslist@npm:^4.22.2, browserslist@npm:^4.22.3": +"browserslist@npm:^4.22.2, browserslist@npm:^4.22.3, browserslist@npm:^4.23.0": version: 4.23.0 resolution: "browserslist@npm:4.23.0" dependencies: @@ -5003,7 +5559,7 @@ __metadata: languageName: node linkType: hard -"chai@npm:^4.3.10, chai@npm:^4.4.1": +"chai@npm:^4.3.10": version: 4.4.1 resolution: "chai@npm:4.4.1" dependencies: @@ -5121,7 +5677,7 @@ __metadata: languageName: node linkType: hard -"cjs-module-lexer@npm:^1.0.0, cjs-module-lexer@npm:^1.2.3": +"cjs-module-lexer@npm:^1.0.0": version: 1.2.3 resolution: "cjs-module-lexer@npm:1.2.3" checksum: 10/f96a5118b0a012627a2b1c13bd2fcb92509778422aaa825c5da72300d6dcadfb47134dd2e9d97dfa31acd674891dd91642742772d19a09a8adc3e56bd2f5928c @@ -5361,7 +5917,7 @@ __metadata: languageName: node linkType: hard -"core-js-compat@npm:^3.31.0, core-js-compat@npm:^3.34.0": +"core-js-compat@npm:^3.31.0": version: 3.36.0 resolution: "core-js-compat@npm:3.36.0" dependencies: @@ -5370,6 +5926,15 @@ __metadata: languageName: node linkType: hard +"core-js-compat@npm:^3.36.1": + version: 3.37.0 + resolution: "core-js-compat@npm:3.37.0" + dependencies: + browserslist: "npm:^4.23.0" + checksum: 10/5f33d7ba45acc9ceb45544d844090edfd14e46a64c2424df24084347405182c1156588cc3a877fc580c005a0b13b8a1af26bb6c73fe73f22eede89b5483b482d + languageName: node + linkType: hard + "core-util-is@npm:1.0.2": version: 1.0.2 resolution: "core-util-is@npm:1.0.2" @@ -5746,6 +6311,13 @@ __metadata: languageName: node linkType: hard +"detect-node-es@npm:^1.1.0": + version: 1.1.0 + resolution: "detect-node-es@npm:1.1.0" + checksum: 10/e46307d7264644975b71c104b9f028ed1d3d34b83a15b8a22373640ce5ea630e5640b1078b8ea15f202b54641da71e4aa7597093bd4b91f113db520a26a37449 + languageName: node + linkType: hard + "detect-package-manager@npm:^2.0.1": version: 2.0.1 resolution: "detect-package-manager@npm:2.0.1" @@ -5775,6 +6347,13 @@ __metadata: languageName: node linkType: hard +"diff@npm:^5.2.0": + version: 5.2.0 + resolution: "diff@npm:5.2.0" + checksum: 10/01b7b440f83a997350a988e9d2f558366c0f90f15be19f4aa7f1bb3109a4e153dfc3b9fbf78e14ea725717017407eeaa2271e3896374a0181e8f52445740846d + languageName: node + linkType: hard + "dir-glob@npm:^3.0.1": version: 3.0.1 resolution: "dir-glob@npm:3.0.1" @@ -7030,6 +7609,13 @@ __metadata: languageName: node linkType: hard +"get-nonce@npm:^1.0.0": + version: 1.0.1 + resolution: "get-nonce@npm:1.0.1" + checksum: 10/ad5104871d114a694ecc506a2d406e2331beccb961fe1e110dc25556b38bcdbf399a823a8a375976cd8889668156a9561e12ebe3fa6a4c6ba169c8466c2ff868 + languageName: node + linkType: hard + "get-npm-tarball-url@npm:^2.0.3": version: 2.1.0 resolution: "get-npm-tarball-url@npm:2.1.0" @@ -7616,6 +8202,15 @@ __metadata: languageName: node linkType: hard +"invariant@npm:^2.2.4": + version: 2.2.4 + resolution: "invariant@npm:2.2.4" + dependencies: + loose-envify: "npm:^1.0.0" + checksum: 10/cc3182d793aad82a8d1f0af697b462939cb46066ec48bbf1707c150ad5fad6406137e91a262022c269702e01621f35ef60269f6c0d7fd178487959809acdfb14 + languageName: node + linkType: hard + "ip-address@npm:^9.0.5": version: 9.0.5 resolution: "ip-address@npm:9.0.5" @@ -8978,7 +9573,7 @@ __metadata: languageName: node linkType: hard -"loose-envify@npm:^1.1.0, loose-envify@npm:^1.4.0": +"loose-envify@npm:^1.0.0, loose-envify@npm:^1.1.0, loose-envify@npm:^1.4.0": version: 1.4.0 resolution: "loose-envify@npm:1.4.0" dependencies: @@ -10056,7 +10651,7 @@ __metadata: languageName: node linkType: hard -"prettier@npm:^3.1.1": +"prettier-fallback@npm:prettier@^3, prettier@npm:^3.1.1": version: 3.2.5 resolution: "prettier@npm:3.2.5" bin: @@ -10387,6 +10982,58 @@ __metadata: languageName: node linkType: hard +"react-remove-scroll-bar@npm:^2.3.3": + version: 2.3.6 + resolution: "react-remove-scroll-bar@npm:2.3.6" + dependencies: + react-style-singleton: "npm:^2.2.1" + tslib: "npm:^2.0.0" + peerDependencies: + "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/5ab8eda61d5b10825447d11e9c824486c929351a471457c22452caa19b6898e18c3af6a46c3fa68010c713baed1eb9956106d068b4a1058bdcf97a1a9bbed734 + languageName: node + linkType: hard + +"react-remove-scroll@npm:2.5.5": + version: 2.5.5 + resolution: "react-remove-scroll@npm:2.5.5" + dependencies: + react-remove-scroll-bar: "npm:^2.3.3" + react-style-singleton: "npm:^2.2.1" + tslib: "npm:^2.1.0" + use-callback-ref: "npm:^1.3.0" + use-sidecar: "npm:^1.1.2" + peerDependencies: + "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/f0646ac384ce3852d1f41e30a9f9e251b11cf3b430d1d114c937c8fa7f90a895c06378d0d6b6ff0b2d00cbccf15e845921944fd6074ae67a0fb347a718106d88 + languageName: node + linkType: hard + +"react-style-singleton@npm:^2.2.1": + version: 2.2.1 + resolution: "react-style-singleton@npm:2.2.1" + dependencies: + get-nonce: "npm:^1.0.0" + invariant: "npm:^2.2.4" + tslib: "npm:^2.0.0" + peerDependencies: + "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/80c58fd6aac3594e351e2e7b048d8a5b09508adb21031a38b3c40911fe58295572eddc640d4b20a7be364842c8ed1120fe30097e22ea055316b375b88d4ff02a + languageName: node + linkType: hard + "react@npm:^16.8.0 || ^17.0.0 || ^18.0.0, react@npm:^18.2.0": version: 18.2.0 resolution: "react@npm:18.2.0" @@ -11625,7 +12272,7 @@ __metadata: languageName: node linkType: hard -"tslib@npm:^2.0.1, tslib@npm:^2.1.0, tslib@npm:^2.4.0": +"tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.1.0, tslib@npm:^2.4.0": version: 2.6.2 resolution: "tslib@npm:2.6.2" checksum: 10/bd26c22d36736513980091a1e356378e8b662ded04204453d353a7f34a4c21ed0afc59b5f90719d4ba756e581a162ecbf93118dc9c6be5acf70aa309188166ca @@ -11938,6 +12585,37 @@ __metadata: languageName: node linkType: hard +"use-callback-ref@npm:^1.3.0": + version: 1.3.2 + resolution: "use-callback-ref@npm:1.3.2" + dependencies: + tslib: "npm:^2.0.0" + peerDependencies: + "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/3be76eae71b52ab233b4fde974eddeff72e67e6723100a0c0297df4b0d60daabedfa706ffb314d0a52645f2c1235e50fdbd53d99f374eb5df68c74d412e98a9b + languageName: node + linkType: hard + +"use-sidecar@npm:^1.1.2": + version: 1.1.2 + resolution: "use-sidecar@npm:1.1.2" + dependencies: + detect-node-es: "npm:^1.1.0" + tslib: "npm:^2.0.0" + peerDependencies: + "@types/react": ^16.9.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/ec99e31aefeb880f6dc4d02cb19a01d123364954f857811470ece32872f70d6c3eadbe4d073770706a9b7db6136f2a9fbf1bb803e07fbb21e936a47479281690 + languageName: node + linkType: hard + "util-deprecate@npm:^1.0.1, util-deprecate@npm:^1.0.2, util-deprecate@npm:~1.0.1": version: 1.0.2 resolution: "util-deprecate@npm:1.0.2" diff --git a/test-storybooks/portable-stories-kitchen-sink/svelte/yarn.lock b/test-storybooks/portable-stories-kitchen-sink/svelte/yarn.lock index 24ddbf299123..6f1ba695f773 100644 --- a/test-storybooks/portable-stories-kitchen-sink/svelte/yarn.lock +++ b/test-storybooks/portable-stories-kitchen-sink/svelte/yarn.lock @@ -50,6 +50,16 @@ __metadata: languageName: node linkType: hard +"@babel/code-frame@npm:^7.24.1, @babel/code-frame@npm:^7.24.2": + version: 7.24.2 + resolution: "@babel/code-frame@npm:7.24.2" + dependencies: + "@babel/highlight": "npm:^7.24.2" + picocolors: "npm:^1.0.0" + checksum: 10/7db8f5b36ffa3f47a37f58f61e3d130b9ecad21961f3eede7e2a4ac2c7e4a5efb6e9d03a810c669bc986096831b6c0dfc2c3082673d93351b82359c1b03e0590 + languageName: node + linkType: hard + "@babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.23.5": version: 7.23.5 resolution: "@babel/compat-data@npm:7.23.5" @@ -57,7 +67,14 @@ __metadata: languageName: node linkType: hard -"@babel/core@npm:^7.12.3, @babel/core@npm:^7.23.0, @babel/core@npm:^7.23.2, @babel/core@npm:^7.23.9": +"@babel/compat-data@npm:^7.24.4": + version: 7.24.4 + resolution: "@babel/compat-data@npm:7.24.4" + checksum: 10/e51faec0ac8259f03cc5029d2b4a944b4fee44cb5188c11530769d5beb81f384d031dba951febc3e33dbb48ceb8045b1184f5c1ac4c5f86ab1f5e951e9aaf7af + languageName: node + linkType: hard + +"@babel/core@npm:^7.23.0": version: 7.24.0 resolution: "@babel/core@npm:7.24.0" dependencies: @@ -80,7 +97,30 @@ __metadata: languageName: node linkType: hard -"@babel/generator@npm:^7.23.0, @babel/generator@npm:^7.23.6": +"@babel/core@npm:^7.24.4": + version: 7.24.4 + resolution: "@babel/core@npm:7.24.4" + dependencies: + "@ampproject/remapping": "npm:^2.2.0" + "@babel/code-frame": "npm:^7.24.2" + "@babel/generator": "npm:^7.24.4" + "@babel/helper-compilation-targets": "npm:^7.23.6" + "@babel/helper-module-transforms": "npm:^7.23.3" + "@babel/helpers": "npm:^7.24.4" + "@babel/parser": "npm:^7.24.4" + "@babel/template": "npm:^7.24.0" + "@babel/traverse": "npm:^7.24.1" + "@babel/types": "npm:^7.24.0" + convert-source-map: "npm:^2.0.0" + debug: "npm:^4.1.0" + gensync: "npm:^1.0.0-beta.2" + json5: "npm:^2.2.3" + semver: "npm:^6.3.1" + checksum: 10/1e049f8df26be0fe5be36173fd7c33dfb004eeeec28152fea83c90e71784f9a6f2237296f43a2ee7d9041e2a33a05f43da48ce2d4e0cd473a682328ca07ce7e0 + languageName: node + linkType: hard + +"@babel/generator@npm:^7.23.6": version: 7.23.6 resolution: "@babel/generator@npm:7.23.6" dependencies: @@ -92,6 +132,18 @@ __metadata: languageName: node linkType: hard +"@babel/generator@npm:^7.24.1, @babel/generator@npm:^7.24.4": + version: 7.24.4 + resolution: "@babel/generator@npm:7.24.4" + dependencies: + "@babel/types": "npm:^7.24.0" + "@jridgewell/gen-mapping": "npm:^0.3.5" + "@jridgewell/trace-mapping": "npm:^0.3.25" + jsesc: "npm:^2.5.1" + checksum: 10/69e1772dcf8f95baec951f422cca091d59a3f29b5eedc989ad87f7262289b94625983f6fe654302ca17aae0a32f9232332b83fcc85533311d6267b09c58b1061 + languageName: node + linkType: hard + "@babel/helper-annotate-as-pure@npm:^7.22.5": version: 7.22.5 resolution: "@babel/helper-annotate-as-pure@npm:7.22.5" @@ -110,7 +162,7 @@ __metadata: languageName: node linkType: hard -"@babel/helper-compilation-targets@npm:^7.22.15, @babel/helper-compilation-targets@npm:^7.22.6, @babel/helper-compilation-targets@npm:^7.23.6": +"@babel/helper-compilation-targets@npm:^7.22.6, @babel/helper-compilation-targets@npm:^7.23.6": version: 7.23.6 resolution: "@babel/helper-compilation-targets@npm:7.23.6" dependencies: @@ -142,6 +194,25 @@ __metadata: languageName: node linkType: hard +"@babel/helper-create-class-features-plugin@npm:^7.24.1, @babel/helper-create-class-features-plugin@npm:^7.24.4": + version: 7.24.4 + resolution: "@babel/helper-create-class-features-plugin@npm:7.24.4" + dependencies: + "@babel/helper-annotate-as-pure": "npm:^7.22.5" + "@babel/helper-environment-visitor": "npm:^7.22.20" + "@babel/helper-function-name": "npm:^7.23.0" + "@babel/helper-member-expression-to-functions": "npm:^7.23.0" + "@babel/helper-optimise-call-expression": "npm:^7.22.5" + "@babel/helper-replace-supers": "npm:^7.24.1" + "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5" + "@babel/helper-split-export-declaration": "npm:^7.22.6" + semver: "npm:^6.3.1" + peerDependencies: + "@babel/core": ^7.0.0 + checksum: 10/86153719d98e4402f92f24d6b1be94e6b59c0236a6cc36b173a570a64b5156dbc2f16ccfe3c8485dc795524ca88acca65b14863be63049586668c45567f2acd4 + languageName: node + linkType: hard + "@babel/helper-create-regexp-features-plugin@npm:^7.18.6, @babel/helper-create-regexp-features-plugin@npm:^7.22.15, @babel/helper-create-regexp-features-plugin@npm:^7.22.5": version: 7.22.15 resolution: "@babel/helper-create-regexp-features-plugin@npm:7.22.15" @@ -155,9 +226,9 @@ __metadata: languageName: node linkType: hard -"@babel/helper-define-polyfill-provider@npm:^0.5.0": - version: 0.5.0 - resolution: "@babel/helper-define-polyfill-provider@npm:0.5.0" +"@babel/helper-define-polyfill-provider@npm:^0.6.1": + version: 0.6.1 + resolution: "@babel/helper-define-polyfill-provider@npm:0.6.1" dependencies: "@babel/helper-compilation-targets": "npm:^7.22.6" "@babel/helper-plugin-utils": "npm:^7.22.5" @@ -166,13 +237,13 @@ __metadata: resolve: "npm:^1.14.2" peerDependencies: "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0 - checksum: 10/f849e816ec4b182a3e8fa8e09ff016f88bb95259cd6b2190b815c48f83c3d3b68e973a8ec72acc5086bfe93705cbd46ec089c06476421d858597780e42235a03 + checksum: 10/316e7c0f05d2ae233d5fbb622c6339436da8d2b2047be866b64a16e6996c078a23b4adfebbdb33bc6a9882326a6cc20b95daa79a5e0edc92e9730e36d45fa523 languageName: node linkType: hard -"@babel/helper-define-polyfill-provider@npm:^0.6.1": - version: 0.6.1 - resolution: "@babel/helper-define-polyfill-provider@npm:0.6.1" +"@babel/helper-define-polyfill-provider@npm:^0.6.2": + version: 0.6.2 + resolution: "@babel/helper-define-polyfill-provider@npm:0.6.2" dependencies: "@babel/helper-compilation-targets": "npm:^7.22.6" "@babel/helper-plugin-utils": "npm:^7.22.5" @@ -181,7 +252,7 @@ __metadata: resolve: "npm:^1.14.2" peerDependencies: "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0 - checksum: 10/316e7c0f05d2ae233d5fbb622c6339436da8d2b2047be866b64a16e6996c078a23b4adfebbdb33bc6a9882326a6cc20b95daa79a5e0edc92e9730e36d45fa523 + checksum: 10/bb32ec12024d3f16e70641bc125d2534a97edbfdabbc9f69001ec9c4ce46f877c7a224c566aa6c8c510c3b0def2e43dc4433bf6a40896ba5ce0cef4ea5ccbcff languageName: node linkType: hard @@ -229,6 +300,15 @@ __metadata: languageName: node linkType: hard +"@babel/helper-module-imports@npm:^7.24.1": + version: 7.24.3 + resolution: "@babel/helper-module-imports@npm:7.24.3" + dependencies: + "@babel/types": "npm:^7.24.0" + checksum: 10/42fe124130b78eeb4bb6af8c094aa749712be0f4606f46716ce74bc18a5ea91c918c547c8bb2307a2e4b33f163e4ad2cb6a7b45f80448e624eae45b597ea3499 + languageName: node + linkType: hard + "@babel/helper-module-transforms@npm:^7.23.3": version: 7.23.3 resolution: "@babel/helper-module-transforms@npm:7.23.3" @@ -286,6 +366,19 @@ __metadata: languageName: node linkType: hard +"@babel/helper-replace-supers@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/helper-replace-supers@npm:7.24.1" + dependencies: + "@babel/helper-environment-visitor": "npm:^7.22.20" + "@babel/helper-member-expression-to-functions": "npm:^7.23.0" + "@babel/helper-optimise-call-expression": "npm:^7.22.5" + peerDependencies: + "@babel/core": ^7.0.0 + checksum: 10/1103b28ce0cc7fba903c21bc78035c696ff191bdbbe83c20c37030a2e10ae6254924556d942cdf8c44c48ba606a8266fdb105e6bb10945de9285f79cb1905df1 + languageName: node + linkType: hard + "@babel/helper-simple-access@npm:^7.22.5": version: 7.22.5 resolution: "@babel/helper-simple-access@npm:7.22.5" @@ -356,6 +449,17 @@ __metadata: languageName: node linkType: hard +"@babel/helpers@npm:^7.24.4": + version: 7.24.4 + resolution: "@babel/helpers@npm:7.24.4" + dependencies: + "@babel/template": "npm:^7.24.0" + "@babel/traverse": "npm:^7.24.1" + "@babel/types": "npm:^7.24.0" + checksum: 10/54a9d0f86f2803fcc216cfa23b66b871ea0fa0a892af1c9a79075872c2437de71afbb150ed8216f30e00b19a0b9c5c9d5845173d170e1ebfbbf8887839b89dde + languageName: node + linkType: hard + "@babel/highlight@npm:^7.23.4": version: 7.23.4 resolution: "@babel/highlight@npm:7.23.4" @@ -367,6 +471,18 @@ __metadata: languageName: node linkType: hard +"@babel/highlight@npm:^7.24.2": + version: 7.24.2 + resolution: "@babel/highlight@npm:7.24.2" + dependencies: + "@babel/helper-validator-identifier": "npm:^7.22.20" + chalk: "npm:^2.4.2" + js-tokens: "npm:^4.0.0" + picocolors: "npm:^1.0.0" + checksum: 10/4555124235f34403bb28f55b1de58edf598491cc181c75f8afc8fe529903cb598cd52fe3bf2faab9bc1f45c299681ef0e44eea7a848bb85c500c5a4fe13f54f6 + languageName: node + linkType: hard + "@babel/parser@npm:^7.23.0, @babel/parser@npm:^7.24.0": version: 7.24.0 resolution: "@babel/parser@npm:7.24.0" @@ -376,39 +492,60 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.23.3" +"@babel/parser@npm:^7.24.1, @babel/parser@npm:^7.24.4": + version: 7.24.4 + resolution: "@babel/parser@npm:7.24.4" + bin: + parser: ./bin/babel-parser.js + checksum: 10/3742cc5068036287e6395269dce5a2735e6349cdc8d4b53297c75f98c580d7e1c8cb43235623999d151f2ef975d677dbc2c2357573a1855caa71c271bf3046c9 + languageName: node + linkType: hard + +"@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:^7.24.4": + version: 7.24.4 + resolution: "@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:7.24.4" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-environment-visitor": "npm:^7.22.20" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0 - checksum: 10/ddbaf2c396b7780f15e80ee01d6dd790db076985f3dfeb6527d1a8d4cacf370e49250396a3aa005b2c40233cac214a106232f83703d5e8491848bde273938232 + checksum: 10/1439e2ceec512b72f05f036503bf2c31e807d1b75ae22cf2676145e9f20740960a1c9575ea3065c6fb9f44f6b46163aab76eac513694ffa10de674e3cdd6219e languageName: node linkType: hard -"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:7.23.3" +"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" + peerDependencies: + "@babel/core": ^7.0.0 + checksum: 10/ec5fddc8db6de0e0082a883f21141d6f4f9f9f0bc190d662a732b5e9a506aae5d7d2337049a1bf055d7cb7add6f128036db6d4f47de5e9ac1be29e043c8b7ca8 + languageName: node + linkType: hard + +"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:7.24.1" + dependencies: + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5" - "@babel/plugin-transform-optional-chaining": "npm:^7.23.3" + "@babel/plugin-transform-optional-chaining": "npm:^7.24.1" peerDependencies: "@babel/core": ^7.13.0 - checksum: 10/434b9d710ae856fa1a456678cc304fbc93915af86d581ee316e077af746a709a741ea39d7e1d4f5b98861b629cc7e87f002d3138f5e836775632466d4c74aef2 + checksum: 10/e18235463e716ac2443938aaec3c18b40c417a1746fba0fa4c26cf4d71326b76ef26c002081ab1b445abfae98e063d561519aa55672dddc1ef80b3940211ffbb languageName: node linkType: hard -"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:^7.23.7": - version: 7.23.7 - resolution: "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:7.23.7" +"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:7.24.1" dependencies: "@babel/helper-environment-visitor": "npm:^7.22.20" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0 - checksum: 10/3b0c9554cd0048e6e7341d7b92f29d400dbc6a5a4fc2f86dbed881d32e02ece9b55bc520387bae2eac22a5ab38a0b205c29b52b181294d99b4dd75e27309b548 + checksum: 10/3483f329bb099b438d05e5e206229ddbc1703972a69ba0240a796b5477369930b0ab2e7f6c9539ecad2cea8b0c08fa65498778b92cf87ad3d156f613de1fd2fa languageName: node linkType: hard @@ -487,25 +624,25 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-syntax-import-assertions@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-syntax-import-assertions@npm:7.23.3" +"@babel/plugin-syntax-import-assertions@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-syntax-import-assertions@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/883e6b35b2da205138caab832d54505271a3fee3fc1e8dc0894502434fc2b5d517cbe93bbfbfef8068a0fb6ec48ebc9eef3f605200a489065ba43d8cddc1c9a7 + checksum: 10/2a463928a63b62052e9fb8f8b0018aa11a926e94f32c168260ae012afe864875c6176c6eb361e13f300542c31316dad791b08a5b8ed92436a3095c7a0e4fce65 languageName: node linkType: hard -"@babel/plugin-syntax-import-attributes@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-syntax-import-attributes@npm:7.23.3" +"@babel/plugin-syntax-import-attributes@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-syntax-import-attributes@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/9aed7661ffb920ca75df9f494757466ca92744e43072e0848d87fa4aa61a3f2ee5a22198ac1959856c036434b5614a8f46f1fb70298835dbe28220cdd1d4c11e + checksum: 10/87c8aa4a5ef931313f956871b27f2c051556f627b97ed21e9a5890ca4906b222d89062a956cde459816f5e0dec185ff128d7243d3fdc389504522acb88f0464e languageName: node linkType: hard @@ -653,67 +790,67 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-arrow-functions@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-arrow-functions@npm:7.23.3" +"@babel/plugin-transform-arrow-functions@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-arrow-functions@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/1e99118176e5366c2636064d09477016ab5272b2a92e78b8edb571d20bc3eaa881789a905b20042942c3c2d04efc530726cf703f937226db5ebc495f5d067e66 + checksum: 10/58f9aa9b0de8382f8cfa3f1f1d40b69d98cd2f52340e2391733d0af745fdddda650ba392e509bc056157c880a2f52834a38ab2c5aa5569af8c61bb6ecbf45f34 languageName: node linkType: hard -"@babel/plugin-transform-async-generator-functions@npm:^7.23.9": - version: 7.23.9 - resolution: "@babel/plugin-transform-async-generator-functions@npm:7.23.9" +"@babel/plugin-transform-async-generator-functions@npm:^7.24.3": + version: 7.24.3 + resolution: "@babel/plugin-transform-async-generator-functions@npm:7.24.3" dependencies: "@babel/helper-environment-visitor": "npm:^7.22.20" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/helper-remap-async-to-generator": "npm:^7.22.20" "@babel/plugin-syntax-async-generators": "npm:^7.8.4" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/d402494087a6b803803eb5ab46b837aab100a04c4c5148e38bfa943ea1bbfc1ecfb340f1ced68972564312d3580f550c125f452372e77607a558fbbaf98c31c0 + checksum: 10/4ccc3755a3d51544cd43575db2c5c2ef42cdcd35bd5940d13cdf23f04c75496290e79ea585a62427ec6bd508a1bffb329e01556cd1114be9b38ae4254935cd19 languageName: node linkType: hard -"@babel/plugin-transform-async-to-generator@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-async-to-generator@npm:7.23.3" +"@babel/plugin-transform-async-to-generator@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-async-to-generator@npm:7.24.1" dependencies: - "@babel/helper-module-imports": "npm:^7.22.15" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-module-imports": "npm:^7.24.1" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/helper-remap-async-to-generator": "npm:^7.22.20" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/2e9d9795d4b3b3d8090332104e37061c677f29a1ce65bcbda4099a32d243e5d9520270a44bbabf0fb1fb40d463bd937685b1a1042e646979086c546d55319c3c + checksum: 10/429004a6596aa5c9e707b604156f49a146f8d029e31a3152b1649c0b56425264fda5fd38e5db1ddaeb33c3fe45c97dc8078d7abfafe3542a979b49f229801135 languageName: node linkType: hard -"@babel/plugin-transform-block-scoped-functions@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-block-scoped-functions@npm:7.23.3" +"@babel/plugin-transform-block-scoped-functions@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-block-scoped-functions@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/e63b16d94ee5f4d917e669da3db5ea53d1e7e79141a2ec873c1e644678cdafe98daa556d0d359963c827863d6b3665d23d4938a94a4c5053a1619c4ebd01d020 + checksum: 10/d8e18bd57b156da1cd4d3c1780ab9ea03afed56c6824ca8e6e74f67959d7989a0e953ec370fe9b417759314f2eef30c8c437395ce63ada2e26c2f469e4704f82 languageName: node linkType: hard -"@babel/plugin-transform-block-scoping@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-block-scoping@npm:7.23.4" +"@babel/plugin-transform-block-scoping@npm:^7.24.4": + version: 7.24.4 + resolution: "@babel/plugin-transform-block-scoping@npm:7.24.4" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/bbb965a3acdfb03559806d149efbd194ac9c983b260581a60efcb15eb9fbe20e3054667970800146d867446db1c1398f8e4ee87f4454233e49b8f8ce947bd99b + checksum: 10/4093fa109cd256e8ad0b26e3ffa67ec6dac4078a1a24b7755bed63e650cf938b2a315e01696c35b221db1a37606f93cb82696c8d1bf563c2a9845620e551736e languageName: node linkType: hard -"@babel/plugin-transform-class-properties@npm:^7.22.5, @babel/plugin-transform-class-properties@npm:^7.23.3": +"@babel/plugin-transform-class-properties@npm:^7.22.5": version: 7.23.3 resolution: "@babel/plugin-transform-class-properties@npm:7.23.3" dependencies: @@ -725,116 +862,128 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-class-static-block@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-class-static-block@npm:7.23.4" +"@babel/plugin-transform-class-properties@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-class-properties@npm:7.24.1" dependencies: - "@babel/helper-create-class-features-plugin": "npm:^7.22.15" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-create-class-features-plugin": "npm:^7.24.1" + "@babel/helper-plugin-utils": "npm:^7.24.0" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10/95779e9eef0c0638b9631c297d48aee53ffdbb2b1b5221bf40d7eccd566a8e34f859ff3571f8f20b9159b67f1bff7d7dc81da191c15d69fbae5a645197eae7e0 + languageName: node + linkType: hard + +"@babel/plugin-transform-class-static-block@npm:^7.24.4": + version: 7.24.4 + resolution: "@babel/plugin-transform-class-static-block@npm:7.24.4" + dependencies: + "@babel/helper-create-class-features-plugin": "npm:^7.24.4" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/plugin-syntax-class-static-block": "npm:^7.14.5" peerDependencies: "@babel/core": ^7.12.0 - checksum: 10/c8bfaba19a674fc2eb54edad71e958647360474e3163e8226f1acd63e4e2dbec32a171a0af596c1dc5359aee402cc120fea7abd1fb0e0354b6527f0fc9e8aa1e + checksum: 10/3b1db3308b57ba21d47772a9f183804234c23fd64c9ca40915d2d65c5dc7a48b49a6de16b8b90b7a354eacbb51232a862f0fca3dbd23e27d34641f511decddab languageName: node linkType: hard -"@babel/plugin-transform-classes@npm:^7.23.8": - version: 7.23.8 - resolution: "@babel/plugin-transform-classes@npm:7.23.8" +"@babel/plugin-transform-classes@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-classes@npm:7.24.1" dependencies: "@babel/helper-annotate-as-pure": "npm:^7.22.5" "@babel/helper-compilation-targets": "npm:^7.23.6" "@babel/helper-environment-visitor": "npm:^7.22.20" "@babel/helper-function-name": "npm:^7.23.0" - "@babel/helper-plugin-utils": "npm:^7.22.5" - "@babel/helper-replace-supers": "npm:^7.22.20" + "@babel/helper-plugin-utils": "npm:^7.24.0" + "@babel/helper-replace-supers": "npm:^7.24.1" "@babel/helper-split-export-declaration": "npm:^7.22.6" globals: "npm:^11.1.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/4bb4b19e7a39871c4414fb44fc5f2cc47c78f993b74c43238dfb99c9dac2d15cb99b43f8a3d42747580e1807d2b8f5e13ce7e95e593fd839bd176aa090bf9a23 + checksum: 10/eb7f4a3d852cfa20f4efd299929c564bd2b45106ac1cf4ac8b0c87baf078d4a15c39b8a21bbb01879c1922acb9baaf3c9b150486e18d84b30129e9671639793d languageName: node linkType: hard -"@babel/plugin-transform-computed-properties@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-computed-properties@npm:7.23.3" +"@babel/plugin-transform-computed-properties@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-computed-properties@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" - "@babel/template": "npm:^7.22.15" + "@babel/helper-plugin-utils": "npm:^7.24.0" + "@babel/template": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/e75593e02c5ea473c17839e3c9d597ce3697bf039b66afe9a4d06d086a87fb3d95850b4174476897afc351dc1b46a9ec3165ee6e8fbad3732c0d65f676f855ad + checksum: 10/62bbfe1bd508517d96ba6909e68b1adb9dfd24ea61af1f4b0aa909bfc5e476044afe9c55b10ef74508fd147aa665e818df67ece834d164a9fd69b80c9ede3875 languageName: node linkType: hard -"@babel/plugin-transform-destructuring@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-destructuring@npm:7.23.3" +"@babel/plugin-transform-destructuring@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-destructuring@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/5abd93718af5a61f8f6a97d2ccac9139499752dd5b2c533d7556fb02947ae01b2f51d4c4f5e64df569e8783d3743270018eb1fa979c43edec7dd1377acf107ed + checksum: 10/03d9a81cd9eeb24d48e207be536d460d6ad228238ac70da9b7ad4bae799847bb3be0aecfa4ea6223752f3a8d4ada3a58cd9a0f8fc70c01fdfc87ad0618f897d3 languageName: node linkType: hard -"@babel/plugin-transform-dotall-regex@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-dotall-regex@npm:7.23.3" +"@babel/plugin-transform-dotall-regex@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-dotall-regex@npm:7.24.1" dependencies: "@babel/helper-create-regexp-features-plugin": "npm:^7.22.15" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/a2dbbf7f1ea16a97948c37df925cb364337668c41a3948b8d91453f140507bd8a3429030c7ce66d09c299987b27746c19a2dd18b6f17dcb474854b14fd9159a3 + checksum: 10/7f623d25b6f213b94ebc1754e9e31c1077c8e288626d8b7bfa76a97b067ce80ddcd0ede402a546706c65002c0ccf45cd5ec621511c2668eed31ebcabe8391d35 languageName: node linkType: hard -"@babel/plugin-transform-duplicate-keys@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-duplicate-keys@npm:7.23.3" +"@babel/plugin-transform-duplicate-keys@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-duplicate-keys@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/c2a21c34dc0839590cd945192cbc46fde541a27e140c48fe1808315934664cdbf18db64889e23c4eeb6bad9d3e049482efdca91d29de5734ffc887c4fbabaa16 + checksum: 10/de600a958ad146fc8aca71fd2dfa5ebcfdb97df4eaa530fc9a4b0d28d85442ddb9b7039f260b396785211e88c6817125a94c183459763c363847e8c84f318ff0 languageName: node linkType: hard -"@babel/plugin-transform-dynamic-import@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-dynamic-import@npm:7.23.4" +"@babel/plugin-transform-dynamic-import@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-dynamic-import@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/plugin-syntax-dynamic-import": "npm:^7.8.3" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/57a722604c430d9f3dacff22001a5f31250e34785d4969527a2ae9160fa86858d0892c5b9ff7a06a04076f8c76c9e6862e0541aadca9c057849961343aab0845 + checksum: 10/59fc561ee40b1a69f969c12c6c5fac206226d6642213985a569dd0f99f8e41c0f4eaedebd36936c255444a8335079842274c42a975a433beadb436d4c5abb79b languageName: node linkType: hard -"@babel/plugin-transform-exponentiation-operator@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-exponentiation-operator@npm:7.23.3" +"@babel/plugin-transform-exponentiation-operator@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-exponentiation-operator@npm:7.24.1" dependencies: "@babel/helper-builder-binary-assignment-operator-visitor": "npm:^7.22.15" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/00d05ab14ad0f299160fcf9d8f55a1cc1b740e012ab0b5ce30207d2365f091665115557af7d989cd6260d075a252d9e4283de5f2b247dfbbe0e42ae586e6bf66 + checksum: 10/f90841fe1a1e9f680b4209121d3e2992f923e85efcd322b26e5901c180ef44ff727fb89790803a23fac49af34c1ce2e480018027c22b4573b615512ac5b6fc50 languageName: node linkType: hard -"@babel/plugin-transform-export-namespace-from@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-export-namespace-from@npm:7.23.4" +"@babel/plugin-transform-export-namespace-from@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-export-namespace-from@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/plugin-syntax-export-namespace-from": "npm:^7.8.3" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/9f770a81bfd03b48d6ba155d452946fd56d6ffe5b7d871e9ec2a0b15e0f424273b632f3ed61838b90015b25bbda988896b7a46c7d964fbf8f6feb5820b309f93 + checksum: 10/bc710ac231919df9555331885748385c11c5e695d7271824fe56fba51dd637d48d3e5cd52e1c69f2b1a384fbbb41552572bc1ca3a2285ee29571f002e9bb2421 languageName: node linkType: hard @@ -850,86 +999,86 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-for-of@npm:^7.23.6": - version: 7.23.6 - resolution: "@babel/plugin-transform-for-of@npm:7.23.6" +"@babel/plugin-transform-for-of@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-for-of@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/b84ef1f26a2db316237ae6d10fa7c22c70ac808ed0b8e095a8ecf9101551636cbb026bee9fb95a0a7944f3b8278ff9636a9088cb4a4ac5b84830a13829242735 + checksum: 10/befd0908c3f6b31f9fa9363a3c112d25eaa0bc4a79cfad1f0a8bb5010937188b043a44fb23443bc8ffbcc40c015bb25f80e4cc585ce5cc580708e2d56e76fe37 languageName: node linkType: hard -"@babel/plugin-transform-function-name@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-function-name@npm:7.23.3" +"@babel/plugin-transform-function-name@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-function-name@npm:7.24.1" dependencies: - "@babel/helper-compilation-targets": "npm:^7.22.15" + "@babel/helper-compilation-targets": "npm:^7.23.6" "@babel/helper-function-name": "npm:^7.23.0" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/355c6dbe07c919575ad42b2f7e020f320866d72f8b79181a16f8e0cd424a2c761d979f03f47d583d9471b55dcd68a8a9d829b58e1eebcd572145b934b48975a6 + checksum: 10/31eb3c75297dda7265f78eba627c446f2324e30ec0124a645ccc3e9f341254aaa40d6787bd62b2280d77c0a5c9fbfce1da2c200ef7c7f8e0a1b16a8eb3644c6f languageName: node linkType: hard -"@babel/plugin-transform-json-strings@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-json-strings@npm:7.23.4" +"@babel/plugin-transform-json-strings@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-json-strings@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/plugin-syntax-json-strings": "npm:^7.8.3" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/f9019820233cf8955d8ba346df709a0683c120fe86a24ed1c9f003f2db51197b979efc88f010d558a12e1491210fc195a43cd1c7fee5e23b92da38f793a875de + checksum: 10/f42302d42fc81ac00d14e9e5d80405eb80477d7f9039d7208e712d6bcd486a4e3b32fdfa07b5f027d6c773723d8168193ee880f93b0e430c828e45f104fb82a4 languageName: node linkType: hard -"@babel/plugin-transform-literals@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-literals@npm:7.23.3" +"@babel/plugin-transform-literals@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-literals@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/519a544cd58586b9001c4c9b18da25a62f17d23c48600ff7a685d75ca9eb18d2c5e8f5476f067f0a8f1fea2a31107eff950b9864833061e6076dcc4bdc3e71ed + checksum: 10/2df94e9478571852483aca7588419e574d76bde97583e78551c286f498e01321e7dbb1d0ef67bee16e8f950688f79688809cfde370c5c4b84c14d841a3ef217a languageName: node linkType: hard -"@babel/plugin-transform-logical-assignment-operators@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-logical-assignment-operators@npm:7.23.4" +"@babel/plugin-transform-logical-assignment-operators@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-logical-assignment-operators@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/plugin-syntax-logical-assignment-operators": "npm:^7.10.4" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/2ae1dc9b4ff3bf61a990ff3accdecb2afe3a0ca649b3e74c010078d1cdf29ea490f50ac0a905306a2bcf9ac177889a39ac79bdcc3a0fdf220b3b75fac18d39b5 + checksum: 10/895f2290adf457cbf327428bdb4fb90882a38a22f729bcf0629e8ad66b9b616d2721fbef488ac00411b647489d1dda1d20171bb3772d0796bb7ef5ecf057808a languageName: node linkType: hard -"@babel/plugin-transform-member-expression-literals@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-member-expression-literals@npm:7.23.3" +"@babel/plugin-transform-member-expression-literals@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-member-expression-literals@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/95cec13c36d447c5aa6b8e4c778b897eeba66dcb675edef01e0d2afcec9e8cb9726baf4f81b4bbae7a782595aed72e6a0d44ffb773272c3ca180fada99bf92db + checksum: 10/4ea641cc14a615f9084e45ad2319f95e2fee01c77ec9789685e7e11a6c286238a426a98f9c1ed91568a047d8ac834393e06e8c82d1ff01764b7aa61bee8e9023 languageName: node linkType: hard -"@babel/plugin-transform-modules-amd@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-modules-amd@npm:7.23.3" +"@babel/plugin-transform-modules-amd@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-modules-amd@npm:7.24.1" dependencies: "@babel/helper-module-transforms": "npm:^7.23.3" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/48c87dee2c7dae8ed40d16901f32c9e58be4ef87bf2c3985b51dd2e78e82081f3bad0a39ee5cf6e8909e13e954e2b4bedef0a8141922f281ed833ddb59ed9be2 + checksum: 10/5a324f7c630cf0be1f09098a3a36248c2521622f2c7ea1a44a5980f54b718f5e0dd4af92a337f4b445a8824c8d533853ebea7c16de829b8a7bc8bcca127d4d73 languageName: node linkType: hard @@ -946,29 +1095,42 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-modules-systemjs@npm:^7.23.9": - version: 7.23.9 - resolution: "@babel/plugin-transform-modules-systemjs@npm:7.23.9" +"@babel/plugin-transform-modules-commonjs@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-modules-commonjs@npm:7.24.1" + dependencies: + "@babel/helper-module-transforms": "npm:^7.23.3" + "@babel/helper-plugin-utils": "npm:^7.24.0" + "@babel/helper-simple-access": "npm:^7.22.5" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10/7326a62ed5f766f93ee75684868635b59884e2801533207ea11561c296de53037949fecad4055d828fa7ebeb6cc9e55908aa3e7c13f930ded3e62ad9f24680d7 + languageName: node + linkType: hard + +"@babel/plugin-transform-modules-systemjs@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-modules-systemjs@npm:7.24.1" dependencies: "@babel/helper-hoist-variables": "npm:^7.22.5" "@babel/helper-module-transforms": "npm:^7.23.3" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/helper-validator-identifier": "npm:^7.22.20" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/4bb800e5a9d0d668d7421ae3672fccff7d5f2a36621fd87414d7ece6d6f4d93627f9644cfecacae934bc65ffc131c8374242aaa400cca874dcab9b281a21aff0 + checksum: 10/565ec4518037b3d957431e29bda97b3d2fbb2e245fb5ba19889310ccb8fb71353e8ce2c325cc8d3fbc5a376d3af7d7e21782d5f502c46f8da077bee7807a590f languageName: node linkType: hard -"@babel/plugin-transform-modules-umd@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-modules-umd@npm:7.23.3" +"@babel/plugin-transform-modules-umd@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-modules-umd@npm:7.24.1" dependencies: "@babel/helper-module-transforms": "npm:^7.23.3" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/e3f3af83562d687899555c7826b3faf0ab93ee7976898995b1d20cbe7f4451c55e05b0e17bfb3e549937cbe7573daf5400b752912a241b0a8a64d2457c7626e5 + checksum: 10/323bb9367e1967117a829f67788ec2ff55504b4faf8f6d83ec85d398e50b41cf7d1c375c67d63883dd7ad5e75b35c8ae776d89e422330ec0c0a1fda24e362083 languageName: node linkType: hard @@ -984,18 +1146,18 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-new-target@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-new-target@npm:7.23.3" +"@babel/plugin-transform-new-target@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-new-target@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/e5053389316fce73ad5201b7777437164f333e24787fbcda4ae489cd2580dbbbdfb5694a7237bad91fabb46b591d771975d69beb1c740b82cb4761625379f00b + checksum: 10/e0d3af66cd0fad29c9d0e3fc65e711255e18b77e2e35bbd8f10059e3db7de6c16799ef74e704daf784950feb71e7a93c5bf2c771d98f1ca3fba1ff2e0240b24a languageName: node linkType: hard -"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.22.11, @babel/plugin-transform-nullish-coalescing-operator@npm:^7.23.4": +"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.22.11": version: 7.23.4 resolution: "@babel/plugin-transform-nullish-coalescing-operator@npm:7.23.4" dependencies: @@ -1007,58 +1169,69 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-numeric-separator@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-numeric-separator@npm:7.23.4" +"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-nullish-coalescing-operator@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" + "@babel/plugin-syntax-nullish-coalescing-operator": "npm:^7.8.3" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10/74025e191ceb7cefc619c15d33753aab81300a03d81b96ae249d9b599bc65878f962d608f452462d3aad5d6e334b7ab2b09a6bdcfe8d101fe77ac7aacca4261e + languageName: node + linkType: hard + +"@babel/plugin-transform-numeric-separator@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-numeric-separator@npm:7.24.1" + dependencies: + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/plugin-syntax-numeric-separator": "npm:^7.10.4" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/6ba0e5db3c620a3ec81f9e94507c821f483c15f196868df13fa454cbac719a5449baf73840f5b6eb7d77311b24a2cf8e45db53700d41727f693d46f7caf3eec3 + checksum: 10/3247bd7d409574fc06c59e0eb573ae7470d6d61ecf780df40b550102bb4406747d8f39dcbec57eb59406df6c565a86edd3b429e396ad02e4ce201ad92050832e languageName: node linkType: hard -"@babel/plugin-transform-object-rest-spread@npm:^7.24.0": - version: 7.24.0 - resolution: "@babel/plugin-transform-object-rest-spread@npm:7.24.0" +"@babel/plugin-transform-object-rest-spread@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-object-rest-spread@npm:7.24.1" dependencies: - "@babel/compat-data": "npm:^7.23.5" "@babel/helper-compilation-targets": "npm:^7.23.6" "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/plugin-syntax-object-rest-spread": "npm:^7.8.3" - "@babel/plugin-transform-parameters": "npm:^7.23.3" + "@babel/plugin-transform-parameters": "npm:^7.24.1" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/1dfafd9461723769b29f724fcbdca974c4280f68a9e03c8ff412643ffe88930755f093f9cbf919cdb6d0d53751614892dd2882bccad286e14e9e995c5a8242ed + checksum: 10/ff6eeefbc5497cf33d62dc86b797c6db0e9455d6a4945d6952f3b703d04baab048974c6573b503e0ec097b8112d3b98b5f4ee516e1b8a74ed47aebba4d9d2643 languageName: node linkType: hard -"@babel/plugin-transform-object-super@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-object-super@npm:7.23.3" +"@babel/plugin-transform-object-super@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-object-super@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" - "@babel/helper-replace-supers": "npm:^7.22.20" + "@babel/helper-plugin-utils": "npm:^7.24.0" + "@babel/helper-replace-supers": "npm:^7.24.1" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/e495497186f621fa79026e183b4f1fbb172fd9df812cbd2d7f02c05b08adbe58012b1a6eb6dd58d11a30343f6ec80d0f4074f9b501d70aa1c94df76d59164c53 + checksum: 10/d34d437456a54e2a5dcb26e9cf09ed4c55528f2a327c5edca92c93e9483c37176e228d00d6e0cf767f3d6fdbef45ae3a5d034a7c59337a009e20ae541c8220fa languageName: node linkType: hard -"@babel/plugin-transform-optional-catch-binding@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-optional-catch-binding@npm:7.23.4" +"@babel/plugin-transform-optional-catch-binding@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-optional-catch-binding@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/plugin-syntax-optional-catch-binding": "npm:^7.8.3" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/d50b5ee142cdb088d8b5de1ccf7cea85b18b85d85b52f86618f6e45226372f01ad4cdb29abd4fd35ea99a71fefb37009e0107db7a787dcc21d4d402f97470faf + checksum: 10/ff7c02449d32a6de41e003abb38537b4a1ad90b1eaa4c0b578cb1b55548201a677588a8c47f3e161c72738400ae811a6673ea7b8a734344755016ca0ac445dac languageName: node linkType: hard -"@babel/plugin-transform-optional-chaining@npm:^7.23.0, @babel/plugin-transform-optional-chaining@npm:^7.23.3, @babel/plugin-transform-optional-chaining@npm:^7.23.4": +"@babel/plugin-transform-optional-chaining@npm:^7.23.0": version: 7.23.4 resolution: "@babel/plugin-transform-optional-chaining@npm:7.23.4" dependencies: @@ -1071,18 +1244,31 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-parameters@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-parameters@npm:7.23.3" +"@babel/plugin-transform-optional-chaining@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-optional-chaining@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" + "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5" + "@babel/plugin-syntax-optional-chaining": "npm:^7.8.3" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10/d41031b8e472b9b30aacd905a1561904bcec597dd888ad639b234971714dc9cd0dcb60df91a89219fc72e4feeb148e20f97bcddc39d7676e743ff0c23f62a7eb + languageName: node + linkType: hard + +"@babel/plugin-transform-parameters@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-parameters@npm:7.24.1" + dependencies: + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/a8c36c3fc25f9daa46c4f6db47ea809c395dc4abc7f01c4b1391f6e5b0cd62b83b6016728b02a6a8ac21aca56207c9ec66daefc0336e9340976978de7e6e28df + checksum: 10/c289c188710cd1c60991db169d8173b6e8e05624ae61a7da0b64354100bfba9e44bc1332dd9223c4e3fe1b9cbc0c061e76e7c7b3a75c9588bf35d0ffec428070 languageName: node linkType: hard -"@babel/plugin-transform-private-methods@npm:^7.22.5, @babel/plugin-transform-private-methods@npm:^7.23.3": +"@babel/plugin-transform-private-methods@npm:^7.22.5": version: 7.23.3 resolution: "@babel/plugin-transform-private-methods@npm:7.23.3" dependencies: @@ -1094,107 +1280,119 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-private-property-in-object@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-private-property-in-object@npm:7.23.4" +"@babel/plugin-transform-private-methods@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-private-methods@npm:7.24.1" + dependencies: + "@babel/helper-create-class-features-plugin": "npm:^7.24.1" + "@babel/helper-plugin-utils": "npm:^7.24.0" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10/7208c30bb3f3fbc73fb3a88bdcb78cd5cddaf6d523eb9d67c0c04e78f6fc6319ece89f4a5abc41777ceab16df55b3a13a4120e0efc9275ca6d2d89beaba80aa0 + languageName: node + linkType: hard + +"@babel/plugin-transform-private-property-in-object@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-private-property-in-object@npm:7.24.1" dependencies: "@babel/helper-annotate-as-pure": "npm:^7.22.5" - "@babel/helper-create-class-features-plugin": "npm:^7.22.15" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-create-class-features-plugin": "npm:^7.24.1" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/plugin-syntax-private-property-in-object": "npm:^7.14.5" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/02eef2ee98fa86ee5052ed9bf0742d6d22b510b5df2fcce0b0f5615d6001f7786c6b31505e7f1c2f446406d8fb33603a5316d957cfa5b8365cbf78ddcc24fa42 + checksum: 10/466d1943960c2475c0361eba2ea72d504d4d8329a8e293af0eedd26887bf30a074515b330ea84be77331ace77efbf5533d5f04f8cff63428d2615f4a509ae7a4 languageName: node linkType: hard -"@babel/plugin-transform-property-literals@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-property-literals@npm:7.23.3" +"@babel/plugin-transform-property-literals@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-property-literals@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/16b048c8e87f25095f6d53634ab7912992f78e6997a6ff549edc3cf519db4fca01c7b4e0798530d7f6a05228ceee479251245cdd850a5531c6e6f404104d6cc9 + checksum: 10/a73646d7ecd95b3931a3ead82c7d5efeb46e68ba362de63eb437d33531f294ec18bd31b6d24238cd3b6a3b919a6310c4a0ba4a2629927721d4d10b0518eb7715 languageName: node linkType: hard -"@babel/plugin-transform-regenerator@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-regenerator@npm:7.23.3" +"@babel/plugin-transform-regenerator@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-regenerator@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" regenerator-transform: "npm:^0.15.2" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/7fdacc7b40008883871b519c9e5cdea493f75495118ccc56ac104b874983569a24edd024f0f5894ba1875c54ee2b442f295d6241c3280e61c725d0dd3317c8e6 + checksum: 10/a04319388a0a7931c3f8e15715d01444c32519692178b70deccc86d53304e74c0f589a4268f6c68578d86f75e934dd1fe6e6ed9071f54ee8379f356f88ef6e42 languageName: node linkType: hard -"@babel/plugin-transform-reserved-words@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-reserved-words@npm:7.23.3" +"@babel/plugin-transform-reserved-words@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-reserved-words@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/298c4440ddc136784ff920127cea137168e068404e635dc946ddb5d7b2a27b66f1dd4c4acb01f7184478ff7d5c3e7177a127279479926519042948fb7fa0fa48 + checksum: 10/132c6040c65aabae2d98a39289efb5c51a8632546dc50d2ad032c8660aec307fbed74ef499856ea4f881fc8505905f49b48e0270585da2ea3d50b75e962afd89 languageName: node linkType: hard -"@babel/plugin-transform-shorthand-properties@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-shorthand-properties@npm:7.23.3" +"@babel/plugin-transform-shorthand-properties@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-shorthand-properties@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/5d677a03676f9fff969b0246c423d64d77502e90a832665dc872a5a5e05e5708161ce1effd56bb3c0f2c20a1112fca874be57c8a759d8b08152755519281f326 + checksum: 10/006a2032d1c57dca76579ce6598c679c2f20525afef0a36e9d42affe3c8cf33c1427581ad696b519cc75dfee46c5e8ecdf0c6a29ffb14250caa3e16dd68cb424 languageName: node linkType: hard -"@babel/plugin-transform-spread@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-spread@npm:7.23.3" +"@babel/plugin-transform-spread@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-spread@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/c6372d2f788fd71d85aba12fbe08ee509e053ed27457e6674a4f9cae41ff885e2eb88aafea8fadd0ccf990601fc69ec596fa00959e05af68a15461a8d97a548d + checksum: 10/0b60cfe2f700ec2c9c1af979bb805860258539648dadcd482a5ddfc2330b733fb61bb60266404f3e068246ad0d6376040b4f9c5ab9037a3d777624d64acd89e9 languageName: node linkType: hard -"@babel/plugin-transform-sticky-regex@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-sticky-regex@npm:7.23.3" +"@babel/plugin-transform-sticky-regex@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-sticky-regex@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/53e55eb2575b7abfdb4af7e503a2bf7ef5faf8bf6b92d2cd2de0700bdd19e934e5517b23e6dfed94ba50ae516b62f3f916773ef7d9bc81f01503f585051e2949 + checksum: 10/e326e96a9eeb6bb01dbc4d3362f989411490671b97f62edf378b8fb102c463a018b777f28da65344d41b22aa6efcdfa01ed43d2b11fdcf202046d3174be137c5 languageName: node linkType: hard -"@babel/plugin-transform-template-literals@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-template-literals@npm:7.23.3" +"@babel/plugin-transform-template-literals@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-template-literals@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/b16c5cb0b8796be0118e9c144d15bdc0d20a7f3f59009c6303a6e9a8b74c146eceb3f05186f5b97afcba7cfa87e34c1585a22186e3d5b22f2fd3d27d959d92b2 + checksum: 10/4c9009c72321caf20e3b6328bbe9d7057006c5ae57b794cf247a37ca34d87dfec5e27284169a16df5a6235a083bf0f3ab9e1bfcb005d1c8b75b04aed75652621 languageName: node linkType: hard -"@babel/plugin-transform-typeof-symbol@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-typeof-symbol@npm:7.23.3" +"@babel/plugin-transform-typeof-symbol@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-typeof-symbol@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/0af7184379d43afac7614fc89b1bdecce4e174d52f4efaeee8ec1a4f2c764356c6dba3525c0685231f1cbf435b6dd4ee9e738d7417f3b10ce8bbe869c32f4384 + checksum: 10/3dda5074abf8b5df9cdef697d6ebe14a72c199bd6c2019991d033d9ad91b0be937b126b8f34c3c5a9725afee9016a3776aeef3e3b06ab9b3f54f2dd5b5aefa37 languageName: node linkType: hard @@ -1212,72 +1410,73 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-unicode-escapes@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-unicode-escapes@npm:7.23.3" +"@babel/plugin-transform-unicode-escapes@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-unicode-escapes@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/561c429183a54b9e4751519a3dfba6014431e9cdc1484fad03bdaf96582dfc72c76a4f8661df2aeeae7c34efd0fa4d02d3b83a2f63763ecf71ecc925f9cc1f60 + checksum: 10/d39041ff6b0cef78271ebe88be6dfd2882a3c6250a54ddae783f1b9adc815e8486a7d0ca054fabfa3fde1301c531d5be89224999fc7be83ff1eda9b77d173051 languageName: node linkType: hard -"@babel/plugin-transform-unicode-property-regex@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-unicode-property-regex@npm:7.23.3" +"@babel/plugin-transform-unicode-property-regex@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-unicode-property-regex@npm:7.24.1" dependencies: "@babel/helper-create-regexp-features-plugin": "npm:^7.22.15" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/2298461a194758086d17c23c26c7de37aa533af910f9ebf31ebd0893d4aa317468043d23f73edc782ec21151d3c46cf0ff8098a83b725c49a59de28a1d4d6225 + checksum: 10/276099b4483e707f80b054e2d29bc519158bfe52461ef5ff76f70727d592df17e30b1597ef4d8a0f04d810f6cb5a8dd887bdc1d0540af3744751710ef280090f languageName: node linkType: hard -"@babel/plugin-transform-unicode-regex@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-unicode-regex@npm:7.23.3" +"@babel/plugin-transform-unicode-regex@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-unicode-regex@npm:7.24.1" dependencies: "@babel/helper-create-regexp-features-plugin": "npm:^7.22.15" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/c5f835d17483ba899787f92e313dfa5b0055e3deab332f1d254078a2bba27ede47574b6599fcf34d3763f0c048ae0779dc21d2d8db09295edb4057478dc80a9a + checksum: 10/400a0927bdb1425b4c0dc68a61b5b2d7d17c7d9f0e07317a1a6a373c080ef94be1dd65fdc4ac9a78fcdb58f89fd128450c7bc0d5b8ca0ae7eca3fbd98e50acba languageName: node linkType: hard -"@babel/plugin-transform-unicode-sets-regex@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-unicode-sets-regex@npm:7.23.3" +"@babel/plugin-transform-unicode-sets-regex@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-unicode-sets-regex@npm:7.24.1" dependencies: "@babel/helper-create-regexp-features-plugin": "npm:^7.22.15" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0 - checksum: 10/79d0b4c951955ca68235c87b91ab2b393c96285f8aeaa34d6db416d2ddac90000c9bd6e8c4d82b60a2b484da69930507245035f28ba63c6cae341cf3ba68fdef + checksum: 10/364342fb8e382dfaa23628b88e6484dc1097e53fb7199f4d338f1e2cd71d839bb0a35a9b1380074f6a10adb2e98b79d53ca3ec78c0b8c557ca895ffff42180df languageName: node linkType: hard -"@babel/preset-env@npm:^7.23.2": - version: 7.24.0 - resolution: "@babel/preset-env@npm:7.24.0" +"@babel/preset-env@npm:^7.24.4": + version: 7.24.4 + resolution: "@babel/preset-env@npm:7.24.4" dependencies: - "@babel/compat-data": "npm:^7.23.5" + "@babel/compat-data": "npm:^7.24.4" "@babel/helper-compilation-targets": "npm:^7.23.6" "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/helper-validator-option": "npm:^7.23.5" - "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "npm:^7.23.3" - "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "npm:^7.23.3" - "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "npm:^7.23.7" + "@babel/plugin-bugfix-firefox-class-in-computed-class-key": "npm:^7.24.4" + "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "npm:^7.24.1" + "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "npm:^7.24.1" + "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "npm:^7.24.1" "@babel/plugin-proposal-private-property-in-object": "npm:7.21.0-placeholder-for-preset-env.2" "@babel/plugin-syntax-async-generators": "npm:^7.8.4" "@babel/plugin-syntax-class-properties": "npm:^7.12.13" "@babel/plugin-syntax-class-static-block": "npm:^7.14.5" "@babel/plugin-syntax-dynamic-import": "npm:^7.8.3" "@babel/plugin-syntax-export-namespace-from": "npm:^7.8.3" - "@babel/plugin-syntax-import-assertions": "npm:^7.23.3" - "@babel/plugin-syntax-import-attributes": "npm:^7.23.3" + "@babel/plugin-syntax-import-assertions": "npm:^7.24.1" + "@babel/plugin-syntax-import-attributes": "npm:^7.24.1" "@babel/plugin-syntax-import-meta": "npm:^7.10.4" "@babel/plugin-syntax-json-strings": "npm:^7.8.3" "@babel/plugin-syntax-logical-assignment-operators": "npm:^7.10.4" @@ -1289,63 +1488,63 @@ __metadata: "@babel/plugin-syntax-private-property-in-object": "npm:^7.14.5" "@babel/plugin-syntax-top-level-await": "npm:^7.14.5" "@babel/plugin-syntax-unicode-sets-regex": "npm:^7.18.6" - "@babel/plugin-transform-arrow-functions": "npm:^7.23.3" - "@babel/plugin-transform-async-generator-functions": "npm:^7.23.9" - "@babel/plugin-transform-async-to-generator": "npm:^7.23.3" - "@babel/plugin-transform-block-scoped-functions": "npm:^7.23.3" - "@babel/plugin-transform-block-scoping": "npm:^7.23.4" - "@babel/plugin-transform-class-properties": "npm:^7.23.3" - "@babel/plugin-transform-class-static-block": "npm:^7.23.4" - "@babel/plugin-transform-classes": "npm:^7.23.8" - "@babel/plugin-transform-computed-properties": "npm:^7.23.3" - "@babel/plugin-transform-destructuring": "npm:^7.23.3" - "@babel/plugin-transform-dotall-regex": "npm:^7.23.3" - "@babel/plugin-transform-duplicate-keys": "npm:^7.23.3" - "@babel/plugin-transform-dynamic-import": "npm:^7.23.4" - "@babel/plugin-transform-exponentiation-operator": "npm:^7.23.3" - "@babel/plugin-transform-export-namespace-from": "npm:^7.23.4" - "@babel/plugin-transform-for-of": "npm:^7.23.6" - "@babel/plugin-transform-function-name": "npm:^7.23.3" - "@babel/plugin-transform-json-strings": "npm:^7.23.4" - "@babel/plugin-transform-literals": "npm:^7.23.3" - "@babel/plugin-transform-logical-assignment-operators": "npm:^7.23.4" - "@babel/plugin-transform-member-expression-literals": "npm:^7.23.3" - "@babel/plugin-transform-modules-amd": "npm:^7.23.3" - "@babel/plugin-transform-modules-commonjs": "npm:^7.23.3" - "@babel/plugin-transform-modules-systemjs": "npm:^7.23.9" - "@babel/plugin-transform-modules-umd": "npm:^7.23.3" + "@babel/plugin-transform-arrow-functions": "npm:^7.24.1" + "@babel/plugin-transform-async-generator-functions": "npm:^7.24.3" + "@babel/plugin-transform-async-to-generator": "npm:^7.24.1" + "@babel/plugin-transform-block-scoped-functions": "npm:^7.24.1" + "@babel/plugin-transform-block-scoping": "npm:^7.24.4" + "@babel/plugin-transform-class-properties": "npm:^7.24.1" + "@babel/plugin-transform-class-static-block": "npm:^7.24.4" + "@babel/plugin-transform-classes": "npm:^7.24.1" + "@babel/plugin-transform-computed-properties": "npm:^7.24.1" + "@babel/plugin-transform-destructuring": "npm:^7.24.1" + "@babel/plugin-transform-dotall-regex": "npm:^7.24.1" + "@babel/plugin-transform-duplicate-keys": "npm:^7.24.1" + "@babel/plugin-transform-dynamic-import": "npm:^7.24.1" + "@babel/plugin-transform-exponentiation-operator": "npm:^7.24.1" + "@babel/plugin-transform-export-namespace-from": "npm:^7.24.1" + "@babel/plugin-transform-for-of": "npm:^7.24.1" + "@babel/plugin-transform-function-name": "npm:^7.24.1" + "@babel/plugin-transform-json-strings": "npm:^7.24.1" + "@babel/plugin-transform-literals": "npm:^7.24.1" + "@babel/plugin-transform-logical-assignment-operators": "npm:^7.24.1" + "@babel/plugin-transform-member-expression-literals": "npm:^7.24.1" + "@babel/plugin-transform-modules-amd": "npm:^7.24.1" + "@babel/plugin-transform-modules-commonjs": "npm:^7.24.1" + "@babel/plugin-transform-modules-systemjs": "npm:^7.24.1" + "@babel/plugin-transform-modules-umd": "npm:^7.24.1" "@babel/plugin-transform-named-capturing-groups-regex": "npm:^7.22.5" - "@babel/plugin-transform-new-target": "npm:^7.23.3" - "@babel/plugin-transform-nullish-coalescing-operator": "npm:^7.23.4" - "@babel/plugin-transform-numeric-separator": "npm:^7.23.4" - "@babel/plugin-transform-object-rest-spread": "npm:^7.24.0" - "@babel/plugin-transform-object-super": "npm:^7.23.3" - "@babel/plugin-transform-optional-catch-binding": "npm:^7.23.4" - "@babel/plugin-transform-optional-chaining": "npm:^7.23.4" - "@babel/plugin-transform-parameters": "npm:^7.23.3" - "@babel/plugin-transform-private-methods": "npm:^7.23.3" - "@babel/plugin-transform-private-property-in-object": "npm:^7.23.4" - "@babel/plugin-transform-property-literals": "npm:^7.23.3" - "@babel/plugin-transform-regenerator": "npm:^7.23.3" - "@babel/plugin-transform-reserved-words": "npm:^7.23.3" - "@babel/plugin-transform-shorthand-properties": "npm:^7.23.3" - "@babel/plugin-transform-spread": "npm:^7.23.3" - "@babel/plugin-transform-sticky-regex": "npm:^7.23.3" - "@babel/plugin-transform-template-literals": "npm:^7.23.3" - "@babel/plugin-transform-typeof-symbol": "npm:^7.23.3" - "@babel/plugin-transform-unicode-escapes": "npm:^7.23.3" - "@babel/plugin-transform-unicode-property-regex": "npm:^7.23.3" - "@babel/plugin-transform-unicode-regex": "npm:^7.23.3" - "@babel/plugin-transform-unicode-sets-regex": "npm:^7.23.3" + "@babel/plugin-transform-new-target": "npm:^7.24.1" + "@babel/plugin-transform-nullish-coalescing-operator": "npm:^7.24.1" + "@babel/plugin-transform-numeric-separator": "npm:^7.24.1" + "@babel/plugin-transform-object-rest-spread": "npm:^7.24.1" + "@babel/plugin-transform-object-super": "npm:^7.24.1" + "@babel/plugin-transform-optional-catch-binding": "npm:^7.24.1" + "@babel/plugin-transform-optional-chaining": "npm:^7.24.1" + "@babel/plugin-transform-parameters": "npm:^7.24.1" + "@babel/plugin-transform-private-methods": "npm:^7.24.1" + "@babel/plugin-transform-private-property-in-object": "npm:^7.24.1" + "@babel/plugin-transform-property-literals": "npm:^7.24.1" + "@babel/plugin-transform-regenerator": "npm:^7.24.1" + "@babel/plugin-transform-reserved-words": "npm:^7.24.1" + "@babel/plugin-transform-shorthand-properties": "npm:^7.24.1" + "@babel/plugin-transform-spread": "npm:^7.24.1" + "@babel/plugin-transform-sticky-regex": "npm:^7.24.1" + "@babel/plugin-transform-template-literals": "npm:^7.24.1" + "@babel/plugin-transform-typeof-symbol": "npm:^7.24.1" + "@babel/plugin-transform-unicode-escapes": "npm:^7.24.1" + "@babel/plugin-transform-unicode-property-regex": "npm:^7.24.1" + "@babel/plugin-transform-unicode-regex": "npm:^7.24.1" + "@babel/plugin-transform-unicode-sets-regex": "npm:^7.24.1" "@babel/preset-modules": "npm:0.1.6-no-external-plugins" - babel-plugin-polyfill-corejs2: "npm:^0.4.8" - babel-plugin-polyfill-corejs3: "npm:^0.9.0" - babel-plugin-polyfill-regenerator: "npm:^0.5.5" + babel-plugin-polyfill-corejs2: "npm:^0.4.10" + babel-plugin-polyfill-corejs3: "npm:^0.10.4" + babel-plugin-polyfill-regenerator: "npm:^0.6.1" core-js-compat: "npm:^3.31.0" semver: "npm:^6.3.1" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/88bca150a09e658124997178ee1ff375a9aceecfd70ec11c7ccc12e82f5be5f7ff2ddfefba5b10fb617891645f92949392b350509de9742d2aa138f42959e190 + checksum: 10/3d5cbdc2501bc1959fc76ed9d409d0ee5264bc475fa809958fd2e8e7db9b12f8eccdae750a0e05d25207373c42ca115b42bb3d5c743bc770cb12b6af05bf3bd8 languageName: node linkType: hard @@ -1432,7 +1631,7 @@ __metadata: languageName: node linkType: hard -"@babel/traverse@npm:^7.23.2, @babel/traverse@npm:^7.24.0": +"@babel/traverse@npm:^7.24.0": version: 7.24.0 resolution: "@babel/traverse@npm:7.24.0" dependencies: @@ -1450,6 +1649,24 @@ __metadata: languageName: node linkType: hard +"@babel/traverse@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/traverse@npm:7.24.1" + dependencies: + "@babel/code-frame": "npm:^7.24.1" + "@babel/generator": "npm:^7.24.1" + "@babel/helper-environment-visitor": "npm:^7.22.20" + "@babel/helper-function-name": "npm:^7.23.0" + "@babel/helper-hoist-variables": "npm:^7.22.5" + "@babel/helper-split-export-declaration": "npm:^7.22.6" + "@babel/parser": "npm:^7.24.1" + "@babel/types": "npm:^7.24.0" + debug: "npm:^4.3.1" + globals: "npm:^11.1.0" + checksum: 10/b9b0173c286ef549e179f3725df3c4958069ad79fe5b9840adeb99692eb4a5a08db4e735c0f086aab52e7e08ec711cee9e7c06cb908d8035641d1382172308d3 + languageName: node + linkType: hard + "@babel/types@npm:^7.22.15, @babel/types@npm:^7.22.19, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.23.6, @babel/types@npm:^7.24.0, @babel/types@npm:^7.4.4, @babel/types@npm:^7.8.3": version: 7.24.0 resolution: "@babel/types@npm:7.24.0" @@ -1939,7 +2156,7 @@ __metadata: languageName: node linkType: hard -"@jridgewell/trace-mapping@npm:^0.3.17, @jridgewell/trace-mapping@npm:^0.3.18, @jridgewell/trace-mapping@npm:^0.3.24": +"@jridgewell/trace-mapping@npm:^0.3.17, @jridgewell/trace-mapping@npm:^0.3.18, @jridgewell/trace-mapping@npm:^0.3.24, @jridgewell/trace-mapping@npm:^0.3.25": version: 0.3.25 resolution: "@jridgewell/trace-mapping@npm:0.3.25" dependencies: @@ -1961,126 +2178,383 @@ __metadata: languageName: node linkType: hard -"@ndelangen/get-tarball@npm:^3.0.7": - version: 3.0.9 - resolution: "@ndelangen/get-tarball@npm:3.0.9" +"@ndelangen/get-tarball@npm:^3.0.7": + version: 3.0.9 + resolution: "@ndelangen/get-tarball@npm:3.0.9" + dependencies: + gunzip-maybe: "npm:^1.4.2" + pump: "npm:^3.0.0" + tar-fs: "npm:^2.1.1" + checksum: 10/39697cef2b92f6e08e3590467cc6da88cd6757b2a27cb9208879c2316ed71d6be4608892ee0a86eb0343140da1a5df498f93a32c2aaf8f1fbd90f883f08b5f63 + languageName: node + linkType: hard + +"@nodelib/fs.scandir@npm:2.1.5": + version: 2.1.5 + resolution: "@nodelib/fs.scandir@npm:2.1.5" + dependencies: + "@nodelib/fs.stat": "npm:2.0.5" + run-parallel: "npm:^1.1.9" + checksum: 10/6ab2a9b8a1d67b067922c36f259e3b3dfd6b97b219c540877a4944549a4d49ea5ceba5663905ab5289682f1f3c15ff441d02f0447f620a42e1cb5e1937174d4b + languageName: node + linkType: hard + +"@nodelib/fs.stat@npm:2.0.5, @nodelib/fs.stat@npm:^2.0.2": + version: 2.0.5 + resolution: "@nodelib/fs.stat@npm:2.0.5" + checksum: 10/012480b5ca9d97bff9261571dbbec7bbc6033f69cc92908bc1ecfad0792361a5a1994bc48674b9ef76419d056a03efadfce5a6cf6dbc0a36559571a7a483f6f0 + languageName: node + linkType: hard + +"@nodelib/fs.walk@npm:^1.2.3": + version: 1.2.8 + resolution: "@nodelib/fs.walk@npm:1.2.8" + dependencies: + "@nodelib/fs.scandir": "npm:2.1.5" + fastq: "npm:^1.6.0" + checksum: 10/40033e33e96e97d77fba5a238e4bba4487b8284678906a9f616b5579ddaf868a18874c0054a75402c9fbaaa033a25ceae093af58c9c30278e35c23c9479e79b0 + languageName: node + linkType: hard + +"@npmcli/agent@npm:^2.0.0": + version: 2.2.1 + resolution: "@npmcli/agent@npm:2.2.1" + dependencies: + agent-base: "npm:^7.1.0" + http-proxy-agent: "npm:^7.0.0" + https-proxy-agent: "npm:^7.0.1" + lru-cache: "npm:^10.0.1" + socks-proxy-agent: "npm:^8.0.1" + checksum: 10/d4a48128f61e47f2f5c89315a5350e265dc619987e635bd62b52b29c7ed93536e724e721418c0ce352ceece86c13043c67aba1b70c3f5cc72fce6bb746706162 + languageName: node + linkType: hard + +"@npmcli/fs@npm:^3.1.0": + version: 3.1.0 + resolution: "@npmcli/fs@npm:3.1.0" + dependencies: + semver: "npm:^7.3.5" + checksum: 10/f3a7ab3a31de65e42aeb6ed03ed035ef123d2de7af4deb9d4a003d27acc8618b57d9fb9d259fe6c28ca538032a028f37337264388ba27d26d37fff7dde22476e + languageName: node + linkType: hard + +"@pkgjs/parseargs@npm:^0.11.0": + version: 0.11.0 + resolution: "@pkgjs/parseargs@npm:0.11.0" + checksum: 10/115e8ceeec6bc69dff2048b35c0ab4f8bbee12d8bb6c1f4af758604586d802b6e669dcb02dda61d078de42c2b4ddce41b3d9e726d7daa6b4b850f4adbf7333ff + languageName: node + linkType: hard + +"@playwright/experimental-ct-core@npm:1.42.1": + version: 1.42.1 + resolution: "@playwright/experimental-ct-core@npm:1.42.1" + dependencies: + playwright: "npm:1.42.1" + playwright-core: "npm:1.42.1" + vite: "npm:^5.0.12" + bin: + playwright: cli.js + checksum: 10/ec62a3f0b8c82720101741884f2c5125f1daaba01fc6c9d3eee627b28ce5f9a40f2abc44bd2f40dd1a6a1856d1540468d13b7c05e301cf576d0c8d2984ca722d + languageName: node + linkType: hard + +"@playwright/experimental-ct-svelte@npm:^1.42.1": + version: 1.42.1 + resolution: "@playwright/experimental-ct-svelte@npm:1.42.1" + dependencies: + "@playwright/experimental-ct-core": "npm:1.42.1" + "@sveltejs/vite-plugin-svelte": "npm:^3.0.1" + bin: + playwright: cli.js + checksum: 10/444ef225523b6864b91b4568acf4fc8e6aa447efd29c1e824fbcbc56c1c5a23802dcb27a81cd0b1d99319db2c6bac475ba00aa3b18b12947d84691e20d9634b9 + languageName: node + linkType: hard + +"@radix-ui/primitive@npm:1.0.1": + version: 1.0.1 + resolution: "@radix-ui/primitive@npm:1.0.1" + dependencies: + "@babel/runtime": "npm:^7.13.10" + checksum: 10/2b93e161d3fdabe9a64919def7fa3ceaecf2848341e9211520c401181c9eaebb8451c630b066fad2256e5c639c95edc41de0ba59c40eff37e799918d019822d1 + languageName: node + linkType: hard + +"@radix-ui/react-compose-refs@npm:1.0.1": + version: 1.0.1 + resolution: "@radix-ui/react-compose-refs@npm:1.0.1" + dependencies: + "@babel/runtime": "npm:^7.13.10" + peerDependencies: + "@types/react": "*" + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/2b9a613b6db5bff8865588b6bf4065f73021b3d16c0a90b2d4c23deceeb63612f1f15de188227ebdc5f88222cab031be617a9dd025874c0487b303be3e5cc2a8 + languageName: node + linkType: hard + +"@radix-ui/react-context@npm:1.0.1": + version: 1.0.1 + resolution: "@radix-ui/react-context@npm:1.0.1" + dependencies: + "@babel/runtime": "npm:^7.13.10" + peerDependencies: + "@types/react": "*" + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/a02187a3bae3a0f1be5fab5ad19c1ef06ceff1028d957e4d9994f0186f594a9c3d93ee34bacb86d1fa8eb274493362944398e1c17054d12cb3b75384f9ae564b + languageName: node + linkType: hard + +"@radix-ui/react-dialog@npm:^1.0.5": + version: 1.0.5 + resolution: "@radix-ui/react-dialog@npm:1.0.5" + dependencies: + "@babel/runtime": "npm:^7.13.10" + "@radix-ui/primitive": "npm:1.0.1" + "@radix-ui/react-compose-refs": "npm:1.0.1" + "@radix-ui/react-context": "npm:1.0.1" + "@radix-ui/react-dismissable-layer": "npm:1.0.5" + "@radix-ui/react-focus-guards": "npm:1.0.1" + "@radix-ui/react-focus-scope": "npm:1.0.4" + "@radix-ui/react-id": "npm:1.0.1" + "@radix-ui/react-portal": "npm:1.0.4" + "@radix-ui/react-presence": "npm:1.0.1" + "@radix-ui/react-primitive": "npm:1.0.3" + "@radix-ui/react-slot": "npm:1.0.2" + "@radix-ui/react-use-controllable-state": "npm:1.0.1" + aria-hidden: "npm:^1.1.1" + react-remove-scroll: "npm:2.5.5" + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 10/adbd7301586db712616a0f8dd54a25e7544853cbf61b5d6e279215d479f57ac35157847ee424d54a7e707969a926ca0a7c28934400c9ac224bd0c7cc19229aca + languageName: node + linkType: hard + +"@radix-ui/react-dismissable-layer@npm:1.0.5": + version: 1.0.5 + resolution: "@radix-ui/react-dismissable-layer@npm:1.0.5" + dependencies: + "@babel/runtime": "npm:^7.13.10" + "@radix-ui/primitive": "npm:1.0.1" + "@radix-ui/react-compose-refs": "npm:1.0.1" + "@radix-ui/react-primitive": "npm:1.0.3" + "@radix-ui/react-use-callback-ref": "npm:1.0.1" + "@radix-ui/react-use-escape-keydown": "npm:1.0.3" + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 10/f1626d69bb50ec226032bb7d8c5abaaf7359c2d7660309b0ed3daaedd91f30717573aac1a1cb82d589b7f915cf464b95a12da0a3b91b6acfefb6fbbc62b992de + languageName: node + linkType: hard + +"@radix-ui/react-focus-guards@npm:1.0.1": + version: 1.0.1 + resolution: "@radix-ui/react-focus-guards@npm:1.0.1" dependencies: - gunzip-maybe: "npm:^1.4.2" - pump: "npm:^3.0.0" - tar-fs: "npm:^2.1.1" - checksum: 10/39697cef2b92f6e08e3590467cc6da88cd6757b2a27cb9208879c2316ed71d6be4608892ee0a86eb0343140da1a5df498f93a32c2aaf8f1fbd90f883f08b5f63 + "@babel/runtime": "npm:^7.13.10" + peerDependencies: + "@types/react": "*" + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/1f8ca8f83b884b3612788d0742f3f054e327856d90a39841a47897dbed95e114ee512362ae314177de226d05310047cabbf66b686ae86ad1b65b6b295be24ef7 languageName: node linkType: hard -"@nodelib/fs.scandir@npm:2.1.5": - version: 2.1.5 - resolution: "@nodelib/fs.scandir@npm:2.1.5" +"@radix-ui/react-focus-scope@npm:1.0.4": + version: 1.0.4 + resolution: "@radix-ui/react-focus-scope@npm:1.0.4" dependencies: - "@nodelib/fs.stat": "npm:2.0.5" - run-parallel: "npm:^1.1.9" - checksum: 10/6ab2a9b8a1d67b067922c36f259e3b3dfd6b97b219c540877a4944549a4d49ea5ceba5663905ab5289682f1f3c15ff441d02f0447f620a42e1cb5e1937174d4b + "@babel/runtime": "npm:^7.13.10" + "@radix-ui/react-compose-refs": "npm:1.0.1" + "@radix-ui/react-primitive": "npm:1.0.3" + "@radix-ui/react-use-callback-ref": "npm:1.0.1" + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 10/3590e74c6b682737c7ac4bf8db41b3df7b09a0320f3836c619e487df9915451e5dafade9923a74383a7366c59e9436f5fff4301d70c0d15928e0e16b36e58bc9 languageName: node linkType: hard -"@nodelib/fs.stat@npm:2.0.5, @nodelib/fs.stat@npm:^2.0.2": - version: 2.0.5 - resolution: "@nodelib/fs.stat@npm:2.0.5" - checksum: 10/012480b5ca9d97bff9261571dbbec7bbc6033f69cc92908bc1ecfad0792361a5a1994bc48674b9ef76419d056a03efadfce5a6cf6dbc0a36559571a7a483f6f0 +"@radix-ui/react-id@npm:1.0.1": + version: 1.0.1 + resolution: "@radix-ui/react-id@npm:1.0.1" + dependencies: + "@babel/runtime": "npm:^7.13.10" + "@radix-ui/react-use-layout-effect": "npm:1.0.1" + peerDependencies: + "@types/react": "*" + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/446a453d799cc790dd2a1583ff8328da88271bff64530b5a17c102fa7fb35eece3cf8985359d416f65e330cd81aa7b8fe984ea125fc4f4eaf4b3801d698e49fe languageName: node linkType: hard -"@nodelib/fs.walk@npm:^1.2.3": - version: 1.2.8 - resolution: "@nodelib/fs.walk@npm:1.2.8" +"@radix-ui/react-portal@npm:1.0.4": + version: 1.0.4 + resolution: "@radix-ui/react-portal@npm:1.0.4" dependencies: - "@nodelib/fs.scandir": "npm:2.1.5" - fastq: "npm:^1.6.0" - checksum: 10/40033e33e96e97d77fba5a238e4bba4487b8284678906a9f616b5579ddaf868a18874c0054a75402c9fbaaa033a25ceae093af58c9c30278e35c23c9479e79b0 + "@babel/runtime": "npm:^7.13.10" + "@radix-ui/react-primitive": "npm:1.0.3" + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 10/c4cf35e2f26a89703189d0eef3ceeeb706ae0832e98e558730a5e929ca7c72c7cb510413a24eca94c7732f8d659a1e81942bec7b90540cb73ce9e4885d040b64 languageName: node linkType: hard -"@npmcli/agent@npm:^2.0.0": - version: 2.2.1 - resolution: "@npmcli/agent@npm:2.2.1" +"@radix-ui/react-presence@npm:1.0.1": + version: 1.0.1 + resolution: "@radix-ui/react-presence@npm:1.0.1" dependencies: - agent-base: "npm:^7.1.0" - http-proxy-agent: "npm:^7.0.0" - https-proxy-agent: "npm:^7.0.1" - lru-cache: "npm:^10.0.1" - socks-proxy-agent: "npm:^8.0.1" - checksum: 10/d4a48128f61e47f2f5c89315a5350e265dc619987e635bd62b52b29c7ed93536e724e721418c0ce352ceece86c13043c67aba1b70c3f5cc72fce6bb746706162 + "@babel/runtime": "npm:^7.13.10" + "@radix-ui/react-compose-refs": "npm:1.0.1" + "@radix-ui/react-use-layout-effect": "npm:1.0.1" + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 10/406f0b5a54ea4e7881e15bddc3863234bb14bf3abd4a6e56ea57c6df6f9265a9ad5cfa158e3a98614f0dcbbb7c5f537e1f7158346e57cc3f29b522d62cf28823 languageName: node linkType: hard -"@npmcli/fs@npm:^3.1.0": - version: 3.1.0 - resolution: "@npmcli/fs@npm:3.1.0" +"@radix-ui/react-primitive@npm:1.0.3": + version: 1.0.3 + resolution: "@radix-ui/react-primitive@npm:1.0.3" dependencies: - semver: "npm:^7.3.5" - checksum: 10/f3a7ab3a31de65e42aeb6ed03ed035ef123d2de7af4deb9d4a003d27acc8618b57d9fb9d259fe6c28ca538032a028f37337264388ba27d26d37fff7dde22476e + "@babel/runtime": "npm:^7.13.10" + "@radix-ui/react-slot": "npm:1.0.2" + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 10/bedb934ac07c710dc5550a7bfc7065d47e099d958cde1d37e4b1947ae5451f1b7e6f8ff5965e242578bf2c619065e6038c3a3aa779e5eafa7da3e3dbc685799f languageName: node linkType: hard -"@pkgjs/parseargs@npm:^0.11.0": - version: 0.11.0 - resolution: "@pkgjs/parseargs@npm:0.11.0" - checksum: 10/115e8ceeec6bc69dff2048b35c0ab4f8bbee12d8bb6c1f4af758604586d802b6e669dcb02dda61d078de42c2b4ddce41b3d9e726d7daa6b4b850f4adbf7333ff +"@radix-ui/react-slot@npm:1.0.2, @radix-ui/react-slot@npm:^1.0.2": + version: 1.0.2 + resolution: "@radix-ui/react-slot@npm:1.0.2" + dependencies: + "@babel/runtime": "npm:^7.13.10" + "@radix-ui/react-compose-refs": "npm:1.0.1" + peerDependencies: + "@types/react": "*" + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/734866561e991438fbcf22af06e56b272ed6ee8f7b536489ee3bf2f736f8b53bf6bc14ebde94834aa0aceda854d018a0ce20bb171defffbaed1f566006cbb887 languageName: node linkType: hard -"@playwright/experimental-ct-core@npm:1.42.1": - version: 1.42.1 - resolution: "@playwright/experimental-ct-core@npm:1.42.1" +"@radix-ui/react-use-callback-ref@npm:1.0.1": + version: 1.0.1 + resolution: "@radix-ui/react-use-callback-ref@npm:1.0.1" dependencies: - playwright: "npm:1.42.1" - playwright-core: "npm:1.42.1" - vite: "npm:^5.0.12" - bin: - playwright: cli.js - checksum: 10/ec62a3f0b8c82720101741884f2c5125f1daaba01fc6c9d3eee627b28ce5f9a40f2abc44bd2f40dd1a6a1856d1540468d13b7c05e301cf576d0c8d2984ca722d + "@babel/runtime": "npm:^7.13.10" + peerDependencies: + "@types/react": "*" + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/b9fd39911c3644bbda14a84e4fca080682bef84212b8d8931fcaa2d2814465de242c4cfd8d7afb3020646bead9c5e539d478cea0a7031bee8a8a3bb164f3bc4c languageName: node linkType: hard -"@playwright/experimental-ct-svelte@npm:^1.42.1": - version: 1.42.1 - resolution: "@playwright/experimental-ct-svelte@npm:1.42.1" +"@radix-ui/react-use-controllable-state@npm:1.0.1": + version: 1.0.1 + resolution: "@radix-ui/react-use-controllable-state@npm:1.0.1" dependencies: - "@playwright/experimental-ct-core": "npm:1.42.1" - "@sveltejs/vite-plugin-svelte": "npm:^3.0.1" - bin: - playwright: cli.js - checksum: 10/444ef225523b6864b91b4568acf4fc8e6aa447efd29c1e824fbcbc56c1c5a23802dcb27a81cd0b1d99319db2c6bac475ba00aa3b18b12947d84691e20d9634b9 + "@babel/runtime": "npm:^7.13.10" + "@radix-ui/react-use-callback-ref": "npm:1.0.1" + peerDependencies: + "@types/react": "*" + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/dee2be1937d293c3a492cb6d279fc11495a8f19dc595cdbfe24b434e917302f9ac91db24e8cc5af9a065f3f209c3423115b5442e65a5be9fd1e9091338972be9 languageName: node linkType: hard -"@radix-ui/react-compose-refs@npm:1.0.1": - version: 1.0.1 - resolution: "@radix-ui/react-compose-refs@npm:1.0.1" +"@radix-ui/react-use-escape-keydown@npm:1.0.3": + version: 1.0.3 + resolution: "@radix-ui/react-use-escape-keydown@npm:1.0.3" dependencies: "@babel/runtime": "npm:^7.13.10" + "@radix-ui/react-use-callback-ref": "npm:1.0.1" peerDependencies: "@types/react": "*" react: ^16.8 || ^17.0 || ^18.0 peerDependenciesMeta: "@types/react": optional: true - checksum: 10/2b9a613b6db5bff8865588b6bf4065f73021b3d16c0a90b2d4c23deceeb63612f1f15de188227ebdc5f88222cab031be617a9dd025874c0487b303be3e5cc2a8 + checksum: 10/c6ed0d9ce780f67f924980eb305af1f6cce2a8acbaf043a58abe0aa3cc551d9aa76ccee14531df89bbee302ead7ecc7fce330886f82d4672c5eda52f357ef9b8 languageName: node linkType: hard -"@radix-ui/react-slot@npm:^1.0.2": - version: 1.0.2 - resolution: "@radix-ui/react-slot@npm:1.0.2" +"@radix-ui/react-use-layout-effect@npm:1.0.1": + version: 1.0.1 + resolution: "@radix-ui/react-use-layout-effect@npm:1.0.1" dependencies: "@babel/runtime": "npm:^7.13.10" - "@radix-ui/react-compose-refs": "npm:1.0.1" peerDependencies: "@types/react": "*" react: ^16.8 || ^17.0 || ^18.0 peerDependenciesMeta: "@types/react": optional: true - checksum: 10/734866561e991438fbcf22af06e56b272ed6ee8f7b536489ee3bf2f736f8b53bf6bc14ebde94834aa0aceda854d018a0ce20bb171defffbaed1f566006cbb887 + checksum: 10/bed9c7e8de243a5ec3b93bb6a5860950b0dba359b6680c84d57c7a655e123dec9b5891c5dfe81ab970652e7779fe2ad102a23177c7896dde95f7340817d47ae5 languageName: node linkType: hard @@ -2217,11 +2691,9 @@ __metadata: resolution: "@storybook/addon-controls@portal:../../../code/addons/controls::locator=portable-stories-svelte%40workspace%3A." dependencies: "@storybook/blocks": "workspace:*" - "@storybook/core-common": "workspace:*" - cjs-module-lexer: "npm:^1.2.3" - es-module-lexer: "npm:^1.5.0" - globby: "npm:^14.0.1" + dequal: "npm:^2.0.2" lodash: "npm:^4.17.21" + telejson: "npm:^7.2.0" ts-dedent: "npm:^2.0.0" languageName: node linkType: soft @@ -2230,7 +2702,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/addon-docs@portal:../../../code/addons/docs::locator=portable-stories-svelte%40workspace%3A." dependencies: - "@babel/core": "npm:^7.12.3" + "@babel/core": "npm:^7.24.4" "@mdx-js/react": "npm:^3.0.0" "@storybook/blocks": "workspace:*" "@storybook/client-logger": "workspace:*" @@ -2335,7 +2807,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:^0.1.4" "@storybook/docs-tools": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" @@ -2439,8 +2911,8 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/cli@portal:../../../code/lib/cli::locator=portable-stories-svelte%40workspace%3A." dependencies: - "@babel/core": "npm:^7.23.0" - "@babel/types": "npm:^7.23.0" + "@babel/core": "npm:^7.24.4" + "@babel/types": "npm:^7.24.0" "@ndelangen/get-tarball": "npm:^3.0.7" "@storybook/codemod": "workspace:*" "@storybook/core-common": "workspace:*" @@ -2493,10 +2965,10 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/codemod@portal:../../../code/lib/codemod::locator=portable-stories-svelte%40workspace%3A." dependencies: - "@babel/core": "npm:^7.23.2" - "@babel/preset-env": "npm:^7.23.2" - "@babel/types": "npm:^7.23.0" - "@storybook/csf": "npm:^0.1.2" + "@babel/core": "npm:^7.24.4" + "@babel/preset-env": "npm:^7.24.4" + "@babel/types": "npm:^7.24.0" + "@storybook/csf": "npm:^0.1.4" "@storybook/csf-tools": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/types": "workspace:*" @@ -2515,9 +2987,10 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/components@portal:../../../code/ui/components::locator=portable-stories-svelte%40workspace%3A." dependencies: + "@radix-ui/react-dialog": "npm:^1.0.5" "@radix-ui/react-slot": "npm:^1.0.2" "@storybook/client-logger": "workspace:*" - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:^0.1.4" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" "@storybook/theming": "workspace:*" @@ -2555,6 +3028,7 @@ __metadata: node-fetch: "npm:^2.0.0" picomatch: "npm:^2.3.0" pkg-dir: "npm:^5.0.0" + prettier-fallback: "npm:prettier@^3" pretty-hrtime: "npm:^1.0.3" resolve-from: "npm:^5.0.0" semver: "npm:^7.3.7" @@ -2562,6 +3036,11 @@ __metadata: tiny-invariant: "npm:^1.3.1" ts-dedent: "npm:^2.0.0" util: "npm:^0.12.4" + peerDependencies: + prettier: ^2 || ^3 + peerDependenciesMeta: + prettier: + optional: true languageName: node linkType: soft @@ -2569,6 +3048,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/core-events@portal:../../../code/lib/core-events::locator=portable-stories-svelte%40workspace%3A." dependencies: + "@storybook/csf": "npm:^0.1.4" ts-dedent: "npm:^2.0.0" languageName: node linkType: soft @@ -2578,13 +3058,14 @@ __metadata: resolution: "@storybook/core-server@portal:../../../code/lib/core-server::locator=portable-stories-svelte%40workspace%3A." dependencies: "@aw-web-design/x-default-browser": "npm:1.4.126" - "@babel/core": "npm:^7.23.9" + "@babel/core": "npm:^7.24.4" + "@babel/parser": "npm:^7.24.4" "@discoveryjs/json-ext": "npm:^0.5.3" "@storybook/builder-manager": "workspace:*" "@storybook/channels": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:^0.1.4" "@storybook/csf-tools": "workspace:*" "@storybook/docs-mdx": "npm:3.0.0" "@storybook/global": "npm:^5.0.0" @@ -2595,6 +3076,7 @@ __metadata: "@storybook/telemetry": "workspace:*" "@storybook/types": "workspace:*" "@types/detect-port": "npm:^1.3.0" + "@types/diff": "npm:^5.0.9" "@types/node": "npm:^18.0.0" "@types/pretty-hrtime": "npm:^1.0.0" "@types/semver": "npm:^7.3.4" @@ -2603,6 +3085,7 @@ __metadata: cli-table3: "npm:^0.6.1" compression: "npm:^1.7.4" detect-port: "npm:^1.3.0" + diff: "npm:^5.2.0" express: "npm:^4.17.3" fs-extra: "npm:^11.1.0" globby: "npm:^14.0.1" @@ -2636,11 +3119,11 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/csf-tools@portal:../../../code/lib/csf-tools::locator=portable-stories-svelte%40workspace%3A." dependencies: - "@babel/generator": "npm:^7.23.0" - "@babel/parser": "npm:^7.23.0" - "@babel/traverse": "npm:^7.23.2" - "@babel/types": "npm:^7.23.0" - "@storybook/csf": "npm:^0.1.2" + "@babel/generator": "npm:^7.24.4" + "@babel/parser": "npm:^7.24.4" + "@babel/traverse": "npm:^7.24.1" + "@babel/types": "npm:^7.24.0" + "@storybook/csf": "npm:^0.1.4" "@storybook/types": "workspace:*" fs-extra: "npm:^11.1.0" recast: "npm:^0.23.5" @@ -2648,12 +3131,12 @@ __metadata: languageName: node linkType: soft -"@storybook/csf@npm:^0.1.2": - version: 0.1.2 - resolution: "@storybook/csf@npm:0.1.2" +"@storybook/csf@npm:^0.1.4": + version: 0.1.4 + resolution: "@storybook/csf@npm:0.1.4" dependencies: type-fest: "npm:^2.19.0" - checksum: 10/11168df65e7b6bd0e5d31e7e805c8ba80397fc190cb33424e043b72bbd85d8f826dba082503992d7f606b72484337ab9d091eca947550613e241fbef57780d4c + checksum: 10/105f3bd748613b775e87454a8470e36733d0ac25b4b88aa9dbebe060f92ff8d5fda1c98289657039d980ecc8d4d59079ef559a42e211568dc97e19d245117156 languageName: node linkType: hard @@ -2669,6 +3152,7 @@ __metadata: resolution: "@storybook/docs-tools@portal:../../../code/lib/docs-tools::locator=portable-stories-svelte%40workspace%3A." dependencies: "@storybook/core-common": "workspace:*" + "@storybook/core-events": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/types": "workspace:*" "@types/doctrine": "npm:^0.0.3" @@ -2716,7 +3200,7 @@ __metadata: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:^0.1.4" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" "@storybook/router": "workspace:*" @@ -2750,7 +3234,7 @@ __metadata: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:^0.1.4" "@storybook/global": "npm:^5.0.0" "@storybook/types": "workspace:*" "@types/qs": "npm:^6.9.5" @@ -2853,7 +3337,6 @@ __metadata: "@testing-library/user-event": "npm:^14.5.2" "@vitest/expect": "npm:1.3.1" "@vitest/spy": "npm:^1.3.1" - chai: "npm:^4.4.1" util: "npm:^0.12.4" languageName: node linkType: soft @@ -3036,6 +3519,13 @@ __metadata: languageName: node linkType: hard +"@types/diff@npm:^5.0.9": + version: 5.2.0 + resolution: "@types/diff@npm:5.2.0" + checksum: 10/e1d3e6e9fd9d5386496c8716dd89316288d139cd8159a064f886a079149d05d65289b7b725ce1e333d4e77ce8024e210c6e281e9875a636fc17b4c760c2cf85f + languageName: node + linkType: hard + "@types/doctrine@npm:^0.0.3": version: 0.0.3 resolution: "@types/doctrine@npm:0.0.3" @@ -3547,6 +4037,15 @@ __metadata: languageName: node linkType: hard +"aria-hidden@npm:^1.1.1": + version: 1.2.4 + resolution: "aria-hidden@npm:1.2.4" + dependencies: + tslib: "npm:^2.0.0" + checksum: 10/df4bc15423aaaba3729a7d40abcbf6d3fffa5b8fd5eb33d3ac8b7da0110c47552fca60d97f2e1edfbb68a27cae1da499f1c3896966efb3e26aac4e3b57e3cc8b + languageName: node + linkType: hard + "aria-query@npm:5.1.3": version: 5.1.3 resolution: "aria-query@npm:5.1.3" @@ -3703,39 +4202,39 @@ __metadata: languageName: node linkType: hard -"babel-plugin-polyfill-corejs2@npm:^0.4.8": - version: 0.4.10 - resolution: "babel-plugin-polyfill-corejs2@npm:0.4.10" +"babel-plugin-polyfill-corejs2@npm:^0.4.10": + version: 0.4.11 + resolution: "babel-plugin-polyfill-corejs2@npm:0.4.11" dependencies: "@babel/compat-data": "npm:^7.22.6" - "@babel/helper-define-polyfill-provider": "npm:^0.6.1" + "@babel/helper-define-polyfill-provider": "npm:^0.6.2" semver: "npm:^6.3.1" peerDependencies: "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0 - checksum: 10/9fb5e59a3235eba66fb05060b2a3ecd6923084f100df7526ab74b6272347d7adcf99e17366b82df36e592cde4e82fdb7ae24346a990eced76c7d504cac243400 + checksum: 10/9c79908bed61b9f52190f254e22d3dca6ce25769738642579ba8d23832f3f9414567a90d8367a31831fa45d9b9607ac43d8d07ed31167d8ca8cda22871f4c7a1 languageName: node linkType: hard -"babel-plugin-polyfill-corejs3@npm:^0.9.0": - version: 0.9.0 - resolution: "babel-plugin-polyfill-corejs3@npm:0.9.0" +"babel-plugin-polyfill-corejs3@npm:^0.10.4": + version: 0.10.4 + resolution: "babel-plugin-polyfill-corejs3@npm:0.10.4" dependencies: - "@babel/helper-define-polyfill-provider": "npm:^0.5.0" - core-js-compat: "npm:^3.34.0" + "@babel/helper-define-polyfill-provider": "npm:^0.6.1" + core-js-compat: "npm:^3.36.1" peerDependencies: "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0 - checksum: 10/efdf9ba82e7848a2c66e0522adf10ac1646b16f271a9006b61a22f976b849de22a07c54c8826887114842ccd20cc9a4617b61e8e0789227a74378ab508e715cd + checksum: 10/a69ed5a95bb55e9b7ea37307d56113f7e24054d479c15de6d50fa61388b5334bed1f9b6414cde6c575fa910a4de4d1ab4f2d22720967d57c4fec9d1b8f61b355 languageName: node linkType: hard -"babel-plugin-polyfill-regenerator@npm:^0.5.5": - version: 0.5.5 - resolution: "babel-plugin-polyfill-regenerator@npm:0.5.5" +"babel-plugin-polyfill-regenerator@npm:^0.6.1": + version: 0.6.2 + resolution: "babel-plugin-polyfill-regenerator@npm:0.6.2" dependencies: - "@babel/helper-define-polyfill-provider": "npm:^0.5.0" + "@babel/helper-define-polyfill-provider": "npm:^0.6.2" peerDependencies: "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0 - checksum: 10/3a9b4828673b23cd648dcfb571eadcd9d3fadfca0361d0a7c6feeb5a30474e92faaa49f067a6e1c05e49b6a09812879992028ff3ef3446229ff132d6e1de7eb6 + checksum: 10/150233571072b6b3dfe946242da39cba8587b7f908d1c006f7545fc88b0e3c3018d445739beb61e7a75835f0c2751dbe884a94ff9b245ec42369d9267e0e1b3f languageName: node linkType: hard @@ -3883,7 +4382,7 @@ __metadata: languageName: node linkType: hard -"browserslist@npm:^4.22.2, browserslist@npm:^4.22.3": +"browserslist@npm:^4.22.2, browserslist@npm:^4.22.3, browserslist@npm:^4.23.0": version: 4.23.0 resolution: "browserslist@npm:4.23.0" dependencies: @@ -4003,7 +4502,7 @@ __metadata: languageName: node linkType: hard -"chai@npm:^4.3.10, chai@npm:^4.4.1": +"chai@npm:^4.3.10": version: 4.4.1 resolution: "chai@npm:4.4.1" dependencies: @@ -4114,13 +4613,6 @@ __metadata: languageName: node linkType: hard -"cjs-module-lexer@npm:^1.2.3": - version: 1.2.3 - resolution: "cjs-module-lexer@npm:1.2.3" - checksum: 10/f96a5118b0a012627a2b1c13bd2fcb92509778422aaa825c5da72300d6dcadfb47134dd2e9d97dfa31acd674891dd91642742772d19a09a8adc3e56bd2f5928c - languageName: node - linkType: hard - "clean-stack@npm:^2.0.0": version: 2.2.0 resolution: "clean-stack@npm:2.2.0" @@ -4342,7 +4834,7 @@ __metadata: languageName: node linkType: hard -"core-js-compat@npm:^3.31.0, core-js-compat@npm:^3.34.0": +"core-js-compat@npm:^3.31.0": version: 3.36.0 resolution: "core-js-compat@npm:3.36.0" dependencies: @@ -4351,6 +4843,15 @@ __metadata: languageName: node linkType: hard +"core-js-compat@npm:^3.36.1": + version: 3.37.0 + resolution: "core-js-compat@npm:3.37.0" + dependencies: + browserslist: "npm:^4.23.0" + checksum: 10/5f33d7ba45acc9ceb45544d844090edfd14e46a64c2424df24084347405182c1156588cc3a877fc580c005a0b13b8a1af26bb6c73fe73f22eede89b5483b482d + languageName: node + linkType: hard + "core-util-is@npm:1.0.2": version: 1.0.2 resolution: "core-util-is@npm:1.0.2" @@ -4686,6 +5187,13 @@ __metadata: languageName: node linkType: hard +"detect-node-es@npm:^1.1.0": + version: 1.1.0 + resolution: "detect-node-es@npm:1.1.0" + checksum: 10/e46307d7264644975b71c104b9f028ed1d3d34b83a15b8a22373640ce5ea630e5640b1078b8ea15f202b54641da71e4aa7597093bd4b91f113db520a26a37449 + languageName: node + linkType: hard + "detect-package-manager@npm:^2.0.1": version: 2.0.1 resolution: "detect-package-manager@npm:2.0.1" @@ -4715,6 +5223,13 @@ __metadata: languageName: node linkType: hard +"diff@npm:^5.2.0": + version: 5.2.0 + resolution: "diff@npm:5.2.0" + checksum: 10/01b7b440f83a997350a988e9d2f558366c0f90f15be19f4aa7f1bb3109a4e153dfc3b9fbf78e14ea725717017407eeaa2271e3896374a0181e8f52445740846d + languageName: node + linkType: hard + "dir-glob@npm:^3.0.1": version: 3.0.1 resolution: "dir-glob@npm:3.0.1" @@ -5934,6 +6449,13 @@ __metadata: languageName: node linkType: hard +"get-nonce@npm:^1.0.0": + version: 1.0.1 + resolution: "get-nonce@npm:1.0.1" + checksum: 10/ad5104871d114a694ecc506a2d406e2331beccb961fe1e110dc25556b38bcdbf399a823a8a375976cd8889668156a9561e12ebe3fa6a4c6ba169c8466c2ff868 + languageName: node + linkType: hard + "get-npm-tarball-url@npm:^2.0.3": version: 2.1.0 resolution: "get-npm-tarball-url@npm:2.1.0" @@ -6451,6 +6973,15 @@ __metadata: languageName: node linkType: hard +"invariant@npm:^2.2.4": + version: 2.2.4 + resolution: "invariant@npm:2.2.4" + dependencies: + loose-envify: "npm:^1.0.0" + checksum: 10/cc3182d793aad82a8d1f0af697b462939cb46066ec48bbf1707c150ad5fad6406137e91a262022c269702e01621f35ef60269f6c0d7fd178487959809acdfb14 + languageName: node + linkType: hard + "ip-address@npm:^9.0.5": version: 9.0.5 resolution: "ip-address@npm:9.0.5" @@ -7297,7 +7828,7 @@ __metadata: languageName: node linkType: hard -"loose-envify@npm:^1.1.0": +"loose-envify@npm:^1.0.0, loose-envify@npm:^1.1.0": version: 1.4.0 resolution: "loose-envify@npm:1.4.0" dependencies: @@ -8392,7 +8923,7 @@ __metadata: languageName: node linkType: hard -"prettier@npm:^3.1.1": +"prettier-fallback@npm:prettier@^3, prettier@npm:^3.1.1": version: 3.2.5 resolution: "prettier@npm:3.2.5" bin: @@ -8650,6 +9181,58 @@ __metadata: languageName: node linkType: hard +"react-remove-scroll-bar@npm:^2.3.3": + version: 2.3.6 + resolution: "react-remove-scroll-bar@npm:2.3.6" + dependencies: + react-style-singleton: "npm:^2.2.1" + tslib: "npm:^2.0.0" + peerDependencies: + "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/5ab8eda61d5b10825447d11e9c824486c929351a471457c22452caa19b6898e18c3af6a46c3fa68010c713baed1eb9956106d068b4a1058bdcf97a1a9bbed734 + languageName: node + linkType: hard + +"react-remove-scroll@npm:2.5.5": + version: 2.5.5 + resolution: "react-remove-scroll@npm:2.5.5" + dependencies: + react-remove-scroll-bar: "npm:^2.3.3" + react-style-singleton: "npm:^2.2.1" + tslib: "npm:^2.1.0" + use-callback-ref: "npm:^1.3.0" + use-sidecar: "npm:^1.1.2" + peerDependencies: + "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/f0646ac384ce3852d1f41e30a9f9e251b11cf3b430d1d114c937c8fa7f90a895c06378d0d6b6ff0b2d00cbccf15e845921944fd6074ae67a0fb347a718106d88 + languageName: node + linkType: hard + +"react-style-singleton@npm:^2.2.1": + version: 2.2.1 + resolution: "react-style-singleton@npm:2.2.1" + dependencies: + get-nonce: "npm:^1.0.0" + invariant: "npm:^2.2.4" + tslib: "npm:^2.0.0" + peerDependencies: + "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/80c58fd6aac3594e351e2e7b048d8a5b09508adb21031a38b3c40911fe58295572eddc640d4b20a7be364842c8ed1120fe30097e22ea055316b375b88d4ff02a + languageName: node + linkType: hard + "react@npm:^16.8.0 || ^17.0.0 || ^18.0.0": version: 18.2.0 resolution: "react@npm:18.2.0" @@ -9958,7 +10541,7 @@ __metadata: languageName: node linkType: hard -"tslib@npm:^2.0.1, tslib@npm:^2.1.0, tslib@npm:^2.4.0, tslib@npm:^2.6.2": +"tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.1.0, tslib@npm:^2.4.0, tslib@npm:^2.6.2": version: 2.6.2 resolution: "tslib@npm:2.6.2" checksum: 10/bd26c22d36736513980091a1e356378e8b662ded04204453d353a7f34a4c21ed0afc59b5f90719d4ba756e581a162ecbf93118dc9c6be5acf70aa309188166ca @@ -10260,6 +10843,37 @@ __metadata: languageName: node linkType: hard +"use-callback-ref@npm:^1.3.0": + version: 1.3.2 + resolution: "use-callback-ref@npm:1.3.2" + dependencies: + tslib: "npm:^2.0.0" + peerDependencies: + "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/3be76eae71b52ab233b4fde974eddeff72e67e6723100a0c0297df4b0d60daabedfa706ffb314d0a52645f2c1235e50fdbd53d99f374eb5df68c74d412e98a9b + languageName: node + linkType: hard + +"use-sidecar@npm:^1.1.2": + version: 1.1.2 + resolution: "use-sidecar@npm:1.1.2" + dependencies: + detect-node-es: "npm:^1.1.0" + tslib: "npm:^2.0.0" + peerDependencies: + "@types/react": ^16.9.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/ec99e31aefeb880f6dc4d02cb19a01d123364954f857811470ece32872f70d6c3eadbe4d073770706a9b7db6136f2a9fbf1bb803e07fbb21e936a47479281690 + languageName: node + linkType: hard + "util-deprecate@npm:^1.0.1, util-deprecate@npm:^1.0.2, util-deprecate@npm:~1.0.1": version: 1.0.2 resolution: "util-deprecate@npm:1.0.2" diff --git a/test-storybooks/portable-stories-kitchen-sink/vue3/yarn.lock b/test-storybooks/portable-stories-kitchen-sink/vue3/yarn.lock index bab162b80aac..ea28f0f35a1b 100644 --- a/test-storybooks/portable-stories-kitchen-sink/vue3/yarn.lock +++ b/test-storybooks/portable-stories-kitchen-sink/vue3/yarn.lock @@ -50,6 +50,16 @@ __metadata: languageName: node linkType: hard +"@babel/code-frame@npm:^7.24.1, @babel/code-frame@npm:^7.24.2": + version: 7.24.2 + resolution: "@babel/code-frame@npm:7.24.2" + dependencies: + "@babel/highlight": "npm:^7.24.2" + picocolors: "npm:^1.0.0" + checksum: 10/7db8f5b36ffa3f47a37f58f61e3d130b9ecad21961f3eede7e2a4ac2c7e4a5efb6e9d03a810c669bc986096831b6c0dfc2c3082673d93351b82359c1b03e0590 + languageName: node + linkType: hard + "@babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.23.5": version: 7.23.5 resolution: "@babel/compat-data@npm:7.23.5" @@ -57,7 +67,14 @@ __metadata: languageName: node linkType: hard -"@babel/core@npm:^7.12.3, @babel/core@npm:^7.23.0, @babel/core@npm:^7.23.2, @babel/core@npm:^7.23.9": +"@babel/compat-data@npm:^7.24.4": + version: 7.24.4 + resolution: "@babel/compat-data@npm:7.24.4" + checksum: 10/e51faec0ac8259f03cc5029d2b4a944b4fee44cb5188c11530769d5beb81f384d031dba951febc3e33dbb48ceb8045b1184f5c1ac4c5f86ab1f5e951e9aaf7af + languageName: node + linkType: hard + +"@babel/core@npm:^7.23.0": version: 7.24.0 resolution: "@babel/core@npm:7.24.0" dependencies: @@ -80,7 +97,30 @@ __metadata: languageName: node linkType: hard -"@babel/generator@npm:^7.23.0, @babel/generator@npm:^7.23.6": +"@babel/core@npm:^7.24.4": + version: 7.24.4 + resolution: "@babel/core@npm:7.24.4" + dependencies: + "@ampproject/remapping": "npm:^2.2.0" + "@babel/code-frame": "npm:^7.24.2" + "@babel/generator": "npm:^7.24.4" + "@babel/helper-compilation-targets": "npm:^7.23.6" + "@babel/helper-module-transforms": "npm:^7.23.3" + "@babel/helpers": "npm:^7.24.4" + "@babel/parser": "npm:^7.24.4" + "@babel/template": "npm:^7.24.0" + "@babel/traverse": "npm:^7.24.1" + "@babel/types": "npm:^7.24.0" + convert-source-map: "npm:^2.0.0" + debug: "npm:^4.1.0" + gensync: "npm:^1.0.0-beta.2" + json5: "npm:^2.2.3" + semver: "npm:^6.3.1" + checksum: 10/1e049f8df26be0fe5be36173fd7c33dfb004eeeec28152fea83c90e71784f9a6f2237296f43a2ee7d9041e2a33a05f43da48ce2d4e0cd473a682328ca07ce7e0 + languageName: node + linkType: hard + +"@babel/generator@npm:^7.23.6": version: 7.23.6 resolution: "@babel/generator@npm:7.23.6" dependencies: @@ -92,6 +132,18 @@ __metadata: languageName: node linkType: hard +"@babel/generator@npm:^7.24.1, @babel/generator@npm:^7.24.4": + version: 7.24.4 + resolution: "@babel/generator@npm:7.24.4" + dependencies: + "@babel/types": "npm:^7.24.0" + "@jridgewell/gen-mapping": "npm:^0.3.5" + "@jridgewell/trace-mapping": "npm:^0.3.25" + jsesc: "npm:^2.5.1" + checksum: 10/69e1772dcf8f95baec951f422cca091d59a3f29b5eedc989ad87f7262289b94625983f6fe654302ca17aae0a32f9232332b83fcc85533311d6267b09c58b1061 + languageName: node + linkType: hard + "@babel/helper-annotate-as-pure@npm:^7.22.5": version: 7.22.5 resolution: "@babel/helper-annotate-as-pure@npm:7.22.5" @@ -110,7 +162,7 @@ __metadata: languageName: node linkType: hard -"@babel/helper-compilation-targets@npm:^7.22.15, @babel/helper-compilation-targets@npm:^7.22.6, @babel/helper-compilation-targets@npm:^7.23.6": +"@babel/helper-compilation-targets@npm:^7.22.6, @babel/helper-compilation-targets@npm:^7.23.6": version: 7.23.6 resolution: "@babel/helper-compilation-targets@npm:7.23.6" dependencies: @@ -142,6 +194,25 @@ __metadata: languageName: node linkType: hard +"@babel/helper-create-class-features-plugin@npm:^7.24.1, @babel/helper-create-class-features-plugin@npm:^7.24.4": + version: 7.24.4 + resolution: "@babel/helper-create-class-features-plugin@npm:7.24.4" + dependencies: + "@babel/helper-annotate-as-pure": "npm:^7.22.5" + "@babel/helper-environment-visitor": "npm:^7.22.20" + "@babel/helper-function-name": "npm:^7.23.0" + "@babel/helper-member-expression-to-functions": "npm:^7.23.0" + "@babel/helper-optimise-call-expression": "npm:^7.22.5" + "@babel/helper-replace-supers": "npm:^7.24.1" + "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5" + "@babel/helper-split-export-declaration": "npm:^7.22.6" + semver: "npm:^6.3.1" + peerDependencies: + "@babel/core": ^7.0.0 + checksum: 10/86153719d98e4402f92f24d6b1be94e6b59c0236a6cc36b173a570a64b5156dbc2f16ccfe3c8485dc795524ca88acca65b14863be63049586668c45567f2acd4 + languageName: node + linkType: hard + "@babel/helper-create-regexp-features-plugin@npm:^7.18.6, @babel/helper-create-regexp-features-plugin@npm:^7.22.15, @babel/helper-create-regexp-features-plugin@npm:^7.22.5": version: 7.22.15 resolution: "@babel/helper-create-regexp-features-plugin@npm:7.22.15" @@ -155,9 +226,9 @@ __metadata: languageName: node linkType: hard -"@babel/helper-define-polyfill-provider@npm:^0.5.0": - version: 0.5.0 - resolution: "@babel/helper-define-polyfill-provider@npm:0.5.0" +"@babel/helper-define-polyfill-provider@npm:^0.6.1": + version: 0.6.1 + resolution: "@babel/helper-define-polyfill-provider@npm:0.6.1" dependencies: "@babel/helper-compilation-targets": "npm:^7.22.6" "@babel/helper-plugin-utils": "npm:^7.22.5" @@ -166,13 +237,13 @@ __metadata: resolve: "npm:^1.14.2" peerDependencies: "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0 - checksum: 10/f849e816ec4b182a3e8fa8e09ff016f88bb95259cd6b2190b815c48f83c3d3b68e973a8ec72acc5086bfe93705cbd46ec089c06476421d858597780e42235a03 + checksum: 10/316e7c0f05d2ae233d5fbb622c6339436da8d2b2047be866b64a16e6996c078a23b4adfebbdb33bc6a9882326a6cc20b95daa79a5e0edc92e9730e36d45fa523 languageName: node linkType: hard -"@babel/helper-define-polyfill-provider@npm:^0.6.1": - version: 0.6.1 - resolution: "@babel/helper-define-polyfill-provider@npm:0.6.1" +"@babel/helper-define-polyfill-provider@npm:^0.6.2": + version: 0.6.2 + resolution: "@babel/helper-define-polyfill-provider@npm:0.6.2" dependencies: "@babel/helper-compilation-targets": "npm:^7.22.6" "@babel/helper-plugin-utils": "npm:^7.22.5" @@ -181,7 +252,7 @@ __metadata: resolve: "npm:^1.14.2" peerDependencies: "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0 - checksum: 10/316e7c0f05d2ae233d5fbb622c6339436da8d2b2047be866b64a16e6996c078a23b4adfebbdb33bc6a9882326a6cc20b95daa79a5e0edc92e9730e36d45fa523 + checksum: 10/bb32ec12024d3f16e70641bc125d2534a97edbfdabbc9f69001ec9c4ce46f877c7a224c566aa6c8c510c3b0def2e43dc4433bf6a40896ba5ce0cef4ea5ccbcff languageName: node linkType: hard @@ -229,6 +300,15 @@ __metadata: languageName: node linkType: hard +"@babel/helper-module-imports@npm:^7.24.1": + version: 7.24.3 + resolution: "@babel/helper-module-imports@npm:7.24.3" + dependencies: + "@babel/types": "npm:^7.24.0" + checksum: 10/42fe124130b78eeb4bb6af8c094aa749712be0f4606f46716ce74bc18a5ea91c918c547c8bb2307a2e4b33f163e4ad2cb6a7b45f80448e624eae45b597ea3499 + languageName: node + linkType: hard + "@babel/helper-module-transforms@npm:^7.23.3": version: 7.23.3 resolution: "@babel/helper-module-transforms@npm:7.23.3" @@ -286,6 +366,19 @@ __metadata: languageName: node linkType: hard +"@babel/helper-replace-supers@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/helper-replace-supers@npm:7.24.1" + dependencies: + "@babel/helper-environment-visitor": "npm:^7.22.20" + "@babel/helper-member-expression-to-functions": "npm:^7.23.0" + "@babel/helper-optimise-call-expression": "npm:^7.22.5" + peerDependencies: + "@babel/core": ^7.0.0 + checksum: 10/1103b28ce0cc7fba903c21bc78035c696ff191bdbbe83c20c37030a2e10ae6254924556d942cdf8c44c48ba606a8266fdb105e6bb10945de9285f79cb1905df1 + languageName: node + linkType: hard + "@babel/helper-simple-access@npm:^7.22.5": version: 7.22.5 resolution: "@babel/helper-simple-access@npm:7.22.5" @@ -356,6 +449,17 @@ __metadata: languageName: node linkType: hard +"@babel/helpers@npm:^7.24.4": + version: 7.24.4 + resolution: "@babel/helpers@npm:7.24.4" + dependencies: + "@babel/template": "npm:^7.24.0" + "@babel/traverse": "npm:^7.24.1" + "@babel/types": "npm:^7.24.0" + checksum: 10/54a9d0f86f2803fcc216cfa23b66b871ea0fa0a892af1c9a79075872c2437de71afbb150ed8216f30e00b19a0b9c5c9d5845173d170e1ebfbbf8887839b89dde + languageName: node + linkType: hard + "@babel/highlight@npm:^7.23.4": version: 7.23.4 resolution: "@babel/highlight@npm:7.23.4" @@ -367,6 +471,18 @@ __metadata: languageName: node linkType: hard +"@babel/highlight@npm:^7.24.2": + version: 7.24.2 + resolution: "@babel/highlight@npm:7.24.2" + dependencies: + "@babel/helper-validator-identifier": "npm:^7.22.20" + chalk: "npm:^2.4.2" + js-tokens: "npm:^4.0.0" + picocolors: "npm:^1.0.0" + checksum: 10/4555124235f34403bb28f55b1de58edf598491cc181c75f8afc8fe529903cb598cd52fe3bf2faab9bc1f45c299681ef0e44eea7a848bb85c500c5a4fe13f54f6 + languageName: node + linkType: hard + "@babel/parser@npm:^7.21.4, @babel/parser@npm:^7.23.0, @babel/parser@npm:^7.23.9, @babel/parser@npm:^7.24.0, @babel/parser@npm:^7.6.0, @babel/parser@npm:^7.9.6": version: 7.24.0 resolution: "@babel/parser@npm:7.24.0" @@ -376,39 +492,60 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.23.3" +"@babel/parser@npm:^7.24.1, @babel/parser@npm:^7.24.4": + version: 7.24.4 + resolution: "@babel/parser@npm:7.24.4" + bin: + parser: ./bin/babel-parser.js + checksum: 10/3742cc5068036287e6395269dce5a2735e6349cdc8d4b53297c75f98c580d7e1c8cb43235623999d151f2ef975d677dbc2c2357573a1855caa71c271bf3046c9 + languageName: node + linkType: hard + +"@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:^7.24.4": + version: 7.24.4 + resolution: "@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:7.24.4" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-environment-visitor": "npm:^7.22.20" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0 - checksum: 10/ddbaf2c396b7780f15e80ee01d6dd790db076985f3dfeb6527d1a8d4cacf370e49250396a3aa005b2c40233cac214a106232f83703d5e8491848bde273938232 + checksum: 10/1439e2ceec512b72f05f036503bf2c31e807d1b75ae22cf2676145e9f20740960a1c9575ea3065c6fb9f44f6b46163aab76eac513694ffa10de674e3cdd6219e languageName: node linkType: hard -"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:7.23.3" +"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" + peerDependencies: + "@babel/core": ^7.0.0 + checksum: 10/ec5fddc8db6de0e0082a883f21141d6f4f9f9f0bc190d662a732b5e9a506aae5d7d2337049a1bf055d7cb7add6f128036db6d4f47de5e9ac1be29e043c8b7ca8 + languageName: node + linkType: hard + +"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:7.24.1" + dependencies: + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5" - "@babel/plugin-transform-optional-chaining": "npm:^7.23.3" + "@babel/plugin-transform-optional-chaining": "npm:^7.24.1" peerDependencies: "@babel/core": ^7.13.0 - checksum: 10/434b9d710ae856fa1a456678cc304fbc93915af86d581ee316e077af746a709a741ea39d7e1d4f5b98861b629cc7e87f002d3138f5e836775632466d4c74aef2 + checksum: 10/e18235463e716ac2443938aaec3c18b40c417a1746fba0fa4c26cf4d71326b76ef26c002081ab1b445abfae98e063d561519aa55672dddc1ef80b3940211ffbb languageName: node linkType: hard -"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:^7.23.7": - version: 7.23.7 - resolution: "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:7.23.7" +"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@npm:7.24.1" dependencies: "@babel/helper-environment-visitor": "npm:^7.22.20" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0 - checksum: 10/3b0c9554cd0048e6e7341d7b92f29d400dbc6a5a4fc2f86dbed881d32e02ece9b55bc520387bae2eac22a5ab38a0b205c29b52b181294d99b4dd75e27309b548 + checksum: 10/3483f329bb099b438d05e5e206229ddbc1703972a69ba0240a796b5477369930b0ab2e7f6c9539ecad2cea8b0c08fa65498778b92cf87ad3d156f613de1fd2fa languageName: node linkType: hard @@ -487,25 +624,25 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-syntax-import-assertions@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-syntax-import-assertions@npm:7.23.3" +"@babel/plugin-syntax-import-assertions@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-syntax-import-assertions@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/883e6b35b2da205138caab832d54505271a3fee3fc1e8dc0894502434fc2b5d517cbe93bbfbfef8068a0fb6ec48ebc9eef3f605200a489065ba43d8cddc1c9a7 + checksum: 10/2a463928a63b62052e9fb8f8b0018aa11a926e94f32c168260ae012afe864875c6176c6eb361e13f300542c31316dad791b08a5b8ed92436a3095c7a0e4fce65 languageName: node linkType: hard -"@babel/plugin-syntax-import-attributes@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-syntax-import-attributes@npm:7.23.3" +"@babel/plugin-syntax-import-attributes@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-syntax-import-attributes@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/9aed7661ffb920ca75df9f494757466ca92744e43072e0848d87fa4aa61a3f2ee5a22198ac1959856c036434b5614a8f46f1fb70298835dbe28220cdd1d4c11e + checksum: 10/87c8aa4a5ef931313f956871b27f2c051556f627b97ed21e9a5890ca4906b222d89062a956cde459816f5e0dec185ff128d7243d3fdc389504522acb88f0464e languageName: node linkType: hard @@ -653,67 +790,67 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-arrow-functions@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-arrow-functions@npm:7.23.3" +"@babel/plugin-transform-arrow-functions@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-arrow-functions@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/1e99118176e5366c2636064d09477016ab5272b2a92e78b8edb571d20bc3eaa881789a905b20042942c3c2d04efc530726cf703f937226db5ebc495f5d067e66 + checksum: 10/58f9aa9b0de8382f8cfa3f1f1d40b69d98cd2f52340e2391733d0af745fdddda650ba392e509bc056157c880a2f52834a38ab2c5aa5569af8c61bb6ecbf45f34 languageName: node linkType: hard -"@babel/plugin-transform-async-generator-functions@npm:^7.23.9": - version: 7.23.9 - resolution: "@babel/plugin-transform-async-generator-functions@npm:7.23.9" +"@babel/plugin-transform-async-generator-functions@npm:^7.24.3": + version: 7.24.3 + resolution: "@babel/plugin-transform-async-generator-functions@npm:7.24.3" dependencies: "@babel/helper-environment-visitor": "npm:^7.22.20" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/helper-remap-async-to-generator": "npm:^7.22.20" "@babel/plugin-syntax-async-generators": "npm:^7.8.4" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/d402494087a6b803803eb5ab46b837aab100a04c4c5148e38bfa943ea1bbfc1ecfb340f1ced68972564312d3580f550c125f452372e77607a558fbbaf98c31c0 + checksum: 10/4ccc3755a3d51544cd43575db2c5c2ef42cdcd35bd5940d13cdf23f04c75496290e79ea585a62427ec6bd508a1bffb329e01556cd1114be9b38ae4254935cd19 languageName: node linkType: hard -"@babel/plugin-transform-async-to-generator@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-async-to-generator@npm:7.23.3" +"@babel/plugin-transform-async-to-generator@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-async-to-generator@npm:7.24.1" dependencies: - "@babel/helper-module-imports": "npm:^7.22.15" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-module-imports": "npm:^7.24.1" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/helper-remap-async-to-generator": "npm:^7.22.20" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/2e9d9795d4b3b3d8090332104e37061c677f29a1ce65bcbda4099a32d243e5d9520270a44bbabf0fb1fb40d463bd937685b1a1042e646979086c546d55319c3c + checksum: 10/429004a6596aa5c9e707b604156f49a146f8d029e31a3152b1649c0b56425264fda5fd38e5db1ddaeb33c3fe45c97dc8078d7abfafe3542a979b49f229801135 languageName: node linkType: hard -"@babel/plugin-transform-block-scoped-functions@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-block-scoped-functions@npm:7.23.3" +"@babel/plugin-transform-block-scoped-functions@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-block-scoped-functions@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/e63b16d94ee5f4d917e669da3db5ea53d1e7e79141a2ec873c1e644678cdafe98daa556d0d359963c827863d6b3665d23d4938a94a4c5053a1619c4ebd01d020 + checksum: 10/d8e18bd57b156da1cd4d3c1780ab9ea03afed56c6824ca8e6e74f67959d7989a0e953ec370fe9b417759314f2eef30c8c437395ce63ada2e26c2f469e4704f82 languageName: node linkType: hard -"@babel/plugin-transform-block-scoping@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-block-scoping@npm:7.23.4" +"@babel/plugin-transform-block-scoping@npm:^7.24.4": + version: 7.24.4 + resolution: "@babel/plugin-transform-block-scoping@npm:7.24.4" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/bbb965a3acdfb03559806d149efbd194ac9c983b260581a60efcb15eb9fbe20e3054667970800146d867446db1c1398f8e4ee87f4454233e49b8f8ce947bd99b + checksum: 10/4093fa109cd256e8ad0b26e3ffa67ec6dac4078a1a24b7755bed63e650cf938b2a315e01696c35b221db1a37606f93cb82696c8d1bf563c2a9845620e551736e languageName: node linkType: hard -"@babel/plugin-transform-class-properties@npm:^7.22.5, @babel/plugin-transform-class-properties@npm:^7.23.3": +"@babel/plugin-transform-class-properties@npm:^7.22.5": version: 7.23.3 resolution: "@babel/plugin-transform-class-properties@npm:7.23.3" dependencies: @@ -725,116 +862,128 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-class-static-block@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-class-static-block@npm:7.23.4" +"@babel/plugin-transform-class-properties@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-class-properties@npm:7.24.1" dependencies: - "@babel/helper-create-class-features-plugin": "npm:^7.22.15" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-create-class-features-plugin": "npm:^7.24.1" + "@babel/helper-plugin-utils": "npm:^7.24.0" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10/95779e9eef0c0638b9631c297d48aee53ffdbb2b1b5221bf40d7eccd566a8e34f859ff3571f8f20b9159b67f1bff7d7dc81da191c15d69fbae5a645197eae7e0 + languageName: node + linkType: hard + +"@babel/plugin-transform-class-static-block@npm:^7.24.4": + version: 7.24.4 + resolution: "@babel/plugin-transform-class-static-block@npm:7.24.4" + dependencies: + "@babel/helper-create-class-features-plugin": "npm:^7.24.4" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/plugin-syntax-class-static-block": "npm:^7.14.5" peerDependencies: "@babel/core": ^7.12.0 - checksum: 10/c8bfaba19a674fc2eb54edad71e958647360474e3163e8226f1acd63e4e2dbec32a171a0af596c1dc5359aee402cc120fea7abd1fb0e0354b6527f0fc9e8aa1e + checksum: 10/3b1db3308b57ba21d47772a9f183804234c23fd64c9ca40915d2d65c5dc7a48b49a6de16b8b90b7a354eacbb51232a862f0fca3dbd23e27d34641f511decddab languageName: node linkType: hard -"@babel/plugin-transform-classes@npm:^7.23.8": - version: 7.23.8 - resolution: "@babel/plugin-transform-classes@npm:7.23.8" +"@babel/plugin-transform-classes@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-classes@npm:7.24.1" dependencies: "@babel/helper-annotate-as-pure": "npm:^7.22.5" "@babel/helper-compilation-targets": "npm:^7.23.6" "@babel/helper-environment-visitor": "npm:^7.22.20" "@babel/helper-function-name": "npm:^7.23.0" - "@babel/helper-plugin-utils": "npm:^7.22.5" - "@babel/helper-replace-supers": "npm:^7.22.20" + "@babel/helper-plugin-utils": "npm:^7.24.0" + "@babel/helper-replace-supers": "npm:^7.24.1" "@babel/helper-split-export-declaration": "npm:^7.22.6" globals: "npm:^11.1.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/4bb4b19e7a39871c4414fb44fc5f2cc47c78f993b74c43238dfb99c9dac2d15cb99b43f8a3d42747580e1807d2b8f5e13ce7e95e593fd839bd176aa090bf9a23 + checksum: 10/eb7f4a3d852cfa20f4efd299929c564bd2b45106ac1cf4ac8b0c87baf078d4a15c39b8a21bbb01879c1922acb9baaf3c9b150486e18d84b30129e9671639793d languageName: node linkType: hard -"@babel/plugin-transform-computed-properties@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-computed-properties@npm:7.23.3" +"@babel/plugin-transform-computed-properties@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-computed-properties@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" - "@babel/template": "npm:^7.22.15" + "@babel/helper-plugin-utils": "npm:^7.24.0" + "@babel/template": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/e75593e02c5ea473c17839e3c9d597ce3697bf039b66afe9a4d06d086a87fb3d95850b4174476897afc351dc1b46a9ec3165ee6e8fbad3732c0d65f676f855ad + checksum: 10/62bbfe1bd508517d96ba6909e68b1adb9dfd24ea61af1f4b0aa909bfc5e476044afe9c55b10ef74508fd147aa665e818df67ece834d164a9fd69b80c9ede3875 languageName: node linkType: hard -"@babel/plugin-transform-destructuring@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-destructuring@npm:7.23.3" +"@babel/plugin-transform-destructuring@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-destructuring@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/5abd93718af5a61f8f6a97d2ccac9139499752dd5b2c533d7556fb02947ae01b2f51d4c4f5e64df569e8783d3743270018eb1fa979c43edec7dd1377acf107ed + checksum: 10/03d9a81cd9eeb24d48e207be536d460d6ad228238ac70da9b7ad4bae799847bb3be0aecfa4ea6223752f3a8d4ada3a58cd9a0f8fc70c01fdfc87ad0618f897d3 languageName: node linkType: hard -"@babel/plugin-transform-dotall-regex@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-dotall-regex@npm:7.23.3" +"@babel/plugin-transform-dotall-regex@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-dotall-regex@npm:7.24.1" dependencies: "@babel/helper-create-regexp-features-plugin": "npm:^7.22.15" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/a2dbbf7f1ea16a97948c37df925cb364337668c41a3948b8d91453f140507bd8a3429030c7ce66d09c299987b27746c19a2dd18b6f17dcb474854b14fd9159a3 + checksum: 10/7f623d25b6f213b94ebc1754e9e31c1077c8e288626d8b7bfa76a97b067ce80ddcd0ede402a546706c65002c0ccf45cd5ec621511c2668eed31ebcabe8391d35 languageName: node linkType: hard -"@babel/plugin-transform-duplicate-keys@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-duplicate-keys@npm:7.23.3" +"@babel/plugin-transform-duplicate-keys@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-duplicate-keys@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/c2a21c34dc0839590cd945192cbc46fde541a27e140c48fe1808315934664cdbf18db64889e23c4eeb6bad9d3e049482efdca91d29de5734ffc887c4fbabaa16 + checksum: 10/de600a958ad146fc8aca71fd2dfa5ebcfdb97df4eaa530fc9a4b0d28d85442ddb9b7039f260b396785211e88c6817125a94c183459763c363847e8c84f318ff0 languageName: node linkType: hard -"@babel/plugin-transform-dynamic-import@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-dynamic-import@npm:7.23.4" +"@babel/plugin-transform-dynamic-import@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-dynamic-import@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/plugin-syntax-dynamic-import": "npm:^7.8.3" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/57a722604c430d9f3dacff22001a5f31250e34785d4969527a2ae9160fa86858d0892c5b9ff7a06a04076f8c76c9e6862e0541aadca9c057849961343aab0845 + checksum: 10/59fc561ee40b1a69f969c12c6c5fac206226d6642213985a569dd0f99f8e41c0f4eaedebd36936c255444a8335079842274c42a975a433beadb436d4c5abb79b languageName: node linkType: hard -"@babel/plugin-transform-exponentiation-operator@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-exponentiation-operator@npm:7.23.3" +"@babel/plugin-transform-exponentiation-operator@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-exponentiation-operator@npm:7.24.1" dependencies: "@babel/helper-builder-binary-assignment-operator-visitor": "npm:^7.22.15" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/00d05ab14ad0f299160fcf9d8f55a1cc1b740e012ab0b5ce30207d2365f091665115557af7d989cd6260d075a252d9e4283de5f2b247dfbbe0e42ae586e6bf66 + checksum: 10/f90841fe1a1e9f680b4209121d3e2992f923e85efcd322b26e5901c180ef44ff727fb89790803a23fac49af34c1ce2e480018027c22b4573b615512ac5b6fc50 languageName: node linkType: hard -"@babel/plugin-transform-export-namespace-from@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-export-namespace-from@npm:7.23.4" +"@babel/plugin-transform-export-namespace-from@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-export-namespace-from@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/plugin-syntax-export-namespace-from": "npm:^7.8.3" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/9f770a81bfd03b48d6ba155d452946fd56d6ffe5b7d871e9ec2a0b15e0f424273b632f3ed61838b90015b25bbda988896b7a46c7d964fbf8f6feb5820b309f93 + checksum: 10/bc710ac231919df9555331885748385c11c5e695d7271824fe56fba51dd637d48d3e5cd52e1c69f2b1a384fbbb41552572bc1ca3a2285ee29571f002e9bb2421 languageName: node linkType: hard @@ -850,86 +999,86 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-for-of@npm:^7.23.6": - version: 7.23.6 - resolution: "@babel/plugin-transform-for-of@npm:7.23.6" +"@babel/plugin-transform-for-of@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-for-of@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/b84ef1f26a2db316237ae6d10fa7c22c70ac808ed0b8e095a8ecf9101551636cbb026bee9fb95a0a7944f3b8278ff9636a9088cb4a4ac5b84830a13829242735 + checksum: 10/befd0908c3f6b31f9fa9363a3c112d25eaa0bc4a79cfad1f0a8bb5010937188b043a44fb23443bc8ffbcc40c015bb25f80e4cc585ce5cc580708e2d56e76fe37 languageName: node linkType: hard -"@babel/plugin-transform-function-name@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-function-name@npm:7.23.3" +"@babel/plugin-transform-function-name@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-function-name@npm:7.24.1" dependencies: - "@babel/helper-compilation-targets": "npm:^7.22.15" + "@babel/helper-compilation-targets": "npm:^7.23.6" "@babel/helper-function-name": "npm:^7.23.0" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/355c6dbe07c919575ad42b2f7e020f320866d72f8b79181a16f8e0cd424a2c761d979f03f47d583d9471b55dcd68a8a9d829b58e1eebcd572145b934b48975a6 + checksum: 10/31eb3c75297dda7265f78eba627c446f2324e30ec0124a645ccc3e9f341254aaa40d6787bd62b2280d77c0a5c9fbfce1da2c200ef7c7f8e0a1b16a8eb3644c6f languageName: node linkType: hard -"@babel/plugin-transform-json-strings@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-json-strings@npm:7.23.4" +"@babel/plugin-transform-json-strings@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-json-strings@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/plugin-syntax-json-strings": "npm:^7.8.3" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/f9019820233cf8955d8ba346df709a0683c120fe86a24ed1c9f003f2db51197b979efc88f010d558a12e1491210fc195a43cd1c7fee5e23b92da38f793a875de + checksum: 10/f42302d42fc81ac00d14e9e5d80405eb80477d7f9039d7208e712d6bcd486a4e3b32fdfa07b5f027d6c773723d8168193ee880f93b0e430c828e45f104fb82a4 languageName: node linkType: hard -"@babel/plugin-transform-literals@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-literals@npm:7.23.3" +"@babel/plugin-transform-literals@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-literals@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/519a544cd58586b9001c4c9b18da25a62f17d23c48600ff7a685d75ca9eb18d2c5e8f5476f067f0a8f1fea2a31107eff950b9864833061e6076dcc4bdc3e71ed + checksum: 10/2df94e9478571852483aca7588419e574d76bde97583e78551c286f498e01321e7dbb1d0ef67bee16e8f950688f79688809cfde370c5c4b84c14d841a3ef217a languageName: node linkType: hard -"@babel/plugin-transform-logical-assignment-operators@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-logical-assignment-operators@npm:7.23.4" +"@babel/plugin-transform-logical-assignment-operators@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-logical-assignment-operators@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/plugin-syntax-logical-assignment-operators": "npm:^7.10.4" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/2ae1dc9b4ff3bf61a990ff3accdecb2afe3a0ca649b3e74c010078d1cdf29ea490f50ac0a905306a2bcf9ac177889a39ac79bdcc3a0fdf220b3b75fac18d39b5 + checksum: 10/895f2290adf457cbf327428bdb4fb90882a38a22f729bcf0629e8ad66b9b616d2721fbef488ac00411b647489d1dda1d20171bb3772d0796bb7ef5ecf057808a languageName: node linkType: hard -"@babel/plugin-transform-member-expression-literals@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-member-expression-literals@npm:7.23.3" +"@babel/plugin-transform-member-expression-literals@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-member-expression-literals@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/95cec13c36d447c5aa6b8e4c778b897eeba66dcb675edef01e0d2afcec9e8cb9726baf4f81b4bbae7a782595aed72e6a0d44ffb773272c3ca180fada99bf92db + checksum: 10/4ea641cc14a615f9084e45ad2319f95e2fee01c77ec9789685e7e11a6c286238a426a98f9c1ed91568a047d8ac834393e06e8c82d1ff01764b7aa61bee8e9023 languageName: node linkType: hard -"@babel/plugin-transform-modules-amd@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-modules-amd@npm:7.23.3" +"@babel/plugin-transform-modules-amd@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-modules-amd@npm:7.24.1" dependencies: "@babel/helper-module-transforms": "npm:^7.23.3" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/48c87dee2c7dae8ed40d16901f32c9e58be4ef87bf2c3985b51dd2e78e82081f3bad0a39ee5cf6e8909e13e954e2b4bedef0a8141922f281ed833ddb59ed9be2 + checksum: 10/5a324f7c630cf0be1f09098a3a36248c2521622f2c7ea1a44a5980f54b718f5e0dd4af92a337f4b445a8824c8d533853ebea7c16de829b8a7bc8bcca127d4d73 languageName: node linkType: hard @@ -946,29 +1095,42 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-modules-systemjs@npm:^7.23.9": - version: 7.23.9 - resolution: "@babel/plugin-transform-modules-systemjs@npm:7.23.9" +"@babel/plugin-transform-modules-commonjs@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-modules-commonjs@npm:7.24.1" + dependencies: + "@babel/helper-module-transforms": "npm:^7.23.3" + "@babel/helper-plugin-utils": "npm:^7.24.0" + "@babel/helper-simple-access": "npm:^7.22.5" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10/7326a62ed5f766f93ee75684868635b59884e2801533207ea11561c296de53037949fecad4055d828fa7ebeb6cc9e55908aa3e7c13f930ded3e62ad9f24680d7 + languageName: node + linkType: hard + +"@babel/plugin-transform-modules-systemjs@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-modules-systemjs@npm:7.24.1" dependencies: "@babel/helper-hoist-variables": "npm:^7.22.5" "@babel/helper-module-transforms": "npm:^7.23.3" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/helper-validator-identifier": "npm:^7.22.20" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/4bb800e5a9d0d668d7421ae3672fccff7d5f2a36621fd87414d7ece6d6f4d93627f9644cfecacae934bc65ffc131c8374242aaa400cca874dcab9b281a21aff0 + checksum: 10/565ec4518037b3d957431e29bda97b3d2fbb2e245fb5ba19889310ccb8fb71353e8ce2c325cc8d3fbc5a376d3af7d7e21782d5f502c46f8da077bee7807a590f languageName: node linkType: hard -"@babel/plugin-transform-modules-umd@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-modules-umd@npm:7.23.3" +"@babel/plugin-transform-modules-umd@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-modules-umd@npm:7.24.1" dependencies: "@babel/helper-module-transforms": "npm:^7.23.3" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/e3f3af83562d687899555c7826b3faf0ab93ee7976898995b1d20cbe7f4451c55e05b0e17bfb3e549937cbe7573daf5400b752912a241b0a8a64d2457c7626e5 + checksum: 10/323bb9367e1967117a829f67788ec2ff55504b4faf8f6d83ec85d398e50b41cf7d1c375c67d63883dd7ad5e75b35c8ae776d89e422330ec0c0a1fda24e362083 languageName: node linkType: hard @@ -984,18 +1146,18 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-new-target@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-new-target@npm:7.23.3" +"@babel/plugin-transform-new-target@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-new-target@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/e5053389316fce73ad5201b7777437164f333e24787fbcda4ae489cd2580dbbbdfb5694a7237bad91fabb46b591d771975d69beb1c740b82cb4761625379f00b + checksum: 10/e0d3af66cd0fad29c9d0e3fc65e711255e18b77e2e35bbd8f10059e3db7de6c16799ef74e704daf784950feb71e7a93c5bf2c771d98f1ca3fba1ff2e0240b24a languageName: node linkType: hard -"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.22.11, @babel/plugin-transform-nullish-coalescing-operator@npm:^7.23.4": +"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.22.11": version: 7.23.4 resolution: "@babel/plugin-transform-nullish-coalescing-operator@npm:7.23.4" dependencies: @@ -1007,58 +1169,69 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-numeric-separator@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-numeric-separator@npm:7.23.4" +"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-nullish-coalescing-operator@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" + "@babel/plugin-syntax-nullish-coalescing-operator": "npm:^7.8.3" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10/74025e191ceb7cefc619c15d33753aab81300a03d81b96ae249d9b599bc65878f962d608f452462d3aad5d6e334b7ab2b09a6bdcfe8d101fe77ac7aacca4261e + languageName: node + linkType: hard + +"@babel/plugin-transform-numeric-separator@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-numeric-separator@npm:7.24.1" + dependencies: + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/plugin-syntax-numeric-separator": "npm:^7.10.4" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/6ba0e5db3c620a3ec81f9e94507c821f483c15f196868df13fa454cbac719a5449baf73840f5b6eb7d77311b24a2cf8e45db53700d41727f693d46f7caf3eec3 + checksum: 10/3247bd7d409574fc06c59e0eb573ae7470d6d61ecf780df40b550102bb4406747d8f39dcbec57eb59406df6c565a86edd3b429e396ad02e4ce201ad92050832e languageName: node linkType: hard -"@babel/plugin-transform-object-rest-spread@npm:^7.24.0": - version: 7.24.0 - resolution: "@babel/plugin-transform-object-rest-spread@npm:7.24.0" +"@babel/plugin-transform-object-rest-spread@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-object-rest-spread@npm:7.24.1" dependencies: - "@babel/compat-data": "npm:^7.23.5" "@babel/helper-compilation-targets": "npm:^7.23.6" "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/plugin-syntax-object-rest-spread": "npm:^7.8.3" - "@babel/plugin-transform-parameters": "npm:^7.23.3" + "@babel/plugin-transform-parameters": "npm:^7.24.1" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/1dfafd9461723769b29f724fcbdca974c4280f68a9e03c8ff412643ffe88930755f093f9cbf919cdb6d0d53751614892dd2882bccad286e14e9e995c5a8242ed + checksum: 10/ff6eeefbc5497cf33d62dc86b797c6db0e9455d6a4945d6952f3b703d04baab048974c6573b503e0ec097b8112d3b98b5f4ee516e1b8a74ed47aebba4d9d2643 languageName: node linkType: hard -"@babel/plugin-transform-object-super@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-object-super@npm:7.23.3" +"@babel/plugin-transform-object-super@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-object-super@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" - "@babel/helper-replace-supers": "npm:^7.22.20" + "@babel/helper-plugin-utils": "npm:^7.24.0" + "@babel/helper-replace-supers": "npm:^7.24.1" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/e495497186f621fa79026e183b4f1fbb172fd9df812cbd2d7f02c05b08adbe58012b1a6eb6dd58d11a30343f6ec80d0f4074f9b501d70aa1c94df76d59164c53 + checksum: 10/d34d437456a54e2a5dcb26e9cf09ed4c55528f2a327c5edca92c93e9483c37176e228d00d6e0cf767f3d6fdbef45ae3a5d034a7c59337a009e20ae541c8220fa languageName: node linkType: hard -"@babel/plugin-transform-optional-catch-binding@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-optional-catch-binding@npm:7.23.4" +"@babel/plugin-transform-optional-catch-binding@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-optional-catch-binding@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/plugin-syntax-optional-catch-binding": "npm:^7.8.3" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/d50b5ee142cdb088d8b5de1ccf7cea85b18b85d85b52f86618f6e45226372f01ad4cdb29abd4fd35ea99a71fefb37009e0107db7a787dcc21d4d402f97470faf + checksum: 10/ff7c02449d32a6de41e003abb38537b4a1ad90b1eaa4c0b578cb1b55548201a677588a8c47f3e161c72738400ae811a6673ea7b8a734344755016ca0ac445dac languageName: node linkType: hard -"@babel/plugin-transform-optional-chaining@npm:^7.23.0, @babel/plugin-transform-optional-chaining@npm:^7.23.3, @babel/plugin-transform-optional-chaining@npm:^7.23.4": +"@babel/plugin-transform-optional-chaining@npm:^7.23.0": version: 7.23.4 resolution: "@babel/plugin-transform-optional-chaining@npm:7.23.4" dependencies: @@ -1071,18 +1244,31 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-parameters@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-parameters@npm:7.23.3" +"@babel/plugin-transform-optional-chaining@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-optional-chaining@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" + "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5" + "@babel/plugin-syntax-optional-chaining": "npm:^7.8.3" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10/d41031b8e472b9b30aacd905a1561904bcec597dd888ad639b234971714dc9cd0dcb60df91a89219fc72e4feeb148e20f97bcddc39d7676e743ff0c23f62a7eb + languageName: node + linkType: hard + +"@babel/plugin-transform-parameters@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-parameters@npm:7.24.1" + dependencies: + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/a8c36c3fc25f9daa46c4f6db47ea809c395dc4abc7f01c4b1391f6e5b0cd62b83b6016728b02a6a8ac21aca56207c9ec66daefc0336e9340976978de7e6e28df + checksum: 10/c289c188710cd1c60991db169d8173b6e8e05624ae61a7da0b64354100bfba9e44bc1332dd9223c4e3fe1b9cbc0c061e76e7c7b3a75c9588bf35d0ffec428070 languageName: node linkType: hard -"@babel/plugin-transform-private-methods@npm:^7.22.5, @babel/plugin-transform-private-methods@npm:^7.23.3": +"@babel/plugin-transform-private-methods@npm:^7.22.5": version: 7.23.3 resolution: "@babel/plugin-transform-private-methods@npm:7.23.3" dependencies: @@ -1094,107 +1280,119 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-private-property-in-object@npm:^7.23.4": - version: 7.23.4 - resolution: "@babel/plugin-transform-private-property-in-object@npm:7.23.4" +"@babel/plugin-transform-private-methods@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-private-methods@npm:7.24.1" + dependencies: + "@babel/helper-create-class-features-plugin": "npm:^7.24.1" + "@babel/helper-plugin-utils": "npm:^7.24.0" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10/7208c30bb3f3fbc73fb3a88bdcb78cd5cddaf6d523eb9d67c0c04e78f6fc6319ece89f4a5abc41777ceab16df55b3a13a4120e0efc9275ca6d2d89beaba80aa0 + languageName: node + linkType: hard + +"@babel/plugin-transform-private-property-in-object@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-private-property-in-object@npm:7.24.1" dependencies: "@babel/helper-annotate-as-pure": "npm:^7.22.5" - "@babel/helper-create-class-features-plugin": "npm:^7.22.15" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-create-class-features-plugin": "npm:^7.24.1" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/plugin-syntax-private-property-in-object": "npm:^7.14.5" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/02eef2ee98fa86ee5052ed9bf0742d6d22b510b5df2fcce0b0f5615d6001f7786c6b31505e7f1c2f446406d8fb33603a5316d957cfa5b8365cbf78ddcc24fa42 + checksum: 10/466d1943960c2475c0361eba2ea72d504d4d8329a8e293af0eedd26887bf30a074515b330ea84be77331ace77efbf5533d5f04f8cff63428d2615f4a509ae7a4 languageName: node linkType: hard -"@babel/plugin-transform-property-literals@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-property-literals@npm:7.23.3" +"@babel/plugin-transform-property-literals@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-property-literals@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/16b048c8e87f25095f6d53634ab7912992f78e6997a6ff549edc3cf519db4fca01c7b4e0798530d7f6a05228ceee479251245cdd850a5531c6e6f404104d6cc9 + checksum: 10/a73646d7ecd95b3931a3ead82c7d5efeb46e68ba362de63eb437d33531f294ec18bd31b6d24238cd3b6a3b919a6310c4a0ba4a2629927721d4d10b0518eb7715 languageName: node linkType: hard -"@babel/plugin-transform-regenerator@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-regenerator@npm:7.23.3" +"@babel/plugin-transform-regenerator@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-regenerator@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" regenerator-transform: "npm:^0.15.2" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/7fdacc7b40008883871b519c9e5cdea493f75495118ccc56ac104b874983569a24edd024f0f5894ba1875c54ee2b442f295d6241c3280e61c725d0dd3317c8e6 + checksum: 10/a04319388a0a7931c3f8e15715d01444c32519692178b70deccc86d53304e74c0f589a4268f6c68578d86f75e934dd1fe6e6ed9071f54ee8379f356f88ef6e42 languageName: node linkType: hard -"@babel/plugin-transform-reserved-words@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-reserved-words@npm:7.23.3" +"@babel/plugin-transform-reserved-words@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-reserved-words@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/298c4440ddc136784ff920127cea137168e068404e635dc946ddb5d7b2a27b66f1dd4c4acb01f7184478ff7d5c3e7177a127279479926519042948fb7fa0fa48 + checksum: 10/132c6040c65aabae2d98a39289efb5c51a8632546dc50d2ad032c8660aec307fbed74ef499856ea4f881fc8505905f49b48e0270585da2ea3d50b75e962afd89 languageName: node linkType: hard -"@babel/plugin-transform-shorthand-properties@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-shorthand-properties@npm:7.23.3" +"@babel/plugin-transform-shorthand-properties@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-shorthand-properties@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/5d677a03676f9fff969b0246c423d64d77502e90a832665dc872a5a5e05e5708161ce1effd56bb3c0f2c20a1112fca874be57c8a759d8b08152755519281f326 + checksum: 10/006a2032d1c57dca76579ce6598c679c2f20525afef0a36e9d42affe3c8cf33c1427581ad696b519cc75dfee46c5e8ecdf0c6a29ffb14250caa3e16dd68cb424 languageName: node linkType: hard -"@babel/plugin-transform-spread@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-spread@npm:7.23.3" +"@babel/plugin-transform-spread@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-spread@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/c6372d2f788fd71d85aba12fbe08ee509e053ed27457e6674a4f9cae41ff885e2eb88aafea8fadd0ccf990601fc69ec596fa00959e05af68a15461a8d97a548d + checksum: 10/0b60cfe2f700ec2c9c1af979bb805860258539648dadcd482a5ddfc2330b733fb61bb60266404f3e068246ad0d6376040b4f9c5ab9037a3d777624d64acd89e9 languageName: node linkType: hard -"@babel/plugin-transform-sticky-regex@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-sticky-regex@npm:7.23.3" +"@babel/plugin-transform-sticky-regex@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-sticky-regex@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/53e55eb2575b7abfdb4af7e503a2bf7ef5faf8bf6b92d2cd2de0700bdd19e934e5517b23e6dfed94ba50ae516b62f3f916773ef7d9bc81f01503f585051e2949 + checksum: 10/e326e96a9eeb6bb01dbc4d3362f989411490671b97f62edf378b8fb102c463a018b777f28da65344d41b22aa6efcdfa01ed43d2b11fdcf202046d3174be137c5 languageName: node linkType: hard -"@babel/plugin-transform-template-literals@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-template-literals@npm:7.23.3" +"@babel/plugin-transform-template-literals@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-template-literals@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/b16c5cb0b8796be0118e9c144d15bdc0d20a7f3f59009c6303a6e9a8b74c146eceb3f05186f5b97afcba7cfa87e34c1585a22186e3d5b22f2fd3d27d959d92b2 + checksum: 10/4c9009c72321caf20e3b6328bbe9d7057006c5ae57b794cf247a37ca34d87dfec5e27284169a16df5a6235a083bf0f3ab9e1bfcb005d1c8b75b04aed75652621 languageName: node linkType: hard -"@babel/plugin-transform-typeof-symbol@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-typeof-symbol@npm:7.23.3" +"@babel/plugin-transform-typeof-symbol@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-typeof-symbol@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/0af7184379d43afac7614fc89b1bdecce4e174d52f4efaeee8ec1a4f2c764356c6dba3525c0685231f1cbf435b6dd4ee9e738d7417f3b10ce8bbe869c32f4384 + checksum: 10/3dda5074abf8b5df9cdef697d6ebe14a72c199bd6c2019991d033d9ad91b0be937b126b8f34c3c5a9725afee9016a3776aeef3e3b06ab9b3f54f2dd5b5aefa37 languageName: node linkType: hard @@ -1212,72 +1410,73 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-unicode-escapes@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-unicode-escapes@npm:7.23.3" +"@babel/plugin-transform-unicode-escapes@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-unicode-escapes@npm:7.24.1" dependencies: - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/561c429183a54b9e4751519a3dfba6014431e9cdc1484fad03bdaf96582dfc72c76a4f8661df2aeeae7c34efd0fa4d02d3b83a2f63763ecf71ecc925f9cc1f60 + checksum: 10/d39041ff6b0cef78271ebe88be6dfd2882a3c6250a54ddae783f1b9adc815e8486a7d0ca054fabfa3fde1301c531d5be89224999fc7be83ff1eda9b77d173051 languageName: node linkType: hard -"@babel/plugin-transform-unicode-property-regex@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-unicode-property-regex@npm:7.23.3" +"@babel/plugin-transform-unicode-property-regex@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-unicode-property-regex@npm:7.24.1" dependencies: "@babel/helper-create-regexp-features-plugin": "npm:^7.22.15" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/2298461a194758086d17c23c26c7de37aa533af910f9ebf31ebd0893d4aa317468043d23f73edc782ec21151d3c46cf0ff8098a83b725c49a59de28a1d4d6225 + checksum: 10/276099b4483e707f80b054e2d29bc519158bfe52461ef5ff76f70727d592df17e30b1597ef4d8a0f04d810f6cb5a8dd887bdc1d0540af3744751710ef280090f languageName: node linkType: hard -"@babel/plugin-transform-unicode-regex@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-unicode-regex@npm:7.23.3" +"@babel/plugin-transform-unicode-regex@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-unicode-regex@npm:7.24.1" dependencies: "@babel/helper-create-regexp-features-plugin": "npm:^7.22.15" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/c5f835d17483ba899787f92e313dfa5b0055e3deab332f1d254078a2bba27ede47574b6599fcf34d3763f0c048ae0779dc21d2d8db09295edb4057478dc80a9a + checksum: 10/400a0927bdb1425b4c0dc68a61b5b2d7d17c7d9f0e07317a1a6a373c080ef94be1dd65fdc4ac9a78fcdb58f89fd128450c7bc0d5b8ca0ae7eca3fbd98e50acba languageName: node linkType: hard -"@babel/plugin-transform-unicode-sets-regex@npm:^7.23.3": - version: 7.23.3 - resolution: "@babel/plugin-transform-unicode-sets-regex@npm:7.23.3" +"@babel/plugin-transform-unicode-sets-regex@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/plugin-transform-unicode-sets-regex@npm:7.24.1" dependencies: "@babel/helper-create-regexp-features-plugin": "npm:^7.22.15" - "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-plugin-utils": "npm:^7.24.0" peerDependencies: "@babel/core": ^7.0.0 - checksum: 10/79d0b4c951955ca68235c87b91ab2b393c96285f8aeaa34d6db416d2ddac90000c9bd6e8c4d82b60a2b484da69930507245035f28ba63c6cae341cf3ba68fdef + checksum: 10/364342fb8e382dfaa23628b88e6484dc1097e53fb7199f4d338f1e2cd71d839bb0a35a9b1380074f6a10adb2e98b79d53ca3ec78c0b8c557ca895ffff42180df languageName: node linkType: hard -"@babel/preset-env@npm:^7.23.2": - version: 7.24.0 - resolution: "@babel/preset-env@npm:7.24.0" +"@babel/preset-env@npm:^7.24.4": + version: 7.24.4 + resolution: "@babel/preset-env@npm:7.24.4" dependencies: - "@babel/compat-data": "npm:^7.23.5" + "@babel/compat-data": "npm:^7.24.4" "@babel/helper-compilation-targets": "npm:^7.23.6" "@babel/helper-plugin-utils": "npm:^7.24.0" "@babel/helper-validator-option": "npm:^7.23.5" - "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "npm:^7.23.3" - "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "npm:^7.23.3" - "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "npm:^7.23.7" + "@babel/plugin-bugfix-firefox-class-in-computed-class-key": "npm:^7.24.4" + "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "npm:^7.24.1" + "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "npm:^7.24.1" + "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "npm:^7.24.1" "@babel/plugin-proposal-private-property-in-object": "npm:7.21.0-placeholder-for-preset-env.2" "@babel/plugin-syntax-async-generators": "npm:^7.8.4" "@babel/plugin-syntax-class-properties": "npm:^7.12.13" "@babel/plugin-syntax-class-static-block": "npm:^7.14.5" "@babel/plugin-syntax-dynamic-import": "npm:^7.8.3" "@babel/plugin-syntax-export-namespace-from": "npm:^7.8.3" - "@babel/plugin-syntax-import-assertions": "npm:^7.23.3" - "@babel/plugin-syntax-import-attributes": "npm:^7.23.3" + "@babel/plugin-syntax-import-assertions": "npm:^7.24.1" + "@babel/plugin-syntax-import-attributes": "npm:^7.24.1" "@babel/plugin-syntax-import-meta": "npm:^7.10.4" "@babel/plugin-syntax-json-strings": "npm:^7.8.3" "@babel/plugin-syntax-logical-assignment-operators": "npm:^7.10.4" @@ -1289,63 +1488,63 @@ __metadata: "@babel/plugin-syntax-private-property-in-object": "npm:^7.14.5" "@babel/plugin-syntax-top-level-await": "npm:^7.14.5" "@babel/plugin-syntax-unicode-sets-regex": "npm:^7.18.6" - "@babel/plugin-transform-arrow-functions": "npm:^7.23.3" - "@babel/plugin-transform-async-generator-functions": "npm:^7.23.9" - "@babel/plugin-transform-async-to-generator": "npm:^7.23.3" - "@babel/plugin-transform-block-scoped-functions": "npm:^7.23.3" - "@babel/plugin-transform-block-scoping": "npm:^7.23.4" - "@babel/plugin-transform-class-properties": "npm:^7.23.3" - "@babel/plugin-transform-class-static-block": "npm:^7.23.4" - "@babel/plugin-transform-classes": "npm:^7.23.8" - "@babel/plugin-transform-computed-properties": "npm:^7.23.3" - "@babel/plugin-transform-destructuring": "npm:^7.23.3" - "@babel/plugin-transform-dotall-regex": "npm:^7.23.3" - "@babel/plugin-transform-duplicate-keys": "npm:^7.23.3" - "@babel/plugin-transform-dynamic-import": "npm:^7.23.4" - "@babel/plugin-transform-exponentiation-operator": "npm:^7.23.3" - "@babel/plugin-transform-export-namespace-from": "npm:^7.23.4" - "@babel/plugin-transform-for-of": "npm:^7.23.6" - "@babel/plugin-transform-function-name": "npm:^7.23.3" - "@babel/plugin-transform-json-strings": "npm:^7.23.4" - "@babel/plugin-transform-literals": "npm:^7.23.3" - "@babel/plugin-transform-logical-assignment-operators": "npm:^7.23.4" - "@babel/plugin-transform-member-expression-literals": "npm:^7.23.3" - "@babel/plugin-transform-modules-amd": "npm:^7.23.3" - "@babel/plugin-transform-modules-commonjs": "npm:^7.23.3" - "@babel/plugin-transform-modules-systemjs": "npm:^7.23.9" - "@babel/plugin-transform-modules-umd": "npm:^7.23.3" + "@babel/plugin-transform-arrow-functions": "npm:^7.24.1" + "@babel/plugin-transform-async-generator-functions": "npm:^7.24.3" + "@babel/plugin-transform-async-to-generator": "npm:^7.24.1" + "@babel/plugin-transform-block-scoped-functions": "npm:^7.24.1" + "@babel/plugin-transform-block-scoping": "npm:^7.24.4" + "@babel/plugin-transform-class-properties": "npm:^7.24.1" + "@babel/plugin-transform-class-static-block": "npm:^7.24.4" + "@babel/plugin-transform-classes": "npm:^7.24.1" + "@babel/plugin-transform-computed-properties": "npm:^7.24.1" + "@babel/plugin-transform-destructuring": "npm:^7.24.1" + "@babel/plugin-transform-dotall-regex": "npm:^7.24.1" + "@babel/plugin-transform-duplicate-keys": "npm:^7.24.1" + "@babel/plugin-transform-dynamic-import": "npm:^7.24.1" + "@babel/plugin-transform-exponentiation-operator": "npm:^7.24.1" + "@babel/plugin-transform-export-namespace-from": "npm:^7.24.1" + "@babel/plugin-transform-for-of": "npm:^7.24.1" + "@babel/plugin-transform-function-name": "npm:^7.24.1" + "@babel/plugin-transform-json-strings": "npm:^7.24.1" + "@babel/plugin-transform-literals": "npm:^7.24.1" + "@babel/plugin-transform-logical-assignment-operators": "npm:^7.24.1" + "@babel/plugin-transform-member-expression-literals": "npm:^7.24.1" + "@babel/plugin-transform-modules-amd": "npm:^7.24.1" + "@babel/plugin-transform-modules-commonjs": "npm:^7.24.1" + "@babel/plugin-transform-modules-systemjs": "npm:^7.24.1" + "@babel/plugin-transform-modules-umd": "npm:^7.24.1" "@babel/plugin-transform-named-capturing-groups-regex": "npm:^7.22.5" - "@babel/plugin-transform-new-target": "npm:^7.23.3" - "@babel/plugin-transform-nullish-coalescing-operator": "npm:^7.23.4" - "@babel/plugin-transform-numeric-separator": "npm:^7.23.4" - "@babel/plugin-transform-object-rest-spread": "npm:^7.24.0" - "@babel/plugin-transform-object-super": "npm:^7.23.3" - "@babel/plugin-transform-optional-catch-binding": "npm:^7.23.4" - "@babel/plugin-transform-optional-chaining": "npm:^7.23.4" - "@babel/plugin-transform-parameters": "npm:^7.23.3" - "@babel/plugin-transform-private-methods": "npm:^7.23.3" - "@babel/plugin-transform-private-property-in-object": "npm:^7.23.4" - "@babel/plugin-transform-property-literals": "npm:^7.23.3" - "@babel/plugin-transform-regenerator": "npm:^7.23.3" - "@babel/plugin-transform-reserved-words": "npm:^7.23.3" - "@babel/plugin-transform-shorthand-properties": "npm:^7.23.3" - "@babel/plugin-transform-spread": "npm:^7.23.3" - "@babel/plugin-transform-sticky-regex": "npm:^7.23.3" - "@babel/plugin-transform-template-literals": "npm:^7.23.3" - "@babel/plugin-transform-typeof-symbol": "npm:^7.23.3" - "@babel/plugin-transform-unicode-escapes": "npm:^7.23.3" - "@babel/plugin-transform-unicode-property-regex": "npm:^7.23.3" - "@babel/plugin-transform-unicode-regex": "npm:^7.23.3" - "@babel/plugin-transform-unicode-sets-regex": "npm:^7.23.3" + "@babel/plugin-transform-new-target": "npm:^7.24.1" + "@babel/plugin-transform-nullish-coalescing-operator": "npm:^7.24.1" + "@babel/plugin-transform-numeric-separator": "npm:^7.24.1" + "@babel/plugin-transform-object-rest-spread": "npm:^7.24.1" + "@babel/plugin-transform-object-super": "npm:^7.24.1" + "@babel/plugin-transform-optional-catch-binding": "npm:^7.24.1" + "@babel/plugin-transform-optional-chaining": "npm:^7.24.1" + "@babel/plugin-transform-parameters": "npm:^7.24.1" + "@babel/plugin-transform-private-methods": "npm:^7.24.1" + "@babel/plugin-transform-private-property-in-object": "npm:^7.24.1" + "@babel/plugin-transform-property-literals": "npm:^7.24.1" + "@babel/plugin-transform-regenerator": "npm:^7.24.1" + "@babel/plugin-transform-reserved-words": "npm:^7.24.1" + "@babel/plugin-transform-shorthand-properties": "npm:^7.24.1" + "@babel/plugin-transform-spread": "npm:^7.24.1" + "@babel/plugin-transform-sticky-regex": "npm:^7.24.1" + "@babel/plugin-transform-template-literals": "npm:^7.24.1" + "@babel/plugin-transform-typeof-symbol": "npm:^7.24.1" + "@babel/plugin-transform-unicode-escapes": "npm:^7.24.1" + "@babel/plugin-transform-unicode-property-regex": "npm:^7.24.1" + "@babel/plugin-transform-unicode-regex": "npm:^7.24.1" + "@babel/plugin-transform-unicode-sets-regex": "npm:^7.24.1" "@babel/preset-modules": "npm:0.1.6-no-external-plugins" - babel-plugin-polyfill-corejs2: "npm:^0.4.8" - babel-plugin-polyfill-corejs3: "npm:^0.9.0" - babel-plugin-polyfill-regenerator: "npm:^0.5.5" + babel-plugin-polyfill-corejs2: "npm:^0.4.10" + babel-plugin-polyfill-corejs3: "npm:^0.10.4" + babel-plugin-polyfill-regenerator: "npm:^0.6.1" core-js-compat: "npm:^3.31.0" semver: "npm:^6.3.1" peerDependencies: "@babel/core": ^7.0.0-0 - checksum: 10/88bca150a09e658124997178ee1ff375a9aceecfd70ec11c7ccc12e82f5be5f7ff2ddfefba5b10fb617891645f92949392b350509de9742d2aa138f42959e190 + checksum: 10/3d5cbdc2501bc1959fc76ed9d409d0ee5264bc475fa809958fd2e8e7db9b12f8eccdae750a0e05d25207373c42ca115b42bb3d5c743bc770cb12b6af05bf3bd8 languageName: node linkType: hard @@ -1432,7 +1631,7 @@ __metadata: languageName: node linkType: hard -"@babel/traverse@npm:^7.23.2, @babel/traverse@npm:^7.24.0": +"@babel/traverse@npm:^7.24.0": version: 7.24.0 resolution: "@babel/traverse@npm:7.24.0" dependencies: @@ -1450,6 +1649,24 @@ __metadata: languageName: node linkType: hard +"@babel/traverse@npm:^7.24.1": + version: 7.24.1 + resolution: "@babel/traverse@npm:7.24.1" + dependencies: + "@babel/code-frame": "npm:^7.24.1" + "@babel/generator": "npm:^7.24.1" + "@babel/helper-environment-visitor": "npm:^7.22.20" + "@babel/helper-function-name": "npm:^7.23.0" + "@babel/helper-hoist-variables": "npm:^7.22.5" + "@babel/helper-split-export-declaration": "npm:^7.22.6" + "@babel/parser": "npm:^7.24.1" + "@babel/types": "npm:^7.24.0" + debug: "npm:^4.3.1" + globals: "npm:^11.1.0" + checksum: 10/b9b0173c286ef549e179f3725df3c4958069ad79fe5b9840adeb99692eb4a5a08db4e735c0f086aab52e7e08ec711cee9e7c06cb908d8035641d1382172308d3 + languageName: node + linkType: hard + "@babel/types@npm:^7.21.4, @babel/types@npm:^7.22.15, @babel/types@npm:^7.22.19, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.23.6, @babel/types@npm:^7.24.0, @babel/types@npm:^7.4.4, @babel/types@npm:^7.6.1, @babel/types@npm:^7.8.3, @babel/types@npm:^7.9.6": version: 7.24.0 resolution: "@babel/types@npm:7.24.0" @@ -1971,7 +2188,7 @@ __metadata: languageName: node linkType: hard -"@jridgewell/trace-mapping@npm:^0.3.17, @jridgewell/trace-mapping@npm:^0.3.24": +"@jridgewell/trace-mapping@npm:^0.3.17, @jridgewell/trace-mapping@npm:^0.3.24, @jridgewell/trace-mapping@npm:^0.3.25": version: 0.3.25 resolution: "@jridgewell/trace-mapping@npm:0.3.25" dependencies: @@ -1993,126 +2210,383 @@ __metadata: languageName: node linkType: hard -"@ndelangen/get-tarball@npm:^3.0.7": - version: 3.0.9 - resolution: "@ndelangen/get-tarball@npm:3.0.9" +"@ndelangen/get-tarball@npm:^3.0.7": + version: 3.0.9 + resolution: "@ndelangen/get-tarball@npm:3.0.9" + dependencies: + gunzip-maybe: "npm:^1.4.2" + pump: "npm:^3.0.0" + tar-fs: "npm:^2.1.1" + checksum: 10/39697cef2b92f6e08e3590467cc6da88cd6757b2a27cb9208879c2316ed71d6be4608892ee0a86eb0343140da1a5df498f93a32c2aaf8f1fbd90f883f08b5f63 + languageName: node + linkType: hard + +"@nodelib/fs.scandir@npm:2.1.5": + version: 2.1.5 + resolution: "@nodelib/fs.scandir@npm:2.1.5" + dependencies: + "@nodelib/fs.stat": "npm:2.0.5" + run-parallel: "npm:^1.1.9" + checksum: 10/6ab2a9b8a1d67b067922c36f259e3b3dfd6b97b219c540877a4944549a4d49ea5ceba5663905ab5289682f1f3c15ff441d02f0447f620a42e1cb5e1937174d4b + languageName: node + linkType: hard + +"@nodelib/fs.stat@npm:2.0.5, @nodelib/fs.stat@npm:^2.0.2": + version: 2.0.5 + resolution: "@nodelib/fs.stat@npm:2.0.5" + checksum: 10/012480b5ca9d97bff9261571dbbec7bbc6033f69cc92908bc1ecfad0792361a5a1994bc48674b9ef76419d056a03efadfce5a6cf6dbc0a36559571a7a483f6f0 + languageName: node + linkType: hard + +"@nodelib/fs.walk@npm:^1.2.3, @nodelib/fs.walk@npm:^1.2.8": + version: 1.2.8 + resolution: "@nodelib/fs.walk@npm:1.2.8" + dependencies: + "@nodelib/fs.scandir": "npm:2.1.5" + fastq: "npm:^1.6.0" + checksum: 10/40033e33e96e97d77fba5a238e4bba4487b8284678906a9f616b5579ddaf868a18874c0054a75402c9fbaaa033a25ceae093af58c9c30278e35c23c9479e79b0 + languageName: node + linkType: hard + +"@npmcli/agent@npm:^2.0.0": + version: 2.2.1 + resolution: "@npmcli/agent@npm:2.2.1" + dependencies: + agent-base: "npm:^7.1.0" + http-proxy-agent: "npm:^7.0.0" + https-proxy-agent: "npm:^7.0.1" + lru-cache: "npm:^10.0.1" + socks-proxy-agent: "npm:^8.0.1" + checksum: 10/d4a48128f61e47f2f5c89315a5350e265dc619987e635bd62b52b29c7ed93536e724e721418c0ce352ceece86c13043c67aba1b70c3f5cc72fce6bb746706162 + languageName: node + linkType: hard + +"@npmcli/fs@npm:^3.1.0": + version: 3.1.0 + resolution: "@npmcli/fs@npm:3.1.0" + dependencies: + semver: "npm:^7.3.5" + checksum: 10/f3a7ab3a31de65e42aeb6ed03ed035ef123d2de7af4deb9d4a003d27acc8618b57d9fb9d259fe6c28ca538032a028f37337264388ba27d26d37fff7dde22476e + languageName: node + linkType: hard + +"@pkgjs/parseargs@npm:^0.11.0": + version: 0.11.0 + resolution: "@pkgjs/parseargs@npm:0.11.0" + checksum: 10/115e8ceeec6bc69dff2048b35c0ab4f8bbee12d8bb6c1f4af758604586d802b6e669dcb02dda61d078de42c2b4ddce41b3d9e726d7daa6b4b850f4adbf7333ff + languageName: node + linkType: hard + +"@playwright/experimental-ct-core@npm:1.42.1": + version: 1.42.1 + resolution: "@playwright/experimental-ct-core@npm:1.42.1" + dependencies: + playwright: "npm:1.42.1" + playwright-core: "npm:1.42.1" + vite: "npm:^5.0.12" + bin: + playwright: cli.js + checksum: 10/ec62a3f0b8c82720101741884f2c5125f1daaba01fc6c9d3eee627b28ce5f9a40f2abc44bd2f40dd1a6a1856d1540468d13b7c05e301cf576d0c8d2984ca722d + languageName: node + linkType: hard + +"@playwright/experimental-ct-vue@npm:^1.42.1": + version: 1.42.1 + resolution: "@playwright/experimental-ct-vue@npm:1.42.1" + dependencies: + "@playwright/experimental-ct-core": "npm:1.42.1" + "@vitejs/plugin-vue": "npm:^4.2.1" + bin: + playwright: cli.js + checksum: 10/c9511f965cd44999697d30065647df79bb352e7b5f670decdaf1f9b6f1928b22ce5d399a9acffabce66c14c97cee7ced0d94c5cc748e5a53b3934bfe127e4fea + languageName: node + linkType: hard + +"@radix-ui/primitive@npm:1.0.1": + version: 1.0.1 + resolution: "@radix-ui/primitive@npm:1.0.1" + dependencies: + "@babel/runtime": "npm:^7.13.10" + checksum: 10/2b93e161d3fdabe9a64919def7fa3ceaecf2848341e9211520c401181c9eaebb8451c630b066fad2256e5c639c95edc41de0ba59c40eff37e799918d019822d1 + languageName: node + linkType: hard + +"@radix-ui/react-compose-refs@npm:1.0.1": + version: 1.0.1 + resolution: "@radix-ui/react-compose-refs@npm:1.0.1" + dependencies: + "@babel/runtime": "npm:^7.13.10" + peerDependencies: + "@types/react": "*" + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/2b9a613b6db5bff8865588b6bf4065f73021b3d16c0a90b2d4c23deceeb63612f1f15de188227ebdc5f88222cab031be617a9dd025874c0487b303be3e5cc2a8 + languageName: node + linkType: hard + +"@radix-ui/react-context@npm:1.0.1": + version: 1.0.1 + resolution: "@radix-ui/react-context@npm:1.0.1" + dependencies: + "@babel/runtime": "npm:^7.13.10" + peerDependencies: + "@types/react": "*" + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/a02187a3bae3a0f1be5fab5ad19c1ef06ceff1028d957e4d9994f0186f594a9c3d93ee34bacb86d1fa8eb274493362944398e1c17054d12cb3b75384f9ae564b + languageName: node + linkType: hard + +"@radix-ui/react-dialog@npm:^1.0.5": + version: 1.0.5 + resolution: "@radix-ui/react-dialog@npm:1.0.5" + dependencies: + "@babel/runtime": "npm:^7.13.10" + "@radix-ui/primitive": "npm:1.0.1" + "@radix-ui/react-compose-refs": "npm:1.0.1" + "@radix-ui/react-context": "npm:1.0.1" + "@radix-ui/react-dismissable-layer": "npm:1.0.5" + "@radix-ui/react-focus-guards": "npm:1.0.1" + "@radix-ui/react-focus-scope": "npm:1.0.4" + "@radix-ui/react-id": "npm:1.0.1" + "@radix-ui/react-portal": "npm:1.0.4" + "@radix-ui/react-presence": "npm:1.0.1" + "@radix-ui/react-primitive": "npm:1.0.3" + "@radix-ui/react-slot": "npm:1.0.2" + "@radix-ui/react-use-controllable-state": "npm:1.0.1" + aria-hidden: "npm:^1.1.1" + react-remove-scroll: "npm:2.5.5" + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 10/adbd7301586db712616a0f8dd54a25e7544853cbf61b5d6e279215d479f57ac35157847ee424d54a7e707969a926ca0a7c28934400c9ac224bd0c7cc19229aca + languageName: node + linkType: hard + +"@radix-ui/react-dismissable-layer@npm:1.0.5": + version: 1.0.5 + resolution: "@radix-ui/react-dismissable-layer@npm:1.0.5" + dependencies: + "@babel/runtime": "npm:^7.13.10" + "@radix-ui/primitive": "npm:1.0.1" + "@radix-ui/react-compose-refs": "npm:1.0.1" + "@radix-ui/react-primitive": "npm:1.0.3" + "@radix-ui/react-use-callback-ref": "npm:1.0.1" + "@radix-ui/react-use-escape-keydown": "npm:1.0.3" + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 10/f1626d69bb50ec226032bb7d8c5abaaf7359c2d7660309b0ed3daaedd91f30717573aac1a1cb82d589b7f915cf464b95a12da0a3b91b6acfefb6fbbc62b992de + languageName: node + linkType: hard + +"@radix-ui/react-focus-guards@npm:1.0.1": + version: 1.0.1 + resolution: "@radix-ui/react-focus-guards@npm:1.0.1" dependencies: - gunzip-maybe: "npm:^1.4.2" - pump: "npm:^3.0.0" - tar-fs: "npm:^2.1.1" - checksum: 10/39697cef2b92f6e08e3590467cc6da88cd6757b2a27cb9208879c2316ed71d6be4608892ee0a86eb0343140da1a5df498f93a32c2aaf8f1fbd90f883f08b5f63 + "@babel/runtime": "npm:^7.13.10" + peerDependencies: + "@types/react": "*" + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/1f8ca8f83b884b3612788d0742f3f054e327856d90a39841a47897dbed95e114ee512362ae314177de226d05310047cabbf66b686ae86ad1b65b6b295be24ef7 languageName: node linkType: hard -"@nodelib/fs.scandir@npm:2.1.5": - version: 2.1.5 - resolution: "@nodelib/fs.scandir@npm:2.1.5" +"@radix-ui/react-focus-scope@npm:1.0.4": + version: 1.0.4 + resolution: "@radix-ui/react-focus-scope@npm:1.0.4" dependencies: - "@nodelib/fs.stat": "npm:2.0.5" - run-parallel: "npm:^1.1.9" - checksum: 10/6ab2a9b8a1d67b067922c36f259e3b3dfd6b97b219c540877a4944549a4d49ea5ceba5663905ab5289682f1f3c15ff441d02f0447f620a42e1cb5e1937174d4b + "@babel/runtime": "npm:^7.13.10" + "@radix-ui/react-compose-refs": "npm:1.0.1" + "@radix-ui/react-primitive": "npm:1.0.3" + "@radix-ui/react-use-callback-ref": "npm:1.0.1" + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 10/3590e74c6b682737c7ac4bf8db41b3df7b09a0320f3836c619e487df9915451e5dafade9923a74383a7366c59e9436f5fff4301d70c0d15928e0e16b36e58bc9 languageName: node linkType: hard -"@nodelib/fs.stat@npm:2.0.5, @nodelib/fs.stat@npm:^2.0.2": - version: 2.0.5 - resolution: "@nodelib/fs.stat@npm:2.0.5" - checksum: 10/012480b5ca9d97bff9261571dbbec7bbc6033f69cc92908bc1ecfad0792361a5a1994bc48674b9ef76419d056a03efadfce5a6cf6dbc0a36559571a7a483f6f0 +"@radix-ui/react-id@npm:1.0.1": + version: 1.0.1 + resolution: "@radix-ui/react-id@npm:1.0.1" + dependencies: + "@babel/runtime": "npm:^7.13.10" + "@radix-ui/react-use-layout-effect": "npm:1.0.1" + peerDependencies: + "@types/react": "*" + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/446a453d799cc790dd2a1583ff8328da88271bff64530b5a17c102fa7fb35eece3cf8985359d416f65e330cd81aa7b8fe984ea125fc4f4eaf4b3801d698e49fe languageName: node linkType: hard -"@nodelib/fs.walk@npm:^1.2.3, @nodelib/fs.walk@npm:^1.2.8": - version: 1.2.8 - resolution: "@nodelib/fs.walk@npm:1.2.8" +"@radix-ui/react-portal@npm:1.0.4": + version: 1.0.4 + resolution: "@radix-ui/react-portal@npm:1.0.4" dependencies: - "@nodelib/fs.scandir": "npm:2.1.5" - fastq: "npm:^1.6.0" - checksum: 10/40033e33e96e97d77fba5a238e4bba4487b8284678906a9f616b5579ddaf868a18874c0054a75402c9fbaaa033a25ceae093af58c9c30278e35c23c9479e79b0 + "@babel/runtime": "npm:^7.13.10" + "@radix-ui/react-primitive": "npm:1.0.3" + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 10/c4cf35e2f26a89703189d0eef3ceeeb706ae0832e98e558730a5e929ca7c72c7cb510413a24eca94c7732f8d659a1e81942bec7b90540cb73ce9e4885d040b64 languageName: node linkType: hard -"@npmcli/agent@npm:^2.0.0": - version: 2.2.1 - resolution: "@npmcli/agent@npm:2.2.1" +"@radix-ui/react-presence@npm:1.0.1": + version: 1.0.1 + resolution: "@radix-ui/react-presence@npm:1.0.1" dependencies: - agent-base: "npm:^7.1.0" - http-proxy-agent: "npm:^7.0.0" - https-proxy-agent: "npm:^7.0.1" - lru-cache: "npm:^10.0.1" - socks-proxy-agent: "npm:^8.0.1" - checksum: 10/d4a48128f61e47f2f5c89315a5350e265dc619987e635bd62b52b29c7ed93536e724e721418c0ce352ceece86c13043c67aba1b70c3f5cc72fce6bb746706162 + "@babel/runtime": "npm:^7.13.10" + "@radix-ui/react-compose-refs": "npm:1.0.1" + "@radix-ui/react-use-layout-effect": "npm:1.0.1" + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 10/406f0b5a54ea4e7881e15bddc3863234bb14bf3abd4a6e56ea57c6df6f9265a9ad5cfa158e3a98614f0dcbbb7c5f537e1f7158346e57cc3f29b522d62cf28823 languageName: node linkType: hard -"@npmcli/fs@npm:^3.1.0": - version: 3.1.0 - resolution: "@npmcli/fs@npm:3.1.0" +"@radix-ui/react-primitive@npm:1.0.3": + version: 1.0.3 + resolution: "@radix-ui/react-primitive@npm:1.0.3" dependencies: - semver: "npm:^7.3.5" - checksum: 10/f3a7ab3a31de65e42aeb6ed03ed035ef123d2de7af4deb9d4a003d27acc8618b57d9fb9d259fe6c28ca538032a028f37337264388ba27d26d37fff7dde22476e + "@babel/runtime": "npm:^7.13.10" + "@radix-ui/react-slot": "npm:1.0.2" + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 10/bedb934ac07c710dc5550a7bfc7065d47e099d958cde1d37e4b1947ae5451f1b7e6f8ff5965e242578bf2c619065e6038c3a3aa779e5eafa7da3e3dbc685799f languageName: node linkType: hard -"@pkgjs/parseargs@npm:^0.11.0": - version: 0.11.0 - resolution: "@pkgjs/parseargs@npm:0.11.0" - checksum: 10/115e8ceeec6bc69dff2048b35c0ab4f8bbee12d8bb6c1f4af758604586d802b6e669dcb02dda61d078de42c2b4ddce41b3d9e726d7daa6b4b850f4adbf7333ff +"@radix-ui/react-slot@npm:1.0.2, @radix-ui/react-slot@npm:^1.0.2": + version: 1.0.2 + resolution: "@radix-ui/react-slot@npm:1.0.2" + dependencies: + "@babel/runtime": "npm:^7.13.10" + "@radix-ui/react-compose-refs": "npm:1.0.1" + peerDependencies: + "@types/react": "*" + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/734866561e991438fbcf22af06e56b272ed6ee8f7b536489ee3bf2f736f8b53bf6bc14ebde94834aa0aceda854d018a0ce20bb171defffbaed1f566006cbb887 languageName: node linkType: hard -"@playwright/experimental-ct-core@npm:1.42.1": - version: 1.42.1 - resolution: "@playwright/experimental-ct-core@npm:1.42.1" +"@radix-ui/react-use-callback-ref@npm:1.0.1": + version: 1.0.1 + resolution: "@radix-ui/react-use-callback-ref@npm:1.0.1" dependencies: - playwright: "npm:1.42.1" - playwright-core: "npm:1.42.1" - vite: "npm:^5.0.12" - bin: - playwright: cli.js - checksum: 10/ec62a3f0b8c82720101741884f2c5125f1daaba01fc6c9d3eee627b28ce5f9a40f2abc44bd2f40dd1a6a1856d1540468d13b7c05e301cf576d0c8d2984ca722d + "@babel/runtime": "npm:^7.13.10" + peerDependencies: + "@types/react": "*" + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/b9fd39911c3644bbda14a84e4fca080682bef84212b8d8931fcaa2d2814465de242c4cfd8d7afb3020646bead9c5e539d478cea0a7031bee8a8a3bb164f3bc4c languageName: node linkType: hard -"@playwright/experimental-ct-vue@npm:^1.42.1": - version: 1.42.1 - resolution: "@playwright/experimental-ct-vue@npm:1.42.1" +"@radix-ui/react-use-controllable-state@npm:1.0.1": + version: 1.0.1 + resolution: "@radix-ui/react-use-controllable-state@npm:1.0.1" dependencies: - "@playwright/experimental-ct-core": "npm:1.42.1" - "@vitejs/plugin-vue": "npm:^4.2.1" - bin: - playwright: cli.js - checksum: 10/c9511f965cd44999697d30065647df79bb352e7b5f670decdaf1f9b6f1928b22ce5d399a9acffabce66c14c97cee7ced0d94c5cc748e5a53b3934bfe127e4fea + "@babel/runtime": "npm:^7.13.10" + "@radix-ui/react-use-callback-ref": "npm:1.0.1" + peerDependencies: + "@types/react": "*" + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/dee2be1937d293c3a492cb6d279fc11495a8f19dc595cdbfe24b434e917302f9ac91db24e8cc5af9a065f3f209c3423115b5442e65a5be9fd1e9091338972be9 languageName: node linkType: hard -"@radix-ui/react-compose-refs@npm:1.0.1": - version: 1.0.1 - resolution: "@radix-ui/react-compose-refs@npm:1.0.1" +"@radix-ui/react-use-escape-keydown@npm:1.0.3": + version: 1.0.3 + resolution: "@radix-ui/react-use-escape-keydown@npm:1.0.3" dependencies: "@babel/runtime": "npm:^7.13.10" + "@radix-ui/react-use-callback-ref": "npm:1.0.1" peerDependencies: "@types/react": "*" react: ^16.8 || ^17.0 || ^18.0 peerDependenciesMeta: "@types/react": optional: true - checksum: 10/2b9a613b6db5bff8865588b6bf4065f73021b3d16c0a90b2d4c23deceeb63612f1f15de188227ebdc5f88222cab031be617a9dd025874c0487b303be3e5cc2a8 + checksum: 10/c6ed0d9ce780f67f924980eb305af1f6cce2a8acbaf043a58abe0aa3cc551d9aa76ccee14531df89bbee302ead7ecc7fce330886f82d4672c5eda52f357ef9b8 languageName: node linkType: hard -"@radix-ui/react-slot@npm:^1.0.2": - version: 1.0.2 - resolution: "@radix-ui/react-slot@npm:1.0.2" +"@radix-ui/react-use-layout-effect@npm:1.0.1": + version: 1.0.1 + resolution: "@radix-ui/react-use-layout-effect@npm:1.0.1" dependencies: "@babel/runtime": "npm:^7.13.10" - "@radix-ui/react-compose-refs": "npm:1.0.1" peerDependencies: "@types/react": "*" react: ^16.8 || ^17.0 || ^18.0 peerDependenciesMeta: "@types/react": optional: true - checksum: 10/734866561e991438fbcf22af06e56b272ed6ee8f7b536489ee3bf2f736f8b53bf6bc14ebde94834aa0aceda854d018a0ce20bb171defffbaed1f566006cbb887 + checksum: 10/bed9c7e8de243a5ec3b93bb6a5860950b0dba359b6680c84d57c7a655e123dec9b5891c5dfe81ab970652e7779fe2ad102a23177c7896dde95f7340817d47ae5 languageName: node linkType: hard @@ -2249,11 +2723,9 @@ __metadata: resolution: "@storybook/addon-controls@portal:../../../code/addons/controls::locator=portable-stories-vue3%40workspace%3A." dependencies: "@storybook/blocks": "workspace:*" - "@storybook/core-common": "workspace:*" - cjs-module-lexer: "npm:^1.2.3" - es-module-lexer: "npm:^1.5.0" - globby: "npm:^14.0.1" + dequal: "npm:^2.0.2" lodash: "npm:^4.17.21" + telejson: "npm:^7.2.0" ts-dedent: "npm:^2.0.0" languageName: node linkType: soft @@ -2262,7 +2734,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/addon-docs@portal:../../../code/addons/docs::locator=portable-stories-vue3%40workspace%3A." dependencies: - "@babel/core": "npm:^7.12.3" + "@babel/core": "npm:^7.24.4" "@mdx-js/react": "npm:^3.0.0" "@storybook/blocks": "workspace:*" "@storybook/client-logger": "workspace:*" @@ -2367,7 +2839,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:^0.1.4" "@storybook/docs-tools": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" @@ -2471,8 +2943,8 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/cli@portal:../../../code/lib/cli::locator=portable-stories-vue3%40workspace%3A." dependencies: - "@babel/core": "npm:^7.23.0" - "@babel/types": "npm:^7.23.0" + "@babel/core": "npm:^7.24.4" + "@babel/types": "npm:^7.24.0" "@ndelangen/get-tarball": "npm:^3.0.7" "@storybook/codemod": "workspace:*" "@storybook/core-common": "workspace:*" @@ -2525,10 +2997,10 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/codemod@portal:../../../code/lib/codemod::locator=portable-stories-vue3%40workspace%3A." dependencies: - "@babel/core": "npm:^7.23.2" - "@babel/preset-env": "npm:^7.23.2" - "@babel/types": "npm:^7.23.0" - "@storybook/csf": "npm:^0.1.2" + "@babel/core": "npm:^7.24.4" + "@babel/preset-env": "npm:^7.24.4" + "@babel/types": "npm:^7.24.0" + "@storybook/csf": "npm:^0.1.4" "@storybook/csf-tools": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/types": "workspace:*" @@ -2547,9 +3019,10 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/components@portal:../../../code/ui/components::locator=portable-stories-vue3%40workspace%3A." dependencies: + "@radix-ui/react-dialog": "npm:^1.0.5" "@radix-ui/react-slot": "npm:^1.0.2" "@storybook/client-logger": "workspace:*" - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:^0.1.4" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" "@storybook/theming": "workspace:*" @@ -2587,6 +3060,7 @@ __metadata: node-fetch: "npm:^2.0.0" picomatch: "npm:^2.3.0" pkg-dir: "npm:^5.0.0" + prettier-fallback: "npm:prettier@^3" pretty-hrtime: "npm:^1.0.3" resolve-from: "npm:^5.0.0" semver: "npm:^7.3.7" @@ -2594,6 +3068,11 @@ __metadata: tiny-invariant: "npm:^1.3.1" ts-dedent: "npm:^2.0.0" util: "npm:^0.12.4" + peerDependencies: + prettier: ^2 || ^3 + peerDependenciesMeta: + prettier: + optional: true languageName: node linkType: soft @@ -2601,6 +3080,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/core-events@portal:../../../code/lib/core-events::locator=portable-stories-vue3%40workspace%3A." dependencies: + "@storybook/csf": "npm:^0.1.4" ts-dedent: "npm:^2.0.0" languageName: node linkType: soft @@ -2610,13 +3090,14 @@ __metadata: resolution: "@storybook/core-server@portal:../../../code/lib/core-server::locator=portable-stories-vue3%40workspace%3A." dependencies: "@aw-web-design/x-default-browser": "npm:1.4.126" - "@babel/core": "npm:^7.23.9" + "@babel/core": "npm:^7.24.4" + "@babel/parser": "npm:^7.24.4" "@discoveryjs/json-ext": "npm:^0.5.3" "@storybook/builder-manager": "workspace:*" "@storybook/channels": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:^0.1.4" "@storybook/csf-tools": "workspace:*" "@storybook/docs-mdx": "npm:3.0.0" "@storybook/global": "npm:^5.0.0" @@ -2627,6 +3108,7 @@ __metadata: "@storybook/telemetry": "workspace:*" "@storybook/types": "workspace:*" "@types/detect-port": "npm:^1.3.0" + "@types/diff": "npm:^5.0.9" "@types/node": "npm:^18.0.0" "@types/pretty-hrtime": "npm:^1.0.0" "@types/semver": "npm:^7.3.4" @@ -2635,6 +3117,7 @@ __metadata: cli-table3: "npm:^0.6.1" compression: "npm:^1.7.4" detect-port: "npm:^1.3.0" + diff: "npm:^5.2.0" express: "npm:^4.17.3" fs-extra: "npm:^11.1.0" globby: "npm:^14.0.1" @@ -2668,11 +3151,11 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/csf-tools@portal:../../../code/lib/csf-tools::locator=portable-stories-vue3%40workspace%3A." dependencies: - "@babel/generator": "npm:^7.23.0" - "@babel/parser": "npm:^7.23.0" - "@babel/traverse": "npm:^7.23.2" - "@babel/types": "npm:^7.23.0" - "@storybook/csf": "npm:^0.1.2" + "@babel/generator": "npm:^7.24.4" + "@babel/parser": "npm:^7.24.4" + "@babel/traverse": "npm:^7.24.1" + "@babel/types": "npm:^7.24.0" + "@storybook/csf": "npm:^0.1.4" "@storybook/types": "workspace:*" fs-extra: "npm:^11.1.0" recast: "npm:^0.23.5" @@ -2689,12 +3172,12 @@ __metadata: languageName: node linkType: hard -"@storybook/csf@npm:^0.1.2": - version: 0.1.2 - resolution: "@storybook/csf@npm:0.1.2" +"@storybook/csf@npm:^0.1.4": + version: 0.1.4 + resolution: "@storybook/csf@npm:0.1.4" dependencies: type-fest: "npm:^2.19.0" - checksum: 10/11168df65e7b6bd0e5d31e7e805c8ba80397fc190cb33424e043b72bbd85d8f826dba082503992d7f606b72484337ab9d091eca947550613e241fbef57780d4c + checksum: 10/105f3bd748613b775e87454a8470e36733d0ac25b4b88aa9dbebe060f92ff8d5fda1c98289657039d980ecc8d4d59079ef559a42e211568dc97e19d245117156 languageName: node linkType: hard @@ -2710,6 +3193,7 @@ __metadata: resolution: "@storybook/docs-tools@portal:../../../code/lib/docs-tools::locator=portable-stories-vue3%40workspace%3A." dependencies: "@storybook/core-common": "workspace:*" + "@storybook/core-events": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/types": "workspace:*" "@types/doctrine": "npm:^0.0.3" @@ -2757,7 +3241,7 @@ __metadata: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:^0.1.4" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" "@storybook/router": "workspace:*" @@ -2791,7 +3275,7 @@ __metadata: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.2" + "@storybook/csf": "npm:^0.1.4" "@storybook/global": "npm:^5.0.0" "@storybook/types": "workspace:*" "@types/qs": "npm:^6.9.5" @@ -2858,7 +3342,6 @@ __metadata: "@testing-library/user-event": "npm:^14.5.2" "@vitest/expect": "npm:1.3.1" "@vitest/spy": "npm:^1.3.1" - chai: "npm:^4.4.1" util: "npm:^0.12.4" languageName: node linkType: soft @@ -3027,6 +3510,13 @@ __metadata: languageName: node linkType: hard +"@types/diff@npm:^5.0.9": + version: 5.2.0 + resolution: "@types/diff@npm:5.2.0" + checksum: 10/e1d3e6e9fd9d5386496c8716dd89316288d139cd8159a064f886a079149d05d65289b7b725ce1e333d4e77ce8024e210c6e281e9875a636fc17b4c760c2cf85f + languageName: node + linkType: hard + "@types/doctrine@npm:^0.0.3": version: 0.0.3 resolution: "@types/doctrine@npm:0.0.3" @@ -3894,6 +4384,15 @@ __metadata: languageName: node linkType: hard +"aria-hidden@npm:^1.1.1": + version: 1.2.4 + resolution: "aria-hidden@npm:1.2.4" + dependencies: + tslib: "npm:^2.0.0" + checksum: 10/df4bc15423aaaba3729a7d40abcbf6d3fffa5b8fd5eb33d3ac8b7da0110c47552fca60d97f2e1edfbb68a27cae1da499f1c3896966efb3e26aac4e3b57e3cc8b + languageName: node + linkType: hard + "aria-query@npm:5.1.3": version: 5.1.3 resolution: "aria-query@npm:5.1.3" @@ -4055,39 +4554,39 @@ __metadata: languageName: node linkType: hard -"babel-plugin-polyfill-corejs2@npm:^0.4.8": - version: 0.4.10 - resolution: "babel-plugin-polyfill-corejs2@npm:0.4.10" +"babel-plugin-polyfill-corejs2@npm:^0.4.10": + version: 0.4.11 + resolution: "babel-plugin-polyfill-corejs2@npm:0.4.11" dependencies: "@babel/compat-data": "npm:^7.22.6" - "@babel/helper-define-polyfill-provider": "npm:^0.6.1" + "@babel/helper-define-polyfill-provider": "npm:^0.6.2" semver: "npm:^6.3.1" peerDependencies: "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0 - checksum: 10/9fb5e59a3235eba66fb05060b2a3ecd6923084f100df7526ab74b6272347d7adcf99e17366b82df36e592cde4e82fdb7ae24346a990eced76c7d504cac243400 + checksum: 10/9c79908bed61b9f52190f254e22d3dca6ce25769738642579ba8d23832f3f9414567a90d8367a31831fa45d9b9607ac43d8d07ed31167d8ca8cda22871f4c7a1 languageName: node linkType: hard -"babel-plugin-polyfill-corejs3@npm:^0.9.0": - version: 0.9.0 - resolution: "babel-plugin-polyfill-corejs3@npm:0.9.0" +"babel-plugin-polyfill-corejs3@npm:^0.10.4": + version: 0.10.4 + resolution: "babel-plugin-polyfill-corejs3@npm:0.10.4" dependencies: - "@babel/helper-define-polyfill-provider": "npm:^0.5.0" - core-js-compat: "npm:^3.34.0" + "@babel/helper-define-polyfill-provider": "npm:^0.6.1" + core-js-compat: "npm:^3.36.1" peerDependencies: "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0 - checksum: 10/efdf9ba82e7848a2c66e0522adf10ac1646b16f271a9006b61a22f976b849de22a07c54c8826887114842ccd20cc9a4617b61e8e0789227a74378ab508e715cd + checksum: 10/a69ed5a95bb55e9b7ea37307d56113f7e24054d479c15de6d50fa61388b5334bed1f9b6414cde6c575fa910a4de4d1ab4f2d22720967d57c4fec9d1b8f61b355 languageName: node linkType: hard -"babel-plugin-polyfill-regenerator@npm:^0.5.5": - version: 0.5.5 - resolution: "babel-plugin-polyfill-regenerator@npm:0.5.5" +"babel-plugin-polyfill-regenerator@npm:^0.6.1": + version: 0.6.2 + resolution: "babel-plugin-polyfill-regenerator@npm:0.6.2" dependencies: - "@babel/helper-define-polyfill-provider": "npm:^0.5.0" + "@babel/helper-define-polyfill-provider": "npm:^0.6.2" peerDependencies: "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0 - checksum: 10/3a9b4828673b23cd648dcfb571eadcd9d3fadfca0361d0a7c6feeb5a30474e92faaa49f067a6e1c05e49b6a09812879992028ff3ef3446229ff132d6e1de7eb6 + checksum: 10/150233571072b6b3dfe946242da39cba8587b7f908d1c006f7545fc88b0e3c3018d445739beb61e7a75835f0c2751dbe884a94ff9b245ec42369d9267e0e1b3f languageName: node linkType: hard @@ -4244,7 +4743,7 @@ __metadata: languageName: node linkType: hard -"browserslist@npm:^4.22.2, browserslist@npm:^4.22.3": +"browserslist@npm:^4.22.2, browserslist@npm:^4.22.3, browserslist@npm:^4.23.0": version: 4.23.0 resolution: "browserslist@npm:4.23.0" dependencies: @@ -4357,7 +4856,7 @@ __metadata: languageName: node linkType: hard -"chai@npm:^4.3.10, chai@npm:^4.4.1": +"chai@npm:^4.3.10": version: 4.4.1 resolution: "chai@npm:4.4.1" dependencies: @@ -4477,13 +4976,6 @@ __metadata: languageName: node linkType: hard -"cjs-module-lexer@npm:^1.2.3": - version: 1.2.3 - resolution: "cjs-module-lexer@npm:1.2.3" - checksum: 10/f96a5118b0a012627a2b1c13bd2fcb92509778422aaa825c5da72300d6dcadfb47134dd2e9d97dfa31acd674891dd91642742772d19a09a8adc3e56bd2f5928c - languageName: node - linkType: hard - "clean-stack@npm:^2.0.0": version: 2.2.0 resolution: "clean-stack@npm:2.2.0" @@ -4709,7 +5201,7 @@ __metadata: languageName: node linkType: hard -"core-js-compat@npm:^3.31.0, core-js-compat@npm:^3.34.0": +"core-js-compat@npm:^3.31.0": version: 3.36.0 resolution: "core-js-compat@npm:3.36.0" dependencies: @@ -4718,6 +5210,15 @@ __metadata: languageName: node linkType: hard +"core-js-compat@npm:^3.36.1": + version: 3.37.0 + resolution: "core-js-compat@npm:3.37.0" + dependencies: + browserslist: "npm:^4.23.0" + checksum: 10/5f33d7ba45acc9ceb45544d844090edfd14e46a64c2424df24084347405182c1156588cc3a877fc580c005a0b13b8a1af26bb6c73fe73f22eede89b5483b482d + languageName: node + linkType: hard + "core-util-is@npm:1.0.2": version: 1.0.2 resolution: "core-util-is@npm:1.0.2" @@ -5017,6 +5518,13 @@ __metadata: languageName: node linkType: hard +"detect-node-es@npm:^1.1.0": + version: 1.1.0 + resolution: "detect-node-es@npm:1.1.0" + checksum: 10/e46307d7264644975b71c104b9f028ed1d3d34b83a15b8a22373640ce5ea630e5640b1078b8ea15f202b54641da71e4aa7597093bd4b91f113db520a26a37449 + languageName: node + linkType: hard + "detect-package-manager@npm:^2.0.1": version: 2.0.1 resolution: "detect-package-manager@npm:2.0.1" @@ -5046,6 +5554,13 @@ __metadata: languageName: node linkType: hard +"diff@npm:^5.2.0": + version: 5.2.0 + resolution: "diff@npm:5.2.0" + checksum: 10/01b7b440f83a997350a988e9d2f558366c0f90f15be19f4aa7f1bb3109a4e153dfc3b9fbf78e14ea725717017407eeaa2271e3896374a0181e8f52445740846d + languageName: node + linkType: hard + "dir-glob@npm:^3.0.1": version: 3.0.1 resolution: "dir-glob@npm:3.0.1" @@ -6216,6 +6731,13 @@ __metadata: languageName: node linkType: hard +"get-nonce@npm:^1.0.0": + version: 1.0.1 + resolution: "get-nonce@npm:1.0.1" + checksum: 10/ad5104871d114a694ecc506a2d406e2331beccb961fe1e110dc25556b38bcdbf399a823a8a375976cd8889668156a9561e12ebe3fa6a4c6ba169c8466c2ff868 + languageName: node + linkType: hard + "get-npm-tarball-url@npm:^2.0.3": version: 2.1.0 resolution: "get-npm-tarball-url@npm:2.1.0" @@ -6728,6 +7250,15 @@ __metadata: languageName: node linkType: hard +"invariant@npm:^2.2.4": + version: 2.2.4 + resolution: "invariant@npm:2.2.4" + dependencies: + loose-envify: "npm:^1.0.0" + checksum: 10/cc3182d793aad82a8d1f0af697b462939cb46066ec48bbf1707c150ad5fad6406137e91a262022c269702e01621f35ef60269f6c0d7fd178487959809acdfb14 + languageName: node + linkType: hard + "ip-address@npm:^9.0.5": version: 9.0.5 resolution: "ip-address@npm:9.0.5" @@ -7520,7 +8051,7 @@ __metadata: languageName: node linkType: hard -"loose-envify@npm:^1.1.0": +"loose-envify@npm:^1.0.0, loose-envify@npm:^1.1.0": version: 1.4.0 resolution: "loose-envify@npm:1.4.0" dependencies: @@ -8557,7 +9088,7 @@ __metadata: languageName: node linkType: hard -"prettier@npm:^3.1.1": +"prettier-fallback@npm:prettier@^3, prettier@npm:^3.1.1": version: 3.2.5 resolution: "prettier@npm:3.2.5" bin: @@ -8944,6 +9475,58 @@ __metadata: languageName: node linkType: hard +"react-remove-scroll-bar@npm:^2.3.3": + version: 2.3.6 + resolution: "react-remove-scroll-bar@npm:2.3.6" + dependencies: + react-style-singleton: "npm:^2.2.1" + tslib: "npm:^2.0.0" + peerDependencies: + "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/5ab8eda61d5b10825447d11e9c824486c929351a471457c22452caa19b6898e18c3af6a46c3fa68010c713baed1eb9956106d068b4a1058bdcf97a1a9bbed734 + languageName: node + linkType: hard + +"react-remove-scroll@npm:2.5.5": + version: 2.5.5 + resolution: "react-remove-scroll@npm:2.5.5" + dependencies: + react-remove-scroll-bar: "npm:^2.3.3" + react-style-singleton: "npm:^2.2.1" + tslib: "npm:^2.1.0" + use-callback-ref: "npm:^1.3.0" + use-sidecar: "npm:^1.1.2" + peerDependencies: + "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/f0646ac384ce3852d1f41e30a9f9e251b11cf3b430d1d114c937c8fa7f90a895c06378d0d6b6ff0b2d00cbccf15e845921944fd6074ae67a0fb347a718106d88 + languageName: node + linkType: hard + +"react-style-singleton@npm:^2.2.1": + version: 2.2.1 + resolution: "react-style-singleton@npm:2.2.1" + dependencies: + get-nonce: "npm:^1.0.0" + invariant: "npm:^2.2.4" + tslib: "npm:^2.0.0" + peerDependencies: + "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/80c58fd6aac3594e351e2e7b048d8a5b09508adb21031a38b3c40911fe58295572eddc640d4b20a7be364842c8ed1120fe30097e22ea055316b375b88d4ff02a + languageName: node + linkType: hard + "react@npm:^16.8.0 || ^17.0.0 || ^18.0.0": version: 18.2.0 resolution: "react@npm:18.2.0" @@ -10045,7 +10628,7 @@ __metadata: languageName: node linkType: hard -"tslib@npm:^2.0.1, tslib@npm:^2.1.0, tslib@npm:^2.4.0": +"tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.1.0, tslib@npm:^2.4.0": version: 2.6.2 resolution: "tslib@npm:2.6.2" checksum: 10/bd26c22d36736513980091a1e356378e8b662ded04204453d353a7f34a4c21ed0afc59b5f90719d4ba756e581a162ecbf93118dc9c6be5acf70aa309188166ca @@ -10358,6 +10941,37 @@ __metadata: languageName: node linkType: hard +"use-callback-ref@npm:^1.3.0": + version: 1.3.2 + resolution: "use-callback-ref@npm:1.3.2" + dependencies: + tslib: "npm:^2.0.0" + peerDependencies: + "@types/react": ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/3be76eae71b52ab233b4fde974eddeff72e67e6723100a0c0297df4b0d60daabedfa706ffb314d0a52645f2c1235e50fdbd53d99f374eb5df68c74d412e98a9b + languageName: node + linkType: hard + +"use-sidecar@npm:^1.1.2": + version: 1.1.2 + resolution: "use-sidecar@npm:1.1.2" + dependencies: + detect-node-es: "npm:^1.1.0" + tslib: "npm:^2.0.0" + peerDependencies: + "@types/react": ^16.9.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/ec99e31aefeb880f6dc4d02cb19a01d123364954f857811470ece32872f70d6c3eadbe4d073770706a9b7db6136f2a9fbf1bb803e07fbb21e936a47479281690 + languageName: node + linkType: hard + "util-deprecate@npm:^1.0.1, util-deprecate@npm:^1.0.2, util-deprecate@npm:~1.0.1": version: 1.0.2 resolution: "util-deprecate@npm:1.0.2" From b6c900a0f21b3e96d2c7b3048bcf1616554aec55 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Wed, 24 Apr 2024 11:42:56 +0200 Subject: [PATCH 307/380] add previewHead to sandboxes with explicit monospace font stack --- scripts/tasks/sandbox-parts.ts | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/scripts/tasks/sandbox-parts.ts b/scripts/tasks/sandbox-parts.ts index cd7dc643a185..096af524e7f8 100644 --- a/scripts/tasks/sandbox-parts.ts +++ b/scripts/tasks/sandbox-parts.ts @@ -533,6 +533,28 @@ export const extendMain: Task['run'] = async ({ template, sandboxDir }, { disabl Object.entries(configToAdd).forEach(([field, value]) => mainConfig.setFieldValue([field], value)); + const previewHeadCode = ` + (head) => \` + \${head} + ${templateConfig.previewHead || ''} + + \``; + mainConfig.setFieldNode(['previewHead'], babelParse(previewHeadCode).program.body[0].expression); + // Simulate Storybook Lite if (disableDocs) { const addons = mainConfig.getFieldValue(['addons']); From 0a1e098472156d0c03b14adf869b624ebfb2c100 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Wed, 24 Apr 2024 11:59:26 +0200 Subject: [PATCH 308/380] align monospace font stack with Next.js defaults See https://github.com/vercel/next.js/blame/canary/packages/create-next-app/templates/app/ts/app/globals.css#L4-L6 --- scripts/tasks/sandbox-parts.ts | 40 +++++++++++++++++++--------------- 1 file changed, 22 insertions(+), 18 deletions(-) diff --git a/scripts/tasks/sandbox-parts.ts b/scripts/tasks/sandbox-parts.ts index 096af524e7f8..b4e3b535d79d 100644 --- a/scripts/tasks/sandbox-parts.ts +++ b/scripts/tasks/sandbox-parts.ts @@ -535,24 +535,28 @@ export const extendMain: Task['run'] = async ({ template, sandboxDir }, { disabl const previewHeadCode = ` (head) => \` - \${head} - ${templateConfig.previewHead || ''} - - \``; + \${head} + ${templateConfig.previewHead || ''} + + \``; mainConfig.setFieldNode(['previewHead'], babelParse(previewHeadCode).program.body[0].expression); // Simulate Storybook Lite From caf3f2a203aa57320b88c9360600be1d621d612c Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Wed, 24 Apr 2024 14:59:27 +0200 Subject: [PATCH 309/380] fix link stories not working in all renderers --- .../links/template/stories/decorator.stories.ts | 11 ++++++++++- code/addons/links/template/stories/linkto.stories.ts | 7 ++++++- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/code/addons/links/template/stories/decorator.stories.ts b/code/addons/links/template/stories/decorator.stories.ts index 2149eb5dafa4..53a05f380e74 100644 --- a/code/addons/links/template/stories/decorator.stories.ts +++ b/code/addons/links/template/stories/decorator.stories.ts @@ -10,7 +10,16 @@ export default { }; export const Target = { - render: () => 'This is just a story to target with the links', + args: { + content: ` +
+ This is just a story to target with the links +
+ `, + }, + parameters: { + chromatic: { disable: true }, + }, }; export const KindAndStory = { diff --git a/code/addons/links/template/stories/linkto.stories.ts b/code/addons/links/template/stories/linkto.stories.ts index 13e549f75134..502509a8d5aa 100644 --- a/code/addons/links/template/stories/linkto.stories.ts +++ b/code/addons/links/template/stories/linkto.stories.ts @@ -13,7 +13,12 @@ export default { }; export const Target = { - render: () => 'This is just a story to target with the links', + args: { + label: 'This is just a story to target with the links', + }, + parameters: { + chromatic: { disable: true }, + }, }; export const Id = { From a092fedc1ed4e5541fbf05616c66558053167523 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Thu, 25 Apr 2024 11:30:27 +0200 Subject: [PATCH 310/380] get index AFTER setting filters is done This ensures that when checking if there is an index to reset, it's not using stale data from before the index was even fully fetched. --- code/lib/manager-api/src/modules/stories.ts | 47 ++++++++++++++------- 1 file changed, 32 insertions(+), 15 deletions(-) diff --git a/code/lib/manager-api/src/modules/stories.ts b/code/lib/manager-api/src/modules/stories.ts index c8861f64f720..c1672e7873c5 100644 --- a/code/lib/manager-api/src/modules/stories.ts +++ b/code/lib/manager-api/src/modules/stories.ts @@ -522,10 +522,13 @@ export const init: ModuleFn = ({ }, fetchIndex: async () => { try { + const now = Date.now(); + console.log('LOG: fetchIndex before fetch'); const result = await fetch(STORY_INDEX_PATH); if (result.status !== 200) throw new Error(await result.text()); const storyIndex = (await result.json()) as StoryIndex; + console.log('LOG: fetchIndex after fetch', { storyIndex, bench: Date.now() - now }); // We can only do this if the stories.json is a proper storyIndex if (storyIndex.v < 3) { @@ -543,9 +546,26 @@ export const init: ModuleFn = ({ // The story index we receive on fetchStoryIndex is not, but all the prepared fields are optional // so we can cast one to the other easily enough setIndex: async (input) => { - const { index: oldHash, status, filters } = store.getState(); + const state = store.getState(); + + /** + * The initial setIndex (as called by fetchIndex) is in a race with this.setSate in the ManagerProvider + * Especially in Webkit, fetchIndex is done long before filters have been set in the state + * But we always expect the internal 'static-filter' to be set + */ + // for (let i = 0; i < 10; i++) { + // if (state.filters['static-filter']) { + // break; + // } + // state = await new Promise((resolve) => { + // setTimeout(() => resolve(store.getState()), 0); + // }); + // } + + const { index: oldHash, status, filters } = state; + console.log( - `api.setIndex calling transformStoryIndexToStoriesHash with ${ + `!!!!!!! api.setIndex calling transformStoryIndexToStoriesHash with ${ Object.keys(filters).length } filters` ); @@ -656,23 +676,20 @@ export const init: ModuleFn = ({ } }, experimental_setFilter: async (id, filterFunction) => { - const { internal_index: index } = store.getState(); - console.log('experimental_setFilter inner function', { - index, - filters: store.getState().filters, - filterFunction, - }); await store.setState({ filters: { ...store.getState().filters, [id]: filterFunction } }); - if (index) { - console.log('calling api.setIndex from experimental_setFilter'); - await api.setIndex(index); + const { internal_index: index } = store.getState(); - const refs = await fullAPI.getRefs(); - Object.entries(refs).forEach(([refId, { internal_index, ...ref }]) => { - fullAPI.setRef(refId, { ...ref, storyIndex: internal_index }, true); - }); + if (!index) { + return; } + // apply new filters by setting the index again + await api.setIndex(index); + + const refs = await fullAPI.getRefs(); + Object.entries(refs).forEach(([refId, { internal_index, ...ref }]) => { + fullAPI.setRef(refId, { ...ref, storyIndex: internal_index }, true); + }); }, }; From 3cbe01d3ccc5927f47e640666d1bfe1ecce76fda Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Thu, 25 Apr 2024 11:35:00 +0200 Subject: [PATCH 311/380] cleanup --- .../core-server/src/presets/common-manager.ts | 1 - code/lib/manager-api/src/index.tsx | 22 +++--------- code/lib/manager-api/src/lib/stories.ts | 4 --- code/lib/manager-api/src/modules/stories.ts | 36 +------------------ code/ui/manager/src/container/Sidebar.tsx | 1 - 5 files changed, 5 insertions(+), 59 deletions(-) diff --git a/code/lib/core-server/src/presets/common-manager.ts b/code/lib/core-server/src/presets/common-manager.ts index 138f6064fcce..0564f8e00b92 100644 --- a/code/lib/core-server/src/presets/common-manager.ts +++ b/code/lib/core-server/src/presets/common-manager.ts @@ -17,7 +17,6 @@ addons.register(STATIC_FILTER, (api) => { {} as Record ); - console.log('Registering STATIC_FILTER'); api.experimental_setFilter(STATIC_FILTER, (item) => { const tags = item.tags || []; return tags.filter((tag) => excludeTags[tag]).length === 0; diff --git a/code/lib/manager-api/src/index.tsx b/code/lib/manager-api/src/index.tsx index baa1874f672d..fbb8b74a6420 100644 --- a/code/lib/manager-api/src/index.tsx +++ b/code/lib/manager-api/src/index.tsx @@ -167,19 +167,12 @@ class ManagerProvider extends Component { navigate, } = props; - console.log('creating store', this.state); const store = new Store({ getState: () => this.state, - setState: async (stateChange: Partial, callback) => { - // attempting to turn this into async to fix timing issues - return new Promise((resolve) => { - console.log('calling setState with stateChange', stateChange); - this.setState(stateChange, () => { - console.log('calling the callback of setState with ', this.state); - callback(this.state); - resolve(this.state); - }); - }); + setState: (stateChange: Partial, callback) => { + this.setState(stateChange, () => callback(this.state)); + + return this.state; }, }); @@ -188,14 +181,12 @@ class ManagerProvider extends Component { this.state = store.getInitialState(getInitialState({ ...routeData, ...optionsData })); - console.log('initializing with state:', this.state); const apiData = { navigate, store, provider: props.provider, }; - console.log('initializing modules'); this.modules = [ provider, channel, @@ -217,10 +208,6 @@ class ManagerProvider extends Component { // Create our initial state by combining the initial state of all modules, then overlaying any saved state const state = getInitialState(this.state, ...this.modules.map((m) => m.state!)); - console.log('overriding with with state:', { - before: getInitialState(this.state), - after: state, - }); // Get our API by combining the APIs exported by each module const api: API = Object.assign(this.api, { navigate }, ...this.modules.map((m) => m.api)); @@ -230,7 +217,6 @@ class ManagerProvider extends Component { static getDerivedStateFromProps(props: ManagerProviderProps, state: State): State { if (state.path !== props.path) { - console.log('derived state is:', state); return { ...state, location: props.location, diff --git a/code/lib/manager-api/src/lib/stories.ts b/code/lib/manager-api/src/lib/stories.ts index ab52462f3827..9d6b1817e677 100644 --- a/code/lib/manager-api/src/lib/stories.ts +++ b/code/lib/manager-api/src/lib/stories.ts @@ -162,10 +162,6 @@ export const transformStoryIndexToStoriesHash = ( const entryValues = Object.values(index.entries).filter((entry: any) => { let result = true; - console.log( - 'Time to filter out the index - ' + - (Object.keys(filters).length > 0 ? 'and there is a filter' : 'but there is no filter') - ); Object.values(filters).forEach((filter: any) => { if (result === false) { return; diff --git a/code/lib/manager-api/src/modules/stories.ts b/code/lib/manager-api/src/modules/stories.ts index c1672e7873c5..7903f283228a 100644 --- a/code/lib/manager-api/src/modules/stories.ts +++ b/code/lib/manager-api/src/modules/stories.ts @@ -522,13 +522,10 @@ export const init: ModuleFn = ({ }, fetchIndex: async () => { try { - const now = Date.now(); - console.log('LOG: fetchIndex before fetch'); const result = await fetch(STORY_INDEX_PATH); if (result.status !== 200) throw new Error(await result.text()); const storyIndex = (await result.json()) as StoryIndex; - console.log('LOG: fetchIndex after fetch', { storyIndex, bench: Date.now() - now }); // We can only do this if the stories.json is a proper storyIndex if (storyIndex.v < 3) { @@ -536,7 +533,6 @@ export const init: ModuleFn = ({ return; } - console.log('calling api.setIndex from api.fetchIndex'); await api.setIndex(storyIndex); } catch (err: any) { await store.setState({ indexError: err }); @@ -546,29 +542,7 @@ export const init: ModuleFn = ({ // The story index we receive on fetchStoryIndex is not, but all the prepared fields are optional // so we can cast one to the other easily enough setIndex: async (input) => { - const state = store.getState(); - - /** - * The initial setIndex (as called by fetchIndex) is in a race with this.setSate in the ManagerProvider - * Especially in Webkit, fetchIndex is done long before filters have been set in the state - * But we always expect the internal 'static-filter' to be set - */ - // for (let i = 0; i < 10; i++) { - // if (state.filters['static-filter']) { - // break; - // } - // state = await new Promise((resolve) => { - // setTimeout(() => resolve(store.getState()), 0); - // }); - // } - - const { index: oldHash, status, filters } = state; - - console.log( - `!!!!!!! api.setIndex calling transformStoryIndexToStoriesHash with ${ - Object.keys(filters).length - } filters` - ); + const { index: oldHash, status, filters } = store.getState(); const newHash = transformStoryIndexToStoriesHash(input, { provider, @@ -666,7 +640,6 @@ export const init: ModuleFn = ({ if (index) { // We need to re-prepare the index - console.log('calling api.setIndex from experimental_updateStatus'); await api.setIndex(index); const refs = await fullAPI.getRefs(); @@ -812,7 +785,6 @@ export const init: ModuleFn = ({ const { ref } = getEventMetadata(this, fullAPI)!; if (!ref) { - console.log('calling api.setIndex from SET_INDEX listener when there is no ref'); api.setIndex(index); const options = api.getCurrentParameter('options'); fullAPI.setOptions(removeRemovedOptions(options!)); @@ -887,9 +859,7 @@ export const init: ModuleFn = ({ provider.channel?.on(SET_CONFIG, () => { const config = provider.getConfig(); - console.log('getting config'); if (config?.sidebar?.filters) { - console.log("there are filters, let's set them"); store.setState({ filters: { ...store.getState().filters, @@ -901,7 +871,6 @@ export const init: ModuleFn = ({ const config = provider.getConfig(); - console.log('setting initial state'); return { api, state: { @@ -914,13 +883,10 @@ export const init: ModuleFn = ({ }, init: async () => { provider.channel?.on(STORY_INDEX_INVALIDATED, () => { - console.log('calling api.fetchIndex from STORY_INDEX_INVALIDATED event'); api.fetchIndex(); }); - console.log('calling api.fetchIndex from stories module init - started'); await api.fetchIndex(); - console.log('calling api.fetchIndex from stories module init - completed'); }, }; }; diff --git a/code/ui/manager/src/container/Sidebar.tsx b/code/ui/manager/src/container/Sidebar.tsx index 6bbe2e1f1a83..21d9cf09ef6c 100755 --- a/code/ui/manager/src/container/Sidebar.tsx +++ b/code/ui/manager/src/container/Sidebar.tsx @@ -49,7 +49,6 @@ const Sidebar = React.memo(function Sideber({ onMenuClick }: SidebarProps) { // eslint-disable-next-line react-hooks/exhaustive-deps const top = useMemo(() => Object.values(topItems), [Object.keys(topItems).join('')]); - console.log('Sidebar context mapper - ', { indexCount: index ? Object.keys(index).length : 0 }); return { title: name, url, From 65c84db98a5a584a44e61786a7b69b8ed8a0b165 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Thu, 25 Apr 2024 11:36:17 +0200 Subject: [PATCH 312/380] cleanup --- code/lib/manager-api/src/modules/stories.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/code/lib/manager-api/src/modules/stories.ts b/code/lib/manager-api/src/modules/stories.ts index 7903f283228a..19ea80ce41f4 100644 --- a/code/lib/manager-api/src/modules/stories.ts +++ b/code/lib/manager-api/src/modules/stories.ts @@ -543,7 +543,6 @@ export const init: ModuleFn = ({ // so we can cast one to the other easily enough setIndex: async (input) => { const { index: oldHash, status, filters } = store.getState(); - const newHash = transformStoryIndexToStoriesHash(input, { provider, docsOptions, @@ -882,9 +881,7 @@ export const init: ModuleFn = ({ filters: config?.sidebar?.filters || {}, }, init: async () => { - provider.channel?.on(STORY_INDEX_INVALIDATED, () => { - api.fetchIndex(); - }); + provider.channel?.on(STORY_INDEX_INVALIDATED, () => api.fetchIndex()); await api.fetchIndex(); }, From b6e832d6702ee9a6c453ee786a244c07edd48f28 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Thu, 25 Apr 2024 12:28:45 +0200 Subject: [PATCH 313/380] use auto-retrying assertions for text content in e2e tests See https://playwright.dev/docs/test-assertions --- code/e2e-tests/addon-docs.spec.ts | 2 +- code/e2e-tests/framework-svelte.spec.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/code/e2e-tests/addon-docs.spec.ts b/code/e2e-tests/addon-docs.spec.ts index db7b7b7d5e05..2713892fd042 100644 --- a/code/e2e-tests/addon-docs.spec.ts +++ b/code/e2e-tests/addon-docs.spec.ts @@ -67,7 +67,7 @@ test.describe('addon-docs', () => { await new Promise(resolve => resolve('Play function')); } }`; - await expect(sourceCode.textContent()).resolves.toContain(expectedSource); + await expect(sourceCode).toHaveText(expectedSource); }); test('should render errors', async ({ page }) => { diff --git a/code/e2e-tests/framework-svelte.spec.ts b/code/e2e-tests/framework-svelte.spec.ts index 7d2efe7db6f3..ba42745c6172 100644 --- a/code/e2e-tests/framework-svelte.spec.ts +++ b/code/e2e-tests/framework-svelte.spec.ts @@ -41,7 +41,7 @@ test.describe('Svelte', () => { await showCodeButton.click(); const sourceCode = root.locator('pre.prismjs'); const expectedSource = ''; - await expect(sourceCode.textContent()).resolves.toContain(expectedSource); + await expect(sourceCode).toHaveText(expectedSource); }); test('Decorators runs only once', async ({ page }) => { From 7c89f0fb5d8132c52e71538fa5548382e5712798 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 25 Apr 2024 13:36:46 -0600 Subject: [PATCH 314/380] Update snapshot --- .../docgen-components/8428-js-static-prop-types/docgen.snapshot | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/renderers/react/template/stories/docgen-components/8428-js-static-prop-types/docgen.snapshot b/code/renderers/react/template/stories/docgen-components/8428-js-static-prop-types/docgen.snapshot index 51b837feb2b6..2fb12d5579e7 100644 --- a/code/renderers/react/template/stories/docgen-components/8428-js-static-prop-types/docgen.snapshot +++ b/code/renderers/react/template/stories/docgen-components/8428-js-static-prop-types/docgen.snapshot @@ -1,5 +1,5 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } -function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); } +function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; } function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } import React from 'react'; import PropTypes from 'prop-types'; From 397ab28ec2b094f24f36b247cb79d6e8966a01c2 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 25 Apr 2024 16:58:16 -0600 Subject: [PATCH 315/380] Fix play function --- .../manager/src/components/sidebar/FileSearchModal.stories.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/code/ui/manager/src/components/sidebar/FileSearchModal.stories.tsx b/code/ui/manager/src/components/sidebar/FileSearchModal.stories.tsx index d27d61b0457e..aaa604953aea 100644 --- a/code/ui/manager/src/components/sidebar/FileSearchModal.stories.tsx +++ b/code/ui/manager/src/components/sidebar/FileSearchModal.stories.tsx @@ -101,6 +101,7 @@ export const WithSearchResults: Story = { await fireEvent.click(moduleSingleExport); expect(args.onCreateNewStory).toHaveBeenCalledWith({ + componentExportCount: 1, componentExportName: 'default', componentFilePath: 'src/module-single-export.js', componentIsDefaultExport: true, From 4011f99fb2e21deecdf5852ca14ead0df0e885ae Mon Sep 17 00:00:00 2001 From: James Ross Date: Fri, 26 Apr 2024 00:35:32 +0100 Subject: [PATCH 316/380] fix: bump @storybook/csf to 0.1.5 resolves #26912 --- code/addons/links/package.json | 2 +- code/lib/codemod/package.json | 2 +- code/lib/core-server/package.json | 2 +- code/lib/csf-tools/package.json | 2 +- code/lib/manager-api/package.json | 2 +- code/lib/preview-api/package.json | 2 +- code/lib/source-loader/package.json | 2 +- code/lib/types/package.json | 2 +- code/package.json | 2 +- code/renderers/server/package.json | 2 +- code/ui/blocks/package.json | 2 +- code/ui/components/package.json | 2 +- code/yarn.lock | 32 ++++++++++++++--------------- 13 files changed, 28 insertions(+), 28 deletions(-) diff --git a/code/addons/links/package.json b/code/addons/links/package.json index cbe50306d3f7..fca532085ff4 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -67,7 +67,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { - "@storybook/csf": "^0.1.4", + "@storybook/csf": "^0.1.5", "@storybook/global": "^5.0.0", "ts-dedent": "^2.0.0" }, diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index 46f9ad028a5e..c5569f29bd04 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -57,7 +57,7 @@ "@babel/core": "^7.23.2", "@babel/preset-env": "^7.23.2", "@babel/types": "^7.23.0", - "@storybook/csf": "^0.1.4", + "@storybook/csf": "^0.1.5", "@storybook/csf-tools": "workspace:*", "@storybook/node-logger": "workspace:*", "@storybook/types": "workspace:*", diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index 4116c6f9daa5..334ae373b36e 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -62,7 +62,7 @@ "@storybook/channels": "workspace:*", "@storybook/core-common": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "^0.1.4", + "@storybook/csf": "^0.1.5", "@storybook/csf-tools": "workspace:*", "@storybook/docs-mdx": "3.0.0", "@storybook/global": "^5.0.0", diff --git a/code/lib/csf-tools/package.json b/code/lib/csf-tools/package.json index 430b347c2451..d04ab9d94884 100644 --- a/code/lib/csf-tools/package.json +++ b/code/lib/csf-tools/package.json @@ -46,7 +46,7 @@ "@babel/parser": "^7.23.0", "@babel/traverse": "^7.23.2", "@babel/types": "^7.23.0", - "@storybook/csf": "^0.1.4", + "@storybook/csf": "^0.1.5", "@storybook/types": "workspace:*", "fs-extra": "^11.1.0", "recast": "^0.23.5", diff --git a/code/lib/manager-api/package.json b/code/lib/manager-api/package.json index 28893f10f5c7..a111b3a232f6 100644 --- a/code/lib/manager-api/package.json +++ b/code/lib/manager-api/package.json @@ -47,7 +47,7 @@ "@storybook/channels": "workspace:*", "@storybook/client-logger": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "^0.1.4", + "@storybook/csf": "^0.1.5", "@storybook/global": "^5.0.0", "@storybook/icons": "^1.2.5", "@storybook/router": "workspace:*", diff --git a/code/lib/preview-api/package.json b/code/lib/preview-api/package.json index 48bb90cfb6b0..d5678327d9e2 100644 --- a/code/lib/preview-api/package.json +++ b/code/lib/preview-api/package.json @@ -47,7 +47,7 @@ "@storybook/channels": "workspace:*", "@storybook/client-logger": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "^0.1.4", + "@storybook/csf": "^0.1.5", "@storybook/global": "^5.0.0", "@storybook/types": "workspace:*", "@types/qs": "^6.9.5", diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index 1b480d450fe8..833850ad8d5e 100644 --- a/code/lib/source-loader/package.json +++ b/code/lib/source-loader/package.json @@ -45,7 +45,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/csf": "^0.1.4", + "@storybook/csf": "^0.1.5", "@storybook/types": "workspace:*", "estraverse": "^5.2.0", "lodash": "^4.17.21", diff --git a/code/lib/types/package.json b/code/lib/types/package.json index bbac0e65beb1..d7469d928ae0 100644 --- a/code/lib/types/package.json +++ b/code/lib/types/package.json @@ -49,7 +49,7 @@ "file-system-cache": "2.3.0" }, "devDependencies": { - "@storybook/csf": "^0.1.4", + "@storybook/csf": "^0.1.5", "@types/fs-extra": "^11.0.1", "@types/node": "^18.0.0", "typescript": "^5.3.2" diff --git a/code/package.json b/code/package.json index 29dc543f11e8..aa77cb859fb2 100644 --- a/code/package.json +++ b/code/package.json @@ -127,7 +127,7 @@ "@storybook/core-events": "workspace:*", "@storybook/core-server": "workspace:*", "@storybook/core-webpack": "workspace:*", - "@storybook/csf": "^0.1.4", + "@storybook/csf": "^0.1.5", "@storybook/csf-plugin": "workspace:*", "@storybook/csf-tools": "workspace:*", "@storybook/docs-tools": "workspace:*", diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json index f7c4cfa88ef0..ef60a8071fbf 100644 --- a/code/renderers/server/package.json +++ b/code/renderers/server/package.json @@ -46,7 +46,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/csf": "^0.1.4", + "@storybook/csf": "^0.1.5", "@storybook/csf-tools": "workspace:*", "@storybook/global": "^5.0.0", "@storybook/preview-api": "workspace:*", diff --git a/code/ui/blocks/package.json b/code/ui/blocks/package.json index edae82e2f19d..5e59af48f6da 100644 --- a/code/ui/blocks/package.json +++ b/code/ui/blocks/package.json @@ -48,7 +48,7 @@ "@storybook/client-logger": "workspace:*", "@storybook/components": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "^0.1.4", + "@storybook/csf": "^0.1.5", "@storybook/docs-tools": "workspace:*", "@storybook/global": "^5.0.0", "@storybook/icons": "^1.2.5", diff --git a/code/ui/components/package.json b/code/ui/components/package.json index 200b81381b85..eb45b1b3ddcc 100644 --- a/code/ui/components/package.json +++ b/code/ui/components/package.json @@ -61,7 +61,7 @@ "dependencies": { "@radix-ui/react-slot": "^1.0.2", "@storybook/client-logger": "workspace:*", - "@storybook/csf": "^0.1.4", + "@storybook/csf": "^0.1.5", "@storybook/global": "^5.0.0", "@storybook/icons": "^1.2.5", "@storybook/theming": "workspace:*", diff --git a/code/yarn.lock b/code/yarn.lock index 9af4e4c2f3fd..bb19957aa0e4 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5140,7 +5140,7 @@ __metadata: dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.4" + "@storybook/csf": "npm:^0.1.5" "@storybook/global": "npm:^5.0.0" "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" @@ -5408,7 +5408,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.4" + "@storybook/csf": "npm:^0.1.5" "@storybook/docs-tools": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" @@ -5639,7 +5639,7 @@ __metadata: "@babel/core": "npm:^7.23.2" "@babel/preset-env": "npm:^7.23.2" "@babel/types": "npm:^7.23.0" - "@storybook/csf": "npm:^0.1.4" + "@storybook/csf": "npm:^0.1.5" "@storybook/csf-tools": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/types": "workspace:*" @@ -5675,7 +5675,7 @@ __metadata: "@radix-ui/react-scroll-area": "npm:^1.0.5" "@radix-ui/react-slot": "npm:^1.0.2" "@storybook/client-logger": "workspace:*" - "@storybook/csf": "npm:^0.1.4" + "@storybook/csf": "npm:^0.1.5" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" "@storybook/test": "workspace:*" @@ -5777,7 +5777,7 @@ __metadata: "@storybook/channels": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.4" + "@storybook/csf": "npm:^0.1.5" "@storybook/csf-tools": "workspace:*" "@storybook/docs-mdx": "npm:3.0.0" "@storybook/global": "npm:^5.0.0" @@ -5860,7 +5860,7 @@ __metadata: "@babel/parser": "npm:^7.23.0" "@babel/traverse": "npm:^7.23.2" "@babel/types": "npm:^7.23.0" - "@storybook/csf": "npm:^0.1.4" + "@storybook/csf": "npm:^0.1.5" "@storybook/types": "workspace:*" "@types/fs-extra": "npm:^11.0.1" "@types/js-yaml": "npm:^4.0.5" @@ -5881,12 +5881,12 @@ __metadata: languageName: node linkType: hard -"@storybook/csf@npm:^0.1.4": - version: 0.1.4 - resolution: "@storybook/csf@npm:0.1.4" +"@storybook/csf@npm:^0.1.5": + version: 0.1.5 + resolution: "@storybook/csf@npm:0.1.5" dependencies: type-fest: "npm:^2.19.0" - checksum: 10c0/a988e37d5dd3e6fcd44c16b08f4778b1bf1f4b46491d1331afac9366852208b64214425331f1496c3666fd284ad42c14ef8b5f678ade94fe82534d1e631c4ae8 + checksum: 10c0/d7a5514a2e985e4ff0a01716034474f41ac61b9c889e7ff0abc1a4a7941c9e78783b77aa98c6b127fbd1cab0a9e3f90acc15b9e476e95b86865272d3d7b913f8 languageName: node linkType: hard @@ -6058,7 +6058,7 @@ __metadata: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.4" + "@storybook/csf": "npm:^0.1.5" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.5" "@storybook/router": "workspace:*" @@ -6394,7 +6394,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.4" + "@storybook/csf": "npm:^0.1.5" "@storybook/global": "npm:^5.0.0" "@storybook/types": "workspace:*" "@types/qs": "npm:^6.9.5" @@ -6579,7 +6579,7 @@ __metadata: "@storybook/core-events": "workspace:*" "@storybook/core-server": "workspace:*" "@storybook/core-webpack": "workspace:*" - "@storybook/csf": "npm:^0.1.4" + "@storybook/csf": "npm:^0.1.5" "@storybook/csf-plugin": "workspace:*" "@storybook/csf-tools": "workspace:*" "@storybook/docs-tools": "workspace:*" @@ -6734,7 +6734,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/server@workspace:renderers/server" dependencies: - "@storybook/csf": "npm:^0.1.4" + "@storybook/csf": "npm:^0.1.5" "@storybook/csf-tools": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/preview-api": "workspace:*" @@ -6751,7 +6751,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/source-loader@workspace:lib/source-loader" dependencies: - "@storybook/csf": "npm:^0.1.4" + "@storybook/csf": "npm:^0.1.5" "@storybook/types": "workspace:*" estraverse: "npm:^5.2.0" lodash: "npm:^4.17.21" @@ -6930,7 +6930,7 @@ __metadata: resolution: "@storybook/types@workspace:lib/types" dependencies: "@storybook/channels": "workspace:*" - "@storybook/csf": "npm:^0.1.4" + "@storybook/csf": "npm:^0.1.5" "@types/express": "npm:^4.7.0" "@types/fs-extra": "npm:^11.0.1" "@types/node": "npm:^18.0.0" From 5ccf7415990a51524f837347e3f118c88f84e77f Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 29 Apr 2024 08:58:23 +0200 Subject: [PATCH 317/380] dedupe --- code/yarn.lock | 30 ++++-------------------------- 1 file changed, 4 insertions(+), 26 deletions(-) diff --git a/code/yarn.lock b/code/yarn.lock index e1b518ce055d..4ec31236d421 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -548,7 +548,7 @@ __metadata: languageName: node linkType: hard -"@babel/helper-define-polyfill-provider@npm:^0.6.0, @babel/helper-define-polyfill-provider@npm:^0.6.1, @babel/helper-define-polyfill-provider@npm:^0.6.2": +"@babel/helper-define-polyfill-provider@npm:^0.6.1, @babel/helper-define-polyfill-provider@npm:^0.6.2": version: 0.6.2 resolution: "@babel/helper-define-polyfill-provider@npm:0.6.2" dependencies: @@ -10552,7 +10552,7 @@ __metadata: languageName: node linkType: hard -"babel-plugin-polyfill-corejs2@npm:^0.4.10": +"babel-plugin-polyfill-corejs2@npm:^0.4.10, babel-plugin-polyfill-corejs2@npm:^0.4.8": version: 0.4.11 resolution: "babel-plugin-polyfill-corejs2@npm:0.4.11" dependencies: @@ -10565,19 +10565,6 @@ __metadata: languageName: node linkType: hard -"babel-plugin-polyfill-corejs2@npm:^0.4.8": - version: 0.4.9 - resolution: "babel-plugin-polyfill-corejs2@npm:0.4.9" - dependencies: - "@babel/compat-data": "npm:^7.22.6" - "@babel/helper-define-polyfill-provider": "npm:^0.6.0" - semver: "npm:^6.3.1" - peerDependencies: - "@babel/core": ^7.4.0 || ^8.0.0-0 <8.0.0 - checksum: 10c0/2cd47af763eb40aa41f1d6d9cbf1bdd217ff6c28f614b057c0328ee42a4d82cbcdcbc7d081d93e2a2d80446c899f25c3ebec048a63d260ef65a0a364134f71cd - languageName: node - linkType: hard - "babel-plugin-polyfill-corejs3@npm:^0.10.1, babel-plugin-polyfill-corejs3@npm:^0.10.4": version: 0.10.4 resolution: "babel-plugin-polyfill-corejs3@npm:0.10.4" @@ -11232,7 +11219,7 @@ __metadata: languageName: node linkType: hard -"browserslist@npm:^4.21.10, browserslist@npm:^4.21.5, browserslist@npm:^4.22.2, browserslist@npm:^4.22.3, browserslist@npm:^4.23.0": +"browserslist@npm:^4.21.10, browserslist@npm:^4.21.5, browserslist@npm:^4.22.2, browserslist@npm:^4.23.0": version: 4.23.0 resolution: "browserslist@npm:4.23.0" dependencies: @@ -12426,16 +12413,7 @@ __metadata: languageName: node linkType: hard -"core-js-compat@npm:^3.31.0, core-js-compat@npm:^3.34.0": - version: 3.36.0 - resolution: "core-js-compat@npm:3.36.0" - dependencies: - browserslist: "npm:^4.22.3" - checksum: 10c0/5ce2ad0ece8379883c01958e196575abc015692fc0394b8917f132b6b32e5c2bfb2612902c3f98f270cfa2d9d6522c28d36665038f3726796f1f4b436e4f863e - languageName: node - linkType: hard - -"core-js-compat@npm:^3.36.1": +"core-js-compat@npm:^3.31.0, core-js-compat@npm:^3.34.0, core-js-compat@npm:^3.36.1": version: 3.37.0 resolution: "core-js-compat@npm:3.37.0" dependencies: From 1b1af0b39e1e88aaba9fc266eae25b9848dc0dcc Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 29 Apr 2024 10:11:25 +0200 Subject: [PATCH 318/380] throw error when asked to convert CSF2 --- .../duplicate-story-with-new-name.test.ts | 21 ++++++++++++------- .../duplicate-story-with-new-name.ts | 5 +++++ .../mocks/csf-variances.stories.tsx | 3 --- .../unsupported-csf-variances.stories.tsx | 19 +++++++++++++++++ .../update-args-in-csf-file.test.ts | 13 ++++++++++++ .../save-story/update-args-in-csf-file.ts | 5 +++++ 6 files changed, 56 insertions(+), 10 deletions(-) create mode 100644 code/lib/core-server/src/utils/save-story/mocks/unsupported-csf-variances.stories.tsx diff --git a/code/lib/core-server/src/utils/save-story/duplicate-story-with-new-name.test.ts b/code/lib/core-server/src/utils/save-story/duplicate-story-with-new-name.test.ts index 42131e534578..59250060f5d2 100644 --- a/code/lib/core-server/src/utils/save-story/duplicate-story-with-new-name.test.ts +++ b/code/lib/core-server/src/utils/save-story/duplicate-story-with-new-name.test.ts @@ -12,6 +12,7 @@ const makeTitle = (userTitle: string) => userTitle; const FILES = { csfVariances: join(__dirname, 'mocks/csf-variances.stories.tsx'), + unsupportedCsfVariances: join(__dirname, 'mocks/unsupported-csf-variances.stories.tsx'), typescriptConstructs: join(__dirname, 'mocks/typescript-constructs.stories.tsx'), }; @@ -39,9 +40,9 @@ describe('success', () => { // check if the code was updated correctly expect(getDiff(before, after)).toMatchInlineSnapshot(` " ... - - // editing this should fail - export const CSF2 = () => ; + canvasElement.style.backgroundColor = "red"; + }, + } satisfies Story; + export const EmptyDuplicated = {} satisfies Story; + export const EmptyWithCommentDuplicated = {} satisfies Story; @@ -70,13 +71,19 @@ describe('success', () => { + canvasElement.style.backgroundColor = "red"; + }, + } satisfies Story; - + - + export const CSF2Duplicated = () => ( - + - + ); + " `); }); + test('Unsupported CSF Variances', async () => { + const CSF = await readCsf(FILES.unsupportedCsfVariances, { makeTitle }); + + const parsed = CSF.parse(); + const names = Object.keys(parsed._stories); + + names.forEach((name) => { + expect(() => duplicateStoryWithNewName(parsed, name, name + 'Duplicated')).toThrow(); + }); + }); test('Typescript Constructs', async () => { const before = await format(await readFile(FILES.typescriptConstructs, 'utf-8'), { parser: 'typescript', diff --git a/code/lib/core-server/src/utils/save-story/duplicate-story-with-new-name.ts b/code/lib/core-server/src/utils/save-story/duplicate-story-with-new-name.ts index 05dae1d39e38..41584283faaa 100644 --- a/code/lib/core-server/src/utils/save-story/duplicate-story-with-new-name.ts +++ b/code/lib/core-server/src/utils/save-story/duplicate-story-with-new-name.ts @@ -35,6 +35,11 @@ export const duplicateStoryWithNewName = (csfFile: In, storyName: string, newSto noScope: true, }); + // detect CSF2 and throw + if (t.isArrowFunctionExpression(cloned.init) || t.isCallExpression(cloned.init)) { + throw new Error(`CSF2 is not supported`); + } + traverse.default(csfFile._ast, { Program(path) { path.pushContainer( diff --git a/code/lib/core-server/src/utils/save-story/mocks/csf-variances.stories.tsx b/code/lib/core-server/src/utils/save-story/mocks/csf-variances.stories.tsx index e8eedcd3bccc..9fcbc4bd4df3 100644 --- a/code/lib/core-server/src/utils/save-story/mocks/csf-variances.stories.tsx +++ b/code/lib/core-server/src/utils/save-story/mocks/csf-variances.stories.tsx @@ -71,6 +71,3 @@ export const HasPlayFunction = { canvasElement.style.backgroundColor = 'red'; }, } satisfies Story; - -// editing this should fail -export const CSF2 = () => ; diff --git a/code/lib/core-server/src/utils/save-story/mocks/unsupported-csf-variances.stories.tsx b/code/lib/core-server/src/utils/save-story/mocks/unsupported-csf-variances.stories.tsx new file mode 100644 index 000000000000..b86095381faa --- /dev/null +++ b/code/lib/core-server/src/utils/save-story/mocks/unsupported-csf-variances.stories.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import type { FC } from 'react'; +import type { Meta } from '@storybook/react'; + +export default { + title: 'MyComponent', + args: { + initial: 'foo', + }, +} satisfies Meta; + +// dummy component +const MyComponent: FC<{ absolute: boolean; bordered: boolean; initial: string }> = (props) => ( + 
{JSON.stringify(props)}
+); + +export const CSF2 = () => ; + +export const CSF2b = CSF2.bind({}); diff --git a/code/lib/core-server/src/utils/save-story/update-args-in-csf-file.test.ts b/code/lib/core-server/src/utils/save-story/update-args-in-csf-file.test.ts index bcaee0576e92..8f0f2fb6b737 100644 --- a/code/lib/core-server/src/utils/save-story/update-args-in-csf-file.test.ts +++ b/code/lib/core-server/src/utils/save-story/update-args-in-csf-file.test.ts @@ -13,6 +13,7 @@ const makeTitle = (userTitle: string) => userTitle; const FILES = { typescriptConstructs: join(__dirname, 'mocks/typescript-constructs.stories.tsx'), csfVariances: join(__dirname, 'mocks/csf-variances.stories.tsx'), + unsupportedCsfVariances: join(__dirname, 'mocks/unsupported-csf-variances.stories.tsx'), exportVariances: join(__dirname, 'mocks/export-variances.stories.tsx'), dataVariances: join(__dirname, 'mocks/data-variances.stories.tsx'), }; @@ -91,6 +92,18 @@ describe('success', () => { " `); }); + test('Unsupported CSF Variances', async () => { + const newArgs = { bordered: true, initial: 'test1' }; + + const CSF = await readCsf(FILES.unsupportedCsfVariances, { makeTitle }); + const parsed = CSF.parse(); + const names = Object.keys(parsed._stories); + const nodes = names.map((name) => CSF.getStoryExport(name)); + + nodes.forEach((node) => { + expect(() => updateArgsInCsfFile(node, newArgs)).rejects.toThrowError(); + }); + }); test('CSF Variances', async () => { const newArgs = { bordered: true, initial: 'test1' }; diff --git a/code/lib/core-server/src/utils/save-story/update-args-in-csf-file.ts b/code/lib/core-server/src/utils/save-story/update-args-in-csf-file.ts index d51ba1ad73d9..9b95114e7537 100644 --- a/code/lib/core-server/src/utils/save-story/update-args-in-csf-file.ts +++ b/code/lib/core-server/src/utils/save-story/update-args-in-csf-file.ts @@ -10,6 +10,11 @@ export const updateArgsInCsfFile = async (node: t.Node, input: Record { From 8841ef7182cf38bf582ad57dc1e4e1ce41c29f16 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 29 Apr 2024 10:18:32 +0200 Subject: [PATCH 319/380] only explicitly support empty function when save-from-controls is used --- code/addons/controls/package.json | 1 - code/addons/controls/src/manager.tsx | 9 +++------ .../core-server/src/utils/save-story/save-story.ts | 11 +++++------ code/yarn.lock | 1 - 4 files changed, 8 insertions(+), 14 deletions(-) diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json index 5c9bcd56f1ee..482e56e196ee 100644 --- a/code/addons/controls/package.json +++ b/code/addons/controls/package.json @@ -54,7 +54,6 @@ "@storybook/blocks": "workspace:*", "dequal": "^2.0.2", "lodash": "^4.17.21", - "telejson": "^7.2.0", "ts-dedent": "^2.0.0" }, "devDependencies": { diff --git a/code/addons/controls/src/manager.tsx b/code/addons/controls/src/manager.tsx index d7195cd544e1..2601b2787ec1 100644 --- a/code/addons/controls/src/manager.tsx +++ b/code/addons/controls/src/manager.tsx @@ -1,4 +1,3 @@ -import { stringify } from 'telejson'; import React from 'react'; import { dequal as deepEqual } from 'dequal'; import { AddonPanel, Badge, Spaced } from '@storybook/components'; @@ -32,11 +31,9 @@ function Title() { } const stringifyArgs = (args: Record) => - stringify(args, { - allowDate: true, - allowFunction: true, - allowUndefined: true, - allowSymbol: true, + JSON.stringify(args, (_, value) => { + if (typeof value === 'function') return '__sb_empty_function_arg__'; + return value; }); addons.register(ADDON_ID, (api) => { diff --git a/code/lib/core-server/src/utils/save-story/save-story.ts b/code/lib/core-server/src/utils/save-story/save-story.ts index 506be3147439..0077e86b2816 100644 --- a/code/lib/core-server/src/utils/save-story/save-story.ts +++ b/code/lib/core-server/src/utils/save-story/save-story.ts @@ -1,6 +1,5 @@ /* eslint-disable no-underscore-dangle */ import fs from 'node:fs/promises'; -import { parse } from 'telejson'; import type { Channel } from '@storybook/channels'; import type { RequestData, @@ -21,11 +20,11 @@ import { duplicateStoryWithNewName } from './duplicate-story-with-new-name'; import { formatFileContent } from '@storybook/core-common'; const parseArgs = (args: string): Record => - parse(args, { - allowDate: true, - allowFunction: true, - allowUndefined: true, - allowSymbol: true, + JSON.parse(args, (_, value) => { + if (value === '__sb_empty_function_arg__') { + return () => {}; + } + return value; }); // Removes extra newlines between story properties. See https://github.com/benjamn/recast/issues/242 diff --git a/code/yarn.lock b/code/yarn.lock index 4ec31236d421..dc4aa34818a1 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5175,7 +5175,6 @@ __metadata: lodash: "npm:^4.17.21" react: "npm:^18.2.0" react-dom: "npm:^18.2.0" - telejson: "npm:^7.2.0" ts-dedent: "npm:^2.0.0" languageName: unknown linkType: soft From b336534dd79a81e886796bbaec8e1945ab456091 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 29 Apr 2024 10:44:00 +0200 Subject: [PATCH 320/380] improve mobile layout --- code/addons/controls/src/SaveStory.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/code/addons/controls/src/SaveStory.tsx b/code/addons/controls/src/SaveStory.tsx index 614e8364ff74..8f72826c6460 100644 --- a/code/addons/controls/src/SaveStory.tsx +++ b/code/addons/controls/src/SaveStory.tsx @@ -43,6 +43,11 @@ const Bar = styled(BaseBar)(({ theme }) => ({ background: theme.background.bar, borderTop: `1px solid ${theme.appBorderColor}`, fontSize: theme.typography.size.s2, + + '@container (max-width: 799px)': { + flexDirection: 'row', + justifyContent: 'flex-end', + }, })); const Info = styled.div({ From 2a468275af51c3046c9351547872debe8d01169a Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 29 Apr 2024 12:28:18 +0200 Subject: [PATCH 321/380] Add arrow navigation to the Save From Controls Modal search results --- .../sidebar/FIleSearchList.utils.tsx | 118 ++++++++++++++++++ .../src/components/sidebar/FileList.tsx | 2 +- .../src/components/sidebar/FileSearchList.tsx | 29 +++-- 3 files changed, 136 insertions(+), 13 deletions(-) create mode 100644 code/ui/manager/src/components/sidebar/FIleSearchList.utils.tsx diff --git a/code/ui/manager/src/components/sidebar/FIleSearchList.utils.tsx b/code/ui/manager/src/components/sidebar/FIleSearchList.utils.tsx new file mode 100644 index 000000000000..83e2dac00f83 --- /dev/null +++ b/code/ui/manager/src/components/sidebar/FIleSearchList.utils.tsx @@ -0,0 +1,118 @@ +import type { Virtualizer } from '@tanstack/react-virtual'; +import { useEffect } from 'react'; +import { flushSync } from 'react-dom'; + +interface UseArrowKeyNavigationProps { + rowVirtualizer: Virtualizer; + parentRef: React.MutableRefObject; + selectedItem: number | null; +} + +/** + * Hook to navigate through the list of items and subitems using the arrow keys + */ +export const useArrowKeyNavigation = ({ + parentRef, + rowVirtualizer, + selectedItem, +}: UseArrowKeyNavigationProps) => { + useEffect(() => { + const handleArrowKeys = (event: KeyboardEvent) => { + if (!parentRef.current) { + return; + } + + const maxIndex = rowVirtualizer.options.count; + const activeElement = document.activeElement; + const rowIndex = parseInt(activeElement.getAttribute('data-index') || '-1', 10); + const isActiveElementInput = activeElement.tagName === 'INPUT'; + + const getFirstElement = () => + document.querySelector('[data-index="0"]') as HTMLElement | null; + const getLastElement = () => + document.querySelector(`[data-index="${maxIndex - 1}"]`) as HTMLElement | null; + + if (event.code === 'ArrowDown' && activeElement) { + event.stopPropagation(); + + // If the search input is focused, focus the first element + if (isActiveElementInput) { + getFirstElement()?.focus(); + return; + } + + // if the last element is focused, focus the first element + if (rowIndex === maxIndex - 1) { + flushSync(() => { + rowVirtualizer.scrollToIndex(0, { align: 'start' }); + }); + setTimeout(() => { + getFirstElement()?.focus(); + }, 100); + return; + } + + // if the focus is on an selected element, focus the first element in the sublist + if (selectedItem === rowIndex) { + const firstSubListItem = document.querySelector( + `[data-index-position="${selectedItem}_first"]` + ) as HTMLElement; + firstSubListItem?.focus(); + return; + } + + // if the focus is on the last element on a sublist, focus the next parent list element + if (selectedItem !== null) { + const isLastElementSelected = activeElement + .getAttribute('data-index-position') + ?.includes('last'); + if (isLastElementSelected) { + const nextElement = document.querySelector( + `[data-index="${selectedItem + 1}"]` + ) as HTMLElement; + nextElement?.focus(); + return; + } + } + + const nextElement = activeElement.nextElementSibling as HTMLElement; + nextElement?.focus(); + } + + if (event.code === 'ArrowUp' && activeElement) { + if (isActiveElementInput) { + flushSync(() => { + rowVirtualizer.scrollToIndex(maxIndex - 1, { align: 'start' }); + }); + setTimeout(() => { + getLastElement()?.focus(); + }, 100); + return; + } + + // if the focus is on the first element on a sublist, focus the previous parent list element + if (selectedItem !== null) { + const isLastElementSelected = activeElement + .getAttribute('data-index-position') + ?.includes('first'); + if (isLastElementSelected) { + const prevElement = document.querySelector( + `[data-index="${selectedItem}"]` + ) as HTMLElement; + prevElement?.focus(); + return; + } + } + + const previousElement = activeElement.previousElementSibling as HTMLElement; + previousElement?.focus(); + } + }; + // listener for arrow keys to select the next/previous element by using the current active element as base + document.addEventListener('keydown', handleArrowKeys, { capture: true }); + + return () => { + document.removeEventListener('keydown', handleArrowKeys, { capture: true }); + }; + }, [rowVirtualizer, selectedItem, parentRef]); +}; diff --git a/code/ui/manager/src/components/sidebar/FileList.tsx b/code/ui/manager/src/components/sidebar/FileList.tsx index e5087a132639..d56cfc096720 100644 --- a/code/ui/manager/src/components/sidebar/FileList.tsx +++ b/code/ui/manager/src/components/sidebar/FileList.tsx @@ -31,7 +31,7 @@ export const FileListLi = styled('li')(({ theme }) => ({ ':focus-visible': { outline: 'none', - '> div': { + '.file-list-item': { borderRadius: '4px', background: theme.base === 'dark' ? 'rgba(255,255,255,.1)' : theme.color.mediumlight, diff --git a/code/ui/manager/src/components/sidebar/FileSearchList.tsx b/code/ui/manager/src/components/sidebar/FileSearchList.tsx index 8765d3b3da87..381e2812d276 100644 --- a/code/ui/manager/src/components/sidebar/FileSearchList.tsx +++ b/code/ui/manager/src/components/sidebar/FileSearchList.tsx @@ -1,4 +1,4 @@ -import React, { memo, useCallback, useLayoutEffect, useMemo, useState } from 'react'; +import React, { memo, useCallback, useMemo, useState } from 'react'; import { ChevronDownIcon, ChevronRightIcon, ComponentIcon } from '@storybook/icons'; import { styled } from '@storybook/theming'; import { FileSearchListLoadingSkeleton } from './FileSearchListSkeleton'; @@ -29,6 +29,7 @@ import type { ResponseData, } from '@storybook/core-events'; import { WithTooltip, TooltipNote } from '@storybook/components'; +import { useArrowKeyNavigation } from './FIleSearchList.utils'; export type SearchResult = ResponseData['payload']['files'][0]; @@ -80,7 +81,7 @@ export const FileSearchList = memo(function FileSearchList({ errorItemId, }: FileSearchListProps) { const [selectedItem, setSelectedItem] = useState(null); - const parentRef = React.useRef(); + const parentRef = React.useRef(); const sortedSearchResults = useMemo(() => { // search results with no exports should be at the end of the list @@ -107,8 +108,10 @@ export const FileSearchList = memo(function FileSearchList({ }); }, [searchResults]); + const count = searchResults?.length || 0; + const rowVirtualizer = useVirtualizer({ - count: searchResults?.length || 0, + count, getScrollElement: () => parentRef.current, paddingStart: 16, paddingEnd: 40, @@ -116,13 +119,7 @@ export const FileSearchList = memo(function FileSearchList({ overscan: 2, }); - useLayoutEffect(() => { - if (selectedItem !== null) { - rowVirtualizer.scrollToIndex(selectedItem, { - align: 'start', - }); - } - }, [rowVirtualizer, selectedItem]); + useArrowKeyNavigation({ rowVirtualizer, parentRef, selectedItem }); const handleFileItemSelection = useCallback( ({ virtualItem, searchResult, itemId }: FileItemSelectionPayload) => { @@ -172,6 +169,7 @@ export const FileSearchList = memo(function FileSearchList({ id={`file-list-item-wrapper-${virtualItem.index}`} > {searchResult.exportedComponents?.map((component, itemExportId) => { const itemExportError = errorItemId === `${searchResult.filepath}_${itemExportId}`; + const position = + itemExportId === 0 + ? 'first' + : itemExportId === searchResult.exportedComponents.length - 1 + ? 'last' + : 'middle'; + return ( { @@ -263,8 +269,7 @@ export const FileSearchList = memo(function FileSearchList({

We could not find any file with that name

- You may want to try using different keywords, checking for typos or adjusting your - filters. + You may want to try using different keywords, check for typos, and adjust your filters ); From 88fdc096402e4b0ef5db027dfd3359e934faec77 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 29 Apr 2024 12:39:02 +0200 Subject: [PATCH 322/380] Enhance error messaging for the user when updating CSF2 stories --- .../src/utils/save-story/duplicate-story-with-new-name.ts | 5 +++-- code/lib/core-server/src/utils/save-story/save-story.ts | 3 +-- .../src/utils/save-story/update-args-in-csf-file.ts | 3 ++- code/lib/core-server/src/utils/save-story/utils.ts | 1 + 4 files changed, 7 insertions(+), 5 deletions(-) create mode 100644 code/lib/core-server/src/utils/save-story/utils.ts diff --git a/code/lib/core-server/src/utils/save-story/duplicate-story-with-new-name.ts b/code/lib/core-server/src/utils/save-story/duplicate-story-with-new-name.ts index 41584283faaa..3ab01043752d 100644 --- a/code/lib/core-server/src/utils/save-story/duplicate-story-with-new-name.ts +++ b/code/lib/core-server/src/utils/save-story/duplicate-story-with-new-name.ts @@ -2,6 +2,7 @@ import type { CsfFile } from '@storybook/csf-tools'; import * as traverse from '@babel/traverse'; import * as t from '@babel/types'; +import { SaveStoryError } from './utils'; type In = ReturnType; @@ -10,7 +11,7 @@ export const duplicateStoryWithNewName = (csfFile: In, storyName: string, newSto const cloned = t.cloneNode(node) as t.VariableDeclarator; if (!cloned) { - throw new Error(`cannot clone Node`); + throw new SaveStoryError(`cannot clone Node`); } let found = false; @@ -37,7 +38,7 @@ export const duplicateStoryWithNewName = (csfFile: In, storyName: string, newSto // detect CSF2 and throw if (t.isArrowFunctionExpression(cloned.init) || t.isCallExpression(cloned.init)) { - throw new Error(`CSF2 is not supported`); + throw new SaveStoryError(`Creating a new story based on a CSF2 story is not supported`); } traverse.default(csfFile._ast, { diff --git a/code/lib/core-server/src/utils/save-story/save-story.ts b/code/lib/core-server/src/utils/save-story/save-story.ts index 0077e86b2816..8c2a69af9e4e 100644 --- a/code/lib/core-server/src/utils/save-story/save-story.ts +++ b/code/lib/core-server/src/utils/save-story/save-story.ts @@ -18,6 +18,7 @@ import { basename, join } from 'path'; import { updateArgsInCsfFile } from './update-args-in-csf-file'; import { duplicateStoryWithNewName } from './duplicate-story-with-new-name'; import { formatFileContent } from '@storybook/core-common'; +import { SaveStoryError } from './utils'; const parseArgs = (args: string): Record => JSON.parse(args, (_, value) => { @@ -44,8 +45,6 @@ const removeExtraNewlines = (code: string, name: string) => { : code; }; -class SaveStoryError extends Error {} - export function initializeSaveStory(channel: Channel, options: Options, coreConfig: CoreConfig) { channel.on(SAVE_STORY_REQUEST, async ({ id, payload }: RequestData) => { const { csfId, importPath, args, name } = payload; diff --git a/code/lib/core-server/src/utils/save-story/update-args-in-csf-file.ts b/code/lib/core-server/src/utils/save-story/update-args-in-csf-file.ts index 9b95114e7537..f32db42f7978 100644 --- a/code/lib/core-server/src/utils/save-story/update-args-in-csf-file.ts +++ b/code/lib/core-server/src/utils/save-story/update-args-in-csf-file.ts @@ -1,6 +1,7 @@ import * as t from '@babel/types'; import * as traverse from '@babel/traverse'; import { valueToAST } from './valueToAST'; +import { SaveStoryError } from './utils'; export const updateArgsInCsfFile = async (node: t.Node, input: Record) => { let found = false; @@ -12,7 +13,7 @@ export const updateArgsInCsfFile = async (node: t.Node, input: Record Date: Mon, 29 Apr 2024 12:54:19 +0200 Subject: [PATCH 323/380] Maintain cursor position in FileSearchModal input field while typing --- .../manager/src/components/sidebar/FileSearchModal.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/code/ui/manager/src/components/sidebar/FileSearchModal.tsx b/code/ui/manager/src/components/sidebar/FileSearchModal.tsx index 4fb0717c4c6b..bfc007e75c0e 100644 --- a/code/ui/manager/src/components/sidebar/FileSearchModal.tsx +++ b/code/ui/manager/src/components/sidebar/FileSearchModal.tsx @@ -139,6 +139,9 @@ export const FileSearchModal = ({ const [modalContentRef, modalContentDimensions] = useMeasure(); const [modalMaxHeight, setModalMaxHeight] = useState(modalContentDimensions.height); const [, startTransition] = useTransition(); + // This internal state is used to maintain cursor position when the user types in the search input + // See: https://github.com/facebook/react/issues/5386#issuecomment-334001976 + const [searchInputValue, setSearchInputValue] = useState(fileSearchQuery); useEffect(() => { if (modalMaxHeight < modalContentDimensions.height) { @@ -175,10 +178,12 @@ export const FileSearchModal = ({ type="search" required autoFocus - value={fileSearchQuery} + value={searchInputValue} onChange={(e) => { + const newValue = (e.target as HTMLInputElement).value; + setSearchInputValue(newValue); startTransition(() => { - setFileSearchQuery((e.target as HTMLInputElement).value); + setFileSearchQuery(newValue); }); }} /> From d9851f72b11de2d4f664993e5763437b6f7e9ea9 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 29 Apr 2024 13:30:44 +0200 Subject: [PATCH 324/380] Improve required args extraction by taking account controls type --- .../sidebar/FileSearchModal.utils.test.tsx | 46 +++++++++++++++++-- .../sidebar/FileSearchModal.utils.tsx | 20 ++++++++ 2 files changed, 63 insertions(+), 3 deletions(-) diff --git a/code/ui/manager/src/components/sidebar/FileSearchModal.utils.test.tsx b/code/ui/manager/src/components/sidebar/FileSearchModal.utils.test.tsx index aa7481952ba7..d44fc59cae75 100644 --- a/code/ui/manager/src/components/sidebar/FileSearchModal.utils.test.tsx +++ b/code/ui/manager/src/components/sidebar/FileSearchModal.utils.test.tsx @@ -52,15 +52,55 @@ describe('FileSearchModal.utils', () => { enum: { type: { name: 'union', required: false, value: [] }, }, + otherObject: { + type: { name: 'other', required: true, value: '' }, + control: { type: 'object' }, + }, + otherInlineRadio: { + type: { name: 'other', required: true, value: '' }, + control: { type: 'inline-radio', options: ['a', 'b', 'c'] }, + }, + otherRadio: { + type: { name: 'other', required: true, value: '' }, + control: { type: 'radio', options: ['d', 'e', 'f'] }, + }, + otherInlineCheck: { + type: { name: 'other', required: true, value: '' }, + control: { type: 'inline-check', options: ['g', 'h', 'i'] }, + }, + otherCheck: { + type: { name: 'other', required: true, value: '' }, + control: { type: 'check', options: ['j', 'k', 'l'] }, + }, + otherSelect: { + type: { name: 'other', required: true, value: '' }, + control: { type: 'select', options: ['m', 'n', 'o'] }, + }, + otherMultiSelect: { + type: { name: 'other', required: true, value: '' }, + control: { type: 'multi-select', options: ['p', 'q', 'r'] }, + }, + otherColor: { + type: { name: 'other', required: true, value: '' }, + control: { type: 'color' }, + }, } as ArgTypes; expect(extractSeededRequiredArgs(argTypes)).toEqual({ - stringRequired: 'stringRequired', - numberRequired: 0, booleanRequired: true, + enumRequired: 'a', functionRequired: expect.any(Function), + numberRequired: 0, + otherCheck: 'j', + otherColor: '#000000', + otherInlineCheck: 'g', + otherInlineRadio: 'a', + otherMultiSelect: 'p', + otherObject: {}, + otherRadio: 'd', + otherSelect: 'm', + stringRequired: 'stringRequired', unionRequired: 'a', - enumRequired: 'a', }); }); }); diff --git a/code/ui/manager/src/components/sidebar/FileSearchModal.utils.tsx b/code/ui/manager/src/components/sidebar/FileSearchModal.utils.tsx index 5dd02ba67806..849e780fb466 100644 --- a/code/ui/manager/src/components/sidebar/FileSearchModal.utils.tsx +++ b/code/ui/manager/src/components/sidebar/FileSearchModal.utils.tsx @@ -29,6 +29,26 @@ export function extractSeededRequiredArgs(argTypes: ArgTypes) { acc[key] = () => {}; break; default: + if (typeof argType.control === 'object' && 'type' in argType.control) { + switch (argType.control.type) { + case 'object': + acc[key] = {}; + break; + case 'inline-radio': + case 'radio': + case 'inline-check': + case 'check': + case 'select': + case 'multi-select': + acc[key] = argType.control.options?.[0]; + break; + case 'color': + acc[key] = '#000000'; + break; + default: + break; + } + } break; } } From 6d5ce326684b861b6292818b5d9cf3a017944ddc Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 29 Apr 2024 15:25:29 +0200 Subject: [PATCH 325/380] fix linting --- code/builders/builder-vite/src/assetsInclude.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/builders/builder-vite/src/assetsInclude.ts b/code/builders/builder-vite/src/assetsInclude.ts index 67373d8552d8..b71388ea2d17 100644 --- a/code/builders/builder-vite/src/assetsInclude.ts +++ b/code/builders/builder-vite/src/assetsInclude.ts @@ -1,4 +1,4 @@ -import { InlineConfig as ViteInlineConfig } from 'vite'; +import type { InlineConfig as ViteInlineConfig } from 'vite'; export function getAssetsInclude(config: ViteInlineConfig, newPath: string[]): (string | RegExp)[] { const { assetsInclude } = config; From e9d56c417d6358ad7819f8d784d0e55c1976aad7 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 29 Apr 2024 15:29:01 +0200 Subject: [PATCH 326/380] dedupe --- code/yarn.lock | 49 +++++++++++++++++++++---------------------------- 1 file changed, 21 insertions(+), 28 deletions(-) diff --git a/code/yarn.lock b/code/yarn.lock index 9af4e4c2f3fd..da594cd541e0 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -1996,7 +1996,7 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:7.24.0, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.22.6, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2": +"@babel/runtime@npm:7.24.0": version: 7.24.0 resolution: "@babel/runtime@npm:7.24.0" dependencies: @@ -2014,7 +2014,7 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:^7.22.15": +"@babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.13, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.22.15, @babel/runtime@npm:^7.22.6, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2": version: 7.24.4 resolution: "@babel/runtime@npm:7.24.4" dependencies: @@ -22982,7 +22982,7 @@ __metadata: languageName: node linkType: hard -"postcss@npm:8.4.35, postcss@npm:^8.2.14, postcss@npm:^8.4.23, postcss@npm:^8.4.27, postcss@npm:^8.4.32, postcss@npm:^8.4.33, postcss@npm:^8.4.35": +"postcss@npm:8.4.35": version: 8.4.35 resolution: "postcss@npm:8.4.35" dependencies: @@ -23003,7 +23003,7 @@ __metadata: languageName: node linkType: hard -"postcss@npm:^8.4.38": +"postcss@npm:^8.2.14, postcss@npm:^8.4.23, postcss@npm:^8.4.27, postcss@npm:^8.4.32, postcss@npm:^8.4.33, postcss@npm:^8.4.35, postcss@npm:^8.4.38": version: 8.4.38 resolution: "postcss@npm:8.4.38" dependencies: @@ -25961,14 +25961,7 @@ __metadata: languageName: node linkType: hard -"source-map-js@npm:>=0.6.2 <2.0.0, source-map-js@npm:^1.0.1, source-map-js@npm:^1.0.2": - version: 1.0.2 - resolution: "source-map-js@npm:1.0.2" - checksum: 10c0/32f2dfd1e9b7168f9a9715eb1b4e21905850f3b50cf02cf476e47e4eebe8e6b762b63a64357896aa29b37e24922b4282df0f492e0d2ace572b43d15525976ff8 - languageName: node - linkType: hard - -"source-map-js@npm:^1.2.0": +"source-map-js@npm:>=0.6.2 <2.0.0, source-map-js@npm:^1.0.1, source-map-js@npm:^1.0.2, source-map-js@npm:^1.2.0": version: 1.2.0 resolution: "source-map-js@npm:1.2.0" checksum: 10c0/7e5f896ac10a3a50fe2898e5009c58ff0dc102dcb056ed27a354623a0ece8954d4b2649e1a1b2b52ef2e161d26f8859c7710350930751640e71e374fe2d321a4 @@ -27658,23 +27651,23 @@ __metadata: languageName: node linkType: hard -"typescript@npm:^5.0.3, typescript@npm:^5.3.2, typescript@npm:~5.3.2": - version: 5.3.3 - resolution: "typescript@npm:5.3.3" +"typescript@npm:^5.0.3, typescript@npm:^5.3.2, typescript@npm:^5.4.3": + version: 5.4.3 + resolution: "typescript@npm:5.4.3" bin: tsc: bin/tsc tsserver: bin/tsserver - checksum: 10c0/e33cef99d82573624fc0f854a2980322714986bc35b9cb4d1ce736ed182aeab78e2cb32b385efa493b2a976ef52c53e20d6c6918312353a91850e2b76f1ea44f + checksum: 10c0/22443a8760c3668e256c0b34b6b45c359ef6cecc10c42558806177a7d500ab1a7d7aac1f976d712e26989ddf6731d2fbdd3212b7c73290a45127c1c43ba2005a languageName: node linkType: hard -"typescript@npm:^5.4.3": - version: 5.4.3 - resolution: "typescript@npm:5.4.3" +"typescript@npm:~5.3.2": + version: 5.3.3 + resolution: "typescript@npm:5.3.3" bin: tsc: bin/tsc tsserver: bin/tsserver - checksum: 10c0/22443a8760c3668e256c0b34b6b45c359ef6cecc10c42558806177a7d500ab1a7d7aac1f976d712e26989ddf6731d2fbdd3212b7c73290a45127c1c43ba2005a + checksum: 10c0/e33cef99d82573624fc0f854a2980322714986bc35b9cb4d1ce736ed182aeab78e2cb32b385efa493b2a976ef52c53e20d6c6918312353a91850e2b76f1ea44f languageName: node linkType: hard @@ -27688,23 +27681,23 @@ __metadata: languageName: node linkType: hard -"typescript@patch:typescript@npm%3A^5.0.3#optional!builtin, typescript@patch:typescript@npm%3A^5.3.2#optional!builtin, typescript@patch:typescript@npm%3A~5.3.2#optional!builtin": - version: 5.3.3 - resolution: "typescript@patch:typescript@npm%3A5.3.3#optional!builtin::version=5.3.3&hash=e012d7" +"typescript@patch:typescript@npm%3A^5.0.3#optional!builtin, typescript@patch:typescript@npm%3A^5.3.2#optional!builtin, typescript@patch:typescript@npm%3A^5.4.3#optional!builtin": + version: 5.4.3 + resolution: "typescript@patch:typescript@npm%3A5.4.3#optional!builtin::version=5.4.3&hash=5adc0c" bin: tsc: bin/tsc tsserver: bin/tsserver - checksum: 10c0/1d0a5f4ce496c42caa9a30e659c467c5686eae15d54b027ee7866744952547f1be1262f2d40de911618c242b510029d51d43ff605dba8fb740ec85ca2d3f9500 + checksum: 10c0/6e51f8b7e6ec55b897b9e56b67e864fe8f44e30f4a14357aad5dc0f7432db2f01efc0522df0b6c36d361c51f2dc3dcac5c832efd96a404cfabf884e915d38828 languageName: node linkType: hard -"typescript@patch:typescript@npm%3A^5.4.3#optional!builtin": - version: 5.4.3 - resolution: "typescript@patch:typescript@npm%3A5.4.3#optional!builtin::version=5.4.3&hash=5adc0c" +"typescript@patch:typescript@npm%3A~5.3.2#optional!builtin": + version: 5.3.3 + resolution: "typescript@patch:typescript@npm%3A5.3.3#optional!builtin::version=5.3.3&hash=e012d7" bin: tsc: bin/tsc tsserver: bin/tsserver - checksum: 10c0/6e51f8b7e6ec55b897b9e56b67e864fe8f44e30f4a14357aad5dc0f7432db2f01efc0522df0b6c36d361c51f2dc3dcac5c832efd96a404cfabf884e915d38828 + checksum: 10c0/1d0a5f4ce496c42caa9a30e659c467c5686eae15d54b027ee7866744952547f1be1262f2d40de911618c242b510029d51d43ff605dba8fb740ec85ca2d3f9500 languageName: node linkType: hard From 7cb3ecf353f029f114ef29ad9f7f19c9c1e78d45 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 29 Apr 2024 15:29:19 +0200 Subject: [PATCH 327/380] Enhance extractSeededRequiredArgs function --- .../sidebar/FileSearchModal.utils.test.tsx | 76 +++++++----- .../sidebar/FileSearchModal.utils.tsx | 115 +++++++++++------- 2 files changed, 121 insertions(+), 70 deletions(-) diff --git a/code/ui/manager/src/components/sidebar/FileSearchModal.utils.test.tsx b/code/ui/manager/src/components/sidebar/FileSearchModal.utils.test.tsx index d44fc59cae75..d5ca221d039c 100644 --- a/code/ui/manager/src/components/sidebar/FileSearchModal.utils.test.tsx +++ b/code/ui/manager/src/components/sidebar/FileSearchModal.utils.test.tsx @@ -6,42 +6,39 @@ describe('FileSearchModal.utils', () => { describe('extractSeededRequiredArgs', () => { it('should extract seeded required args', () => { const argTypes = { - stringRequired: { + string: { type: { name: 'string', required: true }, }, - string: { + stringOptional: { type: { name: 'string', required: false }, }, - numberRequired: { - type: { name: 'number', required: true }, - }, number: { - type: { name: 'number', required: false }, - }, - booleanRequired: { - type: { name: 'boolean', required: true }, + type: { name: 'number', required: true }, }, boolean: { - type: { name: 'boolean', required: false }, - }, - functionRequired: { - type: { name: 'function', required: true }, + type: { name: 'boolean', required: true }, }, function: { - type: { name: 'function', required: false }, + type: { name: 'function', required: true }, }, - unionRequired: { + object: { type: { - name: 'union', + name: 'object', required: true, - value: [], + value: { + a: { name: 'string', required: true }, + b: { name: 'number' }, + }, }, - options: ['a', 'b', 'c'], }, union: { - type: { name: 'union', required: false, value: [] }, + type: { + name: 'union', + required: true, + value: [{ name: 'string', required: true }, { name: 'number' }], + }, }, - enumRequired: { + enum: { type: { name: 'enum', required: true, @@ -49,9 +46,6 @@ describe('FileSearchModal.utils', () => { }, options: ['a', 'b', 'c'], }, - enum: { - type: { name: 'union', required: false, value: [] }, - }, otherObject: { type: { name: 'other', required: true, value: '' }, control: { type: 'object' }, @@ -84,13 +78,34 @@ describe('FileSearchModal.utils', () => { type: { name: 'other', required: true, value: '' }, control: { type: 'color' }, }, + intersection: { + type: { + name: 'intersection', + required: true, + value: [ + { + name: 'object', + value: { + a: { name: 'string', required: true }, + b: { name: 'number' }, + }, + }, + ], + }, + }, + tuple: { + type: { + name: 'other', + required: true, + value: 'tuple', + }, + }, } as ArgTypes; expect(extractSeededRequiredArgs(argTypes)).toEqual({ - booleanRequired: true, - enumRequired: 'a', - functionRequired: expect.any(Function), - numberRequired: 0, + boolean: true, + function: expect.any(Function), + number: 0, otherCheck: 'j', otherColor: '#000000', otherInlineCheck: 'g', @@ -99,8 +114,11 @@ describe('FileSearchModal.utils', () => { otherObject: {}, otherRadio: 'd', otherSelect: 'm', - stringRequired: 'stringRequired', - unionRequired: 'a', + string: 'string', + object: { a: 'a' }, + union: 'union', + intersection: { a: 'a' }, + tuple: [], }); }); }); diff --git a/code/ui/manager/src/components/sidebar/FileSearchModal.utils.tsx b/code/ui/manager/src/components/sidebar/FileSearchModal.utils.tsx index 849e780fb466..3b9aacd981e2 100644 --- a/code/ui/manager/src/components/sidebar/FileSearchModal.utils.tsx +++ b/code/ui/manager/src/components/sidebar/FileSearchModal.utils.tsx @@ -1,57 +1,90 @@ -import type { ArgTypes } from '@storybook/csf'; +import type { ArgTypes, SBType } from '@storybook/csf'; + +function setArgType( + type: 'string' | 'number' | 'boolean' | 'symbol' | 'function' | SBType, + obj: Record, + objKey: string | number +) { + if (typeof type === 'string' || !type.required) { + return; + } + + switch (type.name) { + case 'boolean': + obj[objKey] = true; + break; + case 'number': + obj[objKey] = 0; + break; + case 'string': + obj[objKey] = objKey; + break; + case 'array': + obj[objKey] = []; + break; + case 'object': + obj[objKey] = {}; + Object.entries(type.value ?? {}).forEach(([typeKey, typeVal]) => { + setArgType(typeVal, obj[objKey], typeKey); + }); + break; + case 'function': + obj[objKey] = () => {}; + break; + case 'intersection': + if (type.value?.every((v) => v.name === 'object')) { + obj[objKey] = {}; + type.value?.forEach((typeVal) => { + if (typeVal.name === 'object') { + Object.entries(typeVal.value ?? {}).forEach(([typeValKey, typeValVal]) => { + setArgType(typeValVal, obj[objKey], typeValKey); + }); + } + }); + } + break; + case 'union': + if (type.value[0]) { + setArgType(type.value[0], obj, objKey); + } + + case 'other': + if (typeof type.value === 'string' && type.value === 'tuple') { + obj[objKey] = []; + } + break; + default: + break; + } +} export function extractSeededRequiredArgs(argTypes: ArgTypes) { const extractedArgTypes = Object.keys(argTypes).reduce( (acc, key: keyof typeof argTypes) => { const argType = argTypes[key]; - if (typeof argType.type !== 'string' && argType.type.required) { - switch (argType.type.name) { - case 'boolean': - acc[key] = true; - break; - case 'number': - acc[key] = 0; - break; - case 'string': - acc[key] = key; - break; - case 'union': - case 'enum': - acc[key] = argType.options?.[0]; - break; - case 'array': - acc[key] = []; - break; + + if (typeof argType.control === 'object' && 'type' in argType.control) { + switch (argType.control.type) { case 'object': acc[key] = {}; break; - case 'function': - acc[key] = () => {}; + case 'inline-radio': + case 'radio': + case 'inline-check': + case 'check': + case 'select': + case 'multi-select': + acc[key] = argType.control.options?.[0]; + break; + case 'color': + acc[key] = '#000000'; break; default: - if (typeof argType.control === 'object' && 'type' in argType.control) { - switch (argType.control.type) { - case 'object': - acc[key] = {}; - break; - case 'inline-radio': - case 'radio': - case 'inline-check': - case 'check': - case 'select': - case 'multi-select': - acc[key] = argType.control.options?.[0]; - break; - case 'color': - acc[key] = '#000000'; - break; - default: - break; - } - } break; } } + + setArgType(argType.type, acc, key); return acc; }, {} as Record From bc129cb2a76de239a03a14db4b092e51f9fd40d8 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 29 Apr 2024 15:43:08 +0200 Subject: [PATCH 328/380] Fix stringification of function for saving a new story --- .../sidebar/CreateNewStoryFileModal.tsx | 16 ++++------------ 1 file changed, 4 insertions(+), 12 deletions(-) diff --git a/code/ui/manager/src/components/sidebar/CreateNewStoryFileModal.tsx b/code/ui/manager/src/components/sidebar/CreateNewStoryFileModal.tsx index b68ef9336c57..3d5cd4ea7aa8 100644 --- a/code/ui/manager/src/components/sidebar/CreateNewStoryFileModal.tsx +++ b/code/ui/manager/src/components/sidebar/CreateNewStoryFileModal.tsx @@ -1,6 +1,5 @@ import React, { useCallback, useDeferredValue, useEffect, useRef, useState } from 'react'; import { AlertIcon, CheckIcon } from '@storybook/icons'; -import { stringify } from 'telejson'; import type { ArgTypesRequestPayload, ArgTypesResponsePayload, @@ -36,11 +35,9 @@ interface CreateNewStoryFileModalProps { } const stringifyArgs = (args: Record) => - stringify(args, { - allowDate: true, - allowFunction: true, - allowUndefined: true, - allowSymbol: true, + JSON.stringify(args, (_, value) => { + if (typeof value === 'function') return '__sb_empty_function_arg__'; + return value; }); export const CreateNewStoryFileModal = ({ open, onOpenChange }: CreateNewStoryFileModalProps) => { @@ -184,12 +181,7 @@ export const CreateNewStoryFileModal = ({ open, onOpenChange }: CreateNewStoryFi setError({ selectedItemId: selectedItemId, error: e?.message }); } }, - [ - api?.selectStory, - handleSuccessfullyCreatedStory, - handleFileSearch, - handleErrorWhenCreatingStory, - ] + [api?.selectStory, handleSuccessfullyCreatedStory, handleFileSearch] ); useEffect(() => { From eeabdb6c7142ebc3508b81a7df58f50efe6d2701 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 29 Apr 2024 17:42:21 +0200 Subject: [PATCH 329/380] redesign error screen --- .../templates/base-preview-body.html | 36 +++++- .../templates/base-preview-head.html | 116 ++++++++++++++++-- code/lib/preview-api/src/Errors.stories.tsx | 54 ++++++++ code/ui/.storybook/main.ts | 5 +- 4 files changed, 201 insertions(+), 10 deletions(-) create mode 100644 code/lib/preview-api/src/Errors.stories.tsx diff --git a/code/lib/core-common/templates/base-preview-body.html b/code/lib/core-common/templates/base-preview-body.html index 094286c31b41..b6314fd75900 100644 --- a/code/lib/core-common/templates/base-preview-body.html +++ b/code/lib/core-common/templates/base-preview-body.html @@ -82,6 +82,38 @@

No Preview

- 

-  

+  

+    

+    

+      The component failed to render properly, likely due to a configuration issue in Storybook.
+      Here are some common causes and how you can address them:
+    

+    
    
+      
  1. 
+        Missing Context/Providers: You can use decorators to supply specific
+        contexts or providers, which are sometimes necessary for components to render correctly. For
+        detailed instructions on using decorators, please visit the
+        Decorators documentation.
+      
    2. 
+      
  2. 
+        Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary
+        settings for loaders, plugins, and other relevant parameters. You can find step-by-step
+        guides for configuring
+        Webpack or
+        Vite
+        with Storybook.
+      
    3. 
+      
  3. 
+        Missing Environment Variables: Your Storybook may require specific
+        environment variables to function as intended. You can set up custom environment variables
+        as outlined in the
+        Environment Variables documentation.
+      
    4. 
+    

+    

+  

 

diff --git a/code/lib/core-common/templates/base-preview-head.html b/code/lib/core-common/templates/base-preview-head.html
index c4732d25281c..ca71c17faa95 100644
--- a/code/lib/core-common/templates/base-preview-head.html
+++ b/code/lib/core-common/templates/base-preview-head.html
@@ -30,7 +30,8 @@
     box-sizing: border-box;
     margin: auto;
     padding: 1rem;
-    max-height: 100%; /* Hack for centering correctly in IE11 */
+    max-height: 100%;
+    /* Hack for centering correctly in IE11 */
   }
 
   /* Vertical centering fix for IE11 */
@@ -61,7 +62,7 @@
     bottom: 0;
     left: 0;
     right: 0;
-    padding: 20px;
+    padding: 40px;
     font-family:
       'Nunito Sans',
       -apple-system,
@@ -77,6 +78,18 @@
     overflow: auto;
   }
 
+  @media (max-width: 700px) {
+    .sb-wrapper {
+      padding: 20px;
+    }
+  }
+
+  @media (max-width: 500px) {
+    .sb-wrapper {
+      padding: 10px;
+    }
+  }
+
   .sb-heading {
     font-size: 14px;
     font-weight: 600;
@@ -103,54 +116,127 @@
   }
 
   .sb-errordisplay {
-    border: 20px solid rgb(187, 49, 49);
-    background: #222;
-    color: #fff;
+    background: #f6f9fc;
     z-index: 999999;
+    width: 100vw;
+    min-height: 100vh;
+
+    & ol {
+      padding-left: 18px;
+      margin: 0;
+    }
+
+    & h1 {
+      font-family: Nunito Sans;
+      font-size: 22px;
+      font-weight: 400;
+      line-height: 30px;
+      font-weight: normal;
+      margin: 0;
+
+      &::before {
+        content: '';
+        display: inline-block;
+        width: 12px;
+        height: 12px;
+        background: #ff4400;
+        border-radius: 50%;
+        margin-right: 8px;
+      }
+    }
+
+    & p,
+    & ol {
+      font-family: Nunito Sans;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 19px;
+      margin: 0;
+    }
+
+    & li + li {
+      margin: 0;
+      padding: 0;
+      padding-top: 12px;
+    }
+
+    & a {
+      color: currentColor;
+    }
+  }
+
+  .sb-errordisplay_main {
+    margin: auto;
+    padding: 24px;
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+    width: 100%;
+    border-radius: 6px;
+    background: white;
+    border: 1px solid #ff0000;
+    box-shadow: 0 0 64px rgba(0, 0, 0, 0.1);
+    gap: 24px;
   }
 
   .sb-errordisplay_code {
     padding: 10px;
-    background: #000;
-    color: #eee;
+    flex: 1;
+    background: #242424;
+    color: #c6c6c6;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 19px;
+    border-radius: 4px;
+
     font-family: 'Operator Mono', 'Fira Code Retina', 'Fira Code', 'FiraCode-Retina', 'Andale Mono',
       'Lucida Console', Consolas, Monaco, monospace;
+    margin: 0;
+    overflow: auto;
   }
 
   .sb-errordisplay pre {
     white-space: pre-wrap;
+    white-space: revert;
   }
 
   @-webkit-keyframes sb-rotate360 {
     from {
       transform: rotate(0deg);
     }
+
     to {
       transform: rotate(360deg);
     }
   }
+
   @keyframes sb-rotate360 {
     from {
       transform: rotate(0deg);
     }
+
     to {
       transform: rotate(360deg);
     }
   }
+
   @-webkit-keyframes sb-glow {
     0%,
     100% {
       opacity: 1;
     }
+
     50% {
       opacity: 0.4;
     }
   }
+
   @keyframes sb-glow {
     0%,
     100% {
       opacity: 1;
     }
+
     50% {
       opacity: 0.4;
     }
@@ -213,6 +299,7 @@
     height: 14px;
     width: 14px;
   }
+
   .sb-previewBlock_icon:last-child {
     margin-left: auto;
   }
@@ -234,23 +321,28 @@
     text-align: left;
     width: 100%;
   }
+
   .sb-argstableBlock th:first-of-type,
   .sb-argstableBlock td:first-of-type {
     padding-left: 20px;
   }
+
   .sb-argstableBlock th:nth-of-type(2),
   .sb-argstableBlock td:nth-of-type(2) {
     width: 35%;
   }
+
   .sb-argstableBlock th:nth-of-type(3),
   .sb-argstableBlock td:nth-of-type(3) {
     width: 15%;
   }
+
   .sb-argstableBlock th:last-of-type,
   .sb-argstableBlock td:last-of-type {
     width: 25%;
     padding-right: 20px;
   }
+
   .sb-argstableBlock th span,
   .sb-argstableBlock td span {
     -webkit-animation: sb-glow 1.5s ease-in-out infinite;
@@ -260,6 +352,7 @@
     box-shadow: none;
     color: transparent;
   }
+
   .sb-argstableBlock th {
     padding: 10px 15px;
   }
@@ -270,35 +363,44 @@
       rgba(0, 0, 0, 0.1) 0 1px 3px 1px,
       rgba(0, 0, 0, 0.065) 0 0 0 1px;
   }
+
   .sb-argstableBlock-body tr {
     background: transparent;
     overflow: hidden;
   }
+
   .sb-argstableBlock-body tr:not(:first-child) {
     border-top: 1px solid #e6e6e6;
   }
+
   .sb-argstableBlock-body tr:first-child td:first-child {
     border-top-left-radius: 4px;
   }
+
   .sb-argstableBlock-body tr:first-child td:last-child {
     border-top-right-radius: 4px;
   }
+
   .sb-argstableBlock-body tr:last-child td:first-child {
     border-bottom-left-radius: 4px;
   }
+
   .sb-argstableBlock-body tr:last-child td:last-child {
     border-bottom-right-radius: 4px;
   }
+
   .sb-argstableBlock-body td {
     background: #fff;
     padding-bottom: 10px;
     padding-top: 10px;
     vertical-align: top;
   }
+
   .sb-argstableBlock-body td:not(:first-of-type) {
     padding-left: 15px;
     padding-right: 15px;
   }
+
   .sb-argstableBlock-body button {
     -webkit-animation: sb-glow 1.5s ease-in-out infinite;
     animation: sb-glow 1.5s ease-in-out infinite;
diff --git a/code/lib/preview-api/src/Errors.stories.tsx b/code/lib/preview-api/src/Errors.stories.tsx
new file mode 100644
index 000000000000..cb7cd658bebc
--- /dev/null
+++ b/code/lib/preview-api/src/Errors.stories.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import AnsiToHtml from 'ansi-to-html';
+
+const ansiConverter = new AnsiToHtml({
+  escapeXML: true,
+});
+
+const Component = ({ id, header, detail }: any) => {
+  const element = document.querySelector('.' + id);
+  if (!element) {
+    return 
Element not found
;
+  }
+
+  if (header) {
+    document.getElementById('error-message')!.innerHTML = ansiConverter.toHtml(header);
+  }
+
+  if (detail) {
+    document.getElementById('error-stack')!.innerHTML = ansiConverter.toHtml(detail);
+  }
+
+  const content = element.outerHTML;
+
+  return (
+    

+  );
+};
+
+export default {
+  component: Component,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  title: 'Errors',
+  args: {
+    id: 'sb-errordisplay',
+  },
+};
+
+export const MyError = {
+  args: {
+    header: new Error('ow no, something went wrong').message,
+    detail: new Error('ow no, something went wrong').stack,
+  },
+};
+
+export const Missing = {
+  args: {
+    id: 'sb-nopreview',
+  },
+};
diff --git a/code/ui/.storybook/main.ts b/code/ui/.storybook/main.ts
index 55a7a09b611d..03dea1aea08d 100644
--- a/code/ui/.storybook/main.ts
+++ b/code/ui/.storybook/main.ts
@@ -8,9 +8,12 @@ const isBlocksOnly = process.env.STORYBOOK_BLOCKS_ONLY === 'true';
 const allStories = [
   {
     directory: '../manager/src',
-    files: '**/*.stories.@(js|jsx|mjs|ts|tsx|mdx)',
     titlePrefix: '@manager',
   },
+  {
+    directory: '../../lib/preview-api/src',
+    titlePrefix: '@preview',
+  },
   {
     directory: '../components/src/components',
     titlePrefix: '@components',

From 13a9f3753679cca1a2d7899b5277ef7b2417bbf5 Mon Sep 17 00:00:00 2001
From: Norbert de Langen 
Date: Mon, 29 Apr 2024 18:18:03 +0200
Subject: [PATCH 330/380] fix

---
 .../manager/src/components/sidebar/CreateNewStoryFileModal.tsx   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/code/ui/manager/src/components/sidebar/CreateNewStoryFileModal.tsx b/code/ui/manager/src/components/sidebar/CreateNewStoryFileModal.tsx
index 3d5cd4ea7aa8..c8d10640223e 100644
--- a/code/ui/manager/src/components/sidebar/CreateNewStoryFileModal.tsx
+++ b/code/ui/manager/src/components/sidebar/CreateNewStoryFileModal.tsx
@@ -53,6 +53,7 @@ export const CreateNewStoryFileModal = ({ open, onOpenChange }: CreateNewStoryFi
 
   const [searchResults, setSearchResults] = useState(null);
 
+  // @ts-expect-error (not used yet)
   const handleErrorWhenCreatingStory = useCallback(() => {
     api.addNotification({
       id: 'create-new-story-file-error',

From 15901b9c9aadfe996a6f8249f1ccdd5da84d23cb Mon Sep 17 00:00:00 2001
From: Norbert de Langen 
Date: Mon, 29 Apr 2024 20:54:08 +0200
Subject: [PATCH 331/380] thrown when missing

---
 code/lib/core-common/templates/base-preview-head.html | 1 +
 code/lib/preview-api/src/Errors.stories.tsx           | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/code/lib/core-common/templates/base-preview-head.html b/code/lib/core-common/templates/base-preview-head.html
index ca71c17faa95..6a0f561a16f5 100644
--- a/code/lib/core-common/templates/base-preview-head.html
+++ b/code/lib/core-common/templates/base-preview-head.html
@@ -117,6 +117,7 @@
 
   .sb-errordisplay {
     background: #f6f9fc;
+    color: black;
     z-index: 999999;
     width: 100vw;
     min-height: 100vh;
diff --git a/code/lib/preview-api/src/Errors.stories.tsx b/code/lib/preview-api/src/Errors.stories.tsx
index cb7cd658bebc..9e264c53082a 100644
--- a/code/lib/preview-api/src/Errors.stories.tsx
+++ b/code/lib/preview-api/src/Errors.stories.tsx
@@ -8,7 +8,7 @@ const ansiConverter = new AnsiToHtml({
 const Component = ({ id, header, detail }: any) => {
   const element = document.querySelector('.' + id);
   if (!element) {
-    return 
Element not found
;
+    throw new Error('Element not found');
   }
 
   if (header) {
@@ -33,6 +33,7 @@ export default {
   component: Component,
   parameters: {
     layout: 'fullscreen',
+    theme: 'light',
   },
   title: 'Errors',
   args: {

From 41f88195a7f523a3ef322ddd0b4ff729da9f94a7 Mon Sep 17 00:00:00 2001
From: Norbert de Langen 
Date: Tue, 30 Apr 2024 00:32:49 +0200
Subject: [PATCH 332/380] fix chromatic

---
 code/lib/preview-api/src/Errors.stories.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/code/lib/preview-api/src/Errors.stories.tsx b/code/lib/preview-api/src/Errors.stories.tsx
index 9e264c53082a..5c65e56c65b3 100644
--- a/code/lib/preview-api/src/Errors.stories.tsx
+++ b/code/lib/preview-api/src/Errors.stories.tsx
@@ -19,7 +19,12 @@ const Component = ({ id, header, detail }: any) => {
     document.getElementById('error-stack')!.innerHTML = ansiConverter.toHtml(detail);
   }
 
-  const content = element.outerHTML;
+  // remove the ids, otherwise chromatic will assume the story failed to render
+  const content = element.outerHTML.replace('error-message', '').replace('error-stack', '');
+
+  // remove the content, otherwise chromatic will assume the story failed to render
+  document.getElementById('error-message')!.innerHTML = '';
+  document.getElementById('error-stack')!.innerHTML = '';
 
   return (
     

Date: Tue, 30 Apr 2024 09:02:43 +0200
Subject: [PATCH 333/380] make stacktrace deterministic

---
 code/lib/preview-api/src/Errors.stories.tsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/code/lib/preview-api/src/Errors.stories.tsx b/code/lib/preview-api/src/Errors.stories.tsx
index 5c65e56c65b3..41363ff5c566 100644
--- a/code/lib/preview-api/src/Errors.stories.tsx
+++ b/code/lib/preview-api/src/Errors.stories.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import AnsiToHtml from 'ansi-to-html';
+import dedent from 'ts-dedent';
 
 const ansiConverter = new AnsiToHtml({
   escapeXML: true,
@@ -48,8 +49,19 @@ export default {
 
 export const MyError = {
   args: {
-    header: new Error('ow no, something went wrong').message,
-    detail: new Error('ow no, something went wrong').stack,
+    header: `FAIL is not defined`,
+    detail: dedent`
+      ReferenceError: FAIL is not defined
+        at Constraint.execute (the-best-file.js:525:2)
+        at Constraint.recalculate (the-best-file.js:424:21)
+        at Planner.addPropagate (the-best-file.js:701:6)
+        at Constraint.satisfy (the-best-file.js:184:15)
+        at Planner.incrementalAdd (the-best-file.js:591:21)
+        at Constraint.addConstraint (the-best-file.js:162:10)
+        at Constraint.BinaryConstraint (the-best-file.js:346:7)
+        at Constraint.EqualityConstraint (the-best-file.js:515:38)
+        at chainTest (the-best-file.js:807:6)
+        at deltaBlue (the-best-file.js:879:2)`,
   },
 };
 

From 5e63c2fd07ee6cde8bc9077a33951a9afeda8ee9 Mon Sep 17 00:00:00 2001
From: Valentin Palkovic 
Date: Tue, 30 Apr 2024 10:07:42 +0200
Subject: [PATCH 334/380] Fix issue with getProjectRoot function in paths.ts
 when user does not use revision control

---
 code/lib/core-common/src/utils/paths.ts | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/code/lib/core-common/src/utils/paths.ts b/code/lib/core-common/src/utils/paths.ts
index 3895a69dd2b1..f81426aa5893 100644
--- a/code/lib/core-common/src/utils/paths.ts
+++ b/code/lib/core-common/src/utils/paths.ts
@@ -32,16 +32,18 @@ export const getProjectRoot = () => {
   } catch (e) {
     //
   }
+
   try {
-    const found = findUp.sync('.yarn', { type: 'directory' });
-    if (found) {
-      result = result || path.join(found, '..');
-    }
+    result = result || __dirname.split('node_modules')[0];
   } catch (e) {
     //
   }
+
   try {
-    result = result || __dirname.split('node_modules')[0];
+    const found = findUp.sync('.yarn', { type: 'directory' });
+    if (found) {
+      result = result || path.join(found, '..');
+    }
   } catch (e) {
     //
   }

From 38447651363aff98178a00596fe13bb51c118aba Mon Sep 17 00:00:00 2001
From: Valentin Palkovic 
Date: Tue, 30 Apr 2024 10:10:03 +0200
Subject: [PATCH 335/380] Fix issues with disabled checkboxes and radios

---
 code/ui/blocks/src/controls/options/Checkbox.tsx | 2 +-
 code/ui/blocks/src/controls/options/Radio.tsx    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/code/ui/blocks/src/controls/options/Checkbox.tsx b/code/ui/blocks/src/controls/options/Checkbox.tsx
index 6be088b111ba..7c883c21300c 100644
--- a/code/ui/blocks/src/controls/options/Checkbox.tsx
+++ b/code/ui/blocks/src/controls/options/Checkbox.tsx
@@ -27,7 +27,7 @@ const Wrapper = styled.div<{ isInline: boolean }>(
           },
         },
   (props) => {
-    if ([props['aria-readonly']]) {
+    if (props['aria-readonly'] === 'true') {
       return {
         input: {
           cursor: 'not-allowed',
diff --git a/code/ui/blocks/src/controls/options/Radio.tsx b/code/ui/blocks/src/controls/options/Radio.tsx
index d3bc514f3361..76c3239e747a 100644
--- a/code/ui/blocks/src/controls/options/Radio.tsx
+++ b/code/ui/blocks/src/controls/options/Radio.tsx
@@ -27,7 +27,7 @@ const Wrapper = styled.div<{ isInline: boolean }>(
           },
         },
   (props) => {
-    if ([props['aria-readonly']]) {
+    if (props['aria-readonly'] === 'true') {
       return {
         input: {
           cursor: 'not-allowed',

From 313c50dc3ba315a6de5b2b19b749b93a39af59e3 Mon Sep 17 00:00:00 2001
From: Valentin Palkovic 
Date: Tue, 30 Apr 2024 10:32:37 +0200
Subject: [PATCH 336/380] Improve required args extraction by considering enums

---
 .../sidebar/FileSearchModal.utils.test.tsx    |  3 +-
 .../sidebar/FileSearchModal.utils.tsx         | 77 ++++++++++---------
 2 files changed, 44 insertions(+), 36 deletions(-)

diff --git a/code/ui/manager/src/components/sidebar/FileSearchModal.utils.test.tsx b/code/ui/manager/src/components/sidebar/FileSearchModal.utils.test.tsx
index d5ca221d039c..d86a9c208d68 100644
--- a/code/ui/manager/src/components/sidebar/FileSearchModal.utils.test.tsx
+++ b/code/ui/manager/src/components/sidebar/FileSearchModal.utils.test.tsx
@@ -42,7 +42,7 @@ describe('FileSearchModal.utils', () => {
           type: {
             name: 'enum',
             required: true,
-            value: [],
+            value: ['a', 'b', 'c'],
           },
           options: ['a', 'b', 'c'],
         },
@@ -106,6 +106,7 @@ describe('FileSearchModal.utils', () => {
         boolean: true,
         function: expect.any(Function),
         number: 0,
+        enum: 'a',
         otherCheck: 'j',
         otherColor: '#000000',
         otherInlineCheck: 'g',
diff --git a/code/ui/manager/src/components/sidebar/FileSearchModal.utils.tsx b/code/ui/manager/src/components/sidebar/FileSearchModal.utils.tsx
index 3b9aacd981e2..f334aadc461c 100644
--- a/code/ui/manager/src/components/sidebar/FileSearchModal.utils.tsx
+++ b/code/ui/manager/src/components/sidebar/FileSearchModal.utils.tsx
@@ -1,5 +1,39 @@
 import type { ArgTypes, SBType } from '@storybook/csf';
 
+export function extractSeededRequiredArgs(argTypes: ArgTypes) {
+  const extractedArgTypes = Object.keys(argTypes).reduce(
+    (acc, key: keyof typeof argTypes) => {
+      const argType = argTypes[key];
+
+      if (typeof argType.control === 'object' && 'type' in argType.control) {
+        switch (argType.control.type) {
+          case 'object':
+            acc[key] = {};
+            break;
+          case 'inline-radio':
+          case 'radio':
+          case 'inline-check':
+          case 'check':
+          case 'select':
+          case 'multi-select':
+            acc[key] = argType.control.options?.[0];
+            break;
+          case 'color':
+            acc[key] = '#000000';
+            break;
+          default:
+            break;
+        }
+      }
+
+      setArgType(argType.type, acc, key);
+      return acc;
+    },
+    {} as Record
+  );
+  return extractedArgTypes;
+}
+
 function setArgType(
   type: 'string' | 'number' | 'boolean' | 'symbol' | 'function' | SBType,
   obj: Record,
@@ -44,9 +78,16 @@ function setArgType(
       }
       break;
     case 'union':
-      if (type.value[0]) {
+      if (type.value?.[0] !== undefined) {
         setArgType(type.value[0], obj, objKey);
       }
+      break;
+
+    case 'enum':
+      if (type.value?.[0] !== undefined) {
+        obj[objKey] = type.value?.[0];
+      }
+      break;
 
     case 'other':
       if (typeof type.value === 'string' && type.value === 'tuple') {
@@ -58,40 +99,6 @@ function setArgType(
   }
 }
 
-export function extractSeededRequiredArgs(argTypes: ArgTypes) {
-  const extractedArgTypes = Object.keys(argTypes).reduce(
-    (acc, key: keyof typeof argTypes) => {
-      const argType = argTypes[key];
-
-      if (typeof argType.control === 'object' && 'type' in argType.control) {
-        switch (argType.control.type) {
-          case 'object':
-            acc[key] = {};
-            break;
-          case 'inline-radio':
-          case 'radio':
-          case 'inline-check':
-          case 'check':
-          case 'select':
-          case 'multi-select':
-            acc[key] = argType.control.options?.[0];
-            break;
-          case 'color':
-            acc[key] = '#000000';
-            break;
-          default:
-            break;
-        }
-      }
-
-      setArgType(argType.type, acc, key);
-      return acc;
-    },
-    {} as Record
-  );
-  return extractedArgTypes;
-}
-
 export async function trySelectNewStory(
   selectStory: (id: string) => Promise | void,
   storyId: string,

From 9b836feb01bb55865b43d631066a21e5006a7f50 Mon Sep 17 00:00:00 2001
From: Valentin Palkovic 
Date: Tue, 30 Apr 2024 10:43:20 +0200
Subject: [PATCH 337/380] Fix paths util

---
 code/lib/core-common/src/utils/paths.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/code/lib/core-common/src/utils/paths.ts b/code/lib/core-common/src/utils/paths.ts
index f81426aa5893..bb5896cc4f67 100644
--- a/code/lib/core-common/src/utils/paths.ts
+++ b/code/lib/core-common/src/utils/paths.ts
@@ -34,7 +34,8 @@ export const getProjectRoot = () => {
   }
 
   try {
-    result = result || __dirname.split('node_modules')[0];
+    const splitDirname = __dirname.split('node_modules');
+    result = result || (splitDirname.length >= 2 ? splitDirname[0] : undefined);
   } catch (e) {
     //
   }

From abf5d99f38e9ef503536f959c2d7a54ac1198609 Mon Sep 17 00:00:00 2001
From: Valentin Palkovic 
Date: Tue, 30 Apr 2024 10:44:14 +0200
Subject: [PATCH 338/380] Fix existing story evaluation

---
 .../file-search-channel.test.ts               |  2 +-
 .../src/server-channel/file-search-channel.ts |  9 ++++---
 .../src/utils/get-new-story-file.ts           | 26 ++++++++++++-------
 3 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/code/lib/core-server/src/server-channel/file-search-channel.test.ts b/code/lib/core-server/src/server-channel/file-search-channel.test.ts
index 0b4295ee145f..1ecc2a753c04 100644
--- a/code/lib/core-server/src/server-channel/file-search-channel.test.ts
+++ b/code/lib/core-server/src/server-channel/file-search-channel.test.ts
@@ -102,7 +102,7 @@ describe('file-search-channel', () => {
                 },
               ],
               filepath: 'src/es-module.js',
-              storyFileExists: false,
+              storyFileExists: true,
             },
           ],
         },
diff --git a/code/lib/core-server/src/server-channel/file-search-channel.ts b/code/lib/core-server/src/server-channel/file-search-channel.ts
index 007091d222d0..721ab5d1707c 100644
--- a/code/lib/core-server/src/server-channel/file-search-channel.ts
+++ b/code/lib/core-server/src/server-channel/file-search-channel.ts
@@ -7,7 +7,6 @@ import {
 } from '@storybook/core-common';
 import path from 'path';
 import fs from 'fs/promises';
-import { existsSync } from 'fs';
 
 import { getParser } from '../utils/parser';
 import { searchFiles } from '../utils/search-files';
@@ -21,7 +20,7 @@ import {
   FILE_COMPONENT_SEARCH_REQUEST,
   FILE_COMPONENT_SEARCH_RESPONSE,
 } from '@storybook/core-events';
-import { getStoryMetadata } from '../utils/get-new-story-file';
+import { doesStoryFileExist, getStoryMetadata } from '../utils/get-new-story-file';
 
 export function initFileSearchChannel(channel: Channel, options: Options) {
   /**
@@ -57,7 +56,11 @@ export function initFileSearchChannel(channel: Channel, options: Options) {
             const { storyFileName } = getStoryMetadata(path.join(projectRoot, file));
             const dirname = path.dirname(file);
 
-            const storyFileExists = existsSync(path.join(projectRoot, dirname, storyFileName));
+            const storyFileExists = doesStoryFileExist(
+              path.join(projectRoot, dirname),
+              storyFileName
+            );
+
             const info = await parser.parse(content);
 
             return {
diff --git a/code/lib/core-server/src/utils/get-new-story-file.ts b/code/lib/core-server/src/utils/get-new-story-file.ts
index be03c48d8e35..32c50c2e5009 100644
--- a/code/lib/core-server/src/utils/get-new-story-file.ts
+++ b/code/lib/core-server/src/utils/get-new-story-file.ts
@@ -33,9 +33,9 @@ export async function getNewStoryFile(
   const basenameWithoutExtension = basename.replace(extension, '');
   const dirname = path.dirname(componentFilePath);
 
-  const { storyFileName, isTypescript } = getStoryMetadata(componentFilePath);
-  const storyFileExtension = isTypescript ? 'tsx' : 'jsx';
-  const alternativeStoryFileName = `${basenameWithoutExtension}.${componentExportName}.stories.${storyFileExtension}`;
+  const { storyFileName, isTypescript, storyFileExtension } = getStoryMetadata(componentFilePath);
+  const storyFileNameWithExtension = `${storyFileName}.${storyFileExtension}`;
+  const alternativeStoryFileNameWithExtension = `${basenameWithoutExtension}.${componentExportName}.stories.${storyFileExtension}`;
 
   const exportedStoryName = 'Default';
 
@@ -55,12 +55,10 @@ export async function getNewStoryFile(
           exportedStoryName,
         });
 
-  const doesStoryFileExist = fs.existsSync(path.join(cwd, dirname, storyFileName));
-
   const storyFilePath =
-    doesStoryFileExist && componentExportCount > 1
-      ? path.join(cwd, dirname, alternativeStoryFileName)
-      : path.join(cwd, dirname, storyFileName);
+    doesStoryFileExist(path.join(cwd, dirname), storyFileName) && componentExportCount > 1
+      ? path.join(cwd, dirname, alternativeStoryFileNameWithExtension)
+      : path.join(cwd, dirname, storyFileNameWithExtension);
 
   return { storyFilePath, exportedStoryName, storyFileContent, dirname };
 }
@@ -72,7 +70,17 @@ export const getStoryMetadata = (componentFilePath: string) => {
   const basenameWithoutExtension = basename.replace(extension, '');
   const storyFileExtension = isTypescript ? 'tsx' : 'jsx';
   return {
-    storyFileName: `${basenameWithoutExtension}.stories.${storyFileExtension}`,
+    storyFileName: `${basenameWithoutExtension}.stories`,
+    storyFileExtension,
     isTypescript,
   };
 };
+
+export const doesStoryFileExist = (parentFolder: string, storyFileName: string) => {
+  return (
+    fs.existsSync(path.join(parentFolder, `${storyFileName}.ts`)) ||
+    fs.existsSync(path.join(parentFolder, `${storyFileName}.tsx`)) ||
+    fs.existsSync(path.join(parentFolder, `${storyFileName}.js`)) ||
+    fs.existsSync(path.join(parentFolder, `${storyFileName}.jsx`))
+  );
+};

From b1063c833f7ac36352cd42f9dadb4fbcbc8b0dfa Mon Sep 17 00:00:00 2001
From: Valentin Palkovic 
Date: Tue, 30 Apr 2024 10:51:12 +0200
Subject: [PATCH 339/380] Enhance handleFileSearch

---
 .../sidebar/CreateNewStoryFileModal.tsx       | 29 ++++---------------
 1 file changed, 6 insertions(+), 23 deletions(-)

diff --git a/code/ui/manager/src/components/sidebar/CreateNewStoryFileModal.tsx b/code/ui/manager/src/components/sidebar/CreateNewStoryFileModal.tsx
index c8d10640223e..ffb12fe67b3e 100644
--- a/code/ui/manager/src/components/sidebar/CreateNewStoryFileModal.tsx
+++ b/code/ui/manager/src/components/sidebar/CreateNewStoryFileModal.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useDeferredValue, useEffect, useRef, useState } from 'react';
-import { AlertIcon, CheckIcon } from '@storybook/icons';
+import { CheckIcon } from '@storybook/icons';
 import type {
   ArgTypesRequestPayload,
   ArgTypesResponsePayload,
@@ -53,21 +53,6 @@ export const CreateNewStoryFileModal = ({ open, onOpenChange }: CreateNewStoryFi
 
   const [searchResults, setSearchResults] = useState(null);
 
-  // @ts-expect-error (not used yet)
-  const handleErrorWhenCreatingStory = useCallback(() => {
-    api.addNotification({
-      id: 'create-new-story-file-error',
-      content: {
-        headline: 'Error while creating story file',
-        subHeadline: `Take a look at your developer console for more information`,
-      },
-      duration: 8_000,
-      icon: ,
-    });
-
-    onOpenChange(false);
-  }, [api, onOpenChange]);
-
   const handleSuccessfullyCreatedStory = useCallback(
     (componentExportName: string) => {
       api.addNotification({
@@ -90,17 +75,15 @@ export const CreateNewStoryFileModal = ({ open, onOpenChange }: CreateNewStoryFi
     const channel = addons.getChannel();
 
     const set = (data: ResponseData) => {
-      const isLatestRequest = data.id === fileSearchQueryDeferred && data.payload.files;
+      const isLatestRequest = data.id === fileSearchQueryDeferred;
 
-      if (data.success) {
-        if (isLatestRequest) {
+      if (isLatestRequest) {
+        if (data.success) {
           setSearchResults(data.payload.files);
+        } else {
+          setError({ error: data.error });
         }
-      } else {
-        setError({ error: data.error });
-      }
 
-      if (isLatestRequest) {
         channel.off(FILE_COMPONENT_SEARCH_RESPONSE, set);
         setLoading(false);
         emittedValue.current = null;

From a3e482a6d3e9053c7831c60d1feaf501ecb8cef7 Mon Sep 17 00:00:00 2001
From: Kasper Peulen 
Date: Tue, 30 Apr 2024 11:12:35 +0200
Subject: [PATCH 340/380] Update @storybook/csf dependency to ^0.1.6

---
 code/addons/links/package.json      |  2 +-
 code/lib/codemod/package.json       |  2 +-
 code/lib/core-server/package.json   |  2 +-
 code/lib/csf-tools/package.json     |  2 +-
 code/lib/manager-api/package.json   |  2 +-
 code/lib/preview-api/package.json   |  2 +-
 code/lib/source-loader/package.json |  2 +-
 code/lib/types/package.json         |  2 +-
 code/package.json                   |  2 +-
 code/renderers/server/package.json  |  2 +-
 code/ui/blocks/package.json         |  2 +-
 code/ui/components/package.json     |  2 +-
 code/yarn.lock                      | 32 ++++++++++++++---------------
 13 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/code/addons/links/package.json b/code/addons/links/package.json
index fca532085ff4..c19d89b78b0a 100644
--- a/code/addons/links/package.json
+++ b/code/addons/links/package.json
@@ -67,7 +67,7 @@
     "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/addon-bundle.ts"
   },
   "dependencies": {
-    "@storybook/csf": "^0.1.5",
+    "@storybook/csf": "^0.1.6",
     "@storybook/global": "^5.0.0",
     "ts-dedent": "^2.0.0"
   },
diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json
index c5569f29bd04..70424ea04fb2 100644
--- a/code/lib/codemod/package.json
+++ b/code/lib/codemod/package.json
@@ -57,7 +57,7 @@
     "@babel/core": "^7.23.2",
     "@babel/preset-env": "^7.23.2",
     "@babel/types": "^7.23.0",
-    "@storybook/csf": "^0.1.5",
+    "@storybook/csf": "^0.1.6",
     "@storybook/csf-tools": "workspace:*",
     "@storybook/node-logger": "workspace:*",
     "@storybook/types": "workspace:*",
diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json
index 334ae373b36e..c3c2ecdcaac3 100644
--- a/code/lib/core-server/package.json
+++ b/code/lib/core-server/package.json
@@ -62,7 +62,7 @@
     "@storybook/channels": "workspace:*",
     "@storybook/core-common": "workspace:*",
     "@storybook/core-events": "workspace:*",
-    "@storybook/csf": "^0.1.5",
+    "@storybook/csf": "^0.1.6",
     "@storybook/csf-tools": "workspace:*",
     "@storybook/docs-mdx": "3.0.0",
     "@storybook/global": "^5.0.0",
diff --git a/code/lib/csf-tools/package.json b/code/lib/csf-tools/package.json
index d04ab9d94884..a05ad6c933bb 100644
--- a/code/lib/csf-tools/package.json
+++ b/code/lib/csf-tools/package.json
@@ -46,7 +46,7 @@
     "@babel/parser": "^7.23.0",
     "@babel/traverse": "^7.23.2",
     "@babel/types": "^7.23.0",
-    "@storybook/csf": "^0.1.5",
+    "@storybook/csf": "^0.1.6",
     "@storybook/types": "workspace:*",
     "fs-extra": "^11.1.0",
     "recast": "^0.23.5",
diff --git a/code/lib/manager-api/package.json b/code/lib/manager-api/package.json
index a111b3a232f6..0a68b927b820 100644
--- a/code/lib/manager-api/package.json
+++ b/code/lib/manager-api/package.json
@@ -47,7 +47,7 @@
     "@storybook/channels": "workspace:*",
     "@storybook/client-logger": "workspace:*",
     "@storybook/core-events": "workspace:*",
-    "@storybook/csf": "^0.1.5",
+    "@storybook/csf": "^0.1.6",
     "@storybook/global": "^5.0.0",
     "@storybook/icons": "^1.2.5",
     "@storybook/router": "workspace:*",
diff --git a/code/lib/preview-api/package.json b/code/lib/preview-api/package.json
index d5678327d9e2..36797a9265e2 100644
--- a/code/lib/preview-api/package.json
+++ b/code/lib/preview-api/package.json
@@ -47,7 +47,7 @@
     "@storybook/channels": "workspace:*",
     "@storybook/client-logger": "workspace:*",
     "@storybook/core-events": "workspace:*",
-    "@storybook/csf": "^0.1.5",
+    "@storybook/csf": "^0.1.6",
     "@storybook/global": "^5.0.0",
     "@storybook/types": "workspace:*",
     "@types/qs": "^6.9.5",
diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json
index 833850ad8d5e..4c8916ae6631 100644
--- a/code/lib/source-loader/package.json
+++ b/code/lib/source-loader/package.json
@@ -45,7 +45,7 @@
     "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/csf": "^0.1.5",
+    "@storybook/csf": "^0.1.6",
     "@storybook/types": "workspace:*",
     "estraverse": "^5.2.0",
     "lodash": "^4.17.21",
diff --git a/code/lib/types/package.json b/code/lib/types/package.json
index d7469d928ae0..57eae04e53f5 100644
--- a/code/lib/types/package.json
+++ b/code/lib/types/package.json
@@ -49,7 +49,7 @@
     "file-system-cache": "2.3.0"
   },
   "devDependencies": {
-    "@storybook/csf": "^0.1.5",
+    "@storybook/csf": "^0.1.6",
     "@types/fs-extra": "^11.0.1",
     "@types/node": "^18.0.0",
     "typescript": "^5.3.2"
diff --git a/code/package.json b/code/package.json
index aa77cb859fb2..5ec6ae44ccf9 100644
--- a/code/package.json
+++ b/code/package.json
@@ -127,7 +127,7 @@
     "@storybook/core-events": "workspace:*",
     "@storybook/core-server": "workspace:*",
     "@storybook/core-webpack": "workspace:*",
-    "@storybook/csf": "^0.1.5",
+    "@storybook/csf": "^0.1.6",
     "@storybook/csf-plugin": "workspace:*",
     "@storybook/csf-tools": "workspace:*",
     "@storybook/docs-tools": "workspace:*",
diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json
index ef60a8071fbf..b045700b4373 100644
--- a/code/renderers/server/package.json
+++ b/code/renderers/server/package.json
@@ -46,7 +46,7 @@
     "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/csf": "^0.1.5",
+    "@storybook/csf": "^0.1.6",
     "@storybook/csf-tools": "workspace:*",
     "@storybook/global": "^5.0.0",
     "@storybook/preview-api": "workspace:*",
diff --git a/code/ui/blocks/package.json b/code/ui/blocks/package.json
index 5e59af48f6da..3369d91ea08e 100644
--- a/code/ui/blocks/package.json
+++ b/code/ui/blocks/package.json
@@ -48,7 +48,7 @@
     "@storybook/client-logger": "workspace:*",
     "@storybook/components": "workspace:*",
     "@storybook/core-events": "workspace:*",
-    "@storybook/csf": "^0.1.5",
+    "@storybook/csf": "^0.1.6",
     "@storybook/docs-tools": "workspace:*",
     "@storybook/global": "^5.0.0",
     "@storybook/icons": "^1.2.5",
diff --git a/code/ui/components/package.json b/code/ui/components/package.json
index eb45b1b3ddcc..a3c861bfbf6b 100644
--- a/code/ui/components/package.json
+++ b/code/ui/components/package.json
@@ -61,7 +61,7 @@
   "dependencies": {
     "@radix-ui/react-slot": "^1.0.2",
     "@storybook/client-logger": "workspace:*",
-    "@storybook/csf": "^0.1.5",
+    "@storybook/csf": "^0.1.6",
     "@storybook/global": "^5.0.0",
     "@storybook/icons": "^1.2.5",
     "@storybook/theming": "workspace:*",
diff --git a/code/yarn.lock b/code/yarn.lock
index f0aefa9c64d2..8a8276734808 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -5140,7 +5140,7 @@ __metadata:
   dependencies:
     "@storybook/client-logger": "workspace:*"
     "@storybook/core-events": "workspace:*"
-    "@storybook/csf": "npm:^0.1.5"
+    "@storybook/csf": "npm:^0.1.6"
     "@storybook/global": "npm:^5.0.0"
     "@storybook/manager-api": "workspace:*"
     "@storybook/preview-api": "workspace:*"
@@ -5408,7 +5408,7 @@ __metadata:
     "@storybook/client-logger": "workspace:*"
     "@storybook/components": "workspace:*"
     "@storybook/core-events": "workspace:*"
-    "@storybook/csf": "npm:^0.1.5"
+    "@storybook/csf": "npm:^0.1.6"
     "@storybook/docs-tools": "workspace:*"
     "@storybook/global": "npm:^5.0.0"
     "@storybook/icons": "npm:^1.2.5"
@@ -5639,7 +5639,7 @@ __metadata:
     "@babel/core": "npm:^7.23.2"
     "@babel/preset-env": "npm:^7.23.2"
     "@babel/types": "npm:^7.23.0"
-    "@storybook/csf": "npm:^0.1.5"
+    "@storybook/csf": "npm:^0.1.6"
     "@storybook/csf-tools": "workspace:*"
     "@storybook/node-logger": "workspace:*"
     "@storybook/types": "workspace:*"
@@ -5675,7 +5675,7 @@ __metadata:
     "@radix-ui/react-scroll-area": "npm:^1.0.5"
     "@radix-ui/react-slot": "npm:^1.0.2"
     "@storybook/client-logger": "workspace:*"
-    "@storybook/csf": "npm:^0.1.5"
+    "@storybook/csf": "npm:^0.1.6"
     "@storybook/global": "npm:^5.0.0"
     "@storybook/icons": "npm:^1.2.5"
     "@storybook/test": "workspace:*"
@@ -5777,7 +5777,7 @@ __metadata:
     "@storybook/channels": "workspace:*"
     "@storybook/core-common": "workspace:*"
     "@storybook/core-events": "workspace:*"
-    "@storybook/csf": "npm:^0.1.5"
+    "@storybook/csf": "npm:^0.1.6"
     "@storybook/csf-tools": "workspace:*"
     "@storybook/docs-mdx": "npm:3.0.0"
     "@storybook/global": "npm:^5.0.0"
@@ -5860,7 +5860,7 @@ __metadata:
     "@babel/parser": "npm:^7.23.0"
     "@babel/traverse": "npm:^7.23.2"
     "@babel/types": "npm:^7.23.0"
-    "@storybook/csf": "npm:^0.1.5"
+    "@storybook/csf": "npm:^0.1.6"
     "@storybook/types": "workspace:*"
     "@types/fs-extra": "npm:^11.0.1"
     "@types/js-yaml": "npm:^4.0.5"
@@ -5881,12 +5881,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/csf@npm:^0.1.5":
-  version: 0.1.5
-  resolution: "@storybook/csf@npm:0.1.5"
+"@storybook/csf@npm:^0.1.6":
+  version: 0.1.6
+  resolution: "@storybook/csf@npm:0.1.6"
   dependencies:
     type-fest: "npm:^2.19.0"
-  checksum: 10c0/d7a5514a2e985e4ff0a01716034474f41ac61b9c889e7ff0abc1a4a7941c9e78783b77aa98c6b127fbd1cab0a9e3f90acc15b9e476e95b86865272d3d7b913f8
+  checksum: 10c0/81d1ee28a258381ed1cd5e0f9177f2ee06a3b7488ac2cfc9182ba4276662eee8b93f3941f4a141f8f11479991efee55696bf9f442137188255934bbd1de98226
   languageName: node
   linkType: hard
 
@@ -6058,7 +6058,7 @@ __metadata:
     "@storybook/channels": "workspace:*"
     "@storybook/client-logger": "workspace:*"
     "@storybook/core-events": "workspace:*"
-    "@storybook/csf": "npm:^0.1.5"
+    "@storybook/csf": "npm:^0.1.6"
     "@storybook/global": "npm:^5.0.0"
     "@storybook/icons": "npm:^1.2.5"
     "@storybook/router": "workspace:*"
@@ -6394,7 +6394,7 @@ __metadata:
     "@storybook/client-logger": "workspace:*"
     "@storybook/core-common": "workspace:*"
     "@storybook/core-events": "workspace:*"
-    "@storybook/csf": "npm:^0.1.5"
+    "@storybook/csf": "npm:^0.1.6"
     "@storybook/global": "npm:^5.0.0"
     "@storybook/types": "workspace:*"
     "@types/qs": "npm:^6.9.5"
@@ -6579,7 +6579,7 @@ __metadata:
     "@storybook/core-events": "workspace:*"
     "@storybook/core-server": "workspace:*"
     "@storybook/core-webpack": "workspace:*"
-    "@storybook/csf": "npm:^0.1.5"
+    "@storybook/csf": "npm:^0.1.6"
     "@storybook/csf-plugin": "workspace:*"
     "@storybook/csf-tools": "workspace:*"
     "@storybook/docs-tools": "workspace:*"
@@ -6734,7 +6734,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/server@workspace:renderers/server"
   dependencies:
-    "@storybook/csf": "npm:^0.1.5"
+    "@storybook/csf": "npm:^0.1.6"
     "@storybook/csf-tools": "workspace:*"
     "@storybook/global": "npm:^5.0.0"
     "@storybook/preview-api": "workspace:*"
@@ -6751,7 +6751,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/source-loader@workspace:lib/source-loader"
   dependencies:
-    "@storybook/csf": "npm:^0.1.5"
+    "@storybook/csf": "npm:^0.1.6"
     "@storybook/types": "workspace:*"
     estraverse: "npm:^5.2.0"
     lodash: "npm:^4.17.21"
@@ -6930,7 +6930,7 @@ __metadata:
   resolution: "@storybook/types@workspace:lib/types"
   dependencies:
     "@storybook/channels": "workspace:*"
-    "@storybook/csf": "npm:^0.1.5"
+    "@storybook/csf": "npm:^0.1.6"
     "@types/express": "npm:^4.7.0"
     "@types/fs-extra": "npm:^11.0.1"
     "@types/node": "npm:^18.0.0"

From aee76c78661e297e5fb8e7d8b173c3ed79492193 Mon Sep 17 00:00:00 2001
From: Norbert de Langen 
Date: Tue, 30 Apr 2024 11:15:56 +0200
Subject: [PATCH 341/380] fix layout of error screen in preview

---
 code/lib/core-common/templates/base-preview-head.html | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/code/lib/core-common/templates/base-preview-head.html b/code/lib/core-common/templates/base-preview-head.html
index 6a0f561a16f5..d76e3a5004d4 100644
--- a/code/lib/core-common/templates/base-preview-head.html
+++ b/code/lib/core-common/templates/base-preview-head.html
@@ -62,6 +62,8 @@
     bottom: 0;
     left: 0;
     right: 0;
+    box-sizing: border-box;
+
     padding: 40px;
     font-family:
       'Nunito Sans',
@@ -102,6 +104,7 @@
     display: flex;
     align-content: center;
     justify-content: center;
+    box-sizing: border-box;
   }
 
   .sb-nopreview_main {
@@ -121,6 +124,7 @@
     z-index: 999999;
     width: 100vw;
     min-height: 100vh;
+    box-sizing: border-box;
 
     & ol {
       padding-left: 18px;
@@ -170,6 +174,8 @@
     margin: auto;
     padding: 24px;
     display: flex;
+    box-sizing: border-box;
+
     flex-direction: column;
     min-height: 100%;
     width: 100%;
@@ -185,6 +191,8 @@
     flex: 1;
     background: #242424;
     color: #c6c6c6;
+    box-sizing: border-box;
+
     font-size: 14px;
     font-weight: 400;
     line-height: 19px;

From 8ede2572b6dd1fb3a0ba72989a35aac5af927840 Mon Sep 17 00:00:00 2001
From: Kasper Peulen 
Date: Tue, 30 Apr 2024 12:04:33 +0200
Subject: [PATCH 342/380] Update executor class in CircleCI to xlarge for build

---
 .circleci/config.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index ad07b40429a4..d9846f300ccb 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -124,7 +124,7 @@ jobs:
             yarn docs:prettier:check
   build:
     executor:
-      class: large
+      class: xlarge
       name: sb_node_16_classic
     steps:
       - git-shallow-clone/checkout_advanced:

From 8c1740f805912a3154a2867b60855eb7e409f2ee Mon Sep 17 00:00:00 2001
From: Valentin Palkovic 
Date: Tue, 30 Apr 2024 14:37:48 +0200
Subject: [PATCH 343/380] When creating a story, navigate to it if it exists

---
 .../core-events/src/data/create-new-story.ts  |  5 +++
 .../core-events/src/data/request-response.ts  |  4 +-
 .../create-new-story-channel.ts               | 16 +++++--
 .../src/server-channel/file-search-channel.ts |  1 -
 .../src/utils/save-story/save-story.ts        |  1 -
 .../manager-api/src/lib/request-response.ts   | 21 +++++++--
 .../src/modules/preview-web/Preview.tsx       |  1 -
 .../sidebar/CreateNewStoryFileModal.tsx       | 43 ++++++++++++++++---
 .../src/components/sidebar/FileSearchList.tsx | 24 ++++-------
 code/ui/manager/src/globals/exports.ts        |  1 +
 10 files changed, 84 insertions(+), 33 deletions(-)

diff --git a/code/lib/core-events/src/data/create-new-story.ts b/code/lib/core-events/src/data/create-new-story.ts
index 362ca55511d4..733b273d5056 100644
--- a/code/lib/core-events/src/data/create-new-story.ts
+++ b/code/lib/core-events/src/data/create-new-story.ts
@@ -17,3 +17,8 @@ export interface CreateNewStoryResponsePayload {
   // The name of the story export in the file
   exportedStoryName: string;
 }
+
+export type CreateNewStoryErrorPayload = {
+  type: 'STORY_FILE_EXISTS';
+  storyId: string;
+};
diff --git a/code/lib/core-events/src/data/request-response.ts b/code/lib/core-events/src/data/request-response.ts
index 998ebcdc0f3d..d2bd4b5510b8 100644
--- a/code/lib/core-events/src/data/request-response.ts
+++ b/code/lib/core-events/src/data/request-response.ts
@@ -3,6 +3,6 @@ export type RequestData = {
   payload: Payload;
 };
 
-export type ResponseData =
+export type ResponseData | void = void> =
   | { id: string; success: true; error: null; payload: Payload }
-  | { id: string; success: false; error: string; payload: null };
+  | { id: string; success: false; error: string; payload?: ErrorPayload };
diff --git a/code/lib/core-server/src/server-channel/create-new-story-channel.ts b/code/lib/core-server/src/server-channel/create-new-story-channel.ts
index d11ab389ecc3..4b61b53d5b2a 100644
--- a/code/lib/core-server/src/server-channel/create-new-story-channel.ts
+++ b/code/lib/core-server/src/server-channel/create-new-story-channel.ts
@@ -1,6 +1,7 @@
 import type { Options } from '@storybook/types';
 import type { Channel } from '@storybook/channels';
 import type {
+  CreateNewStoryErrorPayload,
   CreateNewStoryRequestPayload,
   CreateNewStoryResponsePayload,
   RequestData,
@@ -31,14 +32,22 @@ export function initCreateNewStoryChannel(channel: Channel, options: Options) {
 
         const relativeStoryFilePath = path.relative(process.cwd(), storyFilePath);
 
+        const storyId = await getStoryId({ storyFilePath, exportedStoryName }, options);
+
         if (existsSync(storyFilePath)) {
-          throw new Error(`Story file already exists at ${relativeStoryFilePath}`);
+          channel.emit(CREATE_NEW_STORYFILE_RESPONSE, {
+            success: false,
+            id: data.id,
+            payload: {
+              type: 'STORY_FILE_EXISTS',
+              storyId: storyId,
+            },
+            error: `A story file already exists at ${relativeStoryFilePath}`,
+          } satisfies ResponseData);
         }
 
         await fs.writeFile(storyFilePath, storyFileContent, 'utf-8');
 
-        const storyId = await getStoryId({ storyFilePath, exportedStoryName }, options);
-
         channel.emit(CREATE_NEW_STORYFILE_RESPONSE, {
           success: true,
           id: data.id,
@@ -53,7 +62,6 @@ export function initCreateNewStoryChannel(channel: Channel, options: Options) {
         channel.emit(CREATE_NEW_STORYFILE_RESPONSE, {
           success: false,
           id: data.id,
-          payload: null,
           error: e?.message,
         } satisfies ResponseData);
       }
diff --git a/code/lib/core-server/src/server-channel/file-search-channel.ts b/code/lib/core-server/src/server-channel/file-search-channel.ts
index 721ab5d1707c..e0d92c24ad72 100644
--- a/code/lib/core-server/src/server-channel/file-search-channel.ts
+++ b/code/lib/core-server/src/server-channel/file-search-channel.ts
@@ -92,7 +92,6 @@ export function initFileSearchChannel(channel: Channel, options: Options) {
         channel.emit(FILE_COMPONENT_SEARCH_RESPONSE, {
           success: false,
           id: searchQuery ?? '',
-          payload: null,
           error: `An error occurred while searching for components in the project.\n${e?.message}`,
         } satisfies ResponseData);
       }
diff --git a/code/lib/core-server/src/utils/save-story/save-story.ts b/code/lib/core-server/src/utils/save-story/save-story.ts
index 8c2a69af9e4e..03e359e85c03 100644
--- a/code/lib/core-server/src/utils/save-story/save-story.ts
+++ b/code/lib/core-server/src/utils/save-story/save-story.ts
@@ -124,7 +124,6 @@ export function initializeSaveStory(channel: Channel, options: Options, coreConf
         id,
         success: false,
         error: error instanceof SaveStoryError ? error.message : 'Unknown error',
-        payload: null,
       } satisfies ResponseData);
 
       logger.error(
diff --git a/code/lib/manager-api/src/lib/request-response.ts b/code/lib/manager-api/src/lib/request-response.ts
index c52e8ad8da2d..bed05f576461 100644
--- a/code/lib/manager-api/src/lib/request-response.ts
+++ b/code/lib/manager-api/src/lib/request-response.ts
@@ -1,10 +1,21 @@
 import type { Channel } from '@storybook/channels';
 import type { RequestData, ResponseData } from '@storybook/core-events';
 
-class RequestResponseError extends Error {}
+export class RequestResponseError | void> extends Error {
+  payload: Payload | undefined = undefined;
+
+  constructor(message: string, payload?: Payload) {
+    super(message);
+    this.payload = payload;
+  }
+}
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export const experimental_requestResponse = (
+export const experimental_requestResponse = <
+  RequestPayload,
+  ResponsePayload = void,
+  CreateNewStoryErrorPayload extends Record | void = void,
+>(
   channel: Channel,
   requestEvent: string,
   responseEvent: string,
@@ -19,12 +30,14 @@ export const experimental_requestResponse = ) => {
+    const responseHandler = (
+      response: ResponseData
+    ) => {
       if (response.id !== request.id) return;
       clearTimeout(timeoutId);
       channel.off(responseEvent, responseHandler);
       if (response.success) resolve(response.payload);
-      else reject(new RequestResponseError(response.error));
+      else reject(new RequestResponseError(response.error, response.payload));
     };
 
     channel.emit(requestEvent, request);
diff --git a/code/lib/preview-api/src/modules/preview-web/Preview.tsx b/code/lib/preview-api/src/modules/preview-web/Preview.tsx
index 69dace1ba1a3..ee4524c32ecf 100644
--- a/code/lib/preview-api/src/modules/preview-web/Preview.tsx
+++ b/code/lib/preview-api/src/modules/preview-web/Preview.tsx
@@ -318,7 +318,6 @@ export class Preview {
       this.channel.emit(ARGTYPES_INFO_RESPONSE, {
         id,
         success: false,
-        payload: null,
         error: e?.message,
       } satisfies ResponseData);
     }
diff --git a/code/ui/manager/src/components/sidebar/CreateNewStoryFileModal.tsx b/code/ui/manager/src/components/sidebar/CreateNewStoryFileModal.tsx
index ffb12fe67b3e..bfaec7e0e8e9 100644
--- a/code/ui/manager/src/components/sidebar/CreateNewStoryFileModal.tsx
+++ b/code/ui/manager/src/components/sidebar/CreateNewStoryFileModal.tsx
@@ -3,6 +3,7 @@ import { CheckIcon } from '@storybook/icons';
 import type {
   ArgTypesRequestPayload,
   ArgTypesResponsePayload,
+  CreateNewStoryErrorPayload,
   CreateNewStoryRequestPayload,
   CreateNewStoryResponsePayload,
   FileComponentSearchRequestPayload,
@@ -22,7 +23,12 @@ import {
   SAVE_STORY_REQUEST,
   SAVE_STORY_RESPONSE,
 } from '@storybook/core-events';
-import { addons, experimental_requestResponse, useStorybookApi } from '@storybook/manager-api';
+import {
+  RequestResponseError,
+  addons,
+  experimental_requestResponse,
+  useStorybookApi,
+} from '@storybook/manager-api';
 
 import { useDebounce } from '../../hooks/useDebounce';
 import type { NewStoryPayload, SearchResult } from './FileSearchList';
@@ -70,6 +76,23 @@ export const CreateNewStoryFileModal = ({ open, onOpenChange }: CreateNewStoryFi
     [api, onOpenChange]
   );
 
+  const handleStoryAlreadyExists = useCallback(
+    (storyId: string) => {
+      api.addNotification({
+        id: 'create-new-story-file-error',
+        content: {
+          headline: 'Story already exists',
+          subHeadline: `Successfully navigated to existing story`,
+        },
+        duration: 8_000,
+        icon: ,
+      });
+
+      onOpenChange(false);
+    },
+    [api, onOpenChange]
+  );
+
   const handleFileSearch = useCallback(() => {
     setLoading(true);
     const channel = addons.getChannel();
@@ -121,7 +144,8 @@ export const CreateNewStoryFileModal = ({ open, onOpenChange }: CreateNewStoryFi
 
         const createNewStoryResult = await experimental_requestResponse<
           CreateNewStoryRequestPayload,
-          CreateNewStoryResponsePayload
+          CreateNewStoryResponsePayload,
+          CreateNewStoryErrorPayload
         >(channel, CREATE_NEW_STORYFILE_REQUEST, CREATE_NEW_STORYFILE_RESPONSE, {
           componentExportName,
           componentFilePath,
@@ -161,11 +185,20 @@ export const CreateNewStoryFileModal = ({ open, onOpenChange }: CreateNewStoryFi
 
         handleSuccessfullyCreatedStory(componentExportName);
         handleFileSearch();
-      } catch (e) {
-        setError({ selectedItemId: selectedItemId, error: e?.message });
+      } catch (e: unknown) {
+        if (e instanceof RequestResponseError) {
+          const err = e as RequestResponseError;
+          if (err.payload.type === 'STORY_FILE_EXISTS') {
+            await trySelectNewStory(api.selectStory, err.payload.storyId);
+            handleStoryAlreadyExists(err.payload.storyId);
+            return;
+          }
+        }
+
+        setError({ selectedItemId: selectedItemId, error: (e as any)?.message });
       }
     },
-    [api?.selectStory, handleSuccessfullyCreatedStory, handleFileSearch]
+    [api?.selectStory, handleSuccessfullyCreatedStory, handleFileSearch, handleStoryAlreadyExists]
   );
 
   useEffect(() => {
diff --git a/code/ui/manager/src/components/sidebar/FileSearchList.tsx b/code/ui/manager/src/components/sidebar/FileSearchList.tsx
index 381e2812d276..11dfe7cd7e9b 100644
--- a/code/ui/manager/src/components/sidebar/FileSearchList.tsx
+++ b/code/ui/manager/src/components/sidebar/FileSearchList.tsx
@@ -26,12 +26,11 @@ import { useVirtualizer } from '@tanstack/react-virtual';
 import type {
   CreateNewStoryRequestPayload,
   FileComponentSearchResponsePayload,
-  ResponseData,
 } from '@storybook/core-events';
 import { WithTooltip, TooltipNote } from '@storybook/components';
 import { useArrowKeyNavigation } from './FIleSearchList.utils';
 
-export type SearchResult = ResponseData['payload']['files'][0];
+export type SearchResult = FileComponentSearchResponsePayload['files'][0];
 
 export interface NewStoryPayload extends CreateNewStoryRequestPayload {
   selectedItemId: string | number;
@@ -86,21 +85,21 @@ export const FileSearchList = memo(function FileSearchList({
   const sortedSearchResults = useMemo(() => {
     // search results with no exports should be at the end of the list
     return [...(searchResults ?? [])]?.sort((a, b) => {
-      const isADisabled =
+      const isALowPriority =
         a.exportedComponents === null ||
         a.exportedComponents?.length === 0 ||
         (a.storyFileExists && a.exportedComponents?.length < 2);
 
-      const isBDisabled =
+      const isBLowPriority =
         b.exportedComponents === null ||
         b.exportedComponents?.length === 0 ||
         (b.storyFileExists && b.exportedComponents?.length < 2);
 
-      if (isADisabled && !isBDisabled) {
+      if (isALowPriority && !isBLowPriority) {
         return 1;
       }
 
-      if (!isADisabled && isBDisabled) {
+      if (!isALowPriority && isBLowPriority) {
         return -1;
       }
 
@@ -131,7 +130,7 @@ export const FileSearchList = memo(function FileSearchList({
 
           return virtualItem.index;
         });
-      } else if (searchResult?.exportedComponents?.length === 1 && !searchResult?.storyFileExists) {
+      } else if (searchResult?.exportedComponents?.length === 1) {
         onNewStory({
           componentExportName: searchResult.exportedComponents[0].name,
           componentFilePath: searchResult.filepath,
@@ -174,8 +173,7 @@ export const FileSearchList = memo(function FileSearchList({
             error={itemError}
             disabled={
               searchResult.exportedComponents === null ||
-              searchResult.exportedComponents?.length === 0 ||
-              (searchResult.storyFileExists && searchResult.exportedComponents?.length < 2)
+              searchResult.exportedComponents?.length === 0
             }
           >
             
@@ -289,8 +287,6 @@ export const FileSearchList = memo(function FileSearchList({
               const noExports =
                 searchResult.exportedComponents === null ||
                 searchResult.exportedComponents?.length === 0;
-              const hasStoryFile =
-                searchResult.exportedComponents?.length === 1 && searchResult.storyFileExists;
 
               const itemProps = {};
 
@@ -324,7 +320,7 @@ export const FileSearchList = memo(function FileSearchList({
                   }}
                   tabIndex={0}
                 >
-                  {noExports || hasStoryFile ? (
+                  {noExports ? (
                     
                       }
diff --git a/code/ui/manager/src/globals/exports.ts b/code/ui/manager/src/globals/exports.ts
index 7140911fe003..d89f2fc14018 100644
--- a/code/ui/manager/src/globals/exports.ts
+++ b/code/ui/manager/src/globals/exports.ts
@@ -469,6 +469,7 @@ export default {
     'Consumer',
     'ManagerContext',
     'Provider',
+    'RequestResponseError',
     'addons',
     'combineParameters',
     'controlOrMetaKey',

From 50fbf501f35ba848e8a498f17e69aceda6687d1d Mon Sep 17 00:00:00 2001
From: Valentin Palkovic 
Date: Tue, 30 Apr 2024 14:53:07 +0200
Subject: [PATCH 344/380] Fix tests

---
 .../src/server-channel/create-new-story-channel.test.ts          | 1 -
 .../core-server/src/server-channel/file-search-channel.test.ts   | 1 -
 2 files changed, 2 deletions(-)

diff --git a/code/lib/core-server/src/server-channel/create-new-story-channel.test.ts b/code/lib/core-server/src/server-channel/create-new-story-channel.test.ts
index 12aa76d02f5d..e3311626b4b1 100644
--- a/code/lib/core-server/src/server-channel/create-new-story-channel.test.ts
+++ b/code/lib/core-server/src/server-channel/create-new-story-channel.test.ts
@@ -126,7 +126,6 @@ describe('createNewStoryChannel', () => {
 
       expect(createNewStoryFileEventListener).toHaveBeenCalledWith({
         error: 'Failed to write file',
-        payload: null,
         id: 'components-page--default',
         success: false,
       });
diff --git a/code/lib/core-server/src/server-channel/file-search-channel.test.ts b/code/lib/core-server/src/server-channel/file-search-channel.test.ts
index 1ecc2a753c04..092445194219 100644
--- a/code/lib/core-server/src/server-channel/file-search-channel.test.ts
+++ b/code/lib/core-server/src/server-channel/file-search-channel.test.ts
@@ -165,7 +165,6 @@ describe('file-search-channel', () => {
 
       expect(searchResultChannelListener).toHaveBeenCalledWith({
         id: data.searchQuery,
-        payload: null,
         error:
           'An error occurred while searching for components in the project.\nENOENT: no such file or directory',
         success: false,

From ad1b0b0b8d46b7eee38e34a5fb6b7e853dd85826 Mon Sep 17 00:00:00 2001
From: Valentin Palkovic 
Date: Tue, 30 Apr 2024 15:10:26 +0200
Subject: [PATCH 345/380] Implement telemetry for create-new-story-file flow

---
 .../core-server/src/presets/common-preset.ts  |  4 +-
 .../create-new-story-channel.test.ts          | 56 +++++++++++--------
 .../create-new-story-channel.ts               | 31 +++++++++-
 .../file-search-channel.test.ts               |  6 +-
 .../src/server-channel/file-search-channel.ts | 32 ++++++++++-
 code/lib/telemetry/src/types.ts               |  4 +-
 6 files changed, 99 insertions(+), 34 deletions(-)

diff --git a/code/lib/core-server/src/presets/common-preset.ts b/code/lib/core-server/src/presets/common-preset.ts
index 2450812dd8d9..0089a4a74fa7 100644
--- a/code/lib/core-server/src/presets/common-preset.ts
+++ b/code/lib/core-server/src/presets/common-preset.ts
@@ -241,8 +241,8 @@ export const experimental_serverChannel = async (
   initializeWhatsNew(channel, options, coreOptions);
   initializeSaveStory(channel, options, coreOptions);
 
-  initFileSearchChannel(channel, options);
-  initCreateNewStoryChannel(channel, options);
+  initFileSearchChannel(channel, options, coreOptions);
+  initCreateNewStoryChannel(channel, options, coreOptions);
 
   return channel;
 };
diff --git a/code/lib/core-server/src/server-channel/create-new-story-channel.test.ts b/code/lib/core-server/src/server-channel/create-new-story-channel.test.ts
index e3311626b4b1..dc3763cb2d6b 100644
--- a/code/lib/core-server/src/server-channel/create-new-story-channel.test.ts
+++ b/code/lib/core-server/src/server-channel/create-new-story-channel.test.ts
@@ -49,19 +49,23 @@ describe('createNewStoryChannel', () => {
       mockChannel.addListener(CREATE_NEW_STORYFILE_RESPONSE, createNewStoryFileEventListener);
       const cwd = process.cwd();
 
-      initCreateNewStoryChannel(mockChannel, {
-        configDir: path.join(cwd, '.storybook'),
-        presets: {
-          apply: (val: string) => {
-            if (val === 'framework') {
-              return Promise.resolve('@storybook/nextjs');
-            }
-            if (val === 'stories') {
-              return Promise.resolve(['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)']);
-            }
+      initCreateNewStoryChannel(
+        mockChannel,
+        {
+          configDir: path.join(cwd, '.storybook'),
+          presets: {
+            apply: (val: string) => {
+              if (val === 'framework') {
+                return Promise.resolve('@storybook/nextjs');
+              }
+              if (val === 'stories') {
+                return Promise.resolve(['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)']);
+              }
+            },
           },
-        },
-      } as any);
+        } as any,
+        { disableTelemetry: true }
+      );
 
       mockChannel.emit(CREATE_NEW_STORYFILE_REQUEST, {
         id: 'components-page--default',
@@ -96,19 +100,23 @@ describe('createNewStoryChannel', () => {
         throw new Error('Failed to write file');
       });
 
-      initCreateNewStoryChannel(mockChannel, {
-        configDir: path.join(cwd, '.storybook'),
-        presets: {
-          apply: (val: string) => {
-            if (val === 'framework') {
-              return Promise.resolve('@storybook/nextjs');
-            }
-            if (val === 'stories') {
-              return Promise.resolve(['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)']);
-            }
+      initCreateNewStoryChannel(
+        mockChannel,
+        {
+          configDir: path.join(cwd, '.storybook'),
+          presets: {
+            apply: (val: string) => {
+              if (val === 'framework') {
+                return Promise.resolve('@storybook/nextjs');
+              }
+              if (val === 'stories') {
+                return Promise.resolve(['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)']);
+              }
+            },
           },
-        },
-      } as any);
+        } as any,
+        { disableTelemetry: true }
+      );
 
       mockChannel.emit(CREATE_NEW_STORYFILE_REQUEST, {
         id: 'components-page--default',
diff --git a/code/lib/core-server/src/server-channel/create-new-story-channel.ts b/code/lib/core-server/src/server-channel/create-new-story-channel.ts
index 4b61b53d5b2a..a729f734dd93 100644
--- a/code/lib/core-server/src/server-channel/create-new-story-channel.ts
+++ b/code/lib/core-server/src/server-channel/create-new-story-channel.ts
@@ -1,5 +1,6 @@
-import type { Options } from '@storybook/types';
+import type { CoreConfig, Options } from '@storybook/types';
 import type { Channel } from '@storybook/channels';
+import { telemetry } from '@storybook/telemetry';
 import type {
   CreateNewStoryErrorPayload,
   CreateNewStoryRequestPayload,
@@ -17,7 +18,11 @@ import { getNewStoryFile } from '../utils/get-new-story-file';
 import { getStoryId } from '../utils/get-story-id';
 import path from 'node:path';
 
-export function initCreateNewStoryChannel(channel: Channel, options: Options) {
+export function initCreateNewStoryChannel(
+  channel: Channel,
+  options: Options,
+  coreOptions: CoreConfig
+) {
   /**
    * Listens for events to create a new storyfile
    */
@@ -44,6 +49,15 @@ export function initCreateNewStoryChannel(channel: Channel, options: Options) {
             },
             error: `A story file already exists at ${relativeStoryFilePath}`,
           } satisfies ResponseData);
+
+          if (!coreOptions.disableTelemetry) {
+            telemetry('create-new-story-file', {
+              success: false,
+              error: 'STORY_FILE_EXISTS',
+            });
+          }
+
+          return;
         }
 
         await fs.writeFile(storyFilePath, storyFileContent, 'utf-8');
@@ -58,12 +72,25 @@ export function initCreateNewStoryChannel(channel: Channel, options: Options) {
           },
           error: null,
         } satisfies ResponseData);
+
+        if (!coreOptions.disableTelemetry) {
+          telemetry('create-new-story-file', {
+            success: true,
+          });
+        }
       } catch (e: any) {
         channel.emit(CREATE_NEW_STORYFILE_RESPONSE, {
           success: false,
           id: data.id,
           error: e?.message,
         } satisfies ResponseData);
+
+        if (!coreOptions.disableTelemetry) {
+          await telemetry('create-new-story-file', {
+            success: false,
+            error: e,
+          });
+        }
       }
     }
   );
diff --git a/code/lib/core-server/src/server-channel/file-search-channel.test.ts b/code/lib/core-server/src/server-channel/file-search-channel.test.ts
index 092445194219..d12af10ca261 100644
--- a/code/lib/core-server/src/server-channel/file-search-channel.test.ts
+++ b/code/lib/core-server/src/server-channel/file-search-channel.test.ts
@@ -49,7 +49,7 @@ describe('file-search-channel', () => {
       const mockOptions = {};
       const data = { searchQuery: 'es-module' };
 
-      initFileSearchChannel(mockChannel, mockOptions as any);
+      initFileSearchChannel(mockChannel, mockOptions as any, { disableTelemetry: true });
 
       mockChannel.addListener(FILE_COMPONENT_SEARCH_RESPONSE, searchResultChannelListener);
       mockChannel.emit(FILE_COMPONENT_SEARCH_REQUEST, {
@@ -114,7 +114,7 @@ describe('file-search-channel', () => {
       const mockOptions = {};
       const data = { searchQuery: 'no-file-for-search-query' };
 
-      initFileSearchChannel(mockChannel, mockOptions as any);
+      initFileSearchChannel(mockChannel, mockOptions as any, { disableTelemetry: true });
 
       mockChannel.addListener(FILE_COMPONENT_SEARCH_RESPONSE, searchResultChannelListener);
       mockChannel.emit(FILE_COMPONENT_SEARCH_REQUEST, {
@@ -148,7 +148,7 @@ describe('file-search-channel', () => {
       const mockOptions = {};
       const data = { searchQuery: 'commonjs' };
 
-      initFileSearchChannel(mockChannel, mockOptions as any);
+      initFileSearchChannel(mockChannel, mockOptions as any, { disableTelemetry: true });
 
       mockChannel.addListener(FILE_COMPONENT_SEARCH_RESPONSE, searchResultChannelListener);
 
diff --git a/code/lib/core-server/src/server-channel/file-search-channel.ts b/code/lib/core-server/src/server-channel/file-search-channel.ts
index e0d92c24ad72..58e94fdfcc77 100644
--- a/code/lib/core-server/src/server-channel/file-search-channel.ts
+++ b/code/lib/core-server/src/server-channel/file-search-channel.ts
@@ -1,4 +1,4 @@
-import type { Options, SupportedRenderers } from '@storybook/types';
+import type { CoreConfig, Options, SupportedRenderers } from '@storybook/types';
 import type { Channel } from '@storybook/channels';
 import {
   extractProperRendererNameFromFramework,
@@ -21,8 +21,13 @@ import {
   FILE_COMPONENT_SEARCH_RESPONSE,
 } from '@storybook/core-events';
 import { doesStoryFileExist, getStoryMetadata } from '../utils/get-new-story-file';
+import { telemetry } from '@storybook/telemetry';
 
-export function initFileSearchChannel(channel: Channel, options: Options) {
+export async function initFileSearchChannel(
+  channel: Channel,
+  options: Options,
+  coreOptions: CoreConfig
+) {
   /**
    * Listens for a search query event and searches for files in the project
    */
@@ -69,6 +74,13 @@ export function initFileSearchChannel(channel: Channel, options: Options) {
               storyFileExists,
             };
           } catch (e) {
+            if (!coreOptions.disableTelemetry) {
+              telemetry('create-new-story-file-search', {
+                success: false,
+                error: `Could not parse file: ${e}`,
+              });
+            }
+
             return {
               filepath: file,
               storyFileExists: false,
@@ -77,6 +89,15 @@ export function initFileSearchChannel(channel: Channel, options: Options) {
           }
         });
 
+        if (!coreOptions.disableTelemetry) {
+          telemetry('create-new-story-file-search', {
+            success: true,
+            payload: {
+              fileCount: entries.length,
+            },
+          });
+        }
+
         channel.emit(FILE_COMPONENT_SEARCH_RESPONSE, {
           success: true,
           id: searchQuery,
@@ -94,6 +115,13 @@ export function initFileSearchChannel(channel: Channel, options: Options) {
           id: searchQuery ?? '',
           error: `An error occurred while searching for components in the project.\n${e?.message}`,
         } satisfies ResponseData);
+
+        if (!coreOptions.disableTelemetry) {
+          telemetry('create-new-story-file-search', {
+            success: false,
+            error: `An error occured while searching for components: ${e}`,
+          });
+        }
       }
     }
   );
diff --git a/code/lib/telemetry/src/types.ts b/code/lib/telemetry/src/types.ts
index 4d45b59ea21d..c6372084c2c8 100644
--- a/code/lib/telemetry/src/types.ts
+++ b/code/lib/telemetry/src/types.ts
@@ -17,7 +17,9 @@ export type EventType =
   | 'version-update'
   | 'core-config'
   | 'remove'
-  | 'save-story';
+  | 'save-story'
+  | 'create-new-story-file'
+  | 'create-new-story-file-search';
 
 export interface Dependency {
   version: string | undefined;

From 1298227d45cdba3b6d5966a3ace8bad2f942a3a6 Mon Sep 17 00:00:00 2001
From: Valentin Palkovic 
Date: Tue, 30 Apr 2024 15:20:21 +0200
Subject: [PATCH 346/380] Fix sorting for file search

---
 .../src/components/sidebar/FileSearchList.tsx | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/code/ui/manager/src/components/sidebar/FileSearchList.tsx b/code/ui/manager/src/components/sidebar/FileSearchList.tsx
index 11dfe7cd7e9b..316704abfba6 100644
--- a/code/ui/manager/src/components/sidebar/FileSearchList.tsx
+++ b/code/ui/manager/src/components/sidebar/FileSearchList.tsx
@@ -85,15 +85,19 @@ export const FileSearchList = memo(function FileSearchList({
   const sortedSearchResults = useMemo(() => {
     // search results with no exports should be at the end of the list
     return [...(searchResults ?? [])]?.sort((a, b) => {
-      const isALowPriority =
-        a.exportedComponents === null ||
-        a.exportedComponents?.length === 0 ||
-        (a.storyFileExists && a.exportedComponents?.length < 2);
+      const isALowPriority = a.exportedComponents === null || a.exportedComponents?.length === 0;
+      const hasAStory = a.storyFileExists;
 
-      const isBLowPriority =
-        b.exportedComponents === null ||
-        b.exportedComponents?.length === 0 ||
-        (b.storyFileExists && b.exportedComponents?.length < 2);
+      const isBLowPriority = b.exportedComponents === null || b.exportedComponents?.length === 0;
+      const hasBStory = b.storyFileExists;
+
+      if (hasAStory && !hasBStory) {
+        return -1;
+      }
+
+      if (hasBStory && !hasAStory) {
+        return 1;
+      }
 
       if (isALowPriority && !isBLowPriority) {
         return 1;

From fd1b05b08e1becb8dafea291c4fca2a7e9c25f09 Mon Sep 17 00:00:00 2001
From: Kasper Peulen 
Date: Tue, 30 Apr 2024 15:24:39 +0200
Subject: [PATCH 347/380] Fix unit test

---
 .../portable-stories.test.tsx.snap            |   2 +-
 .../nextjs/yarn.lock                          | 106 +++++++++---------
 2 files changed, 54 insertions(+), 54 deletions(-)

diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/__snapshots__/portable-stories.test.tsx.snap b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/__snapshots__/portable-stories.test.tsx.snap
index 2f6747019333..5e046e9b7a0b 100644
--- a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/__snapshots__/portable-stories.test.tsx.snap
+++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/__snapshots__/portable-stories.test.tsx.snap
@@ -1010,7 +1010,7 @@ exports[`renders nextHeaderStories stories renders Default 1`] = `
         
          
         
-          firstName=Jane; ; lastName=Doe; 
+          firstName=Jane; lastName=Doe
         
       

       

Date: Tue, 30 Apr 2024 17:07:41 +0200
Subject: [PATCH 348/380] change placeholder, to indicate you can use globs

---
 code/ui/manager/src/components/sidebar/FileSearchModal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/ui/manager/src/components/sidebar/FileSearchModal.tsx b/code/ui/manager/src/components/sidebar/FileSearchModal.tsx
index bfc007e75c0e..c0dc3a77f08e 100644
--- a/code/ui/manager/src/components/sidebar/FileSearchModal.tsx
+++ b/code/ui/manager/src/components/sidebar/FileSearchModal.tsx
@@ -174,7 +174,7 @@ export const FileSearchModal = ({
               
             
             
Date: Tue, 30 Apr 2024 18:11:54 +0200
Subject: [PATCH 349/380] Suppress caught redirect errors in next framework.

---
 code/frameworks/nextjs/src/preview.tsx      |  8 ++++++++
 code/lib/react-dom-shim/src/react-18.tsx    | 11 ++++++-----
 code/renderers/react/src/renderToCanvas.tsx |  2 +-
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/code/frameworks/nextjs/src/preview.tsx b/code/frameworks/nextjs/src/preview.tsx
index 99d800fe109e..9a46a56c6918 100644
--- a/code/frameworks/nextjs/src/preview.tsx
+++ b/code/frameworks/nextjs/src/preview.tsx
@@ -78,4 +78,12 @@ export const parameters = {
       excludeDecorators: true,
     },
   },
+  react: {
+    rootOptions: {
+      onCaughtError(error: unknown) {
+        if (isNextRouterError(error)) return;
+        console.error(error);
+      },
+    },
+  },
 };
diff --git a/code/lib/react-dom-shim/src/react-18.tsx b/code/lib/react-dom-shim/src/react-18.tsx
index ddfa738d4dd9..e2f6fb399f22 100644
--- a/code/lib/react-dom-shim/src/react-18.tsx
+++ b/code/lib/react-dom-shim/src/react-18.tsx
@@ -1,7 +1,8 @@
 import type { FC, ReactElement } from 'react';
-import type { Root as ReactRoot } from 'react-dom/client';
+import type { Root as ReactRoot, RootOptions } from 'react-dom/client';
 import React, { useLayoutEffect, useRef } from 'react';
 import ReactDOM from 'react-dom/client';
+import { type StoryContext } from '@storybook/csf';
 
 // A map of all rendered React 18 nodes
 const nodes = new Map();
@@ -21,9 +22,9 @@ const WithCallback: FC<{ callback: () => void; children: ReactElement }> = ({
   return children;
 };
 
-export const renderElement = async (node: ReactElement, el: Element) => {
+export const renderElement = async (node: ReactElement, el: Element, context: StoryContext) => {
   // Create Root Element conditionally for new React 18 Root Api
-  const root = await getReactRoot(el);
+  const root = await getReactRoot(el, context.parameters.react.rootOptions);
 
   return new Promise((resolve) => {
     root.render( resolve(null)}>{node});
@@ -39,11 +40,11 @@ export const unmountElement = (el: Element, shouldUseNewRootApi?: boolean) => {
   }
 };
 
-const getReactRoot = async (el: Element): Promise => {
+const getReactRoot = async (el: Element, rootOptions: RootOptions): Promise => {
   let root = nodes.get(el);
 
   if (!root) {
-    root = ReactDOM.createRoot(el);
+    root = ReactDOM.createRoot(el, rootOptions);
     nodes.set(el, root);
   }
 
diff --git a/code/renderers/react/src/renderToCanvas.tsx b/code/renderers/react/src/renderToCanvas.tsx
index d8821a3458e4..10241ce2edbb 100644
--- a/code/renderers/react/src/renderToCanvas.tsx
+++ b/code/renderers/react/src/renderToCanvas.tsx
@@ -74,7 +74,7 @@ export async function renderToCanvas(
     unmountElement(canvasElement);
   }
 
-  await renderElement(element, canvasElement);
+  await renderElement(element, canvasElement, storyContext);
 
   return () => unmountElement(canvasElement);
 }

From d1dbc736800858dab40e73711da43a49b4db89dd Mon Sep 17 00:00:00 2001
From: Norbert de Langen 
Date: Tue, 30 Apr 2024 21:29:23 +0200
Subject: [PATCH 350/380] improve UI in dark mode

---
 code/ui/components/src/components/Modal/Modal.styled.tsx     | 1 -
 code/ui/manager/src/components/sidebar/FileList.tsx          | 4 ++--
 .../src/components/sidebar/FileSearchList.stories.tsx        | 3 +++
 code/ui/manager/src/components/sidebar/FileSearchModal.tsx   | 5 +++--
 4 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/code/ui/components/src/components/Modal/Modal.styled.tsx b/code/ui/components/src/components/Modal/Modal.styled.tsx
index 12a96e81b194..b60e512b74ab 100644
--- a/code/ui/components/src/components/Modal/Modal.styled.tsx
+++ b/code/ui/components/src/components/Modal/Modal.styled.tsx
@@ -103,7 +103,6 @@ export const Title = styled(Dialog.Title)(({ theme }) => ({
 export const Description = styled(Dialog.Description)(({ theme }) => ({
   margin: 0,
   fontSize: theme.typography.size.s2,
-  color: theme.color.mediumdark,
 }));
 
 export const Actions = styled.div({
diff --git a/code/ui/manager/src/components/sidebar/FileList.tsx b/code/ui/manager/src/components/sidebar/FileList.tsx
index d56cfc096720..420d4ce5dc6e 100644
--- a/code/ui/manager/src/components/sidebar/FileList.tsx
+++ b/code/ui/manager/src/components/sidebar/FileList.tsx
@@ -79,12 +79,12 @@ export const FileListItemContentWrapper = styled.div<{
   }),
 
   ...(error && {
-    background: '#F9ECEC',
+    background: theme.base === 'light' ? '#00000011' : '#00000033',
   }),
 
   '&:hover': {
     background: error
-      ? '#F9ECEC'
+      ? '#00000022'
       : theme.base === 'dark'
         ? 'rgba(255,255,255,.1)'
         : theme.color.mediumlight,
diff --git a/code/ui/manager/src/components/sidebar/FileSearchList.stories.tsx b/code/ui/manager/src/components/sidebar/FileSearchList.stories.tsx
index 6aa590c6d34a..f2fb798d5992 100644
--- a/code/ui/manager/src/components/sidebar/FileSearchList.stories.tsx
+++ b/code/ui/manager/src/components/sidebar/FileSearchList.stories.tsx
@@ -8,6 +8,9 @@ const meta = {
   args: {
     onNewStory: fn(),
   },
+  parameters: {
+    layout: 'fullscreen',
+  },
 } satisfies Meta;
 
 export default meta;
diff --git a/code/ui/manager/src/components/sidebar/FileSearchModal.tsx b/code/ui/manager/src/components/sidebar/FileSearchModal.tsx
index c0dc3a77f08e..40f7b4e76ba9 100644
--- a/code/ui/manager/src/components/sidebar/FileSearchModal.tsx
+++ b/code/ui/manager/src/components/sidebar/FileSearchModal.tsx
@@ -24,9 +24,10 @@ const ModalChild = styled.div<{ height?: number }>(({ theme, height }) => ({
   overflow: 'hidden',
 }));
 
-const ModalContent = styled(Modal.Content)({
+const ModalContent = styled(Modal.Content)(({ theme }) => ({
   margin: 0,
-});
+  color: theme.base === 'dark' ? theme.color.lighter : theme.color.mediumdark,
+}));
 
 const ModalInput = styled(Form.Input)(({ theme }) => ({
   paddingLeft: 40,

From 9b2b60fce6678e618be4987b07d8d40fd10d77ae Mon Sep 17 00:00:00 2001
From: Valentin Palkovic 
Date: Tue, 30 Apr 2024 22:11:32 +0200
Subject: [PATCH 351/380] Fix selection of story if it exists

---
 .../core-events/src/data/create-new-story.ts  |  2 +-
 .../create-new-story-channel.ts               |  4 +-
 .../src/utils/get-story-id.test.ts            |  3 +-
 .../lib/core-server/src/utils/get-story-id.ts |  6 +-
 .../sidebar/CreateNewStoryFileModal.tsx       | 55 ++++++++-----------
 5 files changed, 33 insertions(+), 37 deletions(-)

diff --git a/code/lib/core-events/src/data/create-new-story.ts b/code/lib/core-events/src/data/create-new-story.ts
index 733b273d5056..8727d99f0c12 100644
--- a/code/lib/core-events/src/data/create-new-story.ts
+++ b/code/lib/core-events/src/data/create-new-story.ts
@@ -20,5 +20,5 @@ export interface CreateNewStoryResponsePayload {
 
 export type CreateNewStoryErrorPayload = {
   type: 'STORY_FILE_EXISTS';
-  storyId: string;
+  kind: string;
 };
diff --git a/code/lib/core-server/src/server-channel/create-new-story-channel.ts b/code/lib/core-server/src/server-channel/create-new-story-channel.ts
index a729f734dd93..18d755afbd44 100644
--- a/code/lib/core-server/src/server-channel/create-new-story-channel.ts
+++ b/code/lib/core-server/src/server-channel/create-new-story-channel.ts
@@ -37,7 +37,7 @@ export function initCreateNewStoryChannel(
 
         const relativeStoryFilePath = path.relative(process.cwd(), storyFilePath);
 
-        const storyId = await getStoryId({ storyFilePath, exportedStoryName }, options);
+        const { storyId, kind } = await getStoryId({ storyFilePath, exportedStoryName }, options);
 
         if (existsSync(storyFilePath)) {
           channel.emit(CREATE_NEW_STORYFILE_RESPONSE, {
@@ -45,7 +45,7 @@ export function initCreateNewStoryChannel(
             id: data.id,
             payload: {
               type: 'STORY_FILE_EXISTS',
-              storyId: storyId,
+              kind,
             },
             error: `A story file already exists at ${relativeStoryFilePath}`,
           } satisfies ResponseData);
diff --git a/code/lib/core-server/src/utils/get-story-id.test.ts b/code/lib/core-server/src/utils/get-story-id.test.ts
index 4fb0230bc21e..243fbed6160f 100644
--- a/code/lib/core-server/src/utils/get-story-id.test.ts
+++ b/code/lib/core-server/src/utils/get-story-id.test.ts
@@ -18,9 +18,10 @@ describe('getStoryId', () => {
     const storyFilePath = path.join(cwd, 'src', 'components', 'stories', 'Page1.stories.ts');
     const exportedStoryName = 'Default';
 
-    const storyId = await getStoryId({ storyFilePath, exportedStoryName }, options);
+    const { storyId, kind } = await getStoryId({ storyFilePath, exportedStoryName }, options);
 
     expect(storyId).toBe('components-stories-page1--default');
+    expect(kind).toBe('components-stories-page1');
   });
 
   it('should throw an error if the storyId cannot be calculated', async () => {
diff --git a/code/lib/core-server/src/utils/get-story-id.ts b/code/lib/core-server/src/utils/get-story-id.ts
index b874a071479a..eb73a52ae58a 100644
--- a/code/lib/core-server/src/utils/get-story-id.ts
+++ b/code/lib/core-server/src/utils/get-story-id.ts
@@ -2,7 +2,7 @@ import type { Options } from '@storybook/types';
 import dedent from 'ts-dedent';
 import { normalizeStories, normalizeStoryPath } from '@storybook/core-common';
 import path from 'path';
-import { storyNameFromExport, toId } from '@storybook/csf';
+import { sanitize, storyNameFromExport, toId } from '@storybook/csf';
 import { userOrAutoTitleFromSpecifier } from '@storybook/preview-api';
 import { posix } from './posix';
 
@@ -36,7 +36,9 @@ export async function getStoryId(data: StoryIdData, options: Options) {
   }
 
   const storyName = storyNameFromExport(data.exportedStoryName);
+
   const storyId = toId(autoTitle as string, storyName);
+  const kind = sanitize(autoTitle);
 
-  return storyId;
+  return { storyId, kind };
 }
diff --git a/code/ui/manager/src/components/sidebar/CreateNewStoryFileModal.tsx b/code/ui/manager/src/components/sidebar/CreateNewStoryFileModal.tsx
index bfaec7e0e8e9..0e16ea234750 100644
--- a/code/ui/manager/src/components/sidebar/CreateNewStoryFileModal.tsx
+++ b/code/ui/manager/src/components/sidebar/CreateNewStoryFileModal.tsx
@@ -23,12 +23,8 @@ import {
   SAVE_STORY_REQUEST,
   SAVE_STORY_RESPONSE,
 } from '@storybook/core-events';
-import {
-  RequestResponseError,
-  addons,
-  experimental_requestResponse,
-  useStorybookApi,
-} from '@storybook/manager-api';
+import type { RequestResponseError } from '@storybook/manager-api';
+import { addons, experimental_requestResponse, useStorybookApi } from '@storybook/manager-api';
 
 import { useDebounce } from '../../hooks/useDebounce';
 import type { NewStoryPayload, SearchResult } from './FileSearchList';
@@ -76,22 +72,19 @@ export const CreateNewStoryFileModal = ({ open, onOpenChange }: CreateNewStoryFi
     [api, onOpenChange]
   );
 
-  const handleStoryAlreadyExists = useCallback(
-    (storyId: string) => {
-      api.addNotification({
-        id: 'create-new-story-file-error',
-        content: {
-          headline: 'Story already exists',
-          subHeadline: `Successfully navigated to existing story`,
-        },
-        duration: 8_000,
-        icon: ,
-      });
+  const handleStoryAlreadyExists = useCallback(() => {
+    api.addNotification({
+      id: 'create-new-story-file-error',
+      content: {
+        headline: 'Story already exists',
+        subHeadline: `Successfully navigated to existing story`,
+      },
+      duration: 8_000,
+      icon: ,
+    });
 
-      onOpenChange(false);
-    },
-    [api, onOpenChange]
-  );
+    onOpenChange(false);
+  }, [api, onOpenChange]);
 
   const handleFileSearch = useCallback(() => {
     setLoading(true);
@@ -185,17 +178,17 @@ export const CreateNewStoryFileModal = ({ open, onOpenChange }: CreateNewStoryFi
 
         handleSuccessfullyCreatedStory(componentExportName);
         handleFileSearch();
-      } catch (e: unknown) {
-        if (e instanceof RequestResponseError) {
-          const err = e as RequestResponseError;
-          if (err.payload.type === 'STORY_FILE_EXISTS') {
-            await trySelectNewStory(api.selectStory, err.payload.storyId);
-            handleStoryAlreadyExists(err.payload.storyId);
-            return;
-          }
+      } catch (e: any) {
+        switch (e?.payload?.type as CreateNewStoryErrorPayload['type']) {
+          case 'STORY_FILE_EXISTS':
+            const err = e as RequestResponseError;
+            await trySelectNewStory(api.selectStory, err.payload.kind);
+            handleStoryAlreadyExists();
+            break;
+          default:
+            setError({ selectedItemId: selectedItemId, error: (e as any)?.message });
+            break;
         }
-
-        setError({ selectedItemId: selectedItemId, error: (e as any)?.message });
       }
     },
     [api?.selectStory, handleSuccessfullyCreatedStory, handleFileSearch, handleStoryAlreadyExists]

From 9386252411a448164fbc28ac0c1cda333d328f19 Mon Sep 17 00:00:00 2001
From: Norbert de Langen 
Date: Wed, 1 May 2024 08:49:08 +0200
Subject: [PATCH 352/380] disable chromatic for failing interaction test story

---
 .../interactions/template/stories/unhandled-errors.stories.ts    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/code/addons/interactions/template/stories/unhandled-errors.stories.ts b/code/addons/interactions/template/stories/unhandled-errors.stories.ts
index fcaf0144ccd4..336c44b72f3a 100644
--- a/code/addons/interactions/template/stories/unhandled-errors.stories.ts
+++ b/code/addons/interactions/template/stories/unhandled-errors.stories.ts
@@ -11,6 +11,7 @@ export default {
   },
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
+    chromatic: { disable: true },
   },
 };
 

From 45371467c6da954b5112ada27f8bfc59e7937bfc Mon Sep 17 00:00:00 2001
From: Norbert de Langen 
Date: Wed, 1 May 2024 08:50:04 +0200
Subject: [PATCH 353/380] disable charomatic for failing interaction test

---
 .../interactions/template/stories/unhandled-errors.stories.ts    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/code/addons/interactions/template/stories/unhandled-errors.stories.ts b/code/addons/interactions/template/stories/unhandled-errors.stories.ts
index fcaf0144ccd4..336c44b72f3a 100644
--- a/code/addons/interactions/template/stories/unhandled-errors.stories.ts
+++ b/code/addons/interactions/template/stories/unhandled-errors.stories.ts
@@ -11,6 +11,7 @@ export default {
   },
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
+    chromatic: { disable: true },
   },
 };
 

From 1f851e9d94aaa10aabe265f9e1b3d2a2cfff3767 Mon Sep 17 00:00:00 2001
From: Kasper Peulen 
Date: Wed, 1 May 2024 10:05:22 +0200
Subject: [PATCH 354/380] Address review

---
 code/addons/actions/template/stories/spies.stories.ts      | 3 +++
 code/lib/preview-api/template/stories/rendering.stories.ts | 3 +++
 code/lib/test/template/stories/before-each.stories.ts      | 4 +++-
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/code/addons/actions/template/stories/spies.stories.ts b/code/addons/actions/template/stories/spies.stories.ts
index 9749cfb3e492..9d84cae3d361 100644
--- a/code/addons/actions/template/stories/spies.stories.ts
+++ b/code/addons/actions/template/stories/spies.stories.ts
@@ -12,6 +12,9 @@ const meta = {
 export default meta;
 
 export const ShowSpyOnInActions = {
+  parameters: {
+    chromatic: { disable: true },
+  },
   beforeEach() {
     console.log('second');
   },
diff --git a/code/lib/preview-api/template/stories/rendering.stories.ts b/code/lib/preview-api/template/stories/rendering.stories.ts
index cfa655bf7b11..aa521c6fed91 100644
--- a/code/lib/preview-api/template/stories/rendering.stories.ts
+++ b/code/lib/preview-api/template/stories/rendering.stories.ts
@@ -76,6 +76,9 @@ let loadedLabel = 'Initial';
  * Similarly, changing args rapidly should only cause one rerender at a time, producing the same result.
  */
 export const SlowLoader = {
+  parameters: {
+    chromatic: { disable: true },
+  },
   loaders: [
     async () => {
       loadedLabel = 'Loading...';
diff --git a/code/lib/test/template/stories/before-each.stories.ts b/code/lib/test/template/stories/before-each.stories.ts
index 842d9d7c2f5b..9af203a7baaf 100644
--- a/code/lib/test/template/stories/before-each.stories.ts
+++ b/code/lib/test/template/stories/before-each.stories.ts
@@ -1,4 +1,3 @@
-import { global as globalThis } from '@storybook/global';
 import { expect, mocked, getByRole, spyOn, userEvent } from '@storybook/test';
 
 const meta = {
@@ -12,6 +11,9 @@ const meta = {
 export default meta;
 
 export const BeforeEachOrder = {
+  parameters: {
+    chromatic: { disable: true },
+  },
   beforeEach() {
     console.log('second');
   },

From 9bd94fed5d1bf67db72e4713f2516f530e5b7d88 Mon Sep 17 00:00:00 2001
From: Kasper Peulen 
Date: Wed, 1 May 2024 10:07:31 +0200
Subject: [PATCH 355/380] Change to beforeEach

---
 code/lib/test/template/stories/module-mocking.stories.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/lib/test/template/stories/module-mocking.stories.ts b/code/lib/test/template/stories/module-mocking.stories.ts
index f0ddc417fbc6..8332183005a2 100644
--- a/code/lib/test/template/stories/module-mocking.stories.ts
+++ b/code/lib/test/template/stories/module-mocking.stories.ts
@@ -16,7 +16,7 @@ export default {
       disable: true,
     },
   },
-  loaders: () => {
+  beforeEach: () => {
     mocked(foo).mockReturnValue('mocked');
   },
   async play() {

From c0246d16847cd31dafa6da1019db5961e6ef30f2 Mon Sep 17 00:00:00 2001
From: Kasper Peulen 
Date: Wed, 1 May 2024 14:08:39 +0200
Subject: [PATCH 356/380] Add test for invalidating state using next redirect

---
 .../Redirect.stories.tsx                      | 56 +++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 code/frameworks/nextjs/template/stories_nextjs-default-ts/Redirect.stories.tsx

diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Redirect.stories.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/Redirect.stories.tsx
new file mode 100644
index 000000000000..f5edacff551a
--- /dev/null
+++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/Redirect.stories.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { userEvent, within } from '@storybook/test';
+import { redirect } from 'next/navigation';
+
+let state = 'Bug! Not invalidated';
+
+export default {
+  render() {
+    return (
+      

+        
State is {state}

+        
 {
+            state = 'State is invalidated successfully.';
+            redirect('/');
+          }}
+        >
+          
+        

+      

+    );
+  },
+  parameters: {
+    test: {
+      // This is needed until Next will update to the React 19 beta: https://github.com/vercel/next.js/pull/65058
+      // In the React 19 beta ErrorBoundary errors (such as redirect) are only logged, and not thrown.
+      // We will also suspress console.error logs for re the console.error logs for redirect in the next framework.
+      // Using the onCaughtError react root option:
+      //   react: {
+      //     rootOptions: {
+      //       onCaughtError(error: unknown) {
+      //         if (isNextRouterError(error)) return;
+      //         console.error(error);
+      //       },
+      //     },
+      // See: code/frameworks/nextjs/src/preview.tsx
+      dangerouslyIgnoreUnhandledErrors: true,
+    },
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        pathname: '/',
+      },
+    },
+  },
+} as Meta;
+
+export const Default: StoryObj = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    await step('Singleton state gets invalidated after redirecting', async () => {
+      await userEvent.click(canvas.getByRole('button'));
+    });
+  },
+};

From 552405913f2f0f0e37c3cc9851454c169ad00899 Mon Sep 17 00:00:00 2001
From: Kasper Peulen 
Date: Wed, 1 May 2024 14:12:48 +0200
Subject: [PATCH 357/380] Fix story name

---
 .../template/stories_nextjs-default-ts/Redirect.stories.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Redirect.stories.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/Redirect.stories.tsx
index f5edacff551a..f099affef649 100644
--- a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Redirect.stories.tsx
+++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/Redirect.stories.tsx
@@ -46,11 +46,9 @@ export default {
   },
 } as Meta;
 
-export const Default: StoryObj = {
+export const SingletonStateGetsInvalidatedAfterRedirecting: StoryObj = {
   play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
-    await step('Singleton state gets invalidated after redirecting', async () => {
-      await userEvent.click(canvas.getByRole('button'));
-    });
+    await userEvent.click(canvas.getByRole('button'));
   },
 };

From 393d0f7fcc5abeaefc56aaecee6d25c0d16631de Mon Sep 17 00:00:00 2001
From: Kasper Peulen 
Date: Wed, 1 May 2024 14:13:14 +0200
Subject: [PATCH 358/380] Fix story name

---
 .../template/stories_nextjs-default-ts/Redirect.stories.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Redirect.stories.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/Redirect.stories.tsx
index f099affef649..f76d8a7f5a90 100644
--- a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Redirect.stories.tsx
+++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/Redirect.stories.tsx
@@ -9,7 +9,7 @@ export default {
   render() {
     return (
       

-        
State is {state}

+        
{state}

         
 {
             state = 'State is invalidated successfully.';

From deb49bb192893a837c77cfd3783da398e448fe15 Mon Sep 17 00:00:00 2001
From: Scott Martin 
Date: Wed, 1 May 2024 13:56:26 +0100
Subject: [PATCH 359/380] Command for adding packages with pnpm is "add", not
 "install"

---
 docs/snippets/angular/angular-install.pnpm.js.mdx               | 2 +-
 docs/snippets/react/nextjs-install.pnpm.js.mdx                  | 2 +-
 docs/snippets/react/react-vite-install.pnpm.js.mdx              | 2 +-
 docs/snippets/react/react-webpack5-install.pnpm.js.mdx          | 2 +-
 docs/snippets/svelte/svelte-vite-install.pnpm.js.mdx            | 2 +-
 docs/snippets/svelte/svelte-webpack5-install.pnpm.js.mdx        | 2 +-
 docs/snippets/svelte/sveltekit-install.pnpm.js.mdx              | 2 +-
 docs/snippets/vue/vue3-vite-install.pnpm.js.mdx                 | 2 +-
 docs/snippets/vue/vue3-webpack5-install.pnpm.js.mdx             | 2 +-
 .../web-components/web-components-vite-install.pnpm.js.mdx      | 2 +-
 .../web-components/web-components-webpack5-install.pnpm.js.mdx  | 2 +-
 11 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/docs/snippets/angular/angular-install.pnpm.js.mdx b/docs/snippets/angular/angular-install.pnpm.js.mdx
index 5467721722b2..67a20cee831c 100644
--- a/docs/snippets/angular/angular-install.pnpm.js.mdx
+++ b/docs/snippets/angular/angular-install.pnpm.js.mdx
@@ -1,3 +1,3 @@
 ```shell
-pnpm install --save-dev @storybook/angular
+pnpm add --save-dev @storybook/angular
 ```
diff --git a/docs/snippets/react/nextjs-install.pnpm.js.mdx b/docs/snippets/react/nextjs-install.pnpm.js.mdx
index 7774ac6c9b42..246d8c3d4faa 100644
--- a/docs/snippets/react/nextjs-install.pnpm.js.mdx
+++ b/docs/snippets/react/nextjs-install.pnpm.js.mdx
@@ -1,3 +1,3 @@
 ```shell
-pnpm install --save-dev @storybook/nextjs
+pnpm add --save-dev @storybook/nextjs
 ```
diff --git a/docs/snippets/react/react-vite-install.pnpm.js.mdx b/docs/snippets/react/react-vite-install.pnpm.js.mdx
index 10b128bb0b31..60141fbb62ed 100644
--- a/docs/snippets/react/react-vite-install.pnpm.js.mdx
+++ b/docs/snippets/react/react-vite-install.pnpm.js.mdx
@@ -1,3 +1,3 @@
 ```shell
-pnpm install --save-dev @storybook/react-vite
+pnpm add --save-dev @storybook/react-vite
 ```
diff --git a/docs/snippets/react/react-webpack5-install.pnpm.js.mdx b/docs/snippets/react/react-webpack5-install.pnpm.js.mdx
index 840d64ae06c9..c954303256ac 100644
--- a/docs/snippets/react/react-webpack5-install.pnpm.js.mdx
+++ b/docs/snippets/react/react-webpack5-install.pnpm.js.mdx
@@ -1,3 +1,3 @@
 ```shell
-pnpm install --save-dev @storybook/react-webpack5
+pnpm add --save-dev @storybook/react-webpack5
 ```
diff --git a/docs/snippets/svelte/svelte-vite-install.pnpm.js.mdx b/docs/snippets/svelte/svelte-vite-install.pnpm.js.mdx
index 585bc12393ca..c45e7cb6cd33 100644
--- a/docs/snippets/svelte/svelte-vite-install.pnpm.js.mdx
+++ b/docs/snippets/svelte/svelte-vite-install.pnpm.js.mdx
@@ -1,3 +1,3 @@
 ```shell
-pnpm install --save-dev @storybook/svelte-vite
+pnpm add --save-dev @storybook/svelte-vite
 ```
diff --git a/docs/snippets/svelte/svelte-webpack5-install.pnpm.js.mdx b/docs/snippets/svelte/svelte-webpack5-install.pnpm.js.mdx
index 34cd1d6fc725..aab7b9126cfc 100644
--- a/docs/snippets/svelte/svelte-webpack5-install.pnpm.js.mdx
+++ b/docs/snippets/svelte/svelte-webpack5-install.pnpm.js.mdx
@@ -1,3 +1,3 @@
 ```shell
-pnpm install --save-dev @storybook/svelte-webpack5
+pnpm add --save-dev @storybook/svelte-webpack5
 ```
diff --git a/docs/snippets/svelte/sveltekit-install.pnpm.js.mdx b/docs/snippets/svelte/sveltekit-install.pnpm.js.mdx
index fcbd37499ee9..266855652a06 100644
--- a/docs/snippets/svelte/sveltekit-install.pnpm.js.mdx
+++ b/docs/snippets/svelte/sveltekit-install.pnpm.js.mdx
@@ -1,3 +1,3 @@
 ```shell
-pnpm install --save-dev @storybook/sveltekit
+pnpm add --save-dev @storybook/sveltekit
 ```
diff --git a/docs/snippets/vue/vue3-vite-install.pnpm.js.mdx b/docs/snippets/vue/vue3-vite-install.pnpm.js.mdx
index 3c8db13088d7..26dafd70c3ad 100644
--- a/docs/snippets/vue/vue3-vite-install.pnpm.js.mdx
+++ b/docs/snippets/vue/vue3-vite-install.pnpm.js.mdx
@@ -1,3 +1,3 @@
 ```shell
-pnpm install --save-dev @storybook/vue3-vite
+pnpm add --save-dev @storybook/vue3-vite
 ```
diff --git a/docs/snippets/vue/vue3-webpack5-install.pnpm.js.mdx b/docs/snippets/vue/vue3-webpack5-install.pnpm.js.mdx
index 24ce6105b49e..91cb03115e56 100644
--- a/docs/snippets/vue/vue3-webpack5-install.pnpm.js.mdx
+++ b/docs/snippets/vue/vue3-webpack5-install.pnpm.js.mdx
@@ -1,3 +1,3 @@
 ```shell
-pnpm install --save-dev @storybook/vue3-webpack5
+pnpm add --save-dev @storybook/vue3-webpack5
 ```
diff --git a/docs/snippets/web-components/web-components-vite-install.pnpm.js.mdx b/docs/snippets/web-components/web-components-vite-install.pnpm.js.mdx
index c2fa67cea100..b48f36c4e8f3 100644
--- a/docs/snippets/web-components/web-components-vite-install.pnpm.js.mdx
+++ b/docs/snippets/web-components/web-components-vite-install.pnpm.js.mdx
@@ -1,3 +1,3 @@
 ```shell
-pnpm install --save-dev @storybook/web-components-vite
+pnpm add --save-dev @storybook/web-components-vite
 ```
diff --git a/docs/snippets/web-components/web-components-webpack5-install.pnpm.js.mdx b/docs/snippets/web-components/web-components-webpack5-install.pnpm.js.mdx
index 91bf902cac48..2e04a2e57537 100644
--- a/docs/snippets/web-components/web-components-webpack5-install.pnpm.js.mdx
+++ b/docs/snippets/web-components/web-components-webpack5-install.pnpm.js.mdx
@@ -1,3 +1,3 @@
 ```shell
-pnpm install --save-dev @storybook/web-components-webpack5
+pnpm add --save-dev @storybook/web-components-webpack5
 ```

From d6e9002b38e37b1a5189ee5928c6a5b7f9f366c0 Mon Sep 17 00:00:00 2001
From: Kasper Peulen 
Date: Wed, 1 May 2024 15:54:35 +0200
Subject: [PATCH 360/380] Fix TS

---
 code/lib/react-dom-shim/src/react-18.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/code/lib/react-dom-shim/src/react-18.tsx b/code/lib/react-dom-shim/src/react-18.tsx
index e2f6fb399f22..5b9e88f98a84 100644
--- a/code/lib/react-dom-shim/src/react-18.tsx
+++ b/code/lib/react-dom-shim/src/react-18.tsx
@@ -1,8 +1,7 @@
 import type { FC, ReactElement } from 'react';
-import type { Root as ReactRoot, RootOptions } from 'react-dom/client';
 import React, { useLayoutEffect, useRef } from 'react';
+import type { Root as ReactRoot, RootOptions } from 'react-dom/client';
 import ReactDOM from 'react-dom/client';
-import { type StoryContext } from '@storybook/csf';
 
 // A map of all rendered React 18 nodes
 const nodes = new Map();
@@ -22,9 +21,9 @@ const WithCallback: FC<{ callback: () => void; children: ReactElement }> = ({
   return children;
 };
 
-export const renderElement = async (node: ReactElement, el: Element, context: StoryContext) => {
+export const renderElement = async (node: ReactElement, el: Element, rootOptions?: RootOptions) => {
   // Create Root Element conditionally for new React 18 Root Api
-  const root = await getReactRoot(el, context.parameters.react.rootOptions);
+  const root = await getReactRoot(el, rootOptions);
 
   return new Promise((resolve) => {
     root.render( resolve(null)}>{node});
@@ -40,7 +39,7 @@ export const unmountElement = (el: Element, shouldUseNewRootApi?: boolean) => {
   }
 };
 
-const getReactRoot = async (el: Element, rootOptions: RootOptions): Promise => {
+const getReactRoot = async (el: Element, rootOptions?: RootOptions): Promise => {
   let root = nodes.get(el);
 
   if (!root) {

From 76a14be066a94d47b6ea6d4fe751e61babde110e Mon Sep 17 00:00:00 2001
From: Kasper Peulen 
Date: Wed, 1 May 2024 16:02:25 +0200
Subject: [PATCH 361/380] Fix

---
 code/renderers/react/src/renderToCanvas.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/renderers/react/src/renderToCanvas.tsx b/code/renderers/react/src/renderToCanvas.tsx
index 10241ce2edbb..8cb2e76f9b2d 100644
--- a/code/renderers/react/src/renderToCanvas.tsx
+++ b/code/renderers/react/src/renderToCanvas.tsx
@@ -74,7 +74,7 @@ export async function renderToCanvas(
     unmountElement(canvasElement);
   }
 
-  await renderElement(element, canvasElement, storyContext);
+  await renderElement(element, canvasElement, storyContext?.parameters?.react?.rootOptions);
 
   return () => unmountElement(canvasElement);
 }

From 069cf670ea2bec271d6a6519b357ce351c6f9cd5 Mon Sep 17 00:00:00 2001
From: Kyle Gach 
Date: Wed, 1 May 2024 10:23:11 -0600
Subject: [PATCH 362/380] Fix vue snippets

---
 docs/get-started/vue3-webpack5.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/docs/get-started/vue3-webpack5.md b/docs/get-started/vue3-webpack5.md
index 283ba4fbe2d3..d5aa4c7913a8 100644
--- a/docs/get-started/vue3-webpack5.md
+++ b/docs/get-started/vue3-webpack5.md
@@ -74,9 +74,9 @@ First, install the framework:
 
 
 
@@ -118,8 +118,8 @@ Finally, update your `.storybook/main.js|ts` to change the framework property:
 
 
 

From 7b8d07659bc7fcf1e7c1671bc2862ceba7487d58 Mon Sep 17 00:00:00 2001
From: Kyle Gach 
Date: Wed, 1 May 2024 10:25:44 -0600
Subject: [PATCH 363/380] Fix typo in playwright portable stories snippet

---
 docs/api/portable-stories-playwright.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/api/portable-stories-playwright.md b/docs/api/portable-stories-playwright.md
index d043ca7abd59..6c1f2764bb34 100644
--- a/docs/api/portable-stories-playwright.md
+++ b/docs/api/portable-stories-playwright.md
@@ -219,7 +219,7 @@ If your stories behave differently based on [globals](../essentials/toolbars-and
 
 ```tsx
 // Button.portable.ts
-import { test } from 'vitest';
+import { test } from 'playwright';
 import { render } from '@testing-library/react';
 import { composeStory } from '@storybook/react';
 

From cbfa75732be20c4a723ecbac1d011da33dd7bcae Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold 
Date: Wed, 1 May 2024 21:48:13 +0200
Subject: [PATCH 364/380] initial warning

---
 .../store/csf/portable-stories.test.ts        | 42 +++++++++++++++++++
 .../src/modules/store/csf/portable-stories.ts | 34 +++++++++++++--
 code/lib/types/src/modules/frameworks.ts      |  2 +
 docs/api/portable-stories-jest.md             | 18 ++++----
 docs/api/portable-stories-vitest.md           | 18 ++++----
 5 files changed, 92 insertions(+), 22 deletions(-)

diff --git a/code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts b/code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts
index 832ad437139f..84217ce004e3 100644
--- a/code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts
+++ b/code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts
@@ -255,6 +255,48 @@ describe('composeStory', () => {
     expect(spyFn).toHaveBeenNthCalledWith(2, 'from beforeEach');
   });
 
+  it.only('should warn when previous cleanups are still around when rendering a story', async () => {
+    const consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const cleanupSpy = vi.fn();
+    const beforeEachSpy = vi.fn(() => {
+      return () => {
+        cleanupSpy('cleanup from story');
+      };
+    });
+
+    const PreviousStory: Story = {
+      render: () => 'first',
+      beforeEach: beforeEachSpy,
+    };
+    const CurrentStory: Story = {
+      render: () => 'second',
+      args: {
+        firstArg: false,
+        secondArg: true,
+      },
+    };
+    const firstComposedStory = composeStory(PreviousStory, {});
+    await firstComposedStory.load();
+    firstComposedStory();
+
+    expect(beforeEachSpy).toHaveBeenCalled();
+    expect(cleanupSpy).not.toHaveBeenCalled();
+    expect(consoleWarnSpy).not.toHaveBeenCalled();
+
+    const secondComposedStory = composeStory(CurrentStory, {});
+    secondComposedStory();
+
+    expect(cleanupSpy).not.toHaveBeenCalled();
+    expect(consoleWarnSpy).toHaveBeenCalledOnce();
+    expect(consoleWarnSpy.mock.calls[0][0]).toMatchInlineSnapshot(
+      `
+      "Some stories were not cleaned up before rendering 'Unnamed Story (firstArg, secondArg)'.
+      You should load the story with \`await Story.load()\` before rendering it.
+      See XYZ for more information."
+    `
+    );
+  });
+
   it('should throw an error if Story is undefined', () => {
     expect(() => {
       // @ts-expect-error (invalid input)
diff --git a/code/lib/preview-api/src/modules/store/csf/portable-stories.ts b/code/lib/preview-api/src/modules/store/csf/portable-stories.ts
index c4aa34874040..edd096ada36f 100644
--- a/code/lib/preview-api/src/modules/store/csf/portable-stories.ts
+++ b/code/lib/preview-api/src/modules/store/csf/portable-stories.ts
@@ -47,7 +47,7 @@ export function setProjectAnnotations(
   globalProjectAnnotations = composeConfigs(annotations.map(extractAnnotation));
 }
 
-const cleanupCallbacks: CleanupCallback[] = [];
+const cleanups: { storyName: string; callback: CleanupCallback }[] = [];
 
 export function composeStory(
   storyAnnotations: LegacyStoryAnnotationsOrFn,
@@ -115,6 +115,8 @@ export function composeStory> = Object.assign(
     function storyFn(extraArgs?: Partial) {
       context.args = {
@@ -122,6 +124,24 @@ export function composeStory 0 && !previousCleanupsDone) {
+        let humanReadableIdentifier = storyName;
+        if (story.title !== 'ComposedStory') {
+          // prefix with title unless it's the generic ComposedStory title
+          humanReadableIdentifier = `${story.title} - ${humanReadableIdentifier}`;
+        }
+        if (storyName === 'Unnamed Story' && Object.keys(context.args).length > 0) {
+          // suffix with args if it's an unnamed story and there are args
+          humanReadableIdentifier = `${humanReadableIdentifier} (${Object.keys(context.args).join(
+            ', '
+          )})`;
+        }
+        console.warn(
+          dedent`Some stories were not cleaned up before rendering '${humanReadableIdentifier}'.
+          You should load the story with \`await Story.load()\` before rendering it.
+          See XYZ for more information.`
+        );
+      }
       return story.unboundStoryFn(prepareContext(context));
     },
     {
@@ -129,13 +149,19 @@ export function composeStory {
         // First run any registered cleanup function
-        for (const callback of [...cleanupCallbacks].reverse()) await callback();
-        cleanupCallbacks.length = 0;
+        for (const { callback } of [...cleanups].reverse()) await callback();
+        cleanups.length = 0;
+
+        previousCleanupsDone = true;
 
         const loadedContext = await story.applyLoaders(context);
         context.loaded = loadedContext.loaded;
 
-        cleanupCallbacks.push(...(await story.applyBeforeEach(context)));
+        cleanups.push(
+          ...(await story.applyBeforeEach(context))
+            .filter(Boolean)
+            .map((callback) => ({ storyName, callback }))
+        );
       },
       args: story.initialArgs as Partial,
       parameters: story.parameters as Parameters,
diff --git a/code/lib/types/src/modules/frameworks.ts b/code/lib/types/src/modules/frameworks.ts
index c1ea25abe7b0..0785763f46e5 100644
--- a/code/lib/types/src/modules/frameworks.ts
+++ b/code/lib/types/src/modules/frameworks.ts
@@ -14,6 +14,8 @@ export type SupportedFrameworks =
   | 'svelte-vite'
   | 'svelte-webpack5'
   | 'sveltekit'
+  | 'vue-vite'
+  | 'vue-webpack5'
   | 'vue3-vite'
   | 'vue3-webpack5'
   | 'web-components-vite'
diff --git a/docs/api/portable-stories-jest.md b/docs/api/portable-stories-jest.md
index 4c4141a53922..64bf34eb2c6b 100644
--- a/docs/api/portable-stories-jest.md
+++ b/docs/api/portable-stories-jest.md
@@ -91,15 +91,15 @@ An object where the keys are the names of the stories and the values are the com
 
 Additionally, the composed story will have the following properties:
 
-| Property   | Type                                                     | Description                                                     |
-| ---------- | -------------------------------------------------------- | --------------------------------------------------------------- |
-| storyName  | `string`                                                 | The story's name                                                |
-| args       | `Record`                                    | The story's [args](../writing-stories/args.md)                  |
-| argTypes   | `ArgType`                                                | The story's [argTypes](./arg-types.md)                          |
-| id         | `string`                                                 | The story's id                                                  |
-| parameters | `Record`                                    | The story's [parameters](./parameters.md)                       |
-| load       | `() => Promise`                                    | Executes all the [loaders](#2-load-optional) for a given story  |
-| play       | `(context?: StoryContext) => Promise \| undefined` | Executes the [play function](#4-play-optional) of a given story |
+| Property   | Type                                                     | Description                                                                                 |
+| ---------- | -------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
+| storyName  | `string`                                                 | The story's name                                                                            |
+| args       | `Record`                                    | The story's [args](../writing-stories/args.md)                                              |
+| argTypes   | `ArgType`                                                | The story's [argTypes](./arg-types.md)                                                      |
+| id         | `string`                                                 | The story's id                                                                              |
+| parameters | `Record`                                    | The story's [parameters](./parameters.md)                                                   |
+| load       | `() => Promise`                                    | Executes all the [loaders](#2-load-optional) for a given story and cleanup previous stories |
+| play       | `(context?: StoryContext) => Promise \| undefined` | Executes the [play function](#4-play-optional) of a given story                             |
 
 ## composeStory
 
diff --git a/docs/api/portable-stories-vitest.md b/docs/api/portable-stories-vitest.md
index 0342b7cc1e21..a427e8d8fa7f 100644
--- a/docs/api/portable-stories-vitest.md
+++ b/docs/api/portable-stories-vitest.md
@@ -99,15 +99,15 @@ An object where the keys are the names of the stories and the values are the com
 
 Additionally, the composed story will have the following properties:
 
-| Property   | Type                                      | Description                                                     |
-| ---------- | ----------------------------------------- | --------------------------------------------------------------- |
-| storyName  | `string`                                  | The story's name                                                |
-| args       | `Record`                     | The story's [args](../writing-stories/args.md)                  |
-| argTypes   | `ArgType`                                 | The story's [argTypes](./arg-types.md)                          |
-| id         | `string`                                  | The story's id                                                  |
-| parameters | `Record`                     | The story's [parameters](./parameters.md)                       |
-| load       | `() => Promise`                     | Executes all the [loaders](#2-load-optional) for a given story  |
-| play       | `(context) => Promise \| undefined` | Executes the [play function](#4-play-optional) of a given story |
+| Property   | Type                                      | Description                                                                                 |
+| ---------- | ----------------------------------------- | ------------------------------------------------------------------------------------------- |
+| storyName  | `string`                                  | The story's name                                                                            |
+| args       | `Record`                     | The story's [args](../writing-stories/args.md)                                              |
+| argTypes   | `ArgType`                                 | The story's [argTypes](./arg-types.md)                                                      |
+| id         | `string`                                  | The story's id                                                                              |
+| parameters | `Record`                     | The story's [parameters](./parameters.md)                                                   |
+| load       | `() => Promise`                     | Executes all the [loaders](#2-load-optional) for a given story and cleanup previous stories |
+| play       | `(context) => Promise \| undefined` | Executes the [play function](#4-play-optional) of a given story                             |
 
 ## composeStory
 

From e4d1b06c20cde0aa09ef770f25f17dfeaec10ae6 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold 
Date: Thu, 2 May 2024 10:34:10 +0200
Subject: [PATCH 365/380] remove optional from load api docs

---
 docs/api/portable-stories-jest.md   | 12 ++++++++----
 docs/api/portable-stories-vitest.md | 28 ++++++++++++++++------------
 2 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/docs/api/portable-stories-jest.md b/docs/api/portable-stories-jest.md
index 64bf34eb2c6b..53f988403bb3 100644
--- a/docs/api/portable-stories-jest.md
+++ b/docs/api/portable-stories-jest.md
@@ -98,7 +98,7 @@ Additionally, the composed story will have the following properties:
 | argTypes   | `ArgType`                                                | The story's [argTypes](./arg-types.md)                                                      |
 | id         | `string`                                                 | The story's id                                                                              |
 | parameters | `Record`                                    | The story's [parameters](./parameters.md)                                                   |
-| load       | `() => Promise`                                    | Executes all the [loaders](#2-load-optional) for a given story and cleanup previous stories |
+| load       | `() => Promise`                                    | [Prepares](#3-load) the story for rendering and and cleans up all previous stories |
 | play       | `(context?: StoryContext) => Promise \| undefined` | Executes the [play function](#4-play-optional) of a given story                             |
 
 ## composeStory
@@ -245,12 +245,16 @@ The story is prepared by running [`composeStories`](#composestories) or [`compos
 
 ### 3. Load
 
-**(optional)**
-
-Stories can prepare data they need (e.g. setting up some mocks or fetching data) before rendering by defining [loaders](../writing-stories/loaders.md). In portable stories, the loaders are not applied automaticallyโ€”you have to apply them yourself.
+Stories can prepare data they need (e.g. setting up some mocks or fetching data) before rendering by defining [loaders](../writing-stories/loaders.md) or [beforeEach](../writing-stories/mocking-modules.md#setting-up-and-cleaning-up). In portable stories, loaders and beforeEach are not applied automatically โ€” you have to apply them yourself.
 
 ๐Ÿ‘‰ย For this, you use the [`composeStories`](#composestories) or [`composeStory`](#composestory) API. The composed story will return a `load` method to be called **before** it is rendered.
 
+
+
+While it's technically optional to run `load` before rendering, it is highly encouraged to always do this, even if the story doesn't have any loaders or beforeEach. If you later add any of these to the story, you don't need to remember to also call `load`. Cleaning up previous stories is also important, and calling `load` ensures that later modifying other stories doesn't affect the current story.
+
+
+
 
 
 `                     | The story's [args](../writing-stories/args.md)                                              |
-| argTypes   | `ArgType`                                 | The story's [argTypes](./arg-types.md)                                                      |
-| id         | `string`                                  | The story's id                                                                              |
-| parameters | `Record`                     | The story's [parameters](./parameters.md)                                                   |
-| load       | `() => Promise`                     | Executes all the [loaders](#2-load-optional) for a given story and cleanup previous stories |
-| play       | `(context) => Promise \| undefined` | Executes the [play function](#4-play-optional) of a given story                             |
+| Property   | Type                                      | Description                                                                        |
+| ---------- | ----------------------------------------- | ---------------------------------------------------------------------------------- |
+| storyName  | `string`                                  | The story's name                                                                   |
+| args       | `Record`                     | The story's [args](../writing-stories/args.md)                                     |
+| argTypes   | `ArgType`                                 | The story's [argTypes](./arg-types.md)                                             |
+| id         | `string`                                  | The story's id                                                                     |
+| parameters | `Record`                     | The story's [parameters](./parameters.md)                                          |
+| load       | `() => Promise`                     | [Prepares](#3-load) the story for rendering and and cleans up all previous stories |
+| play       | `(context) => Promise \| undefined` | Executes the [play function](#4-play-optional) of a given story                    |
 
 ## composeStory
 
@@ -240,12 +240,16 @@ The story is prepared by running [`composeStories`](#composestories) or [`compos
 
 ### 3. Load
 
-**(optional)**
-
-Stories can prepare data they need (e.g. setting up some mocks or fetching data) before rendering by defining [loaders](../writing-stories/loaders.md). In portable stories, the loaders are not applied automaticallyโ€”you have to apply them yourself.
+Stories can prepare data they need (e.g. setting up some mocks or fetching data) before rendering by defining [loaders](../writing-stories/loaders.md) or [beforeEach](../writing-stories/mocking-modules.md#setting-up-and-cleaning-up). In portable stories, loaders and beforeEach are not applied automatically โ€” you have to apply them yourself.
 
 ๐Ÿ‘‰ย For this, you use the [`composeStories`](#composestories) or [`composeStory`](#composestory) API. The composed story will return a `load` method to be called **before** it is rendered.
 
+
+
+While it's technically optional to run `load` before rendering, it is highly encouraged to always do this, even if the story doesn't have any loaders or beforeEach. If you later add any of these to the story, you don't need to remember to also call `load`. Cleaning up previous stories is also important, and calling `load` ensures that later modifying other stories doesn't affect the current story.
+
+
+
 
 
 
Date: Thu, 2 May 2024 13:38:17 +0200
Subject: [PATCH 366/380] add correct link to portable stories docs

---
 .../lib/preview-api/src/modules/store/csf/portable-stories.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/code/lib/preview-api/src/modules/store/csf/portable-stories.ts b/code/lib/preview-api/src/modules/store/csf/portable-stories.ts
index edd096ada36f..97237003ab44 100644
--- a/code/lib/preview-api/src/modules/store/csf/portable-stories.ts
+++ b/code/lib/preview-api/src/modules/store/csf/portable-stories.ts
@@ -139,7 +139,9 @@ export function composeStory
Date: Thu, 2 May 2024 13:41:28 +0200
Subject: [PATCH 367/380] improve default title and name typesafety

---
 .../src/modules/store/csf/portable-stories.ts         | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/code/lib/preview-api/src/modules/store/csf/portable-stories.ts b/code/lib/preview-api/src/modules/store/csf/portable-stories.ts
index 97237003ab44..9c18e46a6c79 100644
--- a/code/lib/preview-api/src/modules/store/csf/portable-stories.ts
+++ b/code/lib/preview-api/src/modules/store/csf/portable-stories.ts
@@ -29,6 +29,9 @@ import { normalizeProjectAnnotations } from './normalizeProjectAnnotations';
 
 let globalProjectAnnotations: ProjectAnnotations = {};
 
+const DEFAULT_TITLE = 'ComposedStory';
+const DEFAULT_NAME = 'Unnamed Story';
+
 function extractAnnotation(
   annotation: NamedOrDefaultProjectAnnotations
 ) {
@@ -63,7 +66,7 @@ export function composeStory(componentAnnotations);
 
@@ -72,7 +75,7 @@ export function composeStory(
     storyName,
@@ -126,11 +129,11 @@ export function composeStory 0 && !previousCleanupsDone) {
         let humanReadableIdentifier = storyName;
-        if (story.title !== 'ComposedStory') {
+        if (story.title !== DEFAULT_TITLE) {
           // prefix with title unless it's the generic ComposedStory title
           humanReadableIdentifier = `${story.title} - ${humanReadableIdentifier}`;
         }
-        if (storyName === 'Unnamed Story' && Object.keys(context.args).length > 0) {
+        if (storyName === DEFAULT_NAME && Object.keys(context.args).length > 0) {
           // suffix with args if it's an unnamed story and there are args
           humanReadableIdentifier = `${humanReadableIdentifier} (${Object.keys(context.args).join(
             ', '

From 0b88b643f3d0313aa8ddf5178f0d56e9e1840f0a Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold 
Date: Thu, 2 May 2024 13:44:04 +0200
Subject: [PATCH 368/380] remove it.only

---
 .../preview-api/src/modules/store/csf/portable-stories.test.ts  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts b/code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts
index 84217ce004e3..e212e4ba12be 100644
--- a/code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts
+++ b/code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts
@@ -255,7 +255,7 @@ describe('composeStory', () => {
     expect(spyFn).toHaveBeenNthCalledWith(2, 'from beforeEach');
   });
 
-  it.only('should warn when previous cleanups are still around when rendering a story', async () => {
+  it('should warn when previous cleanups are still around when rendering a story', async () => {
     const consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
     const cleanupSpy = vi.fn();
     const beforeEachSpy = vi.fn(() => {

From 24148ad353d15ab00b88eb507f8da2f5e777861d Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold 
Date: Thu, 2 May 2024 13:51:13 +0200
Subject: [PATCH 369/380] update stories

---
 .../src/modules/store/csf/portable-stories.test.ts            | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts b/code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts
index e212e4ba12be..90115c5aeceb 100644
--- a/code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts
+++ b/code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts
@@ -260,7 +260,7 @@ describe('composeStory', () => {
     const cleanupSpy = vi.fn();
     const beforeEachSpy = vi.fn(() => {
       return () => {
-        cleanupSpy('cleanup from story');
+        cleanupSpy();
       };
     });
 
@@ -292,7 +292,7 @@ describe('composeStory', () => {
       `
       "Some stories were not cleaned up before rendering 'Unnamed Story (firstArg, secondArg)'.
       You should load the story with \`await Story.load()\` before rendering it.
-      See XYZ for more information."
+      See https://storybook.js.org/docs/api/portable-stories-vitest#3-load for more information."
     `
     );
   });

From f7d809a801ecb5fff22669425899e286a6860962 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold 
Date: Thu, 2 May 2024 14:08:53 +0200
Subject: [PATCH 370/380] improve readability

---
 .../src/modules/store/csf/portable-stories.ts       | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/code/lib/preview-api/src/modules/store/csf/portable-stories.ts b/code/lib/preview-api/src/modules/store/csf/portable-stories.ts
index 9c18e46a6c79..a4385605685e 100644
--- a/code/lib/preview-api/src/modules/store/csf/portable-stories.ts
+++ b/code/lib/preview-api/src/modules/store/csf/portable-stories.ts
@@ -29,8 +29,8 @@ import { normalizeProjectAnnotations } from './normalizeProjectAnnotations';
 
 let globalProjectAnnotations: ProjectAnnotations = {};
 
-const DEFAULT_TITLE = 'ComposedStory';
-const DEFAULT_NAME = 'Unnamed Story';
+const DEFAULT_STORY_TITLE = 'ComposedStory';
+const DEFAULT_STORY_NAME = 'Unnamed Story';
 
 function extractAnnotation(
   annotation: NamedOrDefaultProjectAnnotations
@@ -66,7 +66,7 @@ export function composeStory(componentAnnotations);
 
@@ -75,7 +75,7 @@ export function composeStory(
     storyName,
@@ -129,11 +129,11 @@ export function composeStory 0 && !previousCleanupsDone) {
         let humanReadableIdentifier = storyName;
-        if (story.title !== DEFAULT_TITLE) {
+        if (story.title !== DEFAULT_STORY_TITLE) {
           // prefix with title unless it's the generic ComposedStory title
           humanReadableIdentifier = `${story.title} - ${humanReadableIdentifier}`;
         }
-        if (storyName === DEFAULT_NAME && Object.keys(context.args).length > 0) {
+        if (storyName === DEFAULT_STORY_NAME && Object.keys(context.args).length > 0) {
           // suffix with args if it's an unnamed story and there are args
           humanReadableIdentifier = `${humanReadableIdentifier} (${Object.keys(context.args).join(
             ', '
@@ -141,6 +141,7 @@ export function composeStory
Date: Thu, 2 May 2024 14:35:26 +0200
Subject: [PATCH 371/380] update test snapshots

---
 .../preview-api/src/modules/store/csf/portable-stories.test.ts   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts b/code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts
index 90115c5aeceb..9322d3c9d2a3 100644
--- a/code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts
+++ b/code/lib/preview-api/src/modules/store/csf/portable-stories.test.ts
@@ -291,6 +291,7 @@ describe('composeStory', () => {
     expect(consoleWarnSpy.mock.calls[0][0]).toMatchInlineSnapshot(
       `
       "Some stories were not cleaned up before rendering 'Unnamed Story (firstArg, secondArg)'.
+
       You should load the story with \`await Story.load()\` before rendering it.
       See https://storybook.js.org/docs/api/portable-stories-vitest#3-load for more information."
     `

From 75f87a5fa1dcb64a66bd3495556ba7cc849a8b65 Mon Sep 17 00:00:00 2001
From: Kasper Peulen 
Date: Thu, 2 May 2024 14:46:01 +0200
Subject: [PATCH 372/380] Fix test

---
 .../ServerActions.stories.tsx                   | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/ServerActions.stories.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/ServerActions.stories.tsx
index 17d364429726..8bfea13b0498 100644
--- a/code/frameworks/nextjs/template/stories_nextjs-default-ts/ServerActions.stories.tsx
+++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/ServerActions.stories.tsx
@@ -31,6 +31,23 @@ function Component() {
 
 export default {
   component: Component,
+  parameters: {
+    test: {
+      // This is needed until Next will update to the React 19 beta: https://github.com/vercel/next.js/pull/65058
+      // In the React 19 beta ErrorBoundary errors (such as redirect) are only logged, and not thrown.
+      // We will also suspress console.error logs for re the console.error logs for redirect in the next framework.
+      // Using the onCaughtError react root option:
+      //   react: {
+      //     rootOptions: {
+      //       onCaughtError(error: unknown) {
+      //         if (isNextRouterError(error)) return;
+      //         console.error(error);
+      //       },
+      //     },
+      // See: code/frameworks/nextjs/src/preview.tsx
+      dangerouslyIgnoreUnhandledErrors: true,
+    },
+  },
 } as Meta;
 
 export const Default: StoryObj = {

From a4b05ec06e212a5dc62a18652dd8b8bb2e2955d4 Mon Sep 17 00:00:00 2001
From: Kasper Peulen 
Date: Thu, 2 May 2024 17:01:53 +0200
Subject: [PATCH 373/380] Cleanup tests

---
 .../ServerActions.stories.tsx                 | 78 +++++++++++--------
 1 file changed, 46 insertions(+), 32 deletions(-)

diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/ServerActions.stories.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/ServerActions.stories.tsx
index 8bfea13b0498..f330b2af3b9b 100644
--- a/code/frameworks/nextjs/template/stories_nextjs-default-ts/ServerActions.stories.tsx
+++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/ServerActions.stories.tsx
@@ -32,6 +32,12 @@ function Component() {
 export default {
   component: Component,
   parameters: {
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        pathname: '/',
+      },
+    },
     test: {
       // This is needed until Next will update to the React 19 beta: https://github.com/vercel/next.js/pull/65058
       // In the React 19 beta ErrorBoundary errors (such as redirect) are only logged, and not thrown.
@@ -50,43 +56,51 @@ export default {
   },
 } as Meta;
 
-export const Default: StoryObj = {
-  play: async ({ canvasElement, step }) => {
+export const ProtectedWhileLoggedOut: StoryObj = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByText('Access protected route'));
+
+    await expect(cookies().get).toHaveBeenCalledWith('user');
+    await expect(redirect).toHaveBeenCalledWith('/');
+  },
+};
+
+export const ProtectedWhileLoggedIn: StoryObj = {
+  beforeEach() {
+    cookies().set('user', 'storybookjs');
+  },
+  play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByText('Access protected route'));
 
-    const loginBtn = canvas.getByText('Login');
-    const logoutBtn = canvas.getByText('Logout');
-    const accessRouteBtn = canvas.getByText('Access protected route');
+    await expect(cookies().get).toHaveBeenLastCalledWith('user');
+    await expect(revalidatePath).toHaveBeenLastCalledWith('/');
+    await expect(redirect).toHaveBeenLastCalledWith('/protected');
+  },
+};
 
-    await step('accessRoute flow - logged out', async () => {
-      await userEvent.click(accessRouteBtn);
-      await expect(cookies().get).toHaveBeenCalledWith('user');
-      await expect(redirect).toHaveBeenCalledWith('/');
-    });
+export const Logout: StoryObj = {
+  beforeEach() {
+    cookies().set('user', 'storybookjs');
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
 
-    await step('accessRoute flow - logged', async () => {
-      cookies.mockRestore();
-      cookies().set('user', 'storybookjs');
-      await userEvent.click(accessRouteBtn);
-      await expect(cookies().get).toHaveBeenCalledWith('user');
-      await expect(revalidatePath).toHaveBeenCalledWith('/');
-      await expect(redirect).toHaveBeenCalledWith('/protected');
-    });
+    await userEvent.click(canvas.getByText('Logout'));
+    await expect(cookies().delete).toHaveBeenCalled();
+    await expect(revalidatePath).toHaveBeenCalledWith('/');
+    await expect(redirect).toHaveBeenCalledWith('/');
+  },
+};
 
-    await step('logout flow', async () => {
-      cookies.mockRestore();
-      await userEvent.click(logoutBtn);
-      await expect(cookies().delete).toHaveBeenCalled();
-      await expect(revalidatePath).toHaveBeenCalledWith('/');
-      await expect(redirect).toHaveBeenCalledWith('/');
-    });
+export const Login: StoryObj = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByText('Login'));
 
-    await step('login flow', async () => {
-      cookies.mockRestore();
-      await userEvent.click(loginBtn);
-      await expect(cookies().set).toHaveBeenCalledWith('user', 'storybookjs');
-      await expect(revalidatePath).toHaveBeenCalledWith('/');
-      await expect(redirect).toHaveBeenCalledWith('/');
-    });
+    await expect(cookies().set).toHaveBeenCalledWith('user', 'storybookjs');
+    await expect(revalidatePath).toHaveBeenCalledWith('/');
+    await expect(redirect).toHaveBeenCalledWith('/');
   },
 };

From a79bebd9fbdca8537f9dce2953e70e81514f461f Mon Sep 17 00:00:00 2001
From: Kasper Peulen 
Date: Thu, 2 May 2024 17:37:57 +0200
Subject: [PATCH 374/380] Wait for redirect to have happened

---
 .../nextjs/src/export-mocks/navigation/index.ts      |  4 ++--
 .../ServerActions.stories.tsx                        | 12 ++++++++++--
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/code/frameworks/nextjs/src/export-mocks/navigation/index.ts b/code/frameworks/nextjs/src/export-mocks/navigation/index.ts
index 81a0ab6f20d2..f55ee86c36ca 100644
--- a/code/frameworks/nextjs/src/export-mocks/navigation/index.ts
+++ b/code/frameworks/nextjs/src/export-mocks/navigation/index.ts
@@ -59,13 +59,13 @@ export * from 'next/dist/client/components/navigation';
 
 // mock utilities/overrides (as of Next v14.2.0)
 export const redirect = fn(
-  (url: string, type: actual.RedirectType = actual.RedirectType.replace): never => {
+  (url: string, type: actual.RedirectType = actual.RedirectType.push): never => {
     throw getRedirectError(url, type, RedirectStatusCode.SeeOther);
   }
 ).mockName('next/navigation::redirect');
 
 export const permanentRedirect = fn(
-  (url: string, type: actual.RedirectType = actual.RedirectType.replace): never => {
+  (url: string, type: actual.RedirectType = actual.RedirectType.push): never => {
     throw getRedirectError(url, type, RedirectStatusCode.SeeOther);
   }
 ).mockName('next/navigation::permanentRedirect');
diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/ServerActions.stories.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/ServerActions.stories.tsx
index f330b2af3b9b..cb3f5bbdb2dd 100644
--- a/code/frameworks/nextjs/template/stories_nextjs-default-ts/ServerActions.stories.tsx
+++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/ServerActions.stories.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { expect, within, userEvent } from '@storybook/test';
+import { expect, within, userEvent, waitFor } from '@storybook/test';
 import { cookies } from '@storybook/nextjs/headers.mock';
 import { revalidatePath } from '@storybook/nextjs/cache.mock';
-import { redirect } from '@storybook/nextjs/navigation.mock';
+import { redirect, getRouter } from '@storybook/nextjs/navigation.mock';
 
 import { accessRoute, login, logout } from './server-actions';
 
@@ -63,6 +63,8 @@ export const ProtectedWhileLoggedOut: StoryObj = {
 
     await expect(cookies().get).toHaveBeenCalledWith('user');
     await expect(redirect).toHaveBeenCalledWith('/');
+
+    await waitFor(() => expect(getRouter().push).toHaveBeenCalled());
   },
 };
 
@@ -77,6 +79,8 @@ export const ProtectedWhileLoggedIn: StoryObj = {
     await expect(cookies().get).toHaveBeenLastCalledWith('user');
     await expect(revalidatePath).toHaveBeenLastCalledWith('/');
     await expect(redirect).toHaveBeenLastCalledWith('/protected');
+
+    await waitFor(() => expect(getRouter().push).toHaveBeenCalled());
   },
 };
 
@@ -91,6 +95,8 @@ export const Logout: StoryObj = {
     await expect(cookies().delete).toHaveBeenCalled();
     await expect(revalidatePath).toHaveBeenCalledWith('/');
     await expect(redirect).toHaveBeenCalledWith('/');
+
+    await waitFor(() => expect(getRouter().push).toHaveBeenCalled());
   },
 };
 
@@ -102,5 +108,7 @@ export const Login: StoryObj = {
     await expect(cookies().set).toHaveBeenCalledWith('user', 'storybookjs');
     await expect(revalidatePath).toHaveBeenCalledWith('/');
     await expect(redirect).toHaveBeenCalledWith('/');
+
+    await waitFor(() => expect(getRouter().push).toHaveBeenCalled());
   },
 };

From 514c37b50ff72a3972bb9046cac641aecae1a53a Mon Sep 17 00:00:00 2001
From: Kasper Peulen 
Date: Fri, 3 May 2024 10:21:48 +0200
Subject: [PATCH 375/380] Add comment describing possible solution for flashing
 UI with redirects

---
 code/frameworks/nextjs/src/routing/decorator.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/code/frameworks/nextjs/src/routing/decorator.tsx b/code/frameworks/nextjs/src/routing/decorator.tsx
index b31aa0f318be..6c3f66ba6778 100644
--- a/code/frameworks/nextjs/src/routing/decorator.tsx
+++ b/code/frameworks/nextjs/src/routing/decorator.tsx
@@ -28,6 +28,11 @@ export const RouterDecorator = (
           ...parameters.nextjs?.navigation,
         }}
       >
+        {/*
+        The next.js RedirectBoundary causes flashing UI when used client side.
+        Possible use the implementation of the PR: https://github.com/vercel/next.js/pull/49439
+        Or wait for next to solve this on their side.
+        */}
         
           
         

From 0690c53d6a13a1c6075e15f1f9d7060e98a21abf Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold 
Date: Fri, 3 May 2024 20:48:46 +0200
Subject: [PATCH 376/380] update portable stories docs

---
 docs/api/portable-stories-jest.md   | 26 +++++++++++++-------------
 docs/api/portable-stories-vitest.md | 26 +++++++++++++-------------
 2 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/docs/api/portable-stories-jest.md b/docs/api/portable-stories-jest.md
index 53f988403bb3..3abe9798112c 100644
--- a/docs/api/portable-stories-jest.md
+++ b/docs/api/portable-stories-jest.md
@@ -91,15 +91,15 @@ An object where the keys are the names of the stories and the values are the com
 
 Additionally, the composed story will have the following properties:
 
-| Property   | Type                                                     | Description                                                                                 |
-| ---------- | -------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
-| storyName  | `string`                                                 | The story's name                                                                            |
-| args       | `Record`                                    | The story's [args](../writing-stories/args.md)                                              |
-| argTypes   | `ArgType`                                                | The story's [argTypes](./arg-types.md)                                                      |
-| id         | `string`                                                 | The story's id                                                                              |
-| parameters | `Record`                                    | The story's [parameters](./parameters.md)                                                   |
-| load       | `() => Promise`                                    | [Prepares](#3-load) the story for rendering and and cleans up all previous stories |
-| play       | `(context?: StoryContext) => Promise \| undefined` | Executes the [play function](#4-play-optional) of a given story                             |
+| Property   | Type                                                     | Description                                                                           |
+| ---------- | -------------------------------------------------------- | ------------------------------------------------------------------------------------- |
+| storyName  | `string`                                                 | The story's name                                                                      |
+| args       | `Record`                                    | The story's [args](../writing-stories/args.md)                                        |
+| argTypes   | `ArgType`                                                | The story's [argTypes](./arg-types.md)                                                |
+| id         | `string`                                                 | The story's id                                                                        |
+| parameters | `Record`                                    | The story's [parameters](./parameters.md)                                             |
+| load       | `() => Promise`                                    | [Prepares](#3-prepare) the story for rendering and and cleans up all previous stories |
+| play       | `(context?: StoryContext) => Promise \| undefined` | Executes the [play function](#5-play) of a given story                                |
 
 ## composeStory
 
@@ -239,19 +239,19 @@ When you want to reuse a story in a different environment, however, it's crucial
 
 ๐Ÿ‘‰ย For this, you use the [`setProjectAnnotations`](#setprojectannotations) API.
 
-### 2. Prepare
+### 2. Compose
 
 The story is prepared by running [`composeStories`](#composestories) or [`composeStory`](#composestory). You do not need to do anything for this step.
 
-### 3. Load
+### 3. Prepare
 
-Stories can prepare data they need (e.g. setting up some mocks or fetching data) before rendering by defining [loaders](../writing-stories/loaders.md) or [beforeEach](../writing-stories/mocking-modules.md#setting-up-and-cleaning-up). In portable stories, loaders and beforeEach are not applied automatically โ€” you have to apply them yourself.
+Stories can prepare data they need (e.g. setting up some mocks or fetching data) before rendering by defining [loaders](../writing-stories/loaders.md) or [beforeEach](../writing-tests/interaction-testing.md#run-code-before-each-test). In portable stories, loaders and beforeEach are not applied automatically โ€” you have to apply them yourself.
 
 ๐Ÿ‘‰ย For this, you use the [`composeStories`](#composestories) or [`composeStory`](#composestory) API. The composed story will return a `load` method to be called **before** it is rendered.
 
 
 
-While it's technically optional to run `load` before rendering, it is highly encouraged to always do this, even if the story doesn't have any loaders or beforeEach. If you later add any of these to the story, you don't need to remember to also call `load`. Cleaning up previous stories is also important, and calling `load` ensures that later modifying other stories doesn't affect the current story.
+It is recommended to always run `load` before rendering, even if the story doesn't have any loaders or beforeEach applied. By doing so, you ensure that the tests are cleaned up properly to maintain isolation and you will not have to update your test if you later add them to your story.
 
 
 
diff --git a/docs/api/portable-stories-vitest.md b/docs/api/portable-stories-vitest.md
index feab828de68b..2a934f68736e 100644
--- a/docs/api/portable-stories-vitest.md
+++ b/docs/api/portable-stories-vitest.md
@@ -99,15 +99,15 @@ An object where the keys are the names of the stories and the values are the com
 
 Additionally, the composed story will have the following properties:
 
-| Property   | Type                                      | Description                                                                        |
-| ---------- | ----------------------------------------- | ---------------------------------------------------------------------------------- |
-| storyName  | `string`                                  | The story's name                                                                   |
-| args       | `Record`                     | The story's [args](../writing-stories/args.md)                                     |
-| argTypes   | `ArgType`                                 | The story's [argTypes](./arg-types.md)                                             |
-| id         | `string`                                  | The story's id                                                                     |
-| parameters | `Record`                     | The story's [parameters](./parameters.md)                                          |
-| load       | `() => Promise`                     | [Prepares](#3-load) the story for rendering and and cleans up all previous stories |
-| play       | `(context) => Promise \| undefined` | Executes the [play function](#4-play-optional) of a given story                    |
+| Property   | Type                                      | Description                                                                           |
+| ---------- | ----------------------------------------- | ------------------------------------------------------------------------------------- |
+| storyName  | `string`                                  | The story's name                                                                      |
+| args       | `Record`                     | The story's [args](../writing-stories/args.md)                                        |
+| argTypes   | `ArgType`                                 | The story's [argTypes](./arg-types.md)                                                |
+| id         | `string`                                  | The story's id                                                                        |
+| parameters | `Record`                     | The story's [parameters](./parameters.md)                                             |
+| load       | `() => Promise`                     | [Prepares](#3-prepare) the story for rendering and and cleans up all previous stories |
+| play       | `(context) => Promise \| undefined` | Executes the [play function](#5-play) of a given story                                |
 
 ## composeStory
 
@@ -234,19 +234,19 @@ When you want to reuse a story in a different environment, however, it's crucial
 
 ๐Ÿ‘‰ย For this, you use the [`setProjectAnnotations`](#setprojectannotations) API.
 
-### 2. Prepare
+### 2. Compose
 
 The story is prepared by running [`composeStories`](#composestories) or [`composeStory`](#composestory). You do not need to do anything for this step.
 
-### 3. Load
+### 3. Prepare
 
-Stories can prepare data they need (e.g. setting up some mocks or fetching data) before rendering by defining [loaders](../writing-stories/loaders.md) or [beforeEach](../writing-stories/mocking-modules.md#setting-up-and-cleaning-up). In portable stories, loaders and beforeEach are not applied automatically โ€” you have to apply them yourself.
+Stories can prepare data they need (e.g. setting up some mocks or fetching data) before rendering by defining [loaders](../writing-stories/loaders.md) or [beforeEach](../writing-tests/interaction-testing.md#run-code-before-each-test). In portable stories, loaders and beforeEach are not applied automatically โ€” you have to apply them yourself.
 
 ๐Ÿ‘‰ย For this, you use the [`composeStories`](#composestories) or [`composeStory`](#composestory) API. The composed story will return a `load` method to be called **before** it is rendered.
 
 
 
-While it's technically optional to run `load` before rendering, it is highly encouraged to always do this, even if the story doesn't have any loaders or beforeEach. If you later add any of these to the story, you don't need to remember to also call `load`. Cleaning up previous stories is also important, and calling `load` ensures that later modifying other stories doesn't affect the current story.
+It is recommended to always run `load` before rendering, even if the story doesn't have any loaders or beforeEach applied. By doing so, you ensure that the tests are cleaned up properly to maintain isolation and you will not have to update your test if you later add them to your story.
 
 
 

From eebfd15df5c9912e3d7de28b6231ddfc16ff7a4d Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold 
Date: Fri, 3 May 2024 20:55:06 +0200
Subject: [PATCH 377/380] fix mistakes.

---
 code/lib/types/src/modules/frameworks.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/code/lib/types/src/modules/frameworks.ts b/code/lib/types/src/modules/frameworks.ts
index 0785763f46e5..c1ea25abe7b0 100644
--- a/code/lib/types/src/modules/frameworks.ts
+++ b/code/lib/types/src/modules/frameworks.ts
@@ -14,8 +14,6 @@ export type SupportedFrameworks =
   | 'svelte-vite'
   | 'svelte-webpack5'
   | 'sveltekit'
-  | 'vue-vite'
-  | 'vue-webpack5'
   | 'vue3-vite'
   | 'vue3-webpack5'
   | 'web-components-vite'

From b309c94dede25f32d61f97286091f7bfeb902ea2 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold 
Date: Sat, 4 May 2024 20:52:16 +0200
Subject: [PATCH 378/380] Revert "Nextjs: Implement next redirect and the
 RedirectBoundary"

---
 .../src/export-mocks/navigation/index.ts      |  39 +++----
 .../nextjs/src/fastRefresh/webpack.ts         |   9 +-
 code/frameworks/nextjs/src/preview.tsx        |  34 ------
 .../nextjs/src/routing/decorator.tsx          |  10 +-
 .../Redirect.stories.tsx                      |  54 ---------
 .../ServerActions.stories.tsx                 | 107 ++++++------------
 code/lib/react-dom-shim/src/react-18.tsx      |  10 +-
 code/renderers/react/src/renderToCanvas.tsx   |   2 +-
 8 files changed, 63 insertions(+), 202 deletions(-)
 delete mode 100644 code/frameworks/nextjs/template/stories_nextjs-default-ts/Redirect.stories.tsx

diff --git a/code/frameworks/nextjs/src/export-mocks/navigation/index.ts b/code/frameworks/nextjs/src/export-mocks/navigation/index.ts
index f55ee86c36ca..dd9e9a692e6f 100644
--- a/code/frameworks/nextjs/src/export-mocks/navigation/index.ts
+++ b/code/frameworks/nextjs/src/export-mocks/navigation/index.ts
@@ -1,9 +1,7 @@
 import type { Mock } from '@storybook/test';
 import { fn } from '@storybook/test';
-import * as actual from 'next/dist/client/components/navigation';
 import { NextjsRouterMocksNotAvailable } from '@storybook/core-events/preview-errors';
-import { RedirectStatusCode } from 'next/dist/client/components/redirect-status-code';
-import { getRedirectError } from 'next/dist/client/components/redirect';
+import * as originalNavigation from 'next/dist/client/components/navigation';
 
 let navigationAPI: {
   push: Mock;
@@ -58,37 +56,34 @@ export const getRouter = () => {
 export * from 'next/dist/client/components/navigation';
 
 // mock utilities/overrides (as of Next v14.2.0)
-export const redirect = fn(
-  (url: string, type: actual.RedirectType = actual.RedirectType.push): never => {
-    throw getRedirectError(url, type, RedirectStatusCode.SeeOther);
-  }
-).mockName('next/navigation::redirect');
-
-export const permanentRedirect = fn(
-  (url: string, type: actual.RedirectType = actual.RedirectType.push): never => {
-    throw getRedirectError(url, type, RedirectStatusCode.SeeOther);
-  }
-).mockName('next/navigation::permanentRedirect');
+export const redirect = fn().mockName('next/navigation::redirect');
 
 // passthrough mocks - keep original implementation but allow for spying
-export const useSearchParams = fn(actual.useSearchParams).mockName(
+export const useSearchParams = fn(originalNavigation.useSearchParams).mockName(
   'next/navigation::useSearchParams'
 );
-export const usePathname = fn(actual.usePathname).mockName('next/navigation::usePathname');
-export const useSelectedLayoutSegment = fn(actual.useSelectedLayoutSegment).mockName(
+export const usePathname = fn(originalNavigation.usePathname).mockName(
+  'next/navigation::usePathname'
+);
+export const useSelectedLayoutSegment = fn(originalNavigation.useSelectedLayoutSegment).mockName(
   'next/navigation::useSelectedLayoutSegment'
 );
-export const useSelectedLayoutSegments = fn(actual.useSelectedLayoutSegments).mockName(
+export const useSelectedLayoutSegments = fn(originalNavigation.useSelectedLayoutSegments).mockName(
   'next/navigation::useSelectedLayoutSegments'
 );
-export const useRouter = fn(actual.useRouter).mockName('next/navigation::useRouter');
-export const useServerInsertedHTML = fn(actual.useServerInsertedHTML).mockName(
+export const useRouter = fn(originalNavigation.useRouter).mockName('next/navigation::useRouter');
+export const useServerInsertedHTML = fn(originalNavigation.useServerInsertedHTML).mockName(
   'next/navigation::useServerInsertedHTML'
 );
-export const notFound = fn(actual.notFound).mockName('next/navigation::notFound');
+export const notFound = fn(originalNavigation.notFound).mockName('next/navigation::notFound');
+export const permanentRedirect = fn(originalNavigation.permanentRedirect).mockName(
+  'next/navigation::permanentRedirect'
+);
 
 // Params, not exported by Next.js, is manually declared to avoid inference issues.
 interface Params {
   [key: string]: string | string[];
 }
-export const useParams = fn<[], Params>(actual.useParams).mockName('next/navigation::useParams');
+export const useParams = fn<[], Params>(originalNavigation.useParams).mockName(
+  'next/navigation::useParams'
+);
diff --git a/code/frameworks/nextjs/src/fastRefresh/webpack.ts b/code/frameworks/nextjs/src/fastRefresh/webpack.ts
index f9bb9d6c51e7..83e91518383d 100644
--- a/code/frameworks/nextjs/src/fastRefresh/webpack.ts
+++ b/code/frameworks/nextjs/src/fastRefresh/webpack.ts
@@ -4,9 +4,10 @@ import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
 export const configureFastRefresh = (baseConfig: WebpackConfig): void => {
   baseConfig.plugins = [
     ...(baseConfig.plugins ?? []),
-    // overlay is disabled as it is shown with caught errors in error boundaries
-    // and the next app router is using error boundaries to redirect
-    // TODO use the Next error overlay
-    new ReactRefreshWebpackPlugin({ overlay: false }),
+    new ReactRefreshWebpackPlugin({
+      overlay: {
+        sockIntegration: 'whm',
+      },
+    }),
   ];
 };
diff --git a/code/frameworks/nextjs/src/preview.tsx b/code/frameworks/nextjs/src/preview.tsx
index 9a46a56c6918..8f141e7b1ef0 100644
--- a/code/frameworks/nextjs/src/preview.tsx
+++ b/code/frameworks/nextjs/src/preview.tsx
@@ -17,7 +17,6 @@ import { createRouter } from '@storybook/nextjs/router.mock';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore we must ignore types here as during compilation they are not generated yet
 import { createNavigation } from '@storybook/nextjs/navigation.mock';
-import { isNextRouterError } from 'next/dist/client/components/is-next-router-error';
 
 function addNextHeadCount() {
   const meta = document.createElement('meta');
@@ -26,33 +25,8 @@ function addNextHeadCount() {
   document.head.appendChild(meta);
 }
 
-function isAsyncClientComponentError(error: unknown) {
-  return (
-    typeof error === 'string' &&
-    (error.includes('A component was suspended by an uncached promise.') ||
-      error.includes('async/await is not yet supported in Client Components'))
-  );
-}
 addNextHeadCount();
 
-// Copying Next patch of console.error:
-// https://github.com/vercel/next.js/blob/a74deb63e310df473583ab6f7c1783bc609ca236/packages/next/src/client/app-index.tsx#L15
-const origConsoleError = globalThis.console.error;
-globalThis.console.error = (...args: unknown[]) => {
-  const error = args[0];
-  if (isNextRouterError(error) || isAsyncClientComponentError(error)) {
-    return;
-  }
-  origConsoleError.apply(globalThis.console, args);
-};
-
-globalThis.addEventListener('error', (ev: WindowEventMap['error']): void => {
-  if (isNextRouterError(ev.error) || isAsyncClientComponentError(ev.error)) {
-    ev.preventDefault();
-    return;
-  }
-});
-
 export const decorators: Addon_DecoratorFunction[] = [
   StyledJsxDecorator,
   ImageDecorator,
@@ -78,12 +52,4 @@ export const parameters = {
       excludeDecorators: true,
     },
   },
-  react: {
-    rootOptions: {
-      onCaughtError(error: unknown) {
-        if (isNextRouterError(error)) return;
-        console.error(error);
-      },
-    },
-  },
 };
diff --git a/code/frameworks/nextjs/src/routing/decorator.tsx b/code/frameworks/nextjs/src/routing/decorator.tsx
index 6c3f66ba6778..4979b6e3b08a 100644
--- a/code/frameworks/nextjs/src/routing/decorator.tsx
+++ b/code/frameworks/nextjs/src/routing/decorator.tsx
@@ -3,7 +3,6 @@ import type { Addon_StoryContext } from '@storybook/types';
 import { AppRouterProvider } from './app-router-provider';
 import { PageRouterProvider } from './page-router-provider';
 import type { RouteParams, NextAppDirectory } from './types';
-import { RedirectBoundary } from 'next/dist/client/components/redirect-boundary';
 
 const defaultRouterParams: RouteParams = {
   pathname: '/',
@@ -28,14 +27,7 @@ export const RouterDecorator = (
           ...parameters.nextjs?.navigation,
         }}
       >
-        {/*
-        The next.js RedirectBoundary causes flashing UI when used client side.
-        Possible use the implementation of the PR: https://github.com/vercel/next.js/pull/49439
-        Or wait for next to solve this on their side.
-        */}
-        
-          
-        
+        
       
     );
   }
diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Redirect.stories.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/Redirect.stories.tsx
deleted file mode 100644
index f76d8a7f5a90..000000000000
--- a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Redirect.stories.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { userEvent, within } from '@storybook/test';
-import { redirect } from 'next/navigation';
-
-let state = 'Bug! Not invalidated';
-
-export default {
-  render() {
-    return (
-      

-        
{state}

-         {
-            state = 'State is invalidated successfully.';
-            redirect('/');
-          }}
-        >
-          
-        
-      

-    );
-  },
-  parameters: {
-    test: {
-      // This is needed until Next will update to the React 19 beta: https://github.com/vercel/next.js/pull/65058
-      // In the React 19 beta ErrorBoundary errors (such as redirect) are only logged, and not thrown.
-      // We will also suspress console.error logs for re the console.error logs for redirect in the next framework.
-      // Using the onCaughtError react root option:
-      //   react: {
-      //     rootOptions: {
-      //       onCaughtError(error: unknown) {
-      //         if (isNextRouterError(error)) return;
-      //         console.error(error);
-      //       },
-      //     },
-      // See: code/frameworks/nextjs/src/preview.tsx
-      dangerouslyIgnoreUnhandledErrors: true,
-    },
-    nextjs: {
-      appDirectory: true,
-      navigation: {
-        pathname: '/',
-      },
-    },
-  },
-} as Meta;
-
-export const SingletonStateGetsInvalidatedAfterRedirecting: StoryObj = {
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByRole('button'));
-  },
-};
diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/ServerActions.stories.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/ServerActions.stories.tsx
index cb3f5bbdb2dd..17d364429726 100644
--- a/code/frameworks/nextjs/template/stories_nextjs-default-ts/ServerActions.stories.tsx
+++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/ServerActions.stories.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { expect, within, userEvent, waitFor } from '@storybook/test';
+import { expect, within, userEvent } from '@storybook/test';
 import { cookies } from '@storybook/nextjs/headers.mock';
 import { revalidatePath } from '@storybook/nextjs/cache.mock';
-import { redirect, getRouter } from '@storybook/nextjs/navigation.mock';
+import { redirect } from '@storybook/nextjs/navigation.mock';
 
 import { accessRoute, login, logout } from './server-actions';
 
@@ -31,84 +31,45 @@ function Component() {
 
 export default {
   component: Component,
-  parameters: {
-    nextjs: {
-      appDirectory: true,
-      navigation: {
-        pathname: '/',
-      },
-    },
-    test: {
-      // This is needed until Next will update to the React 19 beta: https://github.com/vercel/next.js/pull/65058
-      // In the React 19 beta ErrorBoundary errors (such as redirect) are only logged, and not thrown.
-      // We will also suspress console.error logs for re the console.error logs for redirect in the next framework.
-      // Using the onCaughtError react root option:
-      //   react: {
-      //     rootOptions: {
-      //       onCaughtError(error: unknown) {
-      //         if (isNextRouterError(error)) return;
-      //         console.error(error);
-      //       },
-      //     },
-      // See: code/frameworks/nextjs/src/preview.tsx
-      dangerouslyIgnoreUnhandledErrors: true,
-    },
-  },
 } as Meta;
 
-export const ProtectedWhileLoggedOut: StoryObj = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByText('Access protected route'));
-
-    await expect(cookies().get).toHaveBeenCalledWith('user');
-    await expect(redirect).toHaveBeenCalledWith('/');
-
-    await waitFor(() => expect(getRouter().push).toHaveBeenCalled());
-  },
-};
-
-export const ProtectedWhileLoggedIn: StoryObj = {
-  beforeEach() {
-    cookies().set('user', 'storybookjs');
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByText('Access protected route'));
-
-    await expect(cookies().get).toHaveBeenLastCalledWith('user');
-    await expect(revalidatePath).toHaveBeenLastCalledWith('/');
-    await expect(redirect).toHaveBeenLastCalledWith('/protected');
-
-    await waitFor(() => expect(getRouter().push).toHaveBeenCalled());
-  },
-};
-
-export const Logout: StoryObj = {
-  beforeEach() {
-    cookies().set('user', 'storybookjs');
-  },
-  play: async ({ canvasElement }) => {
+export const Default: StoryObj = {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
 
-    await userEvent.click(canvas.getByText('Logout'));
-    await expect(cookies().delete).toHaveBeenCalled();
-    await expect(revalidatePath).toHaveBeenCalledWith('/');
-    await expect(redirect).toHaveBeenCalledWith('/');
+    const loginBtn = canvas.getByText('Login');
+    const logoutBtn = canvas.getByText('Logout');
+    const accessRouteBtn = canvas.getByText('Access protected route');
 
-    await waitFor(() => expect(getRouter().push).toHaveBeenCalled());
-  },
-};
+    await step('accessRoute flow - logged out', async () => {
+      await userEvent.click(accessRouteBtn);
+      await expect(cookies().get).toHaveBeenCalledWith('user');
+      await expect(redirect).toHaveBeenCalledWith('/');
+    });
 
-export const Login: StoryObj = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByText('Login'));
+    await step('accessRoute flow - logged', async () => {
+      cookies.mockRestore();
+      cookies().set('user', 'storybookjs');
+      await userEvent.click(accessRouteBtn);
+      await expect(cookies().get).toHaveBeenCalledWith('user');
+      await expect(revalidatePath).toHaveBeenCalledWith('/');
+      await expect(redirect).toHaveBeenCalledWith('/protected');
+    });
 
-    await expect(cookies().set).toHaveBeenCalledWith('user', 'storybookjs');
-    await expect(revalidatePath).toHaveBeenCalledWith('/');
-    await expect(redirect).toHaveBeenCalledWith('/');
+    await step('logout flow', async () => {
+      cookies.mockRestore();
+      await userEvent.click(logoutBtn);
+      await expect(cookies().delete).toHaveBeenCalled();
+      await expect(revalidatePath).toHaveBeenCalledWith('/');
+      await expect(redirect).toHaveBeenCalledWith('/');
+    });
 
-    await waitFor(() => expect(getRouter().push).toHaveBeenCalled());
+    await step('login flow', async () => {
+      cookies.mockRestore();
+      await userEvent.click(loginBtn);
+      await expect(cookies().set).toHaveBeenCalledWith('user', 'storybookjs');
+      await expect(revalidatePath).toHaveBeenCalledWith('/');
+      await expect(redirect).toHaveBeenCalledWith('/');
+    });
   },
 };
diff --git a/code/lib/react-dom-shim/src/react-18.tsx b/code/lib/react-dom-shim/src/react-18.tsx
index 5b9e88f98a84..ddfa738d4dd9 100644
--- a/code/lib/react-dom-shim/src/react-18.tsx
+++ b/code/lib/react-dom-shim/src/react-18.tsx
@@ -1,6 +1,6 @@
 import type { FC, ReactElement } from 'react';
+import type { Root as ReactRoot } from 'react-dom/client';
 import React, { useLayoutEffect, useRef } from 'react';
-import type { Root as ReactRoot, RootOptions } from 'react-dom/client';
 import ReactDOM from 'react-dom/client';
 
 // A map of all rendered React 18 nodes
@@ -21,9 +21,9 @@ const WithCallback: FC<{ callback: () => void; children: ReactElement }> = ({
   return children;
 };
 
-export const renderElement = async (node: ReactElement, el: Element, rootOptions?: RootOptions) => {
+export const renderElement = async (node: ReactElement, el: Element) => {
   // Create Root Element conditionally for new React 18 Root Api
-  const root = await getReactRoot(el, rootOptions);
+  const root = await getReactRoot(el);
 
   return new Promise((resolve) => {
     root.render( resolve(null)}>{node});
@@ -39,11 +39,11 @@ export const unmountElement = (el: Element, shouldUseNewRootApi?: boolean) => {
   }
 };
 
-const getReactRoot = async (el: Element, rootOptions?: RootOptions): Promise => {
+const getReactRoot = async (el: Element): Promise => {
   let root = nodes.get(el);
 
   if (!root) {
-    root = ReactDOM.createRoot(el, rootOptions);
+    root = ReactDOM.createRoot(el);
     nodes.set(el, root);
   }
 
diff --git a/code/renderers/react/src/renderToCanvas.tsx b/code/renderers/react/src/renderToCanvas.tsx
index 8cb2e76f9b2d..d8821a3458e4 100644
--- a/code/renderers/react/src/renderToCanvas.tsx
+++ b/code/renderers/react/src/renderToCanvas.tsx
@@ -74,7 +74,7 @@ export async function renderToCanvas(
     unmountElement(canvasElement);
   }
 
-  await renderElement(element, canvasElement, storyContext?.parameters?.react?.rootOptions);
+  await renderElement(element, canvasElement);
 
   return () => unmountElement(canvasElement);
 }

From 0dcf06f7993ad94dc978bdcd6e8b56d9736a97c8 Mon Sep 17 00:00:00 2001
From: storybook-bot <32066757+storybook-bot@users.noreply.github.com>
Date: Sun, 5 May 2024 07:10:22 +0000
Subject: [PATCH 379/380] Write changelog for 8.1.0-alpha.8 [skip ci]

---
 CHANGELOG.prerelease.md | 32 ++++++++++++++++++++++++++++++++
 code/package.json       |  3 ++-
 docs/versions/next.json |  2 +-
 3 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md
index 5d6baeac2136..2e18774b6142 100644
--- a/CHANGELOG.prerelease.md
+++ b/CHANGELOG.prerelease.md
@@ -1,3 +1,35 @@
+## 8.1.0-alpha.8
+
+- Addon-actions: Fix falsy args printing as object - 22163 - [#26917](https://github.com/storybookjs/storybook/pull/26917), thanks @Fatcat560!
+- Addon-docs: Fix MDX compilation with `@vitejs/plugin-react-swc` and plugins - [#26837](https://github.com/storybookjs/storybook/pull/26837), thanks @JReinhold!
+- Automigration: Fix name of VTA addon - [#26816](https://github.com/storybookjs/storybook/pull/26816), thanks @valentinpalkovic!
+- Blocks: Add `of` prop to `Subtitle` - [#22552](https://github.com/storybookjs/storybook/pull/22552), thanks @joaonunomota!
+- Blocks: Add `of` prop to `Title` - [#23728](https://github.com/storybookjs/storybook/pull/23728), thanks @Sidnioulz!
+- CSF: Fix typings for control and other properties of argTypes - [#26824](https://github.com/storybookjs/storybook/pull/26824), thanks @kasperpeulen!
+- Controls: Added server channel to create a new story - [#26769](https://github.com/storybookjs/storybook/pull/26769), thanks @valentinpalkovic!
+- Controls: Fix crashing when docgen extraction partially fails - [#26862](https://github.com/storybookjs/storybook/pull/26862), thanks @yannbf!
+- Core: Drop unneeded `UPDATE_STORY_ARGS` which was for SSv6 - [#25993](https://github.com/storybookjs/storybook/pull/25993), thanks @tmeasday!
+- Core: Ensure that simultaneous onStoriesChanged don't clobber each other - [#26882](https://github.com/storybookjs/storybook/pull/26882), thanks @tmeasday!
+- Core: Fix filters not being applied in WebKit - [#26949](https://github.com/storybookjs/storybook/pull/26949), thanks @JReinhold!
+- Core: Implement file formatter - [#26809](https://github.com/storybookjs/storybook/pull/26809), thanks @valentinpalkovic!
+- Core: Save from controls - [#26827](https://github.com/storybookjs/storybook/pull/26827), thanks @ndelangen!
+- Dependencies: Upgrade @storybook/csf to 0.1.5 - [#26958](https://github.com/storybookjs/storybook/pull/26958), thanks @Cherry!
+- Doc Tools: Signature Type Error Handling - [#26774](https://github.com/storybookjs/storybook/pull/26774), thanks @ethriel3695!
+- Docs: Fix providerImportSource extension - [#26868](https://github.com/storybookjs/storybook/pull/26868), thanks @bashmish!
+- MDX: Don't transform `http://` links - [#26488](https://github.com/storybookjs/storybook/pull/26488), thanks @JReinhold!
+- Next.js: Move sharp into optional deps - [#26787](https://github.com/storybookjs/storybook/pull/26787), thanks @shuta13!
+- Next.js: Support v14.2 useParams functionality - [#26874](https://github.com/storybookjs/storybook/pull/26874), thanks @yannbf!
+- Nextjs: Implement next redirect and the RedirectBoundary - [#26886](https://github.com/storybookjs/storybook/pull/26886), thanks @kasperpeulen!
+- Portable Stories: Warn when rendering stories without cleaning up first - [#27008](https://github.com/storybookjs/storybook/pull/27008), thanks @JReinhold!
+- React: Support v19 in `react-dom-shim` - [#26898](https://github.com/storybookjs/storybook/pull/26898), thanks @Tobbe!
+- Revert "Nextjs: Implement next redirect and the RedirectBoundary" - [#27025](https://github.com/storybookjs/storybook/pull/27025), thanks @JReinhold!
+- SfC: Implement new feature to create new story files - [#26875](https://github.com/storybookjs/storybook/pull/26875), thanks @valentinpalkovic!
+- Test: Remove chai as dependency of @storybook/test - [#26852](https://github.com/storybookjs/storybook/pull/26852), thanks @kasperpeulen!
+- Test: Support module mocking with conditional subpath imports in `package.json`  - [#26688](https://github.com/storybookjs/storybook/pull/26688), thanks @kasperpeulen!
+- UI: Fix not re-rendering tabs on state change - [#26899](https://github.com/storybookjs/storybook/pull/26899), thanks @lifeiscontent!
+- UI: Fix sidebar search hanging when selecting a story in touch mode - [#26807](https://github.com/storybookjs/storybook/pull/26807), thanks @JReinhold!
+- Vite: Merge assetsInclude property with Storybook default values - [#26860](https://github.com/storybookjs/storybook/pull/26860), thanks @yuemori!
+
 ## 8.1.0-alpha.7
 
 - CLI: Add --config-dir flag to add command - [#26771](https://github.com/storybookjs/storybook/pull/26771), thanks @eric-blue!
diff --git a/code/package.json b/code/package.json
index 82d1541a338b..12fbd04d33ab 100644
--- a/code/package.json
+++ b/code/package.json
@@ -299,5 +299,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "8.1.0-alpha.8"
 }
diff --git a/docs/versions/next.json b/docs/versions/next.json
index 2f8990d20967..0b1db18172a4 100644
--- a/docs/versions/next.json
+++ b/docs/versions/next.json
@@ -1 +1 @@
-{"version":"8.1.0-alpha.7","info":{"plain":"- CLI: Add --config-dir flag to add command - [#26771](https://github.com/storybookjs/storybook/pull/26771), thanks @eric-blue!\n- CLI: Add Visual Tests addon install auto-migration when upgrading to 8.0.x - [#26766](https://github.com/storybookjs/storybook/pull/26766), thanks @ndelangen!\n- Controls: Add Channels API to search for files in the project root - [#26726](https://github.com/storybookjs/storybook/pull/26726), thanks @valentinpalkovic!\n- Test: Make spies reactive so that they can be logged by addon-actions - [#26740](https://github.com/storybookjs/storybook/pull/26740), thanks @kasperpeulen!\n- Vue: Disable controls for events, slots, and expose - [#26751](https://github.com/storybookjs/storybook/pull/26751), thanks @shilman!\n- Webpack: Bump webpack-dev-middleware to patch high security issue - [#26655](https://github.com/storybookjs/storybook/pull/26655), thanks @jwilliams-met!"}}
+{"version":"8.1.0-alpha.8","info":{"plain":"- Addon-actions: Fix falsy args printing as object - 22163 - [#26917](https://github.com/storybookjs/storybook/pull/26917), thanks @Fatcat560!\n- Addon-docs: Fix MDX compilation with `@vitejs/plugin-react-swc` and plugins - [#26837](https://github.com/storybookjs/storybook/pull/26837), thanks @JReinhold!\n- Automigration: Fix name of VTA addon - [#26816](https://github.com/storybookjs/storybook/pull/26816), thanks @valentinpalkovic!\n- Blocks: Add `of` prop to `Subtitle` - [#22552](https://github.com/storybookjs/storybook/pull/22552), thanks @joaonunomota!\n- Blocks: Add `of` prop to `Title` - [#23728](https://github.com/storybookjs/storybook/pull/23728), thanks @Sidnioulz!\n- CSF: Fix typings for control and other properties of argTypes - [#26824](https://github.com/storybookjs/storybook/pull/26824), thanks @kasperpeulen!\n- Controls: Added server channel to create a new story - [#26769](https://github.com/storybookjs/storybook/pull/26769), thanks @valentinpalkovic!\n- Controls: Fix crashing when docgen extraction partially fails - [#26862](https://github.com/storybookjs/storybook/pull/26862), thanks @yannbf!\n- Core: Drop unneeded `UPDATE_STORY_ARGS` which was for SSv6 - [#25993](https://github.com/storybookjs/storybook/pull/25993), thanks @tmeasday!\n- Core: Ensure that simultaneous onStoriesChanged don't clobber each other - [#26882](https://github.com/storybookjs/storybook/pull/26882), thanks @tmeasday!\n- Core: Fix filters not being applied in WebKit - [#26949](https://github.com/storybookjs/storybook/pull/26949), thanks @JReinhold!\n- Core: Implement file formatter - [#26809](https://github.com/storybookjs/storybook/pull/26809), thanks @valentinpalkovic!\n- Core: Save from controls - [#26827](https://github.com/storybookjs/storybook/pull/26827), thanks @ndelangen!\n- Dependencies: Upgrade @storybook/csf to 0.1.5 - [#26958](https://github.com/storybookjs/storybook/pull/26958), thanks @Cherry!\n- Doc Tools: Signature Type Error Handling - [#26774](https://github.com/storybookjs/storybook/pull/26774), thanks @ethriel3695!\n- Docs: Fix providerImportSource extension - [#26868](https://github.com/storybookjs/storybook/pull/26868), thanks @bashmish!\n- MDX: Don't transform `http://` links - [#26488](https://github.com/storybookjs/storybook/pull/26488), thanks @JReinhold!\n- Next.js: Move sharp into optional deps - [#26787](https://github.com/storybookjs/storybook/pull/26787), thanks @shuta13!\n- Next.js: Support v14.2 useParams functionality - [#26874](https://github.com/storybookjs/storybook/pull/26874), thanks @yannbf!\n- Nextjs: Implement next redirect and the RedirectBoundary - [#26886](https://github.com/storybookjs/storybook/pull/26886), thanks @kasperpeulen!\n- Portable Stories: Warn when rendering stories without cleaning up first - [#27008](https://github.com/storybookjs/storybook/pull/27008), thanks @JReinhold!\n- React: Support v19 in `react-dom-shim` - [#26898](https://github.com/storybookjs/storybook/pull/26898), thanks @Tobbe!\n- Revert \\\"Nextjs: Implement next redirect and the RedirectBoundary\\\" - [#27025](https://github.com/storybookjs/storybook/pull/27025), thanks @JReinhold!\n- SfC: Implement new feature to create new story files - [#26875](https://github.com/storybookjs/storybook/pull/26875), thanks @valentinpalkovic!\n- Test: Remove chai as dependency of @storybook/test - [#26852](https://github.com/storybookjs/storybook/pull/26852), thanks @kasperpeulen!\n- Test: Support module mocking with conditional subpath imports in `package.json`  - [#26688](https://github.com/storybookjs/storybook/pull/26688), thanks @kasperpeulen!\n- UI: Fix not re-rendering tabs on state change - [#26899](https://github.com/storybookjs/storybook/pull/26899), thanks @lifeiscontent!\n- UI: Fix sidebar search hanging when selecting a story in touch mode - [#26807](https://github.com/storybookjs/storybook/pull/26807), thanks @JReinhold!\n- Vite: Merge assetsInclude property with Storybook default values - [#26860](https://github.com/storybookjs/storybook/pull/26860), thanks @yuemori!"}}

From a0820327b8675b740509c95f1f983b4b4c87e754 Mon Sep 17 00:00:00 2001
From: Michael Shilman 
Date: Sun, 5 May 2024 15:30:08 +0800
Subject: [PATCH 380/380] Update CHANGELOG.prerelease.md

---
 CHANGELOG.prerelease.md | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md
index 2e18774b6142..47702f63d66b 100644
--- a/CHANGELOG.prerelease.md
+++ b/CHANGELOG.prerelease.md
@@ -8,6 +8,7 @@
 - CSF: Fix typings for control and other properties of argTypes - [#26824](https://github.com/storybookjs/storybook/pull/26824), thanks @kasperpeulen!
 - Controls: Added server channel to create a new story - [#26769](https://github.com/storybookjs/storybook/pull/26769), thanks @valentinpalkovic!
 - Controls: Fix crashing when docgen extraction partially fails - [#26862](https://github.com/storybookjs/storybook/pull/26862), thanks @yannbf!
+- Controls: Add UI to create new story files - [#26875](https://github.com/storybookjs/storybook/pull/26875), thanks @valentinpalkovic!
 - Core: Drop unneeded `UPDATE_STORY_ARGS` which was for SSv6 - [#25993](https://github.com/storybookjs/storybook/pull/25993), thanks @tmeasday!
 - Core: Ensure that simultaneous onStoriesChanged don't clobber each other - [#26882](https://github.com/storybookjs/storybook/pull/26882), thanks @tmeasday!
 - Core: Fix filters not being applied in WebKit - [#26949](https://github.com/storybookjs/storybook/pull/26949), thanks @JReinhold!
@@ -19,11 +20,8 @@
 - MDX: Don't transform `http://` links - [#26488](https://github.com/storybookjs/storybook/pull/26488), thanks @JReinhold!
 - Next.js: Move sharp into optional deps - [#26787](https://github.com/storybookjs/storybook/pull/26787), thanks @shuta13!
 - Next.js: Support v14.2 useParams functionality - [#26874](https://github.com/storybookjs/storybook/pull/26874), thanks @yannbf!
-- Nextjs: Implement next redirect and the RedirectBoundary - [#26886](https://github.com/storybookjs/storybook/pull/26886), thanks @kasperpeulen!
 - Portable Stories: Warn when rendering stories without cleaning up first - [#27008](https://github.com/storybookjs/storybook/pull/27008), thanks @JReinhold!
 - React: Support v19 in `react-dom-shim` - [#26898](https://github.com/storybookjs/storybook/pull/26898), thanks @Tobbe!
-- Revert "Nextjs: Implement next redirect and the RedirectBoundary" - [#27025](https://github.com/storybookjs/storybook/pull/27025), thanks @JReinhold!
-- SfC: Implement new feature to create new story files - [#26875](https://github.com/storybookjs/storybook/pull/26875), thanks @valentinpalkovic!
 - Test: Remove chai as dependency of @storybook/test - [#26852](https://github.com/storybookjs/storybook/pull/26852), thanks @kasperpeulen!
 - Test: Support module mocking with conditional subpath imports in `package.json`  - [#26688](https://github.com/storybookjs/storybook/pull/26688), thanks @kasperpeulen!
 - UI: Fix not re-rendering tabs on state change - [#26899](https://github.com/storybookjs/storybook/pull/26899), thanks @lifeiscontent!