From 21916797bc44249f940710b9f4d0de48e414ad4d Mon Sep 17 00:00:00 2001 From: Alen Ajam Date: Mon, 1 May 2023 18:57:43 +0200 Subject: [PATCH 01/38] fix(Select.tsx): added value prop to select and multiselect --- code/ui/blocks/src/controls/options/Select.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/code/ui/blocks/src/controls/options/Select.tsx b/code/ui/blocks/src/controls/options/Select.tsx index f033c131bd71..b05d58a4a3a7 100644 --- a/code/ui/blocks/src/controls/options/Select.tsx +++ b/code/ui/blocks/src/controls/options/Select.tsx @@ -110,7 +110,9 @@ const SingleSelect: FC = ({ name, value, options, onChange }) => { {NO_SELECTION} {Object.keys(options).map((key) => ( - + ))} @@ -131,7 +133,9 @@ const MultiSelect: FC = ({ name, value, options, onChange }) => { {Object.keys(options).map((key) => ( - + ))} From 41dd534a5f777ec7babe8e4cdbda19cb5e30f9db Mon Sep 17 00:00:00 2001 From: Alen Ajam Date: Mon, 1 May 2023 19:03:08 +0200 Subject: [PATCH 02/38] fix(basics.stories.ts): fixed select and multiselect controls, added double space option --- code/addons/controls/template/stories/basics.stories.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/addons/controls/template/stories/basics.stories.ts b/code/addons/controls/template/stories/basics.stories.ts index 51acda9c1f21..6d2224d80126 100644 --- a/code/addons/controls/template/stories/basics.stories.ts +++ b/code/addons/controls/template/stories/basics.stories.ts @@ -25,8 +25,8 @@ export default { control: { type: 'radio', options: ['a', 'b', 'c'], labels: ['alpha', 'beta', 'gamma'] }, }, inlineRadio: { control: { type: 'inline-radio', options: ['a', 'b', 'c'] } }, - select: { control: { type: 'select', options: ['a', 'b', 'c'] } }, - multiSelect: { control: { type: 'multi-select', options: ['a', 'b', 'c'] } }, + select: { control: 'select', options: ['a', 'b', 'c', 'double space'] }, + multiSelect: { control: { type: 'multi-select' }, options: ['a', 'b', 'c', 'double space'] }, range: { control: 'range' }, rangeCustom: { control: { type: 'range', min: 0, max: 1000, step: 100 } }, text: { control: 'text' }, From afd96e736acc58b2d6fe1abecac4b68fec887b5c Mon Sep 17 00:00:00 2001 From: Alen Ajam Date: Mon, 1 May 2023 19:07:21 +0200 Subject: [PATCH 03/38] test(addon-controls.spec.ts): check that options which value contain double spaces work --- code/e2e-tests/addon-controls.spec.ts | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/code/e2e-tests/addon-controls.spec.ts b/code/e2e-tests/addon-controls.spec.ts index bcbf96019947..df376782aae8 100644 --- a/code/e2e-tests/addon-controls.spec.ts +++ b/code/e2e-tests/addon-controls.spec.ts @@ -70,4 +70,31 @@ test.describe('addon-controls', () => { const label = await sbPage.panelContent().locator('textarea[name=label]').inputValue(); await expect(label).toEqual('Hello world'); }); + + test('should set select option when value contains double spaces', async ({ page }) => { + await page.goto(`${storybookUrl}?path=/story/addons-controls-basics--undefined`); + + const sbPage = new SbPage(page); + await sbPage.waitUntilLoaded(); + await sbPage.viewAddonPanel('Controls'); + await sbPage.panelContent().locator('#control-select').selectOption('double space'); + + await expect(sbPage.panelContent().locator('#control-select')).toHaveValue('double space'); + await expect(page).toHaveURL(/.*select:double\+\+space.*/); + }); + + test('should set multiselect option when value contains double spaces', async ({ page }) => { + await page.goto(`${storybookUrl}?path=/story/addons-controls-basics--undefined`); + + const sbPage = new SbPage(page); + await sbPage.waitUntilLoaded(); + await sbPage.viewAddonPanel('Controls'); + await sbPage.panelContent().locator('#control-multiSelect').selectOption('double space'); + + await expect(sbPage.panelContent().locator('#control-multiSelect')).toHaveValue( + 'double space' + ); + + await expect(page).toHaveURL(/.*multiSelect\[0]:double\+\+space.*/); + }); }); From 8978776ff528b8ea80cc90f8d86d3949e28ab237 Mon Sep 17 00:00:00 2001 From: Shaun Lloyd Date: Tue, 29 Aug 2023 14:21:12 -0400 Subject: [PATCH 04/38] Add url for themes icon --- code/addons/themes/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json index 8e4a40ec9a08..93cd55aba010 100644 --- a/code/addons/themes/package.json +++ b/code/addons/themes/package.json @@ -114,6 +114,6 @@ "unsupportedFrameworks": [ "react-native" ], - "icon": "" + "icon": "https://user-images.githubusercontent.com/18172605/264114587-e4b32190-a9b7-4afa-b739-c873fc0498a6.png" } } From 98692824ad0efa90c7c118446bf322d32790d3e7 Mon Sep 17 00:00:00 2001 From: Nate Houk Date: Sat, 2 Sep 2023 09:32:01 +0200 Subject: [PATCH 05/38] Update chromatic-github-action.js.mdx Update to fix errors with fetch-depth --- docs/snippets/common/chromatic-github-action.js.mdx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/docs/snippets/common/chromatic-github-action.js.mdx b/docs/snippets/common/chromatic-github-action.js.mdx index c064b7ae6cf6..8e796479564b 100644 --- a/docs/snippets/common/chromatic-github-action.js.mdx +++ b/docs/snippets/common/chromatic-github-action.js.mdx @@ -15,7 +15,13 @@ jobs: # Job steps steps: - uses: actions/checkout@v3 - - run: yarn + with: + fetch-depth: 0 + - uses: actions/setup-node@v3 + with: + node-version: 20 + cache: 'npm' + - run: npm ci #👇 Adds Chromatic as a step in the workflow - uses: chromaui/action@v1 # Options required for Chromatic's GitHub Action From 1bfdfb16b657bf2b36e563bd83d5144425f906d0 Mon Sep 17 00:00:00 2001 From: Nate Houk Date: Wed, 20 Sep 2023 06:47:39 +0200 Subject: [PATCH 06/38] Update chromatic-github-action.js.mdx --- docs/snippets/common/chromatic-github-action.js.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/snippets/common/chromatic-github-action.js.mdx b/docs/snippets/common/chromatic-github-action.js.mdx index 8e796479564b..17ba831a0cc2 100644 --- a/docs/snippets/common/chromatic-github-action.js.mdx +++ b/docs/snippets/common/chromatic-github-action.js.mdx @@ -19,8 +19,8 @@ jobs: fetch-depth: 0 - uses: actions/setup-node@v3 with: - node-version: 20 - cache: 'npm' + node-version: 18 + cache: 'yarn' - run: npm ci #👇 Adds Chromatic as a step in the workflow - uses: chromaui/action@v1 From b3674b8c0382af83015724cedf1c86dd6b277314 Mon Sep 17 00:00:00 2001 From: Nate Houk Date: Wed, 20 Sep 2023 06:50:40 +0200 Subject: [PATCH 07/38] Update chromatic-github-action.js.mdx --- docs/snippets/common/chromatic-github-action.js.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/snippets/common/chromatic-github-action.js.mdx b/docs/snippets/common/chromatic-github-action.js.mdx index 17ba831a0cc2..ed13fa937ac1 100644 --- a/docs/snippets/common/chromatic-github-action.js.mdx +++ b/docs/snippets/common/chromatic-github-action.js.mdx @@ -21,7 +21,7 @@ jobs: with: node-version: 18 cache: 'yarn' - - run: npm ci + - run: yarn ci #👇 Adds Chromatic as a step in the workflow - uses: chromaui/action@v1 # Options required for Chromatic's GitHub Action From e1af53ad3c161d51bc1d9d86705856578330eb1d Mon Sep 17 00:00:00 2001 From: Iran Date: Tue, 3 Oct 2023 14:44:04 -0300 Subject: [PATCH 08/38] Remove file URL examples from storyshots-puppetteer docs --- code/addons/storyshots-puppeteer/README.md | 17 +---------------- 1 file changed, 1 insertion(+), 16 deletions(-) diff --git a/code/addons/storyshots-puppeteer/README.md b/code/addons/storyshots-puppeteer/README.md index 2175c1d436d4..de7d4d801326 100644 --- a/code/addons/storyshots-puppeteer/README.md +++ b/code/addons/storyshots-puppeteer/README.md @@ -19,7 +19,7 @@ When running Puppeteer tests for your stories, you have two options: - Have a storybook running (ie. accessible via http(s), for instance using `npm run storybook`) - Have a static build of the storybook (for instance, using `npm run build-storybook`) -Then you will need to reference the storybook URL (`file://...` if local, `http(s)://...` if served) +Then you will need to reference the storybook URL (`http(s)://...`) ## _puppeteerTest_ @@ -72,21 +72,6 @@ initStoryshots({ The above config will use __ for tests. You can also use query parameters in your URL (e.g. for setting a different background for your storyshots, if you use `@storybook/addon-backgrounds`). -You may also use a local static build of storybook if you do not want to run the webpack dev-server: - -```js -import initStoryshots from '@storybook/addon-storyshots'; -import { puppeteerTest } from '@storybook/addon-storyshots-puppeteer'; - -initStoryshots({ - suite: 'Puppeteer storyshots', - test: puppeteerTest({ - storybookUrl: 'file:///path/to/my/storybook-static', - // storybookUrl: 'file://${path.resolve(__dirname, '../storybook-static')}' - }), -}); -``` - ### Specifying options to _goto()_ (Puppeteer API) You might use `getGotoOptions` to specify options when the storybook is navigating to a story (using the `goto` method). Will be passed to [Puppeteer .goto() fn](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagegotourl-options) From 15370fd1c75a02d36b5c60a46573e3930b6d45e0 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Thu, 5 Oct 2023 08:54:32 -0400 Subject: [PATCH 09/38] Add instructions for installing yarn --- docs/contribute/code.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/docs/contribute/code.md b/docs/contribute/code.md index e0317f634c8d..9b91bd64cb98 100644 --- a/docs/contribute/code.md +++ b/docs/contribute/code.md @@ -17,6 +17,12 @@ Start by [forking](https://docs.github.com/en/github/getting-started-with-github git clone https://github.com/your-username/storybook.git ``` +Storybook uses the [yarn](https://v3.yarnpkg.com/) package manager. Use [corepack](https://github.com/nodejs/corepack) to set up the correct version for use with Storybook. + +```shell +corepack enable +``` + ## Run your first sandbox Storybook development happens in a set of _sandboxes_ which are templated Storybook environments corresponding to different user setups. Within each sandbox, we inject a set of generalized stories that allow us to test core features and addons in all such environments. From 806ea52995e1fe2e637fdfad9b1c7a11ff0d90b4 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Thu, 5 Oct 2023 08:54:52 -0400 Subject: [PATCH 10/38] Add step to cd into storybook directory --- docs/contribute/code.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/contribute/code.md b/docs/contribute/code.md index 9b91bd64cb98..fbc3dda02955 100644 --- a/docs/contribute/code.md +++ b/docs/contribute/code.md @@ -15,6 +15,7 @@ Start by [forking](https://docs.github.com/en/github/getting-started-with-github ```shell git clone https://github.com/your-username/storybook.git +cd storybook ``` Storybook uses the [yarn](https://v3.yarnpkg.com/) package manager. Use [corepack](https://github.com/nodejs/corepack) to set up the correct version for use with Storybook. From c74abef79dbd3c053164ca5fe6bbe75a11bebad2 Mon Sep 17 00:00:00 2001 From: Hikaru Yoshino Date: Mon, 9 Oct 2023 02:14:03 +0900 Subject: [PATCH 11/38] fix: pass when callee.name equals local.name --- code/frameworks/nextjs/src/font/babel/helpers.ts | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/code/frameworks/nextjs/src/font/babel/helpers.ts b/code/frameworks/nextjs/src/font/babel/helpers.ts index f964f17022f7..8b027ae2cd44 100644 --- a/code/frameworks/nextjs/src/font/babel/helpers.ts +++ b/code/frameworks/nextjs/src/font/babel/helpers.ts @@ -281,13 +281,16 @@ export function getVariableMetasBySpecifier( return undefined; } + if (!types.isIdentifier(declaration.init.callee)) { + return undefined; + } + if ( - (!types.isIdentifier(declaration.init.callee) || - specifier.type !== 'ImportSpecifier' || + (specifier.type !== 'ImportSpecifier' || specifier.imported.type !== 'Identifier' || - declaration.init.callee.name !== specifier.imported.name) && - (!types.isIdentifier(declaration.init.callee) || - specifier.type !== 'ImportDefaultSpecifier' || + (declaration.init.callee.name !== specifier.imported.name && + declaration.init.callee.name !== specifier.local.name)) && + (specifier.type !== 'ImportDefaultSpecifier' || declaration.init.callee.name !== specifier.local.name) ) { return undefined; From 83c5b0016fdd745eae77bebd6a138ece54a4ff02 Mon Sep 17 00:00:00 2001 From: Hikaru Yoshino Date: Mon, 9 Oct 2023 02:16:10 +0900 Subject: [PATCH 12/38] fix: use imported.name as a functionName --- code/frameworks/nextjs/src/font/babel/helpers.ts | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/code/frameworks/nextjs/src/font/babel/helpers.ts b/code/frameworks/nextjs/src/font/babel/helpers.ts index 8b027ae2cd44..5f588d8c8c2c 100644 --- a/code/frameworks/nextjs/src/font/babel/helpers.ts +++ b/code/frameworks/nextjs/src/font/babel/helpers.ts @@ -314,8 +314,15 @@ export function getVariableMetasBySpecifier( const identifierName = declaration.id.name; const properties = convertNodeToJSON(types, options); - const functionName = declaration.init.callee.name; - + let functionName = declaration.init.callee.name; + if ( + specifier.type === 'ImportSpecifier' && + specifier.imported && + specifier.imported.type === 'Identifier' && + declaration.init.callee.name !== specifier.imported.name + ) { + functionName = specifier.imported.name; + } return { identifierName, properties, functionName }; }) .filter(isDefined); From c30406738d35e17d259981d6cd1455b38000ed08 Mon Sep 17 00:00:00 2001 From: Hikaru Yoshino Date: Mon, 9 Oct 2023 02:22:06 +0900 Subject: [PATCH 13/38] feat: update test of TransformFontImports --- .../frameworks/nextjs/src/font/babel/index.test.ts | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/code/frameworks/nextjs/src/font/babel/index.test.ts b/code/frameworks/nextjs/src/font/babel/index.test.ts index 45a0de5c8bb4..405d25b227cf 100644 --- a/code/frameworks/nextjs/src/font/babel/index.test.ts +++ b/code/frameworks/nextjs/src/font/babel/index.test.ts @@ -3,7 +3,7 @@ import { transform } from '@babel/core'; import TransformFontImports from '.'; const example = ` -import { Inter, Roboto } from 'next/font/google' +import { Inter, Lora as FontLora, Roboto } from 'next/font/google' import localFont from 'next/font/local' const myFont = localFont({ src: './my-font.woff2' }) @@ -12,6 +12,10 @@ const roboto = Roboto({ weight: '400', }) +const lora = FontLora({ + weight: '400', +}) + const inter = Inter({ subsets: ['latin'], }); @@ -20,7 +24,7 @@ const randomObj = {} `; const exampleLegacy = ` -import { Inter, Roboto } from '@next/font/google' +import { Inter, Lora as FontLora, Roboto } from '@next/font/google' import localFont from '@next/font/local' const myFont = localFont({ src: './my-font.woff2' }) @@ -29,6 +33,10 @@ const roboto = Roboto({ weight: '400', }) +const lora = FontLora({ + weight: '400', +}) + const inter = Inter({ subsets: ['latin'], }); @@ -40,6 +48,7 @@ it('should transform next/font AST properly', () => { const { code } = transform(example, { plugins: [TransformFontImports] })!; expect(code).toMatchInlineSnapshot(` "import inter from \\"storybook-nextjs-font-loader?{\\\\\\"source\\\\\\":\\\\\\"next/font/google\\\\\\",\\\\\\"props\\\\\\":{\\\\\\"subsets\\\\\\":[\\\\\\"latin\\\\\\"]},\\\\\\"fontFamily\\\\\\":\\\\\\"Inter\\\\\\",\\\\\\"filename\\\\\\":\\\\\\"\\\\\\"}!next/font/google\\"; + import lora from \\"storybook-nextjs-font-loader?{\\\\\\"source\\\\\\":\\\\\\"next/font/google\\\\\\",\\\\\\"props\\\\\\":{\\\\\\"weight\\\\\\":\\\\\\"400\\\\\\"},\\\\\\"fontFamily\\\\\\":\\\\\\"Lora\\\\\\",\\\\\\"filename\\\\\\":\\\\\\"\\\\\\"}!next/font/google\\"; import roboto from \\"storybook-nextjs-font-loader?{\\\\\\"source\\\\\\":\\\\\\"next/font/google\\\\\\",\\\\\\"props\\\\\\":{\\\\\\"weight\\\\\\":\\\\\\"400\\\\\\"},\\\\\\"fontFamily\\\\\\":\\\\\\"Roboto\\\\\\",\\\\\\"filename\\\\\\":\\\\\\"\\\\\\"}!next/font/google\\"; import myFont from \\"storybook-nextjs-font-loader?{\\\\\\"source\\\\\\":\\\\\\"next/font/local\\\\\\",\\\\\\"props\\\\\\":{\\\\\\"src\\\\\\":\\\\\\"./my-font.woff2\\\\\\"},\\\\\\"fontFamily\\\\\\":\\\\\\"localFont\\\\\\",\\\\\\"filename\\\\\\":\\\\\\"\\\\\\"}!next/font/local\\"; const randomObj = {};" @@ -50,6 +59,7 @@ it('should transform @next/font AST properly', () => { const { code } = transform(exampleLegacy, { plugins: [TransformFontImports] })!; expect(code).toMatchInlineSnapshot(` "import inter from \\"storybook-nextjs-font-loader?{\\\\\\"source\\\\\\":\\\\\\"@next/font/google\\\\\\",\\\\\\"props\\\\\\":{\\\\\\"subsets\\\\\\":[\\\\\\"latin\\\\\\"]},\\\\\\"fontFamily\\\\\\":\\\\\\"Inter\\\\\\",\\\\\\"filename\\\\\\":\\\\\\"\\\\\\"}!@next/font/google\\"; + import lora from \\"storybook-nextjs-font-loader?{\\\\\\"source\\\\\\":\\\\\\"@next/font/google\\\\\\",\\\\\\"props\\\\\\":{\\\\\\"weight\\\\\\":\\\\\\"400\\\\\\"},\\\\\\"fontFamily\\\\\\":\\\\\\"Lora\\\\\\",\\\\\\"filename\\\\\\":\\\\\\"\\\\\\"}!@next/font/google\\"; import roboto from \\"storybook-nextjs-font-loader?{\\\\\\"source\\\\\\":\\\\\\"@next/font/google\\\\\\",\\\\\\"props\\\\\\":{\\\\\\"weight\\\\\\":\\\\\\"400\\\\\\"},\\\\\\"fontFamily\\\\\\":\\\\\\"Roboto\\\\\\",\\\\\\"filename\\\\\\":\\\\\\"\\\\\\"}!@next/font/google\\"; import myFont from \\"storybook-nextjs-font-loader?{\\\\\\"source\\\\\\":\\\\\\"@next/font/local\\\\\\",\\\\\\"props\\\\\\":{\\\\\\"src\\\\\\":\\\\\\"./my-font.woff2\\\\\\"},\\\\\\"fontFamily\\\\\\":\\\\\\"localFont\\\\\\",\\\\\\"filename\\\\\\":\\\\\\"\\\\\\"}!@next/font/local\\"; const randomObj = {};" From cbcea150ad13ff0c55b14faa30b4a765396b04ab Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Mon, 9 Oct 2023 10:13:21 +0200 Subject: [PATCH 14/38] fix bad non-patch renaming --- .github/workflows/publish.yml | 2 +- CONTRIBUTING/RELEASING.md | 12 ++++++------ 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index df82ca33c9a5..8bb5fa3a82a6 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -5,7 +5,7 @@ on: push: branches: - latest-release - - non-patch-release + - next-release env: PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1 diff --git a/CONTRIBUTING/RELEASING.md b/CONTRIBUTING/RELEASING.md index 7cf29a463c62..d1c4eecdb849 100644 --- a/CONTRIBUTING/RELEASING.md +++ b/CONTRIBUTING/RELEASING.md @@ -124,11 +124,11 @@ A few key points to note in this flow: Patch releases are created by [cherry-picking](https://www.atlassian.com/git/tutorials/cherry-pick) any merged, unreleased pull requests that have the "**patch:yes**" label applied to the `next` branch. The merge commit of said pull requests are cherry-picked. -Sometimes it is desired to pick pull requests back to `main` even if they are not considered "releasable". Unlike non-patch-release preparation, patch releases will not be canceled if the content is not releasable. It might not make sense to create a new patch release if the changes are only for documentation and/or internal build systems. However, getting the changes back to `main` is the only way to deploy the documentation to the production docs site. You may also want to cherry-pick changes to internal CI to fix issues. These are valid scenarios where you want to cherry-pick the changes without being blocked on "releasable" content. In these cases, where all cherry picks are non-releasable, the preparation workflow creates a "merging" pull request instead of a "releasing" pull request. This pull request does not bump versions or update changelogs; it just cherry-picks the changes and allows you to merge them into `latest-release` -> `main`. +Sometimes it is desired to pick pull requests back to `main` even if they are not considered "releasable". Unlike non-patch release preparation, patch releases will not be canceled if the content is not releasable. It might not make sense to create a new patch release if the changes are only for documentation and/or internal build systems. However, getting the changes back to `main` is the only way to deploy the documentation to the production docs site. You may also want to cherry-pick changes to internal CI to fix issues. These are valid scenarios where you want to cherry-pick the changes without being blocked on "releasable" content. In these cases, where all cherry picks are non-releasable, the preparation workflow creates a "merging" pull request instead of a "releasing" pull request. This pull request does not bump versions or update changelogs; it just cherry-picks the changes and allows you to merge them into `latest-release` -> `main`. The preparation workflow sequentially cherry-picks each patch pull request to its branch. If this cherry-picking fails due to conflicts or other reasons, it is ignored and the next pull request is processed. All failing cherry-picks are listed in the release pull request's description, for the Releaser to manually cherry-pick during the release process. This problem occurs more often when `main` and `next` diverge, i.e. the longer it has been since a stable major/minor release. -Similar to the non-patch-release flow, the preparation workflow for patches will create a new branch from `main` called `version-patch-from-`, and open a pull request that targets `latest-release`. When the pull request is merged by the Releaser, the [publish workflow](#publishing) will eventually merge `latest-release` into `main`. +Similar to the non-patch release flow, the preparation workflow for patches will create a new branch from `main` called `version-patch-from-`, and open a pull request that targets `latest-release`. When the pull request is merged by the Releaser, the [publish workflow](#publishing) will eventually merge `latest-release` into `main`. Here is an example of a workflow where a feature and two bug fixes have been merged to `next`. Only the bug fixes have the "**patch:yes**" label, so only those two go into the new `7.0.19` release. Note that it is the merge commits to `next` that are cherry-picked, not the commits on the bugfix branches. @@ -173,7 +173,7 @@ gitGraph > **Note** > Workflow: [`prepare-non-patch-release.yml`](../.github/workflows/prepare-non-patch-release.yml) -Non-patch-releases are prepared with all content from the `next` branch. The changelog is generated by examining the git history, and looking up all the commits and pull requests between the current prerelease (on `next-release`) and `HEAD` of `next`. +Non-patch releases are prepared with all content from the `next` branch. The changelog is generated by examining the git history, and looking up all the commits and pull requests between the current prerelease (on `next-release`) and `HEAD` of `next`. The default versioning strategy is to increase the current prerelease number, as described in [Prereleases - `7.1.0-alpha.12` -> `7.1.0-alpha.13`](#prereleases---710-alpha12---710-alpha13). If there is no prerelease number (i.e., we just released a new stable minor/major version), it will add one to a patch bump, so it would go from `7.2.0` to `7.2.1-0` by default. @@ -215,7 +215,7 @@ gitGraph > **Note** > Workflow: [`publish.yml`](../.github/workflows/publish.yml) -When either a non-patch-release or a patch release branch is merged into `latest-release` or `next-release`, the publishing workflow is triggered. This workflow performs the following tasks: +When either a non-patch release or a patch release branch is merged into `latest-release` or `next-release`, the publishing workflow is triggered. This workflow performs the following tasks: 1. Bump versions of all packages according to the plan from the prepared PRs 2. Install dependencies and build all packages. @@ -306,7 +306,7 @@ The workflows can be triggered here: Crucially for prereleases, this is also where you change the versioning strategy if you need something else than the default as described in [Preparing - Non-patch Releases](#non-patch-releases). When triggering the non-patch workflow manually, you can optionally add inputs: -![Screenshot of triggering the non-patch-release workflow in GitHub Actions, with a form that shows a release type selector and a prerelease identifier text field](prerelease-workflow-inputs.png) +![Screenshot of triggering the non-patch release workflow in GitHub Actions, with a form that shows a release type selector and a prerelease identifier text field](prerelease-workflow-inputs.png) See [Versioning Scenarios](#versioning-scenarios) for a description of each version bump scenario, how to activate it and what it does, and [Which combination of inputs creates the version bump I need?](#which-combination-of-inputs-creates-the-version-bump-i-need) for a detailed description of the workflow inputs. @@ -376,7 +376,7 @@ Before you start you should make sure that your working tree is clean and the re 4. `git add ./CHANGELOG.md` 5. `git commit -m "Update CHANGELOG.md for v"` 6. `git push origin` -19. (If non-patch-release) Sync `versions/next.json` from `next` to `main` +19. (If non-patch release) Sync `versions/next.json` from `next` to `main` 1. `git checkout main` 2. `git pull` 3. `git checkout origin/next ./docs/versions/next.json` From 6018ef7f1366680134667381f6210fd7359d5684 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Mon, 9 Oct 2023 14:15:06 +0100 Subject: [PATCH 15/38] Update packages --- code/ui/components/package.json | 3 +- code/yarn.lock | 69 ++++++++++++++++++++++++--------- 2 files changed, 51 insertions(+), 21 deletions(-) diff --git a/code/ui/components/package.json b/code/ui/components/package.json index 0e9cc0dc42a4..ea379c9ae697 100644 --- a/code/ui/components/package.json +++ b/code/ui/components/package.json @@ -73,12 +73,11 @@ "devDependencies": { "@chromaui/addon-visual-tests": "^0.0.77", "@popperjs/core": "^2.6.0", + "@radix-ui/react-scroll-area": "^1.0.5", "@storybook/icons": "^1.1.6", "@types/react-syntax-highlighter": "11.0.5", "@types/util-deprecate": "^1.0.0", "css": "^3.0.0", - "overlayscrollbars": "2.2.1", - "overlayscrollbars-react": "^0.5.0", "polished": "^4.2.2", "prettier": "^2.8.0", "react-popper-tooltip": "^4.4.2", diff --git a/code/yarn.lock b/code/yarn.lock index 3ec46c6397a8..3c200a7a8a38 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5234,6 +5234,27 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-presence@npm:1.0.1": + version: 1.0.1 + resolution: "@radix-ui/react-presence@npm:1.0.1" + dependencies: + "@babel/runtime": ^7.13.10 + "@radix-ui/react-compose-refs": 1.0.1 + "@radix-ui/react-use-layout-effect": 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: 90780618b265fe794a8f1ddaa5bfd3c71a1127fa79330a14d32722e6265b44452a9dd36efe4e769129d33e57f979f6b8713e2cbf2e2755326aa3b0f337185b6e + languageName: node + linkType: hard + "@radix-ui/react-primitive@npm:1.0.3": version: 1.0.3 resolution: "@radix-ui/react-primitive@npm:1.0.3" @@ -5282,6 +5303,34 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-scroll-area@npm:^1.0.5": + version: 1.0.5 + resolution: "@radix-ui/react-scroll-area@npm:1.0.5" + dependencies: + "@babel/runtime": ^7.13.10 + "@radix-ui/number": 1.0.1 + "@radix-ui/primitive": 1.0.1 + "@radix-ui/react-compose-refs": 1.0.1 + "@radix-ui/react-context": 1.0.1 + "@radix-ui/react-direction": 1.0.1 + "@radix-ui/react-presence": 1.0.1 + "@radix-ui/react-primitive": 1.0.3 + "@radix-ui/react-use-callback-ref": 1.0.1 + "@radix-ui/react-use-layout-effect": 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: a08818aeeb15920a02e708699a8bdc85c26eab0579ab741129b464a799b5d9a04f81810a2d200f1cf4aef03452067770e87b0f81593a689350fcd7e51819e4cb + languageName: node + linkType: hard + "@radix-ui/react-select@npm:^1.2.2": version: 1.2.2 resolution: "@radix-ui/react-select@npm:1.2.2" @@ -6744,6 +6793,7 @@ __metadata: dependencies: "@chromaui/addon-visual-tests": ^0.0.77 "@popperjs/core": ^2.6.0 + "@radix-ui/react-scroll-area": ^1.0.5 "@radix-ui/react-select": ^1.2.2 "@radix-ui/react-toolbar": ^1.0.4 "@storybook/client-logger": "workspace:*" @@ -6756,8 +6806,6 @@ __metadata: "@types/util-deprecate": ^1.0.0 css: ^3.0.0 memoizerific: ^1.11.3 - overlayscrollbars: 2.2.1 - overlayscrollbars-react: ^0.5.0 polished: ^4.2.2 prettier: ^2.8.0 react-popper-tooltip: ^4.4.2 @@ -24976,23 +25024,6 @@ __metadata: languageName: node linkType: hard -"overlayscrollbars-react@npm:^0.5.0": - version: 0.5.2 - resolution: "overlayscrollbars-react@npm:0.5.2" - peerDependencies: - overlayscrollbars: ^2.0.0 - react: ">=16.8.0" - checksum: 56e8df609f589cd38c97408d743ebd9112047c60da340c8f121b10418beabd1b5411396f4c1fd27b46dd0e663e7675ae72df1c531feb1e3f6bf1342dbafa21ef - languageName: node - linkType: hard - -"overlayscrollbars@npm:2.2.1": - version: 2.2.1 - resolution: "overlayscrollbars@npm:2.2.1" - checksum: 718dd563ee17a8c92a54f0b67989806edadd5b999e36d2ab322e7813b369d1cf0198d7267ca42ca9e879023f0658825e2b050d2845e751d876285d1d3549cb5e - languageName: node - linkType: hard - "override-require@npm:^1.1.1": version: 1.1.1 resolution: "override-require@npm:1.1.1" From 4581321dc211183d543f8eeefd80c14974f07bb5 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Mon, 9 Oct 2023 14:15:23 +0100 Subject: [PATCH 16/38] Remove old styles --- .../ScrollArea/GlobalScrollAreaStyles.tsx | 497 ------------------ .../ScrollArea/OverlayScrollbars.tsx | 5 - 2 files changed, 502 deletions(-) delete mode 100644 code/ui/components/src/components/ScrollArea/GlobalScrollAreaStyles.tsx delete mode 100644 code/ui/components/src/components/ScrollArea/OverlayScrollbars.tsx diff --git a/code/ui/components/src/components/ScrollArea/GlobalScrollAreaStyles.tsx b/code/ui/components/src/components/ScrollArea/GlobalScrollAreaStyles.tsx deleted file mode 100644 index a7650a8f922f..000000000000 --- a/code/ui/components/src/components/ScrollArea/GlobalScrollAreaStyles.tsx +++ /dev/null @@ -1,497 +0,0 @@ -import React from 'react'; -import { Global } from '@storybook/theming'; -import type { Theme, CSSObject } from '@storybook/theming'; - -export const getScrollAreaStyles: (theme: Theme) => CSSObject = (theme: Theme) => - ({ - '.os-size-observer,\n.os-size-observer-listener': { - direction: 'inherit', - pointerEvents: 'none', - overflow: 'hidden', - visibility: 'hidden', - boxSizing: 'border-box', - }, - '.os-size-observer,\n.os-size-observer-listener,\n.os-size-observer-listener-item,\n.os-size-observer-listener-item-final': - { - writingMode: 'horizontal-tb', - position: 'absolute', - left: '0', - top: '0', - }, - '.os-size-observer': { - zIndex: -1, - contain: 'strict', - display: 'flex', - flexDirection: 'row', - flexWrap: 'nowrap', - padding: 'inherit', - border: 'inherit', - boxSizing: 'inherit', - margin: '-133px', - top: '0', - right: '0', - bottom: '0', - left: '0', - transform: 'scale(0.1)', - }, - '.os-size-observer::before': { - content: '""', - flex: 'none', - boxSizing: 'inherit', - padding: '10px', - width: '10px', - height: '10px', - }, - '.os-size-observer-appear': { - animation: 'os-size-observer-appear-animation 1ms forwards', - }, - '.os-size-observer-listener': { - boxSizing: 'border-box', - position: 'relative', - flex: 'auto', - padding: 'inherit', - border: 'inherit', - margin: '-133px', - transform: 'scale(10)', - }, - '.os-size-observer-listener.ltr': { marginRight: '-266px', marginLeft: '0' }, - '.os-size-observer-listener.rtl': { marginLeft: '-266px', marginRight: '0' }, - '.os-size-observer-listener:empty::before': { - content: '""', - width: '100%', - height: '100%', - }, - '.os-size-observer-listener:empty::before, .os-size-observer-listener > .os-size-observer-listener-item': - { - display: 'block', - position: 'relative', - padding: 'inherit', - border: 'inherit', - boxSizing: 'content-box', - flex: 'auto', - }, - '.os-size-observer-listener-scroll': { - boxSizing: 'border-box', - display: 'flex', - }, - '.os-size-observer-listener-item': { - right: '0', - bottom: '0', - overflow: 'hidden', - direction: 'ltr', - flex: 'none', - }, - '.os-size-observer-listener-item-final': { transition: 'none' }, - '@keyframes os-size-observer-appear-animation': { - from: { cursor: 'auto' }, - to: { cursor: 'none' }, - }, - '.os-trinsic-observer': { - flex: 'none', - boxSizing: 'border-box', - position: 'relative', - maxWidth: '0px', - maxHeight: '1px', - padding: '0', - margin: '0', - border: 'none', - overflow: 'hidden', - zIndex: -1, - height: '0', - top: 'calc(100% + 1px)', - contain: 'strict', - }, - '.os-trinsic-observer:not(:empty)': { - height: 'calc(100% + 1px)', - top: '-1px', - }, - '.os-trinsic-observer:not(:empty) > .os-size-observer': { - width: '1000%', - height: '1000%', - minHeight: '1px', - minWidth: '1px', - }, - '.os-environment': { - '--os-custom-prop': '-1', - position: 'fixed', - opacity: 0, - visibility: 'hidden', - overflow: 'scroll', - height: '200px', - width: '200px', - zIndex: 'var(--os-custom-prop)', - }, - '.os-environment div': { width: '200%', height: '200%', margin: '10px 0' }, - '.os-environment.os-environment-flexbox-glue': { - display: 'flex', - flexDirection: 'row', - flexWrap: 'nowrap', - height: 'auto', - width: 'auto', - minHeight: '200px', - minWidth: '200px', - }, - '.os-environment.os-environment-flexbox-glue div': { - flex: 'auto', - width: 'auto', - height: 'auto', - maxHeight: '100%', - maxWidth: '100%', - margin: '0', - }, - '.os-environment.os-environment-flexbox-glue-max': { maxHeight: '200px' }, - '.os-environment.os-environment-flexbox-glue-max div': { - overflow: 'visible', - }, - '.os-environment.os-environment-flexbox-glue-max div::before': { - content: '""', - display: 'block', - height: '999px', - width: '999px', - }, - '.os-environment,\n[data-overlayscrollbars-viewport]': { - msOverflowStyle: 'scrollbar !important', - }, - '[data-overlayscrollbars-initialize],\n[data-overlayscrollbars~=scrollbarHidden],\n[data-overlayscrollbars-viewport~=scrollbarHidden],\n.os-scrollbar-hidden.os-environment': - { - scrollbarWidth: 'none !important', - }, - '[data-overlayscrollbars-initialize]::-webkit-scrollbar,\n[data-overlayscrollbars-initialize]::-webkit-scrollbar-corner,\n[data-overlayscrollbars~=scrollbarHidden]::-webkit-scrollbar,\n[data-overlayscrollbars~=scrollbarHidden]::-webkit-scrollbar-corner,\n[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar,\n[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar-corner,\n.os-scrollbar-hidden.os-environment::-webkit-scrollbar,\n.os-scrollbar-hidden.os-environment::-webkit-scrollbar-corner': - { - WebkitAppearance: 'none !important', - appearance: 'none !important', - display: 'none !important', - width: '0 !important', - height: '0 !important', - }, - '[data-overlayscrollbars-initialize]': { overflow: 'auto' }, - 'html[data-overlayscrollbars],\nhtml.os-scrollbar-hidden,\nhtml.os-scrollbar-hidden > body': { - boxSizing: 'border-box', - margin: '0', - width: '100%', - height: '100%', - }, - 'html[data-overlayscrollbars] > body': { overflow: 'visible' }, - '[data-overlayscrollbars~=host]': { position: 'relative' }, - '[data-overlayscrollbars~=host],\n[data-overlayscrollbars-padding]': { - display: 'flex', - flexDirection: 'row !important', - flexWrap: 'nowrap !important', - }, - '[data-overlayscrollbars-padding],\n[data-overlayscrollbars-viewport]': { - boxSizing: 'inherit', - position: 'relative', - flex: 'auto !important', - height: 'auto', - width: '100%', - padding: '0', - margin: '0', - border: 'none', - zIndex: 0, - overflow: 'hidden', - }, - '[data-overlayscrollbars-viewport]': { '--os-vaw': '0', '--os-vah': '0' }, - '[data-overlayscrollbars-viewport][data-overlayscrollbars-viewport~=arrange]::before': { - content: '""', - position: 'absolute', - pointerEvents: 'none', - zIndex: -1, - minWidth: '1px', - minHeight: '1px', - width: 'var(--os-vaw)', - height: 'var(--os-vah)', - }, - '[data-overlayscrollbars~=host],\n[data-overlayscrollbars~=viewport]': { - overflow: 'hidden', - }, - '[data-overlayscrollbars~=overflowVisible],\n[data-overlayscrollbars-padding~=overflowVisible],\n[data-overlayscrollbars-viewport~=overflowVisible]': - { - overflow: 'visible', - }, - '[data-overlayscrollbars-overflow-x=hidden]': { - overflowX: 'hidden', - overflowY: 'hidden', - }, - '[data-overlayscrollbars-overflow-x=scroll]': { overflowX: 'scroll' }, - '[data-overlayscrollbars-overflow-y=scroll]': { overflowY: 'scroll' }, - '[data-overlayscrollbars~=scrollbarPressed],\n[data-overlayscrollbars~=scrollbarPressed] [data-overlayscrollbars-viewport]': - { - scrollBehavior: 'auto !important', - }, - '[data-overlayscrollbars-content]': { boxSizing: 'inherit' }, - '[data-overlayscrollbars-grid],\n[data-overlayscrollbars-grid] [data-overlayscrollbars-padding]': - { - display: 'grid', - gridTemplate: '1fr/1fr', - }, - '[data-overlayscrollbars-grid] > [data-overlayscrollbars-padding],\n[data-overlayscrollbars-grid] > [data-overlayscrollbars-viewport],\n[data-overlayscrollbars-grid] > [data-overlayscrollbars-padding] > [data-overlayscrollbars-viewport]': - { - height: 'auto !important', - width: 'auto !important', - }, - '.os-scrollbar': { - contain: ['size layout', 'size layout style'], - transition: - 'opacity 0.15s, visibility 0.15s, top 0.15s, right 0.15s, bottom 0.15s, left 0.15s', - pointerEvents: 'none', - position: 'absolute', - opacity: 0, - visibility: 'hidden', - '--os-size': '0', - '--os-padding-perpendicular': '0', - '--os-padding-axis': '0', - '--os-track-border-radius': '0', - '--os-track-bg': 'none', - '--os-track-bg-hover': 'none', - '--os-track-bg-active': 'none', - '--os-track-border': 'none', - '--os-track-border-hover': 'none', - '--os-track-border-active': 'none', - '--os-handle-border-radius': '0', - '--os-handle-bg': 'none', - '--os-handle-bg-hover': 'none', - '--os-handle-bg-active': 'none', - '--os-handle-border': 'none', - '--os-handle-border-hover': 'none', - '--os-handle-border-active': 'none', - '--os-handle-min-size': '33px', - '--os-handle-max-size': 'none', - '--os-handle-perpendicular-size': '100%', - '--os-handle-perpendicular-size-hover': '100%', - '--os-handle-perpendicular-size-active': '100%', - '--os-handle-interactive-area-offset': '0', - }, - 'body > .os-scrollbar': { position: 'fixed', zIndex: 99999 }, - '.os-scrollbar-transitionless': { transition: 'none' }, - '.os-scrollbar-track': { - position: 'relative', - direction: 'ltr !important', - padding: '0 !important', - border: 'none !important', - }, - '.os-scrollbar-handle': { position: 'absolute' }, - '.os-scrollbar-track,\n.os-scrollbar-handle': { - pointerEvents: 'none', - width: '100%', - height: '100%', - }, - '.os-scrollbar.os-scrollbar-track-interactive .os-scrollbar-track,\n.os-scrollbar.os-scrollbar-handle-interactive .os-scrollbar-handle': - { - pointerEvents: 'auto', - touchAction: 'none', - }, - '.os-scrollbar-horizontal': { - bottom: '0', - left: '0', - padding: 'var(--os-padding-perpendicular) var(--os-padding-axis)', - right: 'var(--os-size)', - height: 'var(--os-size)', - }, - '.os-scrollbar-vertical': { - top: '0', - right: '0', - padding: 'var(--os-padding-axis) var(--os-padding-perpendicular)', - bottom: 'var(--os-size)', - width: 'var(--os-size)', - }, - '.os-scrollbar-rtl.os-scrollbar-horizontal': { right: '0' }, - '.os-scrollbar-rtl.os-scrollbar-vertical': { right: 'auto', left: '0' }, - '.os-scrollbar-visible,\n.os-scrollbar-interaction.os-scrollbar-visible': { - opacity: 1, - visibility: 'visible', - }, - '.os-scrollbar-auto-hidden': { opacity: 0, visibility: 'hidden' }, - '.os-scrollbar-unusable,\n.os-scrollbar-unusable *,\n.os-scrollbar-wheel,\n.os-scrollbar-wheel *': - { - pointerEvents: 'none !important', - }, - '.os-scrollbar-unusable .os-scrollbar-handle': { opacity: '0 !important' }, - '.os-scrollbar-horizontal .os-scrollbar-handle': { - bottom: '0', - minWidth: 'var(--os-handle-min-size)', - maxWidth: 'var(--os-handle-max-size)', - height: 'var(--os-handle-perpendicular-size)', - transition: 'opacity 0.15s, background-color 0.15s, border-color 0.15s, height 0.15s', - }, - '.os-scrollbar-vertical .os-scrollbar-handle': { - right: '0', - minHeight: 'var(--os-handle-min-size)', - maxHeight: 'var(--os-handle-max-size)', - width: 'var(--os-handle-perpendicular-size)', - transition: 'opacity 0.15s, background-color 0.15s, border-color 0.15s, width 0.15s', - }, - '.os-scrollbar-rtl.os-scrollbar-vertical .os-scrollbar-handle': { - right: 'auto', - left: '0', - }, - '.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless,\n.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless.os-scrollbar-rtl': - { - left: '0', - right: '0', - }, - '.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless,\n.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless.os-scrollbar-rtl': - { - top: '0', - bottom: '0', - }, - '.os-scrollbar .os-scrollbar-track': { - border: 'var(--os-track-border)', - borderRadius: 'var(--os-track-border-radius)', - background: 'var(--os-track-bg)', - transition: 'opacity 0.15s, background-color 0.15s, border-color 0.15s', - }, - '.os-scrollbar .os-scrollbar-track:hover': { - border: 'var(--os-track-border-hover)', - background: 'var(--os-track-bg-hover)', - }, - '.os-scrollbar .os-scrollbar-track:active': { - border: 'var(--os-track-border-active)', - background: 'var(--os-track-bg-active)', - }, - '.os-scrollbar .os-scrollbar-handle': { - border: 'var(--os-handle-border)', - borderRadius: 'var(--os-handle-border-radius)', - background: theme.textMutedColor, - opacity: 0.5, - }, - '.os-scrollbar .os-scrollbar-handle:before': { - content: '""', - position: 'absolute', - left: '0', - right: '0', - top: '0', - bottom: '0', - display: 'block', - }, - '.os-scrollbar .os-scrollbar-handle:hover': { - border: 'var(--os-handle-border-hover)', - opacity: 0.6, - }, - '.os-scrollbar .os-scrollbar-handle:active': { - border: 'var(--os-handle-border-active)', - background: 'var(--os-handle-bg-active)', - }, - '.os-scrollbar-horizontal.os-scrollbar-rtl': { - left: 'var(--os-size)', - right: '0', - }, - '.os-scrollbar-horizontal .os-scrollbar-handle:before': { - top: 'calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1)', - bottom: 'calc(var(--os-padding-perpendicular) * -1)', - }, - '.os-scrollbar-horizontal:hover .os-scrollbar-handle': { - height: 'var(--os-handle-perpendicular-size-hover)', - }, - '.os-scrollbar-horizontal:active .os-scrollbar-handle': { - height: 'var(--os-handle-perpendicular-size-active)', - }, - '.os-scrollbar-vertical .os-scrollbar-handle:before': { - left: 'calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1)', - right: 'calc(var(--os-padding-perpendicular) * -1)', - }, - '.os-scrollbar-vertical.os-scrollbar-rtl .os-scrollbar-handle:before': { - right: - 'calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1)', - left: 'calc(var(--os-padding-perpendicular) * -1)', - }, - '.os-scrollbar-vertical:hover .os-scrollbar-handle': { - width: 'var(--os-handle-perpendicular-size-hover)', - }, - '.os-scrollbar-vertical:active .os-scrollbar-handle': { - width: 'var(--os-handle-perpendicular-size-active)', - }, - '[data-overlayscrollbars~=updating] > .os-scrollbar,\n.os-theme-none.os-scrollbar': { - display: 'none !important', - }, - '.os-theme-dark,\n.os-theme-light': { - boxSizing: 'border-box', - '--os-size': '10px', - '--os-padding-perpendicular': '2px', - '--os-padding-axis': '2px', - '--os-track-border-radius': '10px', - '--os-handle-interactive-area-offset': '4px', - '--os-handle-border-radius': '10px', - }, - '.os-theme-dark': { - '--os-handle-bg': 'rgba(0, 0, 0, 0.44)', - '--os-handle-bg-hover': 'rgba(0, 0, 0, 0.55)', - '--os-handle-bg-active': 'rgba(0, 0, 0, 0.66)', - }, - '.os-theme-light': { - '--os-handle-bg': 'rgba(255, 255, 255, 0.44)', - '--os-handle-bg-hover': 'rgba(255, 255, 255, 0.55)', - '--os-handle-bg-active': 'rgba(255, 255, 255, 0.66)', - }, - '.os-no-css-vars.os-theme-dark.os-scrollbar .os-scrollbar-handle, .os-no-css-vars.os-theme-light.os-scrollbar .os-scrollbar-handle': - { - borderRadius: '10px', - }, - '.os-no-css-vars.os-theme-dark.os-scrollbar .os-scrollbar-track, .os-no-css-vars.os-theme-light.os-scrollbar .os-scrollbar-track': - { - borderRadius: '10px', - }, - '.os-no-css-vars.os-theme-dark.os-scrollbar-horizontal, .os-no-css-vars.os-theme-light.os-scrollbar-horizontal': - { - padding: '2px 2px', - right: '10px', - height: '10px', - }, - '.os-no-css-vars.os-theme-dark.os-scrollbar-horizontal.os-scrollbar-rtl, .os-no-css-vars.os-theme-light.os-scrollbar-horizontal.os-scrollbar-rtl': - { - left: '10px', - right: '0', - }, - '.os-no-css-vars.os-theme-dark.os-scrollbar-horizontal .os-scrollbar-handle, .os-no-css-vars.os-theme-light.os-scrollbar-horizontal .os-scrollbar-handle': - { - minWidth: '33px', - maxWidth: 'none', - }, - '.os-no-css-vars.os-theme-dark.os-scrollbar-horizontal .os-scrollbar-handle:before, .os-no-css-vars.os-theme-light.os-scrollbar-horizontal .os-scrollbar-handle:before': - { - top: 'calc((\n 2px + 4px\n ) * -1)', - bottom: 'calc(2px * -1)', - }, - '.os-no-css-vars.os-theme-dark.os-scrollbar-vertical, .os-no-css-vars.os-theme-light.os-scrollbar-vertical': - { - padding: '2px 2px', - bottom: '10px', - width: '10px', - }, - '.os-no-css-vars.os-theme-dark.os-scrollbar-vertical .os-scrollbar-handle, .os-no-css-vars.os-theme-light.os-scrollbar-vertical .os-scrollbar-handle': - { - minHeight: '33px', - maxHeight: 'none', - }, - '.os-no-css-vars.os-theme-dark.os-scrollbar-vertical .os-scrollbar-handle:before, .os-no-css-vars.os-theme-light.os-scrollbar-vertical .os-scrollbar-handle:before': - { - left: 'calc((\n 2px + 4px\n ) * -1)', - right: 'calc(2px * -1)', - }, - '.os-no-css-vars.os-theme-dark.os-scrollbar-vertical.os-scrollbar-rtl .os-scrollbar-handle:before, .os-no-css-vars.os-theme-light.os-scrollbar-vertical.os-scrollbar-rtl .os-scrollbar-handle:before': - { - right: 'calc((\n 2px + 4px\n ) * -1)', - left: 'calc(2px * -1)', - }, - '.os-no-css-vars.os-theme-dark .os-scrollbar-handle': { - background: 'rgba(0, 0, 0, 0.44)', - }, - '.os-no-css-vars.os-theme-dark:hover .os-scrollbar-handle': { - background: 'rgba(0, 0, 0, 0.55)', - }, - '.os-no-css-vars.os-theme-dark:active .os-scrollbar-handle': { - background: 'rgba(0, 0, 0, 0.66)', - }, - '.os-no-css-vars.os-theme-light .os-scrollbar-handle': { - background: 'rgba(255, 255, 255, 0.44)', - }, - '.os-no-css-vars.os-theme-light:hover .os-scrollbar-handle': { - background: 'rgba(255, 255, 255, 0.55)', - }, - '.os-no-css-vars.os-theme-light:active .os-scrollbar-handle': { - background: 'rgba(255, 255, 255, 0.66)', - }, - } as any as CSSObject); - -const GlobalScrollAreaStyles = () => ; - -export default GlobalScrollAreaStyles; diff --git a/code/ui/components/src/components/ScrollArea/OverlayScrollbars.tsx b/code/ui/components/src/components/ScrollArea/OverlayScrollbars.tsx deleted file mode 100644 index c5043032448c..000000000000 --- a/code/ui/components/src/components/ScrollArea/OverlayScrollbars.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'; - -export const OverlayScrollbars = OverlayScrollbarsComponent; - -export default OverlayScrollbarsComponent; From 3332ca2f29c269ee838619ca7ba6affe8bcb3265 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Mon, 9 Oct 2023 14:15:35 +0100 Subject: [PATCH 17/38] Update ScrollArea --- .../ScrollArea/ScrollArea.stories.tsx | 26 ++++ .../src/components/ScrollArea/ScrollArea.tsx | 122 ++++++++++++++---- 2 files changed, 126 insertions(+), 22 deletions(-) diff --git a/code/ui/components/src/components/ScrollArea/ScrollArea.stories.tsx b/code/ui/components/src/components/ScrollArea/ScrollArea.stories.tsx index e4a7a09e7dc2..59eabd84925d 100644 --- a/code/ui/components/src/components/ScrollArea/ScrollArea.stories.tsx +++ b/code/ui/components/src/components/ScrollArea/ScrollArea.stories.tsx @@ -84,3 +84,29 @@ export const WithOuterBorder = () => ( /> ); + +export const CustomOffset = () => ( + + {list((i) => ( + + {list((ii) => ( + {ii * i} + ))} +
+
+ ))} +
+); + +export const CustomSize = () => ( + + {list((i) => ( + + {list((ii) => ( + {ii * i} + ))} +
+
+ ))} +
+); diff --git a/code/ui/components/src/components/ScrollArea/ScrollArea.tsx b/code/ui/components/src/components/ScrollArea/ScrollArea.tsx index 51a0f5786679..013ecb8a07df 100644 --- a/code/ui/components/src/components/ScrollArea/ScrollArea.tsx +++ b/code/ui/components/src/components/ScrollArea/ScrollArea.tsx @@ -1,34 +1,112 @@ import type { FC } from 'react'; -import React, { lazy, Suspense } from 'react'; +import React from 'react'; import { styled } from '@storybook/theming'; - -const GlobalScrollAreaStyles = lazy(() => import('./GlobalScrollAreaStyles')); -const OverlayScrollbars = lazy(() => import('./OverlayScrollbars')); - -const Scroller: FC = ({ horizontal, vertical, ...props }) => ( - }> - - - -); +import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'; export interface ScrollAreaProps { children?: React.ReactNode; horizontal?: boolean; vertical?: boolean; className?: string; + offset?: number; + scrollbarSize?: number; } -export const ScrollArea: FC = styled(Scroller)( - ({ vertical }) => (!vertical ? { overflowY: 'hidden' } : { overflowY: 'auto', height: '100%' }), - ({ horizontal }) => (!horizontal ? { overflowX: 'hidden' } : { overflowX: 'auto', width: '100%' }) +const ScrollAreaRoot = styled(ScrollAreaPrimitive.Root)<{ scrollbarSize: number; offset: number }>( + ({ scrollbarSize, offset }) => ({ + width: '100%', + height: '100%', + overflow: 'hidden', + '--scrollbar-size': `${scrollbarSize + offset}px`, + '--radix-scroll-area-thumb-width': `${scrollbarSize}px`, + }) ); -ScrollArea.defaultProps = { - horizontal: false, - vertical: false, -}; +const ScrollAreaViewport = styled(ScrollAreaPrimitive.Viewport)({ + width: '100%', + height: '100%', +}); + +const ScrollAreaScrollbar = styled(ScrollAreaPrimitive.Scrollbar)<{ + offset: number; + horizontal: boolean; + vertical: boolean; +}>(({ offset, horizontal, vertical }) => ({ + display: 'flex', + userSelect: 'none', // ensures no selection + touchAction: 'none', // disable browser handling of all panning and zooming gestures on touch devices + background: 'transparent', + transition: 'all 0.2s ease-out', + borderRadius: 'var(--scrollbar-size)', + + '&[data-orientation="vertical"]': { + width: 'var(--scrollbar-size)', + paddingRight: offset, + marginTop: offset, + marginBottom: horizontal && vertical ? 0 : offset, + }, + '&[data-orientation="horizontal"]': { + flexDirection: 'column', + height: 'var(--scrollbar-size)', + paddingBottom: offset, + marginLeft: offset, + marginRight: horizontal && vertical ? 0 : offset, + }, +})); + +const ScrollAreaThumb = styled(ScrollAreaPrimitive.Thumb)(({ theme }) => ({ + flex: 1, + background: theme.textMutedColor, + opacity: 0.5, + borderRadius: `var(--scrollbar-size)`, + position: 'relative', + transition: 'opacity 0.2s ease-out', + + '&:hover': { opacity: 0.8 }, + + /* increase target size for touch devices https://www.w3.org/WAI/WCAG21/Understanding/target-size.html */ + '::before': { + content: '""', + position: 'absolute', + top: '50%', + left: '50%', + transform: 'translate(-50%,-50%)', + width: '100%', + height: '100%', + minWidth: 44, + minHeight: 44, + }, +})); + +export const ScrollArea: FC = ({ + children, + horizontal = false, + vertical = false, + offset = 2, + scrollbarSize = 6, +}) => ( + + {children} + {horizontal && ( + + + + )} + {vertical && ( + + + + )} + {horizontal && vertical && } + +); From 182032670bbcc397568ae573e5e095f92ce50433 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Mon, 9 Oct 2023 14:15:52 +0100 Subject: [PATCH 18/38] Fix Sidebar --- code/ui/manager/src/components/sidebar/Search.tsx | 2 ++ code/ui/manager/src/components/sidebar/Sidebar.tsx | 13 ++----------- 2 files changed, 4 insertions(+), 11 deletions(-) diff --git a/code/ui/manager/src/components/sidebar/Search.tsx b/code/ui/manager/src/components/sidebar/Search.tsx index d9d03217db38..c8c71ae659cd 100644 --- a/code/ui/manager/src/components/sidebar/Search.tsx +++ b/code/ui/manager/src/components/sidebar/Search.tsx @@ -85,6 +85,8 @@ const Input = styled.input(({ theme }) => ({ fontFamily: 'inherit', transition: 'all 150ms', color: theme.color.defaultText, + width: '100%', + '&:focus, &:active': { outline: 0, borderColor: theme.color.secondary, diff --git a/code/ui/manager/src/components/sidebar/Sidebar.tsx b/code/ui/manager/src/components/sidebar/Sidebar.tsx index 23aacc19f099..072603211c21 100644 --- a/code/ui/manager/src/components/sidebar/Sidebar.tsx +++ b/code/ui/manager/src/components/sidebar/Sidebar.tsx @@ -53,15 +53,6 @@ const Bottom = styled.div(({ theme }) => ({ }, })); -const CustomScrollArea = styled(ScrollArea)({ - '&&&&& .os-scrollbar-handle:before': { - left: -12, - }, - '&&&&& .os-scrollbar-vertical': { - right: 5, - }, -}); - const Swap = React.memo(function Swap({ children, condition, @@ -130,7 +121,7 @@ export const Sidebar = React.memo(function Sidebar({ return ( - + - + {isLoading ? null : ( {bottom.map(({ id, render: Render }) => ( From cbbdeaa0492e42d97de36719ea7733a8418b34ac Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Mon, 9 Oct 2023 14:28:09 +0100 Subject: [PATCH 19/38] Change to lowercase --- .../src/components/ScrollArea/ScrollArea.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/code/ui/components/src/components/ScrollArea/ScrollArea.tsx b/code/ui/components/src/components/ScrollArea/ScrollArea.tsx index 013ecb8a07df..613e75de1f2f 100644 --- a/code/ui/components/src/components/ScrollArea/ScrollArea.tsx +++ b/code/ui/components/src/components/ScrollArea/ScrollArea.tsx @@ -12,13 +12,13 @@ export interface ScrollAreaProps { scrollbarSize?: number; } -const ScrollAreaRoot = styled(ScrollAreaPrimitive.Root)<{ scrollbarSize: number; offset: number }>( - ({ scrollbarSize, offset }) => ({ +const ScrollAreaRoot = styled(ScrollAreaPrimitive.Root)<{ scrollbarsize: number; offset: number }>( + ({ scrollbarsize, offset }) => ({ width: '100%', height: '100%', overflow: 'hidden', - '--scrollbar-size': `${scrollbarSize + offset}px`, - '--radix-scroll-area-thumb-width': `${scrollbarSize}px`, + '--scrollbar-size': `${scrollbarsize + offset}px`, + '--radix-scroll-area-thumb-width': `${scrollbarsize}px`, }) ); @@ -85,7 +85,7 @@ export const ScrollArea: FC = ({ offset = 2, scrollbarSize = 6, }) => ( - + {children} {horizontal && ( Date: Mon, 9 Oct 2023 14:38:44 +0100 Subject: [PATCH 20/38] Fix emotion issues --- .../src/components/ScrollArea/ScrollArea.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/code/ui/components/src/components/ScrollArea/ScrollArea.tsx b/code/ui/components/src/components/ScrollArea/ScrollArea.tsx index 613e75de1f2f..3bb523dddcda 100644 --- a/code/ui/components/src/components/ScrollArea/ScrollArea.tsx +++ b/code/ui/components/src/components/ScrollArea/ScrollArea.tsx @@ -29,8 +29,8 @@ const ScrollAreaViewport = styled(ScrollAreaPrimitive.Viewport)({ const ScrollAreaScrollbar = styled(ScrollAreaPrimitive.Scrollbar)<{ offset: number; - horizontal: boolean; - vertical: boolean; + horizontal: string; + vertical: string; }>(({ offset, horizontal, vertical }) => ({ display: 'flex', userSelect: 'none', // ensures no selection @@ -43,14 +43,14 @@ const ScrollAreaScrollbar = styled(ScrollAreaPrimitive.Scrollbar)<{ width: 'var(--scrollbar-size)', paddingRight: offset, marginTop: offset, - marginBottom: horizontal && vertical ? 0 : offset, + marginBottom: horizontal === 'true' && vertical === 'true' ? 0 : offset, }, '&[data-orientation="horizontal"]': { flexDirection: 'column', height: 'var(--scrollbar-size)', paddingBottom: offset, marginLeft: offset, - marginRight: horizontal && vertical ? 0 : offset, + marginRight: horizontal === 'true' && vertical === 'true' ? 0 : offset, }, })); @@ -91,8 +91,8 @@ export const ScrollArea: FC = ({ @@ -101,8 +101,8 @@ export const ScrollArea: FC = ({ From e03993cc990811a54f54fa79ce5fc967f4f818ab Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Mon, 9 Oct 2023 19:22:38 +0100 Subject: [PATCH 21/38] Fix capitalization --- docs/contribute/code.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/contribute/code.md b/docs/contribute/code.md index fbc3dda02955..21337442dd23 100644 --- a/docs/contribute/code.md +++ b/docs/contribute/code.md @@ -18,7 +18,7 @@ git clone https://github.com/your-username/storybook.git cd storybook ``` -Storybook uses the [yarn](https://v3.yarnpkg.com/) package manager. Use [corepack](https://github.com/nodejs/corepack) to set up the correct version for use with Storybook. +Storybook uses the [yarn](https://v3.yarnpkg.com/) package manager. Use [Corepack](https://github.com/nodejs/corepack) to set up the correct version for use with Storybook. ```shell corepack enable From 72ab5b36ef43ea6421d6c9aa504d48f9e96a1013 Mon Sep 17 00:00:00 2001 From: Nate Houk Date: Tue, 10 Oct 2023 08:35:20 +0200 Subject: [PATCH 22/38] Update chromatic-github-action.js.mdx --- docs/snippets/common/chromatic-github-action.js.mdx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/snippets/common/chromatic-github-action.js.mdx b/docs/snippets/common/chromatic-github-action.js.mdx index ed13fa937ac1..c026ef70970b 100644 --- a/docs/snippets/common/chromatic-github-action.js.mdx +++ b/docs/snippets/common/chromatic-github-action.js.mdx @@ -21,8 +21,7 @@ jobs: with: node-version: 18 cache: 'yarn' - - run: yarn ci - #👇 Adds Chromatic as a step in the workflow + #👇 Adds Chromatic as a step in the workflow - uses: chromaui/action@v1 # Options required for Chromatic's GitHub Action with: From 1fc5ed41b765ed8b49fee5b0bf1eaf7aa9a21de9 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 10 Oct 2023 14:58:34 +0200 Subject: [PATCH 23/38] upgrade to node18 in a backwards compatible way --- .circleci/config.yml | 4 +- .github/workflows/generate-sandboxes-main.yml | 2 +- .github/workflows/generate-sandboxes-next.yml | 2 +- .github/workflows/tests-unit.yml | 7 +- .nvmrc | 2 +- code/addons/interactions/package.json | 2 +- code/builders/builder-vite/package.json | 2 +- code/builders/builder-webpack5/package.json | 2 +- code/frameworks/angular/package.json | 2 +- code/frameworks/html-vite/package.json | 2 +- code/frameworks/html-webpack5/package.json | 2 +- code/frameworks/nextjs/package.json | 2 +- code/frameworks/preact-vite/package.json | 2 +- code/frameworks/preact-webpack5/package.json | 2 +- code/frameworks/react-vite/package.json | 2 +- code/frameworks/react-webpack5/package.json | 2 +- code/frameworks/server-webpack5/package.json | 2 +- code/frameworks/svelte-vite/package.json | 2 +- code/frameworks/sveltekit/package.json | 2 +- code/frameworks/vue-webpack5/package.json | 2 +- code/frameworks/vue3-vite/package.json | 2 +- code/frameworks/vue3-webpack5/package.json | 2 +- .../web-components-vite/package.json | 2 +- .../web-components-webpack5/package.json | 2 +- .../fixes/nodejs-requirement.test.ts | 5 ++ code/lib/cli/src/link.ts | 2 +- code/lib/core-common/package.json | 2 +- code/lib/core-server/package.json | 2 +- code/lib/core-webpack/package.json | 2 +- code/lib/theming/package.json | 2 +- code/lib/types/package.json | 2 +- code/package.json | 4 +- code/presets/create-react-app/package.json | 2 +- code/presets/html-webpack/package.json | 2 +- code/presets/preact-webpack/package.json | 2 +- code/presets/react-webpack/package.json | 2 +- code/presets/server-webpack/package.json | 2 +- code/presets/vue-webpack/package.json | 2 +- code/presets/vue3-webpack/package.json | 2 +- .../web-components-webpack/package.json | 2 +- code/renderers/react/package.json | 2 +- code/renderers/web-components/package.json | 2 +- code/yarn.lock | 78 +++++++++---------- .../test-runner-local-build-workflow.yml.mdx | 2 +- ...-runner-with-deploy-event-workflow.yml.mdx | 2 +- scripts/.babelrc.js | 2 +- scripts/package.json | 4 +- scripts/yarn.lock | 4 +- 48 files changed, 96 insertions(+), 92 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 617cdac42c28..9b03dd3739bc 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -17,7 +17,7 @@ executors: default: 'small' working_directory: /tmp/storybook docker: - - image: cimg/node:16.20.0 + - image: cimg/node:18.18.0 environment: NODE_OPTIONS: --max_old_space_size=6144 resource_class: <> @@ -30,7 +30,7 @@ executors: default: 'small' working_directory: /tmp/storybook docker: - - image: cimg/node:16.20.0-browsers + - image: cimg/node:18.18.0-browsers environment: NODE_OPTIONS: --max_old_space_size=6144 resource_class: <> diff --git a/.github/workflows/generate-sandboxes-main.yml b/.github/workflows/generate-sandboxes-main.yml index 474542495848..a99b2288cf0c 100644 --- a/.github/workflows/generate-sandboxes-main.yml +++ b/.github/workflows/generate-sandboxes-main.yml @@ -21,7 +21,7 @@ jobs: steps: - uses: actions/setup-node@v3 with: - node-version: 16 + node-version-file: '.nvmrc' - uses: actions/checkout@v3 with: ref: main diff --git a/.github/workflows/generate-sandboxes-next.yml b/.github/workflows/generate-sandboxes-next.yml index c20f5491ef30..91515e0862e9 100644 --- a/.github/workflows/generate-sandboxes-next.yml +++ b/.github/workflows/generate-sandboxes-next.yml @@ -21,7 +21,7 @@ jobs: steps: - uses: actions/setup-node@v3 with: - node-version: 16 + node-version-file: '.nvmrc' - uses: actions/checkout@v3 with: ref: next diff --git a/.github/workflows/tests-unit.yml b/.github/workflows/tests-unit.yml index 6c355ec1714b..650d40d3ff10 100644 --- a/.github/workflows/tests-unit.yml +++ b/.github/workflows/tests-unit.yml @@ -9,19 +9,18 @@ on: jobs: build: - name: Core Unit Tests node-${{ matrix.node_version }}, ${{ matrix.os }} + name: Core Unit Tests, ${{ matrix.os }} strategy: fail-fast: false matrix: os: [windows-latest] - node_version: [16] runs-on: ${{ matrix.os }} steps: - uses: actions/checkout@v3 - - name: Set node version to ${{ matrix.node_version }} + - name: Set node version uses: actions/setup-node@v3 with: - node-version: ${{ matrix.node_version }} + node-version-file: '.nvmrc' - name: install and compile run: yarn task --task compile --start-from=auto --no-link - name: test diff --git a/.nvmrc b/.nvmrc index 59ea99ee63cb..4a58985bb483 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -16.20 +18.18 diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json index 76fc4f5e7357..963a4e19e142 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -91,7 +91,7 @@ "@devtools-ds/object-inspector": "^1.1.2", "@storybook/jest": "next", "@storybook/testing-library": "next", - "@types/node": "^16.0.0", + "@types/node": "^18.0.0", "formik": "^2.2.9", "typescript": "~4.9.3" }, diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json index c20a8164300c..c5faa0453b67 100644 --- a/code/builders/builder-vite/package.json +++ b/code/builders/builder-vite/package.json @@ -62,7 +62,7 @@ }, "devDependencies": { "@types/express": "^4.17.13", - "@types/node": "^16.0.0", + "@types/node": "^18.0.0", "glob": "^10.0.0", "rollup": "^3.20.1", "slash": "^5.0.0", diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json index 94933ce1d438..8662e84ff190 100644 --- a/code/builders/builder-webpack5/package.json +++ b/code/builders/builder-webpack5/package.json @@ -66,7 +66,7 @@ "@storybook/preview": "workspace:*", "@storybook/preview-api": "workspace:*", "@swc/core": "^1.3.82", - "@types/node": "^16.0.0", + "@types/node": "^18.0.0", "@types/semver": "^7.3.4", "babel-loader": "^9.0.0", "babel-plugin-named-exports-order": "^0.0.2", diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json index 03d6fb7bf296..e51bd6912e00 100644 --- a/code/frameworks/angular/package.json +++ b/code/frameworks/angular/package.json @@ -51,7 +51,7 @@ "@storybook/preview-api": "workspace:*", "@storybook/telemetry": "workspace:*", "@storybook/types": "workspace:*", - "@types/node": "^16.0.0", + "@types/node": "^18.0.0", "@types/react": "^16.14.34", "@types/react-dom": "^16.9.14", "@types/semver": "^7.3.4", diff --git a/code/frameworks/html-vite/package.json b/code/frameworks/html-vite/package.json index 892adcbdb666..912bb381d147 100644 --- a/code/frameworks/html-vite/package.json +++ b/code/frameworks/html-vite/package.json @@ -57,7 +57,7 @@ "magic-string": "^0.30.0" }, "devDependencies": { - "@types/node": "^16.0.0", + "@types/node": "^18.0.0", "typescript": "~4.9.3" }, "engines": { diff --git a/code/frameworks/html-webpack5/package.json b/code/frameworks/html-webpack5/package.json index 601565d96553..b7f8385597be 100644 --- a/code/frameworks/html-webpack5/package.json +++ b/code/frameworks/html-webpack5/package.json @@ -52,7 +52,7 @@ "@storybook/global": "^5.0.0", "@storybook/html": "workspace:*", "@storybook/preset-html-webpack": "workspace:*", - "@types/node": "^16.0.0" + "@types/node": "^18.0.0" }, "devDependencies": { "typescript": "~4.9.3" diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 8bf4f92136a2..33fd5427e83d 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -95,7 +95,7 @@ "@storybook/preset-react-webpack": "workspace:*", "@storybook/preview-api": "workspace:*", "@storybook/react": "workspace:*", - "@types/node": "^16.0.0", + "@types/node": "^18.0.0", "css-loader": "^6.7.3", "find-up": "^5.0.0", "fs-extra": "^11.1.0", diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json index 1090b72af835..845adbbce1b6 100644 --- a/code/frameworks/preact-vite/package.json +++ b/code/frameworks/preact-vite/package.json @@ -52,7 +52,7 @@ "@storybook/preact": "workspace:*" }, "devDependencies": { - "@types/node": "^16.0.0", + "@types/node": "^18.0.0", "typescript": "~4.9.3", "vite": "^4.0.0" }, diff --git a/code/frameworks/preact-webpack5/package.json b/code/frameworks/preact-webpack5/package.json index e719f43cd5ea..94d7855f70bd 100644 --- a/code/frameworks/preact-webpack5/package.json +++ b/code/frameworks/preact-webpack5/package.json @@ -51,7 +51,7 @@ "@storybook/core-common": "workspace:*", "@storybook/preact": "workspace:*", "@storybook/preset-preact-webpack": "workspace:*", - "@types/node": "^16.0.0" + "@types/node": "^18.0.0" }, "devDependencies": { "preact": "^10.5.13", diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index 56f36bdc4505..d790ff016b9d 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -56,7 +56,7 @@ "react-docgen": "^6.0.2" }, "devDependencies": { - "@types/node": "^16.0.0", + "@types/node": "^18.0.0", "typescript": "~4.9.3", "vite": "^4.0.0" }, diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json index 899296f95257..c2824a89292d 100644 --- a/code/frameworks/react-webpack5/package.json +++ b/code/frameworks/react-webpack5/package.json @@ -50,7 +50,7 @@ "@storybook/builder-webpack5": "workspace:*", "@storybook/preset-react-webpack": "workspace:*", "@storybook/react": "workspace:*", - "@types/node": "^16.0.0" + "@types/node": "^18.0.0" }, "devDependencies": { "jest-specific-snapshot": "^8.0.0" diff --git a/code/frameworks/server-webpack5/package.json b/code/frameworks/server-webpack5/package.json index 01defb610f9e..2e45e7c5d356 100644 --- a/code/frameworks/server-webpack5/package.json +++ b/code/frameworks/server-webpack5/package.json @@ -51,7 +51,7 @@ "@storybook/core-common": "workspace:*", "@storybook/preset-server-webpack": "workspace:*", "@storybook/server": "workspace:*", - "@types/node": "^16.0.0" + "@types/node": "^18.0.0" }, "devDependencies": { "typescript": "~4.9.3" diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index b5e71b75978f..9e98f5a68858 100644 --- a/code/frameworks/svelte-vite/package.json +++ b/code/frameworks/svelte-vite/package.json @@ -56,7 +56,7 @@ "ts-dedent": "^2.2.0" }, "devDependencies": { - "@types/node": "^16.0.0", + "@types/node": "^18.0.0", "svelte": "^4.0.0", "typescript": "~4.9.3", "vite": "^4.0.0" diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json index 4e528dc944c9..99996c2ecb31 100644 --- a/code/frameworks/sveltekit/package.json +++ b/code/frameworks/sveltekit/package.json @@ -55,7 +55,7 @@ "@storybook/svelte-vite": "workspace:*" }, "devDependencies": { - "@types/node": "^16.0.0", + "@types/node": "^18.0.0", "typescript": "^4.9.3", "vite": "^4.0.0" }, diff --git a/code/frameworks/vue-webpack5/package.json b/code/frameworks/vue-webpack5/package.json index 979688d6e381..31cf2befa97e 100644 --- a/code/frameworks/vue-webpack5/package.json +++ b/code/frameworks/vue-webpack5/package.json @@ -51,7 +51,7 @@ "@storybook/core-common": "workspace:*", "@storybook/preset-vue-webpack": "workspace:*", "@storybook/vue": "workspace:*", - "@types/node": "^16.0.0" + "@types/node": "^18.0.0" }, "devDependencies": { "typescript": "~4.9.3", diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json index 432c782b0a04..cc70a2915a25 100644 --- a/code/frameworks/vue3-vite/package.json +++ b/code/frameworks/vue3-vite/package.json @@ -55,7 +55,7 @@ "vue-docgen-api": "^4.40.0" }, "devDependencies": { - "@types/node": "^16.0.0", + "@types/node": "^18.0.0", "typescript": "~4.9.3", "vite": "^4.0.0" }, diff --git a/code/frameworks/vue3-webpack5/package.json b/code/frameworks/vue3-webpack5/package.json index 88830e05e559..aac61c51b0c3 100644 --- a/code/frameworks/vue3-webpack5/package.json +++ b/code/frameworks/vue3-webpack5/package.json @@ -51,7 +51,7 @@ "@storybook/core-common": "workspace:*", "@storybook/preset-vue3-webpack": "workspace:*", "@storybook/vue3": "workspace:*", - "@types/node": "^16.0.0" + "@types/node": "^18.0.0" }, "devDependencies": { "@vue/compiler-sfc": "3.0.0", diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json index 5f9104483890..89dcc86acac8 100644 --- a/code/frameworks/web-components-vite/package.json +++ b/code/frameworks/web-components-vite/package.json @@ -54,7 +54,7 @@ "magic-string": "^0.30.0" }, "devDependencies": { - "@types/node": "^16.0.0", + "@types/node": "^18.0.0", "typescript": "~4.9.3" }, "peerDependencies": { diff --git a/code/frameworks/web-components-webpack5/package.json b/code/frameworks/web-components-webpack5/package.json index a7c172a70388..5301efc1a31d 100644 --- a/code/frameworks/web-components-webpack5/package.json +++ b/code/frameworks/web-components-webpack5/package.json @@ -55,7 +55,7 @@ "@storybook/core-common": "workspace:*", "@storybook/preset-web-components-webpack": "workspace:*", "@storybook/web-components": "workspace:*", - "@types/node": "^16.0.0" + "@types/node": "^18.0.0" }, "devDependencies": { "lit": "2.3.1", diff --git a/code/lib/cli/src/automigrate/fixes/nodejs-requirement.test.ts b/code/lib/cli/src/automigrate/fixes/nodejs-requirement.test.ts index d86b266b6081..721aa49772c7 100644 --- a/code/lib/cli/src/automigrate/fixes/nodejs-requirement.test.ts +++ b/code/lib/cli/src/automigrate/fixes/nodejs-requirement.test.ts @@ -38,6 +38,11 @@ describe('nodejs-requirement fix', () => { await expect(check({})).resolves.toBeNull(); }); + it('skips when node >= 18.0.0', async () => { + mockNodeVersion('18.0.0'); + await expect(check({})).resolves.toBeNull(); + }); + it('prompts when node <= 16.0.0', async () => { mockNodeVersion('14.0.0'); await expect(check({})).resolves.toEqual({ nodeVersion: '14.0.0' }); diff --git a/code/lib/cli/src/link.ts b/code/lib/cli/src/link.ts index 3a61eb02a147..b00b04b8035e 100644 --- a/code/lib/cli/src/link.ts +++ b/code/lib/cli/src/link.ts @@ -105,7 +105,7 @@ export const link = async ({ target, local, start }: LinkOptions) => { } // ensure that linking is possible - await exec(`yarn add @types/node@16`, { cwd: reproDir }); + await exec(`yarn add @types/node@18`, { cwd: reproDir }); if (start) { logger.info(`Running ${reproName} storybook`); diff --git a/code/lib/core-common/package.json b/code/lib/core-common/package.json index 4b7d3e777fd5..aca8375d84f2 100644 --- a/code/lib/core-common/package.json +++ b/code/lib/core-common/package.json @@ -48,7 +48,7 @@ "@storybook/node-logger": "workspace:*", "@storybook/types": "workspace:*", "@types/find-cache-dir": "^3.2.1", - "@types/node": "^16.0.0", + "@types/node": "^18.0.0", "@types/node-fetch": "^2.6.4", "@types/pretty-hrtime": "^1.0.0", "chalk": "^4.1.0", diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index cb7a42f3f07a..ad893185ea12 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -76,7 +76,7 @@ "@storybook/telemetry": "workspace:*", "@storybook/types": "workspace:*", "@types/detect-port": "^1.3.0", - "@types/node": "^16.0.0", + "@types/node": "^18.0.0", "@types/pretty-hrtime": "^1.0.0", "@types/semver": "^7.3.4", "better-opn": "^3.0.2", diff --git a/code/lib/core-webpack/package.json b/code/lib/core-webpack/package.json index d621ab88b06d..04497fd2cba7 100644 --- a/code/lib/core-webpack/package.json +++ b/code/lib/core-webpack/package.json @@ -47,7 +47,7 @@ "@storybook/core-common": "workspace:*", "@storybook/node-logger": "workspace:*", "@storybook/types": "workspace:*", - "@types/node": "^16.0.0", + "@types/node": "^18.0.0", "ts-dedent": "^2.0.0" }, "devDependencies": { diff --git a/code/lib/theming/package.json b/code/lib/theming/package.json index 4b4c29614b0d..40d9e5d6e435 100644 --- a/code/lib/theming/package.json +++ b/code/lib/theming/package.json @@ -60,7 +60,7 @@ "@emotion/react": "^11.10.4", "@emotion/styled": "^11.10.4", "@types/fs-extra": "^11.0.1", - "@types/node": "^16.0.0", + "@types/node": "^18.0.0", "deep-object-diff": "^1.1.0", "fs-extra": "^11.1.0", "polished": "^4.2.2", diff --git a/code/lib/types/package.json b/code/lib/types/package.json index 263c3d7fcc79..37269a233f3b 100644 --- a/code/lib/types/package.json +++ b/code/lib/types/package.json @@ -52,7 +52,7 @@ "devDependencies": { "@storybook/csf": "^0.1.0", "@types/fs-extra": "^11.0.1", - "@types/node": "^16.0.0", + "@types/node": "^18.0.0", "typescript": "~4.9.3" }, "publishConfig": { diff --git a/code/package.json b/code/package.json index 2cbba9109ae0..53dbc4866166 100644 --- a/code/package.json +++ b/code/package.json @@ -205,7 +205,7 @@ "@types/express": "^4.17.11", "@types/fs-extra": "^11.0.1", "@types/lodash": "^4.14.167", - "@types/node": "^16.0.0", + "@types/node": "^18.0.0", "@types/react": "^16.14.34", "@types/react-dom": "^16.9.14", "@types/semver": "^7.3.4", @@ -288,7 +288,7 @@ }, "packageManager": "yarn@3.5.1", "engines": { - "node": ">=16.0.0" + "node": ">=18.0.0" }, "collective": { "type": "opencollective", diff --git a/code/presets/create-react-app/package.json b/code/presets/create-react-app/package.json index 1fb9244d2b41..65cb01397b35 100644 --- a/code/presets/create-react-app/package.json +++ b/code/presets/create-react-app/package.json @@ -59,7 +59,7 @@ }, "devDependencies": { "@storybook/node-logger": "workspace:*", - "@types/node": "^16.0.0", + "@types/node": "^18.0.0", "typescript": "~4.9.3" }, "peerDependencies": { diff --git a/code/presets/html-webpack/package.json b/code/presets/html-webpack/package.json index 326f623663b9..9a60a82aaa59 100644 --- a/code/presets/html-webpack/package.json +++ b/code/presets/html-webpack/package.json @@ -50,7 +50,7 @@ }, "dependencies": { "@storybook/core-webpack": "workspace:*", - "@types/node": "^16.0.0", + "@types/node": "^18.0.0", "html-loader": "^3.1.0", "webpack": "5" }, diff --git a/code/presets/preact-webpack/package.json b/code/presets/preact-webpack/package.json index 3894f3c84696..39ee253465c2 100644 --- a/code/presets/preact-webpack/package.json +++ b/code/presets/preact-webpack/package.json @@ -52,7 +52,7 @@ "@babel/plugin-transform-react-jsx": "^7.22.5", "@babel/preset-typescript": "^7.22.5", "@storybook/core-webpack": "workspace:*", - "@types/node": "^16.0.0" + "@types/node": "^18.0.0" }, "devDependencies": { "preact": "^10.5.13", diff --git a/code/presets/react-webpack/package.json b/code/presets/react-webpack/package.json index 4471b944e093..332896742991 100644 --- a/code/presets/react-webpack/package.json +++ b/code/presets/react-webpack/package.json @@ -72,7 +72,7 @@ "@storybook/node-logger": "workspace:*", "@storybook/react": "workspace:*", "@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.0c3f3b7.0", - "@types/node": "^16.0.0", + "@types/node": "^18.0.0", "@types/semver": "^7.3.4", "babel-plugin-add-react-displayname": "^0.0.5", "babel-plugin-react-docgen": "^4.2.1", diff --git a/code/presets/server-webpack/package.json b/code/presets/server-webpack/package.json index 13da8091ab46..38b7a4dd53cb 100644 --- a/code/presets/server-webpack/package.json +++ b/code/presets/server-webpack/package.json @@ -58,7 +58,7 @@ "@storybook/core-webpack": "workspace:*", "@storybook/global": "^5.0.0", "@storybook/server": "workspace:*", - "@types/node": "^16.0.0", + "@types/node": "^18.0.0", "safe-identifier": "^0.4.1", "ts-dedent": "^2.0.0", "yaml-loader": "^0.8.0" diff --git a/code/presets/vue-webpack/package.json b/code/presets/vue-webpack/package.json index 0aaf1b2b48f1..08c244e55b28 100644 --- a/code/presets/vue-webpack/package.json +++ b/code/presets/vue-webpack/package.json @@ -61,7 +61,7 @@ "dependencies": { "@storybook/core-webpack": "workspace:*", "@storybook/docs-tools": "workspace:*", - "@types/node": "^16.0.0", + "@types/node": "^18.0.0", "ts-loader": "^9.2.8", "vue-docgen-api": "^4.44.23", "vue-docgen-loader": "^1.5.1", diff --git a/code/presets/vue3-webpack/package.json b/code/presets/vue3-webpack/package.json index 8368d0f7f1a8..6b2dcaf62b63 100644 --- a/code/presets/vue3-webpack/package.json +++ b/code/presets/vue3-webpack/package.json @@ -61,7 +61,7 @@ "dependencies": { "@storybook/core-webpack": "workspace:*", "@storybook/docs-tools": "workspace:*", - "@types/node": "^16.0.0", + "@types/node": "^18.0.0", "ts-loader": "^9.2.8", "vue-docgen-api": "^4.46.0", "vue-docgen-loader": "^1.5.1", diff --git a/code/presets/web-components-webpack/package.json b/code/presets/web-components-webpack/package.json index 29cca0ef340d..26ef2710ab56 100644 --- a/code/presets/web-components-webpack/package.json +++ b/code/presets/web-components-webpack/package.json @@ -56,7 +56,7 @@ "@babel/plugin-syntax-import-meta": "^7.10.4", "@babel/preset-env": "^7.22.9", "@storybook/core-webpack": "workspace:*", - "@types/node": "^16.0.0", + "@types/node": "^18.0.0", "babel-loader": "^7.0.0 || ^8.0.0 || ^9.0.0", "babel-plugin-bundled-import-meta": "^0.3.1" }, diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json index 2bfe26f1b76b..6578d02d65fc 100644 --- a/code/renderers/react/package.json +++ b/code/renderers/react/package.json @@ -62,7 +62,7 @@ "@storybook/types": "workspace:*", "@types/escodegen": "^0.0.6", "@types/estree": "^0.0.51", - "@types/node": "^16.0.0", + "@types/node": "^18.0.0", "acorn": "^7.4.1", "acorn-jsx": "^5.3.1", "acorn-walk": "^7.2.0", diff --git a/code/renderers/web-components/package.json b/code/renderers/web-components/package.json index 1a857d6a2880..577bd14559c1 100644 --- a/code/renderers/web-components/package.json +++ b/code/renderers/web-components/package.json @@ -64,7 +64,7 @@ }, "devDependencies": { "@types/cross-spawn": "^6.0.2", - "@types/node": "^16.0.0", + "@types/node": "^18.0.0", "cross-spawn": "^7.0.3", "lit": "2.3.1", "typescript": "~4.9.3", diff --git a/code/yarn.lock b/code/yarn.lock index 3c200a7a8a38..a758346ffb19 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -6001,7 +6001,7 @@ __metadata: "@storybook/testing-library": next "@storybook/theming": "workspace:*" "@storybook/types": "workspace:*" - "@types/node": ^16.0.0 + "@types/node": ^18.0.0 formik: ^2.2.9 jest-mock: ^27.0.6 polished: ^4.2.2 @@ -6383,7 +6383,7 @@ __metadata: "@storybook/telemetry": "workspace:*" "@storybook/types": "workspace:*" "@types/cross-spawn": ^6.0.2 - "@types/node": ^16.0.0 + "@types/node": ^18.0.0 "@types/react": ^16.14.34 "@types/react-dom": ^16.9.14 "@types/semver": ^7.3.4 @@ -6551,7 +6551,7 @@ __metadata: "@storybook/types": "workspace:*" "@types/express": ^4.17.13 "@types/find-cache-dir": ^3.2.1 - "@types/node": ^16.0.0 + "@types/node": ^18.0.0 browser-assert: ^1.2.1 es-module-lexer: ^0.9.3 express: ^4.17.3 @@ -6592,7 +6592,7 @@ __metadata: "@storybook/preview": "workspace:*" "@storybook/preview-api": "workspace:*" "@swc/core": ^1.3.82 - "@types/node": ^16.0.0 + "@types/node": ^18.0.0 "@types/pretty-hrtime": ^1.0.0 "@types/semver": ^7.3.4 "@types/terser-webpack-plugin": ^5.2.0 @@ -6840,7 +6840,7 @@ __metadata: "@types/find-cache-dir": ^3.2.1 "@types/fs-extra": ^11.0.1 "@types/mock-fs": ^4.13.1 - "@types/node": ^16.0.0 + "@types/node": ^18.0.0 "@types/node-fetch": ^2.6.4 "@types/picomatch": ^2.3.0 "@types/pretty-hrtime": ^1.0.0 @@ -6899,7 +6899,7 @@ __metadata: "@types/compression": ^1.7.0 "@types/detect-port": ^1.3.0 "@types/ip": ^1.1.0 - "@types/node": ^16.0.0 + "@types/node": ^18.0.0 "@types/node-fetch": ^2.5.7 "@types/pretty-hrtime": ^1.0.0 "@types/semver": ^7.3.4 @@ -6942,7 +6942,7 @@ __metadata: "@storybook/core-common": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/types": "workspace:*" - "@types/node": ^16.0.0 + "@types/node": ^18.0.0 ts-dedent: ^2.0.0 typescript: ~4.9.3 webpack: 5 @@ -7107,7 +7107,7 @@ __metadata: "@storybook/html": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/preview-web": "workspace:*" - "@types/node": ^16.0.0 + "@types/node": ^18.0.0 magic-string: ^0.30.0 typescript: ~4.9.3 languageName: unknown @@ -7122,7 +7122,7 @@ __metadata: "@storybook/global": ^5.0.0 "@storybook/html": "workspace:*" "@storybook/preset-html-webpack": "workspace:*" - "@types/node": ^16.0.0 + "@types/node": ^18.0.0 typescript: ~4.9.3 peerDependencies: "@babel/core": "*" @@ -7317,7 +7317,7 @@ __metadata: "@types/babel__core": ^7 "@types/babel__plugin-transform-runtime": ^7 "@types/babel__preset-env": ^7 - "@types/node": ^16.0.0 + "@types/node": ^18.0.0 css-loader: ^6.7.3 find-up: ^5.0.0 fs-extra: ^11.1.0 @@ -7387,7 +7387,7 @@ __metadata: "@preact/preset-vite": ^2.0.0 "@storybook/builder-vite": "workspace:*" "@storybook/preact": "workspace:*" - "@types/node": ^16.0.0 + "@types/node": ^18.0.0 typescript: ~4.9.3 vite: ^4.0.0 peerDependencies: @@ -7404,7 +7404,7 @@ __metadata: "@storybook/core-common": "workspace:*" "@storybook/preact": "workspace:*" "@storybook/preset-preact-webpack": "workspace:*" - "@types/node": ^16.0.0 + "@types/node": ^18.0.0 preact: ^10.5.13 typescript: ~4.9.3 peerDependencies: @@ -7440,7 +7440,7 @@ __metadata: "@storybook/react-docgen-typescript-plugin": 1.0.6--canary.9.0c3f3b7.0 "@storybook/types": "workspace:*" "@types/babel__core": ^7.1.7 - "@types/node": ^16.0.0 + "@types/node": ^18.0.0 babel-plugin-react-docgen: ^4.1.0 pnp-webpack-plugin: ^1.7.0 semver: ^7.3.5 @@ -7456,7 +7456,7 @@ __metadata: resolution: "@storybook/preset-html-webpack@workspace:presets/html-webpack" dependencies: "@storybook/core-webpack": "workspace:*" - "@types/node": ^16.0.0 + "@types/node": ^18.0.0 html-loader: ^3.1.0 typescript: ~4.9.3 webpack: 5 @@ -7472,7 +7472,7 @@ __metadata: "@babel/plugin-transform-react-jsx": ^7.22.5 "@babel/preset-typescript": ^7.22.5 "@storybook/core-webpack": "workspace:*" - "@types/node": ^16.0.0 + "@types/node": ^18.0.0 preact: ^10.5.13 typescript: ~4.9.3 peerDependencies: @@ -7493,7 +7493,7 @@ __metadata: "@storybook/node-logger": "workspace:*" "@storybook/react": "workspace:*" "@storybook/react-docgen-typescript-plugin": 1.0.6--canary.9.0c3f3b7.0 - "@types/node": ^16.0.0 + "@types/node": ^18.0.0 "@types/semver": ^7.3.4 babel-plugin-add-react-displayname: ^0.0.5 babel-plugin-react-docgen: ^4.2.1 @@ -7522,7 +7522,7 @@ __metadata: "@storybook/core-webpack": "workspace:*" "@storybook/global": ^5.0.0 "@storybook/server": "workspace:*" - "@types/node": ^16.0.0 + "@types/node": ^18.0.0 fs-extra: ^11.1.0 jest-specific-snapshot: ^8.0.0 safe-identifier: ^0.4.1 @@ -7557,7 +7557,7 @@ __metadata: dependencies: "@storybook/core-webpack": "workspace:*" "@storybook/docs-tools": "workspace:*" - "@types/node": ^16.0.0 + "@types/node": ^18.0.0 ts-loader: ^9.2.8 typescript: ~4.9.3 vue: ^2.6.12 @@ -7582,7 +7582,7 @@ __metadata: dependencies: "@storybook/core-webpack": "workspace:*" "@storybook/docs-tools": "workspace:*" - "@types/node": ^16.0.0 + "@types/node": ^18.0.0 "@vue/compiler-sfc": ^3.2.33 ts-loader: ^9.2.8 typescript: ~4.9.3 @@ -7607,7 +7607,7 @@ __metadata: "@babel/plugin-syntax-import-meta": ^7.10.4 "@babel/preset-env": ^7.22.9 "@storybook/core-webpack": "workspace:*" - "@types/node": ^16.0.0 + "@types/node": ^18.0.0 babel-loader: ^7.0.0 || ^8.0.0 || ^9.0.0 babel-plugin-bundled-import-meta: ^0.3.1 lit: 2.3.1 @@ -7704,7 +7704,7 @@ __metadata: "@rollup/pluginutils": ^5.0.2 "@storybook/builder-vite": "workspace:*" "@storybook/react": "workspace:*" - "@types/node": ^16.0.0 + "@types/node": ^18.0.0 "@vitejs/plugin-react": ^3.0.1 magic-string: ^0.30.0 react-docgen: ^6.0.2 @@ -7724,7 +7724,7 @@ __metadata: "@storybook/builder-webpack5": "workspace:*" "@storybook/preset-react-webpack": "workspace:*" "@storybook/react": "workspace:*" - "@types/node": ^16.0.0 + "@types/node": ^18.0.0 jest-specific-snapshot: ^8.0.0 peerDependencies: "@babel/core": ^7.22.0 @@ -7753,7 +7753,7 @@ __metadata: "@storybook/types": "workspace:*" "@types/escodegen": ^0.0.6 "@types/estree": ^0.0.51 - "@types/node": ^16.0.0 + "@types/node": ^18.0.0 "@types/util-deprecate": ^1.0.0 acorn: ^7.4.1 acorn-jsx: ^5.3.1 @@ -7896,7 +7896,7 @@ __metadata: "@types/express": ^4.17.11 "@types/fs-extra": ^11.0.1 "@types/lodash": ^4.14.167 - "@types/node": ^16.0.0 + "@types/node": ^18.0.0 "@types/react": ^16.14.34 "@types/react-dom": ^16.9.14 "@types/semver": ^7.3.4 @@ -7998,7 +7998,7 @@ __metadata: "@storybook/core-common": "workspace:*" "@storybook/preset-server-webpack": "workspace:*" "@storybook/server": "workspace:*" - "@types/node": ^16.0.0 + "@types/node": ^18.0.0 typescript: ~4.9.3 peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 @@ -8058,7 +8058,7 @@ __metadata: "@storybook/node-logger": "workspace:*" "@storybook/svelte": "workspace:*" "@sveltejs/vite-plugin-svelte": ^2.4.2 - "@types/node": ^16.0.0 + "@types/node": ^18.0.0 magic-string: ^0.30.0 svelte: ^4.0.0 sveltedoc-parser: ^4.2.1 @@ -8120,7 +8120,7 @@ __metadata: "@storybook/builder-vite": "workspace:*" "@storybook/svelte": "workspace:*" "@storybook/svelte-vite": "workspace:*" - "@types/node": ^16.0.0 + "@types/node": ^18.0.0 typescript: ^4.9.3 vite: ^4.0.0 peerDependencies: @@ -8185,7 +8185,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/global": ^5.0.0 "@types/fs-extra": ^11.0.1 - "@types/node": ^16.0.0 + "@types/node": ^18.0.0 deep-object-diff: ^1.1.0 fs-extra: ^11.1.0 memoizerific: ^1.11.3 @@ -8207,7 +8207,7 @@ __metadata: "@types/babel__core": ^7.0.0 "@types/express": ^4.7.0 "@types/fs-extra": ^11.0.1 - "@types/node": ^16.0.0 + "@types/node": ^18.0.0 file-system-cache: 2.3.0 typescript: ~4.9.3 languageName: unknown @@ -8242,7 +8242,7 @@ __metadata: "@storybook/core-common": "workspace:*" "@storybook/preset-vue-webpack": "workspace:*" "@storybook/vue": "workspace:*" - "@types/node": ^16.0.0 + "@types/node": ^18.0.0 typescript: ~4.9.3 vue: ^2.6.12 vue-loader: ^15.7.0 @@ -8266,7 +8266,7 @@ __metadata: "@storybook/builder-vite": "workspace:*" "@storybook/core-server": "workspace:*" "@storybook/vue3": "workspace:*" - "@types/node": ^16.0.0 + "@types/node": ^18.0.0 "@vitejs/plugin-vue": ^4.0.0 magic-string: ^0.30.0 typescript: ~4.9.3 @@ -8287,7 +8287,7 @@ __metadata: "@storybook/core-common": "workspace:*" "@storybook/preset-vue3-webpack": "workspace:*" "@storybook/vue3": "workspace:*" - "@types/node": ^16.0.0 + "@types/node": ^18.0.0 "@vue/compiler-sfc": 3.0.0 typescript: ~4.9.3 vue: 3.0.0 @@ -8361,7 +8361,7 @@ __metadata: "@storybook/core-server": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/web-components": "workspace:*" - "@types/node": ^16.0.0 + "@types/node": ^18.0.0 magic-string: ^0.30.0 typescript: ~4.9.3 peerDependencies: @@ -8379,7 +8379,7 @@ __metadata: "@storybook/core-common": "workspace:*" "@storybook/preset-web-components-webpack": "workspace:*" "@storybook/web-components": "workspace:*" - "@types/node": ^16.0.0 + "@types/node": ^18.0.0 lit: 2.3.1 typescript: ~4.9.3 peerDependencies: @@ -8401,7 +8401,7 @@ __metadata: "@storybook/preview-api": "workspace:*" "@storybook/types": "workspace:*" "@types/cross-spawn": ^6.0.2 - "@types/node": ^16.0.0 + "@types/node": ^18.0.0 cross-spawn: ^7.0.3 lit: 2.3.1 tiny-invariant: ^1.3.1 @@ -9501,10 +9501,10 @@ __metadata: languageName: node linkType: hard -"@types/node@npm:^16.0.0": - version: 16.18.57 - resolution: "@types/node@npm:16.18.57" - checksum: 191cfb12fde8c882f1d982a07302f7b87cda7b93ec227b0607f908f3b3b11c5ff96bbed613f370818ea60a8a98140962b193324bdadff679bd5ca75d04407e60 +"@types/node@npm:^18.0.0": + version: 18.18.4 + resolution: "@types/node@npm:18.18.4" + checksum: 17891f8b8fd107813eaea0dce58d2008173f3c90df4f5998da3d01d6b225e9908922156ac83240b0230d3813f1a29b5f7e065a2aa993285af062e3a3779f88dd languageName: node linkType: hard diff --git a/docs/snippets/common/test-runner-local-build-workflow.yml.mdx b/docs/snippets/common/test-runner-local-build-workflow.yml.mdx index 000ccf44ba14..40443a0e7f67 100644 --- a/docs/snippets/common/test-runner-local-build-workflow.yml.mdx +++ b/docs/snippets/common/test-runner-local-build-workflow.yml.mdx @@ -11,7 +11,7 @@ jobs: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 with: - node-version: '16.x' + node-version-file: '.nvmrc' - name: Install dependencies run: yarn - name: Install Playwright diff --git a/docs/snippets/common/test-runner-with-deploy-event-workflow.yml.mdx b/docs/snippets/common/test-runner-with-deploy-event-workflow.yml.mdx index ff965af6f45d..b79f70920e43 100644 --- a/docs/snippets/common/test-runner-with-deploy-event-workflow.yml.mdx +++ b/docs/snippets/common/test-runner-with-deploy-event-workflow.yml.mdx @@ -12,7 +12,7 @@ jobs: - uses: actions/checkout@v3 - uses: actions/setup-node@v3 with: - node-version: '16.x' + node-version-file: '.nvmrc' - name: Install dependencies run: yarn - name: Install Playwright diff --git a/scripts/.babelrc.js b/scripts/.babelrc.js index 508d8180dc10..31016fd42625 100644 --- a/scripts/.babelrc.js +++ b/scripts/.babelrc.js @@ -9,7 +9,7 @@ module.exports = { shippedProposals: true, useBuiltIns: 'usage', corejs: '3', - targets: { node: '16' }, + targets: { node: '18' }, }, ], ], diff --git a/scripts/package.json b/scripts/package.json index f220b8f88742..b6020c436390 100644 --- a/scripts/package.json +++ b/scripts/package.json @@ -93,7 +93,7 @@ "@types/fs-extra": "^11.0.1", "@types/http-server": "^0.12.1", "@types/lodash": "^4", - "@types/node": "^16.0.0", + "@types/node": "^18.0.0", "@types/node-fetch": "^2.5.7", "@types/prettier": "^2", "@types/pretty-hrtime": "^1.0.0", @@ -203,6 +203,6 @@ }, "packageManager": "yarn@3.3.0", "engines": { - "node": ">=16.0.0" + "node": ">=18.0.0" } } diff --git a/scripts/yarn.lock b/scripts/yarn.lock index f9d17fe543a8..504a13091f02 100644 --- a/scripts/yarn.lock +++ b/scripts/yarn.lock @@ -2970,7 +2970,7 @@ __metadata: "@types/fs-extra": ^11.0.1 "@types/http-server": ^0.12.1 "@types/lodash": ^4 - "@types/node": ^16.0.0 + "@types/node": ^18.0.0 "@types/node-fetch": ^2.5.7 "@types/prettier": ^2 "@types/pretty-hrtime": ^1.0.0 @@ -3711,7 +3711,7 @@ __metadata: languageName: node linkType: hard -"@types/node@npm:*, @types/node@npm:>= 8, @types/node@npm:^16.0.0": +"@types/node@npm:*, @types/node@npm:>= 8": version: 16.18.50 resolution: "@types/node@npm:16.18.50" checksum: 4fc76918cc4e09d6cf087b385a1e2283580b1a88518f309764365cbdbdc28cdf48a77a5615ac4ce28dccee078b3da79442a032cc8aa312406943754144938cdb From e9313b7bc592a3de5cf27c6bd3aef2f958d310cc Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 9 Oct 2023 14:43:30 +0200 Subject: [PATCH 24/38] Update CI to Node.js v18 --- .circleci/config.yml | 4 ++-- .github/workflows/generate-sandboxes-main.yml | 2 +- .github/workflows/generate-sandboxes-next.yml | 2 +- .nvmrc | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 617cdac42c28..9b03dd3739bc 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -17,7 +17,7 @@ executors: default: 'small' working_directory: /tmp/storybook docker: - - image: cimg/node:16.20.0 + - image: cimg/node:18.18.0 environment: NODE_OPTIONS: --max_old_space_size=6144 resource_class: <> @@ -30,7 +30,7 @@ executors: default: 'small' working_directory: /tmp/storybook docker: - - image: cimg/node:16.20.0-browsers + - image: cimg/node:18.18.0-browsers environment: NODE_OPTIONS: --max_old_space_size=6144 resource_class: <> diff --git a/.github/workflows/generate-sandboxes-main.yml b/.github/workflows/generate-sandboxes-main.yml index 474542495848..47205b3dbe25 100644 --- a/.github/workflows/generate-sandboxes-main.yml +++ b/.github/workflows/generate-sandboxes-main.yml @@ -21,7 +21,7 @@ jobs: steps: - uses: actions/setup-node@v3 with: - node-version: 16 + node-version: 18 - uses: actions/checkout@v3 with: ref: main diff --git a/.github/workflows/generate-sandboxes-next.yml b/.github/workflows/generate-sandboxes-next.yml index c20f5491ef30..6eece02f06bd 100644 --- a/.github/workflows/generate-sandboxes-next.yml +++ b/.github/workflows/generate-sandboxes-next.yml @@ -21,7 +21,7 @@ jobs: steps: - uses: actions/setup-node@v3 with: - node-version: 16 + node-version: 18 - uses: actions/checkout@v3 with: ref: next diff --git a/.nvmrc b/.nvmrc index 59ea99ee63cb..4a58985bb483 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -16.20 +18.18 From 483eb52d0f2489f79b756dba3403446a298496ae Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Tue, 10 Oct 2023 14:29:38 +0200 Subject: [PATCH 25/38] Update @types/node to v18 --- code/addons/interactions/package.json | 2 +- code/builders/builder-vite/package.json | 2 +- code/builders/builder-webpack5/package.json | 2 +- code/frameworks/angular/package.json | 2 +- code/frameworks/html-vite/package.json | 2 +- code/frameworks/html-webpack5/package.json | 2 +- code/frameworks/nextjs/package.json | 2 +- code/frameworks/preact-vite/package.json | 2 +- code/frameworks/preact-webpack5/package.json | 2 +- code/frameworks/react-vite/package.json | 2 +- code/frameworks/react-webpack5/package.json | 2 +- code/frameworks/server-webpack5/package.json | 2 +- code/frameworks/svelte-vite/package.json | 2 +- code/frameworks/sveltekit/package.json | 2 +- code/frameworks/vue-webpack5/package.json | 2 +- code/frameworks/vue3-vite/package.json | 2 +- code/frameworks/vue3-webpack5/package.json | 2 +- .../web-components-vite/package.json | 2 +- .../web-components-webpack5/package.json | 2 +- code/lib/core-common/package.json | 2 +- code/lib/core-server/package.json | 2 +- code/lib/core-webpack/package.json | 2 +- code/lib/theming/package.json | 2 +- code/lib/types/package.json | 2 +- code/package.json | 2 +- code/presets/create-react-app/package.json | 2 +- code/presets/html-webpack/package.json | 2 +- code/presets/preact-webpack/package.json | 2 +- code/presets/react-webpack/package.json | 2 +- code/presets/server-webpack/package.json | 2 +- code/presets/vue-webpack/package.json | 2 +- code/presets/vue3-webpack/package.json | 2 +- .../web-components-webpack/package.json | 2 +- code/renderers/react/package.json | 2 +- code/renderers/web-components/package.json | 2 +- code/yarn.lock | 78 +++++++++---------- scripts/package.json | 2 +- scripts/yarn.lock | 11 ++- 38 files changed, 84 insertions(+), 77 deletions(-) diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json index 76fc4f5e7357..fde2a50cdd5f 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -91,7 +91,7 @@ "@devtools-ds/object-inspector": "^1.1.2", "@storybook/jest": "next", "@storybook/testing-library": "next", - "@types/node": "^16.0.0", + "@types/node": "^18.18.4", "formik": "^2.2.9", "typescript": "~4.9.3" }, diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json index c20a8164300c..9b9b44449b5f 100644 --- a/code/builders/builder-vite/package.json +++ b/code/builders/builder-vite/package.json @@ -62,7 +62,7 @@ }, "devDependencies": { "@types/express": "^4.17.13", - "@types/node": "^16.0.0", + "@types/node": "^18.18.4", "glob": "^10.0.0", "rollup": "^3.20.1", "slash": "^5.0.0", diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json index 94933ce1d438..6cecabe57914 100644 --- a/code/builders/builder-webpack5/package.json +++ b/code/builders/builder-webpack5/package.json @@ -66,7 +66,7 @@ "@storybook/preview": "workspace:*", "@storybook/preview-api": "workspace:*", "@swc/core": "^1.3.82", - "@types/node": "^16.0.0", + "@types/node": "^18.18.4", "@types/semver": "^7.3.4", "babel-loader": "^9.0.0", "babel-plugin-named-exports-order": "^0.0.2", diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json index 03d6fb7bf296..59b99ec12e19 100644 --- a/code/frameworks/angular/package.json +++ b/code/frameworks/angular/package.json @@ -51,7 +51,7 @@ "@storybook/preview-api": "workspace:*", "@storybook/telemetry": "workspace:*", "@storybook/types": "workspace:*", - "@types/node": "^16.0.0", + "@types/node": "^18.18.4", "@types/react": "^16.14.34", "@types/react-dom": "^16.9.14", "@types/semver": "^7.3.4", diff --git a/code/frameworks/html-vite/package.json b/code/frameworks/html-vite/package.json index 892adcbdb666..9d55fcceeb81 100644 --- a/code/frameworks/html-vite/package.json +++ b/code/frameworks/html-vite/package.json @@ -57,7 +57,7 @@ "magic-string": "^0.30.0" }, "devDependencies": { - "@types/node": "^16.0.0", + "@types/node": "^18.18.4", "typescript": "~4.9.3" }, "engines": { diff --git a/code/frameworks/html-webpack5/package.json b/code/frameworks/html-webpack5/package.json index 601565d96553..ac184328399e 100644 --- a/code/frameworks/html-webpack5/package.json +++ b/code/frameworks/html-webpack5/package.json @@ -52,7 +52,7 @@ "@storybook/global": "^5.0.0", "@storybook/html": "workspace:*", "@storybook/preset-html-webpack": "workspace:*", - "@types/node": "^16.0.0" + "@types/node": "^18.18.4" }, "devDependencies": { "typescript": "~4.9.3" diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 8bf4f92136a2..f1ff36a58826 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -95,7 +95,7 @@ "@storybook/preset-react-webpack": "workspace:*", "@storybook/preview-api": "workspace:*", "@storybook/react": "workspace:*", - "@types/node": "^16.0.0", + "@types/node": "^18.18.4", "css-loader": "^6.7.3", "find-up": "^5.0.0", "fs-extra": "^11.1.0", diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json index 1090b72af835..42536eb5d979 100644 --- a/code/frameworks/preact-vite/package.json +++ b/code/frameworks/preact-vite/package.json @@ -52,7 +52,7 @@ "@storybook/preact": "workspace:*" }, "devDependencies": { - "@types/node": "^16.0.0", + "@types/node": "^18.18.4", "typescript": "~4.9.3", "vite": "^4.0.0" }, diff --git a/code/frameworks/preact-webpack5/package.json b/code/frameworks/preact-webpack5/package.json index e719f43cd5ea..d59183863347 100644 --- a/code/frameworks/preact-webpack5/package.json +++ b/code/frameworks/preact-webpack5/package.json @@ -51,7 +51,7 @@ "@storybook/core-common": "workspace:*", "@storybook/preact": "workspace:*", "@storybook/preset-preact-webpack": "workspace:*", - "@types/node": "^16.0.0" + "@types/node": "^18.18.4" }, "devDependencies": { "preact": "^10.5.13", diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index 56f36bdc4505..55cb89beb3a3 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -56,7 +56,7 @@ "react-docgen": "^6.0.2" }, "devDependencies": { - "@types/node": "^16.0.0", + "@types/node": "^18.18.4", "typescript": "~4.9.3", "vite": "^4.0.0" }, diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json index 899296f95257..d8f921cd6a76 100644 --- a/code/frameworks/react-webpack5/package.json +++ b/code/frameworks/react-webpack5/package.json @@ -50,7 +50,7 @@ "@storybook/builder-webpack5": "workspace:*", "@storybook/preset-react-webpack": "workspace:*", "@storybook/react": "workspace:*", - "@types/node": "^16.0.0" + "@types/node": "^18.18.4" }, "devDependencies": { "jest-specific-snapshot": "^8.0.0" diff --git a/code/frameworks/server-webpack5/package.json b/code/frameworks/server-webpack5/package.json index 01defb610f9e..5daa202b0577 100644 --- a/code/frameworks/server-webpack5/package.json +++ b/code/frameworks/server-webpack5/package.json @@ -51,7 +51,7 @@ "@storybook/core-common": "workspace:*", "@storybook/preset-server-webpack": "workspace:*", "@storybook/server": "workspace:*", - "@types/node": "^16.0.0" + "@types/node": "^18.18.4" }, "devDependencies": { "typescript": "~4.9.3" diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index b5e71b75978f..869f223ddbf0 100644 --- a/code/frameworks/svelte-vite/package.json +++ b/code/frameworks/svelte-vite/package.json @@ -56,7 +56,7 @@ "ts-dedent": "^2.2.0" }, "devDependencies": { - "@types/node": "^16.0.0", + "@types/node": "^18.18.4", "svelte": "^4.0.0", "typescript": "~4.9.3", "vite": "^4.0.0" diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json index 4e528dc944c9..9c5fe6acdb41 100644 --- a/code/frameworks/sveltekit/package.json +++ b/code/frameworks/sveltekit/package.json @@ -55,7 +55,7 @@ "@storybook/svelte-vite": "workspace:*" }, "devDependencies": { - "@types/node": "^16.0.0", + "@types/node": "^18.18.4", "typescript": "^4.9.3", "vite": "^4.0.0" }, diff --git a/code/frameworks/vue-webpack5/package.json b/code/frameworks/vue-webpack5/package.json index 979688d6e381..a168129d3d6d 100644 --- a/code/frameworks/vue-webpack5/package.json +++ b/code/frameworks/vue-webpack5/package.json @@ -51,7 +51,7 @@ "@storybook/core-common": "workspace:*", "@storybook/preset-vue-webpack": "workspace:*", "@storybook/vue": "workspace:*", - "@types/node": "^16.0.0" + "@types/node": "^18.18.4" }, "devDependencies": { "typescript": "~4.9.3", diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json index 432c782b0a04..10158be769f1 100644 --- a/code/frameworks/vue3-vite/package.json +++ b/code/frameworks/vue3-vite/package.json @@ -55,7 +55,7 @@ "vue-docgen-api": "^4.40.0" }, "devDependencies": { - "@types/node": "^16.0.0", + "@types/node": "^18.18.4", "typescript": "~4.9.3", "vite": "^4.0.0" }, diff --git a/code/frameworks/vue3-webpack5/package.json b/code/frameworks/vue3-webpack5/package.json index 88830e05e559..508a65edf3fc 100644 --- a/code/frameworks/vue3-webpack5/package.json +++ b/code/frameworks/vue3-webpack5/package.json @@ -51,7 +51,7 @@ "@storybook/core-common": "workspace:*", "@storybook/preset-vue3-webpack": "workspace:*", "@storybook/vue3": "workspace:*", - "@types/node": "^16.0.0" + "@types/node": "^18.18.4" }, "devDependencies": { "@vue/compiler-sfc": "3.0.0", diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json index 5f9104483890..05f79bea4f20 100644 --- a/code/frameworks/web-components-vite/package.json +++ b/code/frameworks/web-components-vite/package.json @@ -54,7 +54,7 @@ "magic-string": "^0.30.0" }, "devDependencies": { - "@types/node": "^16.0.0", + "@types/node": "^18.18.4", "typescript": "~4.9.3" }, "peerDependencies": { diff --git a/code/frameworks/web-components-webpack5/package.json b/code/frameworks/web-components-webpack5/package.json index a7c172a70388..301eac71d572 100644 --- a/code/frameworks/web-components-webpack5/package.json +++ b/code/frameworks/web-components-webpack5/package.json @@ -55,7 +55,7 @@ "@storybook/core-common": "workspace:*", "@storybook/preset-web-components-webpack": "workspace:*", "@storybook/web-components": "workspace:*", - "@types/node": "^16.0.0" + "@types/node": "^18.18.4" }, "devDependencies": { "lit": "2.3.1", diff --git a/code/lib/core-common/package.json b/code/lib/core-common/package.json index 4b7d3e777fd5..deb1511aff15 100644 --- a/code/lib/core-common/package.json +++ b/code/lib/core-common/package.json @@ -48,7 +48,7 @@ "@storybook/node-logger": "workspace:*", "@storybook/types": "workspace:*", "@types/find-cache-dir": "^3.2.1", - "@types/node": "^16.0.0", + "@types/node": "^18.18.4", "@types/node-fetch": "^2.6.4", "@types/pretty-hrtime": "^1.0.0", "chalk": "^4.1.0", diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index cb7a42f3f07a..c43885ee61da 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -76,7 +76,7 @@ "@storybook/telemetry": "workspace:*", "@storybook/types": "workspace:*", "@types/detect-port": "^1.3.0", - "@types/node": "^16.0.0", + "@types/node": "^18.18.4", "@types/pretty-hrtime": "^1.0.0", "@types/semver": "^7.3.4", "better-opn": "^3.0.2", diff --git a/code/lib/core-webpack/package.json b/code/lib/core-webpack/package.json index d621ab88b06d..2963a2fa4c72 100644 --- a/code/lib/core-webpack/package.json +++ b/code/lib/core-webpack/package.json @@ -47,7 +47,7 @@ "@storybook/core-common": "workspace:*", "@storybook/node-logger": "workspace:*", "@storybook/types": "workspace:*", - "@types/node": "^16.0.0", + "@types/node": "^18.18.4", "ts-dedent": "^2.0.0" }, "devDependencies": { diff --git a/code/lib/theming/package.json b/code/lib/theming/package.json index 4b4c29614b0d..c1a3567ceb08 100644 --- a/code/lib/theming/package.json +++ b/code/lib/theming/package.json @@ -60,7 +60,7 @@ "@emotion/react": "^11.10.4", "@emotion/styled": "^11.10.4", "@types/fs-extra": "^11.0.1", - "@types/node": "^16.0.0", + "@types/node": "^18.18.4", "deep-object-diff": "^1.1.0", "fs-extra": "^11.1.0", "polished": "^4.2.2", diff --git a/code/lib/types/package.json b/code/lib/types/package.json index 263c3d7fcc79..0c5b0813ba52 100644 --- a/code/lib/types/package.json +++ b/code/lib/types/package.json @@ -52,7 +52,7 @@ "devDependencies": { "@storybook/csf": "^0.1.0", "@types/fs-extra": "^11.0.1", - "@types/node": "^16.0.0", + "@types/node": "^18.18.4", "typescript": "~4.9.3" }, "publishConfig": { diff --git a/code/package.json b/code/package.json index 2cbba9109ae0..6223c221a3d4 100644 --- a/code/package.json +++ b/code/package.json @@ -205,7 +205,7 @@ "@types/express": "^4.17.11", "@types/fs-extra": "^11.0.1", "@types/lodash": "^4.14.167", - "@types/node": "^16.0.0", + "@types/node": "^18.18.4", "@types/react": "^16.14.34", "@types/react-dom": "^16.9.14", "@types/semver": "^7.3.4", diff --git a/code/presets/create-react-app/package.json b/code/presets/create-react-app/package.json index 1fb9244d2b41..8fd642c00ba4 100644 --- a/code/presets/create-react-app/package.json +++ b/code/presets/create-react-app/package.json @@ -59,7 +59,7 @@ }, "devDependencies": { "@storybook/node-logger": "workspace:*", - "@types/node": "^16.0.0", + "@types/node": "^18.18.4", "typescript": "~4.9.3" }, "peerDependencies": { diff --git a/code/presets/html-webpack/package.json b/code/presets/html-webpack/package.json index 326f623663b9..529fc5bf3e6a 100644 --- a/code/presets/html-webpack/package.json +++ b/code/presets/html-webpack/package.json @@ -50,7 +50,7 @@ }, "dependencies": { "@storybook/core-webpack": "workspace:*", - "@types/node": "^16.0.0", + "@types/node": "^18.18.4", "html-loader": "^3.1.0", "webpack": "5" }, diff --git a/code/presets/preact-webpack/package.json b/code/presets/preact-webpack/package.json index 3894f3c84696..de942bd4fd48 100644 --- a/code/presets/preact-webpack/package.json +++ b/code/presets/preact-webpack/package.json @@ -52,7 +52,7 @@ "@babel/plugin-transform-react-jsx": "^7.22.5", "@babel/preset-typescript": "^7.22.5", "@storybook/core-webpack": "workspace:*", - "@types/node": "^16.0.0" + "@types/node": "^18.18.4" }, "devDependencies": { "preact": "^10.5.13", diff --git a/code/presets/react-webpack/package.json b/code/presets/react-webpack/package.json index 4471b944e093..6388bbcc0796 100644 --- a/code/presets/react-webpack/package.json +++ b/code/presets/react-webpack/package.json @@ -72,7 +72,7 @@ "@storybook/node-logger": "workspace:*", "@storybook/react": "workspace:*", "@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.0c3f3b7.0", - "@types/node": "^16.0.0", + "@types/node": "^18.18.4", "@types/semver": "^7.3.4", "babel-plugin-add-react-displayname": "^0.0.5", "babel-plugin-react-docgen": "^4.2.1", diff --git a/code/presets/server-webpack/package.json b/code/presets/server-webpack/package.json index 13da8091ab46..d0dd5853b66f 100644 --- a/code/presets/server-webpack/package.json +++ b/code/presets/server-webpack/package.json @@ -58,7 +58,7 @@ "@storybook/core-webpack": "workspace:*", "@storybook/global": "^5.0.0", "@storybook/server": "workspace:*", - "@types/node": "^16.0.0", + "@types/node": "^18.18.4", "safe-identifier": "^0.4.1", "ts-dedent": "^2.0.0", "yaml-loader": "^0.8.0" diff --git a/code/presets/vue-webpack/package.json b/code/presets/vue-webpack/package.json index 0aaf1b2b48f1..112bf1089738 100644 --- a/code/presets/vue-webpack/package.json +++ b/code/presets/vue-webpack/package.json @@ -61,7 +61,7 @@ "dependencies": { "@storybook/core-webpack": "workspace:*", "@storybook/docs-tools": "workspace:*", - "@types/node": "^16.0.0", + "@types/node": "^18.18.4", "ts-loader": "^9.2.8", "vue-docgen-api": "^4.44.23", "vue-docgen-loader": "^1.5.1", diff --git a/code/presets/vue3-webpack/package.json b/code/presets/vue3-webpack/package.json index 8368d0f7f1a8..e6a1793b8c2b 100644 --- a/code/presets/vue3-webpack/package.json +++ b/code/presets/vue3-webpack/package.json @@ -61,7 +61,7 @@ "dependencies": { "@storybook/core-webpack": "workspace:*", "@storybook/docs-tools": "workspace:*", - "@types/node": "^16.0.0", + "@types/node": "^18.18.4", "ts-loader": "^9.2.8", "vue-docgen-api": "^4.46.0", "vue-docgen-loader": "^1.5.1", diff --git a/code/presets/web-components-webpack/package.json b/code/presets/web-components-webpack/package.json index 29cca0ef340d..6a554cf0a2c2 100644 --- a/code/presets/web-components-webpack/package.json +++ b/code/presets/web-components-webpack/package.json @@ -56,7 +56,7 @@ "@babel/plugin-syntax-import-meta": "^7.10.4", "@babel/preset-env": "^7.22.9", "@storybook/core-webpack": "workspace:*", - "@types/node": "^16.0.0", + "@types/node": "^18.18.4", "babel-loader": "^7.0.0 || ^8.0.0 || ^9.0.0", "babel-plugin-bundled-import-meta": "^0.3.1" }, diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json index 2bfe26f1b76b..2d4c8760da8d 100644 --- a/code/renderers/react/package.json +++ b/code/renderers/react/package.json @@ -62,7 +62,7 @@ "@storybook/types": "workspace:*", "@types/escodegen": "^0.0.6", "@types/estree": "^0.0.51", - "@types/node": "^16.0.0", + "@types/node": "^18.18.4", "acorn": "^7.4.1", "acorn-jsx": "^5.3.1", "acorn-walk": "^7.2.0", diff --git a/code/renderers/web-components/package.json b/code/renderers/web-components/package.json index 1a857d6a2880..d9fe1128468d 100644 --- a/code/renderers/web-components/package.json +++ b/code/renderers/web-components/package.json @@ -64,7 +64,7 @@ }, "devDependencies": { "@types/cross-spawn": "^6.0.2", - "@types/node": "^16.0.0", + "@types/node": "^18.18.4", "cross-spawn": "^7.0.3", "lit": "2.3.1", "typescript": "~4.9.3", diff --git a/code/yarn.lock b/code/yarn.lock index 3c200a7a8a38..4a8900976cf5 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -6001,7 +6001,7 @@ __metadata: "@storybook/testing-library": next "@storybook/theming": "workspace:*" "@storybook/types": "workspace:*" - "@types/node": ^16.0.0 + "@types/node": ^18.18.4 formik: ^2.2.9 jest-mock: ^27.0.6 polished: ^4.2.2 @@ -6383,7 +6383,7 @@ __metadata: "@storybook/telemetry": "workspace:*" "@storybook/types": "workspace:*" "@types/cross-spawn": ^6.0.2 - "@types/node": ^16.0.0 + "@types/node": ^18.18.4 "@types/react": ^16.14.34 "@types/react-dom": ^16.9.14 "@types/semver": ^7.3.4 @@ -6551,7 +6551,7 @@ __metadata: "@storybook/types": "workspace:*" "@types/express": ^4.17.13 "@types/find-cache-dir": ^3.2.1 - "@types/node": ^16.0.0 + "@types/node": ^18.18.4 browser-assert: ^1.2.1 es-module-lexer: ^0.9.3 express: ^4.17.3 @@ -6592,7 +6592,7 @@ __metadata: "@storybook/preview": "workspace:*" "@storybook/preview-api": "workspace:*" "@swc/core": ^1.3.82 - "@types/node": ^16.0.0 + "@types/node": ^18.18.4 "@types/pretty-hrtime": ^1.0.0 "@types/semver": ^7.3.4 "@types/terser-webpack-plugin": ^5.2.0 @@ -6840,7 +6840,7 @@ __metadata: "@types/find-cache-dir": ^3.2.1 "@types/fs-extra": ^11.0.1 "@types/mock-fs": ^4.13.1 - "@types/node": ^16.0.0 + "@types/node": ^18.18.4 "@types/node-fetch": ^2.6.4 "@types/picomatch": ^2.3.0 "@types/pretty-hrtime": ^1.0.0 @@ -6899,7 +6899,7 @@ __metadata: "@types/compression": ^1.7.0 "@types/detect-port": ^1.3.0 "@types/ip": ^1.1.0 - "@types/node": ^16.0.0 + "@types/node": ^18.18.4 "@types/node-fetch": ^2.5.7 "@types/pretty-hrtime": ^1.0.0 "@types/semver": ^7.3.4 @@ -6942,7 +6942,7 @@ __metadata: "@storybook/core-common": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/types": "workspace:*" - "@types/node": ^16.0.0 + "@types/node": ^18.18.4 ts-dedent: ^2.0.0 typescript: ~4.9.3 webpack: 5 @@ -7107,7 +7107,7 @@ __metadata: "@storybook/html": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/preview-web": "workspace:*" - "@types/node": ^16.0.0 + "@types/node": ^18.18.4 magic-string: ^0.30.0 typescript: ~4.9.3 languageName: unknown @@ -7122,7 +7122,7 @@ __metadata: "@storybook/global": ^5.0.0 "@storybook/html": "workspace:*" "@storybook/preset-html-webpack": "workspace:*" - "@types/node": ^16.0.0 + "@types/node": ^18.18.4 typescript: ~4.9.3 peerDependencies: "@babel/core": "*" @@ -7317,7 +7317,7 @@ __metadata: "@types/babel__core": ^7 "@types/babel__plugin-transform-runtime": ^7 "@types/babel__preset-env": ^7 - "@types/node": ^16.0.0 + "@types/node": ^18.18.4 css-loader: ^6.7.3 find-up: ^5.0.0 fs-extra: ^11.1.0 @@ -7387,7 +7387,7 @@ __metadata: "@preact/preset-vite": ^2.0.0 "@storybook/builder-vite": "workspace:*" "@storybook/preact": "workspace:*" - "@types/node": ^16.0.0 + "@types/node": ^18.18.4 typescript: ~4.9.3 vite: ^4.0.0 peerDependencies: @@ -7404,7 +7404,7 @@ __metadata: "@storybook/core-common": "workspace:*" "@storybook/preact": "workspace:*" "@storybook/preset-preact-webpack": "workspace:*" - "@types/node": ^16.0.0 + "@types/node": ^18.18.4 preact: ^10.5.13 typescript: ~4.9.3 peerDependencies: @@ -7440,7 +7440,7 @@ __metadata: "@storybook/react-docgen-typescript-plugin": 1.0.6--canary.9.0c3f3b7.0 "@storybook/types": "workspace:*" "@types/babel__core": ^7.1.7 - "@types/node": ^16.0.0 + "@types/node": ^18.18.4 babel-plugin-react-docgen: ^4.1.0 pnp-webpack-plugin: ^1.7.0 semver: ^7.3.5 @@ -7456,7 +7456,7 @@ __metadata: resolution: "@storybook/preset-html-webpack@workspace:presets/html-webpack" dependencies: "@storybook/core-webpack": "workspace:*" - "@types/node": ^16.0.0 + "@types/node": ^18.18.4 html-loader: ^3.1.0 typescript: ~4.9.3 webpack: 5 @@ -7472,7 +7472,7 @@ __metadata: "@babel/plugin-transform-react-jsx": ^7.22.5 "@babel/preset-typescript": ^7.22.5 "@storybook/core-webpack": "workspace:*" - "@types/node": ^16.0.0 + "@types/node": ^18.18.4 preact: ^10.5.13 typescript: ~4.9.3 peerDependencies: @@ -7493,7 +7493,7 @@ __metadata: "@storybook/node-logger": "workspace:*" "@storybook/react": "workspace:*" "@storybook/react-docgen-typescript-plugin": 1.0.6--canary.9.0c3f3b7.0 - "@types/node": ^16.0.0 + "@types/node": ^18.18.4 "@types/semver": ^7.3.4 babel-plugin-add-react-displayname: ^0.0.5 babel-plugin-react-docgen: ^4.2.1 @@ -7522,7 +7522,7 @@ __metadata: "@storybook/core-webpack": "workspace:*" "@storybook/global": ^5.0.0 "@storybook/server": "workspace:*" - "@types/node": ^16.0.0 + "@types/node": ^18.18.4 fs-extra: ^11.1.0 jest-specific-snapshot: ^8.0.0 safe-identifier: ^0.4.1 @@ -7557,7 +7557,7 @@ __metadata: dependencies: "@storybook/core-webpack": "workspace:*" "@storybook/docs-tools": "workspace:*" - "@types/node": ^16.0.0 + "@types/node": ^18.18.4 ts-loader: ^9.2.8 typescript: ~4.9.3 vue: ^2.6.12 @@ -7582,7 +7582,7 @@ __metadata: dependencies: "@storybook/core-webpack": "workspace:*" "@storybook/docs-tools": "workspace:*" - "@types/node": ^16.0.0 + "@types/node": ^18.18.4 "@vue/compiler-sfc": ^3.2.33 ts-loader: ^9.2.8 typescript: ~4.9.3 @@ -7607,7 +7607,7 @@ __metadata: "@babel/plugin-syntax-import-meta": ^7.10.4 "@babel/preset-env": ^7.22.9 "@storybook/core-webpack": "workspace:*" - "@types/node": ^16.0.0 + "@types/node": ^18.18.4 babel-loader: ^7.0.0 || ^8.0.0 || ^9.0.0 babel-plugin-bundled-import-meta: ^0.3.1 lit: 2.3.1 @@ -7704,7 +7704,7 @@ __metadata: "@rollup/pluginutils": ^5.0.2 "@storybook/builder-vite": "workspace:*" "@storybook/react": "workspace:*" - "@types/node": ^16.0.0 + "@types/node": ^18.18.4 "@vitejs/plugin-react": ^3.0.1 magic-string: ^0.30.0 react-docgen: ^6.0.2 @@ -7724,7 +7724,7 @@ __metadata: "@storybook/builder-webpack5": "workspace:*" "@storybook/preset-react-webpack": "workspace:*" "@storybook/react": "workspace:*" - "@types/node": ^16.0.0 + "@types/node": ^18.18.4 jest-specific-snapshot: ^8.0.0 peerDependencies: "@babel/core": ^7.22.0 @@ -7753,7 +7753,7 @@ __metadata: "@storybook/types": "workspace:*" "@types/escodegen": ^0.0.6 "@types/estree": ^0.0.51 - "@types/node": ^16.0.0 + "@types/node": ^18.18.4 "@types/util-deprecate": ^1.0.0 acorn: ^7.4.1 acorn-jsx: ^5.3.1 @@ -7896,7 +7896,7 @@ __metadata: "@types/express": ^4.17.11 "@types/fs-extra": ^11.0.1 "@types/lodash": ^4.14.167 - "@types/node": ^16.0.0 + "@types/node": ^18.18.4 "@types/react": ^16.14.34 "@types/react-dom": ^16.9.14 "@types/semver": ^7.3.4 @@ -7998,7 +7998,7 @@ __metadata: "@storybook/core-common": "workspace:*" "@storybook/preset-server-webpack": "workspace:*" "@storybook/server": "workspace:*" - "@types/node": ^16.0.0 + "@types/node": ^18.18.4 typescript: ~4.9.3 peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 @@ -8058,7 +8058,7 @@ __metadata: "@storybook/node-logger": "workspace:*" "@storybook/svelte": "workspace:*" "@sveltejs/vite-plugin-svelte": ^2.4.2 - "@types/node": ^16.0.0 + "@types/node": ^18.18.4 magic-string: ^0.30.0 svelte: ^4.0.0 sveltedoc-parser: ^4.2.1 @@ -8120,7 +8120,7 @@ __metadata: "@storybook/builder-vite": "workspace:*" "@storybook/svelte": "workspace:*" "@storybook/svelte-vite": "workspace:*" - "@types/node": ^16.0.0 + "@types/node": ^18.18.4 typescript: ^4.9.3 vite: ^4.0.0 peerDependencies: @@ -8185,7 +8185,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/global": ^5.0.0 "@types/fs-extra": ^11.0.1 - "@types/node": ^16.0.0 + "@types/node": ^18.18.4 deep-object-diff: ^1.1.0 fs-extra: ^11.1.0 memoizerific: ^1.11.3 @@ -8207,7 +8207,7 @@ __metadata: "@types/babel__core": ^7.0.0 "@types/express": ^4.7.0 "@types/fs-extra": ^11.0.1 - "@types/node": ^16.0.0 + "@types/node": ^18.18.4 file-system-cache: 2.3.0 typescript: ~4.9.3 languageName: unknown @@ -8242,7 +8242,7 @@ __metadata: "@storybook/core-common": "workspace:*" "@storybook/preset-vue-webpack": "workspace:*" "@storybook/vue": "workspace:*" - "@types/node": ^16.0.0 + "@types/node": ^18.18.4 typescript: ~4.9.3 vue: ^2.6.12 vue-loader: ^15.7.0 @@ -8266,7 +8266,7 @@ __metadata: "@storybook/builder-vite": "workspace:*" "@storybook/core-server": "workspace:*" "@storybook/vue3": "workspace:*" - "@types/node": ^16.0.0 + "@types/node": ^18.18.4 "@vitejs/plugin-vue": ^4.0.0 magic-string: ^0.30.0 typescript: ~4.9.3 @@ -8287,7 +8287,7 @@ __metadata: "@storybook/core-common": "workspace:*" "@storybook/preset-vue3-webpack": "workspace:*" "@storybook/vue3": "workspace:*" - "@types/node": ^16.0.0 + "@types/node": ^18.18.4 "@vue/compiler-sfc": 3.0.0 typescript: ~4.9.3 vue: 3.0.0 @@ -8361,7 +8361,7 @@ __metadata: "@storybook/core-server": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/web-components": "workspace:*" - "@types/node": ^16.0.0 + "@types/node": ^18.18.4 magic-string: ^0.30.0 typescript: ~4.9.3 peerDependencies: @@ -8379,7 +8379,7 @@ __metadata: "@storybook/core-common": "workspace:*" "@storybook/preset-web-components-webpack": "workspace:*" "@storybook/web-components": "workspace:*" - "@types/node": ^16.0.0 + "@types/node": ^18.18.4 lit: 2.3.1 typescript: ~4.9.3 peerDependencies: @@ -8401,7 +8401,7 @@ __metadata: "@storybook/preview-api": "workspace:*" "@storybook/types": "workspace:*" "@types/cross-spawn": ^6.0.2 - "@types/node": ^16.0.0 + "@types/node": ^18.18.4 cross-spawn: ^7.0.3 lit: 2.3.1 tiny-invariant: ^1.3.1 @@ -9501,10 +9501,10 @@ __metadata: languageName: node linkType: hard -"@types/node@npm:^16.0.0": - version: 16.18.57 - resolution: "@types/node@npm:16.18.57" - checksum: 191cfb12fde8c882f1d982a07302f7b87cda7b93ec227b0607f908f3b3b11c5ff96bbed613f370818ea60a8a98140962b193324bdadff679bd5ca75d04407e60 +"@types/node@npm:^18.18.4": + version: 18.18.4 + resolution: "@types/node@npm:18.18.4" + checksum: 17891f8b8fd107813eaea0dce58d2008173f3c90df4f5998da3d01d6b225e9908922156ac83240b0230d3813f1a29b5f7e065a2aa993285af062e3a3779f88dd languageName: node linkType: hard diff --git a/scripts/package.json b/scripts/package.json index f220b8f88742..806bcf50640b 100644 --- a/scripts/package.json +++ b/scripts/package.json @@ -93,7 +93,7 @@ "@types/fs-extra": "^11.0.1", "@types/http-server": "^0.12.1", "@types/lodash": "^4", - "@types/node": "^16.0.0", + "@types/node": "^18.18.4", "@types/node-fetch": "^2.5.7", "@types/prettier": "^2", "@types/pretty-hrtime": "^1.0.0", diff --git a/scripts/yarn.lock b/scripts/yarn.lock index f9d17fe543a8..c4b44eed9971 100644 --- a/scripts/yarn.lock +++ b/scripts/yarn.lock @@ -2970,7 +2970,7 @@ __metadata: "@types/fs-extra": ^11.0.1 "@types/http-server": ^0.12.1 "@types/lodash": ^4 - "@types/node": ^16.0.0 + "@types/node": ^18.18.4 "@types/node-fetch": ^2.5.7 "@types/prettier": ^2 "@types/pretty-hrtime": ^1.0.0 @@ -3711,7 +3711,7 @@ __metadata: languageName: node linkType: hard -"@types/node@npm:*, @types/node@npm:>= 8, @types/node@npm:^16.0.0": +"@types/node@npm:*, @types/node@npm:>= 8": version: 16.18.50 resolution: "@types/node@npm:16.18.50" checksum: 4fc76918cc4e09d6cf087b385a1e2283580b1a88518f309764365cbdbdc28cdf48a77a5615ac4ce28dccee078b3da79442a032cc8aa312406943754144938cdb @@ -3725,6 +3725,13 @@ __metadata: languageName: node linkType: hard +"@types/node@npm:^18.18.4": + version: 18.18.4 + resolution: "@types/node@npm:18.18.4" + checksum: 17891f8b8fd107813eaea0dce58d2008173f3c90df4f5998da3d01d6b225e9908922156ac83240b0230d3813f1a29b5f7e065a2aa993285af062e3a3779f88dd + languageName: node + linkType: hard + "@types/normalize-package-data@npm:^2.4.0": version: 2.4.1 resolution: "@types/normalize-package-data@npm:2.4.1" From b078e37e6b3f8a02cdf2a33139ae5195b8ea0e28 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 10 Oct 2023 15:37:21 +0200 Subject: [PATCH 26/38] Apply suggestions from code review --- .github/workflows/generate-sandboxes-main.yml | 2 +- .github/workflows/generate-sandboxes-next.yml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/generate-sandboxes-main.yml b/.github/workflows/generate-sandboxes-main.yml index a99b2288cf0c..47205b3dbe25 100644 --- a/.github/workflows/generate-sandboxes-main.yml +++ b/.github/workflows/generate-sandboxes-main.yml @@ -21,7 +21,7 @@ jobs: steps: - uses: actions/setup-node@v3 with: - node-version-file: '.nvmrc' + node-version: 18 - uses: actions/checkout@v3 with: ref: main diff --git a/.github/workflows/generate-sandboxes-next.yml b/.github/workflows/generate-sandboxes-next.yml index 91515e0862e9..6eece02f06bd 100644 --- a/.github/workflows/generate-sandboxes-next.yml +++ b/.github/workflows/generate-sandboxes-next.yml @@ -21,7 +21,7 @@ jobs: steps: - uses: actions/setup-node@v3 with: - node-version-file: '.nvmrc' + node-version: 18 - uses: actions/checkout@v3 with: ref: next From edd0f61eb9e0d96c55b4bc1c52b7525cb7a7957e Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Tue, 10 Oct 2023 16:19:24 +0200 Subject: [PATCH 27/38] Replace setting node version to nvmrc --- .github/workflows/generate-sandboxes-main.yml | 2 +- .github/workflows/generate-sandboxes-next.yml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/generate-sandboxes-main.yml b/.github/workflows/generate-sandboxes-main.yml index 47205b3dbe25..a99b2288cf0c 100644 --- a/.github/workflows/generate-sandboxes-main.yml +++ b/.github/workflows/generate-sandboxes-main.yml @@ -21,7 +21,7 @@ jobs: steps: - uses: actions/setup-node@v3 with: - node-version: 18 + node-version-file: '.nvmrc' - uses: actions/checkout@v3 with: ref: main diff --git a/.github/workflows/generate-sandboxes-next.yml b/.github/workflows/generate-sandboxes-next.yml index 6eece02f06bd..91515e0862e9 100644 --- a/.github/workflows/generate-sandboxes-next.yml +++ b/.github/workflows/generate-sandboxes-next.yml @@ -21,7 +21,7 @@ jobs: steps: - uses: actions/setup-node@v3 with: - node-version: 18 + node-version-file: '.nvmrc' - uses: actions/checkout@v3 with: ref: next From dc9a7748d0e7c1830ed922a09da9d00491df17b4 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Tue, 10 Oct 2023 16:21:59 +0200 Subject: [PATCH 28/38] Increase node version in scripts/.babelrc --- scripts/.babelrc.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/.babelrc.js b/scripts/.babelrc.js index 508d8180dc10..31016fd42625 100644 --- a/scripts/.babelrc.js +++ b/scripts/.babelrc.js @@ -9,7 +9,7 @@ module.exports = { shippedProposals: true, useBuiltIns: 'usage', corejs: '3', - targets: { node: '16' }, + targets: { node: '18' }, }, ], ], From 9e1ec616ec0ab2a4d4e1e9d3b0613bb3fe0d3790 Mon Sep 17 00:00:00 2001 From: Nate Houk Date: Tue, 10 Oct 2023 16:40:55 +0200 Subject: [PATCH 29/38] Update chromatic-github-action.js.mdx --- docs/snippets/common/chromatic-github-action.js.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/snippets/common/chromatic-github-action.js.mdx b/docs/snippets/common/chromatic-github-action.js.mdx index c026ef70970b..8b1c055636a9 100644 --- a/docs/snippets/common/chromatic-github-action.js.mdx +++ b/docs/snippets/common/chromatic-github-action.js.mdx @@ -21,6 +21,7 @@ jobs: with: node-version: 18 cache: 'yarn' + - run: yarn #👇 Adds Chromatic as a step in the workflow - uses: chromaui/action@v1 # Options required for Chromatic's GitHub Action From 3146415aaf9dc078cd43d0e40e77e696fa67b2e4 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 11 Oct 2023 09:17:18 +0200 Subject: [PATCH 30/38] Add argsToTemplate helper function --- .../angular/src/client/argsToTemplate.test.ts | 90 +++++++++++++++++++ .../angular/src/client/argsToTemplate.ts | 71 +++++++++++++++ code/frameworks/angular/src/client/index.ts | 1 + 3 files changed, 162 insertions(+) create mode 100644 code/frameworks/angular/src/client/argsToTemplate.test.ts create mode 100644 code/frameworks/angular/src/client/argsToTemplate.ts diff --git a/code/frameworks/angular/src/client/argsToTemplate.test.ts b/code/frameworks/angular/src/client/argsToTemplate.test.ts new file mode 100644 index 000000000000..213d34188088 --- /dev/null +++ b/code/frameworks/angular/src/client/argsToTemplate.test.ts @@ -0,0 +1,90 @@ +import { argsToTemplate, ArgsToTemplateOptions } from './argsToTemplate'; // adjust path + +describe('argsToTemplate', () => { + it('should correctly convert args to template string and exclude undefined values', () => { + const args: Record = { + prop1: 'value1', + prop2: undefined, + prop3: 'value3', + }; + const options: ArgsToTemplateOptions = {}; + const result = argsToTemplate(args, options); + expect(result).toBe('[prop1]="prop1" [prop3]="prop3"'); + }); + + it('should include properties from include option', () => { + const args = { + prop1: 'value1', + prop2: 'value2', + prop3: 'value3', + }; + const options: ArgsToTemplateOptions = { + include: ['prop1', 'prop3'], + }; + const result = argsToTemplate(args, options); + expect(result).toBe('[prop1]="prop1" [prop3]="prop3"'); + }); + + it('should include non-undefined properties from include option', () => { + const args: Record = { + prop1: 'value1', + prop2: 'value2', + prop3: undefined, + }; + const options: ArgsToTemplateOptions = { + include: ['prop1', 'prop3'], + }; + const result = argsToTemplate(args, options); + expect(result).toBe('[prop1]="prop1"'); + }); + + it('should exclude properties from exclude option', () => { + const args = { + prop1: 'value1', + prop2: 'value2', + prop3: 'value3', + }; + const options: ArgsToTemplateOptions = { + exclude: ['prop2'], + }; + const result = argsToTemplate(args, options); + expect(result).toBe('[prop1]="prop1" [prop3]="prop3"'); + }); + + it('should exclude properties from exclude option and undefined properties', () => { + const args: Record = { + prop1: 'value1', + prop2: 'value2', + prop3: undefined, + }; + const options: ArgsToTemplateOptions = { + exclude: ['prop2'], + }; + const result = argsToTemplate(args, options); + expect(result).toBe('[prop1]="prop1"'); + }); + + it('should prioritize include over exclude when both options are given', () => { + const args = { + prop1: 'value1', + prop2: 'value2', + prop3: 'value3', + }; + const options: ArgsToTemplateOptions = { + include: ['prop1', 'prop2'], + exclude: ['prop2', 'prop3'], + }; + const result = argsToTemplate(args, options); + expect(result).toBe('[prop1]="prop1" [prop2]="prop2"'); + }); + + it('should work when neither include nor exclude options are given', () => { + const args = { + prop1: 'value1', + prop2: 'value2', + }; + const options: ArgsToTemplateOptions = {}; + const result = argsToTemplate(args, options); + expect(result).toBe('[prop1]="prop1" [prop2]="prop2"'); + }); +}); diff --git a/code/frameworks/angular/src/client/argsToTemplate.ts b/code/frameworks/angular/src/client/argsToTemplate.ts new file mode 100644 index 000000000000..b00a6987942b --- /dev/null +++ b/code/frameworks/angular/src/client/argsToTemplate.ts @@ -0,0 +1,71 @@ +/** + * Options for controlling the behavior of the argsToTemplate function. + * + * @template T The type of the keys in the target object. + */ +export interface ArgsToTemplateOptions { + /** + * An array of keys to specifically include in the output. + * If provided, only the keys from this array will be included in the output, + * irrespective of the `exclude` option. Undefined values will still be excluded from the output. + */ + include?: Array; + /** + * An array of keys to specifically exclude from the output. + * If provided, these keys will be omitted from the output. This option is + * ignored if the `include` option is also provided + */ + exclude?: Array; +} + +/** + * Converts an object of arguments to a string of property bindings and excludes undefined values. + * Why? Because Angular treats undefined values in property bindings as an actual value + * and does not apply the default value of the property as soon as the binding is set. + * This feels counter-intuitive and is a common source of bugs in stories. + * @example + * ```ts + * // component.ts + *ㅤ@Component({ selector: 'example' }) + * export class ExampleComponent { + * ㅤ@Input() input1: string = 'Default Input1'; + * ㅤ@Input() input2: string = 'Default Input2'; + * } + * + * // component.stories.ts + * import { argsToTemplate } from '@storybook/angular'; + * export const Input1: Story = { + * render: (args) => ({ + * props: args, + * // Problem1: This will set input2 to undefined and the internal default value will not be used. + * // Problem2: The default value of input2 will be used, but it is not overridable by the user via controls. + * template: ``, + * }), + * args: { + * // In this Story, we want to set the input1 property, and the internal default property of input2 should be used. + * input1: 'Input 1', + * }, + *}; + * ``` + */ +export function argsToTemplate>( + args: A, + options: ArgsToTemplateOptions = {} +) { + return Object.entries(args) + .flatMap(([key, value]) => { + if (value === undefined) return []; + + if (options.include) { + if (options.include.includes(key)) { + return [`[${key}]="${key}"`]; + } + return []; + } + + if (options.exclude?.includes(key)) return []; + + return [`[${key}]="${key}"`]; + }) + .join(' '); +} diff --git a/code/frameworks/angular/src/client/index.ts b/code/frameworks/angular/src/client/index.ts index bfc209efb4d4..2377678bda2e 100644 --- a/code/frameworks/angular/src/client/index.ts +++ b/code/frameworks/angular/src/client/index.ts @@ -10,6 +10,7 @@ export * from './public-types'; export type { StoryFnAngularReturnType as IStory } from './types'; export { moduleMetadata, componentWrapperDecorator, applicationConfig } from './decorators'; +export { argsToTemplate } from './argsToTemplate'; // optimization: stop HMR propagation in webpack if (typeof module !== 'undefined') module?.hot?.decline(); From c769e4b5daff0c2184424f42594195bfc605bae2 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 11 Oct 2023 09:18:13 +0200 Subject: [PATCH 31/38] Rewrite Angular Stories to CSF 3 --- .../argTypes/doc-button/doc-button.stories.ts | 35 +++-- .../doc-directive/doc-directive.stories.ts | 21 +-- .../doc-injectable/doc-injectable.stories.ts | 21 +-- .../argTypes/doc-pipe/doc-pipe.stories.ts | 21 +-- .../custom-cva-component.stories.ts | 23 ++-- .../attribute-selectors.component.stories.ts | 9 +- .../enums.component.stories.ts | 29 ++-- .../base-button.stories.ts | 11 +- .../icon-button.stories.ts | 13 +- .../ng-content-about-parent.stories.ts | 36 ++--- .../ng-content-simple.stories.ts | 32 +++-- .../component-with-on-destroy.stories.ts | 8 +- .../component-with-on-push/on-push.stories.ts | 18 +-- .../custom-pipes.stories.ts | 37 ++--- .../di.component.stories.ts | 36 ++--- .../styled.component.stories.ts | 11 +- ...ut-selector-ng-component-outlet.stories.ts | 45 +++--- ...ut-selector-ng-factory-resolver.stories.ts | 71 ---------- .../without-selector.stories.ts | 34 +++-- .../ng-module/import-module-chip.stories.ts | 24 ++-- .../import-module-for-root.stories.ts | 42 +++--- .../basics/ng-module/import-module.stories.ts | 43 +++--- .../decorators.stories.ts | 129 ++++++++++-------- .../parameters/bootstrap-options.stories.ts | 12 +- .../app-initializer-use-factory.stories.ts | 6 +- .../issues/12009-unknown-component.stories.ts | 17 +-- 26 files changed, 408 insertions(+), 376 deletions(-) delete mode 100644 code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-factory-resolver.stories.ts diff --git a/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.stories.ts b/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.stories.ts index d23f3896359f..11dc4d7cd32d 100644 --- a/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.stories.ts +++ b/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.stories.ts @@ -1,24 +1,29 @@ -import { Args } from '@storybook/angular'; +import { Meta, StoryObj, argsToTemplate } from '@storybook/angular'; import { DocButtonComponent } from './doc-button.component'; -export default { +const meta: Meta> = { component: DocButtonComponent, }; -export const Basic = (args: Args) => ({ - props: args, -}); -Basic.args = { label: 'Args test', isDisabled: false }; -Basic.ArgTypes = { - theDefaultValue: { - table: { - defaultValue: { summary: 'Basic default value' }, +export default meta; + +type Story = StoryObj>; + +export const Basic: Story = { + args: { label: 'Args test', isDisabled: false }, + argTypes: { + theDefaultValue: { + table: { + defaultValue: { summary: 'Basic default value' }, + }, }, }, }; -export const WithTemplate = (args: Args) => ({ - props: args, - template: '', -}); -WithTemplate.args = { label: 'Template test', appearance: 'primary' }; +export const WithTemplate: Story = { + args: { label: 'Template test', appearance: 'primary' }, + render: (args) => ({ + props: args, + template: ``, + }), +}; diff --git a/code/frameworks/angular/template/stories/argTypes/doc-directive/doc-directive.stories.ts b/code/frameworks/angular/template/stories/argTypes/doc-directive/doc-directive.stories.ts index b734b93bf40d..e949d8e88252 100644 --- a/code/frameworks/angular/template/stories/argTypes/doc-directive/doc-directive.stories.ts +++ b/code/frameworks/angular/template/stories/argTypes/doc-directive/doc-directive.stories.ts @@ -1,14 +1,19 @@ +import { Meta, StoryObj } from '@storybook/angular'; import { DocDirective } from './doc-directive.directive'; -export default { +const meta: Meta = { component: DocDirective, }; -const modules = { - declarations: [DocDirective], -}; +export default meta; + +type Story = StoryObj; -export const Basic = () => ({ - moduleMetadata: modules, - template: '

DocDirective

', -}); +export const Basic: Story = { + render: () => ({ + moduleMetadata: { + declarations: [DocDirective], + }, + template: '

DocDirective

', + }), +}; diff --git a/code/frameworks/angular/template/stories/argTypes/doc-injectable/doc-injectable.stories.ts b/code/frameworks/angular/template/stories/argTypes/doc-injectable/doc-injectable.stories.ts index eca5e10fb11d..7741bca9ba88 100644 --- a/code/frameworks/angular/template/stories/argTypes/doc-injectable/doc-injectable.stories.ts +++ b/code/frameworks/angular/template/stories/argTypes/doc-injectable/doc-injectable.stories.ts @@ -1,14 +1,19 @@ +import { Meta, StoryObj } from '@storybook/angular'; import { DocInjectableService } from './doc-injectable.service'; -export default { +const meta: Meta = { component: DocInjectableService, }; -const modules = { - provider: [DocInjectableService], -}; +export default meta; + +type Story = StoryObj; -export const Basic = () => ({ - moduleMetadata: modules, - template: '

DocInjectable

', -}); +export const Basic: Story = { + render: () => ({ + moduleMetadata: { + providers: [DocInjectableService], + }, + template: '

DocInjectable

', + }), +}; diff --git a/code/frameworks/angular/template/stories/argTypes/doc-pipe/doc-pipe.stories.ts b/code/frameworks/angular/template/stories/argTypes/doc-pipe/doc-pipe.stories.ts index 6ab616f16ee2..018ab04a9951 100644 --- a/code/frameworks/angular/template/stories/argTypes/doc-pipe/doc-pipe.stories.ts +++ b/code/frameworks/angular/template/stories/argTypes/doc-pipe/doc-pipe.stories.ts @@ -1,14 +1,19 @@ +import { Meta, StoryObj } from '@storybook/angular'; import { DocPipe } from './doc-pipe.pipe'; -export default { +const meta: Meta = { component: DocPipe, }; -const modules = { - declarations: [DocPipe], -}; +export default meta; + +type Story = StoryObj; -export const Basic = () => ({ - moduleMetadata: modules, - template: `

{{ 'DocPipe' | docPipe }}

`, -}); +export const Basic: Story = { + render: () => ({ + moduleMetadata: { + declarations: [DocPipe], + }, + template: `

{{ 'DocPipe' | docPipe }}

`, + }), +}; diff --git a/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts b/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts index 228e2d7b9045..c5fb49653135 100644 --- a/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts +++ b/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts @@ -1,8 +1,8 @@ import { FormsModule } from '@angular/forms'; -import { Meta, StoryFn, moduleMetadata } from '@storybook/angular'; +import { Meta, StoryFn, StoryObj, moduleMetadata } from '@storybook/angular'; import { CustomCvaComponent } from './custom-cva.component'; -export default { +const meta: Meta = { // title: 'Basics / Angular forms / ControlValueAccessor', component: CustomCvaComponent, decorators: [ @@ -17,11 +17,16 @@ export default { ], } as Meta; -export const SimpleInput: StoryFn = () => ({ - props: { - ngModel: 'Type anything', - ngModelChange: () => {}, - }, -}); +export default meta; -SimpleInput.storyName = 'Simple input'; +type Story = StoryObj; + +export const SimpleInput: Story = { + storyName: 'Simple input', + render: () => ({ + props: { + ngModel: 'Type anything', + ngModelChange: () => {}, + }, + }), +}; diff --git a/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/attribute-selectors.component.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/attribute-selectors.component.stories.ts index d935de5215d7..73894b83b34a 100644 --- a/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/attribute-selectors.component.stories.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/attribute-selectors.component.stories.ts @@ -1,8 +1,13 @@ +import { Meta, StoryObj } from '@storybook/angular'; import { AttributeSelectorComponent } from './attribute-selector.component'; -export default { +const meta: Meta = { // title: 'Basics / Component / With Complex Selectors', component: AttributeSelectorComponent, }; -export const AttributeSelectors = {}; +export default meta; + +type Story = StoryObj; + +export const AttributeSelectors: Story = {}; diff --git a/code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.stories.ts index 647ca86d8d67..b79bd371baf3 100644 --- a/code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.stories.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.stories.ts @@ -1,4 +1,4 @@ -import { Meta, StoryFn } from '@storybook/angular'; +import { Meta, StoryObj } from '@storybook/angular'; import { EnumsComponent, EnumNumeric, @@ -6,19 +6,22 @@ import { EnumStringValues, } from './enums.component'; -export default { +const meta: Meta = { // title: 'Basics / Component / With Enum Types', component: EnumsComponent, -} as Meta; +}; + +export default meta; + +type Story = StoryObj; -export const Basic: StoryFn = (args) => ({ - props: args, -}); -Basic.args = { - unionType: 'union a', - aliasedUnionType: 'Type Alias 1', - enumNumeric: EnumNumeric.FIRST, - enumNumericInitial: EnumNumericInitial.UNO, - enumStrings: EnumStringValues.PRIMARY, - enumAlias: EnumNumeric.FIRST, +export const Basic: Story = { + args: { + unionType: 'Union A', + aliasedUnionType: 'Type Alias 1', + enumNumeric: EnumNumeric.FIRST, + enumNumericInitial: EnumNumericInitial.UNO, + enumStrings: EnumStringValues.PRIMARY, + enumAlias: EnumNumeric.FIRST, + }, }; diff --git a/code/frameworks/angular/template/stories/basics/component-with-inheritance/base-button.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-inheritance/base-button.stories.ts index a206115f5de7..271e6a3fcc9d 100644 --- a/code/frameworks/angular/template/stories/basics/component-with-inheritance/base-button.stories.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-inheritance/base-button.stories.ts @@ -1,12 +1,15 @@ +import { Meta, StoryObj } from '@storybook/angular'; import { BaseButtonComponent } from './base-button.component'; -export default { +const meta: Meta = { // title: 'Basics / Component / With Inheritance', component: BaseButtonComponent, }; -export const BaseButton = () => ({ - props: { +export default meta; + +export const BaseButton: StoryObj = { + args: { label: 'this is label', }, -}); +}; diff --git a/code/frameworks/angular/template/stories/basics/component-with-inheritance/icon-button.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-inheritance/icon-button.stories.ts index baefe65c4f58..bb5c5fb02bcb 100644 --- a/code/frameworks/angular/template/stories/basics/component-with-inheritance/icon-button.stories.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-inheritance/icon-button.stories.ts @@ -1,13 +1,18 @@ +import { Meta, StoryObj } from '@storybook/angular'; import { IconButtonComponent } from './icon-button.component'; -export default { +const meta: Meta = { // title: 'Basics / Component / With Inheritance', component: IconButtonComponent, }; -export const IconButton = () => ({ - props: { +export default meta; + +type Story = StoryObj; + +export const IconButton: Story = { + args: { icon: 'this is icon', label: 'this is label', }, -}); +}; diff --git a/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts index 0512582aca6e..ae936092f96b 100644 --- a/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts @@ -1,5 +1,5 @@ import { Component, Input } from '@angular/core'; -import { componentWrapperDecorator, Meta, StoryFn } from '@storybook/angular'; +import { componentWrapperDecorator, Meta, StoryFn, StoryObj } from '@storybook/angular'; @Component({ selector: 'sb-button', @@ -17,7 +17,7 @@ class SbButtonComponent { color = '#5eadf5'; } -export default { +const meta: Meta = { // title: 'Basics / Component / With ng-content / Button with different contents', // Implicitly declares the component to Angular // This will be the component described by the addon docs @@ -35,24 +35,24 @@ export default { }, } as Meta; +export default meta; + +type Story = StoryObj; + // By default storybook uses the default export component if no template or component is defined in the story // So Storybook nests the component twice because it is first added by the componentWrapperDecorator. -export const AlwaysDefineTemplateOrComponent: StoryFn = () => ({}); +export const AlwaysDefineTemplateOrComponent: Story = {}; -export const EmptyButton: StoryFn = () => ({ - template: '', -}); - -export const WithDynamicContentAndArgs: StoryFn = (args) => ({ - template: `${args['content']}`, -}); -WithDynamicContentAndArgs.argTypes = { - content: { control: 'text' }, +export const EmptyButton: Story = { + render: () => ({ + template: '', + }), }; -WithDynamicContentAndArgs.args = { content: 'My button text' }; -export const InH1: StoryFn = () => ({ - template: 'My button in h1', -}); -InH1.decorators = [componentWrapperDecorator((story) => `

${story}

`)]; -InH1.storyName = 'In

'; +export const InH1: Story = { + render: () => ({ + template: 'My button in h1', + }), + decorators: [componentWrapperDecorator((story) => `

${story}

`)], + storyName: 'In

', +}; diff --git a/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-simple.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-simple.stories.ts index 13cc2eb550c5..71b0fe84df38 100644 --- a/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-simple.stories.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-simple.stories.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; -import { Meta, StoryFn } from '@storybook/angular/'; +import { Meta, StoryObj } from '@storybook/angular'; @Component({ selector: 'storybook-with-ng-content', @@ -9,21 +9,29 @@ import { Meta, StoryFn } from '@storybook/angular/'; }) class WithNgContentComponent {} -export default { +const meta: Meta = { // title: 'Basics / Component / With ng-content / Simple', component: WithNgContentComponent, } as Meta; -export const OnlyComponent: StoryFn = () => ({}); +export default meta; -export const Default: StoryFn = () => ({ - template: `

This is rendered in ng-content

`, -}); +type Story = StoryObj; -export const WithDynamicContentAndArgs: StoryFn = (args) => ({ - template: `

${args['content']}

`, -}); -WithDynamicContentAndArgs.argTypes = { - content: { control: 'text' }, +export const OnlyComponent: Story = {}; + +export const Default: Story = { + render: () => ({ + template: `

This is rendered in ng-content

`, + }), +}; + +export const WithDynamicContentAndArgs: Story = { + render: (args) => ({ + template: `

${args['content']}

`, + }), + args: { content: 'Default content' }, + argTypes: { + content: { control: 'text' }, + }, }; -WithDynamicContentAndArgs.args = { content: 'Default content' }; diff --git a/code/frameworks/angular/template/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts index b833424367bb..9ac53d2dde03 100644 --- a/code/frameworks/angular/template/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts @@ -27,7 +27,7 @@ class OnDestroyComponent implements OnInit, OnDestroy { } } -export default { +const meta: Meta = { // title: 'Basics / Component / with ngOnDestroy', component: OnDestroyComponent, parameters: { @@ -37,4 +37,8 @@ export default { }, } as Meta; -export const SimpleComponent: StoryObj = {}; +export default meta; + +type Story = StoryObj; + +export const SimpleComponent: Story = {}; diff --git a/code/frameworks/angular/template/stories/basics/component-with-on-push/on-push.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-on-push/on-push.stories.ts index 6ad452797bc2..5da4366a606f 100644 --- a/code/frameworks/angular/template/stories/basics/component-with-on-push/on-push.stories.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-on-push/on-push.stories.ts @@ -1,7 +1,7 @@ -import { Meta, StoryFn } from '@storybook/angular'; +import { Meta, StoryObj } from '@storybook/angular'; import { OnPushBoxComponent } from './on-push-box.component'; -export default { +const meta: Meta = { // title: 'Basics / Component / With OnPush strategy', component: OnPushBoxComponent, argTypes: { @@ -12,10 +12,12 @@ export default { word: 'The text', bgColor: '#FFF000', }, -} as Meta; +}; -export const ClassSpecifiedComponentWithOnPushAndArgs: StoryFn = (args) => ({ - props: args, -}); -ClassSpecifiedComponentWithOnPushAndArgs.storyName = - 'Class-specified component with OnPush and Args'; +export default meta; + +type Story = StoryObj; + +export const ClassSpecifiedComponentWithOnPushAndArgs: Story = { + storyName: 'Class-specified component with OnPush and Args', +}; diff --git a/code/frameworks/angular/template/stories/basics/component-with-pipe/custom-pipes.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-pipe/custom-pipes.stories.ts index 6c8f9254208f..e9c3037b28ec 100644 --- a/code/frameworks/angular/template/stories/basics/component-with-pipe/custom-pipes.stories.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-pipe/custom-pipes.stories.ts @@ -1,9 +1,9 @@ -import { Meta, StoryFn, moduleMetadata } from '@storybook/angular'; +import { Meta, StoryObj, moduleMetadata } from '@storybook/angular'; import { CustomPipePipe } from './custom.pipe'; import { WithPipeComponent } from './with-pipe.component'; -export default { +const meta: Meta = { // title: 'Basics / Component / With Pipes', component: WithPipeComponent, decorators: [ @@ -11,21 +11,26 @@ export default { declarations: [CustomPipePipe], }), ], -} as Meta; +}; -export const Simple: StoryFn = () => ({ - props: { - field: 'foobar', - }, -}); +export default meta; + +type Story = StoryObj; -export const WithArgsStory: StoryFn = (args) => ({ - props: args, -}); -WithArgsStory.storyName = 'With args'; -WithArgsStory.argTypes = { - field: { control: 'text' }, +export const Simple: Story = { + render: () => ({ + props: { + field: 'foobar', + }, + }), }; -WithArgsStory.args = { - field: 'Foo Bar', + +export const WithArgsStory: Story = { + storyName: 'With args', + argTypes: { + field: { control: 'text' }, + }, + args: { + field: 'Foo Bar', + }, }; diff --git a/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.stories.ts index fea1bc95c15f..2b676f567d23 100644 --- a/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.stories.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.stories.ts @@ -1,26 +1,30 @@ -import { Args } from '@storybook/angular'; +import { Args, Meta, StoryObj } from '@storybook/angular'; import { DiComponent } from './di.component'; -export default { +const meta: Meta = { // title: 'Basics / Component / With Provider', component: DiComponent, }; -export const InputsAndInjectDependencies = () => ({ - props: { - title: 'Component dependencies', - }, -}); +export default meta; -InputsAndInjectDependencies.storyName = 'inputs and inject dependencies'; +type Story = StoryObj; -export const InputsAndInjectDependenciesWithArgs = (args: Args) => ({ - props: args, -}); -InputsAndInjectDependenciesWithArgs.storyName = 'inputs and inject dependencies with args'; -InputsAndInjectDependenciesWithArgs.argTypes = { - title: { control: 'text' }, +export const InputsAndInjectDependencies: Story = { + render: () => ({ + props: { + title: 'Component dependencies', + }, + }), + storyName: 'inputs and inject dependencies', }; -InputsAndInjectDependenciesWithArgs.args = { - title: 'Component dependencies', + +export const InputsAndInjectDependenciesWithArgs: Story = { + storyName: 'inputs and inject dependencies with args', + argTypes: { + title: { control: 'text' }, + }, + args: { + title: 'Component dependencies', + }, }; diff --git a/code/frameworks/angular/template/stories/basics/component-with-style/styled.component.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-style/styled.component.stories.ts index 0818ff28cc6f..32116ba05090 100644 --- a/code/frameworks/angular/template/stories/basics/component-with-style/styled.component.stories.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-style/styled.component.stories.ts @@ -1,10 +1,15 @@ +import { Meta, StoryObj } from '@storybook/angular'; import { StyledComponent } from './styled.component'; -export default { +const meta: Meta = { // title: 'Basics / Component / With StyleUrls', component: StyledComponent, }; -export const ComponentWithStyles = () => ({}); +export default meta; -ComponentWithStyles.storyName = 'Component with styles'; +type Story = StoryObj; + +export const ComponentWithStyles: Story = { + storyName: 'Component with styles', +}; diff --git a/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts b/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts index beff6c157988..5e7cbabee628 100644 --- a/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts +++ b/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts @@ -1,8 +1,8 @@ import { OnInit, Type, Component, Injector, Input } from '@angular/core'; -import { StoryFn, Meta, componentWrapperDecorator, moduleMetadata } from '@storybook/angular'; +import { Meta, componentWrapperDecorator, moduleMetadata, StoryObj } from '@storybook/angular'; import { WithoutSelectorComponent, WITHOUT_SELECTOR_DATA } from './without-selector.component'; -export default { +const meta: Meta = { // title: 'Basics / Component / without selector / Custom wrapper *NgComponentOutlet', component: WithoutSelectorComponent, decorators: [ @@ -12,6 +12,10 @@ export default { ], } as Meta; +export default meta; + +type Story = StoryObj; + // Advanced example with custom *ngComponentOutlet @Component({ @@ -51,23 +55,22 @@ class NgComponentOutletWrapperComponent implements OnInit { // Live changing of args by controls does not work at the moment. When changing args storybook does not fully // reload and therefore does not take into account the change of provider. -export const WithCustomNgComponentOutletWrapper: StoryFn = (args) => ({ - props: args, -}); -WithCustomNgComponentOutletWrapper.storyName = 'Custom wrapper *NgComponentOutlet'; -WithCustomNgComponentOutletWrapper.argTypes = { - name: { control: 'text' }, - color: { control: 'color' }, -}; -WithCustomNgComponentOutletWrapper.args = { name: 'Color', color: 'green' }; -WithCustomNgComponentOutletWrapper.decorators = [ - moduleMetadata({ - declarations: [NgComponentOutletWrapperComponent], - }), - componentWrapperDecorator(NgComponentOutletWrapperComponent, (args) => ({ - name: args.name, +export const WithCustomNgComponentOutletWrapper: Story = { + storyName: 'Custom wrapper *NgComponentOutlet', + argTypes: { + name: { control: 'text' }, + color: { control: 'color' }, + }, + args: { name: 'Color', color: 'green' }, + decorators: [ + moduleMetadata({ + declarations: [NgComponentOutletWrapperComponent], + }), + componentWrapperDecorator(NgComponentOutletWrapperComponent, (args) => ({ + name: args.name, - color: args['color'], - componentOutlet: WithoutSelectorComponent, - })), -]; + color: args['color'], + componentOutlet: WithoutSelectorComponent, + })), + ], +}; diff --git a/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-factory-resolver.stories.ts b/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-factory-resolver.stories.ts deleted file mode 100644 index 5256c9de2894..000000000000 --- a/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-factory-resolver.stories.ts +++ /dev/null @@ -1,71 +0,0 @@ -import { - AfterViewInit, - ComponentFactoryResolver, - Type, - Component, - Input, - ViewChild, - ViewContainerRef, -} from '@angular/core'; -import { StoryFn, Meta, componentWrapperDecorator, moduleMetadata } from '@storybook/angular'; - -import { WithoutSelectorComponent } from './without-selector.component'; - -export default { - // title: 'Basics / Component / without selector / Custom wrapper ComponentFactoryResolver', - component: WithoutSelectorComponent, - decorators: [ - moduleMetadata({ - entryComponents: [WithoutSelectorComponent], - }), - ], -} as Meta; - -// Advanced example with custom ComponentFactoryResolver - -@Component({ selector: 'component-factory-wrapper', template: '' }) -class ComponentFactoryWrapperComponent implements AfterViewInit { - @ViewChild('dynamicInsert', { read: ViewContainerRef }) dynamicInsert: any; - - @Input() - componentOutlet?: Type; - - @Input() - args: any; - - constructor( - private viewContainerRef: ViewContainerRef, - private componentFactoryResolver: ComponentFactoryResolver - ) {} - - ngAfterViewInit() { - const componentFactory = this.componentFactoryResolver.resolveComponentFactory( - this.componentOutlet! - ); - const containerRef = this.viewContainerRef; - containerRef.clear(); - const dynamicComponent = containerRef.createComponent(componentFactory); - Object.assign(dynamicComponent.instance as any, this.args); - } -} - -// Live changing of args by controls does not work at the moment. When changing args storybook does not fully -// reload and therefore does not take into account the change of provider. -export const WithComponentFactoryResolver: StoryFn = (args) => ({ - props: args, -}); -WithComponentFactoryResolver.storyName = 'Custom wrapper ComponentFactoryResolver'; -WithComponentFactoryResolver.argTypes = { - name: { control: 'text' }, - color: { control: 'color' }, -}; -WithComponentFactoryResolver.args = { name: 'Color', color: 'chartreuse' }; -WithComponentFactoryResolver.decorators = [ - moduleMetadata({ - declarations: [ComponentFactoryWrapperComponent], - }), - componentWrapperDecorator(ComponentFactoryWrapperComponent, ({ args }) => ({ - args, - componentOutlet: WithoutSelectorComponent, - })), -]; diff --git a/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector.stories.ts b/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector.stories.ts index dec59310b0c3..a7f635252a69 100644 --- a/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector.stories.ts +++ b/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector.stories.ts @@ -1,7 +1,7 @@ -import { StoryFn, Meta, moduleMetadata } from '@storybook/angular'; +import { StoryObj, Meta, moduleMetadata } from '@storybook/angular'; import { WithoutSelectorComponent, WITHOUT_SELECTOR_DATA } from './without-selector.component'; -export default { +const meta: Meta = { // title: 'Basics / Component / without selector', component: WithoutSelectorComponent, decorators: [ @@ -11,20 +11,26 @@ export default { ], } as Meta; -export const SimpleComponent: StoryFn = () => ({}); +export default meta; + +type Story = StoryObj; + +export const SimpleComponent: Story = {}; // Live changing of args by controls does not work for now. When changing args storybook does not fully // reload and therefore does not take into account the change of provider. -export const WithInjectionTokenAndArgs: StoryFn = (args) => ({ - props: args, - moduleMetadata: { - providers: [ - { provide: WITHOUT_SELECTOR_DATA, useValue: { color: args['color'], name: args['name'] } }, - ], +export const WithInjectionTokenAndArgs: StoryObj = { + render: (args) => ({ + props: args, + moduleMetadata: { + providers: [ + { provide: WITHOUT_SELECTOR_DATA, useValue: { color: args['color'], name: args['name'] } }, + ], + }, + }), + argTypes: { + name: { control: 'text' }, + color: { control: 'color' }, }, -}); -WithInjectionTokenAndArgs.argTypes = { - name: { control: 'text' }, - color: { control: 'color' }, + args: { name: 'Color', color: 'red' }, }; -WithInjectionTokenAndArgs.args = { name: 'Color', color: 'red' }; diff --git a/code/frameworks/angular/template/stories/basics/ng-module/import-module-chip.stories.ts b/code/frameworks/angular/template/stories/basics/ng-module/import-module-chip.stories.ts index 14e163e3b9d8..3c3f58851125 100644 --- a/code/frameworks/angular/template/stories/basics/ng-module/import-module-chip.stories.ts +++ b/code/frameworks/angular/template/stories/basics/ng-module/import-module-chip.stories.ts @@ -1,23 +1,25 @@ -import { StoryFn, Meta, moduleMetadata } from '@storybook/angular'; +import { StoryFn, Meta, moduleMetadata, StoryObj } from '@storybook/angular'; import { ChipsModule } from './angular-src/chips.module'; import { ChipComponent } from './angular-src/chip.component'; -export default { +const meta: Meta = { component: ChipComponent, decorators: [ moduleMetadata({ imports: [ChipsModule], }), ], -} as Meta; +}; -export const Chip: StoryFn = (args) => ({ - props: args, -}); +export default meta; -Chip.args = { - displayText: 'Chip', -}; -Chip.argTypes = { - removeClicked: { action: 'Remove icon clicked' }, +type Story = StoryObj; + +export const Chip: Story = { + args: { + displayText: 'Chip', + }, + argTypes: { + removeClicked: { action: 'Remove icon clicked' }, + }, }; diff --git a/code/frameworks/angular/template/stories/basics/ng-module/import-module-for-root.stories.ts b/code/frameworks/angular/template/stories/basics/ng-module/import-module-for-root.stories.ts index 4777d60ccb5b..f94dd25d1b50 100644 --- a/code/frameworks/angular/template/stories/basics/ng-module/import-module-for-root.stories.ts +++ b/code/frameworks/angular/template/stories/basics/ng-module/import-module-for-root.stories.ts @@ -1,9 +1,9 @@ -import { StoryFn, Meta, moduleMetadata } from '@storybook/angular'; +import { StoryFn, Meta, moduleMetadata, StoryObj } from '@storybook/angular'; import { ChipsModule } from './angular-src/chips.module'; import { ChipsGroupComponent } from './angular-src/chips-group.component'; import { CHIP_COLOR } from './angular-src/chip-color.token'; -export default { +const meta: Meta = { // title: 'Basics / NgModule / forRoot() pattern', component: ChipsGroupComponent, decorators: [ @@ -27,24 +27,26 @@ export default { removeChipClick: { action: 'Remove chip' }, removeAllChipsClick: { action: 'Remove all chips clicked' }, }, -} as Meta; +}; -const Template = (): StoryFn => (args) => ({ - props: args, -}); +export default meta; -export const Base = Template(); -Base.storyName = 'Chips group'; +type Story = StoryObj; -export const WithCustomProvider = Template(); -WithCustomProvider.decorators = [ - moduleMetadata({ - providers: [ - { - provide: CHIP_COLOR, - useValue: 'yellow', - }, - ], - }), -]; -WithCustomProvider.storyName = 'Chips group with overridden provider'; +export const Base = { + storyName: 'Chips group', +}; + +export const WithCustomProvider = { + decorators: [ + moduleMetadata({ + providers: [ + { + provide: CHIP_COLOR, + useValue: 'yellow', + }, + ], + }), + ], + storyName: 'Chips group with overridden provider', +}; diff --git a/code/frameworks/angular/template/stories/basics/ng-module/import-module.stories.ts b/code/frameworks/angular/template/stories/basics/ng-module/import-module.stories.ts index 936f27235df7..83c250fc0856 100644 --- a/code/frameworks/angular/template/stories/basics/ng-module/import-module.stories.ts +++ b/code/frameworks/angular/template/stories/basics/ng-module/import-module.stories.ts @@ -1,8 +1,8 @@ -import { StoryFn, Meta, moduleMetadata } from '@storybook/angular'; +import { StoryFn, Meta, moduleMetadata, StoryObj } from '@storybook/angular'; import { ChipsModule } from './angular-src/chips.module'; import { ChipsGroupComponent } from './angular-src/chips-group.component'; -export default { +const meta: Meta = { // title: 'Basics / NgModule / Module with multiple component', component: ChipsGroupComponent, decorators: [ @@ -10,26 +10,27 @@ export default { imports: [ChipsModule], }), ], -} as Meta; +}; -export const ChipsGroup: StoryFn = (args) => ({ - props: args, -}); +export default meta; -ChipsGroup.args = { - chips: [ - { - id: 1, - text: 'Chip 1', - }, - { - id: 2, - text: 'Chip 2', - }, - ], -}; +type Story = StoryObj; -ChipsGroup.argTypes = { - removeChipClick: { action: 'Remove chip' }, - removeAllChipsClick: { action: 'Remove all chips clicked' }, +export const ChipsGroup: Story = { + args: { + chips: [ + { + id: 1, + text: 'Chip 1', + }, + { + id: 2, + text: 'Chip 2', + }, + ], + }, + argTypes: { + removeChipClick: { action: 'Remove chip' }, + removeAllChipsClick: { action: 'Remove all chips clicked' }, + }, }; diff --git a/code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/decorators.stories.ts b/code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/decorators.stories.ts index 0a69ddb34aba..78fa47cf8c00 100644 --- a/code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/decorators.stories.ts +++ b/code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/decorators.stories.ts @@ -1,10 +1,16 @@ // your-component.stories.ts -import { Args, Meta, Story, componentWrapperDecorator, moduleMetadata } from '@storybook/angular'; +import { + Args, + Meta, + StoryObj, + componentWrapperDecorator, + moduleMetadata, +} from '@storybook/angular'; import ChildComponent from './child.component'; import ParentComponent from './parent.component'; -export default { +const meta: Meta = { // title: 'Core / Decorators / ComponentWrapperDecorator', component: ChildComponent, decorators: [ @@ -14,72 +20,79 @@ export default { ], args: { childText: 'Child text', childPrivateText: 'Child private text' }, argTypes: { onClickChild: { action: 'onClickChild' } }, -} as Meta; +}; -export const WithTemplate = (args: Args) => ({ - template: `Child Template`, - props: { - ...args, - }, -}); +export default meta; -export const WithComponent = (args: Args) => ({ - props: { - ...args, - }, -}); +type Story = StoryObj; -export const WithLegacyComponent = (args: Args) => ({ - component: ChildComponent, - props: { - ...args, - }, -}); +export const WithTemplate: Story = { + render: (args: Args) => ({ + template: `Child Template`, + props: args, + }), +}; -export const WithComponentWrapperDecorator = (args: Args) => ({ - component: ChildComponent, - props: { - ...args, - }, -}); -WithComponentWrapperDecorator.decorators = [ - moduleMetadata({ declarations: [ParentComponent] }), - componentWrapperDecorator(ParentComponent), -]; +export const WithComponent: Story = {}; -export const WithComponentWrapperDecoratorAndProps = (args: Args) => ({ - component: ChildComponent, - props: { - ...args, - }, -}); -WithComponentWrapperDecoratorAndProps.decorators = [ - moduleMetadata({ declarations: [ParentComponent] }), - componentWrapperDecorator(ParentComponent, { - parentText: 'Parent text', - onClickParent: () => { - console.log('onClickParent'); +export const WithLegacyComponent: Story = { + render: (args: Args) => ({ + component: ChildComponent, + props: args, + }), +}; + +export const WithComponentWrapperDecorator: Story = { + render: (args: Args) => ({ + component: ChildComponent, + props: args, + }), + decorators: [ + moduleMetadata({ declarations: [ParentComponent] }), + componentWrapperDecorator(ParentComponent), + ], +}; + +export const WithComponentWrapperDecoratorAndProps: Story = { + render: (args: Args) => ({ + component: ChildComponent, + props: { + ...args, }, }), -]; + decorators: [ + moduleMetadata({ declarations: [ParentComponent] }), + componentWrapperDecorator(ParentComponent, { + parentText: 'Parent text', + onClickParent: () => { + console.log('onClickParent'); + }, + }), + ], +}; -export const WithComponentWrapperDecoratorAndArgs = (args: Args) => ({ - component: ChildComponent, - props: { - ...args, +export const WithComponentWrapperDecoratorAndArgs: StoryObj<{ + parentText: string; + onClickParent: () => void; +}> = { + render: (args: Args) => ({ + component: ChildComponent, + props: { + ...args, + }, + }), + argTypes: { + parentText: { control: { type: 'text' } }, + onClickParent: { action: 'onClickParent' }, }, -}); -WithComponentWrapperDecoratorAndArgs.argTypes = { - parentText: { control: { type: 'text' } }, - onClickParent: { action: 'onClickParent' }, + decorators: [ + moduleMetadata({ declarations: [ParentComponent] }), + componentWrapperDecorator(ParentComponent, ({ args }) => ({ + parentText: args.parentText, + onClickParent: args.onClickParent, + })), + ], }; -WithComponentWrapperDecoratorAndArgs.decorators = [ - moduleMetadata({ declarations: [ParentComponent] }), - componentWrapperDecorator(ParentComponent, ({ args }) => ({ - parentText: args.parentText, - onClickParent: args.onClickParent, - })), -]; export const WithCustomDecorator = (args: Args) => ({ template: `Child Template`, diff --git a/code/frameworks/angular/template/stories/core/parameters/bootstrap-options.stories.ts b/code/frameworks/angular/template/stories/core/parameters/bootstrap-options.stories.ts index d49a6b4ef4f7..527b10a0082f 100644 --- a/code/frameworks/angular/template/stories/core/parameters/bootstrap-options.stories.ts +++ b/code/frameworks/angular/template/stories/core/parameters/bootstrap-options.stories.ts @@ -1,4 +1,4 @@ -import { Meta, StoryFn } from '@storybook/angular'; +import { Meta, StoryObj } from '@storybook/angular'; import { Component } from '@angular/core'; @Component({ @@ -10,9 +10,13 @@ import { Component } from '@angular/core'; }) class ComponentWithWhitespace {} -export default { +const meta: Meta = { // title: 'Core / Parameters / With Bootstrap Options', component: ComponentWithWhitespace, -} as Meta; +}; -export const WithPreserveWhitespaces: StoryFn = (_args) => ({}); +export default meta; + +type Story = StoryObj; + +export const WithPreserveWhitespaces: Story = {}; diff --git a/code/frameworks/angular/template/stories/others/app-initializer-use-factory/app-initializer-use-factory.stories.ts b/code/frameworks/angular/template/stories/others/app-initializer-use-factory/app-initializer-use-factory.stories.ts index 2dc73b7ad3a0..32c5d1ebe296 100644 --- a/code/frameworks/angular/template/stories/others/app-initializer-use-factory/app-initializer-use-factory.stories.ts +++ b/code/frameworks/angular/template/stories/others/app-initializer-use-factory/app-initializer-use-factory.stories.ts @@ -1,4 +1,4 @@ -import { moduleMetadata, Meta } from '@storybook/angular'; +import { moduleMetadata, Meta, StoryObj } from '@storybook/angular'; import { APP_INITIALIZER } from '@angular/core'; import { action } from '@storybook/addon-actions'; import Button from '../../button.component'; @@ -27,7 +27,9 @@ const meta: Meta
+ `, + styles: [], + standalone: true, +}) +export class Template { + @Input() label = 'default label'; + + @Input() label2 = 'default label2'; + + @Output() changed = new EventEmitter(); + + inc() { + this.changed.emit('Increase'); + } +} diff --git a/code/frameworks/angular/template/stories/basics/component-with-template/template.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-template/template.stories.ts new file mode 100644 index 000000000000..55639870f262 --- /dev/null +++ b/code/frameworks/angular/template/stories/basics/component-with-template/template.stories.ts @@ -0,0 +1,24 @@ +import { Meta, StoryObj, argsToTemplate } from '@storybook/angular'; +import { Template } from './template.component'; + +const meta: Meta