Release: Patch 7.6.11

.circleci/config.yml

@@ -560,27 +560,27 @@ workflows:
           requires:
             - unit-tests
       - create-sandboxes:
-          parallelism: 20
+          parallelism: 19
           requires:
             - build
       - build-sandboxes:
-          parallelism: 20
+          parallelism: 19
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 17
+          parallelism: 16
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 15
+          parallelism: 14
           requires:
             - build-sandboxes
       - e2e-dev:
           parallelism: 2
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 15
+          parallelism: 14
           requires:
             - build-sandboxes
       - bench:
@@ -614,30 +614,30 @@ workflows:
           requires:
             - build
       - create-sandboxes:
-          parallelism: 34
+          parallelism: 33
           requires:
             - build
       # - smoke-test-sandboxes: # disabled for now
       #     requires:
       #       - create-sandboxes
       - build-sandboxes:
-          parallelism: 34
+          parallelism: 33
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 31
+          parallelism: 30
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 29
+          parallelism: 28
           requires:
             - build-sandboxes
       - e2e-dev:
           parallelism: 2
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 29
+          parallelism: 28
           requires:
             - build-sandboxes
       # TODO: reenable once we find out the source of flakyness

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 7.6.11
+
+- CLI: Update init for react native v7 - [#25780](https://github.com/storybookjs/storybook/pull/25780), thanks [@dannyhw](https://github.com/dannyhw)!
+- Codemods: Add support for multiple file extensions in runCodemod function - [#25708](https://github.com/storybookjs/storybook/pull/25708), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+
 ## 7.6.10
 
 - CLI: Fix existing version detection in `upgrade` - [#25642](https://github.com/storybookjs/storybook/pull/25642), thanks [@JReinhold](https://github.com/JReinhold)!

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2017 Kadira Inc. <[email protected]>
+Copyright (c) 2024 Storybook
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

code/addons/themes/README.md

@@ -27,6 +27,7 @@ For tool-specific setup, check out the recipes below
 - [`@emotion/styled`](https://github.com/storybookjs/storybook/tree/next/code/addons/themes/docs/getting-started/emotion.md)
 - [`@mui/material`](https://github.com/storybookjs/storybook/tree/next/code/addons/themes/docs/getting-started/material-ui.md)
 - [`bootstrap`](https://github.com/storybookjs/storybook/tree/next/code/addons/themes/docs/getting-started/bootstrap.md)
+- [`postcss`](https://github.com/storybookjs/storybook/tree/next/code/addons/themes/docs/getting-started/postcss.md)
 - [`styled-components`](https://github.com/storybookjs/storybook/tree/next/code/addons/themes/docs/getting-started/styled-components.md)
 - [`tailwind`](https://github.com/storybookjs/storybook/tree/next/code/addons/themes/docs/getting-started/tailwind.md)
 - [`[email protected]`](https://github.com/storybookjs/storybook/blob/next/code/addons/themes/docs/api.md#writing-a-custom-decorator)

code/addons/themes/docs/getting-started/postcss.md

@@ -0,0 +1,114 @@
+# 🏁 Getting started with `postcss`
+
+## 📦 Install addon
+
+To get started, **install the package** as a dev dependency
+
+yarn:
+
+```zsh
+yarn add -D @storybook/addon-themes postcss-dark-theme-class
+```
+
+npm:
+
+```zsh
+npm install -D @storybook/addon-themes postcss-dark-theme-class
+```
+
+pnpm:
+
+```zsh
+pnpm add -D @storybook/addon-themes postcss-dark-theme-class
+```
+
+## 🧩 Register Addon
+
+Now, **include the addon** in your `.storybook/main.js` file.
+
+```diff
+module.exports = {
+  stories: [
+    "../stories/**/*.stories.mdx",
+    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
+  ],
+  addons: [
+    "@storybook/addon-essentials",
++   "@storybook/addon-themes"
+  ],
+};
+```
+
+## 🏷️ Add class to `prefers-color-scheme` media
+
+CSS has special media at-rule for dark theme: `@media (prefers-color-scheme: dark)`. [`postcss-dark-theme-class`](https://github.com/postcss/postcss-dark-theme-class) can copy content of those at-rules to `.is-dark` selector.
+
+Check your project for existing PostCSS config: `postcss.config.js` in the project root, `"postcss"` section in `package.json` or postcss in bundle config.
+
+Add plugin to the list.
+
+```diff
+module.exports = {
+  plugins: [
++   require('postcss-dark-theme-class'),
+    require('autoprefixer')
+  ]
+}
+```
+
+Use `prefers-color-scheme` media in your CSS:
+
+```css
+:root {
+  --text-color: black;
+}
+@media (prefers-color-scheme: dark) {
+  html {
+    --text-color: white
+  }
+}
+```
+
+## 🥾 Import your CSS
+
+To give your stories access to styles, import them into your `.storybook/preview.js` file.
+
+```diff
+import { Preview } from "@storybook/your-renderer";
+
++import "../src/index.css";
+
+const preview: Preview = {
+  parameters: { /* ... */ },
+};
+
+export default preview;
+```
+
+## 🎨 Provide your theme(s)
+
+To enable switching between these modes in a click for your stories, use our `withThemeByClassName` decorator by adding the following code to your `.storybook/preview.js` file.
+
+```diff
+-import { Preview } from "@storybook/your-renderer";
++import { Preview, Renderer } from "@storybook/your-renderer";
++import { withThemeByClassName } from "@storybook/addon-themes";
+
+import "../src/index.css";
+
+
+const preview: Preview = {
+  parameters: { /* ... */ },
++ decorators: [
++  withThemeByClassName<Renderer>({
++    themes: {
++      light: "is-light",
++      dark: "is-dark",
++    },
++    defaultTheme: "light",
++  }),
++ ]
+};
+
+export default preview;
+```

code/lib/cli/src/generators/REACT_NATIVE/index.ts

@@ -11,6 +11,7 @@ const generator = async (
 
   const missingReactDom =
     !packageJson.dependencies['react-dom'] && !packageJson.devDependencies['react-dom'];
+
   const reactVersion = packageJson.dependencies.react;
 
   const packagesToResolve = [
@@ -24,24 +25,26 @@ const generator = async (
     '@storybook/react-native',
   ];
 
-  // change these to latest version once v6 stable is released
-  const packagesWithFixedVersion = [
-    '@storybook/addon-actions@^6.5.16',
-    '@storybook/addon-controls@^6.5.16',
-  ];
+  const packagesWithFixedVersion: string[] = [];
 
   const versionedPackages = await packageManager.getVersionedPackages(packagesToResolve);
 
   const babelDependencies = await getBabelDependencies(packageManager, packageJson);
 
-  const packages = [
-    ...babelDependencies,
-    ...packagesWithFixedVersion,
-    ...versionedPackages,
-    missingReactDom && reactVersion && `react-dom@${reactVersion}`,
-  ].filter(Boolean);
+  const packages: string[] = [];
+
+  packages.push(...babelDependencies);
+
+  packages.push(...packagesWithFixedVersion);
+
+  packages.push(...versionedPackages);
+
+  if (missingReactDom && reactVersion) {
+    packages.push(`react-dom@${reactVersion}`);
+  }
 
   await packageManager.addDependencies({ ...npmOptions, packageJson }, packages);
+
   packageManager.addScripts({
     'storybook-generate': 'sb-rn-get-stories',
     'storybook-watch': 'sb-rn-watcher',
@@ -52,7 +55,7 @@ const generator = async (
   await copyTemplateFiles({
     packageManager,
     renderer: 'react-native',
-    language: SupportedLanguage.JAVASCRIPT,
+    language: SupportedLanguage.TYPESCRIPT_3_8,
     destination: storybookConfigFolder,
     includeCommonAssets: false,
   });

code/lib/cli/src/initiate.ts

@@ -12,7 +12,7 @@ import { readdirSync } from 'fs-extra';
 import { lt, prerelease } from 'semver';
 import { installableProjectTypes, ProjectType } from './project_types';
 import { detect, isStorybookInstantiated, detectLanguage, detectPnp } from './detect';
-import { commandLog, codeLog, paddedLog } from './helpers';
+import { commandLog, paddedLog } from './helpers';
 import angularGenerator from './generators/ANGULAR';
 import emberGenerator from './generators/EMBER';
 import reactGenerator from './generators/REACT';
@@ -401,15 +401,25 @@ export async function doInitiate(
   }
 
   if (projectType === ProjectType.REACT_NATIVE) {
-    logger.log();
-    logger.log(chalk.yellow('NOTE: installation is not 100% automated.\n'));
-    logger.log(`To quickly run Storybook, replace contents of your app entry with:\n`);
-    codeLog(["export {default} from './.storybook';"]);
-    logger.log('\n Then to run your Storybook, type:\n');
-    codeLog([packageManager.getRunCommand('start')]);
-    logger.log('\n For more in information, see the github readme:\n');
-    logger.log(chalk.cyan('https://github.com/storybookjs/react-native'));
-    logger.log();
+    logger.log(dedent`
+      ${chalk.yellow('NOTE: installation is not 100% automated.')}
+
+      To run Storybook, you will need to:
+
+      1. Replace the contents of your app entry with the following
+
+      ${chalk.inverse("export {default} from './.storybook';")}
+
+      2. Enable transformer.unstable_allowRequireContext in your metro config
+
+      For a more detailed guide go to:
+      ${chalk.cyan('https://github.com/storybookjs/react-native#existing-project')}
+
+      Then to run your Storybook, type:
+
+      ${chalk.inverse(` ${packageManager.getRunCommand('start')} `)}
+
+    `);
 
     return { shouldRunDev: false };
   }

code/lib/cli/src/sandbox-templates.ts

@@ -558,7 +558,7 @@ export const merged: TemplateKey[] = [
   ...normal,
   'react-webpack/18-ts',
   'react-webpack/17-ts',
-  'angular-cli/15-ts',
+  // 'angular-cli/15-ts',
   'preact-webpack5/default-ts',
   'preact-vite/default-ts',
   'html-webpack/default',

code/lib/codemod/src/index.ts

@@ -48,14 +48,19 @@ export async function runCodemod(codemod: any, { glob, logger, dryRun, rename, p
   // jscodeshift/prettier know how to handle .ts/.tsx extensions,
   // so if the user uses one of those globs, we can auto-infer
   let inferredParser = parser;
+
   if (!parser) {
     const extension = path.extname(glob).slice(1);
     const knownParser = jscodeshiftToPrettierParser(extension);
     if (knownParser !== 'babel') inferredParser = extension;
   }
 
   const files = await globby([glob, '!**/node_modules', '!**/dist']);
+  const extensions = new Set(files.map((file) => path.extname(file).slice(1)));
+  const commaSeparatedExtensions = Array.from(extensions).join(',');
+
   logger.log(`=> Applying ${codemod}: ${files.length} files`);
+
   if (files.length === 0) {
     logger.log(`=> No matching files for glob: ${glob}`);
     return;
@@ -71,6 +76,7 @@ export async function runCodemod(codemod: any, { glob, logger, dryRun, rename, p
         // which is faster, and also makes sure the user won't see babel messages such as:
         // [BABEL] Note: The code generator has deoptimised the styling of repo/node_modules/prettier/index.js as it exceeds the max of 500KB.
         '--no-babel',
+        `--extensions=${commaSeparatedExtensions}`,
         '--fail-on-error',
         '-t',
         `${TRANSFORM_DIR}/${codemod}.js`,

code/package.json

@@ -329,5 +329,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "7.6.11"
 }

docs/snippets/common/main-config-stories-with-logic.ts.mdx

@@ -3,14 +3,15 @@
 
 // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
 import type { StorybookConfig } from '@storybook/your-framework';
+import type { StoriesEntry } from '@storybook/types';
 
-async function findStories() {
+async function findStories(): Promise<StoriesEntry[]> {
   // your custom logic returns a list of files
 }
 
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
-  stories: async (list) => [
+  stories: async (list: StoriesEntry[]) => [
     ...list,
     // 👇 Add your found stories to the existing list of story files
     ...(await findStories()),

docs/versions/latest.json

@@ -1 +1 @@
-{"version":"7.6.10","info":{"plain":"- CLI: Fix existing version detection in `upgrade` - [#25642](https://github.com/storybookjs/storybook/pull/25642), thanks [@JReinhold](https://github.com/JReinhold)!\n- React: Fix acorn ecma version warning - [#25634](https://github.com/storybookjs/storybook/pull/25634), thanks [@dannyhw](https://github.com/dannyhw)!"}}
+{"version":"7.6.11","info":{"plain":"- CLI: Fix `upgrade` detecting the wrong version of existing Storybooks - [#25752](https://github.com/storybookjs/storybook/pull/25752), thanks [@JReinhold](https://github.com/JReinhold)!\n- CLI: Update init for react native v7 - [#25780](https://github.com/storybookjs/storybook/pull/25780), thanks [@dannyhw](https://github.com/dannyhw)!\n- Codemods: Add support for multiple file extensions in runCodemod function - [#25708](https://github.com/storybookjs/storybook/pull/25708), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!"}}

docs/versions/next.json

@@ -1 +1 @@
-{"version":"8.0.0-alpha.11","info":{"plain":"- Angular: Remove cached NgModules and introduce a global queue during bootstrapping - [#24982](https://github.com/storybookjs/storybook/pull/24982), thanks [@Marklb](https://github.com/Marklb)!\n- CLI: Fix sandbox command versioning - [#25600](https://github.com/storybookjs/storybook/pull/25600), thanks [@ndelangen](https://github.com/ndelangen)!\n- CLI: Support upgrading to canary versions - [#25596](https://github.com/storybookjs/storybook/pull/25596), thanks [@JReinhold](https://github.com/JReinhold)!\n- ConfigFile: Fix export specifiers - [#25590](https://github.com/storybookjs/storybook/pull/25590), thanks [@shilman](https://github.com/shilman)!\n- Interaction: Replace @storybook/jest by @storybook/test - [#25584](https://github.com/storybookjs/storybook/pull/25584), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- Next.js: Pass jsConfig to SWC Loader and load config with defaults - [#25203](https://github.com/storybookjs/storybook/pull/25203), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- Parameters: Remove passArgsFirst flag - [#25585](https://github.com/storybookjs/storybook/pull/25585), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- Preset: Remove deprecated config preset - [#25607](https://github.com/storybookjs/storybook/pull/25607), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- React: Refactor RSC out of Next - [#25591](https://github.com/storybookjs/storybook/pull/25591), thanks [@shilman](https://github.com/shilman)!\n- Sandboxes: Update wait-on command to use TCP instead of HTTP - [#25541](https://github.com/storybookjs/storybook/pull/25541), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- Telejson: Update stringify options in codebase - [#25564](https://github.com/storybookjs/storybook/pull/25564), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- UI: Fix menu icon on the sidebar - [#25587](https://github.com/storybookjs/storybook/pull/25587), thanks [@cdedreuille](https://github.com/cdedreuille)!\n- Webpack5: Make export-order-loader compatible with both esm and cjs - [#25540](https://github.com/storybookjs/storybook/pull/25540), thanks [@mlazari](https://github.com/mlazari)!"}}
+{"version":"8.0.0-alpha.15","info":{"plain":"- Next.js: Add logger statements for compiler selection - [#25755](https://github.com/storybookjs/storybook/pull/25755), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- React-Native: Fixes for v8 compatibility - [#25678](https://github.com/storybookjs/storybook/pull/25678), thanks [@shilman](https://github.com/shilman)!\n- UI: Remove use of React.FC in components - [#25588](https://github.com/storybookjs/storybook/pull/25588), thanks [@ShaunEvening](https://github.com/ShaunEvening)!\n- Vue3: Fix support for `onX` and empty attributes in Show Code - [#25219](https://github.com/storybookjs/storybook/pull/25219), thanks [@Tap-Kim](https://github.com/Tap-Kim)!\n- Vue3: Introduce portable stories API - [#25443](https://github.com/storybookjs/storybook/pull/25443), thanks [@yannbf](https://github.com/yannbf)!"}}