@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.
- package/CHANGELOG.md +497 -0
- package/README.md +97 -0
- package/dist/chunk-E3MMX4DM.js +4973 -0
- package/dist/chunk-GII4NPN2.js +81 -0
- package/dist/chunk-HSBRF2QZ.js +18 -0
- package/dist/chunk-N4JZ67DU.js +26 -0
- package/dist/chunk-NOGSFSIA.js +52 -0
- package/dist/chunk-QNOLFHPG.js +63 -0
- package/dist/chunk-SGM3YTWS.js +82 -0
- package/dist/chunk-SVHNULTN.js +24 -0
- package/dist/chunk-UK7U2PBM.js +70 -0
- package/dist/constants.cjs +46 -0
- package/dist/constants.d.ts +11 -0
- package/dist/constants.js +15 -0
- package/dist/feature/arg-types.cjs +76 -0
- package/dist/feature/arg-types.d.ts +46 -0
- package/dist/feature/arg-types.js +7 -0
- package/dist/feature/color-mode/ColorModeSync.cjs +57 -0
- package/dist/feature/color-mode/ColorModeSync.d.ts +6 -0
- package/dist/feature/color-mode/ColorModeSync.js +8 -0
- package/dist/feature/color-mode/ColorModeTool.cjs +95 -0
- package/dist/feature/color-mode/ColorModeTool.d.ts +6 -0
- package/dist/feature/color-mode/ColorModeTool.js +8 -0
- package/dist/feature/color-mode/ThemeTool.cjs +5038 -0
- package/dist/feature/color-mode/ThemeTool.d.ts +6 -0
- package/dist/feature/color-mode/ThemeTool.js +8 -0
- package/dist/feature/decorator/ChakraProviderDecorator.cjs +168 -0
- package/dist/feature/decorator/ChakraProviderDecorator.d.ts +5 -0
- package/dist/feature/decorator/ChakraProviderDecorator.js +10 -0
- package/dist/feature/direction/DirectionTool.cjs +127 -0
- package/dist/feature/direction/DirectionTool.d.ts +6 -0
- package/dist/feature/direction/DirectionTool.js +8 -0
- package/dist/feature/direction/useDirection.cjs +59 -0
- package/dist/feature/direction/useDirection.d.ts +6 -0
- package/dist/feature/direction/useDirection.js +8 -0
- package/dist/index.cjs +99 -0
- package/dist/index.d.ts +4 -0
- package/dist/index.js +19 -0
- package/dist/preset/decorators.cjs +173 -0
- package/dist/preset/decorators.d.ts +3 -0
- package/dist/preset/decorators.js +13 -0
- package/dist/preset/index.cjs +60 -0
- package/dist/preset/index.d.ts +5 -0
- package/dist/preset/index.js +27 -0
- package/dist/preset/register.cjs +5175 -0
- package/dist/preset/register.d.ts +2 -0
- package/dist/preset/register.js +40 -0
- package/package.json +120 -0
- 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 };
|