@saas-ui/storybook-addon 1.0.0

package/dist/preset/decorators.cjs

@@ -0,0 +1,173 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+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);
+
+// src/preset/decorators.ts
+var decorators_exports = {};
+__export(decorators_exports, {
+  decorators: () => decorators
+});
+module.exports = __toCommonJS(decorators_exports);
+
+// src/feature/decorator/ChakraProviderDecorator.tsx
+var import_react4 = __toESM(require("react"), 1);
+var import_addons3 = require("@storybook/addons");
+var import_react5 = require("@chakra-ui/react");
+var import_react6 = require("@saas-ui/react");
+
+// src/feature/color-mode/ColorModeSync.tsx
+var import_react = require("react");
+var import_react2 = require("@chakra-ui/react");
+var import_addons = require("@storybook/addons");
+
+// src/constants.ts
+var ADDON_ID = "@saas-ui/storybook-addon";
+var COLOR_MODE_TOOL_ID = `${ADDON_ID}/color-mode-tool`;
+var DIRECTION_TOOL_ID = `${ADDON_ID}/direction-tool`;
+var THEME_TOOL_ID = `${ADDON_ID}/theme-tool`;
+var EVENTS = {
+  TOGGLE_COLOR_MODE: `${ADDON_ID}/toggleColorMode`,
+  TOGGLE_DIRECTION: `${ADDON_ID}/toggleDirection`,
+  SET_THEME: `${ADDON_ID}/setTheme`
+};
+
+// src/feature/color-mode/ColorModeSync.tsx
+function ColorModeSync() {
+  const { setColorMode } = (0, import_react2.useColorMode)();
+  (0, import_react.useEffect)(() => {
+    const channel = import_addons.addons.getChannel();
+    const colorModeToolCallback = (value) => setColorMode(value);
+    channel.on(EVENTS.TOGGLE_COLOR_MODE, colorModeToolCallback);
+    return () => {
+      channel.removeListener(EVENTS.TOGGLE_COLOR_MODE, colorModeToolCallback);
+    };
+  }, [setColorMode]);
+  return null;
+}
+
+// src/feature/direction/useDirection.tsx
+var import_react3 = require("react");
+var import_addons2 = require("@storybook/addons");
+var useDirection = (initialDirection = "ltr") => {
+  const [direction, setDirection] = (0, import_react3.useState)(initialDirection.toLowerCase());
+  (0, import_react3.useEffect)(() => {
+    document.documentElement.dir = direction;
+  }, [direction]);
+  (0, import_react3.useEffect)(() => {
+    const channel = import_addons2.addons.getChannel();
+    const callback = (value) => setDirection(value);
+    channel.on(EVENTS.TOGGLE_DIRECTION, callback);
+    return () => {
+      channel.removeListener(EVENTS.TOGGLE_DIRECTION, callback);
+    };
+  }, [setDirection]);
+  return direction;
+};
+
+// src/feature/decorator/ChakraProviderDecorator.tsx
+var import_theme = require("@saas-ui/theme");
+var import_theme_glass = require("@saas-ui/theme-glass");
+var import_jsx_runtime = require("react/jsx-runtime");
+var glassTheme = (0, import_react5.extendTheme)(import_theme_glass.theme, import_theme.theme);
+var useThemeSync = () => {
+  const [themeId, setTheme] = (0, import_react6.useLocalStorage)("storybook.theme", "0");
+  import_react4.default.useEffect(() => {
+    const channel = import_addons3.addons.getChannel();
+    const themeCallback = (value) => setTheme(value);
+    channel.on(EVENTS.SET_THEME, themeCallback);
+    return () => {
+      channel.removeListener(EVENTS.SET_THEME, themeCallback);
+    };
+  }, [setTheme]);
+  return themeId;
+};
+function ChakraProviderDecorator(Story, context) {
+  const {
+    parameters: { saasui: saasuiParams },
+    globals: { [DIRECTION_TOOL_ID]: globalDirection }
+  } = context;
+  const themeId = useThemeSync();
+  const getTheme = import_react4.default.useCallback(() => {
+    switch (themeId) {
+      case "1":
+        return import_theme.theme;
+      case "2":
+        return glassTheme;
+      default:
+        return import_theme.baseTheme;
+    }
+  }, [themeId]);
+  const theme = (saasuiParams == null ? void 0 : saasuiParams.theme) || getTheme();
+  const themeOverride = !!(saasuiParams == null ? void 0 : saasuiParams.theme);
+  const chakraTheme = (saasuiParams == null ? void 0 : saasuiParams.theme) ? typeof saasuiParams.theme === "function" ? saasuiParams.theme(context) : saasuiParams.theme : theme;
+  const direction = useDirection(globalDirection || (chakraTheme == null ? void 0 : chakraTheme.direction));
+  const themeWithDirectionOverride = (0, import_react4.useMemo)(
+    () => (0, import_react5.extendTheme)(
+      {
+        direction,
+        styles: {
+          global: {
+            body: {
+              minHeight: "var(--chakra-vh)"
+            }
+          }
+        }
+      },
+      chakraTheme
+    ),
+    [chakraTheme, direction]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react6.SaasProvider, __spreadProps(__spreadValues({}, saasuiParams), { theme: themeWithDirectionOverride, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ColorModeSync, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Story, __spreadValues({}, context))
+  ] }));
+}
+
+// src/preset/decorators.ts
+var decorators = [ChakraProviderDecorator];
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  decorators
+});

