Merge branch 'latest-release'

.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/a11y/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "7.6.10",
+  "version": "7.6.11",
   "description": "Test component compliance with web accessibility standards",
   "keywords": [
     "a11y",

code/addons/actions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-actions",
-  "version": "7.6.10",
+  "version": "7.6.11",
   "description": "Get UI feedback when an action is performed on an interactive element",
   "keywords": [
     "storybook",

code/addons/backgrounds/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "7.6.10",
+  "version": "7.6.11",
   "description": "Switch backgrounds to view components in different settings",
   "keywords": [
     "addon",

code/addons/controls/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-controls",
-  "version": "7.6.10",
+  "version": "7.6.11",
   "description": "Interact with component inputs dynamically in the Storybook UI",
   "keywords": [
     "addon",

code/addons/docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "7.6.10",
+  "version": "7.6.11",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",

code/addons/essentials/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-essentials",
-  "version": "7.6.10",
+  "version": "7.6.11",
   "description": "Curated addons to bring out the best of Storybook",
   "keywords": [
     "addon",

code/addons/gfm/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-mdx-gfm",
-  "version": "7.6.10",
+  "version": "7.6.11",
   "description": "GitHub Flavored Markdown in Storybook",
   "keywords": [
     "addon",

code/addons/highlight/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-highlight",
-  "version": "7.6.10",
+  "version": "7.6.11",
   "description": "Highlight DOM nodes within your stories",
   "keywords": [
     "storybook-addons",

code/addons/interactions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-interactions",
-  "version": "7.6.10",
+  "version": "7.6.11",
   "description": "Automate, test and debug user interactions",
   "keywords": [
     "storybook-addons",

code/addons/jest/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-jest",
-  "version": "7.6.10",
+  "version": "7.6.11",
   "description": "React storybook addon that show component jest report",
   "keywords": [
     "addon",

code/addons/links/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-links",
-  "version": "7.6.10",
+  "version": "7.6.11",
   "description": "Link stories together to build demos and prototypes with your UI components",
   "keywords": [
     "addon",

code/addons/measure/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-measure",
-  "version": "7.6.10",
+  "version": "7.6.11",
   "description": "Inspect layouts by visualizing the box model",
   "keywords": [
     "storybook-addons",

code/addons/outline/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-outline",
-  "version": "7.6.10",
+  "version": "7.6.11",
   "description": "Outline all elements with CSS to help with layout placement and alignment",
   "keywords": [
     "storybook-addons",

code/addons/storyshots-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storyshots",
-  "version": "7.6.10",
+  "version": "7.6.11",
   "description": "Take a code snapshot of every story automatically with Jest",
   "keywords": [
     "addon",

code/addons/storyshots-puppeteer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storyshots-puppeteer",
-  "version": "7.6.10",
+  "version": "7.6.11",
   "description": "Image snapshots addition to StoryShots based on puppeteer",
   "keywords": [
     "addon",

code/addons/storysource/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storysource",
-  "version": "7.6.10",
+  "version": "7.6.11",
   "description": "View a story’s source code to see how it works and paste into your app",
   "keywords": [
     "addon",

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/addons/themes/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-themes",
-  "version": "7.6.10",
+  "version": "7.6.11",
   "description": "Switch between multiple themes for you components in Storybook",
   "keywords": [
     "css",

code/addons/toolbars/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-toolbars",
-  "version": "7.6.10",
+  "version": "7.6.11",
   "description": "Create your own toolbar items that control story rendering",
   "keywords": [
     "addon",

code/addons/viewport/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-viewport",
-  "version": "7.6.10",
+  "version": "7.6.11",
   "description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
   "keywords": [
     "addon",

code/builders/builder-manager/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-manager",
-  "version": "7.6.10",
+  "version": "7.6.11",
   "description": "Storybook manager builder",
   "keywords": [
     "storybook"

code/builders/builder-vite/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-vite",
-  "version": "7.6.10",
+  "version": "7.6.11",
   "description": "A plugin to run and build Storybooks with Vite",
   "homepage": "https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme",
   "bugs": {

code/builders/builder-webpack5/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-webpack5",
-  "version": "7.6.10",
+  "version": "7.6.11",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"

code/deprecated/addons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addons",
-  "version": "7.6.10",
+  "version": "7.6.11",
   "description": "Storybook addons store",
   "keywords": [
     "storybook"