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) + ) + ); + }; +}