package/dist/preset/decorators.d.ts

@@ -0,0 +1,3 @@
+declare const decorators: any[];
+
+export { decorators };

package/dist/preset/decorators.js

@@ -0,0 +1,13 @@
+import {
+  ChakraProviderDecorator
+} from "../chunk-GII4NPN2.js";
+import "../chunk-N4JZ67DU.js";
+import "../chunk-SVHNULTN.js";
+import "../chunk-HSBRF2QZ.js";
+import "../chunk-UK7U2PBM.js";
+
+// src/preset/decorators.ts
+var decorators = [ChakraProviderDecorator];
+export {
+  decorators
+};

package/dist/preset/index.cjs

@@ -0,0 +1,60 @@
+"use strict";
+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);
+
+// src/preset/index.ts
+var preset_exports = {};
+__export(preset_exports, {
+  config: () => config,
+  managerEntries: () => managerEntries,
+  webpackFinal: () => webpackFinal
+});
+module.exports = __toCommonJS(preset_exports);
+function config(entry = []) {
+  return [
+    ...entry,
+    require.resolve("@saas-ui/storybook-addon/preset/decorators")
+  ];
+}
+function managerEntries(entry = []) {
+  return [...entry, require.resolve("@saas-ui/storybook-addon/preset/register")];
+}
+function webpackFinal(config2) {
+  config2.module.rules.push({
+    test: /\.mjs$/,
+    include: /node_modules/,
+    type: "javascript/auto"
+  });
+  return config2;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  config,
+  managerEntries,
+  webpackFinal
+});

package/dist/preset/index.d.ts

@@ -0,0 +1,5 @@
+declare function config(entry?: never[]): string[];
+declare function managerEntries(entry?: never[]): string[];
+declare function webpackFinal(config: any): any;
+
+export { config, managerEntries, webpackFinal };

package/dist/preset/index.js

@@ -0,0 +1,27 @@
+import {
+  __require
+} from "../chunk-UK7U2PBM.js";
+
+// src/preset/index.ts
+function config(entry = []) {
+  return [
+    ...entry,
+    __require.resolve("@saas-ui/storybook-addon/preset/decorators")
+  ];
+}
+function managerEntries(entry = []) {
+  return [...entry, __require.resolve("@saas-ui/storybook-addon/preset/register")];
+}
+function webpackFinal(config2) {
+  config2.module.rules.push({
+    test: /\.mjs$/,
+    include: /node_modules/,
+    type: "javascript/auto"
+  });
+  return config2;
+}
+export {
+  config,
+  managerEntries,
+  webpackFinal
+};