From 3a68778885663cd0a065dfd24c3df8dc640c41d5 Mon Sep 17 00:00:00 2001 From: storybook-bot <32066757+storybook-bot@users.noreply.github.com> Date: Fri, 3 Nov 2023 17:19:30 +0000 Subject: [PATCH 1/8] Update ./docs/versions/next.json for v7.6.0-alpha.4 --- docs/versions/next.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/versions/next.json b/docs/versions/next.json index 44fc9fe8bae9..c87f8fb0975b 100644 --- a/docs/versions/next.json +++ b/docs/versions/next.json @@ -1 +1 @@ -{"version":"7.6.0-alpha.3","info":{"plain":"- Action: Attach spies on actions across stories when defined in meta - [#24451](https://github.com/storybookjs/storybook/pull/24451), thanks [@kasperpeulen](https://github.com/kasperpeulen)!\n- Addon A11y: Avoid CSP issue - [#24477](https://github.com/storybookjs/storybook/pull/24477), thanks [@Marklb](https://github.com/Marklb)!\n- Addon-themes: Fix globals not being set when using absolute path - [#24596](https://github.com/storybookjs/storybook/pull/24596), thanks [@JReinhold](https://github.com/JReinhold)!\n- CLI: Allow Yarn v4 in `link` command - [#24551](https://github.com/storybookjs/storybook/pull/24551), thanks [@yannbf](https://github.com/yannbf)!\n- Core-Server: Ignore all node_module folders for watchpack - [#24553](https://github.com/storybookjs/storybook/pull/24553), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- Core: Fix pnp support when cache dir is outside working dir - [#24572](https://github.com/storybookjs/storybook/pull/24572), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- Manager: Update `store.settings.lastTrackedStoryId` - [#24115](https://github.com/storybookjs/storybook/pull/24115), thanks [@rashidshamloo](https://github.com/rashidshamloo)!\n- Next.js: Support v14.0.0 - [#24593](https://github.com/storybookjs/storybook/pull/24593), thanks [@nikospapcom](https://github.com/nikospapcom)!\n- Test: Create @storybook/test package based on vitest - [#24392](https://github.com/storybookjs/storybook/pull/24392), thanks [@kasperpeulen](https://github.com/kasperpeulen)!"}} +{"version":"7.6.0-alpha.4","info":{"plain":"- CLI: Ensure errors with opening the browser are caught - [#24668](https://github.com/storybookjs/storybook/pull/24668), thanks [@xueyawei](https://github.com/xueyawei)!\n- Babel: Update all @babel/* dependencies - [#24610](https://github.com/storybookjs/storybook/pull/24610), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- CLI: Catch when prettier failed to prettify main and preview config files - [#24604](https://github.com/storybookjs/storybook/pull/24604), thanks [@kasperpeulen](https://github.com/kasperpeulen)!\n- CLI: Ignore `addon-onboarding` when checking versions - [#24634](https://github.com/storybookjs/storybook/pull/24634), thanks [@JReinhold](https://github.com/JReinhold)!\n- CLI: Use @storybook/test in template stories - [#24393](https://github.com/storybookjs/storybook/pull/24393), thanks [@yannbf](https://github.com/yannbf)!\n- Controls: Improve accessibility of BooleanControl for screen readers - [#24418](https://github.com/storybookjs/storybook/pull/24418), thanks [@danielmarcano](https://github.com/danielmarcano)!\n- Dependencies: Update @babel/traverse and @babel/core to fix vulnerability - [#24670](https://github.com/storybookjs/storybook/pull/24670), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- Dependencies: Update browserify-sign transitive dependency - [#24674](https://github.com/storybookjs/storybook/pull/24674), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- Dependencies: Update nx dependencies to v17 - [#24671](https://github.com/storybookjs/storybook/pull/24671), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- Maintenance: Split renderers preview entrypoints - [#24623](https://github.com/storybookjs/storybook/pull/24623), thanks [@ndelangen](https://github.com/ndelangen)!\n- Next.js: Add avif support - [#24611](https://github.com/storybookjs/storybook/pull/24611), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- Next.js: Fix forwarding ref for Image component - [#24648](https://github.com/storybookjs/storybook/pull/24648), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- Theming: Add theme variable to set the preview background color - [#24575](https://github.com/storybookjs/storybook/pull/24575), thanks [@JReinhold](https://github.com/JReinhold)!\n- UI: Fix button contrast-ratio - [#24525](https://github.com/storybookjs/storybook/pull/24525), thanks [@maheshchandra10](https://github.com/maheshchandra10)!\n- UI: Update zIndex on NotificationList to fix the notification not being clickable in certain cases - [#24602](https://github.com/storybookjs/storybook/pull/24602), thanks [@yoshi2no](https://github.com/yoshi2no)!"}} From 10c5eaa483768876f3cbf586bb48247928ab567c Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Mon, 30 Oct 2023 11:36:23 +0100 Subject: [PATCH 2/8] Merge pull request #24604 from storybookjs/kasper/try-catch-pretify-main-preview CLI: Catch when prettier failed to prettify main and preview config files (cherry picked from commit 7f5be2c3961d631e0bf650a40a1ed4747859762a) --- code/lib/cli/src/generators/configure.ts | 42 ++++++++++++++---------- 1 file changed, 25 insertions(+), 17 deletions(-) diff --git a/code/lib/cli/src/generators/configure.ts b/code/lib/cli/src/generators/configure.ts index bc70a8f2bfa2..bbc9992be1ed 100644 --- a/code/lib/cli/src/generators/configure.ts +++ b/code/lib/cli/src/generators/configure.ts @@ -1,6 +1,7 @@ import fse from 'fs-extra'; import path from 'path'; import { dedent } from 'ts-dedent'; +import { logger } from '@storybook/node-logger'; import { externalFrameworks, SupportedLanguage } from '../project_types'; interface ConfigureMainOptions { @@ -33,8 +34,6 @@ interface ConfigurePreviewOptions { rendererId: string; } -const logger = console; - /** * We need to clean up the paths in case of pnp * input: "path.dirname(require.resolve(path.join('@storybook/react-webpack5', 'package.json')))" @@ -96,20 +95,25 @@ export async function configureMain({ finalPrefixes.push(`/** @type { import('${frameworkPackage}').StorybookConfig } */`); } - const mainJsContents = mainConfigTemplate + let mainJsContents = mainConfigTemplate .replace('<>', `${imports.join('\n\n')}\n\n`) .replace('<>', finalPrefixes.length > 0 ? `${finalPrefixes.join('\n\n')}\n` : '') .replace('<>', isTypescript ? ': StorybookConfig' : '') .replace('<>', mainContents); - const prettier = (await import('prettier')).default; - const mainPath = `./${storybookConfigFolder}/main.${isTypescript ? 'ts' : 'js'}`; - const prettyMain = prettier.format(dedent(mainJsContents), { - ...prettier.resolveConfig.sync(process.cwd()), - filepath: mainPath, - }); - await fse.writeFile(mainPath, prettyMain, { encoding: 'utf8' }); + + try { + const prettier = (await import('prettier')).default; + mainJsContents = prettier.format(dedent(mainJsContents), { + ...prettier.resolveConfig.sync(process.cwd()), + filepath: mainPath, + }); + } catch { + logger.verbose(`Failed to prettify ${mainPath}`); + } + + await fse.writeFile(mainPath, mainJsContents, { encoding: 'utf8' }); } export async function configurePreview(options: ConfigurePreviewOptions) { @@ -140,7 +144,7 @@ export async function configurePreview(options: ConfigurePreviewOptions) { .filter(Boolean) .join('\n'); - const preview = dedent` + let preview = dedent` ${prefix}${prefix.length > 0 ? '\n' : ''} ${ !isTypescript && rendererPackage @@ -163,11 +167,15 @@ export async function configurePreview(options: ConfigurePreviewOptions) { .replace(' \n', '') .trim(); - const prettier = (await import('prettier')).default; + try { + const prettier = (await import('prettier')).default; + preview = prettier.format(preview, { + ...prettier.resolveConfig.sync(process.cwd()), + filepath: previewPath, + }); + } catch { + logger.verbose(`Failed to prettify ${previewPath}`); + } - const prettyPreview = prettier.format(preview, { - ...prettier.resolveConfig.sync(process.cwd()), - filepath: previewPath, - }); - await fse.writeFile(previewPath, prettyPreview, { encoding: 'utf8' }); + await fse.writeFile(previewPath, preview, { encoding: 'utf8' }); } From 312c819536030193464553dd78a1cbd87a7cb7ea Mon Sep 17 00:00:00 2001 From: Kyle Gach Date: Wed, 1 Nov 2023 11:32:47 -0600 Subject: [PATCH 3/8] Merge pull request #24649 from storybookjs/fix-indexers-link Docs: Fix links to indexers API (cherry picked from commit f44cdba4e6cd0cf7b9ca5cb832a6e04d0ad08884) --- docs/configure/sidebar-and-urls.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/configure/sidebar-and-urls.md b/docs/configure/sidebar-and-urls.md index 966d928b3fe5..249504a81216 100644 --- a/docs/configure/sidebar-and-urls.md +++ b/docs/configure/sidebar-and-urls.md @@ -162,6 +162,6 @@ When Storybook generates the titles for all matching stories, they'll retain the ### Story Indexers -[Story Indexers](./main-config-indexers.md) are a set of heuristics used by Storybook to crawl your filesystem based on a given glob pattern searching for matching stories, which is then used to generate an `index.json` (formerly `stories.json`) file responsible for populating the sidebar with the necessary information. By default, this heuristic will look for files that contain the following scheme `*.stories.@(js|jsx|mjs|ts|tsx)`. +[Story Indexers](../api/main-config-indexers.md) are a set of heuristics used by Storybook to crawl your filesystem based on a given glob pattern searching for matching stories, which is then used to generate an `index.json` (formerly `stories.json`) file responsible for populating the sidebar with the necessary information. By default, this heuristic will look for files that contain the following scheme `*.stories.@(js|jsx|mjs|ts|tsx)`. -You can provide your own indexer to include stories with a different naming convention, adjust the automatic title generation beyond a prefix, and many other use cases. For more information, see the [Story Indexers API reference](./main-config-indexers.md). +You can provide your own indexer to include stories with a different naming convention, adjust the automatic title generation beyond a prefix, and many other use cases. For more information, see the [Story Indexers API reference](../api/main-config-indexers.md). From b0b7dbd1aeb533805582d0e16bdfb8e24ee78648 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Thu, 2 Nov 2023 11:51:28 +0000 Subject: [PATCH 4/8] Merge pull request #24525 from maheshchandra10/fix(23454)-raw-button-contrast-ratio UI: Fix button contrast-ratio (cherry picked from commit ac9880fb07abcb00c4694b3c020ec34e56448bf4) --- code/lib/theming/src/themes/light.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/theming/src/themes/light.ts b/code/lib/theming/src/themes/light.ts index 88508b62b8c4..107fabd942c4 100644 --- a/code/lib/theming/src/themes/light.ts +++ b/code/lib/theming/src/themes/light.ts @@ -21,7 +21,7 @@ const theme: ThemeVars = { // Text colors textColor: color.darkest, textInverseColor: color.lightest, - textMutedColor: color.mediumdark, + textMutedColor: color.dark, // Toolbar default and active colors barTextColor: color.mediumdark, From 12207f704dab620fdbd46248b1969ff49ecaa733 Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Thu, 2 Nov 2023 17:09:38 +0000 Subject: [PATCH 5/8] Merge pull request #24527 from bitovi/publish-docs-github-pages GitHub Pages publish guide (cherry picked from commit 36c9e26a229c99c8ea01ffb39f8151d733465f77) --- docs/sharing/publish-storybook.md | 21 ++++++++-- .../snippets/common/ghp-github-action.yml.mdx | 39 +++++++++++++++++++ 2 files changed, 57 insertions(+), 3 deletions(-) create mode 100644 docs/snippets/common/ghp-github-action.yml.mdx diff --git a/docs/sharing/publish-storybook.md b/docs/sharing/publish-storybook.md index 1748a54049b9..557462236359 100644 --- a/docs/sharing/publish-storybook.md +++ b/docs/sharing/publish-storybook.md @@ -131,15 +131,30 @@ When you publish Storybook, you also get component history and versioning down t ## Publish Storybook to other services -Since Storybook is built as a static web application, you can also publish it to any web host, including [GitHub Pages](https://docs.github.com/en/pages), [Netlify](https://www.netlify.com/), [AWS S3](https://aws.amazon.com/s3/), and more. However, features such as [Composition](./storybook-composition.md), -[embedding stories](./embed.md), history, and versioning require tighter integration with Storybook APIs and secure authentication. Your hosting provider may not be capable of supporting these features. Learn about the Component Publishing Protocol (CPP) to see what. +Since Storybook is built as a static web application, you can also publish it to any web host, including [GitHub Pages](https://docs.github.com/en/pages), [Netlify](https://www.netlify.com/), [AWS S3](https://aws.amazon.com/s3/), and more. However, features such as [Composition](./storybook-composition.md), [embedding stories](./embed.md), history, versioning, and assets may require tighter integration with Storybook APIs and secure authentication. If you want to know more about headers, you can refer to the [Migration guide](https://github.com/storybookjs/storybook/blob/main/MIGRATION.md#deploying-build-artifacts). Additionally, if you want to learn about the Component Publishing Protocol (CPP), you can find more information below. + +### GitHub Pages + +To deploy Storybook on GitHub Pages, use the community-built [Deploy Storybook to GitHub Pages](https://github.com/bitovi/github-actions-storybook-to-github-pages) Action. To enable it, create a new workflow file inside your `.github/workflows` directory with the following content: + + + + + + +
-ℹ️ Additional header configuration may be required to serve Storybook's static files correctly on your host. For more information on the required headers, see the [Migration guide](https://github.com/storybookjs/storybook/blob/main/MIGRATION.md#deploying-build-artifacts). +ℹ️ The GitHub Pages Action requires additional configuration options to customize the deployment process. Refer to the [official documentation](https://github.com/marketplace/actions/deploy-storybook-to-github-pages) for more information.
+

