@saas-ui/storybook-addon 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (49) hide show
  1. package/CHANGELOG.md +497 -0
  2. package/README.md +97 -0
  3. package/dist/chunk-E3MMX4DM.js +4973 -0
  4. package/dist/chunk-GII4NPN2.js +81 -0
  5. package/dist/chunk-HSBRF2QZ.js +18 -0
  6. package/dist/chunk-N4JZ67DU.js +26 -0
  7. package/dist/chunk-NOGSFSIA.js +52 -0
  8. package/dist/chunk-QNOLFHPG.js +63 -0
  9. package/dist/chunk-SGM3YTWS.js +82 -0
  10. package/dist/chunk-SVHNULTN.js +24 -0
  11. package/dist/chunk-UK7U2PBM.js +70 -0
  12. package/dist/constants.cjs +46 -0
  13. package/dist/constants.d.ts +11 -0
  14. package/dist/constants.js +15 -0
  15. package/dist/feature/arg-types.cjs +76 -0
  16. package/dist/feature/arg-types.d.ts +46 -0
  17. package/dist/feature/arg-types.js +7 -0
  18. package/dist/feature/color-mode/ColorModeSync.cjs +57 -0
  19. package/dist/feature/color-mode/ColorModeSync.d.ts +6 -0
  20. package/dist/feature/color-mode/ColorModeSync.js +8 -0
  21. package/dist/feature/color-mode/ColorModeTool.cjs +95 -0
  22. package/dist/feature/color-mode/ColorModeTool.d.ts +6 -0
  23. package/dist/feature/color-mode/ColorModeTool.js +8 -0
  24. package/dist/feature/color-mode/ThemeTool.cjs +5038 -0
  25. package/dist/feature/color-mode/ThemeTool.d.ts +6 -0
  26. package/dist/feature/color-mode/ThemeTool.js +8 -0
  27. package/dist/feature/decorator/ChakraProviderDecorator.cjs +168 -0
  28. package/dist/feature/decorator/ChakraProviderDecorator.d.ts +5 -0
  29. package/dist/feature/decorator/ChakraProviderDecorator.js +10 -0
  30. package/dist/feature/direction/DirectionTool.cjs +127 -0
  31. package/dist/feature/direction/DirectionTool.d.ts +6 -0
  32. package/dist/feature/direction/DirectionTool.js +8 -0
  33. package/dist/feature/direction/useDirection.cjs +59 -0
  34. package/dist/feature/direction/useDirection.d.ts +6 -0
  35. package/dist/feature/direction/useDirection.js +8 -0
  36. package/dist/index.cjs +99 -0
  37. package/dist/index.d.ts +4 -0
  38. package/dist/index.js +19 -0
  39. package/dist/preset/decorators.cjs +173 -0
  40. package/dist/preset/decorators.d.ts +3 -0
  41. package/dist/preset/decorators.js +13 -0
  42. package/dist/preset/index.cjs +60 -0
  43. package/dist/preset/index.d.ts +5 -0
  44. package/dist/preset/index.js +27 -0
  45. package/dist/preset/register.cjs +5175 -0
  46. package/dist/preset/register.d.ts +2 -0
  47. package/dist/preset/register.js +40 -0
  48. package/package.json +120 -0
  49. package/theming-arg-types.png +0 -0
