@multiplatform.one/storybook 7.34.4 → 7.36.0

package/src/CreatePreview.tsx

@@ -14,25 +14,26 @@ import {
   BorderRadius,
   BorderWidth,
   CornerSmoothing,
-  Density,
   DisabledStyle,
   Elevation,
   FillStyle,
   FontWeight,
   HeadingFont,
   PageTitleScale,
-  animationNames,
-  Space,
-  Size,
+  motionStops,
+  normalizeAnimationKnob,
+  animationDurations,
   TableZebra,
   TextAccent,
   activateThemeConfig,
   getPreset,
   getPresetNames,
+  useActiveScale,
   useTheme,
   PresetContext,
   defaultPreset,
   defaultKnobs,
+  defaultScaleInputs,
 } from "@multiplatform.one/theme";
 import { config } from "@multiplatform.one/platform";
 import { CookiesProvider } from "react-cookie";
@@ -117,11 +118,6 @@ const knobOptions: Record<string, readonly string[]> = {
   cornerSmoothing: Object.values(CornerSmoothing),
   borderWidth: Object.values(BorderWidth),
   elevation: Object.values(Elevation),
-  space: Object.values(Space),
-  size: Object.values(Size),
-  // LC-76 TWO-AXES: density is its own dial (compact steps space only), so
-  // the size × density matrix is sweepable from the toolbar / URL globals.
-  density: Object.values(Density),
   textAccent: Object.values(TextAccent),
   headingFont: Object.values(HeadingFont),
   bodyFont: Object.values(BodyFont),
@@ -129,7 +125,7 @@ const knobOptions: Record<string, readonly string[]> = {
   // D-11 hero-H1 dial: the page-title step is sweepable so the VERIFY probes
   // (and humans) can flip moderate/display from the toolbar or URL globals.
   pageTitleScale: Object.values(PageTitleScale),
-  animation: ["none", ...animationNames],
+  animation: ["none", ...motionStops],
   // LC-40 DISABLED-VISIBLE: the disabled-treatment dial is sweepable so the
   // VERIFY probes (and humans) can flip keepLabel/dimWhole from the toolbar
   // or via URL globals.
@@ -143,8 +139,6 @@ const stateKnobFields = [
   "borderRadius",
   "borderWidth",
   "elevation",
-  "space",
-  "size",
   "textAccent",
   "headingFont",
   "bodyFont",
@@ -245,7 +239,7 @@ function AnimationNamesEmitter() {
   useEffect(() => {
     if (emittedRef.current) return;
     emittedRef.current = true;
-    getChannelEmit()?.(animationNamesChannelEvent, animationNames as string[]);
+    getChannelEmit()?.(animationNamesChannelEvent, [...motionStops]);
   }, []);
   return null;
 }
@@ -593,6 +587,14 @@ export function createPreview(options: CreatePreviewOptions): Preview {
     // Publish registered preset names so the manager-side ThemePanel can
     // render a preset selector without importing the theme package.
     __presetNames: getPresetNames(),
+    // Each preset's token scale (control / type px), so the picker can say
+    // what a switch does to sizes and spacing.
+    __presetScales: Object.fromEntries(
+      getPresetNames().map((name) => {
+        const scale = getPreset(name)?.scale ?? defaultScaleInputs;
+        return [name, { control: scale.control, type: scale.type }];
+      }),
+    ),
     // Publish available theme color names so the ThemePanel can show only
     // colors that actually have registered Tamagui sub-themes.
     __themeColors: themeColorNames,
@@ -625,6 +627,12 @@ export function createPreview(options: CreatePreviewOptions): Preview {
     schemes: ["light", "dark"],
     themeColors: themeColorNames,
     presets: ["", ...getPresetNames()],
+    presetThemes: Object.fromEntries(
+      getPresetNames().flatMap((name) => {
+        const theme = getPreset(name)?.theme;
+        return theme ? [[name, theme]] : [];
+      }),
+    ),
   };
 
   // -- parameters ------------------------------------------------------------
@@ -711,20 +719,24 @@ export function createPreview(options: CreatePreviewOptions): Preview {
     const colorGlobal = (context.globals.color as string) || "";
 
     const requestedThemeConfig = context.globals.tamaguiConfig as string | undefined;
-    const themeConfigName = useActiveThemeConfigName(
+    const requestedThemeConfigName =
       requestedThemeConfig && themeConfigNames.includes(requestedThemeConfig)
         ? requestedThemeConfig
-        : defaultThemeConfigName,
-    );
+        : defaultThemeConfigName;
+    const themeConfigName = useActiveThemeConfigName(requestedThemeConfigName);
 
     // 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.
     const storyThemeParams = context.parameters?.theme as Partial<Knobs> | undefined;
 
-    // Resolve the active preset (if any) from the `preset` global.
-    const activePresetName = context.globals.preset as string | undefined;
+    // Resolve the active preset (if any) from the `preset` global. Its token
+    // scale is installed for the active Tamagui config before the story
+    // renders; the CSS repaint itself rides ThemeProvider's ScaleStyles.
+    const activePresetName = (context.globals.preset as string | undefined) || undefined;
     const activePreset = activePresetName ? getPreset(activePresetName) : undefined;
+    const presetTheme = (colorGlobal || activePreset?.theme || defaultPreset.theme) as ThemeName;
+    const scaleId = useActiveScale(themeConfigsByName[requestedThemeConfigName], activePresetName);
 
     const knobUpdate = useMemo(() => {
       const result: Partial<Knobs> = {};
@@ -745,6 +757,7 @@ export function createPreview(options: CreatePreviewOptions): Preview {
           (result as Record<string, unknown>)[key] = defaultKnobs[key];
         }
       }
+      result.animation = normalizeAnimationKnob(result.animation) ?? defaultKnobs.animation;
       for (const state of stateKeys) {
         const stateObj: Record<string, string> = {};
         let hasValues = false;
@@ -778,28 +791,19 @@ export function createPreview(options: CreatePreviewOptions): Preview {
       () => ({
         preset: {
           ...defaultPreset,
-          theme: (colorGlobal || defaultPreset.theme) as ThemeName,
+          theme: presetTheme,
           knobs: { ...defaultKnobs, ...knobUpdate } as Knobs,
         },
         overrides: undefined,
+        presetName: activePresetName,
+        scaleId,
       }),
-      [knobUpdate, colorGlobal],
+      [knobUpdate, presetTheme, activePresetName, scaleId],
     );
 
     const animationValue = presetCtxValue.preset.knobs.animation;
     useEffect(() => {
-      const ms =
-        animationValue === "none"
-          ? "0ms"
-          : animationValue === "quick"
-            ? "100ms"
-            : animationValue === "medium"
-              ? "200ms"
-              : animationValue === "slow" || animationValue === "lazy"
-                ? "350ms"
-                : animationValue === "bouncy"
-                  ? "300ms"
-                  : "200ms";
+      const ms = `${animationValue === "none" ? 0 : animationDurations[animationValue]}ms`;
       document.documentElement.style.setProperty("--mp-transition", ms);
     }, [animationValue]);
 
@@ -814,7 +818,7 @@ export function createPreview(options: CreatePreviewOptions): Preview {
     return (
       <PresetContext.Provider value={presetCtxValue}>
         <AppProvider
-          key={themeConfigName}
+          key={`${themeConfigName}:${scaleId}`}
           themeConfig={themeConfigsByName[themeConfigName]}
           systemTheme={resolvedScheme}
         >
@@ -825,9 +829,9 @@ export function createPreview(options: CreatePreviewOptions): Preview {
           <FrappeDebugEmitter />
           <BaseThemeColorEmitter />
           {/* Always wrap in Theme so the host node exists on the default
-              colour cell too. An empty colour global keeps the scheme
+              colour cell too. An empty preset theme keeps the scheme
               theme; a named colour is the Tamagui subtheme. */}
-          <Theme name={(colorGlobal || resolvedScheme) as ThemeName}>
+          <Theme name={(presetTheme || resolvedScheme) as ThemeName}>
             <ThemeColorEmitter />
             <ColorChannelEmitter event={accentColorsChannelEvent} prefix="accent" />
             {storyContent}
@@ -835,8 +839,8 @@ export function createPreview(options: CreatePreviewOptions): Preview {
           {/* Opposite scheme emitters */}
           <Theme name={oppositeScheme as ThemeName}>
             <OppositeThemeColorEmitter />
-            {colorGlobal ? (
-              <Theme name={colorGlobal as ThemeName}>
+            {presetTheme ? (
+              <Theme name={presetTheme}>
                 <ColorChannelEmitter event={baseOppositeChannelEvent} />
                 <ColorChannelEmitter event={accentOppositeChannelEvent} prefix="accent" />
               </Theme>

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,EAwBjB,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;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,GAAG,OAAO,GAAG,MAAM,KAAK,IAAI,CAAC;IAC/D,+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;AAgVD,wBAAgB,aAAa,CAAC,OAAO,EAAE,oBAAoB,GAAG,OAAO,CA2apE"}
+{"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,EAyBjB,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;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,GAAG,OAAO,GAAG,MAAM,KAAK,IAAI,CAAC;IAC/D,+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;AAyUD,wBAAgB,aAAa,CAAC,OAAO,EAAE,oBAAoB,GAAG,OAAO,CAqbpE"}