Merge branch 'next' into bug/32603

Author: yannbf

CHANGELOG.md

@@ -1,3 +1,10 @@
+## 10.0.3
+
+- Core: Better handling for TypeScript satisfies/as syntaxes - [#32891](https://github.com/storybookjs/storybook/pull/32891), thanks @yannbf!
+- Core: Fix wrong import to fix Yarn PnP support - [#32928](https://github.com/storybookjs/storybook/pull/32928), thanks @yannbf!
+- ESlint: Update `@storybook/experimental-nextjs-vite` in `no-renderer-packages` rule - [#32909](https://github.com/storybookjs/storybook/pull/32909), thanks @ndelangen!
+- React Native: Update withStorybook setup instructions - [#32919](https://github.com/storybookjs/storybook/pull/32919), thanks @dannyhw!
+
 ## 10.0.2
 
 - CLI: Fix glob string formatting in csf-factories codemod - [#32880](https://github.com/storybookjs/storybook/pull/32880), thanks @yannbf!

code/core/src/component-testing/components/StatusBadge.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import { type Color, styled, typography } from 'storybook/theming';
+import { TooltipNote, WithTooltip } from 'storybook/internal/components';
 
-import { TooltipNote, WithTooltip } from '../../components';
+import { type Color, styled, typography } from 'storybook/theming';
 
 export type PlayStatus = 'rendering' | 'playing' | 'completed' | 'errored' | 'aborted';
 

code/core/src/manager/globals/exports.ts

@@ -370,6 +370,7 @@ export default {
     'css',
     'darken',
     'ensure',
+    'getPreferredColorScheme',
     'ignoreSsrWarning',
     'isPropValid',
     'jsx',

code/core/src/theming/create.ts

@@ -4,18 +4,28 @@ import lightThemeVars from './themes/light';
 import type { ThemeVars, ThemeVarsPartial } from './types';
 import { getPreferredColorScheme } from './utils';
 
-export const themes: { light: ThemeVars; dark: ThemeVars; normal: ThemeVars } = {
+interface Themes {
+  light: ThemeVars;
+  dark: ThemeVars;
+  normal: ThemeVars;
+}
+
+const themesBase: Omit<Themes, 'normal'> = {
   light: lightThemeVars,
   dark: darkThemeVars,
-  normal: lightThemeVars,
+};
+
+const preferredColorScheme = getPreferredColorScheme();
+
+export const themes: Themes = {
+  ...themesBase,
+  normal: themesBase[preferredColorScheme],
 };
 
 interface Rest {
   [key: string]: any;
 }
 
-const preferredColorScheme = getPreferredColorScheme();
-
 export const create = (
   vars: ThemeVarsPartial = { base: preferredColorScheme },
   rest?: Rest

code/core/src/theming/index.ts

@@ -40,7 +40,7 @@ export * from './create';
 export * from './convert';
 export * from './ensure';
 
-export { lightenColor as lighten, darkenColor as darken } from './utils';
+export { lightenColor as lighten, darkenColor as darken, getPreferredColorScheme } from './utils';
 
 export const ignoreSsrWarning =
   '/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */';

code/core/src/theming/tests/create.test.js

@@ -1,6 +1,11 @@
-import { describe, expect, it } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { create } from '../create';
+import { getPreferredColorScheme } from './../utils';
+
+vi.mock('./../utils', () => ({
+  getPreferredColorScheme: vi.fn().mockReturnValue('light'),
+}));
 
 describe('create base', () => {
   it('should create a theme with minimal viable theme', () => {
@@ -142,3 +147,25 @@ describe('create extend', () => {
     expect(result.base).toEqual('light');
   });
 });
+
+describe('themes', () => {
+  beforeEach(() => {
+    vi.resetModules();
+  });
+
+  it('should set `normal` to `light` theme when user preference is `light`', async () => {
+    getPreferredColorScheme.mockReturnValue('light');
+
+    const { themes } = await import('./../create');
+
+    expect(themes.normal).toBe(themes.light);
+  });
+
+  it('should set `normal` to `dark` theme when user preference is `dark`', async () => {
+    getPreferredColorScheme.mockReturnValue('dark');
+
+    const { themes } = await import('./../create');
+
+    expect(themes.normal).toBe(themes.dark);
+  });
+});

docs/_snippets/storybook-disable-telemetry-env.md

@@ -1,3 +1,3 @@
 ```shell renderer="common" language="js"
-STORYBOOK_DISABLE_TELEMETRY=1 yarn storybook
+STORYBOOK_DISABLE_TELEMETRY=true yarn storybook
 ```

docs/addons/addon-migration-guide.mdx

@@ -104,7 +104,7 @@ export default defineConfig(async (options) => {
 +   const packageJson = (
 +     await import("./package.json", { with: { type: "json" } })
 +   ).default;
-+ 
++
   const {
     bundler: {
 -      exportEntries = [],
@@ -131,7 +131,7 @@ export default defineConfig(async (options) => {
   };
 
   const configs: Options[] = [];
-- 
+-
 -   // export entries are entries meant to be manually imported by the user
 -   // they are not meant to be loaded by the manager or preview
 -   // they'll be usable in both node and browser environments, depending on which features and modules they depend on
@@ -225,13 +225,18 @@ Update `tsconfig.json`.
 ```diff title="tsconfig.json"
 {
   "compilerOptions": {
-    // ...
--    "target": "es2023",
+    // …
++    "moduleResolution": "bundler",
+    // …
+-    "module": "commonjs",
++    "module": "preserve",
+    // …
+-    "target": "ES2020",
 +    "target": "esnext",
-    // ...
--    "lib": ["es2023", "dom", "dom.iterable"],
+    // …
+-    "lib": ["es2020", "dom", "dom.iterable"],
 +    "lib": ["esnext", "dom", "dom.iterable"],
-    // ...
+    // …
 -    "rootDir": "./src",
 +    "rootDir": ".",
   },
@@ -292,7 +297,7 @@ With CSF Factories, users can chain their preview configuration and benefit from
 - export default {};
 + import { definePreviewAddon } from "storybook/internal/csf";
 + import addonAnnotations from "./preview";
-+ 
++
 + export default () => definePreviewAddon(addonAnnotations);
 ```
 
@@ -356,7 +361,7 @@ For a full list of changes, please visit the [Migration.md](https://github.com/s
 
 ## Migration example
 
-For a complete example of an addon updated to support Storybook 10.0, refer to the [Addon Kit migration PR](https://github.com/storybookjs/addon-kit/pull/82). 
+For a complete example of an addon updated to support Storybook 10.0, refer to the [Addon Kit migration PR](https://github.com/storybookjs/addon-kit/pull/82).
 Once merged, it will demonstrate all the necessary and recommended changes for Storybook 10.
 
 ## Releasing

docs/configure/user-interface/theming.mdx

@@ -11,7 +11,7 @@ Storybook is theme-able using a lightweight theming API.
 
 It's possible to theme Storybook globally.
 
-Storybook includes two themes that look good out of the box: "light" and "dark". Unless you've set your preferred color scheme as dark, Storybook will use the light theme as default.
+Storybook includes a set of built-in themes that you can use to customize the appearance of your Storybook UI. The built-in themes are light, dark, and the "normal" theme that matches your preferred color scheme. Unless you specify otherwise, Storybook uses the normal theme by default.
 
 As an example, you can tell Storybook to use the "dark" theme by modifying [`.storybook/manager.js`](./features-and-behavior.mdx):
 
@@ -25,7 +25,7 @@ When setting a theme, set a complete theme object. The theme is replaced, not co
 
 ## Theming docs
 
-[Storybook Docs](../../writing-docs/index.mdx) uses the same theme system as Storybook’s UI but is themed independently from the main UI.
+[Storybook Docs](../../writing-docs/index.mdx) uses the same theme system as Storybook’s UI but is themed independently from the main UI. The default theme for Docs is always the "light" theme, regardless of the main UI theme.
 
 Supposing you have a Storybook theme defined for the main UI in [`.storybook/manager.js`](./features-and-behavior.mdx):