@saas-ui/storybook-addon 1.0.0

package/dist/feature/color-mode/ThemeTool.d.ts

@@ -0,0 +1,6 @@
+/**
+ * This component is rendered in the Storybook toolbar
+ */
+declare const ThemeTool: () => JSX.Element;
+
+export { ThemeTool };

package/dist/feature/color-mode/ThemeTool.js

@@ -0,0 +1,8 @@
+import {
+  ThemeTool
+} from "../../chunk-E3MMX4DM.js";
+import "../../chunk-HSBRF2QZ.js";
+import "../../chunk-UK7U2PBM.js";
+export {
+  ThemeTool
+};

package/dist/feature/decorator/ChakraProviderDecorator.cjs

@@ -0,0 +1,168 @@
+"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/feature/decorator/ChakraProviderDecorator.tsx
+var ChakraProviderDecorator_exports = {};
+__export(ChakraProviderDecorator_exports, {
+  ChakraProviderDecorator: () => ChakraProviderDecorator
+});
+module.exports = __toCommonJS(ChakraProviderDecorator_exports);
+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))
+  ] }));
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ChakraProviderDecorator
+});

package/dist/feature/decorator/ChakraProviderDecorator.d.ts

@@ -0,0 +1,5 @@
+import { StoryFn, StoryContext } from '@storybook/types';
+
+declare function ChakraProviderDecorator(Story: StoryFn<any>, context: StoryContext): JSX.Element;
+
+export { ChakraProviderDecorator };

package/dist/feature/decorator/ChakraProviderDecorator.js

@@ -0,0 +1,10 @@
+import {
+  ChakraProviderDecorator
+} from "../../chunk-GII4NPN2.js";
+import "../../chunk-N4JZ67DU.js";
+import "../../chunk-SVHNULTN.js";
+import "../../chunk-HSBRF2QZ.js";
+import "../../chunk-UK7U2PBM.js";
+export {
+  ChakraProviderDecorator
+};

package/dist/feature/direction/DirectionTool.cjs

@@ -0,0 +1,127 @@
+"use strict";
+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 __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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/feature/direction/DirectionTool.tsx
+var DirectionTool_exports = {};
+__export(DirectionTool_exports, {
+  DirectionTool: () => DirectionTool
+});
+module.exports = __toCommonJS(DirectionTool_exports);
+var import_react = require("react");
+var import_api = require("@storybook/api");
+var import_addons = require("@storybook/addons");
+var import_components = require("@storybook/components");
+
+// 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/direction/DirectionTool.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var LTRIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  "svg",
+  __spreadProps(__spreadValues({
+    stroke: "currentColor",
+    fill: "currentColor",
+    strokeWidth: "0",
+    viewBox: "0 0 24 24",
+    height: "1em",
+    width: "1em",
+    style: {
+      transform: "scale(1.2)"
+    }
+  }, props), {
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fill: "none", d: "M0 0h24v24H0V0z" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M9 4v4c-1.1 0-2-.9-2-2s.9-2 2-2m8-2H9C6.79 2 5 3.79 5 6s1.79 4 4 4v5h2V4h2v11h2V4h2V2zm0 12v3H5v2h12v3l4-4-4-4z" })
+    ]
+  })
+);
+var RTLIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  "svg",
+  __spreadProps(__spreadValues({
+    stroke: "currentColor",
+    fill: "currentColor",
+    strokeWidth: "0",
+    viewBox: "0 0 24 24",
+    height: "1em",
+    width: "1em",
+    style: {
+      transform: "scale(1.2)"
+    }
+  }, props), {
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fill: "none", d: "M0 0h24v24H0V0z" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M10 4v4c-1.1 0-2-.9-2-2s.9-2 2-2m8-2h-8C7.79 2 6 3.79 6 6s1.79 4 4 4v5h2V4h2v11h2V4h2V2zM8 14l-4 4 4 4v-3h12v-2H8v-3z" })
+    ]
+  })
+);
+var DirectionTool = () => {
+  const [globals, setGlobals] = (0, import_api.useGlobals)();
+  const [direction, setDirection] = (0, import_api.useAddonState)(
+    DIRECTION_TOOL_ID,
+    globals[DIRECTION_TOOL_ID] || "ltr"
+  );
+  const targetDirection = direction !== "ltr" ? "ltr" : "rtl";
+  (0, import_react.useEffect)(() => {
+    setGlobals({ [DIRECTION_TOOL_ID]: direction });
+  }, [direction, setGlobals]);
+  const toggleDirection = (0, import_react.useCallback)(() => {
+    const channel = import_addons.addons.getChannel();
+    channel.emit(EVENTS.TOGGLE_DIRECTION, targetDirection);
+    setDirection(targetDirection);
+  }, [setDirection, targetDirection]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_components.IconButton,
+    {
+      active: direction === "rtl",
+      title: `Set layout direction to ${targetDirection}`,
+      onClick: toggleDirection,
+      children: targetDirection === "ltr" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LTRIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RTLIcon, {})
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DirectionTool
+});

package/dist/feature/direction/DirectionTool.d.ts

@@ -0,0 +1,6 @@
+/**
+ * This component is rendered in the Storybook toolbar
+ */
+declare const DirectionTool: () => JSX.Element;
+
+export { DirectionTool };

