@saas-ui/storybook-addon 1.0.0

package/dist/feature/color-mode/ColorModeSync.cjs

@@ -0,0 +1,57 @@
+"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/color-mode/ColorModeSync.tsx
+var ColorModeSync_exports = {};
+__export(ColorModeSync_exports, {
+  ColorModeSync: () => ColorModeSync
+});
+module.exports = __toCommonJS(ColorModeSync_exports);
+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;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ColorModeSync
+});

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

@@ -0,0 +1,6 @@
+/**
+ * Render <ColorModeSync /> to sync the storybook color mode with Chakra UI
+ */
+declare function ColorModeSync(): null;
+
+export { ColorModeSync };

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

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

package/dist/feature/color-mode/ColorModeTool.cjs

@@ -0,0 +1,95 @@
+"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/color-mode/ColorModeTool.tsx
+var ColorModeTool_exports = {};
+__export(ColorModeTool_exports, {
+  ColorModeTool: () => ColorModeTool
+});
+module.exports = __toCommonJS(ColorModeTool_exports);
+var import_api = require("@storybook/api");
+var import_components = require("@storybook/components");
+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/ColorModeTool.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var MoonIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", focusable: "false", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "path",
+  {
+    fill: "currentColor",
+    d: "M21.4,13.7C20.6,13.9,19.8,14,19,14c-5,0-9-4-9-9c0-0.8,0.1-1.6,0.3-2.4c0.1-0.3,0-0.7-0.3-1 c-0.3-0.3-0.6-0.4-1-0.3C4.3,2.7,1,7.1,1,12c0,6.1,4.9,11,11,11c4.9,0,9.3-3.3,10.6-8.1c0.1-0.3,0-0.7-0.3-1 C22.1,13.7,21.7,13.6,21.4,13.7z"
+  }
+) });
+var SunIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", focusable: "false", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  "g",
+  {
+    strokeLinejoin: "round",
+    strokeLinecap: "round",
+    strokeWidth: "2",
+    fill: "none",
+    stroke: "currentColor",
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "5" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 1v2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 21v2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4.22 4.22l1.42 1.42" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M18.36 18.36l1.42 1.42" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M1 12h2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21 12h2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4.22 19.78l1.42-1.42" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M18.36 5.64l1.42-1.42" })
+    ]
+  }
+) });
+var ColorModeTool = () => {
+  const isDarkMode = localStorage.getItem("chakra-ui-color-mode") === "dark";
+  const [darkMode, setDarkMode] = (0, import_api.useAddonState)(
+    `${ADDON_ID}/dark-mode`,
+    isDarkMode
+  );
+  const channel = import_addons.addons.getChannel();
+  const toggleDarkMode = () => {
+    channel.emit(EVENTS.TOGGLE_COLOR_MODE, !darkMode ? "dark" : "light");
+    setDarkMode(!darkMode);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_components.IconButton,
+    {
+      active: darkMode,
+      title: `Set color mode to ${darkMode ? "light" : "dark"}`,
+      onClick: toggleDarkMode,
+      children: darkMode ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SunIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MoonIcon, {})
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ColorModeTool
+});

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

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

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

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