@@ -0,0 +1,81 @@
1
+ import {
2
+ useDirection
3
+ } from "./chunk-N4JZ67DU.js";
4
+ import {
5
+ ColorModeSync
6
+ } from "./chunk-SVHNULTN.js";
7
+ import {
8
+ DIRECTION_TOOL_ID,
9
+ EVENTS
10
+ } from "./chunk-HSBRF2QZ.js";
11
+ import {
12
+ __spreadProps,
13
+ __spreadValues
14
+ } from "./chunk-UK7U2PBM.js";
15
+
16
+ // src/feature/decorator/ChakraProviderDecorator.tsx
17
+ import React, { useMemo } from "react";
18
+ import { addons } from "@storybook/addons";
19
+ import { extendTheme } from "@chakra-ui/react";
20
+ import { SaasProvider, useLocalStorage } from "@saas-ui/react";
21
+ import { baseTheme, theme as suiTheme } from "@saas-ui/theme";
22
+ import { theme as baseGlassTheme } from "@saas-ui/theme-glass";
23
+ import { jsx, jsxs } from "react/jsx-runtime";
24
+ var glassTheme = extendTheme(baseGlassTheme, suiTheme);
25
+ var useThemeSync = () => {
26
+ const [themeId, setTheme] = useLocalStorage("storybook.theme", "0");
27
+ React.useEffect(() => {
28
+ const channel = addons.getChannel();
29
+ const themeCallback = (value) => setTheme(value);
30
+ channel.on(EVENTS.SET_THEME, themeCallback);
31
+ return () => {
32
+ channel.removeListener(EVENTS.SET_THEME, themeCallback);
33
+ };
34
+ }, [setTheme]);
35
+ return themeId;
36
+ };
37
+ function ChakraProviderDecorator(Story, context) {
38
+ const {
39
+ parameters: { saasui: saasuiParams },
40
+ globals: { [DIRECTION_TOOL_ID]: globalDirection }
41
+ } = context;
42
+ const themeId = useThemeSync();
43
+ const getTheme = React.useCallback(() => {
44
+ switch (themeId) {
45
+ case "1":
46
+ return suiTheme;
47
+ case "2":
48
+ return glassTheme;
49
+ default:
50
+ return baseTheme;
51
+ }
52
+ }, [themeId]);
53
+ const theme = (saasuiParams == null ? void 0 : saasuiParams.theme) || getTheme();
54
+ const themeOverride = !!(saasuiParams == null ? void 0 : saasuiParams.theme);
55
+ const chakraTheme = (saasuiParams == null ? void 0 : saasuiParams.theme) ? typeof saasuiParams.theme === "function" ? saasuiParams.theme(context) : saasuiParams.theme : theme;
56
+ const direction = useDirection(globalDirection || (chakraTheme == null ? void 0 : chakraTheme.direction));
57
+ const themeWithDirectionOverride = useMemo(
58
+ () => extendTheme(
59
+ {
60
+ direction,
61
+ styles: {
62
+ global: {
63
+ body: {
64
+ minHeight: "var(--chakra-vh)"
65
+ }
66
+ }
67
+ }
68
+ },
69
+ chakraTheme
70
+ ),
71
+ [chakraTheme, direction]
72
+ );
73
+ return /* @__PURE__ */ jsxs(SaasProvider, __spreadProps(__spreadValues({}, saasuiParams), { theme: themeWithDirectionOverride, children: [
74
+ /* @__PURE__ */ jsx(ColorModeSync, {}),
75
+ /* @__PURE__ */ jsx(Story, __spreadValues({}, context))
76
+ ] }));
77
+ }
78
+
79
+ export {
80
+ ChakraProviderDecorator
81
+ };
@@ -0,0 +1,18 @@
1
+ // src/constants.ts
2
+ var ADDON_ID = "@saas-ui/storybook-addon";
3
+ var COLOR_MODE_TOOL_ID = `${ADDON_ID}/color-mode-tool`;
4
+ var DIRECTION_TOOL_ID = `${ADDON_ID}/direction-tool`;
5
+ var THEME_TOOL_ID = `${ADDON_ID}/theme-tool`;
6
+ var EVENTS = {
7
+ TOGGLE_COLOR_MODE: `${ADDON_ID}/toggleColorMode`,
8
+ TOGGLE_DIRECTION: `${ADDON_ID}/toggleDirection`,
9
+ SET_THEME: `${ADDON_ID}/setTheme`
10
+ };
11
+
12
+ export {
13
+ ADDON_ID,
14
+ COLOR_MODE_TOOL_ID,
15
+ DIRECTION_TOOL_ID,
16
+ THEME_TOOL_ID,
17
+ EVENTS
18
+ };
@@ -0,0 +1,26 @@
1
+ import {
2
+ EVENTS
3
+ } from "./chunk-HSBRF2QZ.js";
4
+
5
+ // src/feature/direction/useDirection.tsx
6
+ import { useEffect, useState } from "react";
7
+ import { addons } from "@storybook/addons";
8
+ var useDirection = (initialDirection = "ltr") => {
9
+ const [direction, setDirection] = useState(initialDirection.toLowerCase());
10
+ useEffect(() => {
11
+ document.documentElement.dir = direction;
12
+ }, [direction]);
13
+ useEffect(() => {
14
+ const channel = addons.getChannel();
15
+ const callback = (value) => setDirection(value);
16
+ channel.on(EVENTS.TOGGLE_DIRECTION, callback);
17
+ return () => {
18
+ channel.removeListener(EVENTS.TOGGLE_DIRECTION, callback);
19
+ };
20
+ }, [setDirection]);
21
+ return direction;
22
+ };
23
+
24
+ export {
25
+ useDirection
26
+ };
@@ -0,0 +1,52 @@
1
+ // src/feature/arg-types.ts
2
+ function validateColorScheme(value) {
3
+ const valueKeys = Object.keys(value || {});
4
+ return [
5
+ "50",
6
+ "100",
7
+ "200",
8
+ "300",
9
+ "400",
10
+ "500",
11
+ "600",
12
+ "700",
13
+ "800",
14
+ "900"
15
+ ].every((term) => valueKeys.includes(term));
16
+ }
17
+ function getThemingArgTypes(theme, componentName) {
18
+ var _a, _b, _c, _d;
19
+ const component = theme.components[componentName];
20
+ if (!component) {
21
+ return void 0;
22
+ }
23
+ const argTypes = {};
24
+ const variantOptions = Object.keys(component.variants || {});
25
+ if (variantOptions.length) {
26
+ argTypes.variant = {
27
+ type: { name: "enum", value: variantOptions },
28
+ defaultValue: (_a = component.defaultProps) == null ? void 0 : _a.variant
29
+ };
30
+ }
31
+ const sizeOptions = Object.keys(component.sizes || {});
32
+ if (sizeOptions.length) {
33
+ argTypes.size = {
34
+ type: { name: "enum", value: sizeOptions },
35
+ defaultValue: (_b = component.defaultProps) == null ? void 0 : _b.size
36
+ };
37
+ }
38
+ if ((_c = component.defaultProps) == null ? void 0 : _c["colorScheme"]) {
39
+ const colorSchemes = Object.entries(theme.colors).filter(([, value]) => validateColorScheme(value)).map(([key]) => key);
40
+ if (colorSchemes.length) {
41
+ argTypes.colorScheme = {
42
+ type: { name: "enum", value: colorSchemes },
43
+ defaultValue: (_d = component.defaultProps) == null ? void 0 : _d.colorScheme
44
+ };
45
+ }
46
+ }
47
+ return argTypes;
48
+ }
49
+
50
+ export {
51
+ getThemingArgTypes
52
+ };
@@ -0,0 +1,63 @@
1
+ import {
2
+ ADDON_ID,
3
+ EVENTS
4
+ } from "./chunk-HSBRF2QZ.js";
5
+
6
+ // src/feature/color-mode/ColorModeTool.tsx
7
+ import { useAddonState } from "@storybook/api";
8
+ import { IconButton } from "@storybook/components";
9
+ import { addons } from "@storybook/addons";
10
+ import { jsx, jsxs } from "react/jsx-runtime";
11
+ var MoonIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", focusable: "false", children: /* @__PURE__ */ jsx(
12
+ "path",
13
+ {
14
+ fill: "currentColor",
15
+ 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"
16
+ }
17
+ ) });
18
+ var SunIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", focusable: "false", children: /* @__PURE__ */ jsxs(
19
+ "g",
20
+ {
21
+ strokeLinejoin: "round",
22
+ strokeLinecap: "round",
23
+ strokeWidth: "2",
24
+ fill: "none",
25
+ stroke: "currentColor",
26
+ children: [
27
+ /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "5" }),
28
+ /* @__PURE__ */ jsx("path", { d: "M12 1v2" }),
29
+ /* @__PURE__ */ jsx("path", { d: "M12 21v2" }),
30
+ /* @__PURE__ */ jsx("path", { d: "M4.22 4.22l1.42 1.42" }),
31
+ /* @__PURE__ */ jsx("path", { d: "M18.36 18.36l1.42 1.42" }),
32
+ /* @__PURE__ */ jsx("path", { d: "M1 12h2" }),
33
+ /* @__PURE__ */ jsx("path", { d: "M21 12h2" }),
34
+ /* @__PURE__ */ jsx("path", { d: "M4.22 19.78l1.42-1.42" }),
35
+ /* @__PURE__ */ jsx("path", { d: "M18.36 5.64l1.42-1.42" })
36
+ ]
37
+ }
38
+ ) });
39
+ var ColorModeTool = () => {
40
+ const isDarkMode = localStorage.getItem("chakra-ui-color-mode") === "dark";
41
+ const [darkMode, setDarkMode] = useAddonState(
42
+ `${ADDON_ID}/dark-mode`,
43
+ isDarkMode
44
+ );
45
+ const channel = addons.getChannel();
46
+ const toggleDarkMode = () => {
47
+ channel.emit(EVENTS.TOGGLE_COLOR_MODE, !darkMode ? "dark" : "light");
48
+ setDarkMode(!darkMode);
49
+ };
50
+ return /* @__PURE__ */ jsx(
51
+ IconButton,
52
+ {
53
+ active: darkMode,
54
+ title: `Set color mode to ${darkMode ? "light" : "dark"}`,
55
+ onClick: toggleDarkMode,
56
+ children: darkMode ? /* @__PURE__ */ jsx(SunIcon, {}) : /* @__PURE__ */ jsx(MoonIcon, {})
57
+ }
58
+ );
59
+ };
60
+
61
+ export {
62
+ ColorModeTool
63
+ };
@@ -0,0 +1,82 @@
1
+ import {
2
+ DIRECTION_TOOL_ID,
3
+ EVENTS
4
+ } from "./chunk-HSBRF2QZ.js";
5
+ import {
6
+ __spreadProps,
7
+ __spreadValues
8
+ } from "./chunk-UK7U2PBM.js";
9
+
10
+ // src/feature/direction/DirectionTool.tsx
11
+ import { useCallback, useEffect } from "react";
12
+ import { useAddonState, useGlobals } from "@storybook/api";
13
+ import { addons } from "@storybook/addons";
14
+ import { IconButton } from "@storybook/components";
15
+ import { jsx, jsxs } from "react/jsx-runtime";
16
+ var LTRIcon = (props) => /* @__PURE__ */ jsxs(
17
+ "svg",
18
+ __spreadProps(__spreadValues({
19
+ stroke: "currentColor",
20
+ fill: "currentColor",
21
+ strokeWidth: "0",
22
+ viewBox: "0 0 24 24",
23
+ height: "1em",
24
+ width: "1em",
25
+ style: {
26
+ transform: "scale(1.2)"
27
+ }
28
+ }, props), {
29
+ children: [
30
+ /* @__PURE__ */ jsx("path", { fill: "none", d: "M0 0h24v24H0V0z" }),
31
+ /* @__PURE__ */ 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" })
32
+ ]
33
+ })
34
+ );
35
+ var RTLIcon = (props) => /* @__PURE__ */ jsxs(
36
+ "svg",
37
+ __spreadProps(__spreadValues({
38
+ stroke: "currentColor",
39
+ fill: "currentColor",
40
+ strokeWidth: "0",
41
+ viewBox: "0 0 24 24",
42
+ height: "1em",
43
+ width: "1em",
44
+ style: {
45
+ transform: "scale(1.2)"
46
+ }
47
+ }, props), {
48
+ children: [
49
+ /* @__PURE__ */ jsx("path", { fill: "none", d: "M0 0h24v24H0V0z" }),
50
+ /* @__PURE__ */ 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" })
51
+ ]
52
+ })
53
+ );
54
+ var DirectionTool = () => {
55
+ const [globals, setGlobals] = useGlobals();
56
+ const [direction, setDirection] = useAddonState(
57
+ DIRECTION_TOOL_ID,
58
+ globals[DIRECTION_TOOL_ID] || "ltr"
59
+ );
60
+ const targetDirection = direction !== "ltr" ? "ltr" : "rtl";
61
+ useEffect(() => {
62
+ setGlobals({ [DIRECTION_TOOL_ID]: direction });
63
+ }, [direction, setGlobals]);
64
+ const toggleDirection = useCallback(() => {
65
+ const channel = addons.getChannel();
66
+ channel.emit(EVENTS.TOGGLE_DIRECTION, targetDirection);
67
+ setDirection(targetDirection);
68
+ }, [setDirection, targetDirection]);
69
+ return /* @__PURE__ */ jsx(
70
+ IconButton,
71
+ {
72
+ active: direction === "rtl",
73
+ title: `Set layout direction to ${targetDirection}`,
74
+ onClick: toggleDirection,
75
+ children: targetDirection === "ltr" ? /* @__PURE__ */ jsx(LTRIcon, {}) : /* @__PURE__ */ jsx(RTLIcon, {})
76
+ }
77
+ );
78
+ };
79
+
80
+ export {
81
+ DirectionTool
82
+ };
@@ -0,0 +1,24 @@
1
+ import {
2
+ EVENTS
3
+ } from "./chunk-HSBRF2QZ.js";
4
+
5
+ // src/feature/color-mode/ColorModeSync.tsx
6
+ import { useEffect } from "react";
7
+ import { useColorMode } from "@chakra-ui/react";
8
+ import { addons } from "@storybook/addons";
9
+ function ColorModeSync() {
10
+ const { setColorMode } = useColorMode();
11
+ useEffect(() => {
12
+ const channel = addons.getChannel();
13
+ const colorModeToolCallback = (value) => setColorMode(value);
14
+ channel.on(EVENTS.TOGGLE_COLOR_MODE, colorModeToolCallback);
15
+ return () => {
16
+ channel.removeListener(EVENTS.TOGGLE_COLOR_MODE, colorModeToolCallback);
17
+ };
18
+ }, [setColorMode]);
19
+ return null;
20
+ }
21
+
22
+ export {
23
+ ColorModeSync
24
+ };
@@ -0,0 +1,70 @@
1
+ var __create = Object.create;
2
+ var __defProp = Object.defineProperty;
3
+ var __defProps = Object.defineProperties;
4
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
6
+ var __getOwnPropNames = Object.getOwnPropertyNames;
7
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
8
+ var __getProtoOf = Object.getPrototypeOf;
9
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
10
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
11
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
12
+ var __spreadValues = (a, b) => {
13
+ for (var prop in b || (b = {}))
14
+ if (__hasOwnProp.call(b, prop))
15
+ __defNormalProp(a, prop, b[prop]);
16
+ if (__getOwnPropSymbols)
17
+ for (var prop of __getOwnPropSymbols(b)) {
18
+ if (__propIsEnum.call(b, prop))
19
+ __defNormalProp(a, prop, b[prop]);
20
+ }
21
+ return a;
22
+ };
23
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
24
+ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
25
+ get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
26
+ }) : x)(function(x) {
27
+ if (typeof require !== "undefined")
28
+ return require.apply(this, arguments);
29
+ throw new Error('Dynamic require of "' + x + '" is not supported');
30
+ });
31
+ var __objRest = (source, exclude) => {
32
+ var target = {};
33
+ for (var prop in source)
34
+ if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
35
+ target[prop] = source[prop];
36
+ if (source != null && __getOwnPropSymbols)
37
+ for (var prop of __getOwnPropSymbols(source)) {
38
+ if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
39
+ target[prop] = source[prop];
40
+ }
41
+ return target;
42
+ };
43
+ var __commonJS = (cb, mod) => function __require2() {
44
+ return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
45
+ };
46
+ var __copyProps = (to, from, except, desc) => {
47
+ if (from && typeof from === "object" || typeof from === "function") {
48
+ for (let key of __getOwnPropNames(from))
49
+ if (!__hasOwnProp.call(to, key) && key !== except)
50
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
51
+ }
52
+ return to;
53
+ };
54
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
55
+ // If the importer is in node compatibility mode or this is not an ESM
56
+ // file that has been converted to a CommonJS file using a Babel-
57
+ // compatible transform (i.e. "__esModule" has not been set), then set
58
+ // "default" to the CommonJS "module.exports" for node compatibility.
59
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
60
+ mod
61
+ ));
62
+
63
+ export {
64
+ __spreadValues,
65
+ __spreadProps,
66
+ __require,
67
+ __objRest,
68
+ __commonJS,
69
+ __toESM
70
+ };
@@ -0,0 +1,46 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __export = (target, all) => {
7
+ for (var name in all)
8
+ __defProp(target, name, { get: all[name], enumerable: true });
9
+ };
10
+ var __copyProps = (to, from, except, desc) => {
11
+ if (from && typeof from === "object" || typeof from === "function") {
12
+ for (let key of __getOwnPropNames(from))
13
+ if (!__hasOwnProp.call(to, key) && key !== except)
14
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
+ }
16
+ return to;
17
+ };
18
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+
20
+ // src/constants.ts
21
+ var constants_exports = {};
22
+ __export(constants_exports, {
23
+ ADDON_ID: () => ADDON_ID,
24
+ COLOR_MODE_TOOL_ID: () => COLOR_MODE_TOOL_ID,
25
+ DIRECTION_TOOL_ID: () => DIRECTION_TOOL_ID,
26
+ EVENTS: () => EVENTS,
27
+ THEME_TOOL_ID: () => THEME_TOOL_ID
28
+ });
29
+ module.exports = __toCommonJS(constants_exports);
30
+ var ADDON_ID = "@saas-ui/storybook-addon";
31
+ var COLOR_MODE_TOOL_ID = `${ADDON_ID}/color-mode-tool`;
32
+ var DIRECTION_TOOL_ID = `${ADDON_ID}/direction-tool`;
33
+ var THEME_TOOL_ID = `${ADDON_ID}/theme-tool`;
34
+ var EVENTS = {
35
+ TOGGLE_COLOR_MODE: `${ADDON_ID}/toggleColorMode`,
36
+ TOGGLE_DIRECTION: `${ADDON_ID}/toggleDirection`,
37
+ SET_THEME: `${ADDON_ID}/setTheme`
38
+ };
39
+ // Annotate the CommonJS export names for ESM import in node:
40
+ 0 && (module.exports = {
41
+ ADDON_ID,
42
+ COLOR_MODE_TOOL_ID,
43
+ DIRECTION_TOOL_ID,
44
+ EVENTS,
45
+ THEME_TOOL_ID
46
+ });
@@ -0,0 +1,11 @@
1
+ declare const ADDON_ID = "@saas-ui/storybook-addon";
2
+ declare const COLOR_MODE_TOOL_ID: string;
3
+ declare const DIRECTION_TOOL_ID: string;
4
+ declare const THEME_TOOL_ID: string;
5
+ declare const EVENTS: {
6
+ TOGGLE_COLOR_MODE: string;
7
+ TOGGLE_DIRECTION: string;
8
+ SET_THEME: string;
9
+ };
10
+
11
+ export { ADDON_ID, COLOR_MODE_TOOL_ID, DIRECTION_TOOL_ID, EVENTS, THEME_TOOL_ID };
@@ -0,0 +1,15 @@
1
+ import {
2
+ ADDON_ID,
3
+ COLOR_MODE_TOOL_ID,
4
+ DIRECTION_TOOL_ID,
5
+ EVENTS,
6
+ THEME_TOOL_ID
7
+ } from "./chunk-HSBRF2QZ.js";
8
+ import "./chunk-UK7U2PBM.js";
9
+ export {
10
+ ADDON_ID,
11
+ COLOR_MODE_TOOL_ID,
12
+ DIRECTION_TOOL_ID,
13
+ EVENTS,
14
+ THEME_TOOL_ID
15
+ };
@@ -0,0 +1,76 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __export = (target, all) => {
7
+ for (var name in all)
8
+ __defProp(target, name, { get: all[name], enumerable: true });
9
+ };
10
+ var __copyProps = (to, from, except, desc) => {
11
+ if (from && typeof from === "object" || typeof from === "function") {
12
+ for (let key of __getOwnPropNames(from))
13
+ if (!__hasOwnProp.call(to, key) && key !== except)
14
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
+ }
16
+ return to;
17
+ };
18
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+
20
+ // src/feature/arg-types.ts
21
+ var arg_types_exports = {};
22
+ __export(arg_types_exports, {
23
+ getThemingArgTypes: () => getThemingArgTypes
24
+ });
25
+ module.exports = __toCommonJS(arg_types_exports);
26
+ function validateColorScheme(value) {
27
+ const valueKeys = Object.keys(value || {});
28
+ return [
29
+ "50",
30
+ "100",
31
+ "200",
32
+ "300",
33
+ "400",
34
+ "500",
35
+ "600",
36
+ "700",
37
+ "800",
38
+ "900"
39
+ ].every((term) => valueKeys.includes(term));
40
+ }
41
+ function getThemingArgTypes(theme, componentName) {
42
+ var _a, _b, _c, _d;
43
+ const component = theme.components[componentName];
44
+ if (!component) {
45
+ return void 0;
46
+ }
47
+ const argTypes = {};
48
+ const variantOptions = Object.keys(component.variants || {});
49
+ if (variantOptions.length) {
50
+ argTypes.variant = {
51
+ type: { name: "enum", value: variantOptions },
52
+ defaultValue: (_a = component.defaultProps) == null ? void 0 : _a.variant
53
+ };
54
+ }
55
+ const sizeOptions = Object.keys(component.sizes || {});
56
+ if (sizeOptions.length) {
57
+ argTypes.size = {
58
+ type: { name: "enum", value: sizeOptions },
59
+ defaultValue: (_b = component.defaultProps) == null ? void 0 : _b.size
60
+ };
61
+ }
62
+ if ((_c = component.defaultProps) == null ? void 0 : _c["colorScheme"]) {
63
+ const colorSchemes = Object.entries(theme.colors).filter(([, value]) => validateColorScheme(value)).map(([key]) => key);
64
+ if (colorSchemes.length) {
65
+ argTypes.colorScheme = {
66
+ type: { name: "enum", value: colorSchemes },
67
+ defaultValue: (_d = component.defaultProps) == null ? void 0 : _d.colorScheme
68
+ };
69
+ }
70
+ }
71
+ return argTypes;
72
+ }
73
+ // Annotate the CommonJS export names for ESM import in node:
74
+ 0 && (module.exports = {
75
+ getThemingArgTypes
76
+ });
@@ -0,0 +1,46 @@
1
+ import { ArgTypes } from '@storybook/react';
2
+ import { ThemingProps } from '@chakra-ui/react';
3
+
4
+ /**
5
+ * `keyof` alternative which omits non-string keys
6
+ */
7
+ type KeyOf<T> = [T] extends [never] ? never : T extends object ? Extract<keyof T, string> : never;
8
+ type ThemingArgTypeKey = 'variant' | 'size' | 'colorScheme';
9
+ /**
10
+ * Create Storybook controls based on a Chakra UI theme component.
11
+ *
12
+ * @example
13
+ * export default {
14
+ * title: "Components / Forms / Button",
15
+ * argTypes: getThemingArgTypes(theme, "Button"),
16
+ * }
17
+ *
18
+ * @example full example
19
+ * import { Meta, StoryFn } from "@storybook/react"
20
+ * import { getThemingArgTypes } from "@chakra-ui/storybook-addon"
21
+ * import { theme } from "<your-theme>"
22
+ *
23
+ * export default {
24
+ * title: "Components / Forms / Button",
25
+ * argTypes: {
26
+ * ...getThemingArgTypes(theme, "Button"),
27
+ * children: "string"
28
+ * },
29
+ * args: { children: "Button" },
30
+ * } as Meta
31
+ *
32
+ * interface StoryProps extends ThemingProps<"Button"> {
33
+ * children?: React.ReactNode
34
+ * }
35
+ *
36
+ * export const Basic: StoryFn<StoryProps> = (props) => <Button {...props} />
37
+ *
38
+ * @param theme same Chakra UI theme used in .storybook/preview.tsx
39
+ * @param componentName component name to create the ArgTypes for
40
+ */
41
+ declare function getThemingArgTypes<Theme extends {
42
+ colors: Record<string, any>;
43
+ components: Record<string, any>;
44
+ }, ComponentName extends KeyOf<Theme['components']>>(theme: Theme, componentName: ComponentName): ArgTypes<Partial<Pick<ThemingProps<ComponentName>, ThemingArgTypeKey>>> | undefined;
45
+
46
+ export { ThemingArgTypeKey, getThemingArgTypes };
@@ -0,0 +1,7 @@
1
+ import {
2
+ getThemingArgTypes
3
+ } from "../chunk-NOGSFSIA.js";
4
+ import "../chunk-UK7U2PBM.js";
5
+ export {
6
+ getThemingArgTypes
7
+ };