Merge pull request #24613 from storybookjs/version-patch-from-7.5.2

Release: Patch 7.5.3

CHANGELOG.md

@@ -1,3 +1,9 @@
+## 7.5.3
+
+- Angular: Support v17 - [#24717](https://github.com/storybookjs/storybook/pull/24717), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+- 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)!
+- UI: Fix button contrast-ratio - [#24525](https://github.com/storybookjs/storybook/pull/24525), thanks [@maheshchandra10](https://github.com/maheshchandra10)!
+
 ## 7.5.2
 
 - 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)!

code/frameworks/angular/package.json

@@ -90,17 +90,17 @@
     "zone.js": "^0.13.0"
   },
   "peerDependencies": {
-    "@angular-devkit/architect": ">=0.1400.0 < 0.1700.0",
-    "@angular-devkit/build-angular": ">=14.1.0 < 17.0.0",
-    "@angular-devkit/core": ">=14.1.0 < 17.0.0",
-    "@angular/cli": ">=14.1.0 < 17.0.0",
-    "@angular/common": ">=14.1.0 < 17.0.0",
-    "@angular/compiler": ">=14.1.0 < 17.0.0",
-    "@angular/compiler-cli": ">=14.1.0 < 17.0.0",
-    "@angular/core": ">=14.1.0 < 17.0.0",
-    "@angular/forms": ">=14.1.0 < 17.0.0",
-    "@angular/platform-browser": ">=14.1.0 < 17.0.0",
-    "@angular/platform-browser-dynamic": ">=14.1.0 < 17.0.0",
+    "@angular-devkit/architect": ">=0.1400.0 < 0.1800.0",
+    "@angular-devkit/build-angular": ">=14.1.0 < 18.0.0",
+    "@angular-devkit/core": ">=14.1.0 < 18.0.0",
+    "@angular/cli": ">=14.1.0 < 18.0.0",
+    "@angular/common": ">=14.1.0 < 18.0.0",
+    "@angular/compiler": ">=14.1.0 < 18.0.0",
+    "@angular/compiler-cli": ">=14.1.0 < 18.0.0",
+    "@angular/core": ">=14.1.0 < 18.0.0",
+    "@angular/forms": ">=14.1.0 < 18.0.0",
+    "@angular/platform-browser": ">=14.1.0 < 18.0.0",
+    "@angular/platform-browser-dynamic": ">=14.1.0 < 18.0.0",
     "@babel/core": "*",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",

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('<<import>>', `${imports.join('\n\n')}\n\n`)
     .replace('<<prefix>>', finalPrefixes.length > 0 ? `${finalPrefixes.join('\n\n')}\n` : '')
     .replace('<<type>>', isTypescript ? ': StorybookConfig' : '')
     .replace('<<mainContents>>', 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' });
 }

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,

code/package.json

@@ -328,5 +328,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "7.5.3"
 }

code/yarn.lock

@@ -6438,17 +6438,17 @@ __metadata:
     webpack: 5
     zone.js: ^0.13.0
   peerDependencies:
-    "@angular-devkit/architect": ">=0.1400.0 < 0.1700.0"
-    "@angular-devkit/build-angular": ">=14.1.0 < 17.0.0"
-    "@angular-devkit/core": ">=14.1.0 < 17.0.0"
-    "@angular/cli": ">=14.1.0 < 17.0.0"
-    "@angular/common": ">=14.1.0 < 17.0.0"
-    "@angular/compiler": ">=14.1.0 < 17.0.0"
-    "@angular/compiler-cli": ">=14.1.0 < 17.0.0"
-    "@angular/core": ">=14.1.0 < 17.0.0"
-    "@angular/forms": ">=14.1.0 < 17.0.0"
-    "@angular/platform-browser": ">=14.1.0 < 17.0.0"
-    "@angular/platform-browser-dynamic": ">=14.1.0 < 17.0.0"
+    "@angular-devkit/architect": ">=0.1400.0 < 0.1800.0"
+    "@angular-devkit/build-angular": ">=14.1.0 < 18.0.0"
+    "@angular-devkit/core": ">=14.1.0 < 18.0.0"
+    "@angular/cli": ">=14.1.0 < 18.0.0"
+    "@angular/common": ">=14.1.0 < 18.0.0"
+    "@angular/compiler": ">=14.1.0 < 18.0.0"
+    "@angular/compiler-cli": ">=14.1.0 < 18.0.0"
+    "@angular/core": ">=14.1.0 < 18.0.0"
+    "@angular/forms": ">=14.1.0 < 18.0.0"
+    "@angular/platform-browser": ">=14.1.0 < 18.0.0"
+    "@angular/platform-browser-dynamic": ">=14.1.0 < 18.0.0"
     "@babel/core": "*"
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0

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).

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:
+
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/ghp-github-action.yml.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
 
 <div class="aside">
 
-ℹ️ 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.
 
 </div>
 
+
 <details>
 
 <summary><h2>Component Publishing Protocol (CPP)</h2></summary>

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<MyComponent> = {
   component: MyComponent,
-  decorators: [withDesign],
 };
 
 export default meta;

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
+```

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 = {

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<typeof MyComponent>;
 
 export default meta;

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<typeof MyComponent> = {
   component: MyComponent,
-  decorators: [withDesign],
 };
 
 export default meta;

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 = {

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<typeof MyComponent>;
 
 export default meta;

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<typeof MyComponent> = {
   component: MyComponent,
-  decorators: [withDesign],
 };
 
 export default meta;

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 = {

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';
 
 <Meta
   title="FigmaExample"
   component={MyComponent}
-  decorators={[withDesign]}
 />
 
 <!--

docs/snippets/vue/component-story-figma-integration.js.mdx

@@ -1,14 +1,11 @@
 ```js
 // MyComponent.stories.js
 
-import { withDesign } from 'storybook-addon-designs';
-
 import MyComponent from './MyComponent.vue';
 
 // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
 export default {
   component: MyComponent,
-  decorators: [withDesign],
 };
 
 export const Example = {