diff --git a/.storybook/main.ts b/.storybook/main.ts
index 916c7181..41c0ec66 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -5,6 +5,7 @@ const config: StorybookConfig = {
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-interactions",
+ "storybook-addon-designs",
{
name: "../dist/index.js",
options: {
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
deleted file mode 100644
index 7a048c18..00000000
--- a/.storybook/preview.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import type { Preview } from "@storybook/react";
-import { initialize, mswDecorator } from "msw-storybook-addon";
-
-// Initialize MSW
-initialize({
- onUnhandledRequest(req) {
- if (req.url.origin !== document.location.origin) {
- console.error(
- `[MSW] %s %s %s (UNHANDLED)`,
- new Date().toTimeString().slice(0, 8),
- req.method.toUpperCase(),
- req.url.href
- );
- }
- },
-});
-
-// Provide the MSW addon decorator globally
-export const decorators = [mswDecorator];
-
-const preview: Preview = {
- parameters: {
- actions: {
- argTypesRegex: "^on[A-Z].*",
- },
- backgrounds: {
- default: "light",
- },
- controls: {
- matchers: {
- color: /(background|color)$/i,
- date: /Date$/,
- },
- },
- layout: "fullscreen",
- },
-};
-
-export default preview;
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
new file mode 100644
index 00000000..a8f16026
--- /dev/null
+++ b/.storybook/preview.tsx
@@ -0,0 +1,154 @@
+import {
+ Global,
+ ThemeProvider,
+ themes,
+ createReset,
+ convert,
+ styled,
+ useTheme,
+} from "@storybook/theming";
+import type { Preview } from "@storybook/react";
+import { initialize, mswDecorator } from "msw-storybook-addon";
+import React from "react";
+
+// Initialize MSW
+initialize({
+ onUnhandledRequest(req) {
+ if (req.url.origin !== document.location.origin) {
+ console.error(
+ `[MSW] %s %s %s (UNHANDLED)`,
+ new Date().toTimeString().slice(0, 8),
+ req.method.toUpperCase(),
+ req.url.href
+ );
+ }
+ },
+});
+
+const Panels = styled.div<{ orientation: "right" | "bottom" }>(
+ ({ orientation }) => ({
+ flexDirection: orientation === "right" ? "row" : "column",
+ }),
+ {
+ width: "100vw",
+ height: "100vh",
+ display: "flex",
+ justifyContent: "center",
+ alignItems: "center",
+ gap: 20,
+ }
+);
+
+const Panel = styled.div<{ orientation: "right" | "bottom" }>(
+ ({ orientation }) => ({
+ width: orientation === "right" ? 420 : 900,
+ height: orientation === "right" ? 640 : 300,
+ overflow: "auto",
+ }),
+ ({ theme }) => ({
+ position: "relative",
+ outline: `1px solid ${theme.color.border}`,
+ background: theme.background.content,
+ color: theme.color.defaultText,
+ fontSize: theme.typography.size.s2 - 1,
+ })
+);
+
+const ThemedSetRoot = () => {
+ const theme = useTheme();
+ React.useEffect(() => {
+ document.body.style.background = theme.background.content;
+ document.body.style.color = theme.color.defaultText;
+ document.body.style.fontSize = `${theme.typography.size.s2 - 1}px`;
+ });
+ return null;
+};
+
+export const decorators = [
+ // Provide the MSW addon decorator globally
+ mswDecorator,
+
+ // Render two panels side-by-side or stacked, depending on selected orientation
+ // Note this assumes any play functions are equipped to deal with multiple canvases
+ (StoryFn, { globals, parameters }) => {
+ const theme = globals.theme || parameters.theme || "right";
+ return theme === "light" || theme === "dark" ? (
+
+
+
+
+
+
+ ) : (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ >
+ );
+ },
+];
+
+export const parameters: Preview["parameters"] = {
+ actions: {
+ argTypesRegex: "^on[A-Z].*",
+ },
+ backgrounds: {
+ disable: true,
+ },
+ controls: {
+ matchers: {
+ color: /(background|color)$/i,
+ date: /Date$/,
+ },
+ },
+ layout: "fullscreen",
+ viewport: {
+ viewports: {
+ right: {
+ name: "Right panel",
+ styles: {
+ width: "420px",
+ height: "640px",
+ },
+ },
+ bottom: {
+ name: "Bottom panel",
+ styles: {
+ width: "900px",
+ height: "300px",
+ },
+ },
+ },
+ },
+};
+
+export const globalTypes = {
+ theme: {
+ name: "Theme",
+ description: "Panel theme",
+ toolbar: {
+ icon: "sidebaralt",
+ title: "Theme",
+ items: [
+ { value: "light", icon: "circlehollow", title: "Light" },
+ { value: "dark", icon: "circle", title: "Dark" },
+ { value: "right", icon: "sidebaralt", title: "Right 2-up" },
+ { value: "bottom", icon: "bottombar", title: "Bottom 2-up" },
+ ],
+ },
+ },
+};
diff --git a/package.json b/package.json
index 519a620b..93a5260a 100644
--- a/package.json
+++ b/package.json
@@ -83,7 +83,9 @@
"prop-types": "^15.8.1",
"react": "^18.0.0",
"react-dom": "^18.0.0",
+ "rimraf": "^3.0.2",
"storybook": "^7.1.0-alpha.34",
+ "storybook-addon-designs": "^7.0.0-beta.2",
"tsup": "^6.6.3",
"typescript": "^4.9.5",
"vite": "^4.1.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 72284f4c..820ed9c9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -107,9 +107,15 @@ devDependencies:
react-dom:
specifier: ^18.0.0
version: 18.0.0(react@18.0.0)
+ rimraf:
+ specifier: ^3.0.2
+ version: 3.0.2
storybook:
specifier: ^7.1.0-alpha.34
version: 7.1.0-alpha.34
+ storybook-addon-designs:
+ specifier: ^7.0.0-beta.2
+ version: 7.0.0-beta.2(@storybook/addon-docs@7.0.21)(@storybook/addons@7.0.21)(@storybook/api@7.0.21)(@storybook/components@7.1.0-alpha.34)(@storybook/theming@7.1.0-alpha.34)(react-dom@18.0.0)(react@18.0.0)
tsup:
specifier: ^6.6.3
version: 6.6.3(typescript@4.9.5)
@@ -275,6 +281,16 @@ packages:
- supports-color
dev: true
+ /@babel/generator@7.21.9:
+ resolution: {integrity: sha512-F3fZga2uv09wFdEjEQIJxXALXfz0+JaOb7SabvVMmjHxeVTuGW8wgE8Vp1Hd7O+zMTYtcfEISGRzPkeiaPPsvg==}
+ engines: {node: '>=6.9.0'}
+ dependencies:
+ '@babel/types': 7.22.5
+ '@jridgewell/gen-mapping': 0.3.3
+ '@jridgewell/trace-mapping': 0.3.18
+ jsesc: 2.5.2
+ dev: true
+
/@babel/generator@7.22.5:
resolution: {integrity: sha512-+lcUbnTRhd0jOewtFSedLyiPsD5tswKkbgcezOqqWFUVNEwoUTlpPOBmvhG7OXWLR4jMdv0czPGH5XbflnD1EA==}
engines: {node: '>=6.9.0'}
@@ -518,6 +534,14 @@ packages:
js-tokens: 4.0.0
dev: true
+ /@babel/parser@7.21.9:
+ resolution: {integrity: sha512-q5PNg/Bi1OpGgx5jYlvWZwAorZepEudDMCLtj967aeS7WMont7dUZI46M2XwcIQqvUlMxWfdLFu4S/qSxeUu5g==}
+ engines: {node: '>=6.0.0'}
+ hasBin: true
+ dependencies:
+ '@babel/types': 7.22.5
+ dev: true
+
/@babel/parser@7.22.5:
resolution: {integrity: sha512-DFZMC9LJUG9PLOclRC32G63UXwzqS2koQC8dkx+PLdmt1xSePYpbT/NbsrJy8Q/muXz7o/h/d4A7Fuyixm559Q==}
engines: {node: '>=6.0.0'}
@@ -1274,6 +1298,20 @@ packages:
'@babel/helper-plugin-utils': 7.22.5
dev: true
+ /@babel/plugin-transform-react-jsx@7.22.5(@babel/core@7.22.5):
+ resolution: {integrity: sha512-rog5gZaVbUip5iWDMTYbVM15XQq+RkUKhET/IHR6oizR+JEoN6CAfTTuHcK4vwUyzca30qqHqEpzBOnaRMWYMA==}
+ engines: {node: '>=6.9.0'}
+ peerDependencies:
+ '@babel/core': ^7.0.0-0
+ dependencies:
+ '@babel/core': 7.22.5
+ '@babel/helper-annotate-as-pure': 7.22.5
+ '@babel/helper-module-imports': 7.22.5
+ '@babel/helper-plugin-utils': 7.22.5
+ '@babel/plugin-syntax-jsx': 7.22.5(@babel/core@7.22.5)
+ '@babel/types': 7.22.5
+ dev: true
+
/@babel/plugin-transform-regenerator@7.22.5(@babel/core@7.22.5):
resolution: {integrity: sha512-rR7KePOE7gfEtNTh9Qw+iO3Q/e4DEsoQ+hdvM6QUDH7JRJ5qxq5AA52ZzBWbI5i9lfNuvySgOGP8ZN7LAmaiPw==}
engines: {node: '>=6.9.0'}
@@ -1569,6 +1607,24 @@ packages:
'@babel/types': 7.22.5
dev: true
+ /@babel/traverse@7.21.5:
+ resolution: {integrity: sha512-AhQoI3YjWi6u/y/ntv7k48mcrCXmus0t79J9qPNlk/lAsFlCiJ047RmbfMOawySTHtywXhbXgpx/8nXMYd+oFw==}
+ engines: {node: '>=6.9.0'}
+ dependencies:
+ '@babel/code-frame': 7.22.5
+ '@babel/generator': 7.22.5
+ '@babel/helper-environment-visitor': 7.22.5
+ '@babel/helper-function-name': 7.22.5
+ '@babel/helper-hoist-variables': 7.22.5
+ '@babel/helper-split-export-declaration': 7.22.5
+ '@babel/parser': 7.22.5
+ '@babel/types': 7.22.5
+ debug: 4.3.4
+ globals: 11.12.0
+ transitivePeerDependencies:
+ - supports-color
+ dev: true
+
/@babel/traverse@7.22.5:
resolution: {integrity: sha512-7DuIjPgERaNo6r+PZwItpjCZEa5vyw4eJGufeLxrPdBXBoLcCJCIasvK6pK/9DVNrLZTLFhUGqaC6X/PA007TQ==}
engines: {node: '>=6.9.0'}
@@ -1587,6 +1643,15 @@ packages:
- supports-color
dev: true
+ /@babel/types@7.21.5:
+ resolution: {integrity: sha512-m4AfNvVF2mVC/F7fDEdH2El3HzUg9It/XsCxZiOTTA3m3qYfcSVSbTfM6Q9xG+hYDniZssYhlXKKUMD5m8tF4Q==}
+ engines: {node: '>=6.9.0'}
+ dependencies:
+ '@babel/helper-string-parser': 7.22.5
+ '@babel/helper-validator-identifier': 7.22.5
+ to-fast-properties: 2.0.0
+ dev: true
+
/@babel/types@7.22.5:
resolution: {integrity: sha512-zo3MIHGOkPOfoRXitsgHLjEXmlDaD/5KU1Uzuc9GNiZPhSqVxVRtxuPaSBZDsYZ9qV88AjtMtWW7ww98loJ9KA==}
engines: {node: '>=6.9.0'}
@@ -2202,6 +2267,22 @@ packages:
resolution: {integrity: sha512-cEee/Z+I12mZcFJshKcCqC8tuX5hG3s+d+9nZ3LabqKF1vKdF41B92pJVCBggjAGORAeOzyyDDKrZwIkLffeOQ==}
dev: true
+ /@figspec/components@1.0.1:
+ resolution: {integrity: sha512-UvnEamPEAMh9HExViqpobWmX25g1+soA9kcJu+It3VerMa7CeVyaIbQydNf1Gys5v/rxJVdTDRgQ7OXW2zAAig==}
+ dependencies:
+ lit: 2.7.5
+ dev: true
+
+ /@figspec/react@1.0.3(react@18.0.0):
+ resolution: {integrity: sha512-r683qOko+5CbT48Ox280fMx2MNAtaFPgCNJvldOqN3YtmAzlcTT+YSxd3OahA+kjXGGrnzDbUgeTOX1cPLII+g==}
+ peerDependencies:
+ react: ^16.14.0 || ^17.0.0 || ^18.0.0
+ dependencies:
+ '@figspec/components': 1.0.1
+ '@lit-labs/react': 1.2.0
+ react: 18.0.0
+ dev: true
+
/@hypnosphi/create-react-context@0.3.1(prop-types@15.8.1)(react@18.0.0):
resolution: {integrity: sha512-V1klUed202XahrWJLLOT3EXNeCpFHCcJntdFGI15ntCwau+jfT386w7OFTMaCqOgXUH1fa0w/I1oZs+i/Rfr0A==}
peerDependencies:
@@ -2337,6 +2418,20 @@ packages:
/@juggle/resize-observer@3.4.0:
resolution: {integrity: sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==}
+ /@lit-labs/react@1.2.0:
+ resolution: {integrity: sha512-AIfHLsy4Uk0MSxZTVLrtmdkGnAgCOoAvBCAvTdOXsqp60Vb4zZTUpc0C3CJQ6e8FjM6JL0avOFFBo3XcfARq2Q==}
+ dev: true
+
+ /@lit-labs/ssr-dom-shim@1.1.1:
+ resolution: {integrity: sha512-kXOeFbfCm4fFf2A3WwVEeQj55tMZa8c8/f9AKHMobQMkzNUfUj+antR3fRPaZJawsa1aZiP/Da3ndpZrwEe4rQ==}
+ dev: true
+
+ /@lit/reactive-element@1.6.2:
+ resolution: {integrity: sha512-rDfl+QnCYjuIGf5xI2sVJWdYIi56CTCwWa+nidKYX6oIuBYwUbT/vX4qbUDlHiZKJ/3FRNQ/tWJui44p6/stSA==}
+ dependencies:
+ '@lit-labs/ssr-dom-shim': 1.1.1
+ dev: true
+
/@mdx-js/react@2.3.0(react@18.0.0):
resolution: {integrity: sha512-zQH//gdOmuu7nt2oJR29vFhDv88oGPmVw6BggmrHeMI+xgEkp1B2dX9/bMBSYtK0dyLX/aOmesKS09g222K1/g==}
peerDependencies:
@@ -2643,6 +2738,39 @@ packages:
- supports-color
dev: true
+ /@storybook/addon-docs@7.0.21(react-dom@18.0.0)(react@18.0.0):
+ resolution: {integrity: sha512-eJxNCMZLN9QHmpEMPoWKw8m6TqL+R38F7fRYuJAAB9VICF8nBn79QD46yKlSxL6UXGyhFmtuQn/Wf3E3a7ywEw==}
+ peerDependencies:
+ react: ^16.8.0 || ^17.0.0 || ^18.0.0
+ react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+ dependencies:
+ '@babel/core': 7.22.5
+ '@babel/plugin-transform-react-jsx': 7.22.5(@babel/core@7.22.5)
+ '@jest/transform': 29.5.0
+ '@mdx-js/react': 2.3.0(react@18.0.0)
+ '@storybook/blocks': 7.0.21(react-dom@18.0.0)(react@18.0.0)
+ '@storybook/client-logger': 7.0.21
+ '@storybook/components': 7.0.21(react-dom@18.0.0)(react@18.0.0)
+ '@storybook/csf-plugin': 7.0.21
+ '@storybook/csf-tools': 7.0.21
+ '@storybook/global': 5.0.0
+ '@storybook/mdx2-csf': 1.1.0
+ '@storybook/node-logger': 7.0.21
+ '@storybook/postinstall': 7.0.21
+ '@storybook/preview-api': 7.0.21
+ '@storybook/react-dom-shim': 7.0.21(react-dom@18.0.0)(react@18.0.0)
+ '@storybook/theming': 7.0.21(react-dom@18.0.0)(react@18.0.0)
+ '@storybook/types': 7.0.21
+ fs-extra: 11.1.1
+ react: 18.0.0
+ react-dom: 18.0.0(react@18.0.0)
+ remark-external-links: 8.0.0
+ remark-slug: 6.1.0
+ ts-dedent: 2.2.0
+ transitivePeerDependencies:
+ - supports-color
+ dev: true
+
/@storybook/addon-docs@7.1.0-alpha.34(react-dom@18.0.0)(react@18.0.0):
resolution: {integrity: sha512-/Kerok/JIIjgYZeJnoZ7jOXpH4yf0IkZCyP2nXIA8j1uz8o4QWjYv+uEJvYPxar/J2tB4xjU7JjxekbS2QE/Mw==}
peerDependencies:
@@ -2853,6 +2981,70 @@ packages:
react-dom: 18.0.0(react@18.0.0)
dev: true
+ /@storybook/addons@7.0.21(react-dom@18.0.0)(react@18.0.0):
+ resolution: {integrity: sha512-5eTaQwNpgZnri3HZ10gLCSt+QWN2V9YXUPrCW7RI1PKtugNbN7Ufp87Q+OzluAuY3BEaabP4CYbqcz+db+fy1A==}
+ peerDependencies:
+ react: ^16.8.0 || ^17.0.0 || ^18.0.0
+ react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+ dependencies:
+ '@storybook/manager-api': 7.0.21(react-dom@18.0.0)(react@18.0.0)
+ '@storybook/preview-api': 7.0.21
+ '@storybook/types': 7.0.21
+ react: 18.0.0
+ react-dom: 18.0.0(react@18.0.0)
+ dev: true
+
+ /@storybook/api@7.0.21(react-dom@18.0.0)(react@18.0.0):
+ resolution: {integrity: sha512-3k1zHMkzS3pmlwi3TUvM8CV0p5e4Wb6CZVRSq/0M4WT4h0tPNrhziJPWOGpkEfxQl4KINWuVvibLBOGwWacEmg==}
+ peerDependencies:
+ react: ^16.8.0 || ^17.0.0 || ^18.0.0
+ react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+ peerDependenciesMeta:
+ react:
+ optional: true
+ react-dom:
+ optional: true
+ dependencies:
+ '@storybook/client-logger': 7.0.21
+ '@storybook/manager-api': 7.0.21(react-dom@18.0.0)(react@18.0.0)
+ react: 18.0.0
+ react-dom: 18.0.0(react@18.0.0)
+ dev: true
+
+ /@storybook/blocks@7.0.21(react-dom@18.0.0)(react@18.0.0):
+ resolution: {integrity: sha512-afyr5qR2uO2gsJEXlzXPhOhMg0tAkUga5WbHQYF+7BxODYRXyXWhx95E1UHulgwTwgZHdzTrON4DmPH8M7NK0A==}
+ peerDependencies:
+ react: ^16.8.0 || ^17.0.0 || ^18.0.0
+ react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+ dependencies:
+ '@storybook/channels': 7.0.21
+ '@storybook/client-logger': 7.0.21
+ '@storybook/components': 7.0.21(react-dom@18.0.0)(react@18.0.0)
+ '@storybook/core-events': 7.0.21
+ '@storybook/csf': 0.1.1
+ '@storybook/docs-tools': 7.0.21
+ '@storybook/global': 5.0.0
+ '@storybook/manager-api': 7.0.21(react-dom@18.0.0)(react@18.0.0)
+ '@storybook/preview-api': 7.0.21
+ '@storybook/theming': 7.0.21(react-dom@18.0.0)(react@18.0.0)
+ '@storybook/types': 7.0.21
+ '@types/lodash': 4.14.195
+ color-convert: 2.0.1
+ dequal: 2.0.3
+ lodash: 4.17.21
+ markdown-to-jsx: 7.2.1(react@18.0.0)
+ memoizerific: 1.11.3
+ polished: 4.2.2
+ react: 18.0.0
+ react-colorful: 5.6.1(react-dom@18.0.0)(react@18.0.0)
+ react-dom: 18.0.0(react@18.0.0)
+ telejson: 7.1.0
+ ts-dedent: 2.2.0
+ util-deprecate: 1.0.2
+ transitivePeerDependencies:
+ - supports-color
+ dev: true
+
/@storybook/blocks@7.1.0-alpha.34(react-dom@18.0.0)(react@18.0.0):
resolution: {integrity: sha512-s0rIcMHFmA5ImK9boYTwi0dB1QthTL4EtBL7+mASgiyUKa59ZE0JRA0Adrw1MrABymUts9oIUualpmdl9zW1wQ==}
peerDependencies:
@@ -2949,6 +3141,17 @@ packages:
- supports-color
dev: true
+ /@storybook/channel-postmessage@7.0.21:
+ resolution: {integrity: sha512-zlm40ZMhi76gVPMJsOLyorcKQy4RpAoVQfdXne83x+xP/A2ppOyXEAhC9pQ5oaKM+ag3EQuIS+yK4zGIeriaYg==}
+ dependencies:
+ '@storybook/channels': 7.0.21
+ '@storybook/client-logger': 7.0.21
+ '@storybook/core-events': 7.0.21
+ '@storybook/global': 5.0.0
+ qs: 6.11.2
+ telejson: 7.1.0
+ dev: true
+
/@storybook/channel-postmessage@7.1.0-alpha.34:
resolution: {integrity: sha512-5H2XCeEeKUTkG/4bbMD+xM3DWbIC+4DXwnd0aLN8BxHqjlWxD83m95i05eCZAZ+VlM40UocDvLeZYr1menrvZQ==}
dependencies:
@@ -2962,6 +3165,10 @@ packages:
'@storybook/client-logger': 7.1.0-alpha.35
dev: true
+ /@storybook/channels@7.0.21:
+ resolution: {integrity: sha512-8h4lvGQsdWrn/eLW9D9ZGB8FGTzRuC1almykVThb9SkATKZjUyUvtRT+BklsDIinptham83+0QiSdTrv52kAfA==}
+ dev: true
+
/@storybook/channels@7.1.0-alpha.34:
resolution: {integrity: sha512-lC8EwBYacTFEQ+tG0tyPfW/05XrsSt0+glAIBgAaDKggRLvdYUP6oukvsz0Zw6vDxSIJol6kF1WB0BTXb07Tig==}
dependencies:
@@ -3037,6 +3244,12 @@ packages:
'@storybook/global': 5.0.0
dev: false
+ /@storybook/client-logger@7.0.21:
+ resolution: {integrity: sha512-ENoBDuVr3RPepm6cBp61GGtGGUuogBzqMUaN4Rti+wYx9sKJlmDA8SR/fMk+GxeiJ5NOnYoa1Q1kCaF8/VFD9A==}
+ dependencies:
+ '@storybook/global': 5.0.0
+ dev: true
+
/@storybook/client-logger@7.1.0-alpha.34:
resolution: {integrity: sha512-bb740Ex080V7/SgcxTVohO+aPFE0pHA4lkRAJEEKZkfluzBZrNTJzgT+THIdxHPux/EyKGHL2wS1wdREdcgfhw==}
dependencies:
@@ -3069,6 +3282,24 @@ packages:
- supports-color
dev: true
+ /@storybook/components@7.0.21(react-dom@18.0.0)(react@18.0.0):
+ resolution: {integrity: sha512-5h3ptaQxSwFetd0dhlNTZeaLfDYY7Mj9n/N6pTs71piW5gaM+o/Na7EMhuDDWa001zBXYdJYdcKU/a7FDQDuGQ==}
+ peerDependencies:
+ react: ^16.8.0 || ^17.0.0 || ^18.0.0
+ react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+ dependencies:
+ '@storybook/client-logger': 7.0.21
+ '@storybook/csf': 0.1.1
+ '@storybook/global': 5.0.0
+ '@storybook/theming': 7.0.21(react-dom@18.0.0)(react@18.0.0)
+ '@storybook/types': 7.0.21
+ memoizerific: 1.11.3
+ react: 18.0.0
+ react-dom: 18.0.0(react@18.0.0)
+ use-resize-observer: 9.1.0(react-dom@18.0.0)(react@18.0.0)
+ util-deprecate: 1.0.2
+ dev: true
+
/@storybook/components@7.1.0-alpha.34(react-dom@18.0.0)(react@18.0.0):
resolution: {integrity: sha512-602fP4Jptg2g7JXUvcu8F7M+vh4PCklfPGIUP4JbKGa+Qm9RrtI/+1ImK6C7UD8AkW0RPnZJRrP/T5uYkEhsIA==}
peerDependencies:
@@ -3093,6 +3324,32 @@ packages:
'@storybook/preview-api': 7.1.0-alpha.34
dev: true
+ /@storybook/core-common@7.0.21:
+ resolution: {integrity: sha512-hxQXufZxbrDqASTfrJ/C4PlIvRwwmdElOrnzeWA4e4pRGK2YUInAsKxN7WKRDL42fBLfrHo3XmdshkvPej4M4A==}
+ dependencies:
+ '@storybook/node-logger': 7.0.21
+ '@storybook/types': 7.0.21
+ '@types/node': 16.18.36
+ '@types/pretty-hrtime': 1.0.1
+ chalk: 4.1.2
+ esbuild: 0.17.19
+ esbuild-register: 3.4.2(esbuild@0.17.19)
+ file-system-cache: 2.3.0
+ find-up: 5.0.0
+ fs-extra: 11.1.1
+ glob: 8.1.0
+ glob-promise: 6.0.3(glob@8.1.0)
+ handlebars: 4.7.7
+ lazy-universal-dotenv: 4.0.0
+ picomatch: 2.3.1
+ pkg-dir: 5.0.0
+ pretty-hrtime: 1.0.3
+ resolve-from: 5.0.0
+ ts-dedent: 2.2.0
+ transitivePeerDependencies:
+ - supports-color
+ dev: true
+
/@storybook/core-common@7.1.0-alpha.34:
resolution: {integrity: sha512-1BGYiYwZk6z0g8y2XnzxTy8l+hNv9ShV2fW6womqUTSDFSk2Xygk8GdNHtuambUP5h6UzVTA7XMu+TTpYbZkVw==}
dependencies:
@@ -3119,6 +3376,10 @@ packages:
transitivePeerDependencies:
- supports-color
+ /@storybook/core-events@7.0.21:
+ resolution: {integrity: sha512-Qjtjrj+hFaC3b00p6q2aAxyLaRQWBf5eEPw5r0djcm5esXIs/q2xvu2xby7PR6KnKg/jT1bU9TOBxWbtKycijQ==}
+ dev: true
+
/@storybook/core-events@7.1.0-alpha.34:
resolution: {integrity: sha512-b9+2dm8kz7d1DzyhCjhgWAwbOSvKakI/Jcnp/ml4CEZhOTx77fHgfRxEPwxMc1g+xHM8YZGSLgAb857ShJwfEw==}
@@ -3178,6 +3439,15 @@ packages:
- utf-8-validate
dev: true
+ /@storybook/csf-plugin@7.0.21:
+ resolution: {integrity: sha512-oaCgizetktTzxgJlJURA3RLQSDYAECw80XGbcUdruCMVgU1WrMrMJIdiYLqDDPUWSAZuFp4RsmfRjWTK6WxRUA==}
+ dependencies:
+ '@storybook/csf-tools': 7.0.21
+ unplugin: 0.10.2
+ transitivePeerDependencies:
+ - supports-color
+ dev: true
+
/@storybook/csf-plugin@7.1.0-alpha.34:
resolution: {integrity: sha512-2JoTeeis/k6Ph17QjTI660oEpeP3gxkK8VsY4UFvJ62D7am12HFs8mQmeL9xbBLnecouPViPIrdtYVd8+l8K4g==}
dependencies:
@@ -3187,6 +3457,22 @@ packages:
- supports-color
dev: true
+ /@storybook/csf-tools@7.0.21:
+ resolution: {integrity: sha512-a3oN29dgf+5pLOTtXyZhfzPhTEPvw44GAoQmi5giUMB486j6PSEq9IPj/birJk9+lX/ho6M9ZzI9QiBMXVeXlQ==}
+ dependencies:
+ '@babel/generator': 7.21.9
+ '@babel/parser': 7.21.9
+ '@babel/traverse': 7.21.5
+ '@babel/types': 7.21.5
+ '@storybook/csf': 0.1.1
+ '@storybook/types': 7.0.21
+ fs-extra: 11.1.1
+ recast: 0.23.2
+ ts-dedent: 2.2.0
+ transitivePeerDependencies:
+ - supports-color
+ dev: true
+
/@storybook/csf-tools@7.1.0-alpha.34:
resolution: {integrity: sha512-+J0jB6b+873gCfd8pICFNFbB0ru9daY56X7uij9XsGSUQL64uOQ53Gs1P2C1bJEoKLuAu0x2ryByf4rBGIUlzg==}
dependencies:
@@ -3238,6 +3524,20 @@ packages:
resolution: {integrity: sha512-JDaBR9lwVY4eSH5W8EGHrhODjygPd6QImRbwjAuJNEnY0Vw4ie3bPkeGfnacB3OBW6u/agqPv2aRlR46JcAQLg==}
dev: true
+ /@storybook/docs-tools@7.0.21:
+ resolution: {integrity: sha512-V2rgkmLdcariZQEx2VFtmFhQRRj7LyvlrRZjNyL5jMyWYXYG1W/LZhIXgnMOhf0gjkJlCnRAF4LBZVK8dN84BA==}
+ dependencies:
+ '@babel/core': 7.22.5
+ '@storybook/core-common': 7.0.21
+ '@storybook/preview-api': 7.0.21
+ '@storybook/types': 7.0.21
+ '@types/doctrine': 0.0.3
+ doctrine: 3.0.0
+ lodash: 4.17.21
+ transitivePeerDependencies:
+ - supports-color
+ dev: true
+
/@storybook/docs-tools@7.1.0-alpha.34:
resolution: {integrity: sha512-cmtQo5jx6eIOI3VgR3BYd3gJiLm8m+HEe9rj838pRuzBr3rsR6JZdXM5yYNV7u7r2oVWqbAay5rgDHBerAoorw==}
dependencies:
@@ -3273,6 +3573,31 @@ packages:
'@storybook/preview-api': 7.1.0-alpha.35
dev: true
+ /@storybook/manager-api@7.0.21(react-dom@18.0.0)(react@18.0.0):
+ resolution: {integrity: sha512-YgS676/OMq2KmvYomcNzjwsVUtMYUylIt/0z5Fmg7exPXubEGpRd4OZIrQGHgcLKQRKZMK9GcsSkxebHO+qrsg==}
+ peerDependencies:
+ react: ^16.8.0 || ^17.0.0 || ^18.0.0
+ react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+ dependencies:
+ '@storybook/channels': 7.0.21
+ '@storybook/client-logger': 7.0.21
+ '@storybook/core-events': 7.0.21
+ '@storybook/csf': 0.1.1
+ '@storybook/global': 5.0.0
+ '@storybook/router': 7.0.21(react-dom@18.0.0)(react@18.0.0)
+ '@storybook/theming': 7.0.21(react-dom@18.0.0)(react@18.0.0)
+ '@storybook/types': 7.0.21
+ dequal: 2.0.3
+ lodash: 4.17.21
+ memoizerific: 1.11.3
+ react: 18.0.0
+ react-dom: 18.0.0(react@18.0.0)
+ semver: 7.5.1
+ store2: 2.14.2
+ telejson: 7.1.0
+ ts-dedent: 2.2.0
+ dev: true
+
/@storybook/manager-api@7.1.0-alpha.34(react-dom@18.0.0)(react@18.0.0):
resolution: {integrity: sha512-X7hx+6tTuitgFWr88XrbZl4tKnFPnzha9O+U/XvFp5ESTelcUVHNDCAxKf/jvHFfZGKdFE0A6uQ5mnCPXwNKww==}
peerDependencies:
@@ -3305,6 +3630,15 @@ packages:
resolution: {integrity: sha512-TXJJd5RAKakWx4BtpwvSNdgTDkKM6RkXU8GK34S/LhidQ5Pjz3wcnqb0TxEkfhK/ztbP8nKHqXFwLfa2CYkvQw==}
dev: true
+ /@storybook/node-logger@7.0.21:
+ resolution: {integrity: sha512-km7MfQ7Hk04UsH/ZgwW5iqSxlGi/Z/lw8Mb0Zdv7ms+FllPBPf5BhgjuC7LA6y+3WUghl6ESpDoig2771TNy4w==}
+ dependencies:
+ '@types/npmlog': 4.1.4
+ chalk: 4.1.2
+ npmlog: 5.0.1
+ pretty-hrtime: 1.0.3
+ dev: true
+
/@storybook/node-logger@7.1.0-alpha.34:
resolution: {integrity: sha512-gYE4fSlYNSfO8A7FzOsx3lMTqgWSb1awyiNSLXBQ6YmLEbU663HN5oFwXB9tS2/9esBMi565LY5ir5xY+AGlOg==}
dependencies:
@@ -3313,10 +3647,34 @@ packages:
npmlog: 5.0.1
pretty-hrtime: 1.0.3
+ /@storybook/postinstall@7.0.21:
+ resolution: {integrity: sha512-eSq+24DQpa58Dw+TlV4KCNbWnyjTAZ7hvBYRs8578qAMB0gsPh6MCPAKcrpN9TTNBMWKQxC5W6QGGVsVJ+8ByQ==}
+ dev: true
+
/@storybook/postinstall@7.1.0-alpha.34:
resolution: {integrity: sha512-xkSZp625eQ2mcL3jTzib/Rgb5zyu8JZu8FLR3VHA4Mo88NjEjuw/1g1JfnfzWcgQqdU9RqjfW0migZlXpa316Q==}
dev: true
+ /@storybook/preview-api@7.0.21:
+ resolution: {integrity: sha512-IvOxQdSLV3B+82zS8MDHSO/pMEQdKIXJaz3knizhRuuB+cCdfv2Sro3IL3l8m2+90ySSwkfCqVEI4tdIC1ODXg==}
+ dependencies:
+ '@storybook/channel-postmessage': 7.0.21
+ '@storybook/channels': 7.0.21
+ '@storybook/client-logger': 7.0.21
+ '@storybook/core-events': 7.0.21
+ '@storybook/csf': 0.1.1
+ '@storybook/global': 5.0.0
+ '@storybook/types': 7.0.21
+ '@types/qs': 6.9.7
+ dequal: 2.0.3
+ lodash: 4.17.21
+ memoizerific: 1.11.3
+ qs: 6.11.2
+ synchronous-promise: 2.0.17
+ ts-dedent: 2.2.0
+ util-deprecate: 1.0.2
+ dev: true
+
/@storybook/preview-api@7.1.0-alpha.34:
resolution: {integrity: sha512-oJeM+TM4Ma/2BtvPonvy6sxZwheLAFHbVhY+jO/L6SGuIJGVmCbxBh7k+LV4LbZR2RuXMMAFFOb7EjMrLcX+0A==}
dependencies:
@@ -3360,6 +3718,16 @@ packages:
resolution: {integrity: sha512-Xlfis+lGcCQImLpNMD8Ms/n+/7MPoDPim+rqTwdGgV63V7d0gIE8U0R5RGtFsMdY3mb+gxlFcAgDZz5KyaN1XQ==}
dev: true
+ /@storybook/react-dom-shim@7.0.21(react-dom@18.0.0)(react@18.0.0):
+ resolution: {integrity: sha512-hccpaFWZjZjD5F/hBXU59RdaF2pnN3hvygIAY7P8cIRu9lfhMZWpZyuEJBjHUqHSX+6CoNLzpSQHeVv+6Vo0rg==}
+ peerDependencies:
+ react: ^16.8.0 || ^17.0.0 || ^18.0.0
+ react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+ dependencies:
+ react: 18.0.0
+ react-dom: 18.0.0(react@18.0.0)
+ dev: true
+
/@storybook/react-dom-shim@7.1.0-alpha.34(react-dom@18.0.0)(react@18.0.0):
resolution: {integrity: sha512-9hzE+tZNNOLTHf5Z7GX8ivRMkBqjEi/b0qpxZaYkrT8wREwBtsDCEdgG6IZbw757yBFr0nP6yxGuDtazseUdMA==}
peerDependencies:
@@ -3436,6 +3804,19 @@ packages:
- supports-color
dev: true
+ /@storybook/router@7.0.21(react-dom@18.0.0)(react@18.0.0):
+ resolution: {integrity: sha512-zVEwW8PPrg3UXaBlVw9s5wXlJhm9AwG0Lta9Oc0limg1JeXtE1alV+VH8b/O5ECjp34mTXHIAyNU1EF0bozgVw==}
+ peerDependencies:
+ react: ^16.8.0 || ^17.0.0 || ^18.0.0
+ react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+ dependencies:
+ '@storybook/client-logger': 7.0.21
+ memoizerific: 1.11.3
+ qs: 6.11.2
+ react: 18.0.0
+ react-dom: 18.0.0(react@18.0.0)
+ dev: true
+
/@storybook/router@7.1.0-alpha.34(react-dom@18.0.0)(react@18.0.0):
resolution: {integrity: sha512-XCg+Hn1k8nC110oWQa5eBG/sCe0PWwJQ3Ew8AQcPapOGJ49iXJztm3CO9U226hUNROeszQDLi0wWcoeEPL3WeA==}
peerDependencies:
@@ -3486,6 +3867,20 @@ packages:
react-dom: 18.0.0(react@18.0.0)
dev: false
+ /@storybook/theming@7.0.21(react-dom@18.0.0)(react@18.0.0):
+ resolution: {integrity: sha512-tgWoT0IdyPQIg+s/JMnP+MGTsAvNm6FJuiuKPebngids6rdYQ3EA5uQjBVV7De650JLhBFTFocS2Puj4Lti2bw==}
+ peerDependencies:
+ react: ^16.8.0 || ^17.0.0 || ^18.0.0
+ react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+ dependencies:
+ '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.0.0)
+ '@storybook/client-logger': 7.0.21
+ '@storybook/global': 5.0.0
+ memoizerific: 1.11.3
+ react: 18.0.0
+ react-dom: 18.0.0(react@18.0.0)
+ dev: true
+
/@storybook/theming@7.1.0-alpha.34(react-dom@18.0.0)(react@18.0.0):
resolution: {integrity: sha512-kjicxl4tTl2Q820OnUbd+kJmQMuLDLGl81KuKXNXqkNkdVt/9cTNbD3TrtRKGevXgnizqWTm2j6sZgpX9P/lCA==}
peerDependencies:
@@ -3499,6 +3894,15 @@ packages:
react: 18.0.0
react-dom: 18.0.0(react@18.0.0)
+ /@storybook/types@7.0.21:
+ resolution: {integrity: sha512-gZ8XEsg0upyiisbe2Qv+G+XN2+nZCxj6vJKvgWxuBPCjqN3Uw34cgDrIJuSa8YjE/yl/nsaV5s0xYdFXAl7JVQ==}
+ dependencies:
+ '@storybook/channels': 7.0.21
+ '@types/babel__core': 7.20.1
+ '@types/express': 4.17.17
+ file-system-cache: 2.3.0
+ dev: true
+
/@storybook/types@7.1.0-alpha.34:
resolution: {integrity: sha512-edgqqXNsk3DXknZt0oq8NlCxJK7vY4bpRSAevxUp35dvL/t9WodebyjUKeDBhh8wf9kZAOvtFZBou8NlA5flcg==}
dependencies:
@@ -3653,6 +4057,13 @@ packages:
'@types/node': 18.15.0
dev: true
+ /@types/glob@8.1.0:
+ resolution: {integrity: sha512-IO+MJPVhoqz+28h1qLAcBEH2+xHMK6MTyHJc7MTnnYb6wsoLR29POVGJ7LycmVXIqyy/4/2ShP5sUwTXuOwb/w==}
+ dependencies:
+ '@types/minimatch': 5.1.2
+ '@types/node': 18.15.0
+ dev: true
+
/@types/graceful-fs@4.1.6:
resolution: {integrity: sha512-Sig0SNORX9fdW+bQuTEovKj3uHcUL6LQKbCrrqb1X7J6/ReAbhCXRAhc+SMejhLELFj2QcyuxmUooZ4bt5ReSw==}
dependencies:
@@ -3790,6 +4201,10 @@ packages:
'@types/node': 18.15.0
dev: true
+ /@types/trusted-types@2.0.3:
+ resolution: {integrity: sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g==}
+ dev: true
+
/@types/unist@2.0.6:
resolution: {integrity: sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==}
dev: true
@@ -5069,6 +5484,17 @@ packages:
resolution: {integrity: sha512-jyfL/pwPqaFXyKnj8lP8iLk6Z0m099uXR45aSN8Av1XD4vhvQutxxPzgA2bTcAwQpa1zCXDcWOlhFgyP3GKqhQ==}
dev: true
+ /esbuild-register@3.4.2(esbuild@0.17.19):
+ resolution: {integrity: sha512-kG/XyTDyz6+YDuyfB9ZoSIOOmgyFCH+xPRtsCa8W85HLRV5Csp+o3jWVbOSHgSLfyLc5DmP+KFDNwty4mEjC+Q==}
+ peerDependencies:
+ esbuild: '>=0.12 <1'
+ dependencies:
+ debug: 4.3.4
+ esbuild: 0.17.19
+ transitivePeerDependencies:
+ - supports-color
+ dev: true
+
/esbuild-register@3.4.2(esbuild@0.18.2):
resolution: {integrity: sha512-kG/XyTDyz6+YDuyfB9ZoSIOOmgyFCH+xPRtsCa8W85HLRV5Csp+o3jWVbOSHgSLfyLc5DmP+KFDNwty4mEjC+Q==}
peerDependencies:
@@ -5676,6 +6102,16 @@ packages:
glob: 7.2.3
dev: true
+ /glob-promise@6.0.3(glob@8.1.0):
+ resolution: {integrity: sha512-m+kxywR5j/2Z2V9zvHKfwwL5Gp7gIFEBX+deTB9w2lJB+wSuw9kcS43VfvTAMk8TXL5JCl/cCjsR+tgNVspGyA==}
+ engines: {node: '>=16'}
+ peerDependencies:
+ glob: ^8.0.3
+ dependencies:
+ '@types/glob': 8.1.0
+ glob: 8.1.0
+ dev: true
+
/glob-to-regexp@0.4.1:
resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==}
dev: true
@@ -5713,6 +6149,17 @@ packages:
path-is-absolute: 1.0.1
dev: true
+ /glob@8.1.0:
+ resolution: {integrity: sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==}
+ engines: {node: '>=12'}
+ dependencies:
+ fs.realpath: 1.0.0
+ inflight: 1.0.6
+ inherits: 2.0.4
+ minimatch: 5.1.6
+ once: 1.4.0
+ dev: true
+
/globals@11.12.0:
resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
engines: {node: '>=4'}
@@ -6469,6 +6916,28 @@ packages:
resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
dev: true
+ /lit-element@3.3.2:
+ resolution: {integrity: sha512-xXAeVWKGr4/njq0rGC9dethMnYCq5hpKYrgQZYTzawt9YQhMiXfD+T1RgrdY3NamOxwq2aXlb0vOI6e29CKgVQ==}
+ dependencies:
+ '@lit-labs/ssr-dom-shim': 1.1.1
+ '@lit/reactive-element': 1.6.2
+ lit-html: 2.7.4
+ dev: true
+
+ /lit-html@2.7.4:
+ resolution: {integrity: sha512-/Jw+FBpeEN+z8X6PJva5n7+0MzCVAH2yypN99qHYYkq8bI+j7I39GH+68Z/MZD6rGKDK9RpzBw7CocfmHfq6+g==}
+ dependencies:
+ '@types/trusted-types': 2.0.3
+ dev: true
+
+ /lit@2.7.5:
+ resolution: {integrity: sha512-i/cH7Ye6nBDUASMnfwcictBnsTN91+aBjXoTHF2xARghXScKxpD4F4WYI+VLXg9lqbMinDfvoI7VnZXjyHgdfQ==}
+ dependencies:
+ '@lit/reactive-element': 1.6.2
+ lit-element: 3.3.2
+ lit-html: 2.7.4
+ dev: true
+
/load-json-file@4.0.0:
resolution: {integrity: sha512-Kx8hMakjX03tiGTLAIdJ+lL0htKnXjEZN6hk/tozf/WOuYGdZBJrZ+rCJRbVCugsjB3jMLn9746NsQIf5VjBMw==}
engines: {node: '>=4'}
@@ -8136,6 +8605,32 @@ packages:
/store2@2.14.2:
resolution: {integrity: sha512-siT1RiqlfQnGqgT/YzXVUNsom9S0H1OX+dpdGN1xkyYATo4I6sep5NmsRD/40s3IIOvlCq6akxkqG82urIZW1w==}
+ /storybook-addon-designs@7.0.0-beta.2(@storybook/addon-docs@7.0.21)(@storybook/addons@7.0.21)(@storybook/api@7.0.21)(@storybook/components@7.1.0-alpha.34)(@storybook/theming@7.1.0-alpha.34)(react-dom@18.0.0)(react@18.0.0):
+ resolution: {integrity: sha512-ljBNmyCJdPTXhiBSfA1S+GBxtMooW2M7nxlt49OoCRH7jcxZOYQdiI8JYQiMF5Ur0MGakbSci0Xm+JzAvcm02g==}
+ peerDependencies:
+ '@storybook/addon-docs': ^6.4.0 || ^7.0.0
+ '@storybook/addons': ^6.4.0 || ^7.0.0
+ '@storybook/api': ^6.4.0 || ^7.0.0
+ '@storybook/components': ^6.4.0 || ^7.0.0
+ '@storybook/theming': ^6.4.0 || ^7.0.0
+ react: ^16.8.0 || ^17.0.0 || ^18.0.0
+ react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+ peerDependenciesMeta:
+ react:
+ optional: true
+ react-dom:
+ optional: true
+ dependencies:
+ '@figspec/react': 1.0.3(react@18.0.0)
+ '@storybook/addon-docs': 7.0.21(react-dom@18.0.0)(react@18.0.0)
+ '@storybook/addons': 7.0.21(react-dom@18.0.0)(react@18.0.0)
+ '@storybook/api': 7.0.21(react-dom@18.0.0)(react@18.0.0)
+ '@storybook/components': 7.1.0-alpha.34(react-dom@18.0.0)(react@18.0.0)
+ '@storybook/theming': 7.1.0-alpha.34(react-dom@18.0.0)(react@18.0.0)
+ react: 18.0.0
+ react-dom: 18.0.0(react@18.0.0)
+ dev: true
+
/storybook@7.1.0-alpha.34:
resolution: {integrity: sha512-MNL39BTZXfC/bQII/ekXTB0b7Rvk3RitEoC4PU32iEDJvRybkvTEJsD2Q2ERsB0wxsphS6eNUbDfGlIAqimvHQ==}
hasBin: true
@@ -8699,6 +9194,15 @@ packages:
engines: {node: '>= 0.8'}
dev: true
+ /unplugin@0.10.2:
+ resolution: {integrity: sha512-6rk7GUa4ICYjae5PrAllvcDeuT8pA9+j5J5EkxbMFaV+SalHhxZ7X2dohMzu6C3XzsMT+6jwR/+pwPNR3uK9MA==}
+ dependencies:
+ acorn: 8.8.2
+ chokidar: 3.5.3
+ webpack-sources: 3.2.3
+ webpack-virtual-modules: 0.4.6
+ dev: true
+
/unplugin@1.3.1:
resolution: {integrity: sha512-h4uUTIvFBQRxUKS2Wjys6ivoeofGhxzTe2sRWlooyjHXVttcVfV/JiavNd3d4+jty0SVV0dxGw9AkY9MwiaCEw==}
dependencies:
@@ -8896,6 +9400,10 @@ packages:
engines: {node: '>=10.13.0'}
dev: true
+ /webpack-virtual-modules@0.4.6:
+ resolution: {integrity: sha512-5tyDlKLqPfMqjT3Q9TAqf2YqjwmnUleZwzJi1A5qXnlBCdj2AtOJ6wAWdglTIDOPgOiOrXeBeFcsQ8+aGQ6QbA==}
+ dev: true
+
/webpack-virtual-modules@0.5.0:
resolution: {integrity: sha512-kyDivFZ7ZM0BVOUteVbDFhlRt7Ah/CSPwJdi8hBpkK7QLumUqdLtVfm/PX/hkcnrvr0i77fO5+TjZ94Pe+C9iw==}
dev: true
diff --git a/src/components/Container.tsx b/src/components/Container.tsx
index 58af1eed..15ef152d 100644
--- a/src/components/Container.tsx
+++ b/src/components/Container.tsx
@@ -1,10 +1,10 @@
-import { background, styled } from "@storybook/theming";
+import { styled } from "@storybook/theming";
-export const Container = styled.div({
- background: background.app,
+export const Container = styled.div(({ theme }) => ({
+ background: theme.background.app,
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
height: "100%",
-});
+}));
diff --git a/src/screens/Onboarding/Onboarding.stories.tsx b/src/screens/Onboarding/Onboarding.stories.tsx
index e79b3e5f..ee83d04f 100644
--- a/src/screens/Onboarding/Onboarding.stories.tsx
+++ b/src/screens/Onboarding/Onboarding.stories.tsx
@@ -3,8 +3,9 @@ import { Meta, StoryObj } from "@storybook/react";
import { findByRole, userEvent } from "@storybook/testing-library";
import { rest } from "msw";
-import { storyWrapper } from "../../storyWrapper";
+import { storyWrapper } from "../../utils/graphQLClient";
import { Onboarding } from "./Onboarding";
+import { playAll } from "../../utils/playAll";
const meta = {
component: Onboarding,
@@ -47,32 +48,28 @@ type Story = StoryObj;
export const Welcome: Story = {};
export const SignIn: Story = {
- play: async ({ canvasElement }) => {
+ play: playAll(async ({ canvasElement }) => {
const button = await findByRole(canvasElement, "button", {
name: "Enable",
});
await userEvent.click(button);
- },
+ }),
};
export const SSO: Story = {
- play: async (context) => {
- await SignIn.play(context);
-
+ play: playAll(SignIn, async (context) => {
const button = await findByRole(context.canvasElement, "button", {
name: "Sign into Chromatic with SSO",
});
await userEvent.click(button);
- },
+ }),
};
export const Verify: Story = {
- play: async (context) => {
- await SignIn.play(context);
-
+ play: playAll(SignIn, async (context) => {
const button = await findByRole(context.canvasElement, "button", {
name: "Sign in with Chromatic",
});
await userEvent.click(button);
- },
+ }),
};
diff --git a/src/screens/SelectProject.stories.tsx b/src/screens/SelectProject.stories.tsx
index 1633c074..af2ecebd 100644
--- a/src/screens/SelectProject.stories.tsx
+++ b/src/screens/SelectProject.stories.tsx
@@ -1,7 +1,7 @@
import { Meta, StoryObj } from "@storybook/react";
import { graphql } from "msw";
-import { storyWrapper } from "../storyWrapper";
+import { storyWrapper } from "../utils/graphQLClient";
import { SelectProject } from "./SelectProject";
const meta = {
diff --git a/src/storyWrapper.tsx b/src/storyWrapper.tsx
deleted file mode 100644
index 4ea7cfc8..00000000
--- a/src/storyWrapper.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { styled, typography } from "@storybook/theming";
-import React from "react";
-
-import { Provider, client } from "./utils/graphQLClient";
-
-const Wrapper = styled.div({
- width: "100vw",
- height: "100vh",
-
- "*": {
- boxSizing: "border-box",
- fontFamily: typography.fonts.base,
- fontSize: typography.size.s2 - 1,
- },
-});
-
-export const storyWrapper = (Story: any) => (
-
-
-
-
-
-);
diff --git a/src/utils/graphQLClient.tsx b/src/utils/graphQLClient.tsx
index 8fcc58cf..bcade3b4 100644
--- a/src/utils/graphQLClient.tsx
+++ b/src/utils/graphQLClient.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import React, { useState } from "react";
import { Client, Provider, cacheExchange, fetchExchange } from "urql";
import { CHROMATIC_BASE_URL, STORAGE_KEY } from "../constants";
@@ -29,3 +29,9 @@ export const client = new Client({
},
}),
});
+
+export const storyWrapper = (Story: any) => (
+
+
+
+);
diff --git a/src/utils/playAll.ts b/src/utils/playAll.ts
new file mode 100644
index 00000000..af6cd46b
--- /dev/null
+++ b/src/utils/playAll.ts
@@ -0,0 +1,18 @@
+import { StoryObj } from "@storybook/react";
+
+export function playAll(
+ ...sequence: (Story | Story["play"])[]
+): Story["play"] {
+ return async (context) => {
+ const canvasNodes = context.canvasElement.querySelectorAll("[data-canvas]");
+ const canvasElements = canvasNodes.length ? Array.from(canvasNodes) : [context.canvasElement];
+
+ await Promise.all(
+ sequence.flatMap((storyOrPlay) =>
+ typeof storyOrPlay === "function"
+ ? canvasElements.map((canvasElement) => storyOrPlay({ ...context, canvasElement }))
+ : storyOrPlay?.play?.(context)
+ )
+ );
+ };
+}