Component Publishing Protocol (CPP)

 diff --git a/docs/snippets/common/ghp-github-action.yml.mdx b/docs/snippets/common/ghp-github-action.yml.mdx new file mode 100644 index 000000000000..ffd967694cfd --- /dev/null +++ b/docs/snippets/common/ghp-github-action.yml.mdx @@ -0,0 +1,39 @@ +```yml +# .github/workflows/deploy-github-pages.yaml + +# Workflow name +name: Build and Publish Storybook to GitHub Pages + +on: + # Event for the workflow to run on + push: + branches: + - 'your-branch-name' # Replace with the branch you want to deploy from + +permissions: + contents: read + pages: write + id-token: write + +# List of jobs +jobs: + deploy: + runs-on: ubuntu-latest + # Job steps + steps: + # Manual Checkout + - uses: actions/checkout@v3 + + # Set up Node + - uses: actions/setup-node@v3 + with: + node-version: '16.x' + + #👇 Add Storybook build and deploy to GitHub Pages as a step in the workflow + - uses: bitovi/github-actions-storybook-to-github-pages@v1.0.1 + with: + install_command: yarn install # default: npm ci + build_command: yarn build-storybook # default: npm run build-storybook + path: storybook-static # default: dist/storybook + checkout: false # default: true +``` From cf325a711e2cb96f636d15a1603b926285027c37 Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Sun, 5 Nov 2023 16:57:11 +0000 Subject: [PATCH 6/8] Merge pull request #24720 from storybookjs/docs_fix_addon_design_snippet Docs: Addon Designs removes non-existing import (cherry picked from commit 53172b9f891b81b1112fbccd01e7b4e3ea7f29ad) --- docs/snippets/angular/component-story-figma-integration.ts.mdx | 3 --- docs/snippets/react/component-story-figma-integration.js.mdx | 3 --- .../react/component-story-figma-integration.ts-4-9.mdx | 3 --- docs/snippets/react/component-story-figma-integration.ts.mdx | 3 --- docs/snippets/solid/component-story-figma-integration.js.mdx | 3 --- .../solid/component-story-figma-integration.ts-4-9.mdx | 3 --- docs/snippets/solid/component-story-figma-integration.ts.mdx | 3 --- docs/snippets/svelte/component-story-figma-integration.js.mdx | 3 --- docs/snippets/svelte/component-story-figma-integration.mdx.mdx | 3 --- docs/snippets/vue/component-story-figma-integration.js.mdx | 3 --- docs/snippets/vue/component-story-figma-integration.ts-4-9.mdx | 3 --- docs/snippets/vue/component-story-figma-integration.ts.mdx | 3 --- .../web-components/component-story-figma-integration.js.mdx | 3 --- .../web-components/component-story-figma-integration.ts.mdx | 3 --- 14 files changed, 42 deletions(-) diff --git a/docs/snippets/angular/component-story-figma-integration.ts.mdx b/docs/snippets/angular/component-story-figma-integration.ts.mdx index 5b030c422fd2..548298968037 100644 --- a/docs/snippets/angular/component-story-figma-integration.ts.mdx +++ b/docs/snippets/angular/component-story-figma-integration.ts.mdx @@ -3,14 +3,11 @@ import type { Meta, StoryObj } from '@storybook/angular/'; -import { withDesign } from 'storybook-addon-designs'; - import { MyComponent } from './MyComponent.component'; // More on default export: https://storybook.js.org/docs/angular/writing-stories/introduction#default-export const meta: Meta = { component: MyComponent, - decorators: [withDesign], }; export default meta; diff --git a/docs/snippets/react/component-story-figma-integration.js.mdx b/docs/snippets/react/component-story-figma-integration.js.mdx index 442c797e71f6..5646fc5b3e59 100644 --- a/docs/snippets/react/component-story-figma-integration.js.mdx +++ b/docs/snippets/react/component-story-figma-integration.js.mdx @@ -1,14 +1,11 @@ ```js // MyComponent.stories.js|jsx -import { withDesign } from 'storybook-addon-designs'; - import { MyComponent } from './MyComponent'; // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export export default { component: MyComponent, - decorators: [withDesign], }; export const Example = { diff --git a/docs/snippets/react/component-story-figma-integration.ts-4-9.mdx b/docs/snippets/react/component-story-figma-integration.ts-4-9.mdx index dbc6a9eb0cc6..cf84d725d7dd 100644 --- a/docs/snippets/react/component-story-figma-integration.ts-4-9.mdx +++ b/docs/snippets/react/component-story-figma-integration.ts-4-9.mdx @@ -3,14 +3,11 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { withDesign } from 'storybook-addon-designs'; - import { MyComponent } from './MyComponent'; // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export const meta = { component: MyComponent, - decorators: [withDesign], } satisfies Meta; export default meta; diff --git a/docs/snippets/react/component-story-figma-integration.ts.mdx b/docs/snippets/react/component-story-figma-integration.ts.mdx index 19c6080436a8..183201440bcc 100644 --- a/docs/snippets/react/component-story-figma-integration.ts.mdx +++ b/docs/snippets/react/component-story-figma-integration.ts.mdx @@ -3,14 +3,11 @@ import type { Meta, StoryObj } from '@storybook/react'; -import { withDesign } from 'storybook-addon-designs'; - import { MyComponent } from './MyComponent'; // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export const meta: Meta = { component: MyComponent, - decorators: [withDesign], }; export default meta; diff --git a/docs/snippets/solid/component-story-figma-integration.js.mdx b/docs/snippets/solid/component-story-figma-integration.js.mdx index 4184c0493454..e71edadfdc17 100644 --- a/docs/snippets/solid/component-story-figma-integration.js.mdx +++ b/docs/snippets/solid/component-story-figma-integration.js.mdx @@ -1,13 +1,10 @@ ```js // MyComponent.stories.js|jsx -import { withDesign } from 'storybook-addon-designs'; - import { MyComponent } from './MyComponent'; export default { component: MyComponent, - decorators: [withDesign], }; export const Example = { diff --git a/docs/snippets/solid/component-story-figma-integration.ts-4-9.mdx b/docs/snippets/solid/component-story-figma-integration.ts-4-9.mdx index c868aeadfb25..d121332d7514 100644 --- a/docs/snippets/solid/component-story-figma-integration.ts-4-9.mdx +++ b/docs/snippets/solid/component-story-figma-integration.ts-4-9.mdx @@ -3,13 +3,10 @@ import type { Meta, StoryObj } from 'storybook-solidjs'; -import { withDesign } from 'storybook-addon-designs'; - import { MyComponent } from './MyComponent'; const meta = { component: MyComponent, - decorators: [withDesign], } satisfies Meta; export default meta; diff --git a/docs/snippets/solid/component-story-figma-integration.ts.mdx b/docs/snippets/solid/component-story-figma-integration.ts.mdx index e04c4b3b1651..a105e443eb59 100644 --- a/docs/snippets/solid/component-story-figma-integration.ts.mdx +++ b/docs/snippets/solid/component-story-figma-integration.ts.mdx @@ -3,13 +3,10 @@ import type { Meta, StoryObj } from 'storybook-solidjs'; -import { withDesign } from 'storybook-addon-designs'; - import { MyComponent } from './MyComponent'; const meta: Meta = { component: MyComponent, - decorators: [withDesign], }; export default meta; diff --git a/docs/snippets/svelte/component-story-figma-integration.js.mdx b/docs/snippets/svelte/component-story-figma-integration.js.mdx index c7c65ed0e8f3..3b597ddbfee4 100644 --- a/docs/snippets/svelte/component-story-figma-integration.js.mdx +++ b/docs/snippets/svelte/component-story-figma-integration.js.mdx @@ -1,14 +1,11 @@ ```js // MyComponent.stories.js -import { withDesign } from 'storybook-addon-designs'; - import MyComponent from './MyComponent.svelte'; // More on default export: https://storybook.js.org/docs/svelte/writing-stories/introduction#default-export export default { component: { MyComponent }, - decorators: [withDesign], }; export const Example = { diff --git a/docs/snippets/svelte/component-story-figma-integration.mdx.mdx b/docs/snippets/svelte/component-story-figma-integration.mdx.mdx index 9e129d3f4c9d..d612c1cb4393 100644 --- a/docs/snippets/svelte/component-story-figma-integration.mdx.mdx +++ b/docs/snippets/svelte/component-story-figma-integration.mdx.mdx @@ -3,14 +3,11 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs'; -import { withDesign } from 'storybook-addon-designs'; - import MyComponent from './MyComponent.svelte';