@multiplatform.one/storybook 7.16.0 → 7.17.0

package/src/CreatePreview.tsx

@@ -25,6 +25,7 @@ import {
   Space,
   Size,
   TextAccent,
+  activateThemeConfig,
   getPreset,
   getPresetNames,
   useTheme,
@@ -76,6 +77,12 @@ export interface CreatePreviewI18n {
 export interface CreatePreviewOptions {
   /** ThemeConfig produced by createDefaultThemeConfig(). */
   themeConfig: ThemeConfig;
+  /**
+   * More ThemeConfigs the `tamaguiConfig` toolbar global switches to, by
+   * name, e.g. `{ subset: subsetThemeConfig }`. Each must build a subset of
+   * `themeConfig`'s themes. `themeConfig` stays the default, listed as `full`.
+   */
+  themeConfigs?: Record<string, ThemeConfig>;
   /** i18n configuration for language switching via Storybook globals. */
   i18n: CreatePreviewI18n;
   /** AppProvider component produced by createApp(). */
@@ -92,6 +99,8 @@ export interface CreatePreviewOptions {
   globalTypes?: Record<string, InputType>;
 }
 
+const defaultThemeConfigName = "full";
+
 // ---------------------------------------------------------------------------
 // Knob options map — enum values for Storybook controls
 // ---------------------------------------------------------------------------
@@ -432,6 +441,38 @@ export function createPreview(options: CreatePreviewOptions): Preview {
     globalTypes: extraGlobalTypes = {},
   } = options;
 
+  // -- Tamagui config switch -------------------------------------------------
+
+  const themeConfigsByName: Record<string, ThemeConfig> = {
+    ...options.themeConfigs,
+    [defaultThemeConfigName]: themeConfig,
+  };
+  const themeConfigNames = [
+    defaultThemeConfigName,
+    ...Object.keys(themeConfigsByName).filter((name) => name !== defaultThemeConfigName),
+  ];
+  const switchesThemeConfig = themeConfigNames.length > 1;
+  // Tamagui reads theme values from the themes of the config it first renders
+  // under, for good, so the preview boots on the default config and every
+  // alternate must build a subset of its themes.
+  if (switchesThemeConfig) activateThemeConfig(themeConfig);
+  let activeThemeConfigName = defaultThemeConfigName;
+
+  // Switching runs in a layout effect, not during render: dropping Tamagui's
+  // theme-name cache re-renders every mounted theme consumer. The keyed
+  // AppProvider then remounts the story under the new config before paint.
+  function useActiveThemeConfigName(requested: string): string {
+    const [active, setActive] = useState(activeThemeConfigName);
+    useLayoutEffect(() => {
+      if (requested !== activeThemeConfigName) {
+        activateThemeConfig(themeConfigsByName[requested]);
+        activeThemeConfigName = requested;
+      }
+      setActive(requested);
+    }, [requested]);
+    return active;
+  }
+
   // -- globalTypes -----------------------------------------------------------
 
   const enumKeys = Object.keys(knobOptions);
@@ -513,6 +554,21 @@ export function createPreview(options: CreatePreviewOptions): Preview {
     },
   };
 
+  if (switchesThemeConfig) {
+    generatedGlobalTypes.tamaguiConfig = {
+      name: "Tamagui config",
+      description: "Tamagui config the story renders under",
+      options: themeConfigNames,
+      control: { type: "select" },
+      toolbar: {
+        title: "Tamagui config",
+        icon: "paintbrush",
+        items: themeConfigNames.map((name) => ({ value: name, title: `${name} config` })),
+        dynamicTitle: true,
+      },
+    };
+  }
+
   const globalTypes = { ...generatedGlobalTypes, ...extraGlobalTypes };
 
   // -- initialGlobals --------------------------------------------------------
@@ -533,6 +589,7 @@ export function createPreview(options: CreatePreviewOptions): Preview {
     __themeColors: themeColorNames,
     __themeSwatches: themeSwatches,
     preset: themeConfig.defaultPreset ?? "",
+    ...(switchesThemeConfig && { tamaguiConfig: defaultThemeConfigName }),
   };
   // Register every knob key so Storybook allows setting them from the manager.
   // Use empty string (not undefined) — JSON.stringify strips undefined values,
@@ -639,6 +696,13 @@ export function createPreview(options: CreatePreviewOptions): Preview {
     // all Tamagui components pick it up implicitly through context.
     const colorGlobal = (context.globals.color as string) || "";
 
+    const requestedThemeConfig = context.globals.tamaguiConfig as string | undefined;
+    const themeConfigName = useActiveThemeConfigName(
+      requestedThemeConfig && themeConfigNames.includes(requestedThemeConfig)
+        ? requestedThemeConfig
+        : defaultThemeConfigName,
+    );
+
     // Per-story theme overrides via `parameters.theme` (AC-5.4).
     // Stories can specify e.g. `parameters: { theme: { padding: "large" } }`
     // to pin a specific knob configuration for that story.
@@ -735,7 +799,11 @@ export function createPreview(options: CreatePreviewOptions): Preview {
 
     return (
       <PresetContext.Provider value={presetCtxValue}>
-        <AppProvider themeConfig={themeConfig} systemTheme={resolvedScheme}>
+        <AppProvider
+          key={themeConfigName}
+          themeConfig={themeConfigsByName[themeConfigName]}
+          systemTheme={resolvedScheme}
+        >
           {/* FontKnobStyles lives inside ThemeProvider / KnobBridge so
               Storybook and shipped apps share one mount. A second copy
               here would race the style-tag cleanup. */}

package/types/CreatePreview.d.ts

@@ -34,6 +34,12 @@ export interface CreatePreviewI18n {
 export interface CreatePreviewOptions {
     /** ThemeConfig produced by createDefaultThemeConfig(). */
     themeConfig: ThemeConfig;
+    /**
+     * More ThemeConfigs the `tamaguiConfig` toolbar global switches to, by
+     * name, e.g. `{ subset: subsetThemeConfig }`. Each must build a subset of
+     * `themeConfig`'s themes. `themeConfig` stays the default, listed as `full`.
+     */
+    themeConfigs?: Record<string, ThemeConfig>;
     /** i18n configuration for language switching via Storybook globals. */
     i18n: CreatePreviewI18n;
     /** AppProvider component produced by createApp(). */

package/types/CreatePreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CreatePreview.d.ts","sourceRoot":"","sources":["../src/CreatePreview.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AACf,OAAO,EAEL,KAAK,WAAW,EAsBjB,MAAM,0BAA0B,CAAC;AAKlC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAExD,eAAO,MAAM,uBAAuB,6BAA6B,CAAC;AAClE,eAAO,MAAM,+BAA+B,sCAAsC,CAAC;AACnF,eAAO,MAAM,2BAA2B,kCAAkC,CAAC;AAC3E,eAAO,MAAM,wBAAwB,qCAAqC,CAAC;AAC3E,eAAO,MAAM,wBAAwB,8BAA8B,CAAC;AACpE,eAAO,MAAM,0BAA0B,uCAAuC,CAAC;AAC/E,eAAO,MAAM,0BAA0B,gCAAgC,CAAC;AACxE,eAAO,MAAM,uBAAuB,6BAA6B,CAAC;AAElE;;;;;GAKG;AACH,MAAM,WAAW,OAAO;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACxC,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACrC,UAAU,CAAC,EAAE,KAAK,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,KAAK,GAAG,CAAC,CAAC;CACvD;AAMD,MAAM,WAAW,iBAAiB;IAChC,mEAAmE;IACnE,QAAQ,EAAE;QAAE,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,CAAA;KAAE,CAAC;IAC7D,+DAA+D;IAC/D,SAAS,EAAE,SAAS,MAAM,EAAE,CAAC;IAC7B,yBAAyB;IACzB,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,oBAAoB;IACnC,0DAA0D;IAC1D,WAAW,EAAE,WAAW,CAAC;IACzB,uEAAuE;IACvE,IAAI,EAAE,iBAAiB,CAAC;IACxB,qDAAqD;IACrD,WAAW,EAAE,aAAa,CAAC;QACzB,WAAW,CAAC,EAAE,WAAW,CAAC;QAC1B,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;QAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC;KACtB,CAAC,CAAC;IACH,+DAA+D;IAC/D,UAAU,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IACnC,oDAAoD;IACpD,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACrC,uDAAuD;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACzC;AA4UD,wBAAgB,aAAa,CAAC,OAAO,EAAE,oBAAoB,GAAG,OAAO,CA0WpE"}
+{"version":3,"file":"CreatePreview.d.ts","sourceRoot":"","sources":["../src/CreatePreview.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AACf,OAAO,EAEL,KAAK,WAAW,EAuBjB,MAAM,0BAA0B,CAAC;AAKlC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAExD,eAAO,MAAM,uBAAuB,6BAA6B,CAAC;AAClE,eAAO,MAAM,+BAA+B,sCAAsC,CAAC;AACnF,eAAO,MAAM,2BAA2B,kCAAkC,CAAC;AAC3E,eAAO,MAAM,wBAAwB,qCAAqC,CAAC;AAC3E,eAAO,MAAM,wBAAwB,8BAA8B,CAAC;AACpE,eAAO,MAAM,0BAA0B,uCAAuC,CAAC;AAC/E,eAAO,MAAM,0BAA0B,gCAAgC,CAAC;AACxE,eAAO,MAAM,uBAAuB,6BAA6B,CAAC;AAElE;;;;;GAKG;AACH,MAAM,WAAW,OAAO;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACxC,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACrC,UAAU,CAAC,EAAE,KAAK,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,KAAK,GAAG,CAAC,CAAC;CACvD;AAMD,MAAM,WAAW,iBAAiB;IAChC,mEAAmE;IACnE,QAAQ,EAAE;QAAE,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,CAAA;KAAE,CAAC;IAC7D,+DAA+D;IAC/D,SAAS,EAAE,SAAS,MAAM,EAAE,CAAC;IAC7B,yBAAyB;IACzB,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,oBAAoB;IACnC,0DAA0D;IAC1D,WAAW,EAAE,WAAW,CAAC;IACzB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IAC3C,uEAAuE;IACvE,IAAI,EAAE,iBAAiB,CAAC;IACxB,qDAAqD;IACrD,WAAW,EAAE,aAAa,CAAC;QACzB,WAAW,CAAC,EAAE,WAAW,CAAC;QAC1B,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;QAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC;KACtB,CAAC,CAAC;IACH,+DAA+D;IAC/D,UAAU,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IACnC,oDAAoD;IACpD,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACrC,uDAAuD;IACvD,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;CACzC;AA8UD,wBAAgB,aAAa,CAAC,OAAO,EAAE,oBAAoB,GAAG,OAAO,CAqapE"}