@multiplatform.one/storybook 6.0.0

package/dist/cjs/CreatePreview.cjs

@@ -0,0 +1,561 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var CreatePreview_exports = {};
+__export(CreatePreview_exports, {
+  accentColorsChannelEvent: () => accentColorsChannelEvent,
+  accentOppositeChannelEvent: () => accentOppositeChannelEvent,
+  animationNamesChannelEvent: () => animationNamesChannelEvent,
+  baseOppositeChannelEvent: () => baseOppositeChannelEvent,
+  baseThemeColorsChannelEvent: () => baseThemeColorsChannelEvent,
+  createPreview: () => createPreview,
+  frappeDebugChannelEvent: () => frappeDebugChannelEvent,
+  themeColorsChannelEvent: () => themeColorsChannelEvent,
+  themeColorsOppositeChannelEvent: () => themeColorsOppositeChannelEvent
+});
+module.exports = __toCommonJS(CreatePreview_exports);
+var import_react = require("react");
+var import_theme = require("@multiplatform.one/theme");
+var import_platform = require("@multiplatform.one/platform");
+var import_react_cookie = require("react-cookie");
+var import_tamagui = require("tamagui");
+var import_jsx_runtime = require("react/jsx-runtime");
+const themeColorsChannelEvent = "theme-addon/theme-colors";
+const themeColorsOppositeChannelEvent = "theme-addon/theme-colors-opposite";
+const baseThemeColorsChannelEvent = "theme-addon/base-theme-colors";
+const baseOppositeChannelEvent = "theme-addon/base-colors-opposite";
+const accentColorsChannelEvent = "theme-addon/accent-colors";
+const accentOppositeChannelEvent = "theme-addon/accent-colors-opposite";
+const animationNamesChannelEvent = "theme-addon/animation-names";
+const frappeDebugChannelEvent = "frappe-addon/debug-state";
+const knobOptions = {
+  fillStyle: Object.values(import_theme.FillStyle),
+  borderRadius: Object.values(import_theme.BorderRadius),
+  borderWidth: Object.values(import_theme.BorderWidth),
+  elevation: Object.values(import_theme.Elevation),
+  space: Object.values(import_theme.Space),
+  size: Object.values(import_theme.Size),
+  textAccent: Object.values(import_theme.TextAccent),
+  headingFont: Object.values(import_theme.HeadingFont),
+  bodyFont: Object.values(import_theme.BodyFont),
+  fontWeight: Object.values(import_theme.FontWeight),
+  animation: ["none", ...import_theme.animationNames]
+};
+const stateKnobFields = ["fillStyle", "borderRadius", "borderWidth", "elevation", "space", "size", "textAccent", "headingFont", "bodyFont", "fontWeight"];
+function parseValue(value) {
+  if (typeof value !== "string") return value;
+  try {
+    return JSON.parse(value);
+  } catch {
+    return value;
+  }
+}
+const toTitleCase = str => str.replace(/([A-Z])/g, " $1").replace(/^./, s => s.toUpperCase());
+function createControl(key) {
+  const name = toTitleCase(key);
+  const values = knobOptions[key] ?? [];
+  const serialized = values.map(value => value);
+  const labels = Object.fromEntries(serialized.map(v => [v, v.replace("$", "")]));
+  const fallback = import_theme.defaultKnobs[key];
+  return {
+    name,
+    description: name.toLowerCase(),
+    options: serialized,
+    control: {
+      type: "select",
+      labels
+    },
+    ...(fallback !== void 0 && {
+      defaultValue: fallback
+    })
+  };
+}
+function CanvasBackground({
+  children
+}) {
+  const tamaguiTheme = (0, import_tamagui.useTheme)();
+  const bg = tamaguiTheme.background?.val;
+  (0, import_react.useLayoutEffect)(() => {
+    if (bg) {
+      document.body.style.backgroundColor = bg;
+      document.documentElement.style.backgroundColor = bg;
+    }
+  }, [bg]);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+    flex: 1,
+    minHeight: "100vh",
+    backgroundColor: "$background",
+    children
+  });
+}
+let _channelEmit = null;
+function getChannelEmit() {
+  if (_channelEmit) return _channelEmit;
+  try {
+    const mod = require("storybook/preview-api");
+    const channel = mod.addons.getChannel();
+    _channelEmit = (event, data) => channel.emit(event, data);
+    return _channelEmit;
+  } catch {
+    return null;
+  }
+}
+function AnimationNamesEmitter() {
+  const emittedRef = (0, import_react.useRef)(false);
+  (0, import_react.useEffect)(() => {
+    if (emittedRef.current) return;
+    emittedRef.current = true;
+    getChannelEmit()?.(animationNamesChannelEvent, import_theme.animationNames);
+  }, []);
+  return null;
+}
+function FrappeDebugEmitter() {
+  const prevRef = (0, import_react.useRef)("");
+  const syncRef = (0, import_react.useRef)(null);
+  const [tick, setTick] = (0, import_react.useState)(0);
+  (0, import_react.useEffect)(() => {
+    let cancelled = false;
+    async function resolve() {
+      try {
+        const {
+          __getActiveSyncModule
+        } = await import("@multiplatform.one/frappe");
+        const sync = __getActiveSyncModule();
+        if (sync && !cancelled) {
+          syncRef.current = sync;
+          setTick(t => t + 1);
+          return sync.subscribeStore(() => {
+            if (!cancelled) setTick(t => t + 1);
+          });
+        }
+      } catch {}
+    }
+    const cleanupPromise = resolve();
+    let attempts = 0;
+    const interval = setInterval(async () => {
+      attempts++;
+      if (syncRef.current || cancelled || attempts >= 10) {
+        clearInterval(interval);
+        return;
+      }
+      await resolve();
+    }, 2e3);
+    return () => {
+      cancelled = true;
+      clearInterval(interval);
+      cleanupPromise.then(unsub => unsub?.());
+    };
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (!syncRef.current) return;
+    const emit = getChannelEmit();
+    if (!emit) return;
+    try {
+      const state = syncRef.current.__debug();
+      const key = JSON.stringify(state);
+      if (key === prevRef.current) return;
+      prevRef.current = key;
+      emit(frappeDebugChannelEvent, state);
+    } catch {}
+  }, [tick]);
+  return null;
+}
+function ThemeColorEmitter() {
+  const tamaguiTheme = (0, import_tamagui.useTheme)();
+  const prevRef = (0, import_react.useRef)("");
+  (0, import_react.useEffect)(() => {
+    const colors = [];
+    for (let i = 1; i <= 12; i++) {
+      const token = tamaguiTheme[`color${i}`];
+      colors.push(token?.val ?? "");
+    }
+    const key = colors.join("|");
+    if (key === prevRef.current) return;
+    prevRef.current = key;
+    getChannelEmit()?.(themeColorsChannelEvent, colors);
+  }, [tamaguiTheme]);
+  return null;
+}
+function BaseThemeColorEmitter() {
+  const tamaguiTheme = (0, import_tamagui.useTheme)();
+  const prevRef = (0, import_react.useRef)("");
+  (0, import_react.useEffect)(() => {
+    const colors = [];
+    for (let i = 1; i <= 12; i++) {
+      const token = tamaguiTheme[`color${i}`];
+      colors.push(token?.val ?? "");
+    }
+    const key = colors.join("|");
+    if (key === prevRef.current) return;
+    prevRef.current = key;
+    getChannelEmit()?.(baseThemeColorsChannelEvent, colors);
+  }, [tamaguiTheme]);
+  return null;
+}
+function OppositeThemeColorEmitter() {
+  const tamaguiTheme = (0, import_tamagui.useTheme)();
+  const prevRef = (0, import_react.useRef)("");
+  (0, import_react.useEffect)(() => {
+    const colors = [];
+    for (let i = 1; i <= 12; i++) {
+      const token = tamaguiTheme[`color${i}`];
+      colors.push(token?.val ?? "");
+    }
+    const key = colors.join("|");
+    if (key === prevRef.current) return;
+    prevRef.current = key;
+    getChannelEmit()?.(themeColorsOppositeChannelEvent, colors);
+  }, [tamaguiTheme]);
+  return null;
+}
+function ColorChannelEmitter({
+  event,
+  prefix = "color"
+}) {
+  const tamaguiTheme = (0, import_tamagui.useTheme)();
+  const prevRef = (0, import_react.useRef)("");
+  (0, import_react.useEffect)(() => {
+    const colors = [];
+    let found = false;
+    for (let i = 1; i <= 12; i++) {
+      const token = tamaguiTheme[`${prefix}${i}`];
+      const val = token?.val ?? "";
+      colors.push(val);
+      if (val) found = true;
+    }
+    if (!found) return;
+    const key = colors.join("|");
+    if (key === prevRef.current) return;
+    prevRef.current = key;
+    getChannelEmit()?.(event, colors);
+  }, [tamaguiTheme, event, prefix]);
+  return null;
+}
+const tamaguiPropLeakPatterns = ["pressTheme", "scaleIcon", "borderTopRightRadius", "borderBottomRightRadius", "borderTopLeftRadius", "borderBottomLeftRadius"];
+function suppressTamaguiDomWarnings() {
+  if (typeof window === "undefined") return;
+  const origError = console.error;
+  console.error = (...args) => {
+    const msg = args.map(a => typeof a === "string" ? a : "").join(" ");
+    if (msg.includes("React does not recognize the") && tamaguiPropLeakPatterns.some(p => msg.includes(p))) {
+      return;
+    }
+    origError(...args);
+  };
+}
+suppressTamaguiDomWarnings();
+function createPreview(options) {
+  const {
+    themeConfig,
+    i18n,
+    AppProvider,
+    decorators: extraDecorators = [],
+    parameters: extraParameters = {},
+    globalTypes: extraGlobalTypes = {}
+  } = options;
+  const enumKeys = Object.keys(knobOptions);
+  const generatedGlobalTypes = {};
+  for (const key of enumKeys) {
+    generatedGlobalTypes[key] = createControl(key);
+  }
+  for (const state of ["hover", "press", "focus", "focusVisible"]) {
+    for (const field of stateKnobFields) {
+      const stateKey = `${state}.${field}`;
+      const values = knobOptions[field] ?? [];
+      const serialized = values.map(value => value);
+      const labels = Object.fromEntries(serialized.map(v => [v, v.replace("$", "")]));
+      generatedGlobalTypes[stateKey] = {
+        name: `${toTitleCase(state)} ${toTitleCase(field)}`,
+        description: `${state} override for ${field}`,
+        options: serialized,
+        control: {
+          type: "select",
+          labels
+        },
+        defaultValue: ""
+      };
+    }
+  }
+  const themeColorNames = ["", ...themeConfig.themeColors];
+  const themeSwatches = {};
+  const allThemes = themeConfig.tamagui.themes;
+  if (allThemes) {
+    for (const name of themeConfig.themeColors) {
+      const theme = allThemes[`light_${name}`] ?? allThemes[name];
+      if (!theme) continue;
+      const token = theme.color7;
+      if (typeof token === "string") {
+        themeSwatches[name] = token;
+      } else if (token && typeof token === "object" && "val" in token) {
+        themeSwatches[name] = String(token.val);
+      }
+    }
+  }
+  generatedGlobalTypes.color = {
+    name: "Theme",
+    description: "Theme color palette",
+    options: themeColorNames,
+    control: {
+      type: "select",
+      labels: Object.fromEntries(themeColorNames.map(v => [v, v || "(none)"]))
+    }
+  };
+  generatedGlobalTypes.scheme = {
+    name: "Scheme",
+    description: "Color scheme (light/dark/system)",
+    options: ["system", "light", "dark"],
+    control: {
+      type: "select"
+    }
+  };
+  generatedGlobalTypes.locale = {
+    name: "Locale",
+    description: "Controls internationalization language",
+    options: [...i18n.languages],
+    control: {
+      type: "select"
+    },
+    toolbar: {
+      title: "Locale",
+      items: [...i18n.languages],
+      dynamicTitle: true
+    }
+  };
+  const globalTypes = {
+    ...generatedGlobalTypes,
+    ...extraGlobalTypes
+  };
+  const initialGlobals = {
+    locale: import_platform.config.get("I18N_DEFAULT_LANGUAGE", i18n.defaultLanguage),
+    color: "",
+    scheme: "system",
+    // Publish registered preset names so the manager-side ThemePanel can
+    // render a preset selector without importing the theme package.
+    __presetNames: (0, import_theme.getPresetNames)(),
+    // Publish available theme color names so the ThemePanel can show only
+    // colors that actually have registered Tamagui sub-themes.
+    __themeColors: themeColorNames,
+    __themeSwatches: themeSwatches,
+    preset: themeConfig.defaultPreset ?? ""
+  };
+  for (const key of enumKeys) {
+    if (!(key in initialGlobals)) {
+      initialGlobals[key] = "";
+    }
+  }
+  for (const state of ["hover", "press", "focus", "focusVisible"]) {
+    for (const field of stateKnobFields) {
+      initialGlobals[`${state}.${field}`] = "";
+    }
+  }
+  const defaultParameters = {
+    actions: {
+      argTypesRegex: "^on[A-Z].*"
+    },
+    layout: "padded",
+    viewMode: "story",
+    controls: {
+      expanded: true,
+      hideNoControlsWarning: true,
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/
+      }
+    },
+    // Disable the built-in backgrounds addon — the CanvasBackground component
+    // manages the preview background via the Tamagui $background token so it
+    // stays in sync with the active color scheme.
+    backgrounds: {
+      disable: true
+    },
+    previewTabs: {
+      "storybook/docs/panel": {
+        hidden: true
+      }
+    },
+    a11y: {
+      test: false
+    },
+    docs: {
+      codePanel: true
+    },
+    darkMode: {
+      stylePreview: true
+    }
+  };
+  function FrameworkDecoratorInner({
+    Story,
+    context
+  }) {
+    const [knobs, setKnobs] = (0, import_theme.useTheme)();
+    const schemeGlobal = context.globals.scheme || "system";
+    const [resolvedScheme, setResolvedScheme] = (0, import_react.useState)(() => {
+      if (schemeGlobal === "light" || schemeGlobal === "dark") return schemeGlobal;
+      if (typeof window !== "undefined" && window.matchMedia) {
+        return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+      }
+      return "light";
+    });
+    (0, import_react.useEffect)(() => {
+      if (schemeGlobal === "light" || schemeGlobal === "dark") {
+        setResolvedScheme(schemeGlobal);
+        return;
+      }
+      if (typeof window === "undefined" || !window.matchMedia) {
+        setResolvedScheme("light");
+        return;
+      }
+      const mq = window.matchMedia("(prefers-color-scheme: dark)");
+      const handler = () => setResolvedScheme(mq.matches ? "dark" : "light");
+      handler();
+      mq.addEventListener("change", handler);
+      return () => mq.removeEventListener("change", handler);
+    }, [schemeGlobal]);
+    const colorGlobal = context.globals.color || "";
+    const storyThemeParams = context.parameters?.theme;
+    const activePresetName = context.globals.preset;
+    const activePreset = activePresetName ? (0, import_theme.getPreset)(activePresetName) : void 0;
+    const knobUpdate = (0, import_react.useMemo)(() => {
+      const result = {};
+      const stateKeys = /* @__PURE__ */new Set(["hover", "press", "focus", "focusVisible"]);
+      for (const key of Object.keys(knobs)) {
+        if (stateKeys.has(key)) continue;
+        if (storyThemeParams && key in storyThemeParams) {
+          result[key] = storyThemeParams[key];
+        } else if (key in context.globals && context.globals[key] !== void 0 && context.globals[key] !== "") {
+          result[key] = parseValue(context.globals[key]);
+        } else if (activePreset && key in activePreset.knobs) {
+          result[key] = activePreset.knobs[key];
+        } else {
+          result[key] = import_theme.defaultKnobs[key];
+        }
+      }
+      for (const state of stateKeys) {
+        const stateObj = {};
+        let hasValues = false;
+        for (const field of stateKnobFields) {
+          const globalKey = `${state}.${field}`;
+          const val = context.globals[globalKey];
+          if (val) {
+            stateObj[field] = val;
+            hasValues = true;
+          }
+        }
+        if (hasValues) {
+          result[state] = stateObj;
+        }
+      }
+      return result;
+    }, [knobs, context.globals, storyThemeParams, activePreset]);
+    (0, import_react.useEffect)(() => {
+      setKnobs(knobUpdate);
+    }, [knobUpdate, setKnobs]);
+    (0, import_react.useEffect)(() => {
+      i18n.instance.changeLanguage(context.globals.locale);
+    }, [context.globals.locale]);
+    const presetCtxValue = (0, import_react.useMemo)(() => ({
+      preset: {
+        ...import_theme.defaultPreset,
+        theme: colorGlobal || import_theme.defaultPreset.theme,
+        knobs: {
+          ...import_theme.defaultKnobs,
+          ...knobUpdate
+        }
+      },
+      overrides: void 0
+    }), [knobUpdate, colorGlobal]);
+    const animationValue = presetCtxValue.preset.knobs.animation;
+    (0, import_react.useEffect)(() => {
+      const ms = animationValue === "none" ? "0ms" : animationValue === "quick" ? "100ms" : animationValue === "medium" ? "200ms" : animationValue === "slow" || animationValue === "lazy" ? "350ms" : animationValue === "bouncy" ? "300ms" : "200ms";
+      document.documentElement.style.setProperty("--mp-transition", ms);
+    }, [animationValue]);
+    const storyContent = /* @__PURE__ */(0, import_jsx_runtime.jsx)(CanvasBackground, {
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(Story, {
+        ...context
+      })
+    });
+    const oppositeScheme = resolvedScheme === "dark" ? "light" : "dark";
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_theme.PresetContext.Provider, {
+      value: presetCtxValue,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(AppProvider, {
+        themeConfig,
+        systemTheme: resolvedScheme,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(AnimationNamesEmitter, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(FrappeDebugEmitter, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(BaseThemeColorEmitter, {}), colorGlobal ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Theme, {
+          name: colorGlobal,
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(ThemeColorEmitter, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ColorChannelEmitter, {
+            event: accentColorsChannelEvent,
+            prefix: "accent"
+          }), storyContent]
+        }) : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(ThemeColorEmitter, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ColorChannelEmitter, {
+            event: accentColorsChannelEvent,
+            prefix: "accent"
+          }), storyContent]
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Theme, {
+          name: oppositeScheme,
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(OppositeThemeColorEmitter, {}), colorGlobal ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Theme, {
+            name: colorGlobal,
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(ColorChannelEmitter, {
+              event: baseOppositeChannelEvent
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ColorChannelEmitter, {
+              event: accentOppositeChannelEvent,
+              prefix: "accent"
+            })]
+          }) : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(ColorChannelEmitter, {
+              event: baseOppositeChannelEvent
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ColorChannelEmitter, {
+              event: accentOppositeChannelEvent,
+              prefix: "accent"
+            })]
+          })]
+        })]
+      })
+    });
+  }
+  const frameworkDecorator = (Story, context) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_cookie.CookiesProvider, {
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(FrameworkDecoratorInner, {
+      Story,
+      context
+    })
+  });
+  return {
+    globalTypes,
+    initialGlobals,
+    parameters: {
+      ...defaultParameters,
+      ...extraParameters
+    },
+    decorators: [frameworkDecorator, ...extraDecorators]
+  };
+}