package/dist/feature/direction/DirectionTool.js

@@ -0,0 +1,8 @@
+import {
+  DirectionTool
+} from "../../chunk-SGM3YTWS.js";
+import "../../chunk-HSBRF2QZ.js";
+import "../../chunk-UK7U2PBM.js";
+export {
+  DirectionTool
+};

package/dist/feature/direction/useDirection.cjs

@@ -0,0 +1,59 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/feature/direction/useDirection.tsx
+var useDirection_exports = {};
+__export(useDirection_exports, {
+  useDirection: () => useDirection
+});
+module.exports = __toCommonJS(useDirection_exports);
+var import_react = require("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/direction/useDirection.tsx
+var useDirection = (initialDirection = "ltr") => {
+  const [direction, setDirection] = (0, import_react.useState)(initialDirection.toLowerCase());
+  (0, import_react.useEffect)(() => {
+    document.documentElement.dir = direction;
+  }, [direction]);
+  (0, import_react.useEffect)(() => {
+    const channel = import_addons.addons.getChannel();
+    const callback = (value) => setDirection(value);
+    channel.on(EVENTS.TOGGLE_DIRECTION, callback);
+    return () => {
+      channel.removeListener(EVENTS.TOGGLE_DIRECTION, callback);
+    };
+  }, [setDirection]);
+  return direction;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useDirection
+});

package/dist/feature/direction/useDirection.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Sync the layout direction to the html element
+ */
+declare const useDirection: (initialDirection?: 'ltr' | 'rtl') => string;
+
+export { useDirection };

package/dist/feature/direction/useDirection.js

@@ -0,0 +1,8 @@
+import {
+  useDirection
+} from "../../chunk-N4JZ67DU.js";
+import "../../chunk-HSBRF2QZ.js";
+import "../../chunk-UK7U2PBM.js";
+export {
+  useDirection
+};

package/dist/index.cjs

@@ -0,0 +1,99 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  ADDON_ID: () => ADDON_ID,
+  COLOR_MODE_TOOL_ID: () => COLOR_MODE_TOOL_ID,
+  DIRECTION_TOOL_ID: () => DIRECTION_TOOL_ID,
+  EVENTS: () => EVENTS,
+  THEME_TOOL_ID: () => THEME_TOOL_ID,
+  getThemingArgTypes: () => getThemingArgTypes
+});
+module.exports = __toCommonJS(src_exports);
+
+// 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/arg-types.ts
+function validateColorScheme(value) {
+  const valueKeys = Object.keys(value || {});
+  return [
+    "50",
+    "100",
+    "200",
+    "300",
+    "400",
+    "500",
+    "600",
+    "700",
+    "800",
+    "900"
+  ].every((term) => valueKeys.includes(term));
+}
+function getThemingArgTypes(theme, componentName) {
+  var _a, _b, _c, _d;
+  const component = theme.components[componentName];
+  if (!component) {
+    return void 0;
+  }
+  const argTypes = {};
+  const variantOptions = Object.keys(component.variants || {});
+  if (variantOptions.length) {
+    argTypes.variant = {
+      type: { name: "enum", value: variantOptions },
+      defaultValue: (_a = component.defaultProps) == null ? void 0 : _a.variant
+    };
+  }
+  const sizeOptions = Object.keys(component.sizes || {});
+  if (sizeOptions.length) {
+    argTypes.size = {
+      type: { name: "enum", value: sizeOptions },
+      defaultValue: (_b = component.defaultProps) == null ? void 0 : _b.size
+    };
+  }
+  if ((_c = component.defaultProps) == null ? void 0 : _c["colorScheme"]) {
+    const colorSchemes = Object.entries(theme.colors).filter(([, value]) => validateColorScheme(value)).map(([key]) => key);
+    if (colorSchemes.length) {
+      argTypes.colorScheme = {
+        type: { name: "enum", value: colorSchemes },
+        defaultValue: (_d = component.defaultProps) == null ? void 0 : _d.colorScheme
+      };
+    }
+  }
+  return argTypes;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ADDON_ID,
+  COLOR_MODE_TOOL_ID,
+  DIRECTION_TOOL_ID,
+  EVENTS,
+  THEME_TOOL_ID,
+  getThemingArgTypes
+});

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { ADDON_ID, COLOR_MODE_TOOL_ID, DIRECTION_TOOL_ID, EVENTS, THEME_TOOL_ID } from './constants.js';
+export { ThemingArgTypeKey, getThemingArgTypes } from './feature/arg-types.js';
+import '@storybook/react';
+import '@chakra-ui/react';

package/dist/index.js

@@ -0,0 +1,19 @@
+import {
+  getThemingArgTypes
+} from "./chunk-NOGSFSIA.js";
+import {
+  ADDON_ID,
+  COLOR_MODE_TOOL_ID,
+  DIRECTION_TOOL_ID,
+  EVENTS,
+  THEME_TOOL_ID
+} from "./chunk-HSBRF2QZ.js";
+import "./chunk-UK7U2PBM.js";
+export {
+  ADDON_ID,
+  COLOR_MODE_TOOL_ID,
+  DIRECTION_TOOL_ID,
+  EVENTS,
+  THEME_TOOL_ID,
+  getThemingArgTypes
+};