From 6afa25c4c1482129423cea713e3c31caa8f27d37 Mon Sep 17 00:00:00 2001 From: Alexandre Asselin Date: Fri, 11 Oct 2024 10:36:25 -0400 Subject: [PATCH 001/156] add missing dependency --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index eecf74264..67b7dfe3b 100644 --- a/package.json +++ b/package.json @@ -48,6 +48,7 @@ }, "devDependencies": { "@changesets/cli": "2.26.0", + "@hopper-ui/icons": "^2.8.2", "@sharegate/eslint-plugin": "3.1.0", "@sharegate/stylelint-plugin": "1.0.1", "@sharegate/typescript-config": "1.1.1", From c785b27691c69b64d005bf74c8c3a9a695b837b7 Mon Sep 17 00:00:00 2001 From: Alexandre Asselin Date: Tue, 15 Oct 2024 10:37:37 -0400 Subject: [PATCH 002/156] remove editable preview --- .storybook/components/preview/Preview.tsx | 38 ++++++------------- .../themed-snippet/ThemedSnippet.tsx | 21 ---------- .storybook/components/themed-snippet/index.ts | 1 - 3 files changed, 12 insertions(+), 48 deletions(-) delete mode 100644 .storybook/components/themed-snippet/ThemedSnippet.tsx diff --git a/.storybook/components/preview/Preview.tsx b/.storybook/components/preview/Preview.tsx index 618f23a3e..a7700f8b2 100644 --- a/.storybook/components/preview/Preview.tsx +++ b/.storybook/components/preview/Preview.tsx @@ -1,8 +1,8 @@ import "./Preview.css"; -import { CodeTheme, useFormattedCode } from "@stories/components"; +import { CodeTheme, useFormattedCode, Snippet } from "@stories/components"; import { Div, Span } from "@components/html"; -import { DocsContext, DocsContextProps, SourceContext, getSourceProps, storyBlockIdFromId } from "@storybook/addon-docs"; +import { Canvas, DocsContext, DocsContextProps, SourceContext, getSourceProps, storyBlockIdFromId } from "@storybook/addon-docs"; import { Editor as JarleEditor, Error as JarleError, Preview as JarlePreview, Provider as JarleProvider } from "jarle"; import { applyHooks, defaultDecorateStory } from "@storybook/client-api"; import { as, isNil } from "@components/shared"; @@ -185,33 +185,19 @@ export function Preview({ }: PreviewProps) { if (!isNil(filePath)) { return ( - - ); - } - - if (!isNil(mdxSource)) { - return ( - + ); } return ( - + {children} - - ); + + ) + } diff --git a/.storybook/components/themed-snippet/ThemedSnippet.tsx b/.storybook/components/themed-snippet/ThemedSnippet.tsx deleted file mode 100644 index 5858b75bf..000000000 --- a/.storybook/components/themed-snippet/ThemedSnippet.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { Snippet, SnippetProps } from "@stories/components"; -import { useThemedSnippet } from "./useThemedSnippet"; - -interface ThemedSnippetProps extends SnippetProps { - sharegate: string; -} - -export function ThemedSnippet({ sharegate, language = "javascript", ...rest }: ThemedSnippetProps) { - const code = useThemedSnippet({ - sharegate - }); - - return ( - - ); -} - diff --git a/.storybook/components/themed-snippet/index.ts b/.storybook/components/themed-snippet/index.ts index 1cce711c0..69429454f 100644 --- a/.storybook/components/themed-snippet/index.ts +++ b/.storybook/components/themed-snippet/index.ts @@ -1,2 +1 @@ -export * from "./ThemedSnippet"; export * from "./useThemedSnippet"; From 6c52b4b2dcdb146b0c5c778ffb44d178eaf2b4b9 Mon Sep 17 00:00:00 2001 From: Alexandre Asselin Date: Thu, 17 Oct 2024 10:23:34 -0400 Subject: [PATCH 003/156] initial commit of the conversion --- .gitignore | 2 + .storybook/components/preview/Preview.tsx | 185 +- .../components/snippet/useFormattedCode.ts | 6 +- .../themed-snippet/useThemedSnippet.ts | 2 +- .storybook/decorators/withCenteredCanvas.jsx | 2 +- .storybook/decorators/withThemeProvider.jsx | 2 +- .storybook/main.ts | 77 + .storybook/manager.ts | 15 + .storybook/mdx/code/Code.jsx | 18 +- .storybook/{ => oldddddd}/env.js | 0 .storybook/{ => oldddddd}/main.js | 70 +- .storybook/{ => oldddddd}/manager-head.html | 0 .storybook/{ => oldddddd}/manager.js | 4 +- .storybook/{ => oldddddd}/preview.js | 7 +- .storybook/{ => oldddddd}/webpack.config.js | 19 - .storybook/preview-head.html | 21 + .storybook/preview.tsx | 88 + .storybook/stories.css | 41 + .../storybook-addon/DisableAnimations.tsx | 24 + .storybook/storybook-addon/a11y.ts | 43 + .../storybook-addon/disableAnimations.css | 3 + .storybook/storybook-addon/index.ts | 4 + .storybook/storybook-addon/viewports.ts | 34 + .../storybook-addon/withHopperProvider.tsx | 84 + .storybook/swc.build.ts | 7 + .storybook/swc.dev.ts | 7 + .storybook/utils/storiesOfBuilder.js | 13 +- chromatic.config.json | 5 + package.json | 39 +- .../chromatic/AlertTrigger-hopper.stories.tsx | 14 +- .../tests/chromatic/AlertTrigger.stories.tsx | 14 +- .../chromatic/Autocomplete-hopper.stories.tsx | 50 +- .../tests/chromatic/Autocomplete.stories.tsx | 50 +- .../chromatic/AnonymousAvatar.stories.tsx | 16 +- .../avatar/tests/chromatic/Avatar.stories.tsx | 26 +- .../tests/chromatic/AvatarGroup.stories.tsx | 26 +- .../tests/chromatic/DeletedAvatar.stories.tsx | 16 +- .../tests/chromatic/BadgeCount.stories.tsx | 18 +- .../tests/chromatic/BadgeDot.stories.tsx | 16 +- .../tests/chromatic/BadgeIcon.stories.tsx | 16 +- .../tests/chromatic/Box-hopper.stories.tsx | 14 +- .../src/box/tests/chromatic/Box.stories.tsx | 14 +- .../chromatic/ButtonGroup-hopper.stories.tsx | 22 +- .../tests/chromatic/ButtonGroup.stories.tsx | 22 +- .../ButtonGroupVertical-hopper.stories.tsx | 18 +- .../chromatic/ButtonGroupVertical.stories.tsx | 18 +- .../chromatic/CrossButton-hopper.stories.tsx | 12 +- .../tests/chromatic/CrossButton.stories.tsx | 12 +- .../tests/chromatic/CheckboxGroup.stories.tsx | 38 +- .../CheckboxGroupVertical.stories.tsx | 18 +- .../tests/chromatic/Counter.stories.tsx | 28 +- .../tests/chromatic/Dialog-hopper.stories.tsx | 72 +- .../dialog/tests/chromatic/Dialog.stories.tsx | 72 +- .../DialogTrigger-hopper.stories.tsx | 18 +- .../tests/chromatic/DialogTrigger.stories.tsx | 18 +- .../tests/chromatic/Disclosure.stories.tsx | 20 +- .../chromatic/DisclosureArrow.stories.tsx | 18 +- .../tests/chromatic/Divider.stories.tsx | 26 +- .../chromatic/DividerVertical.stories.tsx | 28 +- .../src/dot/tests/chromatic/Dot.stories.tsx | 20 +- .../field/tests/chromatic/Field.stories.tsx | 48 +- .../tests/chromatic/FieldMessage.stories.tsx | 34 +- .../tests/chromatic/GroupField.stories.tsx | 20 +- .../field/tests/chromatic/Label.stories.tsx | 18 +- .../form/tests/chromatic/Fieldset.stories.tsx | 16 +- .../src/form/tests/chromatic/Form.stories.tsx | 24 +- .../chromatic/FormFlexInline.stories.tsx | 18 +- .../chromatic/FormGridInline.stories.tsx | 16 +- .../components/src/html/src/htmlElement.tsx | 2 +- .../src/html/tests/chromatic/html.stories.tsx | 16 +- .../tests/chromatic/IconList.stories.tsx | 14 +- .../IllustratedMessage-hopper.stories.tsx | 28 +- .../chromatic/IllustratedMessage.stories.tsx | 28 +- .../tests/chromatic/Illustration.stories.tsx | 26 +- .../image/tests/chromatic/Image.stories.tsx | 30 +- .../tests/chromatic/SvgImage.stories.tsx | 20 +- .../tests/chromatic/InputGroup.stories.tsx | 44 +- packages/components/src/layout/src/Grid.tsx | 7 +- .../layout/tests/chromatic/Flex.stories.tsx | 22 +- .../tests/chromatic/FlexColumn.stories.tsx | 42 +- .../tests/chromatic/FlexRow.stories.tsx | 42 +- .../layout/tests/chromatic/Grid.stories.tsx | 84 +- .../layout/tests/chromatic/Inline.stories.tsx | 34 +- .../layout/tests/chromatic/Stack.stories.tsx | 32 +- .../chromatic/Listbox-hopper.stories.tsx | 64 +- .../tests/chromatic/Listbox.stories.tsx | 64 +- .../loader/tests/chromatic/Loader.stories.tsx | 16 +- .../tests/chromatic/Lozenge.stories.tsx | 26 +- .../tests/chromatic/Menu-hopper.stories.tsx | 72 +- .../src/menu/tests/chromatic/Menu.stories.tsx | 72 +- .../chromatic/MenuTrigger-hopper.stories.tsx | 44 +- .../tests/chromatic/MenuTrigger.stories.tsx | 44 +- .../tests/chromatic/Modal-hopper.stories.tsx | 32 +- .../modal/tests/chromatic/Modal.stories.tsx | 32 +- .../chromatic/ModalTrigger-hopper.stories.tsx | 16 +- .../tests/chromatic/ModalTrigger.stories.tsx | 16 +- .../tests/chromatic/NumberInput.stories.tsx | 24 +- .../tests/chromatic/Overlay.stories.tsx | 18 +- .../tests/chromatic/Underlay.stories.tsx | 18 +- .../chromatic/Popover-hopper.stories.tsx | 40 +- .../tests/chromatic/Popover.stories.tsx | 40 +- .../PopoverTrigger-hopper.stories.tsx | 50 +- .../chromatic/PopoverTrigger.stories.tsx | 50 +- .../tests/chromatic/RadioGroup.stories.tsx | 38 +- .../RadioGroupHorizontal.stories.tsx | 14 +- packages/components/src/shared/src/as.tsx | 2 +- .../shared/tests/chromatic/Slots.stories.tsx | 31 +- .../tests/chromatic/Spinner.stories.tsx | 22 +- .../ThemeProvider-hopper.stories.tsx | 18 +- .../tests/chromatic/ThemeProvider.stories.tsx | 18 +- .../chromatic/sharegate-hopper.stories.tsx | 32 +- .../tests/chromatic/sharegate.stories.tsx | 32 +- .../useStyledSystem-hopper.stories.tsx | 18 +- .../chromatic/useStyledSystem.stories.tsx | 18 +- .../chromatic/TabsVertical-hopper.stories.tsx | 24 +- .../tests/chromatic/TabsVertical.stories.tsx | 24 +- packages/components/src/tag/src/TagList.tsx | 2 +- .../chromatic/TagList-hopper.stories.tsx | 30 +- .../tag/tests/chromatic/TagList.stories.tsx | 30 +- .../chromatic/TextArea-hopper.stories.tsx | 32 +- .../tests/chromatic/TextArea.stories.tsx | 32 +- .../PasswordInput-hopper.stories.tsx | 22 +- .../tests/chromatic/PasswordInput.stories.tsx | 22 +- .../chromatic/SearchInput-hopper.stories.tsx | 26 +- .../tests/chromatic/SearchInput.stories.tsx | 26 +- .../chromatic/TextInput-hopper.stories.tsx | 28 +- .../tests/chromatic/TextInput.stories.tsx | 28 +- .../components/src/tile/src/TileGroup.tsx | 2 +- .../tests/chromatic/TileGroup.stories.tsx | 26 +- .../chromatic/Toolbar-hopper.stories.tsx | 32 +- .../tests/chromatic/Toolbar.stories.tsx | 32 +- .../ToolbarVertical-hopper.stories.tsx | 16 +- .../chromatic/ToolbarVertical.stories.tsx | 16 +- .../chromatic/Tooltip-hopper.stories.tsx | 68 +- .../tests/chromatic/Tooltip.stories.tsx | 68 +- .../tests/chromatic/Heading.stories.tsx | 26 +- .../tests/chromatic/Paragraph.stories.tsx | 18 +- .../tests/chromatic/Text.stories.tsx | 16 +- tsconfig.json | 1 + yarn.lock | 7968 ++++++++--------- 140 files changed, 6081 insertions(+), 5772 deletions(-) create mode 100644 .storybook/main.ts create mode 100644 .storybook/manager.ts rename .storybook/{ => oldddddd}/env.js (100%) rename .storybook/{ => oldddddd}/main.js (59%) rename .storybook/{ => oldddddd}/manager-head.html (100%) rename .storybook/{ => oldddddd}/manager.js (58%) rename .storybook/{ => oldddddd}/preview.js (95%) rename .storybook/{ => oldddddd}/webpack.config.js (81%) create mode 100644 .storybook/preview-head.html create mode 100644 .storybook/preview.tsx create mode 100644 .storybook/stories.css create mode 100644 .storybook/storybook-addon/DisableAnimations.tsx create mode 100644 .storybook/storybook-addon/a11y.ts create mode 100644 .storybook/storybook-addon/disableAnimations.css create mode 100644 .storybook/storybook-addon/index.ts create mode 100644 .storybook/storybook-addon/viewports.ts create mode 100644 .storybook/storybook-addon/withHopperProvider.tsx create mode 100644 .storybook/swc.build.ts create mode 100644 .storybook/swc.dev.ts create mode 100644 chromatic.config.json diff --git a/.gitignore b/.gitignore index 41a42b06b..da299172b 100644 --- a/.gitignore +++ b/.gitignore @@ -13,3 +13,5 @@ storybook-static .stylelintcache build-storybook.log .idea +migration-storybook.log +storybook.log diff --git a/.storybook/components/preview/Preview.tsx b/.storybook/components/preview/Preview.tsx index a7700f8b2..f3ef6fd7f 100644 --- a/.storybook/components/preview/Preview.tsx +++ b/.storybook/components/preview/Preview.tsx @@ -1,178 +1,11 @@ import "./Preview.css"; - -import { CodeTheme, useFormattedCode, Snippet } from "@stories/components"; -import { Div, Span } from "@components/html"; -import { Canvas, DocsContext, DocsContextProps, SourceContext, getSourceProps, storyBlockIdFromId } from "@storybook/addon-docs"; -import { Editor as JarleEditor, Error as JarleError, Preview as JarlePreview, Provider as JarleProvider } from "jarle"; -import { applyHooks, defaultDecorateStory } from "@storybook/client-api"; -import { as, isNil } from "@components/shared"; -import { storyNameFromExport, toId } from "@storybook/csf"; -import { ComponentProps, ReactElement, useContext, useState } from "react"; - -import { Box } from "@components/box"; -import { KnownScope } from "./scopes"; - - -const StyledJarlePreview = as(Box, JarlePreview); -type JarleProviderProps = ComponentProps; - -interface CodeEditorProps extends JarleProviderProps { - children: any; - additionalScope?: any; -} - -function CodeEditor({ - code, - language = "jsx", - scope: additionalScope = {}, - children, - ...rest -}: CodeEditorProps) { - const formattedCoded = useFormattedCode(code, language); - - return ( -
- -
- {children} -
-
- Editable example - - -
- -
- ); -} - -type DecoratedLivePreviewProps = ComponentProps; - -function DecoratedLivePreview(props: DecoratedLivePreviewProps): JSX.Element { - const docsContext = useContext(DocsContext); - - // @ts-ignore - const storyStore = window.__STORYBOOK_STORY_STORE__; - - const decorators = storyStore.projectAnnotations.decorators; - - - if (decorators) { - // Decorators must be applied otherwise functionnalities like the color schemes switcher won't work. - const decorateStory = applyHooks(defaultDecorateStory); - const decoratedStory = decorateStory(() => , decorators)(docsContext as any); - - return decoratedStory as JSX.Element; - } else { - return ; - } -} - -interface FilePreviewProps extends Pick, "language">, DecoratedLivePreviewProps { - filePath?: string; - features?: boolean; -} - -function FilePreview({ filePath, language, scope, features = false, ...rest }: FilePreviewProps) { - const [code, setCode] = useState(); - - if (isNil(code)) { - if (!features) { - import(/* webpackMode: "eager" */ `!!raw-loader!@root/packages/components/src${filePath}.sample.jsx`) - .then(module => { - setCode(module.default); - }); - } else { - import(/* webpackMode: "eager" */ `!!raw-loader!@root/docs/features/${filePath}.sample.jsx`) - .then(module => { - setCode(module.default); - }); - } - - return null; - } - - return ( - - - - ); -} - -export interface MdxSourcePreviewProps extends Pick, "language">, DecoratedLivePreviewProps { - mdxSource?: string; -} - -function MdxSourcePreview({ mdxSource, language, scope, ...rest }: MdxSourcePreviewProps) { - const docsContext = useContext(DocsContext); - const sourceContext = useContext(SourceContext); - - const { code, language: inferredLanguage } = getSourceProps({ code: decodeURI(mdxSource) }, docsContext, sourceContext); - - return ( - - - - ); -} - -function lookupStoryId(storyName: string, { mdxStoryNameToKey, mdxComponentAnnotations }: DocsContextProps) { - return toId( - mdxComponentAnnotations.id || mdxComponentAnnotations.title, - storyNameFromExport(mdxStoryNameToKey[storyName]) - ); -} - -interface StoryPreviewProps extends Pick, "language">, DecoratedLivePreviewProps { - children?: ReactElement; -} - -function StoryPreview({ language, scope, children, ...rest }: StoryPreviewProps) { - const docsContext = useContext(DocsContext); - const sourceContext = useContext(SourceContext); - - const storyId = children.props.id || lookupStoryId(children.props.name, docsContext); - - const { code, language: inferredLanguage } = getSourceProps({ ids: [storyId] }, docsContext, sourceContext); - - return ( - -
- -
- - ); -} - export interface PreviewProps { filePath?: string; language?: string; scope?: string; features?: boolean; mdxSource?: string; - children?: ReactElement; + children?: any; } export function Preview({ @@ -183,21 +16,7 @@ export function Preview({ children, ...rest }: PreviewProps) { - if (!isNil(filePath)) { - return ( - - ); - } - return ( - - {children} - +
Preview unavailable
) - } diff --git a/.storybook/components/snippet/useFormattedCode.ts b/.storybook/components/snippet/useFormattedCode.ts index 94eaf3ca6..f5dad4087 100644 --- a/.storybook/components/snippet/useFormattedCode.ts +++ b/.storybook/components/snippet/useFormattedCode.ts @@ -15,7 +15,7 @@ export function useFormattedCode(code: string, language: string) { const parser = PrettierParser[language]; if (!isNil(parser)) { - return prettier + const prettyCode = prettier .format(code, { parser: parser, plugins: [prettierBabel, prettierPostCss], @@ -26,6 +26,10 @@ export function useFormattedCode(code: string, language: string) { }) .replace(">;", ">") .trim(); + + console.log("useFormattedCode", code, prettyCode); + + return prettyCode; } return code.trim(); diff --git a/.storybook/components/themed-snippet/useThemedSnippet.ts b/.storybook/components/themed-snippet/useThemedSnippet.ts index 8560f7d4e..55f69f4e2 100644 --- a/.storybook/components/themed-snippet/useThemedSnippet.ts +++ b/.storybook/components/themed-snippet/useThemedSnippet.ts @@ -3,7 +3,7 @@ import { isNil, isString } from "@components/shared"; import { useContext, useMemo } from "react"; export function useThemedSnippet(snippets: string | Record) { - const { globals } = useContext(DocsContext); + const { globals } = useContext(DocsContext) as any; return useMemo(() => { if (isNil(snippets) || isString(snippets)) { diff --git a/.storybook/decorators/withCenteredCanvas.jsx b/.storybook/decorators/withCenteredCanvas.jsx index cf4466ae7..c1d0e5f11 100644 --- a/.storybook/decorators/withCenteredCanvas.jsx +++ b/.storybook/decorators/withCenteredCanvas.jsx @@ -1,6 +1,6 @@ import { Div } from "@components/html"; import { Flex } from "@components/layout"; -import { isChromatic } from "../env"; +import { isChromatic } from "../oldddddd/env"; export function withCenteredCanvas(story, context) { const { parameters, viewMode } = context; diff --git a/.storybook/decorators/withThemeProvider.jsx b/.storybook/decorators/withThemeProvider.jsx index 74478de13..9135b87c4 100644 --- a/.storybook/decorators/withThemeProvider.jsx +++ b/.storybook/decorators/withThemeProvider.jsx @@ -1,6 +1,6 @@ import { ThemeProvider } from "@components/styling"; -import { isChromatic } from "../env"; +import { isChromatic } from "../oldddddd/env"; import { getGlobals } from "../utils"; export function withThemeProvider(story, context) { diff --git a/.storybook/main.ts b/.storybook/main.ts new file mode 100644 index 000000000..7198351e5 --- /dev/null +++ b/.storybook/main.ts @@ -0,0 +1,77 @@ +// import ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin"; +import type { StorybookConfig } from "@storybook/react-webpack5"; +import type { Options } from "@storybook/types"; +import type { Options as SwcOptions } from "@swc/core"; +import path from "path"; +import { TsconfigPathsPlugin } from "tsconfig-paths-webpack-plugin"; + +import { swcConfig as SwcBuildConfig } from "./swc.build"; +import { swcConfig as SwcDevConfig } from "./swc.dev"; + +// We sometimes need to disable the lazyCompilation to properly run the test runner on stories +const isLazyCompilation = !(process.env.STORYBOOK_NO_LAZY === "true"); + +const storybookConfig: StorybookConfig = { + stories: [ + // "../packages/**/*.stories.@(ts|tsx)" + "../packages/components/**/tests/chromatic/**/*.stories.tsx" + ], + addons: [ + "@storybook/addon-a11y", + "@storybook/addon-links", + "@storybook/addon-essentials", + "@storybook/addon-interactions", + "@storybook/addon-webpack5-compiler-swc", + "@chromatic-com/storybook" + ], + framework: "@storybook/react-webpack5", + core: { + builder: { + name: "@storybook/builder-webpack5", + options: { + lazyCompilation: isLazyCompilation + } + } + }, + docs: { + autodocs: "tag" + }, + swc: () => ({ + jsc: { + transform: { + react: { + runtime: "automatic" + } + } + } + }), + // swc: (_: SwcOptions, { configType }: Options): SwcOptions => { + // return configType === "PRODUCTION" ? SwcBuildConfig : SwcDevConfig; + // }, + webpackFinal(config, { configType }) { + config.resolve = { + ...config.resolve, + plugins: [ + ...(config.resolve?.plugins || []), + new TsconfigPathsPlugin({ + configFile: "./tsconfig.json", + extensions: config.resolve?.extensions + }) + ] + }; + // TODO: set once in ESM + // config.plugins = [ + // ...(config.plugins ?? []), + // configType !== "PRODUCTION" && new ReactRefreshWebpackPlugin({ + // overlay: { + // sockIntegration: "whm" + // } + // }) + // ].filter(Boolean); + + return config; + } +}; + + +export default storybookConfig; diff --git a/.storybook/manager.ts b/.storybook/manager.ts new file mode 100644 index 000000000..103e25db0 --- /dev/null +++ b/.storybook/manager.ts @@ -0,0 +1,15 @@ +import { addons } from "@storybook/manager-api"; + +addons.setConfig({ + sidebar: { + filters: { + patterns: item => { + // Hide individual stories in the sidebar when a stories file is for documentation purposes only + // This should only exist while we don't have a documentation website up and running + const shouldSkip = item.tags?.includes("autodocs") && item.tags?.includes("story"); + + return !shouldSkip; + } + } + } +}); diff --git a/.storybook/mdx/code/Code.jsx b/.storybook/mdx/code/Code.jsx index 6a5158dce..1566c8460 100644 --- a/.storybook/mdx/code/Code.jsx +++ b/.storybook/mdx/code/Code.jsx @@ -1,4 +1,3 @@ -import { Snippet } from "@stories/components"; import { components } from "@storybook/components"; const StorybookCode = components.code; @@ -12,10 +11,15 @@ export function Code({ className, children, ...rest }) { const language = className && className.split("-"); return ( - - ); + 
+            {children}
+
+ ) + // return ( + // + // ); } diff --git a/.storybook/env.js b/.storybook/oldddddd/env.js similarity index 100% rename from .storybook/env.js rename to .storybook/oldddddd/env.js diff --git a/.storybook/main.js b/.storybook/oldddddd/main.js similarity index 59% rename from .storybook/main.js rename to .storybook/oldddddd/main.js index 5112b4295..057c93db6 100644 --- a/.storybook/main.js +++ b/.storybook/oldddddd/main.js @@ -1,3 +1,4 @@ +import { dirname, join } from "path"; const { customizeWebpack } = require("./webpack.config"); const { includeChromatic, includeDocs, printEnvironment, isChromatic, isDebug } = require("./env"); @@ -8,8 +9,8 @@ let stories = []; if (includeDocs) { stories = [ // TODO simplify imports for any pkgs /docs/**/*.stories.mdx - "../docs/**/*.stories.mdx", - "../packages/components/src/**/docs/**/*.stories.mdx" + // "../docs/**/*.stories.mdx", + // "../packages/components/src/**/docs/**/*.stories.mdx" ]; } @@ -17,37 +18,56 @@ if (includeChromatic) { stories = [ ...stories, // TODO remove chroma and simplify imports - "../packages/components/**/tests/chromatic/**/*.chroma.jsx", + // "../packages/components/**/tests/chromatic/**/*.chroma.jsx", "../packages/components/**/tests/chromatic/**/*.stories.tsx" ]; } const config = { - stories: stories, - addons: [ - { - name: "@storybook/addon-essentials", - options: { - actions: false, - backgrounds: false, - controls: false, - measure: false, - outline: false - } - }, - { - name: "@storybook/addon-a11y", - options: { - runOnly: { - type: "tag", - values: ["wcag2a", "wcag2aa"] - } + stories: [ + // "../docs/**/*.mdx", + // "../packages/components/src/**/docs/**/*.mdx", + // "../packages/components/**/tests/chromatic/**/*.chroma.jsx", + "../packages/components/**/tests/chromatic/**/*.stories.tsx" + ], + + addons: [{ + name: "@storybook/addon-essentials", + options: { + actions: false, + backgrounds: false, + controls: false, + measure: false, + outline: false + } + }, { + name: "@storybook/addon-a11y", + options: { + runOnly: { + type: "tag", + values: ["wcag2a", "wcag2aa"] } } - ], + }, getAbsolutePath("@storybook/addon-mdx-gfm"), getAbsolutePath("@storybook/addon-webpack5-compiler-swc")], + webpackFinal: customizeWebpack, + reactOptions: { strictMode: true + }, + + framework: { + name: getAbsolutePath("@storybook/react-webpack5"), + + options: { + strictMode: true + } + }, + + docs: {}, + + typescript: { + reactDocgen: "react-docgen-typescript" } }; @@ -84,3 +104,7 @@ if (!isChromatic && !isDebug) { } module.exports = config; + +function getAbsolutePath(value) { + return dirname(require.resolve(join(value, "package.json"))); +} diff --git a/.storybook/manager-head.html b/.storybook/oldddddd/manager-head.html similarity index 100% rename from .storybook/manager-head.html rename to .storybook/oldddddd/manager-head.html diff --git a/.storybook/manager.js b/.storybook/oldddddd/manager.js similarity index 58% rename from .storybook/manager.js rename to .storybook/oldddddd/manager.js index 74f5e096e..40b9e7ad9 100644 --- a/.storybook/manager.js +++ b/.storybook/oldddddd/manager.js @@ -1,5 +1,5 @@ -import { Themes } from "./styles/themes"; -import { addons } from "@storybook/addons"; +import { Themes } from "../styles/themes"; +import { addons } from "@storybook/manager-api"; addons.setConfig({ theme: Themes.manager, diff --git a/.storybook/preview.js b/.storybook/oldddddd/preview.js similarity index 95% rename from .storybook/preview.js rename to .storybook/oldddddd/preview.js index 63fffb9c1..c7980f635 100644 --- a/.storybook/preview.js +++ b/.storybook/oldddddd/preview.js @@ -1,12 +1,12 @@ import "@css/normalize.css"; import "@components/index.css"; -import "./styles"; +import "../styles"; import { isChromatic, isDocs } from "./env"; -import { withBackgroundMatchingColorScheme, withCenteredCanvas, withDocsContainer, withThemeProvider } from "./decorators"; +import { withBackgroundMatchingColorScheme, withCenteredCanvas, withDocsContainer, withThemeProvider } from "../decorators"; import { Code, Highlight } from "@stories/mdx"; -import { Themes } from "./styles/themes"; +import { Themes } from "../styles/themes"; if (!isChromatic) { // Custom font makes chromatic inconsistent and cause "false positive". View https://www.chromatic.com/docs/resource-loading#loading-custom-fonts. @@ -121,3 +121,4 @@ export const globalTypes = { }; export const decorators = [withCenteredCanvas, withThemeProvider, withBackgroundMatchingColorScheme]; +export const tags = ["autodocs"]; diff --git a/.storybook/webpack.config.js b/.storybook/oldddddd/webpack.config.js similarity index 81% rename from .storybook/webpack.config.js rename to .storybook/oldddddd/webpack.config.js index 35c40477d..8ef6b17a8 100644 --- a/.storybook/webpack.config.js +++ b/.storybook/oldddddd/webpack.config.js @@ -25,23 +25,6 @@ function addWebpackAliases(config) { }; } -// Currently required for: -// - https://github.com/reworkcss/css -function supportPackagesWithDependencyOnNodeFileSystem(config) { - const existingNode = config.node || {}; - - config.node = { - ...existingNode, - fs: "empty" - }; -} - -function ignoreJarleWarning(config) { - config.plugins.push(new FilterWarningsPlugin({ - exclude: /Module not found: Error: Can't resolve 'holderjs'/ - })); -} - function ignorePrettierParsers(config) { config.plugins.push(new webpack.IgnorePlugin({ resourceRegExp: /^\.\/parser-standalone$/, @@ -62,8 +45,6 @@ function ignorePrettierParsers(config) { module.exports = { customizeWebpack: async config => { addWebpackAliases(config); - supportPackagesWithDependencyOnNodeFileSystem(config); - ignoreJarleWarning(config); ignorePrettierParsers(config); return config; diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html new file mode 100644 index 000000000..9c1d57408 --- /dev/null +++ b/.storybook/preview-head.html @@ -0,0 +1,21 @@ + + + diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx new file mode 100644 index 000000000..d8a724169 --- /dev/null +++ b/.storybook/preview.tsx @@ -0,0 +1,88 @@ +// import { viewport, withHopperProvider } from "./storybook-addon/index"; +import { viewport } from "./storybook-addon/index"; +import { withBackgroundMatchingColorScheme, withCenteredCanvas, withDocsContainer, withThemeProvider } from "./decorators"; + +import "@components/index.css"; +import "./styles"; + +import { + Description, + Stories, + Subtitle, + Title +} from "@storybook/blocks"; +import type { Preview } from "@storybook/react"; + +import "@hopper-ui/tokens/fonts.css"; +import "./stories.css"; + +const preview: Preview = { + parameters: { + backgrounds: { + disable: true + }, + layout: "fullscreen", // removes the padding around the preview + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/ + } + }, + viewport, + // docs: { // only needed while the documentation is not available + // page: () => { + // return ( + // <> + // + // <Subtitle /> + // <Description /> + // <Stories title="Usage" /> + // </> + // ); + // } + // }, + options: { + storySort: { + order: [ + "Docs", + "Docs-parts", + "Components", + "Styled System", + "Icons", + "Tokens" + ] + } + } + }, + globalTypes: { + locale: { + description: "Internationalization locale", + defaultValue: "en-US", + toolbar: { + title: "Locale", + icon: "globe", + items: [ + { value: "en-US", right: "US", title: "English" }, + { value: "fr-CA", right: "FR", title: "Français" } + ], + dynamicTitle: true + } + }, + theme: { + description: "Global theme for components", + defaultValue: "light", + toolbar: { + title: "Theme", + icon: "circlehollow", + items: [ + { value: "light", title: "Light" }, + { value: "dark", title: "Dark" } + ], + dynamicTitle: true + } + } + }, + decorators: [withCenteredCanvas, withThemeProvider, withBackgroundMatchingColorScheme] +}; + +export default preview; diff --git a/.storybook/stories.css b/.storybook/stories.css new file mode 100644 index 000000000..78fe9c686 --- /dev/null +++ b/.storybook/stories.css @@ -0,0 +1,41 @@ +/* Helper class for storybook stories to test styling overrides */ + +.bg-red { + background: red !important; +} + +.border-red { + border: 0.0625rem solid red !important; +} + +.red { + color: red !important; +} + +.fill-red { + fill: red !important; +} + +.stroke-red { + stroke: red !important; +} + +.bg-blue { + background: blue !important; +} + +.border-blue { + border: 0.0625rem solid blue !important; +} + +.fill-blue { + fill: blue !important; +} + +.zoom-in { + zoom: 120% !important; +} + +.zoom-out { + zoom: 90% !important; +} diff --git a/.storybook/storybook-addon/DisableAnimations.tsx b/.storybook/storybook-addon/DisableAnimations.tsx new file mode 100644 index 000000000..0fa21b20d --- /dev/null +++ b/.storybook/storybook-addon/DisableAnimations.tsx @@ -0,0 +1,24 @@ +import { type ReactNode, useEffect } from "react"; + +interface DisableAnimationsProps { + children?: ReactNode; + disableAnimations?: boolean; +} + +export function DisableAnimations({ children, disableAnimations }: DisableAnimationsProps) { + useEffect(() => { + if (disableAnimations) { + document.body.classList.add("disableAnimations"); + } else { + document.body.classList.remove("disableAnimations"); + } + }, [disableAnimations]); + + return ( + <> + {children} + </> + ); +} + +DisableAnimations.displayName = "DisableAnimations"; diff --git a/.storybook/storybook-addon/a11y.ts b/.storybook/storybook-addon/a11y.ts new file mode 100644 index 000000000..61bea0c94 --- /dev/null +++ b/.storybook/storybook-addon/a11y.ts @@ -0,0 +1,43 @@ +import type { Parameters as SBParameters } from "@storybook/react"; +import type { configureAxe } from "axe-playwright"; + +export type Rules = NonNullable<Parameters<typeof configureAxe>[1]>["rules"]; + +export interface A11yAddonParameters { + a11y: { + disable?: boolean; + config?: { + rules?: Rules; + }; + disableContrastCheck?: boolean; + }; +} + +export function a11yParameters(params: A11yAddonParameters["a11y"]): A11yAddonParameters { + const { disableContrastCheck, ...rest } = params; + + const a11yOptions = { + a11y: rest + }; + + if (disableContrastCheck) { + a11yOptions.a11y.config = { + ...a11yOptions.a11y.config, + rules: [ + ...a11yOptions.a11y.config?.rules ?? [], + { + id: "color-contrast", + enabled: false + } + ] + }; + } + + return a11yOptions; +} + +export function getA11yAddonParameters(parameters: SBParameters): A11yAddonParameters["a11y"] | undefined { + const a11yParams = (parameters as A11yAddonParameters | undefined)?.a11y ; + + return a11yParams; +} diff --git a/.storybook/storybook-addon/disableAnimations.css b/.storybook/storybook-addon/disableAnimations.css new file mode 100644 index 000000000..fa154115d --- /dev/null +++ b/.storybook/storybook-addon/disableAnimations.css @@ -0,0 +1,3 @@ +.disableAnimations * { + transition: none !important; +} diff --git a/.storybook/storybook-addon/index.ts b/.storybook/storybook-addon/index.ts new file mode 100644 index 000000000..ee10d0ce7 --- /dev/null +++ b/.storybook/storybook-addon/index.ts @@ -0,0 +1,4 @@ +export * from "./withHopperProvider"; +export * from "./viewports"; +export * from "./a11y"; + diff --git a/.storybook/storybook-addon/viewports.ts b/.storybook/storybook-addon/viewports.ts new file mode 100644 index 000000000..30ef4de5c --- /dev/null +++ b/.storybook/storybook-addon/viewports.ts @@ -0,0 +1,34 @@ +import { Breakpoints } from "@hopper-ui/styled-system"; + +interface Viewport { + name: string; + styles: { height: string; width: string }; + type: "desktop" | "mobile" | "tablet"; +} + +type BreakpointViewports = Record<keyof typeof Breakpoints, Viewport>; + +const BreakpointToDeviceType: Record<keyof typeof Breakpoints, Viewport["type"]> = { + xs: "mobile", + sm: "mobile", + md: "tablet", + lg: "desktop", + xl: "desktop" +}; + +const viewports = (Object.keys(Breakpoints) as (keyof typeof Breakpoints)[]).reduce((acc, key) => { + acc[key] = { + name: `Breakpoint ${key}`, + styles: { + height: "100%", + width: `${Breakpoints[key]}px` + }, + type: BreakpointToDeviceType[key] + }; + + return acc; +}, {} as BreakpointViewports); + +export const viewport = { + viewports +}; diff --git a/.storybook/storybook-addon/withHopperProvider.tsx b/.storybook/storybook-addon/withHopperProvider.tsx new file mode 100644 index 000000000..f9827c1c5 --- /dev/null +++ b/.storybook/storybook-addon/withHopperProvider.tsx @@ -0,0 +1,84 @@ +import { type ColorScheme } from "@hopper-ui/components"; +import { makeDecorator } from "@storybook/preview-api"; +import { ThemeProvider } from "../../packages/components/src/styling"; + +import { DisableAnimations } from "./DisableAnimations"; +import "./disableAnimations.css"; + +const AddonName = "hopper"; + +export interface HopperStorybookAddonOptions { + /** Whether to disable the hopperProvider. Defaults to true. */ + disabled?: boolean; + /** The locale. Defaults to en-US. */ + locale?: string; + /** The color schemes to render. Defaults to all color schemes. */ + colorSchemes?: ColorScheme[]; + /** The height of the preview. Defaults to 1000px. */ + height?: number; + /** Whether to disable animations. Defaults to false. */ + disableAnimations?: boolean; +} + +export interface WithHopperStorybookAddonParameter { + [AddonName]?: HopperStorybookAddonOptions; +} + +export function hopperParameters(parameters: HopperStorybookAddonOptions): WithHopperStorybookAddonParameter { + return { + [AddonName]: parameters + }; +} + +export const ColorSchemes = ["light", "dark"] satisfies HopperStorybookAddonOptions["colorSchemes"]; + +export const withHopperProvider = makeDecorator({ + name: "withHopperProvider", + parameterName: AddonName, + wrapper: (getStory, context, { options: optionProp, parameters }) => { + const options = { ...optionProp, ...parameters } as HopperStorybookAddonOptions; + const isDocStory = context.viewMode === "docs"; + + const colorSchemes: ColorScheme[] = options.colorSchemes || (isDocStory && context.globals.theme ? [context.globals.theme] : ColorSchemes); + const locale: string = options.locale || (isDocStory && context.globals.locale ? context.globals.locale : "en-US"); + const disabled = options.disabled || false; + + if (disabled) { + return getStory(context); + } + + let height: number | undefined; + let minHeight: number | undefined; + if (options.height && isNaN(options.height)) { + minHeight = 1000; + } else { + height = options.height; + } + + // do not add a top level provider, each provider variant needs to be independent so that we don't have RTL/LTR styles that interfere with each other + return ( + <DisableAnimations disableAnimations={options.disableAnimations}> + {colorSchemes.map(colorScheme => + <ThemeProvider + key={`${colorScheme}`} + colorScheme={colorScheme} + // locale={locale} + color="neutral" + backgroundColor="neutral" + lineHeight="body-md" + fontFamily="body-md" + fontSize="body-md" + display="flex" + flexDirection="column" + + height={height ? `${height}px` : undefined} + minHeight={minHeight ? `${minHeight}px` : undefined} + padding="inset-md" + > + {getStory(context) as JSX.Element} + </ThemeProvider> + )} + </DisableAnimations> + ); + } +}); diff --git a/.storybook/swc.build.ts b/.storybook/swc.build.ts new file mode 100644 index 000000000..7e0820823 --- /dev/null +++ b/.storybook/swc.build.ts @@ -0,0 +1,7 @@ +// @ts-check + +import { browserslistToSwc, defineBuildConfig } from "@workleap/swc-configs"; + +const targets = browserslistToSwc(); + +export const swcConfig = defineBuildConfig(targets); diff --git a/.storybook/swc.dev.ts b/.storybook/swc.dev.ts new file mode 100644 index 000000000..9d6fb9fa3 --- /dev/null +++ b/.storybook/swc.dev.ts @@ -0,0 +1,7 @@ +// @ts-check + +import { browserslistToSwc, defineDevConfig } from "@workleap/swc-configs"; + +const targets = browserslistToSwc(); + +export const swcConfig = defineDevConfig(targets); diff --git a/.storybook/utils/storiesOfBuilder.js b/.storybook/utils/storiesOfBuilder.js index 0e9b85e8d..b5f7711d8 100644 --- a/.storybook/utils/storiesOfBuilder.js +++ b/.storybook/utils/storiesOfBuilder.js @@ -1,5 +1,5 @@ import { isNil, isPlainObject } from "@components/shared"; -import { storiesOf } from "@storybook/react"; +// import { storiesOf } from "@storybook/react"; class StoriesOfConfigurationBuilder { _module; @@ -43,13 +43,14 @@ class StoriesOfConfigurationBuilder { name += this._segment; } - let storiesConfig = storiesOf(name, this._module); + return undefined; + // let storiesConfig = storiesOf(name, this._module); - if (!isNil(this._parameters)) { - storiesConfig = storiesConfig.addParameters(this._parameters); - } + // if (!isNil(this._parameters)) { + // storiesConfig = storiesConfig.addParameters(this._parameters); + // } - return storiesConfig; + // return storiesConfig; } } diff --git a/chromatic.config.json b/chromatic.config.json new file mode 100644 index 000000000..9c89e9604 --- /dev/null +++ b/chromatic.config.json @@ -0,0 +1,5 @@ +{ + "onlyChanged": true, + "projectId": "Project:651ae5d6e3fe178614aea15e", + "zip": true +} diff --git a/package.json b/package.json index 67b7dfe3b..644acb2e2 100644 --- a/package.json +++ b/package.json @@ -13,14 +13,15 @@ "scripts": { "start": "run-s start:*", "start:pkg": "lerna run start --parallel", - "start:sb": "start-storybook -p 9009", + "start:sb": "storybook dev -p 9009", "start-sb-chroma": "cross-env STORYBOOK_IS_CHROMATIC=true yarn start:sb", - "start-sb-docs": "cross-env STORYBOOK_IS_DOCS_SITE=true start-storybook -p 9010 --docs", + "start-sb-docs": "cross-env STORYBOOK_IS_DOCS_SITE=true storybook dev -p 9010 --docs", "start-sb-no-chroma": "cross-env STORYBOOK_INCLUDE_CHROMATIC=false yarn start:sb", "build": "lerna run build", - "build-sb": "NODE_OPTIONS=--max-old-space-size=8192 build-storybook -o storybook-static/sb", - "build-sb-chroma": "cross-env STORYBOOK_IS_CHROMATIC=true NODE_OPTIONS=--max-old-space-size=8192 build-storybook -o storybook-static/chromatic", - "build-sb-docs": "cross-env STORYBOOK_IS_DOCS_SITE=true NODE_OPTIONS=--max-old-space-size=8192 build-storybook -o storybook-static/docs --docs", + "build-storybook": "storybook build -o storybook-static/sb", + "build-sb": "NODE_OPTIONS=--max-old-space-size=8192 storybook build -o storybook-static/sb", + "build-sb-chroma": "cross-env STORYBOOK_IS_CHROMATIC=true NODE_OPTIONS=--max-old-space-size=8192 storybook build -o storybook-static/chromatic", + "build-sb-docs": "cross-env STORYBOOK_IS_DOCS_SITE=true NODE_OPTIONS=--max-old-space-size=8192 storybook build -o storybook-static/docs --docs", "build-netlify-sb": "yarn && yarn build && yarn build-sb", "build-netlify-docs": "yarn && yarn build && yarn build-sb-docs", "clean": "run-p -c clean:*", @@ -48,15 +49,24 @@ }, "devDependencies": { "@changesets/cli": "2.26.0", + "@chromatic-com/storybook": "2.0.2", "@hopper-ui/icons": "^2.8.2", + "@pmmmwh/react-refresh-webpack-plugin": "0.5.15", "@sharegate/eslint-plugin": "3.1.0", "@sharegate/stylelint-plugin": "1.0.1", "@sharegate/typescript-config": "1.1.1", - "@storybook/addon-a11y": "6.5.16", - "@storybook/addon-essentials": "6.5.16", - "@storybook/react": "6.5.16", - "@storybook/testing-library": "0.0.13", - "@storybook/testing-react": "1.3.0", + "@storybook/addon-a11y": "8.3.5", + "@storybook/addon-essentials": "8.3.5", + "@storybook/addon-interactions": "8.3.5", + "@storybook/addon-links": "8.3.5", + "@storybook/addon-mdx-gfm": "8.3.5", + "@storybook/addon-webpack5-compiler-swc": "1.0.5", + "@storybook/blocks": "8.3.5", + "@storybook/react": "8.3.5", + "@storybook/react-webpack5": "8.3.5", + "@storybook/test": "8.3.5", + "@storybook/test-runner": "0.19.1", + "@storybook/types": "8.3.5", "@svgr/core": "6.5.1", "@testing-library/dom": "8.20.0", "@testing-library/jest-dom": "5.16.1", @@ -68,13 +78,13 @@ "@types/react-is": "17.0.3", "@types/resize-observer-browser": "0.1.7", "@typescript-eslint/parser": "5.9.1", - "ts-jest": "29.0.5", + "@workleap/swc-configs": "2.2.3", "browserslist": "4.21.5", "chalk": "4.1.2", "chromatic": "6.3.4", + "copyfiles": "2.4.1", "cross-env": "7.0.3", "csstype": "*", - "copyfiles": "2.4.1", "date-fns": "2.29.3", "eslint": "8.36.0", "eslint-plugin-sort-destructure-keys": "1.5.0", @@ -99,9 +109,12 @@ "rimraf": "4.4.0", "serve": "14.2.0", "shelljs": "0.8.5", + "storybook": "8.3.5", "stylelint": "14.16.1", "svgo": "3.0.2", - "typescript": "4.5.4", + "ts-jest": "29.0.5", + "tsconfig-paths-webpack-plugin": "4.1.0", + "typescript": "5.5.4", "webpack-filter-warnings-plugin": "1.2.1" }, "engines": { diff --git a/packages/components/src/alert/tests/chromatic/AlertTrigger-hopper.stories.tsx b/packages/components/src/alert/tests/chromatic/AlertTrigger-hopper.stories.tsx index 53e9bbc91..faaeb1317 100644 --- a/packages/components/src/alert/tests/chromatic/AlertTrigger-hopper.stories.tsx +++ b/packages/components/src/alert/tests/chromatic/AlertTrigger-hopper.stories.tsx @@ -1,17 +1,19 @@ import { Content } from "@components/placeholders"; import { Alert, AlertTrigger } from "@components/alert"; import { Button, Heading } from "@hopper-ui/components"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/AlertTrigger-hopper", component: AlertTrigger -} as ComponentMeta<typeof AlertTrigger>; +} as Meta<typeof AlertTrigger>; -type AlertTriggerStory = ComponentStoryObj<typeof AlertTrigger>; +export default meta; + +type AlertTriggerStory = StoryObj<typeof meta>; export const Default: AlertTriggerStory = { - storyName: "default", + name: "default", render: () => ( <AlertTrigger> <Button variant="secondary">Open</Button> @@ -24,7 +26,7 @@ export const Default: AlertTriggerStory = { }; export const DefaultOpen: AlertTriggerStory = { - storyName: "default open", + name: "default open", render: () => ( <AlertTrigger defaultOpen> <Button variant="secondary">Open</Button> diff --git a/packages/components/src/alert/tests/chromatic/AlertTrigger.stories.tsx b/packages/components/src/alert/tests/chromatic/AlertTrigger.stories.tsx index 1a7ca4e2c..5abda87b7 100644 --- a/packages/components/src/alert/tests/chromatic/AlertTrigger.stories.tsx +++ b/packages/components/src/alert/tests/chromatic/AlertTrigger.stories.tsx @@ -2,17 +2,19 @@ import { Alert, AlertTrigger } from "@components/alert"; import { Button } from "@components/button"; import { Content } from "@components/placeholders"; import { Heading } from "@components/typography"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/AlertTrigger", component: AlertTrigger -} as ComponentMeta<typeof AlertTrigger>; +} as Meta<typeof AlertTrigger>; -type AlertTriggerStory = ComponentStoryObj<typeof AlertTrigger>; +export default meta; + +type AlertTriggerStory = StoryObj<typeof meta>; export const Default: AlertTriggerStory = { - storyName: "default", + name: "default", render: () => ( <AlertTrigger> <Button variant="secondary">Open</Button> @@ -25,7 +27,7 @@ export const Default: AlertTriggerStory = { }; export const DefaultOpen: AlertTriggerStory = { - storyName: "default open", + name: "default open", render: () => ( <AlertTrigger defaultOpen> <Button variant="secondary">Open</Button> diff --git a/packages/components/src/autocomplete/tests/chromatic/Autocomplete-hopper.stories.tsx b/packages/components/src/autocomplete/tests/chromatic/Autocomplete-hopper.stories.tsx index 3ec2475de..13c940569 100644 --- a/packages/components/src/autocomplete/tests/chromatic/Autocomplete-hopper.stories.tsx +++ b/packages/components/src/autocomplete/tests/chromatic/Autocomplete-hopper.stories.tsx @@ -3,9 +3,9 @@ import { Div } from "@components/html"; import { Inline, Stack } from "@components/layout"; import { TeamIcon } from "@hopper-ui/icons"; import { Item } from "@components/collection"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/Autocomplete-hopper", component: Autocomplete, parameters: { @@ -14,12 +14,14 @@ export default { chromaticPauseAnimationAtEnd: true } } -} as ComponentMeta<typeof Autocomplete>; +} as Meta<typeof Autocomplete>; -type AutocompleteStory = ComponentStoryObj<typeof Autocomplete>; +export default meta; + +type AutocompleteStory = StoryObj<typeof meta>; export const Default: AutocompleteStory = { - storyName: "default", + name: "default", render: () => ( <Stack> <Autocomplete aria-label="Planets"> @@ -87,7 +89,7 @@ export const Default: AutocompleteStory = { }; export const Placeholder: AutocompleteStory = { - storyName: "placeholder", + name: "placeholder", render: () => ( <Stack> <Autocomplete placeholder="Select a planet" aria-label="Planets"> @@ -155,7 +157,7 @@ export const Placeholder: AutocompleteStory = { }; export const DefaultValue: AutocompleteStory = { - storyName: "default value", + name: "default value", render: () => ( <Stack> <Autocomplete defaultValue="Mars" aria-label="Planets"> @@ -211,7 +213,7 @@ export const DefaultValue: AutocompleteStory = { }; export const DefaultValueNotMatching: AutocompleteStory = { - storyName: "default value not matching any item", + name: "default value not matching any item", render: () => ( <Autocomplete defaultValue="Toto" placeholder="Select a planet" aria-label="Planets"> <Item key="earth">Earth</Item> @@ -222,7 +224,7 @@ export const DefaultValueNotMatching: AutocompleteStory = { }; export const Size: AutocompleteStory = { - storyName: "size", + name: "size", render: () => ( <Autocomplete size="sm" placeholder="Select a planet" aria-label="Planets"> <Item key="earth">Earth</Item> @@ -233,7 +235,7 @@ export const Size: AutocompleteStory = { }; export const TriggerIcon: AutocompleteStory = { - storyName: "trigger icon", + name: "trigger icon", render: () => ( <Stack> <Autocomplete icon={<TeamIcon />} placeholder="Select a planet" aria-label="Planets"> @@ -270,7 +272,7 @@ export const TriggerIcon: AutocompleteStory = { }; export const CanClearValue: AutocompleteStory = { - storyName: "can clear value", + name: "can clear value", render: () => ( <Autocomplete defaultValue="Mars" placeholder="Select a planet" aria-label="Planets"> <Item key="earth">Earth</Item> @@ -281,7 +283,7 @@ export const CanClearValue: AutocompleteStory = { }; export const Validation: AutocompleteStory = { - storyName: "validation", + name: "validation", render: () => ( <Inline> <Autocomplete validationState="invalid" placeholder="Select a planet" aria-label="Planets"> @@ -299,7 +301,7 @@ export const Validation: AutocompleteStory = { }; export const OverflowingValue: AutocompleteStory = { - storyName: "overflowing value", + name: "overflowing value", render: () => ( <Autocomplete defaultValue="Lorem Ipsum is simply dummy text of the printing and typesetting industry." placeholder="Select a planet" aria-label="Planets"> <Item key="earth">Earth</Item> @@ -310,7 +312,7 @@ export const OverflowingValue: AutocompleteStory = { }; export const TriggerStates: AutocompleteStory = { - storyName: "trigger states", + name: "trigger states", render: () => ( <Stack> <Inline> @@ -371,7 +373,7 @@ export const TriggerStates: AutocompleteStory = { }; export const NoResults: AutocompleteStory = { - storyName: "no results", + name: "no results", render: () => ( <Stack gap={800}> <Inline> @@ -410,7 +412,7 @@ export const NoResults: AutocompleteStory = { }; export const CustomTriggerWidth: AutocompleteStory = { - storyName: "custom trigger width", + name: "custom trigger width", render: () => ( <Autocomplete width="20rem" placeholder="Select a planet" aria-label="Planets"> <Item key="earth">Earth</Item> @@ -422,7 +424,7 @@ export const CustomTriggerWidth: AutocompleteStory = { export const CustomMenuWidth: AutocompleteStory = { - storyName: "custom menu width", + name: "custom menu width", render: () => ( <Autocomplete overlayProps={{ width: "500px" }} defaultOpen placeholder="Select a planet" aria-label="Planets"> <Item key="earth">Earth</Item> @@ -434,7 +436,7 @@ export const CustomMenuWidth: AutocompleteStory = { export const DirectionBottom: AutocompleteStory = { - storyName: "direction bottom", + name: "direction bottom", render: () => ( <Autocomplete direction="bottom" defaultOpen placeholder="Select a planet" aria-label="Planets"> <Item key="earth">Earth</Item> @@ -445,7 +447,7 @@ export const DirectionBottom: AutocompleteStory = { }; export const DirectionTop: AutocompleteStory = { - storyName: "direction top", + name: "direction top", render: () => ( <Autocomplete direction="top" defaultOpen placeholder="Select a planet" aria-label="Planets"> <Item key="earth">Earth</Item> @@ -456,7 +458,7 @@ export const DirectionTop: AutocompleteStory = { }; export const AlignStart: AutocompleteStory = { - storyName: "align start", + name: "align start", decorators: [Story => <div style={{ paddingLeft: "200px" }}><Story /></div>], render: () => ( <Autocomplete align="start" overlayProps={{ style: { width: "500px" } }} defaultOpen placeholder="Select a planet" aria-label="Planets"> @@ -468,7 +470,7 @@ export const AlignStart: AutocompleteStory = { }; export const AlignEnd: AutocompleteStory = { - storyName: "align end", + name: "align end", decorators: [Story => <div style={{ paddingLeft: "400px" }}><Story /></div>], render: () => ( <Autocomplete align="end" overlayProps={{ style: { width: "500px" } }} defaultOpen placeholder="Select a planet" aria-label="Planets"> @@ -480,7 +482,7 @@ export const AlignEnd: AutocompleteStory = { }; export const ConditionnalRendering: AutocompleteStory = { - storyName: "conditional rendering", + name: "conditional rendering", render: () => ( <Autocomplete placeholder="Select a planet" aria-label="Planets"> {false && <Item key="earth">Earth</Item>} @@ -491,7 +493,7 @@ export const ConditionnalRendering: AutocompleteStory = { }; export const Zoom: AutocompleteStory = { - storyName: "zoom", + name: "zoom", render: () => ( <Stack> <Div className="zoom-in"> @@ -513,7 +515,7 @@ export const Zoom: AutocompleteStory = { }; export const Styling: AutocompleteStory = { - storyName: "styling", + name: "styling", render: () => ( <Inline> <Autocomplete border="warning" placeholder="Select a planet" aria-label="Planets"> diff --git a/packages/components/src/autocomplete/tests/chromatic/Autocomplete.stories.tsx b/packages/components/src/autocomplete/tests/chromatic/Autocomplete.stories.tsx index cae2c2285..453d6d509 100644 --- a/packages/components/src/autocomplete/tests/chromatic/Autocomplete.stories.tsx +++ b/packages/components/src/autocomplete/tests/chromatic/Autocomplete.stories.tsx @@ -3,9 +3,9 @@ import { Div } from "@components/html"; import { TeamIcon } from "@hopper-ui/icons"; import { Inline, Stack } from "@components/layout"; import { Item } from "@components/collection"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/Autocomplete", component: Autocomplete, parameters: { @@ -14,12 +14,14 @@ export default { chromaticPauseAnimationAtEnd: true } } -} as ComponentMeta<typeof Autocomplete>; +} as Meta<typeof Autocomplete>; -type AutocompleteStory = ComponentStoryObj<typeof Autocomplete>; +export default meta; + +type AutocompleteStory = StoryObj<typeof meta>; export const Default: AutocompleteStory = { - storyName: "default", + name: "default", render: () => ( <Stack> <Autocomplete aria-label="Planets"> @@ -87,7 +89,7 @@ export const Default: AutocompleteStory = { }; export const Placeholder: AutocompleteStory = { - storyName: "placeholder", + name: "placeholder", render: () => ( <Stack> <Autocomplete placeholder="Select a planet" aria-label="Planets"> @@ -155,7 +157,7 @@ export const Placeholder: AutocompleteStory = { }; export const DefaultValue: AutocompleteStory = { - storyName: "default value", + name: "default value", render: () => ( <Stack> <Autocomplete defaultValue="Mars" aria-label="Planets"> @@ -211,7 +213,7 @@ export const DefaultValue: AutocompleteStory = { }; export const DefaultValueNotMatching: AutocompleteStory = { - storyName: "default value not matching any item", + name: "default value not matching any item", render: () => ( <Autocomplete defaultValue="Toto" placeholder="Select a planet" aria-label="Planets"> <Item key="earth">Earth</Item> @@ -222,7 +224,7 @@ export const DefaultValueNotMatching: AutocompleteStory = { }; export const Size: AutocompleteStory = { - storyName: "size", + name: "size", render: () => ( <Autocomplete size="sm" placeholder="Select a planet" aria-label="Planets"> <Item key="earth">Earth</Item> @@ -233,7 +235,7 @@ export const Size: AutocompleteStory = { }; export const TriggerIcon: AutocompleteStory = { - storyName: "trigger icon", + name: "trigger icon", render: () => ( <Stack> <Autocomplete icon={<TeamIcon />} placeholder="Select a planet" aria-label="Planets"> @@ -270,7 +272,7 @@ export const TriggerIcon: AutocompleteStory = { }; export const CanClearValue: AutocompleteStory = { - storyName: "can clear value", + name: "can clear value", render: () => ( <Autocomplete defaultValue="Mars" placeholder="Select a planet" aria-label="Planets"> <Item key="earth">Earth</Item> @@ -281,7 +283,7 @@ export const CanClearValue: AutocompleteStory = { }; export const Validation: AutocompleteStory = { - storyName: "validation", + name: "validation", render: () => ( <Inline> <Autocomplete validationState="invalid" placeholder="Select a planet" aria-label="Planets"> @@ -299,7 +301,7 @@ export const Validation: AutocompleteStory = { }; export const OverflowingValue: AutocompleteStory = { - storyName: "overflowing value", + name: "overflowing value", render: () => ( <Autocomplete defaultValue="Lorem Ipsum is simply dummy text of the printing and typesetting industry." placeholder="Select a planet" aria-label="Planets"> <Item key="earth">Earth</Item> @@ -310,7 +312,7 @@ export const OverflowingValue: AutocompleteStory = { }; export const TriggerStates: AutocompleteStory = { - storyName: "trigger states", + name: "trigger states", render: () => ( <Stack> <Inline> @@ -371,7 +373,7 @@ export const TriggerStates: AutocompleteStory = { }; export const NoResults: AutocompleteStory = { - storyName: "no results", + name: "no results", render: () => ( <Stack gap={800}> <Inline> @@ -410,7 +412,7 @@ export const NoResults: AutocompleteStory = { }; export const CustomTriggerWidth: AutocompleteStory = { - storyName: "custom trigger width", + name: "custom trigger width", render: () => ( <Autocomplete width="20rem" placeholder="Select a planet" aria-label="Planets"> <Item key="earth">Earth</Item> @@ -422,7 +424,7 @@ export const CustomTriggerWidth: AutocompleteStory = { export const CustomMenuWidth: AutocompleteStory = { - storyName: "custom menu width", + name: "custom menu width", render: () => ( <Autocomplete overlayProps={{ width: "500px" }} defaultOpen placeholder="Select a planet" aria-label="Planets"> <Item key="earth">Earth</Item> @@ -434,7 +436,7 @@ export const CustomMenuWidth: AutocompleteStory = { export const DirectionBottom: AutocompleteStory = { - storyName: "direction bottom", + name: "direction bottom", render: () => ( <Autocomplete direction="bottom" defaultOpen placeholder="Select a planet" aria-label="Planets"> <Item key="earth">Earth</Item> @@ -445,7 +447,7 @@ export const DirectionBottom: AutocompleteStory = { }; export const DirectionTop: AutocompleteStory = { - storyName: "direction top", + name: "direction top", render: () => ( <Autocomplete direction="top" defaultOpen placeholder="Select a planet" aria-label="Planets"> <Item key="earth">Earth</Item> @@ -456,7 +458,7 @@ export const DirectionTop: AutocompleteStory = { }; export const AlignStart: AutocompleteStory = { - storyName: "align start", + name: "align start", decorators: [Story => <div style={{ paddingLeft: "200px" }}><Story /></div>], render: () => ( <Autocomplete align="start" overlayProps={{ style: { width: "500px" } }} defaultOpen placeholder="Select a planet" aria-label="Planets"> @@ -468,7 +470,7 @@ export const AlignStart: AutocompleteStory = { }; export const AlignEnd: AutocompleteStory = { - storyName: "align end", + name: "align end", decorators: [Story => <div style={{ paddingLeft: "400px" }}><Story /></div>], render: () => ( <Autocomplete align="end" overlayProps={{ style: { width: "500px" } }} defaultOpen placeholder="Select a planet" aria-label="Planets"> @@ -480,7 +482,7 @@ export const AlignEnd: AutocompleteStory = { }; export const ConditionnalRendering: AutocompleteStory = { - storyName: "conditional rendering", + name: "conditional rendering", render: () => ( <Autocomplete placeholder="Select a planet" aria-label="Planets"> {false && <Item key="earth">Earth</Item>} @@ -491,7 +493,7 @@ export const ConditionnalRendering: AutocompleteStory = { }; export const Zoom: AutocompleteStory = { - storyName: "zoom", + name: "zoom", render: () => ( <Stack> <Div className="zoom-in"> @@ -513,7 +515,7 @@ export const Zoom: AutocompleteStory = { }; export const Styling: AutocompleteStory = { - storyName: "styling", + name: "styling", render: () => ( <Inline> <Autocomplete border="warning" placeholder="Select a planet" aria-label="Planets"> diff --git a/packages/components/src/avatar/tests/chromatic/AnonymousAvatar.stories.tsx b/packages/components/src/avatar/tests/chromatic/AnonymousAvatar.stories.tsx index e82f61939..1ad30b6ec 100644 --- a/packages/components/src/avatar/tests/chromatic/AnonymousAvatar.stories.tsx +++ b/packages/components/src/avatar/tests/chromatic/AnonymousAvatar.stories.tsx @@ -1,9 +1,9 @@ import { AnonymousAvatar } from "@components/avatar"; import { Div } from "@components/html"; import { Inline, Stack } from "@components/layout"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { component: AnonymousAvatar, parameters: { a11y: { @@ -18,12 +18,14 @@ export default { } }, title: "Chromatic/Avatar - Anonymous" -} as ComponentMeta<typeof AnonymousAvatar>; +} as Meta<typeof AnonymousAvatar>; -type AnonymousAvatarStory = ComponentStoryObj<typeof AnonymousAvatar>; +export default meta; + +type AnonymousAvatarStory = StoryObj<typeof meta>; export const Default: AnonymousAvatarStory = { - storyName: "default", + name: "default", render: () => ( <Inline alignY="center"> <AnonymousAvatar size="xs" aria-label="Neil Armstrong" /> @@ -36,7 +38,7 @@ export const Default: AnonymousAvatarStory = { }; export const Zoom: AnonymousAvatarStory = { - storyName: "zoom", + name: "zoom", render: () => ( <Stack> <Div className="zoom-in"> @@ -50,7 +52,7 @@ export const Zoom: AnonymousAvatarStory = { }; export const Styling: AnonymousAvatarStory = { - storyName: "styling", + name: "styling", render: () => ( <Inline> <AnonymousAvatar aria-label="Sally Ride" border="warning" /> diff --git a/packages/components/src/avatar/tests/chromatic/Avatar.stories.tsx b/packages/components/src/avatar/tests/chromatic/Avatar.stories.tsx index 72cbb584d..8dac7e8da 100644 --- a/packages/components/src/avatar/tests/chromatic/Avatar.stories.tsx +++ b/packages/components/src/avatar/tests/chromatic/Avatar.stories.tsx @@ -1,10 +1,10 @@ import { Avatar } from "@components/avatar"; import { Div } from "@components/html"; import { Inline, Stack } from "@components/layout"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; import { Astronaut, Person } from "./assets"; -export default { +const meta = { title: "Chromatic/Avatar", component: Avatar, parameters: { @@ -19,12 +19,14 @@ export default { } } } -} as ComponentMeta<typeof Avatar>; +} as Meta<typeof Avatar>; -type AvatarStory = ComponentStoryObj<typeof Avatar>; +export default meta; + +type AvatarStory = StoryObj<typeof meta>; export const LocalImage: AvatarStory = { - storyName: "local image", + name: "local image", render: () => ( <Inline alignY="center"> <Avatar src={Person} size="xs" name="Neil Armstrong" /> @@ -38,7 +40,7 @@ export const LocalImage: AvatarStory = { }; export const LocalImageRectangle: AvatarStory = { - storyName: "local image rectangle", + name: "local image rectangle", render: () => ( <Inline alignY="center"> <Avatar src={Astronaut} size="xs" name="Neil Armstrong" /> @@ -52,7 +54,7 @@ export const LocalImageRectangle: AvatarStory = { }; export const RemoteImage: AvatarStory = { - storyName: "remote image", + name: "remote image", parameters: { chromatic: { delay: 500 } }, @@ -62,7 +64,7 @@ export const RemoteImage: AvatarStory = { }; export const FailingRemoteSrc: AvatarStory = { - storyName: "failing remote src", + name: "failing remote src", render: () => ( <Inline alignY="center"> <Avatar size="xs" src="https://www.google.com" name="Neil Armstrong" /> @@ -76,7 +78,7 @@ export const FailingRemoteSrc: AvatarStory = { }; export const Initials: AvatarStory = { - storyName: "initials", + name: "initials", render: () => ( <Stack> <Inline alignY="center"> @@ -98,7 +100,7 @@ export const Initials: AvatarStory = { }; export const EmptySrc: AvatarStory = { - storyName: "empty src", + name: "empty src", render: () => ( <Inline alignY="center"> <Avatar src="" size="xs" name="Neil Armstrong" /> @@ -111,7 +113,7 @@ export const EmptySrc: AvatarStory = { }; export const Zoom: AvatarStory = { - storyName: "zoom", + name: "zoom", render: () => ( <Stack> <Div className="zoom-in"> @@ -125,7 +127,7 @@ export const Zoom: AvatarStory = { }; export const Styling: AvatarStory = { - storyName: "styling", + name: "styling", render: () => ( <Inline> <Avatar name="Sally Ride" border="warning" /> diff --git a/packages/components/src/avatar/tests/chromatic/AvatarGroup.stories.tsx b/packages/components/src/avatar/tests/chromatic/AvatarGroup.stories.tsx index be16a9cca..23a7d694b 100644 --- a/packages/components/src/avatar/tests/chromatic/AvatarGroup.stories.tsx +++ b/packages/components/src/avatar/tests/chromatic/AvatarGroup.stories.tsx @@ -1,10 +1,10 @@ import { Avatar, AvatarGroup } from "@components/avatar"; import { Div } from "@components/html"; import { Inline, Stack } from "@components/layout"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; -import { screen, userEvent } from "@storybook/testing-library"; +import { Meta, StoryObj } from "@storybook/react"; +import { screen, userEvent } from "@storybook/test"; -export default { +const meta = { component: AvatarGroup, parameters: { a11y: { @@ -19,12 +19,14 @@ export default { } }, title: "Chromatic/AvatarGroup" -} as ComponentMeta<typeof AvatarGroup>; +} as Meta<typeof AvatarGroup>; -type AvatarGroupStory = ComponentStoryObj<typeof AvatarGroup>; +export default meta; + +type AvatarGroupStory = StoryObj<typeof meta>; export const Default: AvatarGroupStory = { - storyName: "default", + name: "default", render: () => ( <Inline gap={800}> <Stack> @@ -86,7 +88,7 @@ export const Default: AvatarGroupStory = { }; export const NoWrap: AvatarGroupStory = { - storyName: "no wrap", + name: "no wrap", render: () => ( <Div width={960}> <AvatarGroup wrap={false} size="xl"> @@ -101,7 +103,7 @@ export const NoWrap: AvatarGroupStory = { }; export const WithRemainings: AvatarGroupStory = { - storyName: "with remainings", + name: "with remainings", render: () => ( <Stack> <AvatarGroup size="xs"> @@ -144,7 +146,7 @@ export const WithRemainings: AvatarGroupStory = { }; export const Overflow: AvatarGroupStory = { - storyName: "overflow", + name: "overflow", render: () => ( <Div width="4.5rem"> <AvatarGroup size="xl"> @@ -158,7 +160,7 @@ export const Overflow: AvatarGroupStory = { }; export const Zoom: AvatarGroupStory = { - storyName: "zoom", + name: "zoom", render: () => ( <Stack> <Div className="zoom-in"> @@ -178,7 +180,7 @@ export const Zoom: AvatarGroupStory = { }; export const Styling: AvatarGroupStory = { - storyName: "styling", + name: "styling", render: () => ( <Inline> <AvatarGroup border="warning"> @@ -198,7 +200,7 @@ export const Styling: AvatarGroupStory = { }; export const WithRemainingsHover: AvatarGroupStory = { - storyName: "with remainings hover", + name: "with remainings hover", render: () => ( <AvatarGroup data-testid="avatar-group"> <Avatar name="Sally Ride" /> diff --git a/packages/components/src/avatar/tests/chromatic/DeletedAvatar.stories.tsx b/packages/components/src/avatar/tests/chromatic/DeletedAvatar.stories.tsx index bc0ca754e..93c3db68d 100644 --- a/packages/components/src/avatar/tests/chromatic/DeletedAvatar.stories.tsx +++ b/packages/components/src/avatar/tests/chromatic/DeletedAvatar.stories.tsx @@ -1,9 +1,9 @@ import { DeletedAvatar } from "@components/avatar"; import { Div } from "@components/html"; import { Inline, Stack } from "@components/layout"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { component: DeletedAvatar, parameters: { a11y: { @@ -18,12 +18,14 @@ export default { } }, title: "Chromatic/Avatar - Deleted" -} as ComponentMeta<typeof DeletedAvatar>; +} as Meta<typeof DeletedAvatar>; -type DeletedAvatarStory = ComponentStoryObj<typeof DeletedAvatar>; +export default meta; + +type DeletedAvatarStory = StoryObj<typeof meta>; export const Default: DeletedAvatarStory = { - storyName: "default", + name: "default", render: () => ( <Inline alignY="center"> <DeletedAvatar size="xs" aria-label="Neil Armstrong" /> @@ -36,7 +38,7 @@ export const Default: DeletedAvatarStory = { }; export const Zoom: DeletedAvatarStory = { - storyName: "zoom", + name: "zoom", render: () => ( <Stack> <Div className="zoom-in"> @@ -50,7 +52,7 @@ export const Zoom: DeletedAvatarStory = { }; export const Styling: DeletedAvatarStory = { - storyName: "styling", + name: "styling", render: () => ( <Inline> <DeletedAvatar aria-label="Sally Ride" border="warning" /> diff --git a/packages/components/src/badge/tests/chromatic/BadgeCount.stories.tsx b/packages/components/src/badge/tests/chromatic/BadgeCount.stories.tsx index a7130eabe..a13fb16b1 100644 --- a/packages/components/src/badge/tests/chromatic/BadgeCount.stories.tsx +++ b/packages/components/src/badge/tests/chromatic/BadgeCount.stories.tsx @@ -3,17 +3,19 @@ import { Div } from "@components/html"; import { Inline } from "@components/layout"; import { CircleBadge, IconBadge, SquareBadge } from "./BadgeUtils"; import { Text } from "@components/typography"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { component: Badge, title: "Chromatic/Badge/count" -} as ComponentMeta<typeof Badge>; +} as Meta<typeof Badge>; -type BadgeStory = ComponentStoryObj<typeof Badge>; +export default meta; + +type BadgeStory = StoryObj<typeof meta>; export const Default: BadgeStory = { - storyName: "default", + name: "default", render: () => ( <Inline gap={400}> <SquareBadge> @@ -36,7 +38,7 @@ export const Default: BadgeStory = { }; export const Overlap: BadgeStory = { - storyName: "overlap", + name: "overlap", render: () => ( <Inline gap={400}> <SquareBadge> @@ -53,7 +55,7 @@ export const Overlap: BadgeStory = { }; export const Zoom: BadgeStory = { - storyName: "zoom", + name: "zoom", render: () => ( <Inline gap={400}> <Div className="zoom-in"> @@ -71,7 +73,7 @@ export const Zoom: BadgeStory = { }; export const Styling: BadgeStory = { - storyName: "styling", + name: "styling", render: () => ( <Inline gap={400}> <SquareBadge border="warning"> diff --git a/packages/components/src/badge/tests/chromatic/BadgeDot.stories.tsx b/packages/components/src/badge/tests/chromatic/BadgeDot.stories.tsx index 8bc44c543..9994284c9 100644 --- a/packages/components/src/badge/tests/chromatic/BadgeDot.stories.tsx +++ b/packages/components/src/badge/tests/chromatic/BadgeDot.stories.tsx @@ -1,24 +1,26 @@ import { Badge } from "@components/badge"; import { CircleBadge, IconBadge, SquareBadge, TextBadge } from "./BadgeUtils"; import { Inline } from "@components/layout"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { component: Badge, title: "Chromatic/Badge/dot" -} as ComponentMeta<typeof Badge>; +} as Meta<typeof Badge>; -type BadgeStory = ComponentStoryObj<typeof Badge>; +export default meta; + +type BadgeStory = StoryObj<typeof meta>; export const Default: BadgeStory = { - storyName: "default", + name: "default", render: () => ( <SquareBadge variant="dot" /> ) }; export const Overlap: BadgeStory = { - storyName: "overlap", + name: "overlap", render: () => ( <Inline gap={400}> <SquareBadge variant="dot" /> @@ -30,7 +32,7 @@ export const Overlap: BadgeStory = { }; export const Styling: BadgeStory = { - storyName: "styling", + name: "styling", render: () => ( <Inline> <SquareBadge variant="dot" border="warning" /> diff --git a/packages/components/src/badge/tests/chromatic/BadgeIcon.stories.tsx b/packages/components/src/badge/tests/chromatic/BadgeIcon.stories.tsx index a351ff96e..e16b52296 100644 --- a/packages/components/src/badge/tests/chromatic/BadgeIcon.stories.tsx +++ b/packages/components/src/badge/tests/chromatic/BadgeIcon.stories.tsx @@ -2,17 +2,19 @@ import { SparklesIcon } from "@hopper-ui/icons"; import { Badge } from "@components/badge"; import { CircleBadge, IconBadge, SquareBadge, TextBadge } from "./BadgeUtils"; import { Inline } from "@components/layout"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { component: Badge, title: "Chromatic/Badge/icon" -} as ComponentMeta<typeof Badge>; +} as Meta<typeof Badge>; -type BadgeStory = ComponentStoryObj<typeof Badge>; +export default meta; + +type BadgeStory = StoryObj<typeof meta>; export const Default: BadgeStory = { - storyName: "default", + name: "default", render: () => ( <SquareBadge variant="icon"> <SparklesIcon /> @@ -21,7 +23,7 @@ export const Default: BadgeStory = { }; export const Overlap: BadgeStory = { - storyName: "overlap", + name: "overlap", render: () => ( <Inline gap={400}> <SquareBadge variant="icon"> @@ -41,7 +43,7 @@ export const Overlap: BadgeStory = { }; export const Styling: BadgeStory = { - storyName: "styling", + name: "styling", render: () => ( <Inline> <SquareBadge border="warning" variant="icon"> diff --git a/packages/components/src/box/tests/chromatic/Box-hopper.stories.tsx b/packages/components/src/box/tests/chromatic/Box-hopper.stories.tsx index 8e13ea21f..fe84df575 100644 --- a/packages/components/src/box/tests/chromatic/Box-hopper.stories.tsx +++ b/packages/components/src/box/tests/chromatic/Box-hopper.stories.tsx @@ -1,26 +1,28 @@ import { Box } from "@components/box"; import { Inline } from "@components/layout"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/Box-hopper", component: Box, parameters: { chromatic: { delay: 100 } } -} as ComponentMeta<typeof Box>; +} as Meta<typeof Box>; -type BoxStory = ComponentStoryObj<typeof Box>; +export default meta; + +type BoxStory = StoryObj<typeof meta>; export const Default: BoxStory = { - storyName: "default", + name: "default", render: () => ( <Box>The Universe is under no obligation to make sense to you.</Box> ) }; export const Styling: BoxStory = { - storyName: "styling", + name: "styling", render: () => ( <Inline> <Box border="warning">The Universe is under no obligation to make sense to you.</Box> diff --git a/packages/components/src/box/tests/chromatic/Box.stories.tsx b/packages/components/src/box/tests/chromatic/Box.stories.tsx index 059f720bb..1caca4689 100644 --- a/packages/components/src/box/tests/chromatic/Box.stories.tsx +++ b/packages/components/src/box/tests/chromatic/Box.stories.tsx @@ -1,26 +1,28 @@ import { Box } from "@components/box"; import { Inline } from "@components/layout"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/Box", component: Box, parameters: { chromatic: { delay: 100 } } -} as ComponentMeta<typeof Box>; +} as Meta<typeof Box>; -type BoxStory = ComponentStoryObj<typeof Box>; +export default meta; + +type BoxStory = StoryObj<typeof meta>; export const Default: BoxStory = { - storyName: "default", + name: "default", render: () => ( <Box>The Universe is under no obligation to make sense to you.</Box> ) }; export const Styling: BoxStory = { - storyName: "styling", + name: "styling", render: () => ( <Inline> <Box border="warning">The Universe is under no obligation to make sense to you.</Box> diff --git a/packages/components/src/button/tests/chromatic/ButtonGroup-hopper.stories.tsx b/packages/components/src/button/tests/chromatic/ButtonGroup-hopper.stories.tsx index 8e0109352..667a29288 100644 --- a/packages/components/src/button/tests/chromatic/ButtonGroup-hopper.stories.tsx +++ b/packages/components/src/button/tests/chromatic/ButtonGroup-hopper.stories.tsx @@ -3,17 +3,19 @@ import { Button, ButtonGroup, IconButton } from "@components/button"; import { Div } from "@components/html"; import { Inline, Stack } from "@components/layout"; import { TextLinkAsButton } from "@components/link"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/ButtonGroup-hopper", component: ButtonGroup -} as ComponentMeta<typeof ButtonGroup>; +} as Meta<typeof ButtonGroup>; -type ButtonGroupStory = ComponentStoryObj<typeof ButtonGroup>; +export default meta; + +type ButtonGroupStory = StoryObj<typeof meta>; export const Default: ButtonGroupStory = { - storyName: "default", + name: "default", render: () => ( <Stack> <ButtonGroup size="sm"> @@ -31,7 +33,7 @@ export const Default: ButtonGroupStory = { }; export const ButtonGroupIconButton: ButtonGroupStory = { - storyName: "icon button", + name: "icon button", render: () => ( <Inline gap={800}> <Stack> @@ -63,7 +65,7 @@ export const ButtonGroupIconButton: ButtonGroupStory = { }; export const Fluid: ButtonGroupStory = { - storyName: "fluid", + name: "fluid", render: () => ( <ButtonGroup fluid> <Button variant="secondary">Cutoff</Button> @@ -74,7 +76,7 @@ export const Fluid: ButtonGroupStory = { }; export const Disabled: ButtonGroupStory = { - storyName: "disabled", + name: "disabled", render: () => ( <ButtonGroup disabled> <Button variant="secondary">Cutoff</Button> @@ -85,7 +87,7 @@ export const Disabled: ButtonGroupStory = { }; export const Align: ButtonGroupStory = { - storyName: "align", + name: "align", render: () => ( <Stack> <ButtonGroup align="start"> @@ -109,7 +111,7 @@ export const Align: ButtonGroupStory = { }; export const Zoom: ButtonGroupStory = { - storyName: "zoom", + name: "zoom", render: () => ( <Stack> <Div className="zoom-in"> diff --git a/packages/components/src/button/tests/chromatic/ButtonGroup.stories.tsx b/packages/components/src/button/tests/chromatic/ButtonGroup.stories.tsx index 45ff7fa85..87333df08 100644 --- a/packages/components/src/button/tests/chromatic/ButtonGroup.stories.tsx +++ b/packages/components/src/button/tests/chromatic/ButtonGroup.stories.tsx @@ -3,17 +3,19 @@ import { Button, ButtonGroup, IconButton } from "@components/button"; import { Div } from "@components/html"; import { Inline, Stack } from "@components/layout"; import { TextLinkAsButton } from "@components/link"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/ButtonGroup", component: ButtonGroup -} as ComponentMeta<typeof ButtonGroup>; +} as Meta<typeof ButtonGroup>; -type ButtonGroupStory = ComponentStoryObj<typeof ButtonGroup>; +export default meta; + +type ButtonGroupStory = StoryObj<typeof meta>; export const Default: ButtonGroupStory = { - storyName: "default", + name: "default", render: () => ( <Stack> <ButtonGroup size="sm"> @@ -31,7 +33,7 @@ export const Default: ButtonGroupStory = { }; export const ButtonGroupIconButton: ButtonGroupStory = { - storyName: "icon button", + name: "icon button", render: () => ( <Inline gap={800}> <Stack> @@ -63,7 +65,7 @@ export const ButtonGroupIconButton: ButtonGroupStory = { }; export const Fluid: ButtonGroupStory = { - storyName: "fluid", + name: "fluid", render: () => ( <ButtonGroup fluid> <Button variant="secondary">Cutoff</Button> @@ -74,7 +76,7 @@ export const Fluid: ButtonGroupStory = { }; export const Disabled: ButtonGroupStory = { - storyName: "disabled", + name: "disabled", render: () => ( <ButtonGroup disabled> <Button variant="secondary">Cutoff</Button> @@ -85,7 +87,7 @@ export const Disabled: ButtonGroupStory = { }; export const Align: ButtonGroupStory = { - storyName: "align", + name: "align", render: () => ( <Stack> <ButtonGroup align="start"> @@ -109,7 +111,7 @@ export const Align: ButtonGroupStory = { }; export const Zoom: ButtonGroupStory = { - storyName: "zoom", + name: "zoom", render: () => ( <Stack> <Div className="zoom-in"> diff --git a/packages/components/src/button/tests/chromatic/ButtonGroupVertical-hopper.stories.tsx b/packages/components/src/button/tests/chromatic/ButtonGroupVertical-hopper.stories.tsx index 2a3a4d718..de53a9f3e 100644 --- a/packages/components/src/button/tests/chromatic/ButtonGroupVertical-hopper.stories.tsx +++ b/packages/components/src/button/tests/chromatic/ButtonGroupVertical-hopper.stories.tsx @@ -2,17 +2,19 @@ import { Button, ButtonGroup } from "@components/button"; import { Div } from "@components/html"; import { Inline, Stack } from "@components/layout"; import { TextLinkAsButton } from "@components/link"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { component: ButtonGroup, title: "Chromatic/ButtonGroup-hopper/vertical" -} as ComponentMeta<typeof ButtonGroup>; +} as Meta<typeof ButtonGroup>; -type ButtonGroupStory = ComponentStoryObj<typeof ButtonGroup>; +export default meta; + +type ButtonGroupStory = StoryObj<typeof meta>; export const Default: ButtonGroupStory = { - storyName: "default", + name: "default", render: () => ( <ButtonGroup orientation="vertical"> <Button variant="secondary">Cutoff</Button> @@ -24,7 +26,7 @@ export const Default: ButtonGroupStory = { export const Size: ButtonGroupStory = { - storyName: "size", + name: "size", render: () => ( <Inline alignY="end"> <ButtonGroup orientation="vertical" size="sm"> @@ -43,7 +45,7 @@ export const Size: ButtonGroupStory = { export const Align: ButtonGroupStory = { - storyName: "align", + name: "align", render: () => ( <Stack> <Inline> @@ -69,7 +71,7 @@ export const Align: ButtonGroupStory = { }; export const Zoom: ButtonGroupStory = { - storyName: "zoom", + name: "zoom", render: () => ( <Inline> <Div className="zoom-in"> diff --git a/packages/components/src/button/tests/chromatic/ButtonGroupVertical.stories.tsx b/packages/components/src/button/tests/chromatic/ButtonGroupVertical.stories.tsx index 3ca2cc4c3..ea4cdfd09 100644 --- a/packages/components/src/button/tests/chromatic/ButtonGroupVertical.stories.tsx +++ b/packages/components/src/button/tests/chromatic/ButtonGroupVertical.stories.tsx @@ -2,17 +2,19 @@ import { Button, ButtonGroup } from "@components/button"; import { Div } from "@components/html"; import { Inline, Stack } from "@components/layout"; import { TextLinkAsButton } from "@components/link"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { component: ButtonGroup, title: "Chromatic/ButtonGroup/vertical" -} as ComponentMeta<typeof ButtonGroup>; +} as Meta<typeof ButtonGroup>; -type ButtonGroupStory = ComponentStoryObj<typeof ButtonGroup>; +export default meta; + +type ButtonGroupStory = StoryObj<typeof meta>; export const Default: ButtonGroupStory = { - storyName: "default", + name: "default", render: () => ( <ButtonGroup orientation="vertical"> <Button variant="secondary">Cutoff</Button> @@ -24,7 +26,7 @@ export const Default: ButtonGroupStory = { export const Size: ButtonGroupStory = { - storyName: "size", + name: "size", render: () => ( <Inline alignY="end"> <ButtonGroup orientation="vertical" size="sm"> @@ -43,7 +45,7 @@ export const Size: ButtonGroupStory = { export const Align: ButtonGroupStory = { - storyName: "align", + name: "align", render: () => ( <Stack> <Inline> @@ -69,7 +71,7 @@ export const Align: ButtonGroupStory = { }; export const Zoom: ButtonGroupStory = { - storyName: "zoom", + name: "zoom", render: () => ( <Inline> <Div className="zoom-in"> diff --git a/packages/components/src/button/tests/chromatic/CrossButton-hopper.stories.tsx b/packages/components/src/button/tests/chromatic/CrossButton-hopper.stories.tsx index 0e32424d2..c587d715b 100644 --- a/packages/components/src/button/tests/chromatic/CrossButton-hopper.stories.tsx +++ b/packages/components/src/button/tests/chromatic/CrossButton-hopper.stories.tsx @@ -1,16 +1,18 @@ import { CrossButton } from "@components/button"; import { Inline } from "@components/layout"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/CrossButton-hopper", component: CrossButton -} as ComponentMeta<typeof CrossButton>; +} as Meta<typeof CrossButton>; -type CrossButtonStory = ComponentStoryObj<typeof CrossButton>; +export default meta; + +type CrossButtonStory = StoryObj<typeof meta>; export const Default: CrossButtonStory = { - storyName: "default", + name: "default", render: () => ( <Inline alignY="end"> <CrossButton size="sm" aria-label="Clear" /> diff --git a/packages/components/src/button/tests/chromatic/CrossButton.stories.tsx b/packages/components/src/button/tests/chromatic/CrossButton.stories.tsx index d396663a7..eeb98f24f 100644 --- a/packages/components/src/button/tests/chromatic/CrossButton.stories.tsx +++ b/packages/components/src/button/tests/chromatic/CrossButton.stories.tsx @@ -1,16 +1,18 @@ import { CrossButton } from "@components/button"; import { Inline } from "@components/layout"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/CrossButton", component: CrossButton -} as ComponentMeta<typeof CrossButton>; +} as Meta<typeof CrossButton>; -type CrossButtonStory = ComponentStoryObj<typeof CrossButton>; +export default meta; + +type CrossButtonStory = StoryObj<typeof meta>; export const Default: CrossButtonStory = { - storyName: "default", + name: "default", render: () => ( <Inline alignY="end"> <CrossButton size="sm" aria-label="Clear" /> diff --git a/packages/components/src/checkbox/tests/chromatic/CheckboxGroup.stories.tsx b/packages/components/src/checkbox/tests/chromatic/CheckboxGroup.stories.tsx index 7b20e7a79..06ddc7338 100644 --- a/packages/components/src/checkbox/tests/chromatic/CheckboxGroup.stories.tsx +++ b/packages/components/src/checkbox/tests/chromatic/CheckboxGroup.stories.tsx @@ -5,9 +5,9 @@ import { Tag, TagProps } from "@components/tag"; import { ToggleButton } from "@components/button"; import { useCallback } from "react"; import { useCheckableProps } from "@components/shared"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/CheckboxGroup", component: CheckboxGroup, parameters: { @@ -15,9 +15,11 @@ export default { delay: 100 } } -} as ComponentMeta<typeof CheckboxGroup>; +} as Meta<typeof CheckboxGroup>; -type CheckboxGroupStory = ComponentStoryObj<typeof CheckboxGroup>; +export default meta; + +type CheckboxGroupStory = StoryObj<typeof meta>; function CustomComponent({ value, @@ -46,7 +48,7 @@ function CustomComponent({ } export const Default: CheckboxGroupStory = { - storyName: "default", + name: "default", render: () => ( <Stack> <CheckboxGroup size="sm"> @@ -64,7 +66,7 @@ export const Default: CheckboxGroupStory = { }; export const Selection: CheckboxGroupStory = { - storyName: "selection", + name: "selection", render: () => ( <Stack> <CheckboxGroup value={[]}> @@ -87,7 +89,7 @@ export const Selection: CheckboxGroupStory = { }; export const Number: CheckboxGroupStory = { - storyName: "number", + name: "number", render: () => ( <CheckboxGroup defaultValue={["2"]}> <Checkbox value="1">1</Checkbox> @@ -99,7 +101,7 @@ export const Number: CheckboxGroupStory = { export const Disabled: CheckboxGroupStory = { - storyName: "disabled", + name: "disabled", render: () => ( <CheckboxGroup disabled> <Checkbox value="1">1</Checkbox> @@ -110,7 +112,7 @@ export const Disabled: CheckboxGroupStory = { }; export const Gap: CheckboxGroupStory = { - storyName: "gap", + name: "gap", render: () => ( <CheckboxGroup gap={800}> <Checkbox value="1">1</Checkbox> @@ -121,7 +123,7 @@ export const Gap: CheckboxGroupStory = { }; export const Wrap: CheckboxGroupStory = { - storyName: "wrap", + name: "wrap", render: () => ( <Div width={800}> <CheckboxGroup wrap> @@ -136,7 +138,7 @@ export const Wrap: CheckboxGroupStory = { }; export const NoWrap: CheckboxGroupStory = { - storyName: "no wrap", + name: "no wrap", render: () => ( <Div width={800}> <CheckboxGroup wrap={false}> @@ -152,7 +154,7 @@ export const NoWrap: CheckboxGroupStory = { export const WrapOverflow: CheckboxGroupStory = { - storyName: "wrap overflow", + name: "wrap overflow", render: () => ( <Div width={960}> <CheckboxGroup wrap> @@ -167,7 +169,7 @@ export const WrapOverflow: CheckboxGroupStory = { }; export const ToggleButtons: CheckboxGroupStory = { - storyName: "toggle buttons", + name: "toggle buttons", render: () => ( <CheckboxGroup gap={80} defaultValue={["2"]}> <ToggleButton variant="secondary" value="1">1</ToggleButton> @@ -178,7 +180,7 @@ export const ToggleButtons: CheckboxGroupStory = { }; export const CustomComponents: CheckboxGroupStory = { - storyName: "custom components", + name: "custom components", render: () => ( <CheckboxGroup gap={80} defaultValue={["2"]}> <CustomComponent value="1">1</CustomComponent> @@ -189,7 +191,7 @@ export const CustomComponents: CheckboxGroupStory = { }; export const Validation: CheckboxGroupStory = { - storyName: "validation", + name: "validation", render: () => ( <Inline gap={800}> <CheckboxGroup validationState="invalid"> @@ -207,7 +209,7 @@ export const Validation: CheckboxGroupStory = { }; export const Styling: CheckboxGroupStory = { - storyName: "styling", + name: "styling", render: () => ( <Inline> <CheckboxGroup border="warning"> @@ -231,7 +233,7 @@ export const Styling: CheckboxGroupStory = { export const Reverse: CheckboxGroupStory = { - storyName: "reverse", + name: "reverse", render: () => ( <Stack inline> <CheckboxGroup reverse aria-label="Select your packages"> @@ -249,7 +251,7 @@ export const Reverse: CheckboxGroupStory = { }; export const Zoom: CheckboxGroupStory = { - storyName: "zoom", + name: "zoom", render: () => ( <Stack> <Div className="zoom-in"> diff --git a/packages/components/src/checkbox/tests/chromatic/CheckboxGroupVertical.stories.tsx b/packages/components/src/checkbox/tests/chromatic/CheckboxGroupVertical.stories.tsx index ab063fc1e..09feee618 100644 --- a/packages/components/src/checkbox/tests/chromatic/CheckboxGroupVertical.stories.tsx +++ b/packages/components/src/checkbox/tests/chromatic/CheckboxGroupVertical.stories.tsx @@ -1,9 +1,9 @@ import { Checkbox, CheckboxGroup } from "@components/checkbox"; import { Div } from "@components/html"; import { Inline, Stack } from "@components/layout"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/CheckboxGroup/vertical", component: CheckboxGroup, parameters: { @@ -11,13 +11,15 @@ export default { delay: 100 } } -} as ComponentMeta<typeof CheckboxGroup>; +} as Meta<typeof CheckboxGroup>; -type CheckboxGroupStory = ComponentStoryObj<typeof CheckboxGroup>; +export default meta; + +type CheckboxGroupStory = StoryObj<typeof meta>; export const Default: CheckboxGroupStory = { - storyName: "default", + name: "default", render: () => ( <CheckboxGroup orientation="vertical"> <Checkbox value="1">1</Checkbox> @@ -28,7 +30,7 @@ export const Default: CheckboxGroupStory = { }; export const Size: CheckboxGroupStory = { - storyName: "size", + name: "size", render: () => ( <Inline alignY="end" gap={800}> <CheckboxGroup size="sm" orientation="vertical"> @@ -46,7 +48,7 @@ export const Size: CheckboxGroupStory = { }; export const Reverse: CheckboxGroupStory = { - storyName: "reverse", + name: "reverse", render: () => ( <CheckboxGroup reverse orientation="vertical"> <Checkbox value="1">1</Checkbox> @@ -57,7 +59,7 @@ export const Reverse: CheckboxGroupStory = { }; export const Zoom: CheckboxGroupStory = { - storyName: "zoom", + name: "zoom", render: () => ( <Stack> <Div className="zoom-in"> diff --git a/packages/components/src/counter/tests/chromatic/Counter.stories.tsx b/packages/components/src/counter/tests/chromatic/Counter.stories.tsx index b2302e3b6..a69618901 100644 --- a/packages/components/src/counter/tests/chromatic/Counter.stories.tsx +++ b/packages/components/src/counter/tests/chromatic/Counter.stories.tsx @@ -2,17 +2,19 @@ import { Counter } from "@components/counter"; import { Div } from "@components/html"; import { Inline, Stack } from "@components/layout"; import { Text } from "@components/typography"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/Counter", component: Counter -} as ComponentMeta<typeof Counter>; +} as Meta<typeof Counter>; -type CounterStory = ComponentStoryObj<typeof Counter>; +export default meta; + +type CounterStory = StoryObj<typeof meta>; export const Default: CounterStory = { - storyName: "default", + name: "default", render: () => ( <Stack> <Inline alignY="center"> @@ -38,7 +40,7 @@ export const Default: CounterStory = { }; export const Divider: CounterStory = { - storyName: "divider", + name: "divider", render: () => ( <Stack> <Inline alignY="center"> @@ -64,7 +66,7 @@ export const Divider: CounterStory = { }; export const Pushed: CounterStory = { - storyName: "pushed", + name: "pushed", render: () => ( <Stack> <Div> @@ -80,7 +82,7 @@ export const Pushed: CounterStory = { }; export const Reverse: CounterStory = { - storyName: "reverse", + name: "reverse", render: () => ( <Stack> <Div> @@ -96,7 +98,7 @@ export const Reverse: CounterStory = { }; export const Color: CounterStory = { - storyName: "color", + name: "color", render: () => ( <Inline color="sunken-treasure-700" backgroundColor="koi-25" alignY="center"> <Counter color="inherit">15</Counter> @@ -107,7 +109,7 @@ export const Color: CounterStory = { export const Highlight: CounterStory = { - storyName: "highlight", + name: "highlight", render: () => ( <Inline alignY="center"> <Counter highlight>15</Counter> @@ -117,7 +119,7 @@ export const Highlight: CounterStory = { }; export const Disabled: CounterStory = { - storyName: "disabled", + name: "disabled", render: () => ( <Inline alignY="center"> <Counter disabled>15</Counter> @@ -127,7 +129,7 @@ export const Disabled: CounterStory = { }; export const Zoom: CounterStory = { - storyName: "zoom", + name: "zoom", render: () => ( <Stack> <Div className="zoom-in"> @@ -147,7 +149,7 @@ export const Zoom: CounterStory = { }; export const Styling: CounterStory = { - storyName: "styling", + name: "styling", render: () => ( <Stack> <Inline alignY="center"> diff --git a/packages/components/src/dialog/tests/chromatic/Dialog-hopper.stories.tsx b/packages/components/src/dialog/tests/chromatic/Dialog-hopper.stories.tsx index 56fae466a..fd0480fdb 100644 --- a/packages/components/src/dialog/tests/chromatic/Dialog-hopper.stories.tsx +++ b/packages/components/src/dialog/tests/chromatic/Dialog-hopper.stories.tsx @@ -6,17 +6,19 @@ import { Dialog } from "@components/dialog"; import { Div } from "@components/html"; import { Illustration } from "@components/illustration"; import { Image } from "@components/image"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/Dialog-hopper", component: Dialog -} as ComponentMeta<typeof Dialog>; +} as Meta<typeof Dialog>; -type DialogStory = ComponentStoryObj<typeof Dialog>; +export default meta; + +type DialogStory = StoryObj<typeof meta>; export const Default: DialogStory = { - storyName: "default", + name: "default", render: () => ( <Dialog> <Heading>Iconic Arecibo Observatory collapses</Heading> @@ -30,7 +32,7 @@ export const Default: DialogStory = { }; export const TextHeader: DialogStory = { - storyName: "text header", + name: "text header", render: () => ( <Dialog> <Heading>Iconic Arecibo Observatory collapses</Heading> @@ -45,7 +47,7 @@ export const TextHeader: DialogStory = { }; export const LinkHeader: DialogStory = { - storyName: "link header", + name: "link header", render: () => ( <Dialog> <Heading>Iconic Arecibo Observatory collapses</Heading> @@ -62,7 +64,7 @@ export const LinkHeader: DialogStory = { }; export const TextFooter: DialogStory = { - storyName: "text footer", + name: "text footer", render: () => ( <Dialog> <Heading>Iconic Arecibo Observatory collapses</Heading> @@ -77,7 +79,7 @@ export const TextFooter: DialogStory = { }; export const LinkFooter: DialogStory = { - storyName: "link footer", + name: "link footer", render: () => ( <Dialog> <Heading>Iconic Arecibo Observatory collapses</Heading> @@ -94,7 +96,7 @@ export const LinkFooter: DialogStory = { }; export const DialogButton: DialogStory = { - storyName: "button", + name: "button", render: () => ( <Dialog> <Heading>Iconic Arecibo Observatory collapses</Heading> @@ -110,7 +112,7 @@ export const DialogButton: DialogStory = { export const DialogButtonGroup: DialogStory = { - storyName: "button group", + name: "button group", render: () => ( <Dialog> <Heading>Iconic Arecibo Observatory collapses</Heading> @@ -128,7 +130,7 @@ export const DialogButtonGroup: DialogStory = { }; export const FooterButtonGroup: DialogStory = { - storyName: "footer & button group", + name: "footer & button group", render: () => ( <Dialog> <Heading>Iconic Arecibo Observatory collapses</Heading> @@ -147,7 +149,7 @@ export const FooterButtonGroup: DialogStory = { }; export const ImageTooSmall: DialogStory = { - storyName: "image too small", + name: "image too small", render: () => ( <Dialog> <Image src={Apollo11Poster} alt="Apollo 11" /> @@ -162,7 +164,7 @@ export const ImageTooSmall: DialogStory = { }; export const ImageTooBig: DialogStory = { - storyName: "image too big", + name: "image too big", render: () => ( <Dialog> <Image src={TheMartianPoster} alt="The Martian" /> @@ -177,7 +179,7 @@ export const ImageTooBig: DialogStory = { }; export const DialogIllustration: DialogStory = { - storyName: "illustration", + name: "illustration", render: () => ( <Dialog> <Illustration color="sunken-treasure-100"> @@ -194,7 +196,7 @@ export const DialogIllustration: DialogStory = { }; export const AllSections: DialogStory = { - storyName: "all sections", + name: "all sections", render: () => ( <Dialog> <Illustration color="sunken-treasure-100"> @@ -219,7 +221,7 @@ export const AllSections: DialogStory = { }; export const HeadingOverflow: DialogStory = { - storyName: "heading overflow", + name: "heading overflow", render: () => ( <Dialog> <Heading>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas finibus a purus sit amet volutpat. Ut ac mauris sit amet elit rhoncus dictum. Morbi vehicula, tortor eget congue porta, mi ipsum interdum lectus, non lobortis dui nulla sed nisi.</Heading> @@ -233,7 +235,7 @@ export const HeadingOverflow: DialogStory = { }; export const HeaderOverflow: DialogStory = { - storyName: "header overflow", + name: "header overflow", render: () => ( <Dialog> <Heading>Iconic Arecibo Observatory collapses</Heading> @@ -248,7 +250,7 @@ export const HeaderOverflow: DialogStory = { }; export const FooterOverflow: DialogStory = { - storyName: "footer overflow", + name: "footer overflow", render: () => ( <Dialog> <Heading>Iconic Arecibo Observatory collapses</Heading> @@ -267,7 +269,7 @@ export const FooterOverflow: DialogStory = { }; export const ButtonOverflow: DialogStory = { - storyName: "button overflow", + name: "button overflow", render: () => ( <Dialog> <Heading>Iconic Arecibo Observatory collapses</Heading> @@ -286,7 +288,7 @@ export const ButtonOverflow: DialogStory = { }; export const EverythingOverflow: DialogStory = { - storyName: "everything overflow", + name: "everything overflow", render: () => ( <Dialog> <Heading>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas finibus a purus sit amet volutpat. Ut ac mauris sit amet elit rhoncus dictum. Morbi vehicula, tortor eget congue porta, mi ipsum interdum lectus, non lobortis dui nulla sed nisi.</Heading> @@ -307,7 +309,7 @@ export const EverythingOverflow: DialogStory = { }; export const NotDismissable: DialogStory = { - storyName: "not dismissable", + name: "not dismissable", render: () => ( <Dialog dismissable={false}> <Heading>Iconic Arecibo Observatory collapses</Heading> @@ -321,7 +323,7 @@ export const NotDismissable: DialogStory = { }; export const Small: DialogStory = { - storyName: "small", + name: "small", render: () => ( <Dialog size="sm"> <Heading>Iconic Arecibo Observatory collapses</Heading> @@ -339,7 +341,7 @@ export const Small: DialogStory = { }; export const Medium: DialogStory = { - storyName: "medium", + name: "medium", render: () => ( <Dialog size="md"> <Heading>Iconic Arecibo Observatory collapses</Heading> @@ -357,7 +359,7 @@ export const Medium: DialogStory = { }; export const Large: DialogStory = { - storyName: "large", + name: "large", render: () => ( <Dialog size="lg"> <Heading>Iconic Arecibo Observatory collapses</Heading> @@ -375,7 +377,7 @@ export const Large: DialogStory = { }; export const NoAutofocus: DialogStory = { - storyName: "do not autofocus an element which is not in the initial viewport", + name: "do not autofocus an element which is not in the initial viewport", render: () => ( <Dialog> <Heading>Iconic Arecibo Observatory collapses</Heading> @@ -401,7 +403,7 @@ export const NoAutofocus: DialogStory = { }; export const Focused: DialogStory = { - storyName: "focused", + name: "focused", render: () => ( <Dialog focus> <Heading>Iconic Arecibo Observatory collapses</Heading> @@ -415,7 +417,7 @@ export const Focused: DialogStory = { }; export const WrapperStyledSystem: DialogStory = { - storyName: "wrapper styled system", + name: "wrapper styled system", render: () => ( <Dialog wrapperProps={{ border: "sunken-treasure-700" }}> <Heading>Iconic Arecibo Observatory collapses</Heading> @@ -429,7 +431,7 @@ export const WrapperStyledSystem: DialogStory = { }; export const WrapperClassName: DialogStory = { - storyName: "wrapper className", + name: "wrapper className", render: () => ( <Dialog wrapperProps={{ className: "border-red" }}> <Heading>Iconic Arecibo Observatory collapses</Heading> @@ -443,7 +445,7 @@ export const WrapperClassName: DialogStory = { }; export const WrapperStyle: DialogStory = { - storyName: "wrapper style", + name: "wrapper style", render: () => ( <Dialog wrapperProps={{ style: { border: "1px solid red" } }}> <Heading>Iconic Arecibo Observatory collapses</Heading> @@ -457,7 +459,7 @@ export const WrapperStyle: DialogStory = { }; export const StyledSystem: DialogStory = { - storyName: "styled system", + name: "styled system", render: () => ( <Dialog border="warning"> <Heading>Iconic Arecibo Observatory collapses</Heading> @@ -471,7 +473,7 @@ export const StyledSystem: DialogStory = { }; export const ClassName: DialogStory = { - storyName: "className", + name: "className", render: () => ( <Dialog className="border-red"> <Heading>Iconic Arecibo Observatory collapses</Heading> @@ -485,7 +487,7 @@ export const ClassName: DialogStory = { }; export const ZoomIn: DialogStory = { - storyName: "zoom in", + name: "zoom in", render: () => ( <Div className="zoom-in"> <Dialog> @@ -501,7 +503,7 @@ export const ZoomIn: DialogStory = { }; export const ZoomOut: DialogStory = { - storyName: "zoom out", + name: "zoom out", render: () => ( <Div className="zoom-out"> <Dialog> @@ -517,7 +519,7 @@ export const ZoomOut: DialogStory = { }; export const Style: DialogStory = { - storyName: "style", + name: "style", render: () => ( <Dialog style={{ border: "1px solid red" }}> <Heading>Iconic Arecibo Observatory collapses</Heading> diff --git a/packages/components/src/dialog/tests/chromatic/Dialog.stories.tsx b/packages/components/src/dialog/tests/chromatic/Dialog.stories.tsx index 8a3323ae8..893e78f61 100644 --- a/packages/components/src/dialog/tests/chromatic/Dialog.stories.tsx +++ b/packages/components/src/dialog/tests/chromatic/Dialog.stories.tsx @@ -7,17 +7,19 @@ import { Div } from "@components/html"; import { Illustration } from "@components/illustration"; import { Image } from "@components/image"; import { TextLink } from "@components/link"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/Dialog", component: Dialog -} as ComponentMeta<typeof Dialog>; +} as Meta<typeof Dialog>; -type DialogStory = ComponentStoryObj<typeof Dialog>; +export default meta; + +type DialogStory = StoryObj<typeof meta>; export const Default: DialogStory = { - storyName: "default", + name: "default", render: () => ( <Dialog> <Heading>Iconic Arecibo Observatory collapses</Heading> @@ -31,7 +33,7 @@ export const Default: DialogStory = { }; export const TextHeader: DialogStory = { - storyName: "text header", + name: "text header", render: () => ( <Dialog> <Heading>Iconic Arecibo Observatory collapses</Heading> @@ -46,7 +48,7 @@ export const TextHeader: DialogStory = { }; export const LinkHeader: DialogStory = { - storyName: "link header", + name: "link header", render: () => ( <Dialog> <Heading>Iconic Arecibo Observatory collapses</Heading> @@ -63,7 +65,7 @@ export const LinkHeader: DialogStory = { }; export const TextFooter: DialogStory = { - storyName: "text footer", + name: "text footer", render: () => ( <Dialog> <Heading>Iconic Arecibo Observatory collapses</Heading> @@ -78,7 +80,7 @@ export const TextFooter: DialogStory = { }; export const LinkFooter: DialogStory = { - storyName: "link footer", + name: "link footer", render: () => ( <Dialog> <Heading>Iconic Arecibo Observatory collapses</Heading> @@ -95,7 +97,7 @@ export const LinkFooter: DialogStory = { }; export const DialogButton: DialogStory = { - storyName: "button", + name: "button", render: () => ( <Dialog> <Heading>Iconic Arecibo Observatory collapses</Heading> @@ -111,7 +113,7 @@ export const DialogButton: DialogStory = { export const DialogButtonGroup: DialogStory = { - storyName: "button group", + name: "button group", render: () => ( <Dialog> <Heading>Iconic Arecibo Observatory collapses</Heading> @@ -129,7 +131,7 @@ export const DialogButtonGroup: DialogStory = { }; export const FooterButtonGroup: DialogStory = { - storyName: "footer & button group", + name: "footer & button group", render: () => ( <Dialog> <Heading>Iconic Arecibo Observatory collapses</Heading> @@ -148,7 +150,7 @@ export const FooterButtonGroup: DialogStory = { }; export const ImageTooSmall: DialogStory = { - storyName: "image too small", + name: "image too small", render: () => ( <Dialog> <Image src={Apollo11Poster} alt="Apollo 11" /> @@ -163,7 +165,7 @@ export const ImageTooSmall: DialogStory = { }; export const ImageTooBig: DialogStory = { - storyName: "image too big", + name: "image too big", render: () => ( <Dialog> <Image src={TheMartianPoster} alt="The Martian" /> @@ -178,7 +180,7 @@ export const ImageTooBig: DialogStory = { }; export const DialogIllustration: DialogStory = { - storyName: "illustration", + name: "illustration", render: () => ( <Dialog> <Illustration color="sunken-treasure-100"> @@ -195,7 +197,7 @@ export const DialogIllustration: DialogStory = { }; export const AllSections: DialogStory = { - storyName: "all sections", + name: "all sections", render: () => ( <Dialog> <Illustration color="sunken-treasure-100"> @@ -220,7 +222,7 @@ export const AllSections: DialogStory = { }; export const HeadingOverflow: DialogStory = { - storyName: "heading overflow", + name: "heading overflow", render: () => ( <Dialog> <Heading>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas finibus a purus sit amet volutpat. Ut ac mauris sit amet elit rhoncus dictum. Morbi vehicula, tortor eget congue porta, mi ipsum interdum lectus, non lobortis dui nulla sed nisi.</Heading> @@ -234,7 +236,7 @@ export const HeadingOverflow: DialogStory = { }; export const HeaderOverflow: DialogStory = { - storyName: "header overflow", + name: "header overflow", render: () => ( <Dialog> <Heading>Iconic Arecibo Observatory collapses</Heading> @@ -249,7 +251,7 @@ export const HeaderOverflow: DialogStory = { }; export const FooterOverflow: DialogStory = { - storyName: "footer overflow", + name: "footer overflow", render: () => ( <Dialog> <Heading>Iconic Arecibo Observatory collapses</Heading> @@ -268,7 +270,7 @@ export const FooterOverflow: DialogStory = { }; export const ButtonOverflow: DialogStory = { - storyName: "button overflow", + name: "button overflow", render: () => ( <Dialog> <Heading>Iconic Arecibo Observatory collapses</Heading> @@ -287,7 +289,7 @@ export const ButtonOverflow: DialogStory = { }; export const EverythingOverflow: DialogStory = { - storyName: "everything overflow", + name: "everything overflow", render: () => ( <Dialog> <Heading>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas finibus a purus sit amet volutpat. Ut ac mauris sit amet elit rhoncus dictum. Morbi vehicula, tortor eget congue porta, mi ipsum interdum lectus, non lobortis dui nulla sed nisi.</Heading> @@ -308,7 +310,7 @@ export const EverythingOverflow: DialogStory = { }; export const NotDismissable: DialogStory = { - storyName: "not dismissable", + name: "not dismissable", render: () => ( <Dialog dismissable={false}> <Heading>Iconic Arecibo Observatory collapses</Heading> @@ -322,7 +324,7 @@ export const NotDismissable: DialogStory = { }; export const Small: DialogStory = { - storyName: "small", + name: "small", render: () => ( <Dialog size="sm"> <Heading>Iconic Arecibo Observatory collapses</Heading> @@ -340,7 +342,7 @@ export const Small: DialogStory = { }; export const Medium: DialogStory = { - storyName: "medium", + name: "medium", render: () => ( <Dialog size="md"> <Heading>Iconic Arecibo Observatory collapses</Heading> @@ -358,7 +360,7 @@ export const Medium: DialogStory = { }; export const Large: DialogStory = { - storyName: "large", + name: "large", render: () => ( <Dialog size="lg"> <Heading>Iconic Arecibo Observatory collapses</Heading> @@ -376,7 +378,7 @@ export const Large: DialogStory = { }; export const NoAutofocus: DialogStory = { - storyName: "do not autofocus an element which is not in the initial viewport", + name: "do not autofocus an element which is not in the initial viewport", render: () => ( <Dialog> <Heading>Iconic Arecibo Observatory collapses</Heading> @@ -402,7 +404,7 @@ export const NoAutofocus: DialogStory = { }; export const Focused: DialogStory = { - storyName: "focused", + name: "focused", render: () => ( <Dialog focus> <Heading>Iconic Arecibo Observatory collapses</Heading> @@ -416,7 +418,7 @@ export const Focused: DialogStory = { }; export const WrapperStyledSystem: DialogStory = { - storyName: "wrapper styled system", + name: "wrapper styled system", render: () => ( <Dialog wrapperProps={{ border: "sunken-treasure-700" }}> <Heading>Iconic Arecibo Observatory collapses</Heading> @@ -430,7 +432,7 @@ export const WrapperStyledSystem: DialogStory = { }; export const WrapperClassName: DialogStory = { - storyName: "wrapper className", + name: "wrapper className", render: () => ( <Dialog wrapperProps={{ className: "border-red" }}> <Heading>Iconic Arecibo Observatory collapses</Heading> @@ -444,7 +446,7 @@ export const WrapperClassName: DialogStory = { }; export const WrapperStyle: DialogStory = { - storyName: "wrapper style", + name: "wrapper style", render: () => ( <Dialog wrapperProps={{ style: { border: "1px solid red" } }}> <Heading>Iconic Arecibo Observatory collapses</Heading> @@ -458,7 +460,7 @@ export const WrapperStyle: DialogStory = { }; export const StyledSystem: DialogStory = { - storyName: "styled system", + name: "styled system", render: () => ( <Dialog border="warning"> <Heading>Iconic Arecibo Observatory collapses</Heading> @@ -472,7 +474,7 @@ export const StyledSystem: DialogStory = { }; export const ClassName: DialogStory = { - storyName: "className", + name: "className", render: () => ( <Dialog className="border-red"> <Heading>Iconic Arecibo Observatory collapses</Heading> @@ -486,7 +488,7 @@ export const ClassName: DialogStory = { }; export const ZoomIn: DialogStory = { - storyName: "zoom in", + name: "zoom in", render: () => ( <Div className="zoom-in"> <Dialog> @@ -502,7 +504,7 @@ export const ZoomIn: DialogStory = { }; export const ZoomOut: DialogStory = { - storyName: "zoom out", + name: "zoom out", render: () => ( <Div className="zoom-out"> <Dialog> @@ -518,7 +520,7 @@ export const ZoomOut: DialogStory = { }; export const Style: DialogStory = { - storyName: "style", + name: "style", render: () => ( <Dialog style={{ border: "1px solid red" }}> <Heading>Iconic Arecibo Observatory collapses</Heading> diff --git a/packages/components/src/dialog/tests/chromatic/DialogTrigger-hopper.stories.tsx b/packages/components/src/dialog/tests/chromatic/DialogTrigger-hopper.stories.tsx index 9a0231d79..9b48db4f0 100644 --- a/packages/components/src/dialog/tests/chromatic/DialogTrigger-hopper.stories.tsx +++ b/packages/components/src/dialog/tests/chromatic/DialogTrigger-hopper.stories.tsx @@ -2,9 +2,9 @@ import { Heading, Button } from "@hopper-ui/components"; import { Content } from "@components/placeholders"; import { Dialog, DialogTrigger } from "@components/dialog"; import { Paragraph } from "@components/typography"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/DialogTrigger-hopper", component: DialogTrigger, parameters: { @@ -13,12 +13,14 @@ export default { chromaticPauseAnimationAtEnd: true } } -} as ComponentMeta<typeof DialogTrigger>; +} as Meta<typeof DialogTrigger>; -type DialogTriggerStory = ComponentStoryObj<typeof DialogTrigger>; +export default meta; + +type DialogTriggerStory = StoryObj<typeof meta>; export const Default: DialogTriggerStory = { - storyName: "default", + name: "default", render: () => ( <DialogTrigger> <Button variant="secondary">Open</Button> @@ -35,7 +37,7 @@ export const Default: DialogTriggerStory = { }; export const DefaultOpen: DialogTriggerStory = { - storyName: "default open", + name: "default open", render: () => ( <DialogTrigger defaultOpen> <Button variant="secondary">Open</Button> @@ -53,7 +55,7 @@ export const DefaultOpen: DialogTriggerStory = { export const NotDismissable: DialogTriggerStory = { - storyName: "not dismissable", + name: "not dismissable", render: () => ( <DialogTrigger dismissable={false} defaultOpen> <Button variant="secondary">Open</Button> @@ -70,7 +72,7 @@ export const NotDismissable: DialogTriggerStory = { }; export const FunctionalContent: DialogTriggerStory = { - storyName: "functional content", + name: "functional content", render: () => ( <DialogTrigger defaultOpen> {(() => { diff --git a/packages/components/src/dialog/tests/chromatic/DialogTrigger.stories.tsx b/packages/components/src/dialog/tests/chromatic/DialogTrigger.stories.tsx index 37b2bcd82..d29104e67 100644 --- a/packages/components/src/dialog/tests/chromatic/DialogTrigger.stories.tsx +++ b/packages/components/src/dialog/tests/chromatic/DialogTrigger.stories.tsx @@ -2,9 +2,9 @@ import { Button } from "@components/button"; import { Content } from "@components/placeholders"; import { Dialog, DialogTrigger } from "@components/dialog"; import { Heading, Paragraph } from "@components/typography"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/DialogTrigger", component: DialogTrigger, parameters: { @@ -13,12 +13,14 @@ export default { chromaticPauseAnimationAtEnd: true } } -} as ComponentMeta<typeof DialogTrigger>; +} as Meta<typeof DialogTrigger>; -type DialogTriggerStory = ComponentStoryObj<typeof DialogTrigger>; +export default meta; + +type DialogTriggerStory = StoryObj<typeof meta>; export const Default: DialogTriggerStory = { - storyName: "default", + name: "default", render: () => ( <DialogTrigger> <Button variant="secondary">Open</Button> @@ -35,7 +37,7 @@ export const Default: DialogTriggerStory = { }; export const DefaultOpen: DialogTriggerStory = { - storyName: "default open", + name: "default open", render: () => ( <DialogTrigger defaultOpen> <Button variant="secondary">Open</Button> @@ -53,7 +55,7 @@ export const DefaultOpen: DialogTriggerStory = { export const NotDismissable: DialogTriggerStory = { - storyName: "not dismissable", + name: "not dismissable", render: () => ( <DialogTrigger dismissable={false} defaultOpen> <Button variant="secondary">Open</Button> @@ -70,7 +72,7 @@ export const NotDismissable: DialogTriggerStory = { }; export const FunctionalContent: DialogTriggerStory = { - storyName: "functional content", + name: "functional content", render: () => ( <DialogTrigger defaultOpen> {(() => { diff --git a/packages/components/src/disclosure/tests/chromatic/Disclosure.stories.tsx b/packages/components/src/disclosure/tests/chromatic/Disclosure.stories.tsx index 859af0ab5..1168f32d5 100644 --- a/packages/components/src/disclosure/tests/chromatic/Disclosure.stories.tsx +++ b/packages/components/src/disclosure/tests/chromatic/Disclosure.stories.tsx @@ -4,14 +4,16 @@ import { ArrowDownIcon, ArrowRightIcon } from "@hopper-ui/icons"; import { Button } from "@components/button"; import { Div } from "@components/html"; import { TextLinkAsButton } from "@components/link"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/Disclosure", component: Disclosure -} as ComponentMeta<typeof Disclosure>; +} as Meta<typeof Disclosure>; -type DisclosureStory = ComponentStoryObj<typeof Disclosure>; +export default meta; + +type DisclosureStory = StoryObj<typeof meta>; const Trigger = ({ children, ...rest }: FlexProps) => { const { isOpen } = useDisclosureContext(); @@ -28,7 +30,7 @@ const Trigger = ({ children, ...rest }: FlexProps) => { }; export const Default: DisclosureStory = { - storyName: "default", + name: "default", render: () => ( <Disclosure> <Button variant="secondary">Mars</Button> @@ -43,7 +45,7 @@ export const Default: DisclosureStory = { }; export const Opened: DisclosureStory = { - storyName: "opened", + name: "opened", render: () => ( <Stack> <Disclosure open> @@ -59,7 +61,7 @@ export const Opened: DisclosureStory = { }; export const CustomTrigger: DisclosureStory = { - storyName: "custom trigger", + name: "custom trigger", render: () => ( <Stack> <Disclosure> @@ -75,7 +77,7 @@ export const CustomTrigger: DisclosureStory = { }; export const TextLink: DisclosureStory = { - storyName: "text link", + name: "text link", render: () => ( <Disclosure> <TextLinkAsButton>Mars</TextLinkAsButton> @@ -85,7 +87,7 @@ export const TextLink: DisclosureStory = { }; export const FunctionalContent: DisclosureStory = { - storyName: "functional content", + name: "functional content", render: () => ( <Disclosure defaultOpen> {(() => { diff --git a/packages/components/src/disclosure/tests/chromatic/DisclosureArrow.stories.tsx b/packages/components/src/disclosure/tests/chromatic/DisclosureArrow.stories.tsx index 702d3183f..32c152ddb 100644 --- a/packages/components/src/disclosure/tests/chromatic/DisclosureArrow.stories.tsx +++ b/packages/components/src/disclosure/tests/chromatic/DisclosureArrow.stories.tsx @@ -1,8 +1,8 @@ import { DisclosureArrow, DisclosureContext } from "@components/disclosure"; import { Inline } from "@components/layout"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/DisclosureArrow", component: DisclosureArrow, parameters: { @@ -10,19 +10,21 @@ export default { delay: 100 } } -} as ComponentMeta<typeof DisclosureArrow>; +} as Meta<typeof DisclosureArrow>; -type DisclosureArrowStory = ComponentStoryObj<typeof DisclosureArrow>; +export default meta; + +type DisclosureArrowStory = StoryObj<typeof meta>; export const Default:DisclosureArrowStory = { - storyName: "default", + name: "default", render: () => ( <DisclosureArrow open /> ) }; export const Controlled:DisclosureArrowStory = { - storyName: "controlled", + name: "controlled", render: () => ( <Inline> <DisclosureArrow open={false} /> @@ -32,7 +34,7 @@ export const Controlled:DisclosureArrowStory = { }; export const Context:DisclosureArrowStory = { - storyName: "context", + name: "context", render: () => ( <Inline> <DisclosureContext.Provider value={{ isOpen: false }}> @@ -46,7 +48,7 @@ export const Context:DisclosureArrowStory = { }; export const Styling:DisclosureArrowStory = { - storyName: "styling", + name: "styling", render: () => ( <Inline> <DisclosureArrow open className="border-red" /> diff --git a/packages/components/src/divider/tests/chromatic/Divider.stories.tsx b/packages/components/src/divider/tests/chromatic/Divider.stories.tsx index 02027b0b9..2445986fa 100644 --- a/packages/components/src/divider/tests/chromatic/Divider.stories.tsx +++ b/packages/components/src/divider/tests/chromatic/Divider.stories.tsx @@ -2,24 +2,26 @@ import { Div } from "@components/html"; import { Divider } from "@components/divider"; import { Stack } from "@components/layout"; import { Text } from "@components/typography"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/Divider", component: Divider -} as ComponentMeta<typeof Divider>; +} as Meta<typeof Divider>; -type DividerStory = ComponentStoryObj<typeof Divider>; +export default meta; + +type DividerStory = StoryObj<typeof meta>; export const Default: DividerStory = { - storyName: "default", + name: "default", render:() => ( <Divider /> ) }; export const Surrounded: DividerStory = { - storyName: "surrounded", + name: "surrounded", render:() => ( <Div> <Text>Apollo 8 - 1968</Text> @@ -30,7 +32,7 @@ export const Surrounded: DividerStory = { }; export const MultipleSeparators: DividerStory = { - storyName: "multiple separators", + name: "multiple separators", render:() => ( <Div> <Text>Apollo 8 - 1968</Text> @@ -45,21 +47,21 @@ export const MultipleSeparators: DividerStory = { }; export const Labelled: DividerStory = { - storyName: "labelled", + name: "labelled", render:() => ( <Divider>Since 1978</Divider> ) }; export const LongLabel: DividerStory = { - storyName: "long label", + name: "long label", render:() => ( <Divider height="20rem">Since 1978 there have been more than 10 space exploration missions.</Divider> ) }; export const LabelledSurrounded: DividerStory = { - storyName: "labelled surrounded", + name: "labelled surrounded", render:() => ( <Div> <Text>Apollo 11 - 1969</Text> @@ -70,7 +72,7 @@ export const LabelledSurrounded: DividerStory = { }; export const Zoom: DividerStory = { - storyName: "zoom", + name: "zoom", render:() => ( <Stack> <Div className="zoom-in"> @@ -84,7 +86,7 @@ export const Zoom: DividerStory = { }; export const Styling: DividerStory = { - storyName: "styling", + name: "styling", render:() => ( <Stack> <Divider border="warning" /> diff --git a/packages/components/src/divider/tests/chromatic/DividerVertical.stories.tsx b/packages/components/src/divider/tests/chromatic/DividerVertical.stories.tsx index 13542c475..db18180ee 100644 --- a/packages/components/src/divider/tests/chromatic/DividerVertical.stories.tsx +++ b/packages/components/src/divider/tests/chromatic/DividerVertical.stories.tsx @@ -4,17 +4,19 @@ import { Dot } from "@components/dot"; import { Flex, Inline } from "@components/layout"; import { Text } from "@components/typography"; import { TextLink } from "@components/link"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/Divider/vertical", component: Divider -} as ComponentMeta<typeof Divider>; +} as Meta<typeof Divider>; -type DividerStory = ComponentStoryObj<typeof Divider>; +export default meta; + +type DividerStory = StoryObj<typeof meta>; export const Default: DividerStory = { - storyName: "default", + name: "default", render:() => ( <Div height="20rem"> <Divider orientation="vertical" /> @@ -23,7 +25,7 @@ export const Default: DividerStory = { }; export const DividerDot: DividerStory = { - storyName: "dot", + name: "dot", render:() => ( <Flex> <Dot color="primary">Engines ready</Dot> @@ -34,7 +36,7 @@ export const DividerDot: DividerStory = { }; export const MultipleSeparators: DividerStory = { - storyName: "multiple separators", + name: "multiple separators", render:() => ( <Flex> <Dot color="primary">Starlink</Dot> @@ -47,7 +49,7 @@ export const MultipleSeparators: DividerStory = { }; export const Labelled: DividerStory = { - storyName: "labelled", + name: "labelled", render:() => ( <Div height="20rem"> <Divider orientation="vertical">Since 1978</Divider> @@ -56,7 +58,7 @@ export const Labelled: DividerStory = { }; export const LongLabel: DividerStory = { - storyName: "long label", + name: "long label", render:() => ( <Div height="20rem"> <Divider orientation="vertical">Since 1978 there have been more than 10 space exploration missions.</Divider> @@ -65,7 +67,7 @@ export const LongLabel: DividerStory = { }; export const LabelledSurrounded: DividerStory = { - storyName: "labelled surrounded", + name: "labelled surrounded", render:() => ( <Flex height="20rem"> <Text>Mission goals</Text> @@ -76,7 +78,7 @@ export const LabelledSurrounded: DividerStory = { }; export const AlignItems: DividerStory = { - storyName: "align items", + name: "align items", render:() => ( <Flex alignItems="center"> <Text>Mission goals</Text> @@ -87,7 +89,7 @@ export const AlignItems: DividerStory = { }; export const Zoom: DividerStory = { - storyName: "zoom", + name: "zoom", render:() => ( <Inline height="20rem"> <Div className="zoom-in"> @@ -101,7 +103,7 @@ export const Zoom: DividerStory = { }; export const Styling: DividerStory = { - storyName: "styling", + name: "styling", render:() => ( <Inline height="20rem"> <Divider border="warning" orientation="vertical" /> diff --git a/packages/components/src/dot/tests/chromatic/Dot.stories.tsx b/packages/components/src/dot/tests/chromatic/Dot.stories.tsx index eb410dc11..10e1f9056 100644 --- a/packages/components/src/dot/tests/chromatic/Dot.stories.tsx +++ b/packages/components/src/dot/tests/chromatic/Dot.stories.tsx @@ -1,31 +1,33 @@ import { Div } from "@components/html"; import { Dot } from "@components/dot"; import { Inline, Stack } from "@components/layout"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/Dot", component: Dot -} as ComponentMeta<typeof Dot>; +} as Meta<typeof Dot>; -type DotStory = ComponentStoryObj<typeof Dot>; +export default meta; + +type DotStory = StoryObj<typeof meta>; export const Default: DotStory = { - storyName: "default", + name: "default", render: () => ( <Dot color="neutral-weakest" /> ) }; export const Label: DotStory = { - storyName: "label", + name: "label", render: () => ( <Dot color="neutral-weakest">Habitable</Dot> ) }; export const Color: DotStory = { - storyName: "color", + name: "color", render: () => ( <Stack> <Dot color="hsl(25, 69%, 41%)"></Dot> @@ -41,7 +43,7 @@ export const Color: DotStory = { }; export const Zoom: DotStory = { - storyName: "zoom", + name: "zoom", render: () => ( <Inline> <Div className="zoom-in"> @@ -55,7 +57,7 @@ export const Zoom: DotStory = { }; export const Styling: DotStory = { - storyName: "styling", + name: "styling", render: () => ( <Stack> <Inline> diff --git a/packages/components/src/field/tests/chromatic/Field.stories.tsx b/packages/components/src/field/tests/chromatic/Field.stories.tsx index 89a5f0bea..d560bc558 100644 --- a/packages/components/src/field/tests/chromatic/Field.stories.tsx +++ b/packages/components/src/field/tests/chromatic/Field.stories.tsx @@ -13,17 +13,19 @@ import { Select } from "@components/select"; import { Switch } from "@components/switch"; import { Text } from "@components/typography"; import { TextArea } from "@components/text-area"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/Field", component: Field -} as ComponentMeta<typeof Field>; +} as Meta<typeof Field>; -type FieldStory = ComponentStoryObj<typeof Field>; +export default meta; + +type FieldStory = StoryObj<typeof meta>; export const Default: FieldStory = { - storyName: "default", + name: "default", render: () => ( <Field> <TextInput placeholder="Where to?" /> @@ -32,7 +34,7 @@ export const Default: FieldStory = { }; export const FieldLabel: FieldStory = { - storyName: "label", + name: "label", render: () => ( <Field> <Label>Where to?</Label> @@ -42,7 +44,7 @@ export const FieldLabel: FieldStory = { }; export const Message: FieldStory = { - storyName: "message", + name: "message", render: () => ( <Stack gap="3.5rem"> <Field> @@ -65,7 +67,7 @@ export const Message: FieldStory = { }; export const Validation: FieldStory = { - storyName: "validation", + name: "validation", render: () => ( <Inline> <Field> @@ -95,7 +97,7 @@ export const Validation: FieldStory = { export const Fluid: FieldStory = { - storyName: "fluid", + name: "fluid", render: () => ( <Stack> <Div> @@ -117,7 +119,7 @@ export const Fluid: FieldStory = { }; export const Required: FieldStory = { - storyName: "required", + name: "required", render: () => ( <Field required> <Label>Where to?</Label> @@ -128,7 +130,7 @@ export const Required: FieldStory = { }; export const FieldTextInput: FieldStory = { - storyName: "text input", + name: "text input", render: () => ( <Field> <Label>Where to?</Label> @@ -139,7 +141,7 @@ export const FieldTextInput: FieldStory = { }; export const FieldPasswordInput: FieldStory = { - storyName: "password input", + name: "password input", render: () => ( <Field> <Label>Where to?</Label> @@ -150,7 +152,7 @@ export const FieldPasswordInput: FieldStory = { }; export const FieldNumberInput: FieldStory = { - storyName: "number input", + name: "number input", render: () => ( <Field> <Label>Age</Label> @@ -161,7 +163,7 @@ export const FieldNumberInput: FieldStory = { }; export const FieldTextArea: FieldStory = { - storyName: "text area", + name: "text area", render: () => ( <Field> <Label>Where to?</Label> @@ -172,7 +174,7 @@ export const FieldTextArea: FieldStory = { }; export const FieldDateInput: FieldStory = { - storyName: "date input", + name: "date input", render: () => ( <Field> <Label>When?</Label> @@ -183,7 +185,7 @@ export const FieldDateInput: FieldStory = { }; export const FieldDateRangeInput: FieldStory = { - storyName: "date range input", + name: "date range input", render: () => ( <Field> <Label>When?</Label> @@ -194,7 +196,7 @@ export const FieldDateRangeInput: FieldStory = { }; export const FieldCheckbox: FieldStory = { - storyName: "checkbox", + name: "checkbox", render: () => ( <Field> <Checkbox>Milky Way</Checkbox> @@ -204,7 +206,7 @@ export const FieldCheckbox: FieldStory = { }; export const FieldSwitch: FieldStory = { - storyName: "switch", + name: "switch", render: () => ( <Field> <Switch>Milky Way</Switch> @@ -214,7 +216,7 @@ export const FieldSwitch: FieldStory = { }; export const FieldSelect: FieldStory = { - storyName: "select", + name: "select", render: () => ( <Field> <Label>Planet</Label> @@ -229,7 +231,7 @@ export const FieldSelect: FieldStory = { }; export const FieldAutocomplete: FieldStory = { - storyName: "autocomplete", + name: "autocomplete", render: () => ( <Field> <Label>Planet</Label> @@ -244,7 +246,7 @@ export const FieldAutocomplete: FieldStory = { }; export const FieldInputGroup: FieldStory = { - storyName: "input group", + name: "input group", render: () => ( <Stack> <Field> @@ -270,7 +272,7 @@ export const FieldInputGroup: FieldStory = { }; export const Zoom: FieldStory = { - storyName: "zoom", + name: "zoom", render: () => ( <Stack> <Div className="zoom-in"> @@ -290,7 +292,7 @@ export const Zoom: FieldStory = { }; export const Styling: FieldStory = { - storyName: "styling", + name: "styling", render: () => ( <Inline> <Field border="warning"> diff --git a/packages/components/src/field/tests/chromatic/FieldMessage.stories.tsx b/packages/components/src/field/tests/chromatic/FieldMessage.stories.tsx index 4052eac4e..1c60bf825 100644 --- a/packages/components/src/field/tests/chromatic/FieldMessage.stories.tsx +++ b/packages/components/src/field/tests/chromatic/FieldMessage.stories.tsx @@ -4,15 +4,17 @@ import { QuestionIcon, InfoIcon, WarningIcon } from "@hopper-ui/icons"; import { Inline, Stack } from "@components/layout"; import { Paragraph } from "@components/typography"; import { TextLink } from "@components/link"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; import { ReactNode } from "react"; -export default { +const meta = { title: "Chromatic/FieldMessage", component: HelpMessage -} as ComponentMeta<typeof HelpMessage>; +} as Meta<typeof HelpMessage>; -type HelpMessageStory = ComponentStoryObj<typeof HelpMessage>; +export default meta; + +type HelpMessageStory = StoryObj<typeof meta>; function Align({ children }: { children: ReactNode }) { return ( @@ -23,7 +25,7 @@ function Align({ children }: { children: ReactNode }) { } export const Default: HelpMessageStory = { - storyName: "default", + name: "default", render: () => ( <HelpMessage> Enter your final destination. Here's a <TextLink href="https://www.google.com/sky" external>space map</TextLink>. @@ -32,7 +34,7 @@ export const Default: HelpMessageStory = { }; export const Icon: HelpMessageStory = { - storyName: "icon", + name: "icon", render: () => ( <HelpMessage> <Align> @@ -44,7 +46,7 @@ export const Icon: HelpMessageStory = { export const FieldMessageParagraph: HelpMessageStory = { - storyName: "paragraph", + name: "paragraph", render: () => ( <HelpMessage> <Paragraph> @@ -55,7 +57,7 @@ export const FieldMessageParagraph: HelpMessageStory = { }; export const List: HelpMessageStory = { - storyName: "list", + name: "list", render: () => ( <Inline> <HelpMessage> @@ -77,7 +79,7 @@ export const List: HelpMessageStory = { }; export const Wrappers: HelpMessageStory = { - storyName: "wrappers", + name: "wrappers", render: () => ( <HelpMessage> <Div> @@ -90,7 +92,7 @@ export const Wrappers: HelpMessageStory = { }; export const Complex: HelpMessageStory = { - storyName: "complex", + name: "complex", render: () => ( <HelpMessage> <Align> @@ -109,7 +111,7 @@ export const Complex: HelpMessageStory = { }; export const Fluid: HelpMessageStory = { - storyName: "fluid", + name: "fluid", render: () => ( <HelpMessage fluid> If two pieces of the same type of <TextLink href="#">metal touch</TextLink> in space they <TextLink href="https://www.sharegate.com" external>will permanently</TextLink> bond. @@ -118,7 +120,7 @@ export const Fluid: HelpMessageStory = { }; export const Help: HelpMessageStory = { - storyName: "help", + name: "help", render: () => ( <HelpMessage> <Align> @@ -129,7 +131,7 @@ export const Help: HelpMessageStory = { }; export const Error: HelpMessageStory = { - storyName: "error", + name: "error", render: () => ( <ErrorMessage> <Align> @@ -140,7 +142,7 @@ export const Error: HelpMessageStory = { }; export const Valid: HelpMessageStory = { - storyName: "valid", + name: "valid", render: () => ( <ValidMessage> <Align> @@ -151,7 +153,7 @@ export const Valid: HelpMessageStory = { }; export const Zoom: HelpMessageStory = { - storyName: "zoom", + name: "zoom", render: () => ( <Stack> <Div className="zoom-in"> @@ -169,7 +171,7 @@ export const Zoom: HelpMessageStory = { }; export const Styling: HelpMessageStory = { - storyName: "styling", + name: "styling", render: () => ( <Inline> <ValidMessage border="warning">Thank you!</ValidMessage> diff --git a/packages/components/src/field/tests/chromatic/GroupField.stories.tsx b/packages/components/src/field/tests/chromatic/GroupField.stories.tsx index a1a5b5c15..bfab840ef 100644 --- a/packages/components/src/field/tests/chromatic/GroupField.stories.tsx +++ b/packages/components/src/field/tests/chromatic/GroupField.stories.tsx @@ -4,17 +4,19 @@ import { DateRangeInput } from "@components/date-input"; import { GroupField, HelpMessage, Label } from "@components/field"; import { Inline, Stack } from "@components/layout"; import { Radio, RadioGroup } from "@components/radio"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/GroupField", component: GroupField -} as ComponentMeta<typeof GroupField>; +} as Meta<typeof GroupField>; -type GroupFieldStory = ComponentStoryObj<typeof GroupField>; +export default meta; + +type GroupFieldStory = StoryObj<typeof meta>; export const GroupFieldCheckboxGroup: GroupFieldStory = { - storyName: "checkbox group", + name: "checkbox group", render: () => ( <Stack gap={800}> <GroupField> @@ -40,7 +42,7 @@ export const GroupFieldCheckboxGroup: GroupFieldStory = { }; export const GroupFieldRadioGroup: GroupFieldStory = { - storyName: "radio group", + name: "radio group", render: () => ( <Inline gap={800} alignY="end"> <GroupField> @@ -66,7 +68,7 @@ export const GroupFieldRadioGroup: GroupFieldStory = { }; export const GroupFieldButtonGroup: GroupFieldStory = { - storyName: "button group", + name: "button group", render: () => ( <Stack gap={800}> <GroupField> @@ -92,7 +94,7 @@ export const GroupFieldButtonGroup: GroupFieldStory = { }; export const GroupFieldDateRangeInput: GroupFieldStory = { - storyName: "date range input", + name: "date range input", render: () => ( <GroupField> <Label>When?</Label> @@ -103,7 +105,7 @@ export const GroupFieldDateRangeInput: GroupFieldStory = { }; export const Styling: GroupFieldStory = { - storyName: "styling", + name: "styling", render: () => ( <Inline> <GroupField border="warning"> diff --git a/packages/components/src/field/tests/chromatic/Label.stories.tsx b/packages/components/src/field/tests/chromatic/Label.stories.tsx index 5be29618a..0c3cc4170 100644 --- a/packages/components/src/field/tests/chromatic/Label.stories.tsx +++ b/packages/components/src/field/tests/chromatic/Label.stories.tsx @@ -2,24 +2,26 @@ import { Inline } from "@components/layout"; import { Label } from "@components/field"; import { Span } from "@components/html"; import { TextLink } from "@components/link"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/Label", component: Label -} as ComponentMeta<typeof Label>; +} as Meta<typeof Label>; -type GroupFieldStory = ComponentStoryObj<typeof Label>; +export default meta; + +type GroupFieldStory = StoryObj<typeof meta>; export const Default: GroupFieldStory = { - storyName: "default", + name: "default", render: () => ( <Label>Where to?</Label> ) }; export const Complex: GroupFieldStory = { - storyName: "complex", + name: "complex", render: () => ( <Label> <Span>Where to? (<TextLink variant="primary" size="inherit" href="https://www.google.com/sky">view destinations</TextLink>)</Span> @@ -28,14 +30,14 @@ export const Complex: GroupFieldStory = { }; export const AsSpan: GroupFieldStory = { - storyName: "as span", + name: "as span", render: () => ( <Label as="span">Where to?</Label> ) }; export const Styling: GroupFieldStory = { - storyName: "styling", + name: "styling", render: () => ( <Inline> <Label border="warning">Where to?</Label> diff --git a/packages/components/src/form/tests/chromatic/Fieldset.stories.tsx b/packages/components/src/form/tests/chromatic/Fieldset.stories.tsx index e8e05b689..943e92386 100644 --- a/packages/components/src/form/tests/chromatic/Fieldset.stories.tsx +++ b/packages/components/src/form/tests/chromatic/Fieldset.stories.tsx @@ -4,17 +4,19 @@ import { Field, Label } from "@components/field"; import { Fieldset, Form } from "@components/form"; import { Inline, Stack } from "@components/layout"; import { TextInput } from "@components/text-input"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/Fieldset", component: Fieldset -} as ComponentMeta<typeof Fieldset>; +} as Meta<typeof Fieldset>; -type FieldsetStory = ComponentStoryObj<typeof Fieldset>; +export default meta; + +type FieldsetStory = StoryObj<typeof meta>; export const Default: FieldsetStory = { - storyName: "default", + name: "default", render: () => ( <Form> <Fieldset label="Shipping Address"> @@ -103,7 +105,7 @@ export const Default: FieldsetStory = { }; export const Zoom: FieldsetStory = { - storyName: "zoom", + name: "zoom", render: () => ( <Stack> <Div className="zoom-in"> @@ -139,7 +141,7 @@ export const Zoom: FieldsetStory = { }; export const Styling: FieldsetStory = { - storyName: "styling", + name: "styling", render: () => ( <Stack> <Fieldset border="warning" label="Shipping Address"> diff --git a/packages/components/src/form/tests/chromatic/Form.stories.tsx b/packages/components/src/form/tests/chromatic/Form.stories.tsx index ef03ba6d7..f52918249 100644 --- a/packages/components/src/form/tests/chromatic/Form.stories.tsx +++ b/packages/components/src/form/tests/chromatic/Form.stories.tsx @@ -8,17 +8,19 @@ import { Radio, RadioGroup } from "@components/radio"; import { TextArea } from "@components/text-area"; import { TextInput } from "@components/text-input"; import { TextLinkAsButton } from "@components/link"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/Form", component: Form -} as ComponentMeta<typeof Form>; +} as Meta<typeof Form>; -type FormStory = ComponentStoryObj<typeof Form>; +export default meta; + +type FormStory = StoryObj<typeof meta>; export const Default: FormStory = { - storyName: "default", + name: "default", render: () => ( <Inline alignY="end" gap={800}> <Form> @@ -50,7 +52,7 @@ export const Default: FormStory = { }; export const Fluid: FormStory = { - storyName: "fluid", + name: "fluid", render: () => ( <Inline gap={800}> <Form fluid> @@ -83,7 +85,7 @@ export const Fluid: FormStory = { export const Disabled: FormStory = { - storyName: "disabled", + name: "disabled", render: () => ( <Inline alignY="end" gap={800}> <Form disabled> @@ -115,7 +117,7 @@ export const Disabled: FormStory = { }; export const NestedDiv: FormStory = { - storyName: "nested div", + name: "nested div", render: () => ( <Form> <Field> @@ -141,7 +143,7 @@ export const NestedDiv: FormStory = { }; export const FormGroupField: FormStory = { - storyName: "group field", + name: "group field", render: () => ( <Form> <Field> @@ -171,7 +173,7 @@ export const FormGroupField: FormStory = { }; export const ButtonAlignment: FormStory = { - storyName: "button alignment", + name: "button alignment", render: () => ( <Inline> <Form> @@ -209,7 +211,7 @@ export const ButtonAlignment: FormStory = { }; export const Styling: FormStory = { - storyName: "styling", + name: "styling", render: () => ( <Inline> <Form border="warning"> diff --git a/packages/components/src/form/tests/chromatic/FormFlexInline.stories.tsx b/packages/components/src/form/tests/chromatic/FormFlexInline.stories.tsx index 4b83c529c..41c90eec8 100644 --- a/packages/components/src/form/tests/chromatic/FormFlexInline.stories.tsx +++ b/packages/components/src/form/tests/chromatic/FormFlexInline.stories.tsx @@ -6,17 +6,19 @@ import { Form } from "@components/form"; import { Inline } from "@components/layout"; import { TextInput } from "@components/text-input"; import { TextLinkAsButton } from "@components/link"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/Form/flex inline", component: Form -} as ComponentMeta<typeof Form>; +} as Meta<typeof Form>; -type FormStory = ComponentStoryObj<typeof Form>; +export default meta; + +type FormStory = StoryObj<typeof meta>; export const Default: FormStory = { - storyName: "default", + name: "default", render: () => ( <Form> <Field> @@ -63,7 +65,7 @@ export const Default: FormStory = { }; export const Fluid: FormStory = { - storyName: "fluid", + name: "fluid", render: () => ( <Form fluid> <Field> @@ -111,7 +113,7 @@ export const Fluid: FormStory = { export const FluidFixWidthContainer: FormStory = { - storyName: "fluid with fix width container", + name: "fluid with fix width container", render: () => ( <Div width="24rem"> <Form fluid> @@ -160,7 +162,7 @@ export const FluidFixWidthContainer: FormStory = { }; export const Messages: FormStory = { - storyName: "messages", + name: "messages", render: () => ( <Form> <Inline> diff --git a/packages/components/src/form/tests/chromatic/FormGridInline.stories.tsx b/packages/components/src/form/tests/chromatic/FormGridInline.stories.tsx index f9cbb8eb4..40cc68a3d 100644 --- a/packages/components/src/form/tests/chromatic/FormGridInline.stories.tsx +++ b/packages/components/src/form/tests/chromatic/FormGridInline.stories.tsx @@ -5,17 +5,19 @@ import { Form } from "@components/form"; import { Grid, repeat } from "@components/layout"; import { TextInput } from "@components/text-input"; import { TextLinkAsButton } from "@components/link"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/Form/grid inline", component: Form -} as ComponentMeta<typeof Form>; +} as Meta<typeof Form>; -type FormStory = ComponentStoryObj<typeof Form>; +export default meta; + +type FormStory = StoryObj<typeof meta>; export const Default: FormStory = { - storyName: "default", + name: "default", render: () => ( <Form> <Field> @@ -62,7 +64,7 @@ export const Default: FormStory = { }; export const Fluid: FormStory = { - storyName: "fluid", + name: "fluid", render: () => ( <Form> <Field> @@ -109,7 +111,7 @@ export const Fluid: FormStory = { }; export const Messages: FormStory = { - storyName: "messages", + name: "messages", render: () => ( <Form> <Grid templateColumns={repeat(3, "1fr")}> diff --git a/packages/components/src/html/src/htmlElement.tsx b/packages/components/src/html/src/htmlElement.tsx index 371c47474..27c8d226e 100644 --- a/packages/components/src/html/src/htmlElement.tsx +++ b/packages/components/src/html/src/htmlElement.tsx @@ -28,7 +28,7 @@ export function htmlElement<T extends ElementType>(name: string, elementType: T) return ( <As - {...mergeProps( + {...mergeProps<any>( rest, { className: "o-ui-element", diff --git a/packages/components/src/html/tests/chromatic/html.stories.tsx b/packages/components/src/html/tests/chromatic/html.stories.tsx index 6d4e7c1b6..b95ea9bbf 100644 --- a/packages/components/src/html/tests/chromatic/html.stories.tsx +++ b/packages/components/src/html/tests/chromatic/html.stories.tsx @@ -1,15 +1,17 @@ import { A } from "@components/html"; import { Inline } from "@components/layout"; import { StyleProvider } from "@components/styling"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; import { PropsWithChildren } from "react"; -export default { +const meta = { title: "Chromatic/Html", component: StyleProvider -} as ComponentMeta<typeof StyleProvider>; +} as Meta<typeof StyleProvider>; -type StyleProviderStory = ComponentStoryObj<typeof StyleProvider>; +export default meta; + +type StyleProviderStory = StoryObj<typeof meta>; const StyledAnchor = ({ children }: PropsWithChildren) => { return ( @@ -26,21 +28,21 @@ const StyledAnchor = ({ children }: PropsWithChildren) => { }; export const Size: StyleProviderStory = { - storyName: "size", + name: "size", render: () => ( <A href="#">Google</A> ) }; export const StyleContext: StyleProviderStory = { - storyName: "support style context", + name: "support style context", render: () => ( <StyledAnchor>Google</StyledAnchor> ) }; export const Styling: StyleProviderStory = { - storyName: "styling", + name: "styling", render: () => ( <Inline> <A border="warning" href="#">Google</A> diff --git a/packages/components/src/icons/tests/chromatic/IconList.stories.tsx b/packages/components/src/icons/tests/chromatic/IconList.stories.tsx index 427379b18..26b1a0381 100644 --- a/packages/components/src/icons/tests/chromatic/IconList.stories.tsx +++ b/packages/components/src/icons/tests/chromatic/IconList.stories.tsx @@ -1,14 +1,16 @@ import { IconList, IconListProps } from "@components/icons"; import { CatIcon, SparklesIcon, RocketIcon } from "@hopper-ui/icons"; import { Stack } from "@components/layout"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/IconList", component: IconList -} as ComponentMeta<typeof IconList>; +} as Meta<typeof IconList>; -type IconListStory = ComponentStoryObj<typeof IconList>; +export default meta; + +type IconListStory = StoryObj<typeof meta>; function Icons(props: Omit<IconListProps, "children">) { return ( @@ -21,14 +23,14 @@ function Icons(props: Omit<IconListProps, "children">) { } export const Default: IconListStory = { - storyName: "default", + name: "default", render: () => ( <Icons /> ) }; export const Styling: IconListStory = { - storyName: "styling", + name: "styling", render: () => ( <Stack> <Icons border="warning" /> diff --git a/packages/components/src/illustrated-message/tests/chromatic/IllustratedMessage-hopper.stories.tsx b/packages/components/src/illustrated-message/tests/chromatic/IllustratedMessage-hopper.stories.tsx index 5fd9f6f5a..b53a9c016 100644 --- a/packages/components/src/illustrated-message/tests/chromatic/IllustratedMessage-hopper.stories.tsx +++ b/packages/components/src/illustrated-message/tests/chromatic/IllustratedMessage-hopper.stories.tsx @@ -6,18 +6,20 @@ import { Image } from "@components/image"; import { Inline, Stack } from "@components/layout"; import { Heading } from "@hopper-ui/components"; import { Nasa } from "./assets"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/IllustratedMessage-hopper", component: IllustratedMessage -} as ComponentMeta<typeof IllustratedMessage>; +} as Meta<typeof IllustratedMessage>; -type IllustratedMessageStory = ComponentStoryObj<typeof IllustratedMessage>; +export default meta; + +type IllustratedMessageStory = StoryObj<typeof meta>; export const Default: IllustratedMessageStory = { - storyName: "default", + name: "default", render: () => ( <IllustratedMessage> <Image src={Nasa} alt="Nasa" width="150px" /> @@ -28,7 +30,7 @@ export const Default: IllustratedMessageStory = { }; export const Horizontal: IllustratedMessageStory = { - storyName: "horizontal", + name: "horizontal", render: () => ( <Stack> <IllustratedMessage orientation="horizontal" width="700px" height="200px"> @@ -48,7 +50,7 @@ export const Horizontal: IllustratedMessageStory = { }; export const Vertical: IllustratedMessageStory = { - storyName: "vertical", + name: "vertical", render: () => ( <Inline> <IllustratedMessage orientation="vertical" width="200px" height="500px"> @@ -68,7 +70,7 @@ export const Vertical: IllustratedMessageStory = { }; export const VeryLongTitle: IllustratedMessageStory = { - storyName: "very long title", + name: "very long title", render: () => ( <IllustratedMessage width="700px" height="200px"> <Image src={Nasa} alt="Nasa" /> @@ -79,7 +81,7 @@ export const VeryLongTitle: IllustratedMessageStory = { }; export const VeryLongContent: IllustratedMessageStory = { - storyName: "very long content", + name: "very long content", render: () => ( <IllustratedMessage width="700px" height="200px" orientation="horizontal"> <Image src={Nasa} alt="Nasa" /> @@ -90,7 +92,7 @@ export const VeryLongContent: IllustratedMessageStory = { }; export const NoTitle: IllustratedMessageStory = { - storyName: "no title", + name: "no title", render: () => ( <IllustratedMessage width="700px" height="200px"> <Image src={Nasa} alt="Nasa" /> @@ -100,7 +102,7 @@ export const NoTitle: IllustratedMessageStory = { }; export const NoDimensions: IllustratedMessageStory = { - storyName: "no dimensions", + name: "no dimensions", render: () => ( <Stack> <IllustratedMessage> @@ -118,7 +120,7 @@ export const NoDimensions: IllustratedMessageStory = { }; export const Zoom: IllustratedMessageStory = { - storyName: "zoom", + name: "zoom", render: () => ( <Stack> <Div className="zoom-in"> @@ -140,7 +142,7 @@ export const Zoom: IllustratedMessageStory = { }; export const Styling: IllustratedMessageStory = { - storyName: "styling", + name: "styling", render: () => ( <Stack> <IllustratedMessage border="warning" width="700px" height="200px" orientation="horizontal"> diff --git a/packages/components/src/illustrated-message/tests/chromatic/IllustratedMessage.stories.tsx b/packages/components/src/illustrated-message/tests/chromatic/IllustratedMessage.stories.tsx index 435ade70b..ad6058bf9 100644 --- a/packages/components/src/illustrated-message/tests/chromatic/IllustratedMessage.stories.tsx +++ b/packages/components/src/illustrated-message/tests/chromatic/IllustratedMessage.stories.tsx @@ -6,18 +6,20 @@ import { IllustratedMessage } from "@components/illustrated-message"; import { Image } from "@components/image"; import { Inline, Stack } from "@components/layout"; import { Nasa } from "./assets"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/IllustratedMessage", component: IllustratedMessage -} as ComponentMeta<typeof IllustratedMessage>; +} as Meta<typeof IllustratedMessage>; -type IllustratedMessageStory = ComponentStoryObj<typeof IllustratedMessage>; +export default meta; + +type IllustratedMessageStory = StoryObj<typeof meta>; export const Default: IllustratedMessageStory = { - storyName: "default", + name: "default", render: () => ( <IllustratedMessage> <Image src={Nasa} alt="Nasa" width="150px" /> @@ -28,7 +30,7 @@ export const Default: IllustratedMessageStory = { }; export const Horizontal: IllustratedMessageStory = { - storyName: "horizontal", + name: "horizontal", render: () => ( <Stack> <IllustratedMessage orientation="horizontal" width="700px" height="200px"> @@ -48,7 +50,7 @@ export const Horizontal: IllustratedMessageStory = { }; export const Vertical: IllustratedMessageStory = { - storyName: "vertical", + name: "vertical", render: () => ( <Inline> <IllustratedMessage orientation="vertical" width="200px" height="500px"> @@ -68,7 +70,7 @@ export const Vertical: IllustratedMessageStory = { }; export const VeryLongTitle: IllustratedMessageStory = { - storyName: "very long title", + name: "very long title", render: () => ( <IllustratedMessage width="700px" height="200px"> <Image src={Nasa} alt="Nasa" /> @@ -79,7 +81,7 @@ export const VeryLongTitle: IllustratedMessageStory = { }; export const VeryLongContent: IllustratedMessageStory = { - storyName: "very long content", + name: "very long content", render: () => ( <IllustratedMessage width="700px" height="200px" orientation="horizontal"> <Image src={Nasa} alt="Nasa" /> @@ -90,7 +92,7 @@ export const VeryLongContent: IllustratedMessageStory = { }; export const NoTitle: IllustratedMessageStory = { - storyName: "no title", + name: "no title", render: () => ( <IllustratedMessage width="700px" height="200px"> <Image src={Nasa} alt="Nasa" /> @@ -100,7 +102,7 @@ export const NoTitle: IllustratedMessageStory = { }; export const NoDimensions: IllustratedMessageStory = { - storyName: "no dimensions", + name: "no dimensions", render: () => ( <Stack> <IllustratedMessage> @@ -118,7 +120,7 @@ export const NoDimensions: IllustratedMessageStory = { }; export const Zoom: IllustratedMessageStory = { - storyName: "zoom", + name: "zoom", render: () => ( <Stack> <Div className="zoom-in"> @@ -140,7 +142,7 @@ export const Zoom: IllustratedMessageStory = { }; export const Styling: IllustratedMessageStory = { - storyName: "styling", + name: "styling", render: () => ( <Stack> <IllustratedMessage border="warning" width="700px" height="200px" orientation="horizontal"> diff --git a/packages/components/src/illustration/tests/chromatic/Illustration.stories.tsx b/packages/components/src/illustration/tests/chromatic/Illustration.stories.tsx index 3f113b9af..302abab8c 100644 --- a/packages/components/src/illustration/tests/chromatic/Illustration.stories.tsx +++ b/packages/components/src/illustration/tests/chromatic/Illustration.stories.tsx @@ -3,18 +3,20 @@ import { Div } from "@components/html"; import { Illustration } from "@components/illustration"; import { Image } from "@components/image"; import { Inline, Stack } from "@components/layout"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; import { Nasa } from "./assets"; -export default { +const meta = { title: "Chromatic/Illustration", component: Illustration -} as ComponentMeta<typeof Illustration>; +} as Meta<typeof Illustration>; -type IllustrationStory = ComponentStoryObj<typeof Illustration>; +export default meta; + +type IllustrationStory = StoryObj<typeof meta>; export const Default: IllustrationStory = { - storyName: "default", + name: "default", render: () => ( <Illustration> <Image src={Nasa} alt="Nasa" width="150px" /> @@ -23,7 +25,7 @@ export const Default: IllustrationStory = { }; export const Horizontal: IllustrationStory = { - storyName: "horizontal", + name: "horizontal", render: () => ( <Stack> <Illustration orientation="horizontal" width="700px" height="200px" backgroundColor="sapphire-200"> @@ -39,7 +41,7 @@ export const Horizontal: IllustrationStory = { }; export const Vertical: IllustrationStory = { - storyName: "vertical", + name: "vertical", render: () => ( <Inline> <Illustration orientation="vertical" width="200px" height="500px" backgroundColor="sapphire-200"> @@ -55,7 +57,7 @@ export const Vertical: IllustrationStory = { }; export const Straight: IllustrationStory = { - storyName: "straight", + name: "straight", render: () => ( <Illustration shape="straight" width="700px" height="200px" backgroundColor="sapphire-200"> <Image src={Nasa} alt="Nasa" /> @@ -64,7 +66,7 @@ export const Straight: IllustrationStory = { }; export const Rounded: IllustrationStory = { - storyName: "rounded", + name: "rounded", render: () => ( <Illustration shape="rounded" width="700px" height="200px" backgroundColor="sapphire-200"> <Image src={Nasa} alt="Nasa" /> @@ -73,7 +75,7 @@ export const Rounded: IllustrationStory = { }; export const Color: IllustrationStory = { - storyName: "color", + name: "color", render: () => ( <Stack> <Inline> @@ -97,7 +99,7 @@ export const Color: IllustrationStory = { }; export const Zoom: IllustrationStory = { - storyName: "zoom", + name: "zoom", render: () => ( <Stack> <Div className="zoom-in"> @@ -115,7 +117,7 @@ export const Zoom: IllustrationStory = { }; export const Styling: IllustrationStory = { - storyName: "styling", + name: "styling", render: () => ( <Stack> <Illustration border="warning" width="700px" height="200px"> diff --git a/packages/components/src/image/tests/chromatic/Image.stories.tsx b/packages/components/src/image/tests/chromatic/Image.stories.tsx index 2d8e323c2..0e5a6b094 100644 --- a/packages/components/src/image/tests/chromatic/Image.stories.tsx +++ b/packages/components/src/image/tests/chromatic/Image.stories.tsx @@ -1,25 +1,27 @@ import { Div } from "@components/html"; import { Image } from "@components/image"; import { Inline, Stack } from "@components/layout"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; import { Launch, Mars } from "./assets"; -export default { +const meta = { title: "Chromatic/Image", component: Image -} as ComponentMeta<typeof Image>; +} as Meta<typeof Image>; -type ImageStory = ComponentStoryObj<typeof Image>; +export default meta; + +type ImageStory = StoryObj<typeof meta>; export const Default: ImageStory = { - storyName: "default", + name: "default", render: () => ( <Image src={Launch} alt="SpaceX launch" /> ) }; export const Contained: ImageStory = { - storyName: "contained", + name: "contained", render: () => ( <Div width="200px" height="200px"> <Image src={Launch} alt="SpaceX launch" /> @@ -28,7 +30,7 @@ export const Contained: ImageStory = { }; export const Size: ImageStory = { - storyName: "size", + name: "size", render: () => ( <Stack> <Image width="200px" src={Launch} alt="SpaceX launch" /> @@ -38,7 +40,7 @@ export const Size: ImageStory = { }; export const Straight: ImageStory = { - storyName: "straight", + name: "straight", render: () => ( <Inline alignY="end"> <Image shape="straight" width="50px" height="50px" src={Launch} alt="SpaceX launch" /> @@ -51,7 +53,7 @@ export const Straight: ImageStory = { }; export const Rounded: ImageStory = { - storyName: "rounded", + name: "rounded", render: () => ( <Inline alignY="end"> <Image shape="rounded" width="50px" height="50px" src={Launch} alt="SpaceX launch" /> @@ -64,7 +66,7 @@ export const Rounded: ImageStory = { }; export const Circular: ImageStory = { - storyName: "circular", + name: "circular", render: () => ( <Inline alignY="end"> <Image shape="circular" width="50px" height="50px" src={Launch} alt="SpaceX launch" /> @@ -77,7 +79,7 @@ export const Circular: ImageStory = { }; export const ObjectFit: ImageStory = { - storyName: "object fit", + name: "object fit", render: () => ( <Inline> <Div width="200px" height="200px"> @@ -100,7 +102,7 @@ export const ObjectFit: ImageStory = { }; export const ObjectPosition: ImageStory = { - storyName: "object position", + name: "object position", render: () => ( <Inline> <Image objectPosition="50% 50%" objectFit="none" width="200px" height="200px" src={Mars} alt="SpaceX launch" /> @@ -112,7 +114,7 @@ export const ObjectPosition: ImageStory = { }; export const Zoom: ImageStory = { - storyName: "zoom", + name: "zoom", render: () => ( <Stack> <Div className="zoom-in"> @@ -126,7 +128,7 @@ export const Zoom: ImageStory = { }; export const Styling: ImageStory = { - storyName: "styling", + name: "styling", render: () => ( <Inline> <Image border="warning" src={Mars} alt="SpaceX launch" /> diff --git a/packages/components/src/image/tests/chromatic/SvgImage.stories.tsx b/packages/components/src/image/tests/chromatic/SvgImage.stories.tsx index 29bc9e4f7..5255b841f 100644 --- a/packages/components/src/image/tests/chromatic/SvgImage.stories.tsx +++ b/packages/components/src/image/tests/chromatic/SvgImage.stories.tsx @@ -1,45 +1,47 @@ import { Inline } from "@components/layout"; import { NoResults } from "./assets"; import { SvgImage } from "@components/image"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/SvgImage", component: SvgImage -} as ComponentMeta<typeof SvgImage>; +} as Meta<typeof SvgImage>; -type SvgImageStory = ComponentStoryObj<typeof SvgImage>; +export default meta; + +type SvgImageStory = StoryObj<typeof meta>; export const Stroke: SvgImageStory = { - storyName: "stroke", + name: "stroke", render: () => ( <SvgImage stroke="neutral" src={NoResults} aria-label="No Results" /> ) }; export const Fill: SvgImageStory = { - storyName: "fill", + name: "fill", render: () => ( <SvgImage fill="neutral" src={NoResults} aria-label="No Results" /> ) }; export const Width: SvgImageStory = { - storyName: "width", + name: "width", render: () => ( <SvgImage width="100px" src={NoResults} stroke="neutral" aria-label="No Results" /> ) }; export const Height: SvgImageStory = { - storyName: "height", + name: "height", render: () => ( <SvgImage height="100px" src={NoResults} stroke="neutral" aria-label="No Results" /> ) }; export const Styling: SvgImageStory = { - storyName: "styling", + name: "styling", render: () => ( <Inline> <SvgImage className="stroke-red" src={NoResults} aria-label="No Results" /> diff --git a/packages/components/src/input-group/tests/chromatic/InputGroup.stories.tsx b/packages/components/src/input-group/tests/chromatic/InputGroup.stories.tsx index 7d56f1b58..5144c9db6 100644 --- a/packages/components/src/input-group/tests/chromatic/InputGroup.stories.tsx +++ b/packages/components/src/input-group/tests/chromatic/InputGroup.stories.tsx @@ -13,17 +13,19 @@ import { PasswordInput, SearchInput, TextInput } from "@components/text-input"; import { Select } from "@components/select"; import { Text } from "@components/typography"; import { subMonths, subWeeks } from "date-fns"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/InputGroup", component: InputGroup -} as ComponentMeta<typeof InputGroup>; +} as Meta<typeof InputGroup>; -type InputGroupStory = ComponentStoryObj<typeof InputGroup>; +export default meta; + +type InputGroupStory = StoryObj<typeof meta>; export const TextAddon: InputGroupStory = { - storyName: "text addon", + name: "text addon", render: () => ( <Stack> <Inline> @@ -66,7 +68,7 @@ export const TextAddon: InputGroupStory = { }; export const ButtonAddon: InputGroupStory = { - storyName: "button addon", + name: "button addon", render: () => ( <Stack> <Inline> @@ -143,7 +145,7 @@ export const ButtonAddon: InputGroupStory = { }; export const IconButtonAddon: InputGroupStory = { - storyName: "icon button addon", + name: "icon button addon", render: () => ( <Stack> <Inline> @@ -220,7 +222,7 @@ export const IconButtonAddon: InputGroupStory = { }; export const MenuAddon: InputGroupStory = { - storyName: "menu addon", + name: "menu addon", render: () => ( <Stack> <Inline> @@ -389,7 +391,7 @@ export const MenuAddon: InputGroupStory = { }; export const SelectAddon: InputGroupStory = { - storyName: "select addon", + name: "select addon", render: () => ( <Stack> <Inline> @@ -519,7 +521,7 @@ export const SelectAddon: InputGroupStory = { export const Placeholder: InputGroupStory = { - storyName: "placeholder", + name: "placeholder", render: () => ( <InputGroup> <Text>Launching in</Text> @@ -530,7 +532,7 @@ export const Placeholder: InputGroupStory = { }; export const Fluid: InputGroupStory = { - storyName: "fluid", + name: "fluid", render: () => ( <InputGroup fluid> <Text>Launching in</Text> @@ -541,7 +543,7 @@ export const Fluid: InputGroupStory = { }; export const States: InputGroupStory = { - storyName: "states", + name: "states", render: () => ( <Stack> <InputGroup disabled> @@ -557,7 +559,7 @@ export const States: InputGroupStory = { }; export const InputGroupTextInput: InputGroupStory = { - storyName: "text input", + name: "text input", render: () => ( <Stack> <Inline> @@ -600,7 +602,7 @@ export const InputGroupTextInput: InputGroupStory = { }; export const InputGroupNumberInput: InputGroupStory = { - storyName: "number input", + name: "number input", render: () => ( <Stack> <Inline> @@ -643,7 +645,7 @@ export const InputGroupNumberInput: InputGroupStory = { }; export const InputGroupPasswordInput: InputGroupStory = { - storyName: "password input", + name: "password input", render: () => ( <Stack> <Inline> @@ -686,7 +688,7 @@ export const InputGroupPasswordInput: InputGroupStory = { }; export const InputGroupSearchInput: InputGroupStory = { - storyName: "search input", + name: "search input", render: () => ( <Stack> <Inline> @@ -729,7 +731,7 @@ export const InputGroupSearchInput: InputGroupStory = { }; export const InputGroupDateInput: InputGroupStory = { - storyName: "date input", + name: "date input", render: () => ( <Stack> <Inline> @@ -772,7 +774,7 @@ export const InputGroupDateInput: InputGroupStory = { }; export const InputGroupDateRangeInput: InputGroupStory = { - storyName: "date range input", + name: "date range input", render: () => ( <Stack> <Inline> @@ -829,7 +831,7 @@ export const InputGroupDateRangeInput: InputGroupStory = { }; export const InputGroupAutocomplete: InputGroupStory = { - storyName: "autocomplete", + name: "autocomplete", render: () => ( <Stack> <Inline> @@ -898,7 +900,7 @@ export const InputGroupAutocomplete: InputGroupStory = { }; export const Zoom: InputGroupStory = { - storyName: "zoom", + name: "zoom", render: () => ( <Stack> <Div className="zoom-in"> @@ -976,7 +978,7 @@ export const Zoom: InputGroupStory = { }; export const Styling: InputGroupStory = { - storyName: "styling", + name: "styling", render: () => ( <Inline> <InputGroup border="warning"> diff --git a/packages/components/src/layout/src/Grid.tsx b/packages/components/src/layout/src/Grid.tsx index 8823e5eb8..6e8bc3702 100644 --- a/packages/components/src/layout/src/Grid.tsx +++ b/packages/components/src/layout/src/Grid.tsx @@ -16,7 +16,7 @@ import { getSizingValue, useResponsiveValue } from "../../styling"; -import { Box } from "../../box"; +import { Box, type BoxProps } from "../../box"; import { ComponentProps, ReactNode, forwardRef } from "react"; import { InternalProps, OmitInternalProps, SlotProps, StyledComponentProps, isArray, isNil, mergeProps } from "../../shared"; import { useFormContext } from "../../form"; @@ -56,7 +56,8 @@ export interface InnerGridProps extends | "gridTemplateRows" | "justifyContent" | "justifyItems" - | "rowGap"> { + | "rowGap" + | "ref"> { /** * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content). */ @@ -155,7 +156,7 @@ export function InnerGrid({ return ( <Box - {...mergeProps( + {...mergeProps<Partial<BoxProps>[]>( rest, { as, diff --git a/packages/components/src/layout/tests/chromatic/Flex.stories.tsx b/packages/components/src/layout/tests/chromatic/Flex.stories.tsx index c429fa09d..710f07e68 100644 --- a/packages/components/src/layout/tests/chromatic/Flex.stories.tsx +++ b/packages/components/src/layout/tests/chromatic/Flex.stories.tsx @@ -1,16 +1,18 @@ import { Div } from "@components/html"; import { Flex } from "@components/layout"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/Flex", component: Flex -} as ComponentMeta<typeof Flex>; +} as Meta<typeof Flex>; -type FlexStory = ComponentStoryObj<typeof Flex>; +export default meta; + +type FlexStory = StoryObj<typeof meta>; export const Default: FlexStory = { - storyName: "default", + name: "default", render: () => ( <Flex> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -21,7 +23,7 @@ export const Default: FlexStory = { }; export const FlexInline: FlexStory = { - storyName: "inline", + name: "inline", render: () => ( <> <Flex inline> @@ -39,7 +41,7 @@ export const FlexInline: FlexStory = { }; export const Nesting: FlexStory = { - storyName: "nesting", + name: "nesting", render: () => ( <Flex direction="row" gap={400}> <Flex direction="row" gap={40}> @@ -57,7 +59,7 @@ export const Nesting: FlexStory = { }; export const Gap: FlexStory = { - storyName: "gap", + name: "gap", render: () => ( <Flex gap={160}> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -68,7 +70,7 @@ export const Gap: FlexStory = { }; export const ColumnGap: FlexStory = { - storyName: "column gap", + name: "column gap", render: () => ( <Flex columnGap={160}> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -79,7 +81,7 @@ export const ColumnGap: FlexStory = { }; export const RowGap: FlexStory = { - storyName: "row gap", + name: "row gap", render: () => ( <Flex rowGap={160} direction="column"> <Div backgroundColor="sapphire-500">Alpha</Div> diff --git a/packages/components/src/layout/tests/chromatic/FlexColumn.stories.tsx b/packages/components/src/layout/tests/chromatic/FlexColumn.stories.tsx index fa309b360..45721aad1 100644 --- a/packages/components/src/layout/tests/chromatic/FlexColumn.stories.tsx +++ b/packages/components/src/layout/tests/chromatic/FlexColumn.stories.tsx @@ -1,16 +1,18 @@ import { Div } from "@components/html"; import { Flex, Inline } from "@components/layout"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/Flex/Column", component: Flex -} as ComponentMeta<typeof Flex>; +} as Meta<typeof Flex>; -type FlexStory = ComponentStoryObj<typeof Flex>; +export default meta; + +type FlexStory = StoryObj<typeof meta>; export const Default: FlexStory = { - storyName: "default", + name: "default", render: () => ( <Flex direction="column"> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -21,7 +23,7 @@ export const Default: FlexStory = { }; export const Fluid: FlexStory = { - storyName: "fluid", + name: "fluid", render: () => ( <Flex fluid direction="column"> <Div backgroundColor="sapphire-500" height="100%">Alpha</Div> @@ -32,7 +34,7 @@ export const Fluid: FlexStory = { }; export const ContentStart: FlexStory = { - storyName: "content start", + name: "content start", render: () => ( <Flex alignContent="start" width={960} direction="column" wrap="wrap"> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -43,7 +45,7 @@ export const ContentStart: FlexStory = { }; export const ContentCenter: FlexStory = { - storyName: "content center", + name: "content center", render: () => ( <Flex alignContent="center" width={960} direction="column" wrap="wrap"> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -54,7 +56,7 @@ export const ContentCenter: FlexStory = { }; export const ContentSpaceBetween: FlexStory = { - storyName: "content space between", + name: "content space between", render: () => ( <Flex alignContent="space-between" width={960} direction="column" wrap="wrap"> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -65,7 +67,7 @@ export const ContentSpaceBetween: FlexStory = { }; export const ContentSpaceAround: FlexStory = { - storyName: "content space around", + name: "content space around", render: () => ( <Flex alignContent="space-around" width={960} direction="column" wrap="wrap"> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -76,7 +78,7 @@ export const ContentSpaceAround: FlexStory = { }; export const ItemsStart: FlexStory = { - storyName: "items start", + name: "items start", render: () => ( <Flex alignItems="start" direction="column"> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -87,7 +89,7 @@ export const ItemsStart: FlexStory = { }; export const ItemsCenter: FlexStory = { - storyName: "items center", + name: "items center", render: () => ( <Flex alignItems="center" direction="column"> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -98,7 +100,7 @@ export const ItemsCenter: FlexStory = { }; export const ItemsEnd: FlexStory = { - storyName: "items end", + name: "items end", render: () => ( <Flex alignItems="end" direction="column"> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -109,7 +111,7 @@ export const ItemsEnd: FlexStory = { }; export const JustifyStart: FlexStory = { - storyName: "justify start", + name: "justify start", render: () => ( <Flex justifyContent="start" direction="column" fluid> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -120,7 +122,7 @@ export const JustifyStart: FlexStory = { }; export const JustifyCenter: FlexStory = { - storyName: "justify center", + name: "justify center", render: () => ( <Flex justifyContent="center" direction="column" fluid> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -131,7 +133,7 @@ export const JustifyCenter: FlexStory = { }; export const JustifyEnd: FlexStory = { - storyName: "justify end", + name: "justify end", render: () => ( <Flex justifyContent="end" direction="column" fluid> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -142,7 +144,7 @@ export const JustifyEnd: FlexStory = { }; export const Wrap: FlexStory = { - storyName: "wrap", + name: "wrap", render: () => ( <Flex wrap="wrap" height={240} direction="column"> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -153,7 +155,7 @@ export const Wrap: FlexStory = { }; export const WrapReverse: FlexStory = { - storyName: "wrap reverse", + name: "wrap reverse", render: () => ( <Flex wrap="wrap-reverse" height={240} direction="column"> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -167,7 +169,7 @@ export const WrapReverse: FlexStory = { }; export const Reverse: FlexStory = { - storyName: "reverse", + name: "reverse", render: () => ( <Flex reverse direction="column"> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -178,7 +180,7 @@ export const Reverse: FlexStory = { }; export const Styling: FlexStory = { - storyName: "styling", + name: "styling", render: () => ( <Inline> <Flex border="warning" direction="column"> diff --git a/packages/components/src/layout/tests/chromatic/FlexRow.stories.tsx b/packages/components/src/layout/tests/chromatic/FlexRow.stories.tsx index 0067532fe..ee8c8c375 100644 --- a/packages/components/src/layout/tests/chromatic/FlexRow.stories.tsx +++ b/packages/components/src/layout/tests/chromatic/FlexRow.stories.tsx @@ -1,16 +1,18 @@ import { Div } from "@components/html"; import { Flex, Inline } from "@components/layout"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/Flex/Row", component: Flex -} as ComponentMeta<typeof Flex>; +} as Meta<typeof Flex>; -type FlexStory = ComponentStoryObj<typeof Flex>; +export default meta; + +type FlexStory = StoryObj<typeof meta>; export const Default: FlexStory = { - storyName: "default", + name: "default", render: () => ( <Flex direction="row"> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -21,7 +23,7 @@ export const Default: FlexStory = { }; export const Fluid: FlexStory = { - storyName: "fluid", + name: "fluid", render: () => ( <Flex fluid direction="row"> <Div backgroundColor="sapphire-500" width="100%">Alpha</Div> @@ -32,7 +34,7 @@ export const Fluid: FlexStory = { }; export const ContentStart: FlexStory = { - storyName: "content start", + name: "content start", render: () => ( <Flex alignContent="start" height={960} direction="row" wrap="wrap"> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -43,7 +45,7 @@ export const ContentStart: FlexStory = { }; export const ContentCenter: FlexStory = { - storyName: "content center", + name: "content center", render: () => ( <Flex alignContent="center" height={960} direction="row" wrap="wrap"> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -54,7 +56,7 @@ export const ContentCenter: FlexStory = { }; export const ContentSpaceBetween: FlexStory = { - storyName: "content space between", + name: "content space between", render: () => ( <Flex alignContent="space-between" height={960} direction="row" wrap="wrap"> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -65,7 +67,7 @@ export const ContentSpaceBetween: FlexStory = { }; export const ContentSpaceAround: FlexStory = { - storyName: "content space around", + name: "content space around", render: () => ( <Flex alignContent="space-around" height={960} direction="row" wrap="wrap"> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -76,7 +78,7 @@ export const ContentSpaceAround: FlexStory = { }; export const ItemsStart: FlexStory = { - storyName: "items start", + name: "items start", render: () => ( <Flex alignItems="start" height={960} direction="row"> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -87,7 +89,7 @@ export const ItemsStart: FlexStory = { }; export const ItemsCenter: FlexStory = { - storyName: "items center", + name: "items center", render: () => ( <Flex alignItems="center" height={960} direction="row"> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -98,7 +100,7 @@ export const ItemsCenter: FlexStory = { }; export const ItemsEnd: FlexStory = { - storyName: "items end", + name: "items end", render: () => ( <Flex alignItems="end" height={960} direction="row"> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -109,7 +111,7 @@ export const ItemsEnd: FlexStory = { }; export const JustifyStart: FlexStory = { - storyName: "justify start", + name: "justify start", render: () => ( <Flex justifyContent="start" fluid direction="row"> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -120,7 +122,7 @@ export const JustifyStart: FlexStory = { }; export const JustifyCenter: FlexStory = { - storyName: "justify center", + name: "justify center", render: () => ( <Flex justifyContent="center" fluid direction="row"> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -131,7 +133,7 @@ export const JustifyCenter: FlexStory = { }; export const JustifyEnd: FlexStory = { - storyName: "justify end", + name: "justify end", render: () => ( <Flex justifyContent="end" fluid direction="row"> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -142,7 +144,7 @@ export const JustifyEnd: FlexStory = { }; export const Wrap: FlexStory = { - storyName: "wrap", + name: "wrap", render: () => ( <Flex wrap="wrap" width={240} direction="row"> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -153,7 +155,7 @@ export const Wrap: FlexStory = { }; export const WrapReverse: FlexStory = { - storyName: "wrap reverse", + name: "wrap reverse", render: () => ( <Flex wrap="wrap-reverse" width={240} direction="row"> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -167,7 +169,7 @@ export const WrapReverse: FlexStory = { }; export const Reverse: FlexStory = { - storyName: "reverse", + name: "reverse", render: () => ( <Flex reverse direction="row"> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -178,7 +180,7 @@ export const Reverse: FlexStory = { }; export const Styling: FlexStory = { - storyName: "styling", + name: "styling", render: () => ( <Inline> <Flex border="warning" direction="row"> diff --git a/packages/components/src/layout/tests/chromatic/Grid.stories.tsx b/packages/components/src/layout/tests/chromatic/Grid.stories.tsx index 619288c22..edc796867 100644 --- a/packages/components/src/layout/tests/chromatic/Grid.stories.tsx +++ b/packages/components/src/layout/tests/chromatic/Grid.stories.tsx @@ -1,18 +1,20 @@ import { Div } from "@components/html"; import { Grid, Inline, Stack, fitContent, minmax, repeat } from "@components/layout"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; const viewports = [640, 768, 1024, 1280, 1440]; -export default { +const meta = { title: "Chromatic/Grid", component: Grid -} as ComponentMeta<typeof Grid>; +} as Meta<typeof Grid>; -type GridStory = ComponentStoryObj<typeof Grid>; +export default meta; + +type GridStory = StoryObj<typeof meta>; export const Default: GridStory = { - storyName: "default", + name: "default", render: () => ( <Grid> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -26,7 +28,7 @@ export const Default: GridStory = { }; export const GridInline: GridStory = { - storyName: "inline", + name: "inline", render: () => ( <> <Grid inline> @@ -44,7 +46,7 @@ export const GridInline: GridStory = { }; export const Nesting: GridStory = { - storyName: "nesting", + name: "nesting", render: () => ( <Grid templateColumns={["1fr", "1fr"]} gap={160}> <Grid templateColumns={["8rem", "auto"]}> @@ -60,7 +62,7 @@ export const Nesting: GridStory = { }; export const Gap: GridStory = { - storyName: "gap", + name: "gap", render: () => ( <Grid gap={160}> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -74,7 +76,7 @@ export const Gap: GridStory = { }; export const ColumnGap: GridStory = { - storyName: "column gap", + name: "column gap", render: () => ( <Grid columnGap={160} autoFlow="column"> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -88,7 +90,7 @@ export const ColumnGap: GridStory = { }; export const RowGap: GridStory = { - storyName: "row gap", + name: "row gap", render: () => ( <Grid rowGap={160}> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -102,7 +104,7 @@ export const RowGap: GridStory = { }; export const TemplateColumns: GridStory = { - storyName: "template columns", + name: "template columns", render: () => ( <Stack> <Grid templateColumns="65px 50px 65px" gap={160}> @@ -134,7 +136,7 @@ export const TemplateColumns: GridStory = { }; export const TemplateRows: GridStory = { - storyName: "template rows", + name: "template rows", render: () => ( <Inline> <Grid templateRows="200px 100px 200px" gap={160}> @@ -157,7 +159,7 @@ export const TemplateRows: GridStory = { }; export const Areas: GridStory = { - storyName: "areas", + name: "areas", render: () => ( <Stack> <Grid areas={["a a", "b c", "d e"]} gap={160}> @@ -179,7 +181,7 @@ export const Areas: GridStory = { }; export const AutoFlow: GridStory = { - storyName: "auto flow", + name: "auto flow", render: () => ( <Stack> <Grid autoFlow="column" gap={160}> @@ -208,7 +210,7 @@ export const AutoFlow: GridStory = { }; export const AutoColumns: GridStory = { - storyName: "auto columns", + name: "auto columns", render: () => ( <Stack> <Grid autoColumns="8rem" gap={160}> @@ -237,7 +239,7 @@ export const AutoColumns: GridStory = { }; export const AutoRows: GridStory = { - storyName: "auto rows", + name: "auto rows", render: () => ( <Stack> <Grid autoRows="3.5rem" gap={160}> @@ -266,7 +268,7 @@ export const AutoRows: GridStory = { }; export const ColumnSpan: GridStory = { - storyName: "column span", + name: "column span", render: () => ( <Stack> <Grid templateColumns={["1fr", "1fr", "1fr"]} gap={160}> @@ -290,7 +292,7 @@ export const ColumnSpan: GridStory = { }; export const AlignContentStart: GridStory = { - storyName: "align content start", + name: "align content start", render: () => ( <Grid alignContent="start" gap={160} height="300px"> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -301,7 +303,7 @@ export const AlignContentStart: GridStory = { }; export const AlignContentCenter: GridStory = { - storyName: "align content center", + name: "align content center", render: () => ( <Grid alignContent="center" gap={160} height="300px"> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -312,7 +314,7 @@ export const AlignContentCenter: GridStory = { }; export const AlignContentSpaceBetween: GridStory = { - storyName: "align content space-between", + name: "align content space-between", render: () => ( <Grid alignContent="space-between" gap={160} height="300px"> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -323,7 +325,7 @@ export const AlignContentSpaceBetween: GridStory = { }; export const AlignContentSpaceAround: GridStory = { - storyName: "align content space-around", + name: "align content space-around", render: () => ( <Grid alignContent="space-around" gap={160} height="300px"> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -334,7 +336,7 @@ export const AlignContentSpaceAround: GridStory = { }; export const AlignItemsStart: GridStory = { - storyName: "align items start", + name: "align items start", render: () => ( <Grid alignItems="start" gap={160} height="300px"> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -345,7 +347,7 @@ export const AlignItemsStart: GridStory = { }; export const AlignItemsCenter: GridStory = { - storyName: "align items center", + name: "align items center", render: () => ( <Grid alignItems="center" gap={160} height="300px"> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -356,7 +358,7 @@ export const AlignItemsCenter: GridStory = { }; export const AlignItemsEnd: GridStory = { - storyName: "align items end", + name: "align items end", render: () => ( <Grid alignItems="end" gap={160} height="300px"> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -367,7 +369,7 @@ export const AlignItemsEnd: GridStory = { }; export const JustifyContentStart: GridStory = { - storyName: "justify content start", + name: "justify content start", render: () => ( <Grid justifyContent="start" gap={160} width="300px"> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -378,7 +380,7 @@ export const JustifyContentStart: GridStory = { }; export const JustifyContentCenter: GridStory = { - storyName: "justify content center", + name: "justify content center", render: () => ( <Grid justifyContent="center" gap={160} width="300px"> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -389,7 +391,7 @@ export const JustifyContentCenter: GridStory = { }; export const JustifyContentEnd: GridStory = { - storyName: "justify content end", + name: "justify content end", render: () => ( <Grid justifyContent="end" gap={160} width="300px"> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -400,7 +402,7 @@ export const JustifyContentEnd: GridStory = { }; export const JustifyContentLeft: GridStory = { - storyName: "justify content left", + name: "justify content left", render: () => ( <Grid justifyContent="left" gap={160} width="300px"> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -411,7 +413,7 @@ export const JustifyContentLeft: GridStory = { }; export const JustifyContentRight: GridStory = { - storyName: "justify content right", + name: "justify content right", render: () => ( <Grid justifyContent="right" gap={160} width="300px"> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -422,7 +424,7 @@ export const JustifyContentRight: GridStory = { }; export const JustifyContentSpaceBetween: GridStory = { - storyName: "justify content space between", + name: "justify content space between", render: () => ( <Grid justifyContent="space-between" gap={160} width="300px"> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -433,7 +435,7 @@ export const JustifyContentSpaceBetween: GridStory = { }; export const JustifyContentSpaceAround: GridStory = { - storyName: "justify content space around", + name: "justify content space around", render: () => ( <Grid justifyContent="space-around" gap={160} width="300px"> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -444,7 +446,7 @@ export const JustifyContentSpaceAround: GridStory = { }; export const JustifyContentSpaceEvenly: GridStory = { - storyName: "justify content space evenly", + name: "justify content space evenly", render: () => ( <Grid justifyContent="space-evenly" gap={160} width="300px"> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -455,7 +457,7 @@ export const JustifyContentSpaceEvenly: GridStory = { }; export const JustifyItemsStart: GridStory = { - storyName: "justify items start", + name: "justify items start", render: () => ( <Grid justifyItems="start" gap={160} width="300px"> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -466,7 +468,7 @@ export const JustifyItemsStart: GridStory = { }; export const JustifyItemsCenter: GridStory = { - storyName: "justify items center", + name: "justify items center", render: () => ( <Grid justifyItems="center" gap={160} width="300px"> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -477,7 +479,7 @@ export const JustifyItemsCenter: GridStory = { }; export const JustifyItemsEnd: GridStory = { - storyName: "justify items end", + name: "justify items end", render: () => ( <Grid justifyItems="end" gap={160} width="300px"> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -488,7 +490,7 @@ export const JustifyItemsEnd: GridStory = { }; export const JustifyItemsLeft: GridStory = { - storyName: "justify items left", + name: "justify items left", render: () => ( <Grid justifyItems="left" gap={160} width="300px"> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -499,7 +501,7 @@ export const JustifyItemsLeft: GridStory = { }; export const JustifyItemsRight: GridStory = { - storyName: "justify items right", + name: "justify items right", render: () => ( <Grid justifyItems="right" gap={160} width="300px"> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -510,7 +512,7 @@ export const JustifyItemsRight: GridStory = { }; export const RowSpan: GridStory = { - storyName: "row span", + name: "row span", render: () => ( <Stack> <Grid templateColumns={["1fr", "1fr", "1fr"]} gap={160}> @@ -534,7 +536,7 @@ export const RowSpan: GridStory = { }; export const Repeat: GridStory = { - storyName: "repeat", + name: "repeat", render: () => ( <Stack> <Grid templateColumns={repeat("auto-fit", "4.5rem")} gap={160}> @@ -558,7 +560,7 @@ export const Repeat: GridStory = { }; export const Minmax: GridStory = { - storyName: "minmax", + name: "minmax", render: () => ( <Stack> <Grid templateColumns={[minmax("8rem", "auto"), "4.5rem", "4.5rem"]} gap={160}> @@ -582,7 +584,7 @@ export const Minmax: GridStory = { }; export const FitContent: GridStory = { - storyName: "fit-content", + name: "fit-content", render: () => ( <Stack> <Grid templateColumns={[fitContent("8rem"), "4.5rem", "4.5rem"]} gap={160}> diff --git a/packages/components/src/layout/tests/chromatic/Inline.stories.tsx b/packages/components/src/layout/tests/chromatic/Inline.stories.tsx index 8cf3e9d6a..87b955477 100644 --- a/packages/components/src/layout/tests/chromatic/Inline.stories.tsx +++ b/packages/components/src/layout/tests/chromatic/Inline.stories.tsx @@ -1,16 +1,18 @@ import { Div } from "@components/html"; import { Inline } from "@components/layout"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/Inline", component: Inline -} as ComponentMeta<typeof Inline>; +} as Meta<typeof Inline>; -type InlineStory = ComponentStoryObj<typeof Inline>; +export default meta; + +type InlineStory = StoryObj<typeof meta>; export const Default: InlineStory = { - storyName: "default", + name: "default", render: () => ( <Inline> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -21,7 +23,7 @@ export const Default: InlineStory = { }; export const Reverse: InlineStory = { - storyName: "reverse", + name: "reverse", render: () => ( <Inline reverse> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -32,7 +34,7 @@ export const Reverse: InlineStory = { }; export const AlignXStart: InlineStory = { - storyName: "align X start", + name: "align X start", render: () => ( <Inline alignX="start"> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -43,7 +45,7 @@ export const AlignXStart: InlineStory = { }; export const AlignXCenter: InlineStory = { - storyName: "align X center", + name: "align X center", render: () => ( <Inline alignX="center"> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -54,7 +56,7 @@ export const AlignXCenter: InlineStory = { }; export const AlignXEnd: InlineStory = { - storyName: "align X end", + name: "align X end", render: () => ( <Inline alignX="end"> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -65,7 +67,7 @@ export const AlignXEnd: InlineStory = { }; export const AlignYStart: InlineStory = { - storyName: "align Y start", + name: "align Y start", render: () => ( <Inline alignY="start" height={800}> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -76,7 +78,7 @@ export const AlignYStart: InlineStory = { }; export const AlignYCenter: InlineStory = { - storyName: "align Y center", + name: "align Y center", render: () => ( <Inline alignY="center" height={800}> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -87,7 +89,7 @@ export const AlignYCenter: InlineStory = { }; export const AlignYEnd: InlineStory = { - storyName: "align Y end", + name: "align Y end", render: () => ( <Inline alignY="end" height={800}> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -98,7 +100,7 @@ export const AlignYEnd: InlineStory = { }; export const Wrap: InlineStory = { - storyName: "wrap", + name: "wrap", render: () => ( <Inline width={240}> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -109,7 +111,7 @@ export const Wrap: InlineStory = { }; export const Nowrap: InlineStory = { - storyName: "nowrap", + name: "nowrap", render: () => ( <Inline wrap={false} width={240}> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -120,7 +122,7 @@ export const Nowrap: InlineStory = { }; export const DefaultInline: InlineStory = { - storyName: "inline", + name: "inline", render: () => ( <> <Inline inline> @@ -138,7 +140,7 @@ export const DefaultInline: InlineStory = { }; export const Nested: InlineStory = { - storyName: "nested", + name: "nested", render: () => ( <Inline gap={400}> <Inline gap={40}> diff --git a/packages/components/src/layout/tests/chromatic/Stack.stories.tsx b/packages/components/src/layout/tests/chromatic/Stack.stories.tsx index e2c82be53..6b8cb3e74 100644 --- a/packages/components/src/layout/tests/chromatic/Stack.stories.tsx +++ b/packages/components/src/layout/tests/chromatic/Stack.stories.tsx @@ -1,16 +1,18 @@ import { Div } from "@components/html"; import { Stack } from "@components/layout"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/Stack", component: Stack -} as ComponentMeta<typeof Stack>; +} as Meta<typeof Stack>; -type StackStory = ComponentStoryObj<typeof Stack>; +export default meta; + +type StackStory = StoryObj<typeof meta>; export const Default: StackStory = { - storyName: "default", + name: "default", render: () => ( <Stack> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -21,7 +23,7 @@ export const Default: StackStory = { }; export const Reverse: StackStory = { - storyName: "reverse", + name: "reverse", render: () => ( <Stack reverse> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -32,7 +34,7 @@ export const Reverse: StackStory = { }; export const AlignXStart: StackStory = { - storyName: "align X start", + name: "align X start", render: () => ( <Stack alignX="start"> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -43,7 +45,7 @@ export const AlignXStart: StackStory = { }; export const AlignXCenter: StackStory = { - storyName: "align X center", + name: "align X center", render: () => ( <Stack alignX="center"> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -54,7 +56,7 @@ export const AlignXCenter: StackStory = { }; export const AlignXEnd: StackStory = { - storyName: "align X end", + name: "align X end", render: () => ( <Stack alignX="end"> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -65,7 +67,7 @@ export const AlignXEnd: StackStory = { }; export const AlignYStart: StackStory = { - storyName: "align Y start", + name: "align Y start", render: () => ( <Stack alignY="start" height={960}> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -76,7 +78,7 @@ export const AlignYStart: StackStory = { }; export const AlignYCenter: StackStory = { - storyName: "align Y center", + name: "align Y center", render: () => ( <Stack alignY="center" height={960}> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -87,7 +89,7 @@ export const AlignYCenter: StackStory = { }; export const AlignYEnd: StackStory = { - storyName: "align Y end", + name: "align Y end", render: () => ( <Stack alignY="end" height={960}> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -98,7 +100,7 @@ export const AlignYEnd: StackStory = { }; export const Wrap: StackStory = { - storyName: "wrap", + name: "wrap", render: () => ( <Stack wrap height={240}> <Div backgroundColor="sapphire-500">Alpha</Div> @@ -109,7 +111,7 @@ export const Wrap: StackStory = { }; export const Inline: StackStory = { - storyName: "inline", + name: "inline", render: () => ( <> <Stack inline> @@ -127,7 +129,7 @@ export const Inline: StackStory = { }; export const Nested: StackStory = { - storyName: "nested", + name: "nested", render: () => ( <Stack gap={400}> <Stack gap={40}> diff --git a/packages/components/src/listbox/tests/chromatic/Listbox-hopper.stories.tsx b/packages/components/src/listbox/tests/chromatic/Listbox-hopper.stories.tsx index 1d78ec3af..1379841b0 100644 --- a/packages/components/src/listbox/tests/chromatic/Listbox-hopper.stories.tsx +++ b/packages/components/src/listbox/tests/chromatic/Listbox-hopper.stories.tsx @@ -5,9 +5,9 @@ import { SparklesIcon, DismissIcon, LightbulbIcon, NotificationIcon } from "@hop import { Div } from "@components/html"; import { CollectionItem, Item, Section } from "@components/collection"; import { useListboxContext, Listbox, ListboxOption, ListboxOptionProps } from "@components/listbox"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/Listbox-hopper", component: Listbox, parameters: { @@ -15,12 +15,14 @@ export default { delay: 100 } } -} as ComponentMeta<typeof Listbox>; +} as Meta<typeof Listbox>; -type ListboxStory = ComponentStoryObj<typeof Listbox>; +export default meta; + +type ListboxStory = StoryObj<typeof meta>; export const OnlyItems: ListboxStory = { - storyName: "only items", + name: "only items", render: () => ( <Listbox aria-label="Planets"> <Item key="earth">Earth</Item> @@ -35,7 +37,7 @@ export const OnlyItems: ListboxStory = { }; export const GeneratedKeys: ListboxStory = { - storyName: "generated keys", + name: "generated keys", render: () => ( <Listbox aria-label="Planets"> <Item>Earth</Item> @@ -46,7 +48,7 @@ export const GeneratedKeys: ListboxStory = { }; export const Sections: ListboxStory = { - storyName: "sections", + name: "sections", render: () => ( <Listbox aria-label="Planets"> <Section title="Visited"> @@ -75,7 +77,7 @@ export const Sections: ListboxStory = { }; export const MixedSectionsAndItems: ListboxStory = { - storyName: "mixed sections and items", + name: "mixed sections and items", render: () => ( <Listbox aria-label="Planets"> <Item key="earth">Earth</Item> @@ -101,7 +103,7 @@ export const MixedSectionsAndItems: ListboxStory = { }; export const SelectedKeys: ListboxStory = { - storyName: "selected keys", + name: "selected keys", render: () => ( <Inline> <Listbox defaultSelectedKeys={["mars"]} aria-label="Planets"> @@ -127,7 +129,7 @@ export const SelectedKeys: ListboxStory = { }; export const ItemWithStartIcon: ListboxStory = { - storyName: "item with start icon", + name: "item with start icon", render: () => ( <Listbox aria-label="Planets"> <Item key="earth"> @@ -163,7 +165,7 @@ export const ItemWithStartIcon: ListboxStory = { }; export const ItemWithStartIconAndDescription: ListboxStory = { - storyName: "item with start icon and description", + name: "item with start icon and description", render: () => ( <Listbox aria-label="Planets"> <Item key="earth"> @@ -186,7 +188,7 @@ export const ItemWithStartIconAndDescription: ListboxStory = { }; export const ItemWithEndIcon: ListboxStory = { - storyName: "item with end icon", + name: "item with end icon", render: () => ( <Listbox aria-label="Planets"> <Item key="earth"> @@ -210,7 +212,7 @@ export const ItemWithEndIcon: ListboxStory = { }; export const ItemWithAvatar: ListboxStory = { - storyName: "item with avatar", + name: "item with avatar", render: () => ( <Listbox aria-label="Planets"> <Item key="earth"> @@ -230,7 +232,7 @@ export const ItemWithAvatar: ListboxStory = { }; export const ItemWithAvatarAndDescription: ListboxStory = { - storyName: "item with avatar and description", + name: "item with avatar and description", render: () => ( <Listbox aria-label="Planets"> <Item key="earth"> @@ -253,7 +255,7 @@ export const ItemWithAvatarAndDescription: ListboxStory = { }; export const ItemWithDescription: ListboxStory = { - storyName: "item with description", + name: "item with description", render: () => ( <Listbox aria-label="Planets"> <Item key="earth"> @@ -274,7 +276,7 @@ export const ItemWithDescription: ListboxStory = { }; export const ItemOverflow: ListboxStory = { - storyName: "item overflow", + name: "item overflow", render: () => ( <Inline> <Listbox aria-label="Planets"> @@ -292,7 +294,7 @@ export const ItemOverflow: ListboxStory = { }; export const ItemWithDescriptionOverflow: ListboxStory = { - storyName: "item with description overflow", + name: "item with description overflow", render: () => ( <Inline> <Listbox aria-label="Planets"> @@ -332,7 +334,7 @@ export const ItemWithDescriptionOverflow: ListboxStory = { }; export const ItemWithDescriptionOverflowWhenFluid: ListboxStory = { - storyName: "item with description overflow when fluid", + name: "item with description overflow when fluid", render: () => ( <Inline> <Listbox fluid width="16rem" aria-label="Planets"> @@ -370,7 +372,7 @@ export const ItemWithDescriptionOverflowWhenFluid: ListboxStory = { }; export const Fluid: ListboxStory = { - storyName: "fluid", + name: "fluid", render: () => ( <Listbox fluid aria-label="Planets"> <Item key="earth">Earth</Item> @@ -381,7 +383,7 @@ export const Fluid: ListboxStory = { }; export const Validation: ListboxStory = { - storyName: "validation", + name: "validation", render: () => ( <Stack> <Inline> @@ -445,7 +447,7 @@ export const Validation: ListboxStory = { }; export const States: ListboxStory = { - storyName: "states", + name: "states", render: () => ( <Inline> <Listbox selectedKeys={["earth"]} aria-label="Planets"> @@ -475,7 +477,7 @@ export const States: ListboxStory = { }; export const ArrayMap: ListboxStory = { - storyName: "array map", + name: "array map", render: () => ( <Listbox aria-label="Planets"> {["Earth", "Jupiter", "Mars", "Mercury", "Neptune", "Saturn", "Uranus"].map(x => ( @@ -502,7 +504,7 @@ const ActiveOption = ({ item, children, ...rest }: Omit<ListboxOptionProps, "ite export const CustomItemComponent: ListboxStory = { - storyName: "custom item component", + name: "custom item component", render: () => ( <Listbox aria-label="Planets"> <ActiveOption key="earth">Earth</ActiveOption> @@ -513,7 +515,7 @@ export const CustomItemComponent: ListboxStory = { }; export const ScrollingWithTooManyOptions: ListboxStory = { - storyName: "scrolling with too many options", + name: "scrolling with too many options", render: () => ( <Listbox aria-label="Planets"> <Item key="ceres">Ceres</Item> @@ -535,7 +537,7 @@ export const ScrollingWithTooManyOptions: ListboxStory = { }; export const ScrollingWithSections: ListboxStory = { - storyName: "scrolling with sections", + name: "scrolling with sections", render: () => ( <Listbox aria-label="Planets"> <Section title="Visited"> @@ -570,7 +572,7 @@ export const ScrollingWithSections: ListboxStory = { }; export const ScrollingWithDescriptions: ListboxStory = { - storyName: "scrolling with descriptions", + name: "scrolling with descriptions", render: () => ( <Listbox aria-label="Planets"> <Item key="earth"> @@ -614,7 +616,7 @@ export const ScrollingWithDescriptions: ListboxStory = { }; export const ScrollingMixMmatch: ListboxStory = { - storyName: "scrolling mix & match", + name: "scrolling mix & match", render: () => ( <Listbox aria-label="Planets"> <Section title="Visited"> @@ -646,7 +648,7 @@ export const ScrollingMixMmatch: ListboxStory = { }; export const ScrollingWithCustomStyleHeight: ListboxStory = { - storyName: "scrolling with custom style height", + name: "scrolling with custom style height", render: () => ( <Listbox height={960} aria-label="Planets"> <Item key="ceres">Ceres</Item> @@ -668,7 +670,7 @@ export const ScrollingWithCustomStyleHeight: ListboxStory = { }; export const CustomMenuWidth: ListboxStory = { - storyName: "custom menu width", + name: "custom menu width", render: () => ( <Listbox width="20rem" aria-label="Planets"> <Item key="earth">Earth</Item> @@ -679,7 +681,7 @@ export const CustomMenuWidth: ListboxStory = { }; export const Zoom: ListboxStory = { - storyName: "zoom", + name: "zoom", render: () => ( <Stack> <Div className="zoom-in"> @@ -703,7 +705,7 @@ export const Zoom: ListboxStory = { }; export const Styling: ListboxStory = { - storyName: "styling", + name: "styling", render: () => ( <Inline> <Listbox border="warning" aria-label="Planets"> diff --git a/packages/components/src/listbox/tests/chromatic/Listbox.stories.tsx b/packages/components/src/listbox/tests/chromatic/Listbox.stories.tsx index 23510cb4a..3e19c60fc 100644 --- a/packages/components/src/listbox/tests/chromatic/Listbox.stories.tsx +++ b/packages/components/src/listbox/tests/chromatic/Listbox.stories.tsx @@ -6,9 +6,9 @@ import { Inline, Stack } from "@components/layout"; import { CollectionItem, Item, Section } from "@components/collection"; import { useListboxContext, Listbox, ListboxOption, ListboxOptionProps } from "@components/listbox"; import { Text } from "@components/typography"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/Listbox", component: Listbox, parameters: { @@ -16,12 +16,14 @@ export default { delay: 100 } } -} as ComponentMeta<typeof Listbox>; +} as Meta<typeof Listbox>; -type ListboxStory = ComponentStoryObj<typeof Listbox>; +export default meta; + +type ListboxStory = StoryObj<typeof meta>; export const OnlyItems: ListboxStory = { - storyName: "only items", + name: "only items", render: () => ( <Listbox aria-label="Planets"> <Item key="earth">Earth</Item> @@ -36,7 +38,7 @@ export const OnlyItems: ListboxStory = { }; export const GeneratedKeys: ListboxStory = { - storyName: "generated keys", + name: "generated keys", render: () => ( <Listbox aria-label="Planets"> <Item>Earth</Item> @@ -47,7 +49,7 @@ export const GeneratedKeys: ListboxStory = { }; export const Sections: ListboxStory = { - storyName: "sections", + name: "sections", render: () => ( <Listbox aria-label="Planets"> <Section title="Visited"> @@ -76,7 +78,7 @@ export const Sections: ListboxStory = { }; export const MixedSectionsAndItems: ListboxStory = { - storyName: "mixed sections and items", + name: "mixed sections and items", render: () => ( <Listbox aria-label="Planets"> <Item key="earth">Earth</Item> @@ -102,7 +104,7 @@ export const MixedSectionsAndItems: ListboxStory = { }; export const SelectedKeys: ListboxStory = { - storyName: "selected keys", + name: "selected keys", render: () => ( <Inline> <Listbox defaultSelectedKeys={["mars"]} aria-label="Planets"> @@ -128,7 +130,7 @@ export const SelectedKeys: ListboxStory = { }; export const ItemWithStartIcon: ListboxStory = { - storyName: "item with start icon", + name: "item with start icon", render: () => ( <Listbox aria-label="Planets"> <Item key="earth"> @@ -164,7 +166,7 @@ export const ItemWithStartIcon: ListboxStory = { }; export const ItemWithStartIconAndDescription: ListboxStory = { - storyName: "item with start icon and description", + name: "item with start icon and description", render: () => ( <Listbox aria-label="Planets"> <Item key="earth"> @@ -187,7 +189,7 @@ export const ItemWithStartIconAndDescription: ListboxStory = { }; export const ItemWithEndIcon: ListboxStory = { - storyName: "item with end icon", + name: "item with end icon", render: () => ( <Listbox aria-label="Planets"> <Item key="earth"> @@ -211,7 +213,7 @@ export const ItemWithEndIcon: ListboxStory = { }; export const ItemWithAvatar: ListboxStory = { - storyName: "item with avatar", + name: "item with avatar", render: () => ( <Listbox aria-label="Planets"> <Item key="earth"> @@ -231,7 +233,7 @@ export const ItemWithAvatar: ListboxStory = { }; export const ItemWithAvatarAndDescription: ListboxStory = { - storyName: "item with avatar and description", + name: "item with avatar and description", render: () => ( <Listbox aria-label="Planets"> <Item key="earth"> @@ -254,7 +256,7 @@ export const ItemWithAvatarAndDescription: ListboxStory = { }; export const ItemWithDescription: ListboxStory = { - storyName: "item with description", + name: "item with description", render: () => ( <Listbox aria-label="Planets"> <Item key="earth"> @@ -275,7 +277,7 @@ export const ItemWithDescription: ListboxStory = { }; export const ItemOverflow: ListboxStory = { - storyName: "item overflow", + name: "item overflow", render: () => ( <Inline> <Listbox aria-label="Planets"> @@ -293,7 +295,7 @@ export const ItemOverflow: ListboxStory = { }; export const ItemWithDescriptionOverflow: ListboxStory = { - storyName: "item with description overflow", + name: "item with description overflow", render: () => ( <Inline> <Listbox aria-label="Planets"> @@ -333,7 +335,7 @@ export const ItemWithDescriptionOverflow: ListboxStory = { }; export const ItemWithDescriptionOverflowWhenFluid: ListboxStory = { - storyName: "item with description overflow when fluid", + name: "item with description overflow when fluid", render: () => ( <Inline> <Listbox fluid width="16rem" aria-label="Planets"> @@ -371,7 +373,7 @@ export const ItemWithDescriptionOverflowWhenFluid: ListboxStory = { }; export const Fluid: ListboxStory = { - storyName: "fluid", + name: "fluid", render: () => ( <Listbox fluid aria-label="Planets"> <Item key="earth">Earth</Item> @@ -382,7 +384,7 @@ export const Fluid: ListboxStory = { }; export const Validation: ListboxStory = { - storyName: "validation", + name: "validation", render: () => ( <Stack> <Inline> @@ -446,7 +448,7 @@ export const Validation: ListboxStory = { }; export const States: ListboxStory = { - storyName: "states", + name: "states", render: () => ( <Inline> <Listbox selectedKeys={["earth"]} aria-label="Planets"> @@ -476,7 +478,7 @@ export const States: ListboxStory = { }; export const ArrayMap: ListboxStory = { - storyName: "array map", + name: "array map", render: () => ( <Listbox aria-label="Planets"> {["Earth", "Jupiter", "Mars", "Mercury", "Neptune", "Saturn", "Uranus"].map(x => ( @@ -503,7 +505,7 @@ const ActiveOption = ({ item, children, ...rest }: Omit<ListboxOptionProps, "ite export const CustomItemComponent: ListboxStory = { - storyName: "custom item component", + name: "custom item component", render: () => ( <Listbox aria-label="Planets"> <ActiveOption key="earth">Earth</ActiveOption> @@ -514,7 +516,7 @@ export const CustomItemComponent: ListboxStory = { }; export const ScrollingWithTooManyOptions: ListboxStory = { - storyName: "scrolling with too many options", + name: "scrolling with too many options", render: () => ( <Listbox aria-label="Planets"> <Item key="ceres">Ceres</Item> @@ -536,7 +538,7 @@ export const ScrollingWithTooManyOptions: ListboxStory = { }; export const ScrollingWithSections: ListboxStory = { - storyName: "scrolling with sections", + name: "scrolling with sections", render: () => ( <Listbox aria-label="Planets"> <Section title="Visited"> @@ -571,7 +573,7 @@ export const ScrollingWithSections: ListboxStory = { }; export const ScrollingWithDescriptions: ListboxStory = { - storyName: "scrolling with descriptions", + name: "scrolling with descriptions", render: () => ( <Listbox aria-label="Planets"> <Item key="earth"> @@ -615,7 +617,7 @@ export const ScrollingWithDescriptions: ListboxStory = { }; export const ScrollingMixMmatch: ListboxStory = { - storyName: "scrolling mix & match", + name: "scrolling mix & match", render: () => ( <Listbox aria-label="Planets"> <Section title="Visited"> @@ -647,7 +649,7 @@ export const ScrollingMixMmatch: ListboxStory = { }; export const ScrollingWithCustomStyleHeight: ListboxStory = { - storyName: "scrolling with custom style height", + name: "scrolling with custom style height", render: () => ( <Listbox height={960} aria-label="Planets"> <Item key="ceres">Ceres</Item> @@ -669,7 +671,7 @@ export const ScrollingWithCustomStyleHeight: ListboxStory = { }; export const CustomMenuWidth: ListboxStory = { - storyName: "custom menu width", + name: "custom menu width", render: () => ( <Listbox width="20rem" aria-label="Planets"> <Item key="earth">Earth</Item> @@ -680,7 +682,7 @@ export const CustomMenuWidth: ListboxStory = { }; export const Zoom: ListboxStory = { - storyName: "zoom", + name: "zoom", render: () => ( <Stack> <Div className="zoom-in"> @@ -704,7 +706,7 @@ export const Zoom: ListboxStory = { }; export const Styling: ListboxStory = { - storyName: "styling", + name: "styling", render: () => ( <Inline> <Listbox border="warning" aria-label="Planets"> diff --git a/packages/components/src/loader/tests/chromatic/Loader.stories.tsx b/packages/components/src/loader/tests/chromatic/Loader.stories.tsx index 49c4fcb31..e8a305dec 100644 --- a/packages/components/src/loader/tests/chromatic/Loader.stories.tsx +++ b/packages/components/src/loader/tests/chromatic/Loader.stories.tsx @@ -1,8 +1,8 @@ import { Loader } from "@components/loader"; import { Inline, Stack } from "@components/layout"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { component: Loader, title: "Chromatic/Loader", parameters: { @@ -11,19 +11,21 @@ export default { chromaticPauseAnimationAtEnd: true } } -} as ComponentMeta<typeof Loader>; +} as Meta<typeof Loader>; -type LoaderStory = ComponentStoryObj<typeof Loader>; +export default meta; + +type LoaderStory = StoryObj<typeof meta>; export const Default: LoaderStory = { - storyName: "default", + name: "default", render: () => ( <Loader aria-label="Loading..." /> ) }; export const Styling: LoaderStory = { - storyName: "styling", + name: "styling", render: () => ( <Inline alignY="end" > <Loader className="border-red" aria-label="Loading..." /> @@ -33,7 +35,7 @@ export const Styling: LoaderStory = { }; export const Zoom: LoaderStory = { - storyName: "zoom", + name: "zoom", render: () => ( <Stack> <Inline alignY="end" className="zoom-in"> diff --git a/packages/components/src/lozenge/tests/chromatic/Lozenge.stories.tsx b/packages/components/src/lozenge/tests/chromatic/Lozenge.stories.tsx index ff4d77cbd..d33acb84a 100644 --- a/packages/components/src/lozenge/tests/chromatic/Lozenge.stories.tsx +++ b/packages/components/src/lozenge/tests/chromatic/Lozenge.stories.tsx @@ -4,17 +4,19 @@ import { Div } from "@components/html"; import { Inline, Stack } from "@components/layout"; import { Lozenge } from "@components/lozenge"; import { Text } from "@components/typography"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/Lozenge", component: Lozenge -} as ComponentMeta<typeof Lozenge>; +} as Meta<typeof Lozenge>; -type LozengeStory = ComponentStoryObj<typeof Lozenge>; +export default meta; + +type LozengeStory = StoryObj<typeof meta>; export const Default: LozengeStory = { - storyName: "default", + name: "default", render: () => ( <Inline alignY="end"> <Lozenge size="sm">New</Lozenge> @@ -24,7 +26,7 @@ export const Default: LozengeStory = { }; export const Variants: LozengeStory = { - storyName: "variants", + name: "variants", render: () => ( <Inline alignY="end"> <Lozenge size="sm">New</Lozenge> @@ -84,7 +86,7 @@ export const Variants: LozengeStory = { }; export const Icon: LozengeStory = { - storyName: "icon", + name: "icon", render: () => ( <Stack> <Inline alignY="end"> @@ -110,7 +112,7 @@ export const Icon: LozengeStory = { }; export const HighlightAndVariant: LozengeStory = { - storyName: "highlight and variant", + name: "highlight and variant", render: () => ( <Stack> <Inline alignY="end"> @@ -172,7 +174,7 @@ export const HighlightAndVariant: LozengeStory = { }; export const InheritParentProperties: LozengeStory = { - storyName: "inherit parent properties", + name: "inherit parent properties", render: () => ( <Inline alignY="end"> <Lozenge textTransform="uppercase">New</Lozenge> @@ -185,7 +187,7 @@ export const InheritParentProperties: LozengeStory = { }; export const Fluid: LozengeStory = { - storyName: "fluid", + name: "fluid", render: () => ( <Div width="500px"> <Inline> @@ -201,7 +203,7 @@ export const Fluid: LozengeStory = { export const Zoom: LozengeStory = { - storyName: "zoom", + name: "zoom", render: () => ( <Inline> <Div className="zoom-in"> @@ -215,7 +217,7 @@ export const Zoom: LozengeStory = { }; export const Styling: LozengeStory = { - storyName: "styling", + name: "styling", render: () => ( <Inline> <Lozenge border="warning">New</Lozenge> diff --git a/packages/components/src/menu/tests/chromatic/Menu-hopper.stories.tsx b/packages/components/src/menu/tests/chromatic/Menu-hopper.stories.tsx index 683606e82..0cb518f61 100644 --- a/packages/components/src/menu/tests/chromatic/Menu-hopper.stories.tsx +++ b/packages/components/src/menu/tests/chromatic/Menu-hopper.stories.tsx @@ -5,9 +5,9 @@ import { Avatar, IconList, Text } from "@hopper-ui/components"; import { LightbulbIcon, NotificationIcon } from "@hopper-ui/icons"; import { Item, Section, NodeType } from "@components/collection"; import { Menu, MenuItem, MenuItemProps } from "@components/menu"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/Menu-hopper", component: Menu, parameters: { @@ -16,12 +16,14 @@ export default { chromaticPauseAnimationAtEnd: true } } -} as ComponentMeta<typeof Menu>; +} as Meta<typeof Menu>; -type MenuStory = ComponentStoryObj<typeof Menu>; +export default meta; + +type MenuStory = StoryObj<typeof meta>; export const OnlyItems: MenuStory = { - storyName: "only items", + name: "only items", render: () => ( <Menu aria-label="Planets"> <Item key="earth">Earth</Item> @@ -32,7 +34,7 @@ export const OnlyItems: MenuStory = { }; export const GeneratedKeys: MenuStory = { - storyName: "generated keys", + name: "generated keys", render: () => ( <Menu aria-label="Planets"> <Item>Earth</Item> @@ -43,7 +45,7 @@ export const GeneratedKeys: MenuStory = { }; export const Sections: MenuStory = { - storyName: "sections", + name: "sections", render: () => ( <Menu aria-label="Planets"> <Section title="Visited"> @@ -62,7 +64,7 @@ export const Sections: MenuStory = { }; export const Dividers: MenuStory = { - storyName: "dividers", + name: "dividers", render: () => ( <Menu aria-label="Planets"> <Item key="earth">Earth</Item> @@ -79,7 +81,7 @@ export const Dividers: MenuStory = { }; export const MixedSectionsItemsAndDividers: MenuStory = { - storyName: "mixed sections, items and dividers", + name: "mixed sections, items and dividers", render: () => ( <Menu aria-label="Planets"> <Item key="earth">Earth</Item> @@ -97,7 +99,7 @@ export const MixedSectionsItemsAndDividers: MenuStory = { }; export const SelectedKeys: MenuStory = { - storyName: "selected keys", + name: "selected keys", render: () => ( <Inline> <Menu defaultSelectedKeys={["mars"]} selectionMode="single" aria-label="Planets"> @@ -123,7 +125,7 @@ export const SelectedKeys: MenuStory = { }; export const ItemWithStartIcon: MenuStory = { - storyName: "item with start icon", + name: "item with start icon", render: () => ( <Menu aria-label="Planets"> <Item key="earth"> @@ -147,7 +149,7 @@ export const ItemWithStartIcon: MenuStory = { }; export const ItemWithStartIconAndDescription: MenuStory = { - storyName: "item with start icon and description", + name: "item with start icon and description", render: () => ( <Menu aria-label="Planets"> <Item key="earth"> @@ -170,7 +172,7 @@ export const ItemWithStartIconAndDescription: MenuStory = { }; export const ItemWithEndIcon: MenuStory = { - storyName: "item with end icon", + name: "item with end icon", render: () => ( <Menu aria-label="Planets"> <Item key="earth"> @@ -194,7 +196,7 @@ export const ItemWithEndIcon: MenuStory = { }; export const ItemWithAvatar: MenuStory = { - storyName: "item with avatar", + name: "item with avatar", render: () => ( <Menu aria-label="Planets"> <Item key="earth"> @@ -214,7 +216,7 @@ export const ItemWithAvatar: MenuStory = { }; export const ItemWithAvatarAndDescription: MenuStory = { - storyName: "item with avatar and description", + name: "item with avatar and description", render: () => ( <Menu aria-label="Planets"> <Item key="earth"> @@ -237,7 +239,7 @@ export const ItemWithAvatarAndDescription: MenuStory = { }; export const ItemWithDescription: MenuStory = { - storyName: "item with description", + name: "item with description", render: () => ( <Menu aria-label="Planets"> <Item key="earth"> @@ -258,7 +260,7 @@ export const ItemWithDescription: MenuStory = { }; export const ItemOverflow: MenuStory = { - storyName: "item overflow", + name: "item overflow", render: () => ( <Inline> <Menu width={960} aria-label="Planets"> @@ -276,7 +278,7 @@ export const ItemOverflow: MenuStory = { }; export const ItemWithDescriptionOverflow: MenuStory = { - storyName: "item with description overflow", + name: "item with description overflow", render: () => ( <Inline> <Menu aria-label="Planets"> @@ -322,7 +324,7 @@ export const ItemWithDescriptionOverflow: MenuStory = { }; export const ItemWithDescriptionOverflowWhenFluid: MenuStory = { - storyName: "item with description overflow when fluid", + name: "item with description overflow when fluid", render: () => ( <Inline> <Menu fluid width="16rem" aria-label="Planets"> @@ -360,7 +362,7 @@ export const ItemWithDescriptionOverflowWhenFluid: MenuStory = { }; export const Fluid: MenuStory = { - storyName: "fluid", + name: "fluid", render: () => ( <Menu fluid aria-label="Planets"> <Item key="earth">Earth</Item> @@ -371,7 +373,7 @@ export const Fluid: MenuStory = { }; export const ValidationState: MenuStory = { - storyName: "validation state", + name: "validation state", render: () => ( <Stack> <Inline> @@ -435,7 +437,7 @@ export const ValidationState: MenuStory = { }; export const States: MenuStory = { - storyName: "states", + name: "states", render: () => ( <Stack> <Inline> @@ -487,7 +489,7 @@ export const States: MenuStory = { }; export const DynamicItems: MenuStory = { - storyName: "dynamic items", + name: "dynamic items", render: () => ( <Menu aria-label="Planets"> {["Earth", "Jupiter", "Mars", "Mercury", "Neptune", "Saturn", "Uranus"].map(x => ( @@ -517,7 +519,7 @@ const RedItem = ({ children, ...rest }: Omit<MenuItemProps, "item">) => { }; export const CustomItemComponent: MenuStory = { - storyName: "custom item component", + name: "custom item component", render: () => ( <Menu aria-label="Planets"> <RedItem key="earth">Earth</RedItem> @@ -537,7 +539,7 @@ export const CustomItemComponent: MenuStory = { }; export const AdaptWidthToLargestItem: MenuStory = { - storyName: "adapt width to largest item", + name: "adapt width to largest item", render: () => ( <Menu aria-label="Planets"> <Item>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</Item> @@ -548,7 +550,7 @@ export const AdaptWidthToLargestItem: MenuStory = { }; export const CustomMenuWidth: MenuStory = { - storyName: "custom menu width", + name: "custom menu width", render: () => ( <Menu width="20rem" aria-label="Planets"> <Item key="earth">Earth</Item> @@ -559,7 +561,7 @@ export const CustomMenuWidth: MenuStory = { }; export const ConditionalRendering: MenuStory = { - storyName: "conditional rendering", + name: "conditional rendering", render: () => ( <Menu aria-label="Planets"> {false && <Item key="earth">Earth</Item>} @@ -570,7 +572,7 @@ export const ConditionalRendering: MenuStory = { }; export const ScrollingWithTooManyItems: MenuStory = { - storyName: "scrolling with too many items", + name: "scrolling with too many items", render: () => ( <Menu selectionMode="single" aria-label="Planets"> <Item key="ceres">Ceres</Item> @@ -592,7 +594,7 @@ export const ScrollingWithTooManyItems: MenuStory = { }; export const ScrollingWithSections: MenuStory = { - storyName: "scrolling with sections", + name: "scrolling with sections", render: () => ( <Menu selectionMode="single" aria-label="Planets"> <Section title="Visited"> @@ -628,7 +630,7 @@ export const ScrollingWithSections: MenuStory = { }; export const ScrollingWithDividers: MenuStory = { - storyName: "scrolling with dividers", + name: "scrolling with dividers", render: () => ( <Menu selectionMode="single" aria-label="Planets"> <Item key="ceres">Ceres</Item> @@ -652,7 +654,7 @@ export const ScrollingWithDividers: MenuStory = { }; export const ScrollingWithDescriptions: MenuStory = { - storyName: "scrolling with descriptions", + name: "scrolling with descriptions", render: () => ( <Menu selectionMode="single" aria-label="Planets"> <Item key="earth"> @@ -696,7 +698,7 @@ export const ScrollingWithDescriptions: MenuStory = { }; export const ScrollingMixMatch: MenuStory = { - storyName: "scrolling mix & match", + name: "scrolling mix & match", render: () => ( <Menu selectionMode="single" aria-label="Planets"> <Section title="Visited"> @@ -729,7 +731,7 @@ export const ScrollingMixMatch: MenuStory = { }; export const ScrollingWithCustomStyleHeight: MenuStory = { - storyName: "scrolling with custom style height", + name: "scrolling with custom style height", render: () => ( <Menu selectionMode="single" height={960} aria-label="Planets"> <Item key="ceres">Ceres</Item> @@ -751,7 +753,7 @@ export const ScrollingWithCustomStyleHeight: MenuStory = { }; export const Zoom: MenuStory = { - storyName: "zoom", + name: "zoom", render: () => ( <Stack> <Div className="zoom-in"> @@ -773,7 +775,7 @@ export const Zoom: MenuStory = { }; export const Styling: MenuStory = { - storyName: "styling", + name: "styling", render: () => ( <Inline> <Menu border="warning" aria-label="Planets"> diff --git a/packages/components/src/menu/tests/chromatic/Menu.stories.tsx b/packages/components/src/menu/tests/chromatic/Menu.stories.tsx index 617a4dedb..194974785 100644 --- a/packages/components/src/menu/tests/chromatic/Menu.stories.tsx +++ b/packages/components/src/menu/tests/chromatic/Menu.stories.tsx @@ -7,9 +7,9 @@ import { Inline, Stack } from "@components/layout"; import { Item, Section, NodeType } from "@components/collection"; import { Menu, MenuItem, MenuItemProps } from "@components/menu"; import { Text } from "@components/typography"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/Menu", component: Menu, parameters: { @@ -18,12 +18,14 @@ export default { chromaticPauseAnimationAtEnd: true } } -} as ComponentMeta<typeof Menu>; +} as Meta<typeof Menu>; -type MenuStory = ComponentStoryObj<typeof Menu>; +export default meta; + +type MenuStory = StoryObj<typeof meta>; export const OnlyItems: MenuStory = { - storyName: "only items", + name: "only items", render: () => ( <Menu aria-label="Planets"> <Item key="earth">Earth</Item> @@ -34,7 +36,7 @@ export const OnlyItems: MenuStory = { }; export const GeneratedKeys: MenuStory = { - storyName: "generated keys", + name: "generated keys", render: () => ( <Menu aria-label="Planets"> <Item>Earth</Item> @@ -45,7 +47,7 @@ export const GeneratedKeys: MenuStory = { }; export const Sections: MenuStory = { - storyName: "sections", + name: "sections", render: () => ( <Menu aria-label="Planets"> <Section title="Visited"> @@ -64,7 +66,7 @@ export const Sections: MenuStory = { }; export const Dividers: MenuStory = { - storyName: "dividers", + name: "dividers", render: () => ( <Menu aria-label="Planets"> <Item key="earth">Earth</Item> @@ -81,7 +83,7 @@ export const Dividers: MenuStory = { }; export const MixedSectionsItemsAndDividers: MenuStory = { - storyName: "mixed sections, items and dividers", + name: "mixed sections, items and dividers", render: () => ( <Menu aria-label="Planets"> <Item key="earth">Earth</Item> @@ -99,7 +101,7 @@ export const MixedSectionsItemsAndDividers: MenuStory = { }; export const SelectedKeys: MenuStory = { - storyName: "selected keys", + name: "selected keys", render: () => ( <Inline> <Menu defaultSelectedKeys={["mars"]} selectionMode="single" aria-label="Planets"> @@ -125,7 +127,7 @@ export const SelectedKeys: MenuStory = { }; export const ItemWithStartIcon: MenuStory = { - storyName: "item with start icon", + name: "item with start icon", render: () => ( <Menu aria-label="Planets"> <Item key="earth"> @@ -149,7 +151,7 @@ export const ItemWithStartIcon: MenuStory = { }; export const ItemWithStartIconAndDescription: MenuStory = { - storyName: "item with start icon and description", + name: "item with start icon and description", render: () => ( <Menu aria-label="Planets"> <Item key="earth"> @@ -172,7 +174,7 @@ export const ItemWithStartIconAndDescription: MenuStory = { }; export const ItemWithEndIcon: MenuStory = { - storyName: "item with end icon", + name: "item with end icon", render: () => ( <Menu aria-label="Planets"> <Item key="earth"> @@ -196,7 +198,7 @@ export const ItemWithEndIcon: MenuStory = { }; export const ItemWithAvatar: MenuStory = { - storyName: "item with avatar", + name: "item with avatar", render: () => ( <Menu aria-label="Planets"> <Item key="earth"> @@ -216,7 +218,7 @@ export const ItemWithAvatar: MenuStory = { }; export const ItemWithAvatarAndDescription: MenuStory = { - storyName: "item with avatar and description", + name: "item with avatar and description", render: () => ( <Menu aria-label="Planets"> <Item key="earth"> @@ -239,7 +241,7 @@ export const ItemWithAvatarAndDescription: MenuStory = { }; export const ItemWithDescription: MenuStory = { - storyName: "item with description", + name: "item with description", render: () => ( <Menu aria-label="Planets"> <Item key="earth"> @@ -260,7 +262,7 @@ export const ItemWithDescription: MenuStory = { }; export const ItemOverflow: MenuStory = { - storyName: "item overflow", + name: "item overflow", render: () => ( <Inline> <Menu width={960} aria-label="Planets"> @@ -278,7 +280,7 @@ export const ItemOverflow: MenuStory = { }; export const ItemWithDescriptionOverflow: MenuStory = { - storyName: "item with description overflow", + name: "item with description overflow", render: () => ( <Inline> <Menu aria-label="Planets"> @@ -324,7 +326,7 @@ export const ItemWithDescriptionOverflow: MenuStory = { }; export const ItemWithDescriptionOverflowWhenFluid: MenuStory = { - storyName: "item with description overflow when fluid", + name: "item with description overflow when fluid", render: () => ( <Inline> <Menu fluid width="16rem" aria-label="Planets"> @@ -362,7 +364,7 @@ export const ItemWithDescriptionOverflowWhenFluid: MenuStory = { }; export const Fluid: MenuStory = { - storyName: "fluid", + name: "fluid", render: () => ( <Menu fluid aria-label="Planets"> <Item key="earth">Earth</Item> @@ -373,7 +375,7 @@ export const Fluid: MenuStory = { }; export const ValidationState: MenuStory = { - storyName: "validation state", + name: "validation state", render: () => ( <Stack> <Inline> @@ -437,7 +439,7 @@ export const ValidationState: MenuStory = { }; export const States: MenuStory = { - storyName: "states", + name: "states", render: () => ( <Stack> <Inline> @@ -489,7 +491,7 @@ export const States: MenuStory = { }; export const DynamicItems: MenuStory = { - storyName: "dynamic items", + name: "dynamic items", render: () => ( <Menu aria-label="Planets"> {["Earth", "Jupiter", "Mars", "Mercury", "Neptune", "Saturn", "Uranus"].map(x => ( @@ -519,7 +521,7 @@ const RedItem = ({ children, ...rest }: Omit<MenuItemProps, "item">) => { }; export const CustomItemComponent: MenuStory = { - storyName: "custom item component", + name: "custom item component", render: () => ( <Menu aria-label="Planets"> <RedItem key="earth">Earth</RedItem> @@ -539,7 +541,7 @@ export const CustomItemComponent: MenuStory = { }; export const AdaptWidthToLargestItem: MenuStory = { - storyName: "adapt width to largest item", + name: "adapt width to largest item", render: () => ( <Menu aria-label="Planets"> <Item>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</Item> @@ -550,7 +552,7 @@ export const AdaptWidthToLargestItem: MenuStory = { }; export const CustomMenuWidth: MenuStory = { - storyName: "custom menu width", + name: "custom menu width", render: () => ( <Menu width="20rem" aria-label="Planets"> <Item key="earth">Earth</Item> @@ -561,7 +563,7 @@ export const CustomMenuWidth: MenuStory = { }; export const ConditionalRendering: MenuStory = { - storyName: "conditional rendering", + name: "conditional rendering", render: () => ( <Menu aria-label="Planets"> {false && <Item key="earth">Earth</Item>} @@ -572,7 +574,7 @@ export const ConditionalRendering: MenuStory = { }; export const ScrollingWithTooManyItems: MenuStory = { - storyName: "scrolling with too many items", + name: "scrolling with too many items", render: () => ( <Menu selectionMode="single" aria-label="Planets"> <Item key="ceres">Ceres</Item> @@ -594,7 +596,7 @@ export const ScrollingWithTooManyItems: MenuStory = { }; export const ScrollingWithSections: MenuStory = { - storyName: "scrolling with sections", + name: "scrolling with sections", render: () => ( <Menu selectionMode="single" aria-label="Planets"> <Section title="Visited"> @@ -630,7 +632,7 @@ export const ScrollingWithSections: MenuStory = { }; export const ScrollingWithDividers: MenuStory = { - storyName: "scrolling with dividers", + name: "scrolling with dividers", render: () => ( <Menu selectionMode="single" aria-label="Planets"> <Item key="ceres">Ceres</Item> @@ -654,7 +656,7 @@ export const ScrollingWithDividers: MenuStory = { }; export const ScrollingWithDescriptions: MenuStory = { - storyName: "scrolling with descriptions", + name: "scrolling with descriptions", render: () => ( <Menu selectionMode="single" aria-label="Planets"> <Item key="earth"> @@ -698,7 +700,7 @@ export const ScrollingWithDescriptions: MenuStory = { }; export const ScrollingMixMatch: MenuStory = { - storyName: "scrolling mix & match", + name: "scrolling mix & match", render: () => ( <Menu selectionMode="single" aria-label="Planets"> <Section title="Visited"> @@ -731,7 +733,7 @@ export const ScrollingMixMatch: MenuStory = { }; export const ScrollingWithCustomStyleHeight: MenuStory = { - storyName: "scrolling with custom style height", + name: "scrolling with custom style height", render: () => ( <Menu selectionMode="single" height={960} aria-label="Planets"> <Item key="ceres">Ceres</Item> @@ -753,7 +755,7 @@ export const ScrollingWithCustomStyleHeight: MenuStory = { }; export const Zoom: MenuStory = { - storyName: "zoom", + name: "zoom", render: () => ( <Stack> <Div className="zoom-in"> @@ -775,7 +777,7 @@ export const Zoom: MenuStory = { }; export const Styling: MenuStory = { - storyName: "styling", + name: "styling", render: () => ( <Inline> <Menu border="warning" aria-label="Planets"> diff --git a/packages/components/src/menu/tests/chromatic/MenuTrigger-hopper.stories.tsx b/packages/components/src/menu/tests/chromatic/MenuTrigger-hopper.stories.tsx index 70e724125..276c2f3de 100644 --- a/packages/components/src/menu/tests/chromatic/MenuTrigger-hopper.stories.tsx +++ b/packages/components/src/menu/tests/chromatic/MenuTrigger-hopper.stories.tsx @@ -7,9 +7,9 @@ import { HtmlButton, HtmlButtonProps } from "@components/html"; import { Text } from "@hopper-ui/components"; import { KebabIcon } from "@hopper-ui/icons"; import { forwardRef } from "react"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/MenuTrigger-hopper", component: MenuTrigger, parameters: { @@ -18,12 +18,14 @@ export default { chromaticPauseAnimationAtEnd: true } } -} as ComponentMeta<typeof MenuTrigger>; +} as Meta<typeof MenuTrigger>; -type MenuTriggerStory = ComponentStoryObj<typeof MenuTrigger>; +export default meta; + +type MenuTriggerStory = StoryObj<typeof meta>; export const Default: MenuTriggerStory = { - storyName: "default", + name: "default", render: () => ( <MenuTrigger> <Button variant="secondary">Trigger</Button> @@ -37,7 +39,7 @@ export const Default: MenuTriggerStory = { }; export const OpenWithItemsOnly: MenuTriggerStory = { - storyName: "open with items only", + name: "open with items only", render: () => ( <MenuTrigger defaultOpen> <Button variant="secondary">Trigger</Button> @@ -51,7 +53,7 @@ export const OpenWithItemsOnly: MenuTriggerStory = { }; export const OpenWithSections: MenuTriggerStory = { - storyName: "open with sections", + name: "open with sections", render: () => ( <MenuTrigger defaultOpen> <Button variant="secondary">Trigger</Button> @@ -73,7 +75,7 @@ export const OpenWithSections: MenuTriggerStory = { }; export const OpenWithDividers: MenuTriggerStory = { - storyName: "open with dividers", + name: "open with dividers", render: () => ( <MenuTrigger defaultOpen> <Button variant="secondary">Trigger</Button> @@ -92,7 +94,7 @@ export const OpenWithDividers: MenuTriggerStory = { }; export const OpenWithASelectedItem: MenuTriggerStory = { - storyName: "open with a selected item", + name: "open with a selected item", render: () => ( <MenuTrigger defaultOpen> <Button variant="secondary">Trigger</Button> @@ -106,7 +108,7 @@ export const OpenWithASelectedItem: MenuTriggerStory = { }; export const OpenWithMultipleSelectedItems: MenuTriggerStory = { - storyName: "open with multiple selected items", + name: "open with multiple selected items", render: () => ( <MenuTrigger defaultOpen> <Button variant="secondary">Trigger</Button> @@ -120,7 +122,7 @@ export const OpenWithMultipleSelectedItems: MenuTriggerStory = { }; export const DirectionBottom: MenuTriggerStory = { - storyName: "direction bottom", + name: "direction bottom", render: () => ( <MenuTrigger direction="bottom" defaultOpen> <Button variant="secondary">Trigger</Button> @@ -134,7 +136,7 @@ export const DirectionBottom: MenuTriggerStory = { }; export const DirectionTop: MenuTriggerStory = { - storyName: "direction top", + name: "direction top", decorators: [Story => <div style={{ marginTop: "100px" }}><Story /></div>], render: () => ( <MenuTrigger direction="top" defaultOpen> @@ -149,7 +151,7 @@ export const DirectionTop: MenuTriggerStory = { }; export const AlignStart: MenuTriggerStory = { - storyName: "align start", + name: "align start", decorators: [Story => <div style={{ paddingLeft: "200px" }}><Story /></div>], render: () => ( <MenuTrigger align="start" allowFlip={false} allowPreventOverflow={false} defaultOpen> @@ -164,7 +166,7 @@ export const AlignStart: MenuTriggerStory = { }; export const AlignEnd: MenuTriggerStory = { - storyName: "align end", + name: "align end", decorators: [Story => <div style={{ paddingLeft: "200px" }}><Story /></div>], render: () => ( <MenuTrigger align="end" allowFlip={false} allowPreventOverflow={false} defaultOpen> @@ -179,7 +181,7 @@ export const AlignEnd: MenuTriggerStory = { }; export const IconButtonTrigger: MenuTriggerStory = { - storyName: "icon button trigger", + name: "icon button trigger", render: () => ( <MenuTrigger defaultOpen> <IconButton variant="secondary" aria-label="Open menu"> @@ -210,7 +212,7 @@ const CustomTrigger = forwardRef<any, Partial<HtmlButtonProps>>((props, ref) => }); export const CustomTriggerWithDisclosureArrow: MenuTriggerStory = { - storyName: "custom trigger with disclosure arrow", + name: "custom trigger with disclosure arrow", render: () => ( <MenuTrigger defaultOpen> <CustomTrigger /> @@ -237,7 +239,7 @@ const CustomMenu = forwardRef<any, MenuProps>(({ children, ...props }, ref) => { export const MenuTriggerCustomMenu: MenuTriggerStory = { - storyName: "custom menu", + name: "custom menu", render: () => ( <MenuTrigger defaultOpen> <Button variant="secondary">Trigger</Button> @@ -251,7 +253,7 @@ export const MenuTriggerCustomMenu: MenuTriggerStory = { }; export const FunctionalContent: MenuTriggerStory = { - storyName: "functional content", + name: "functional content", render: () => ( <MenuTrigger defaultOpen> {(() => { @@ -271,7 +273,7 @@ export const FunctionalContent: MenuTriggerStory = { }; export const StyledSystem: MenuTriggerStory = { - storyName: "styled system", + name: "styled system", render: () => ( <MenuTrigger border="warning" defaultOpen> <Button variant="secondary">Trigger</Button> @@ -285,7 +287,7 @@ export const StyledSystem: MenuTriggerStory = { }; export const ClassName: MenuTriggerStory = { - storyName: "className", + name: "className", render: () => ( <MenuTrigger className="border-red" defaultOpen> <Button variant="secondary">Trigger</Button> @@ -299,7 +301,7 @@ export const ClassName: MenuTriggerStory = { }; export const Style: MenuTriggerStory = { - storyName: "style", + name: "style", render: () => ( <MenuTrigger style={{ border: "1px solid red" }} defaultOpen> <Button variant="secondary">Trigger</Button> diff --git a/packages/components/src/menu/tests/chromatic/MenuTrigger.stories.tsx b/packages/components/src/menu/tests/chromatic/MenuTrigger.stories.tsx index 165b4cf14..bf6373612 100644 --- a/packages/components/src/menu/tests/chromatic/MenuTrigger.stories.tsx +++ b/packages/components/src/menu/tests/chromatic/MenuTrigger.stories.tsx @@ -7,9 +7,9 @@ import { HtmlButton, HtmlButtonProps } from "@components/html"; import { Text } from "@components/typography"; import { KebabIcon } from "@hopper-ui/icons"; import { forwardRef } from "react"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/MenuTrigger", component: MenuTrigger, parameters: { @@ -18,12 +18,14 @@ export default { chromaticPauseAnimationAtEnd: true } } -} as ComponentMeta<typeof MenuTrigger>; +} as Meta<typeof MenuTrigger>; -type MenuTriggerStory = ComponentStoryObj<typeof MenuTrigger>; +export default meta; + +type MenuTriggerStory = StoryObj<typeof meta>; export const Default: MenuTriggerStory = { - storyName: "default", + name: "default", render: () => ( <MenuTrigger> <Button variant="secondary">Trigger</Button> @@ -37,7 +39,7 @@ export const Default: MenuTriggerStory = { }; export const OpenWithItemsOnly: MenuTriggerStory = { - storyName: "open with items only", + name: "open with items only", render: () => ( <MenuTrigger defaultOpen> <Button variant="secondary">Trigger</Button> @@ -51,7 +53,7 @@ export const OpenWithItemsOnly: MenuTriggerStory = { }; export const OpenWithSections: MenuTriggerStory = { - storyName: "open with sections", + name: "open with sections", render: () => ( <MenuTrigger defaultOpen> <Button variant="secondary">Trigger</Button> @@ -73,7 +75,7 @@ export const OpenWithSections: MenuTriggerStory = { }; export const OpenWithDividers: MenuTriggerStory = { - storyName: "open with dividers", + name: "open with dividers", render: () => ( <MenuTrigger defaultOpen> <Button variant="secondary">Trigger</Button> @@ -92,7 +94,7 @@ export const OpenWithDividers: MenuTriggerStory = { }; export const OpenWithASelectedItem: MenuTriggerStory = { - storyName: "open with a selected item", + name: "open with a selected item", render: () => ( <MenuTrigger defaultOpen> <Button variant="secondary">Trigger</Button> @@ -106,7 +108,7 @@ export const OpenWithASelectedItem: MenuTriggerStory = { }; export const OpenWithMultipleSelectedItems: MenuTriggerStory = { - storyName: "open with multiple selected items", + name: "open with multiple selected items", render: () => ( <MenuTrigger defaultOpen> <Button variant="secondary">Trigger</Button> @@ -120,7 +122,7 @@ export const OpenWithMultipleSelectedItems: MenuTriggerStory = { }; export const DirectionBottom: MenuTriggerStory = { - storyName: "direction bottom", + name: "direction bottom", render: () => ( <MenuTrigger direction="bottom" defaultOpen> <Button variant="secondary">Trigger</Button> @@ -134,7 +136,7 @@ export const DirectionBottom: MenuTriggerStory = { }; export const DirectionTop: MenuTriggerStory = { - storyName: "direction top", + name: "direction top", decorators: [Story => <div style={{ marginTop: "100px" }}><Story /></div>], render: () => ( <MenuTrigger direction="top" defaultOpen> @@ -149,7 +151,7 @@ export const DirectionTop: MenuTriggerStory = { }; export const AlignStart: MenuTriggerStory = { - storyName: "align start", + name: "align start", decorators: [Story => <div style={{ paddingLeft: "200px" }}><Story /></div>], render: () => ( <MenuTrigger align="start" allowFlip={false} allowPreventOverflow={false} defaultOpen> @@ -164,7 +166,7 @@ export const AlignStart: MenuTriggerStory = { }; export const AlignEnd: MenuTriggerStory = { - storyName: "align end", + name: "align end", decorators: [Story => <div style={{ paddingLeft: "200px" }}><Story /></div>], render: () => ( <MenuTrigger align="end" allowFlip={false} allowPreventOverflow={false} defaultOpen> @@ -179,7 +181,7 @@ export const AlignEnd: MenuTriggerStory = { }; export const IconButtonTrigger: MenuTriggerStory = { - storyName: "icon button trigger", + name: "icon button trigger", render: () => ( <MenuTrigger defaultOpen> <IconButton variant="secondary" aria-label="Open menu"> @@ -210,7 +212,7 @@ const CustomTrigger = forwardRef<any, Partial<HtmlButtonProps>>((props, ref) => }); export const CustomTriggerWithDisclosureArrow: MenuTriggerStory = { - storyName: "custom trigger with disclosure arrow", + name: "custom trigger with disclosure arrow", render: () => ( <MenuTrigger defaultOpen> <CustomTrigger /> @@ -237,7 +239,7 @@ const CustomMenu = forwardRef<any, MenuProps>(({ children, ...props }, ref) => { export const MenuTriggerCustomMenu: MenuTriggerStory = { - storyName: "custom menu", + name: "custom menu", render: () => ( <MenuTrigger defaultOpen> <Button variant="secondary">Trigger</Button> @@ -251,7 +253,7 @@ export const MenuTriggerCustomMenu: MenuTriggerStory = { }; export const FunctionalContent: MenuTriggerStory = { - storyName: "functional content", + name: "functional content", render: () => ( <MenuTrigger defaultOpen> {(() => { @@ -271,7 +273,7 @@ export const FunctionalContent: MenuTriggerStory = { }; export const StyledSystem: MenuTriggerStory = { - storyName: "styled system", + name: "styled system", render: () => ( <MenuTrigger border="warning" defaultOpen> <Button variant="secondary">Trigger</Button> @@ -285,7 +287,7 @@ export const StyledSystem: MenuTriggerStory = { }; export const ClassName: MenuTriggerStory = { - storyName: "className", + name: "className", render: () => ( <MenuTrigger className="border-red" defaultOpen> <Button variant="secondary">Trigger</Button> @@ -299,7 +301,7 @@ export const ClassName: MenuTriggerStory = { }; export const Style: MenuTriggerStory = { - storyName: "style", + name: "style", render: () => ( <MenuTrigger style={{ border: "1px solid red" }} defaultOpen> <Button variant="secondary">Trigger</Button> diff --git a/packages/components/src/modal/tests/chromatic/Modal-hopper.stories.tsx b/packages/components/src/modal/tests/chromatic/Modal-hopper.stories.tsx index 6f5c3d226..e4c92ca7b 100644 --- a/packages/components/src/modal/tests/chromatic/Modal-hopper.stories.tsx +++ b/packages/components/src/modal/tests/chromatic/Modal-hopper.stories.tsx @@ -8,17 +8,19 @@ import { Illustration } from "@components/illustration"; import { Image } from "@components/image"; import { Modal } from "@components/modal"; import { Button, Heading } from "@hopper-ui/components"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/Modal-hopper", component: Modal -} as ComponentMeta<typeof Modal>; +} as Meta<typeof Modal>; -type ModalStory = ComponentStoryObj<typeof Modal>; +export default meta; + +type ModalStory = StoryObj<typeof meta>; export const Default: ModalStory = { - storyName: "default", + name: "default", render: () => ( <Modal> <Heading>Iconic Arecibo Observatory collapses</Heading> @@ -32,7 +34,7 @@ export const Default: ModalStory = { }; export const ModalImage: ModalStory = { - storyName: "image", + name: "image", render: () => ( <Modal> <Image src={Apollo11Poster} alt="Apollo 11" /> @@ -47,7 +49,7 @@ export const ModalImage: ModalStory = { }; export const ModalIllustration: ModalStory = { - storyName: "illustration", + name: "illustration", render: () => ( <Modal> <Illustration color="sunken-treasure-100"> @@ -64,7 +66,7 @@ export const ModalIllustration: ModalStory = { }; export const ModalChoice: ModalStory = { - storyName: "choice", + name: "choice", render: () => ( <Modal> <Heading>Space agencies</Heading> @@ -87,7 +89,7 @@ export const ModalChoice: ModalStory = { }; export const ChoiceWithText: ModalStory = { - storyName: "choice with text", + name: "choice with text", render: () => ( <Modal> <Heading>Space agencies</Heading> @@ -111,7 +113,7 @@ export const ChoiceWithText: ModalStory = { }; export const ChoiceWithContentBetweenCards: ModalStory = { - storyName: "choice with content between cards", + name: "choice with content between cards", render: () => ( <Modal> <Heading>Space agencies</Heading> @@ -136,7 +138,7 @@ export const ChoiceWithContentBetweenCards: ModalStory = { }; export const StyledSystemStyleProp: ModalStory = { - storyName: "styled system styleProp", + name: "styled system styleProp", render: () => ( <Modal border="warning"> <Heading>Iconic Arecibo Observatory collapses</Heading> @@ -150,7 +152,7 @@ export const StyledSystemStyleProp: ModalStory = { }; export const ClassName: ModalStory = { - storyName: "className", + name: "className", render: () => ( <Modal className="border-red"> <Heading>Iconic Arecibo Observatory collapses</Heading> @@ -164,7 +166,7 @@ export const ClassName: ModalStory = { }; export const ZoomIn: ModalStory = { - storyName: "zoom in", + name: "zoom in", render: () => ( <Div className="zoom-in"> <Modal> @@ -180,7 +182,7 @@ export const ZoomIn: ModalStory = { }; export const ZoomOut: ModalStory = { - storyName: "zoom out", + name: "zoom out", render: () => ( <Div className="zoom-out"> <Modal> @@ -195,7 +197,7 @@ export const ZoomOut: ModalStory = { ) }; export const StyledSystem: ModalStory = { - storyName: "styled system", + name: "styled system", render: () => ( <Modal style={{ border: "1px solid red" }}> <Heading>Iconic Arecibo Observatory collapses</Heading> diff --git a/packages/components/src/modal/tests/chromatic/Modal.stories.tsx b/packages/components/src/modal/tests/chromatic/Modal.stories.tsx index 7b7870a51..35afe637d 100644 --- a/packages/components/src/modal/tests/chromatic/Modal.stories.tsx +++ b/packages/components/src/modal/tests/chromatic/Modal.stories.tsx @@ -8,17 +8,19 @@ import { Div } from "@components/html"; import { Illustration } from "@components/illustration"; import { Image } from "@components/image"; import { Modal } from "@components/modal"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/Modal", component: Modal -} as ComponentMeta<typeof Modal>; +} as Meta<typeof Modal>; -type ModalStory = ComponentStoryObj<typeof Modal>; +export default meta; + +type ModalStory = StoryObj<typeof meta>; export const Default: ModalStory = { - storyName: "default", + name: "default", render: () => ( <Modal> <Heading>Iconic Arecibo Observatory collapses</Heading> @@ -32,7 +34,7 @@ export const Default: ModalStory = { }; export const ModalImage: ModalStory = { - storyName: "image", + name: "image", render: () => ( <Modal> <Image src={Apollo11Poster} alt="Apollo 11" /> @@ -47,7 +49,7 @@ export const ModalImage: ModalStory = { }; export const ModalIllustration: ModalStory = { - storyName: "illustration", + name: "illustration", render: () => ( <Modal> <Illustration color="sunken-treasure-100"> @@ -64,7 +66,7 @@ export const ModalIllustration: ModalStory = { }; export const ModalChoice: ModalStory = { - storyName: "choice", + name: "choice", render: () => ( <Modal> <Heading>Space agencies</Heading> @@ -87,7 +89,7 @@ export const ModalChoice: ModalStory = { }; export const ChoiceWithText: ModalStory = { - storyName: "choice with text", + name: "choice with text", render: () => ( <Modal> <Heading>Space agencies</Heading> @@ -111,7 +113,7 @@ export const ChoiceWithText: ModalStory = { }; export const ChoiceWithContentBetweenCards: ModalStory = { - storyName: "choice with content between cards", + name: "choice with content between cards", render: () => ( <Modal> <Heading>Space agencies</Heading> @@ -136,7 +138,7 @@ export const ChoiceWithContentBetweenCards: ModalStory = { }; export const StyledSystemStyleProp: ModalStory = { - storyName: "styled system styleProp", + name: "styled system styleProp", render: () => ( <Modal border="warning"> <Heading>Iconic Arecibo Observatory collapses</Heading> @@ -150,7 +152,7 @@ export const StyledSystemStyleProp: ModalStory = { }; export const ClassName: ModalStory = { - storyName: "className", + name: "className", render: () => ( <Modal className="border-red"> <Heading>Iconic Arecibo Observatory collapses</Heading> @@ -164,7 +166,7 @@ export const ClassName: ModalStory = { }; export const ZoomIn: ModalStory = { - storyName: "zoom in", + name: "zoom in", render: () => ( <Div className="zoom-in"> <Modal> @@ -180,7 +182,7 @@ export const ZoomIn: ModalStory = { }; export const ZoomOut: ModalStory = { - storyName: "zoom out", + name: "zoom out", render: () => ( <Div className="zoom-out"> <Modal> @@ -195,7 +197,7 @@ export const ZoomOut: ModalStory = { ) }; export const StyledSystem: ModalStory = { - storyName: "styled system", + name: "styled system", render: () => ( <Modal style={{ border: "1px solid red" }}> <Heading>Iconic Arecibo Observatory collapses</Heading> diff --git a/packages/components/src/modal/tests/chromatic/ModalTrigger-hopper.stories.tsx b/packages/components/src/modal/tests/chromatic/ModalTrigger-hopper.stories.tsx index 2dbb2799a..cadfe6444 100644 --- a/packages/components/src/modal/tests/chromatic/ModalTrigger-hopper.stories.tsx +++ b/packages/components/src/modal/tests/chromatic/ModalTrigger-hopper.stories.tsx @@ -2,17 +2,19 @@ import { Paragraph } from "@components/typography"; import { Modal, ModalTrigger } from "@components/modal"; import { Content } from "@components/placeholders"; import { Button, Heading } from "@hopper-ui/components"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/ModalTrigger-hopper", component: ModalTrigger -} as ComponentMeta<typeof ModalTrigger>; +} as Meta<typeof ModalTrigger>; -type ModalTriggerStory = ComponentStoryObj<typeof ModalTrigger>; +export default meta; + +type ModalTriggerStory = StoryObj<typeof meta>; export const Default: ModalTriggerStory = { - storyName: "default", + name: "default", render: () => ( <ModalTrigger> <Button variant="secondary">Open</Button> @@ -29,7 +31,7 @@ export const Default: ModalTriggerStory = { }; export const DefaultOpen: ModalTriggerStory = { - storyName: "default open", + name: "default open", render: () => ( <ModalTrigger defaultOpen> <Button variant="secondary">Open</Button> @@ -47,7 +49,7 @@ export const DefaultOpen: ModalTriggerStory = { }; export const NotDismissable: ModalTriggerStory = { - storyName: "not dismissable", + name: "not dismissable", render: () => ( <ModalTrigger dismissable={false} defaultOpen> <Button variant="secondary">Open</Button> diff --git a/packages/components/src/modal/tests/chromatic/ModalTrigger.stories.tsx b/packages/components/src/modal/tests/chromatic/ModalTrigger.stories.tsx index de0e28f25..aa9b27643 100644 --- a/packages/components/src/modal/tests/chromatic/ModalTrigger.stories.tsx +++ b/packages/components/src/modal/tests/chromatic/ModalTrigger.stories.tsx @@ -2,17 +2,19 @@ import { Heading, Paragraph } from "@components/typography"; import { Modal, ModalTrigger } from "@components/modal"; import { Button } from "@components/button"; import { Content } from "@components/placeholders"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/ModalTrigger", component: ModalTrigger -} as ComponentMeta<typeof ModalTrigger>; +} as Meta<typeof ModalTrigger>; -type ModalTriggerStory = ComponentStoryObj<typeof ModalTrigger>; +export default meta; + +type ModalTriggerStory = StoryObj<typeof meta>; export const Default: ModalTriggerStory = { - storyName: "default", + name: "default", render: () => ( <ModalTrigger> <Button variant="secondary">Open</Button> @@ -29,7 +31,7 @@ export const Default: ModalTriggerStory = { }; export const DefaultOpen: ModalTriggerStory = { - storyName: "default open", + name: "default open", render: () => ( <ModalTrigger defaultOpen> <Button variant="secondary">Open</Button> @@ -47,7 +49,7 @@ export const DefaultOpen: ModalTriggerStory = { }; export const NotDismissable: ModalTriggerStory = { - storyName: "not dismissable", + name: "not dismissable", render: () => ( <ModalTrigger dismissable={false} defaultOpen> <Button variant="secondary">Open</Button> diff --git a/packages/components/src/number-input/tests/chromatic/NumberInput.stories.tsx b/packages/components/src/number-input/tests/chromatic/NumberInput.stories.tsx index 4b2b7c49b..67d1659b4 100644 --- a/packages/components/src/number-input/tests/chromatic/NumberInput.stories.tsx +++ b/packages/components/src/number-input/tests/chromatic/NumberInput.stories.tsx @@ -2,9 +2,9 @@ import { Inline, Stack } from "@components/layout"; import { Div } from "@components/html"; import { EditIcon } from "@hopper-ui/icons"; import { NumberInput } from "@components/number-input"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/NumberInput", component: NumberInput, parameters: { @@ -12,12 +12,14 @@ export default { delay: 100 } } -} as ComponentMeta<typeof NumberInput>; +} as Meta<typeof NumberInput>; -type NumberInputStory = ComponentStoryObj<typeof NumberInput>; +export default meta; + +type NumberInputStory = StoryObj<typeof meta>; export const Default: NumberInputStory = { - storyName: "default", + name: "default", render: () => ( <Stack> <NumberInput placeholder="Age" /> @@ -38,21 +40,21 @@ export const Default: NumberInputStory = { }; export const IntegerValue: NumberInputStory = { - storyName: "integer value", + name: "integer value", render: () => ( <NumberInput defaultValue={12} step={1} placeholder="Age" /> ) }; export const DecimalValue: NumberInputStory = { - storyName: "decimal value", + name: "decimal value", render: () => ( <NumberInput defaultValue={12.10} step={0.1} placeholder="Grams" /> ) }; export const Icon: NumberInputStory = { - storyName: "icon", + name: "icon", render: () => ( <Stack> <NumberInput icon={<EditIcon />} placeholder="Age" /> @@ -70,7 +72,7 @@ export const Icon: NumberInputStory = { export const Validation: NumberInputStory = { - storyName: "validation", + name: "validation", render: () => ( <Inline> <NumberInput validationState="invalid" placeholder="Age" /> @@ -80,7 +82,7 @@ export const Validation: NumberInputStory = { }; export const Zoom: NumberInputStory = { - storyName: "zoom", + name: "zoom", render: () => ( <Stack> <Div className="zoom-in"> @@ -94,7 +96,7 @@ export const Zoom: NumberInputStory = { }; export const Styling: NumberInputStory = { - storyName: "styling", + name: "styling", render: () => ( <Inline> <NumberInput border="warning" placeholder="Age" /> diff --git a/packages/components/src/overlay/tests/chromatic/Overlay.stories.tsx b/packages/components/src/overlay/tests/chromatic/Overlay.stories.tsx index 64d3abe79..9a7467aa5 100644 --- a/packages/components/src/overlay/tests/chromatic/Overlay.stories.tsx +++ b/packages/components/src/overlay/tests/chromatic/Overlay.stories.tsx @@ -3,9 +3,9 @@ import { Overlay } from "@components/overlay"; import { ThemeProvider } from "@components/styling"; import { augmentElement, mergeProps, useMergedRefs } from "@components/shared"; import { forwardRef, ReactElement, useState } from "react"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/Overlay", component: Overlay, parameters: { @@ -14,9 +14,11 @@ export default { chromaticPauseAnimationAtEnd: true } } -} as ComponentMeta<typeof Overlay>; +} as Meta<typeof Overlay>; -type OverlayStory = ComponentStoryObj<typeof Overlay>; +export default meta; + +type OverlayStory = StoryObj<typeof meta>; function PrimaryBox({ children, ...rest }: BoxProps) { return ( @@ -59,7 +61,7 @@ ref) => { }); export const InheritTheme: OverlayStory = { - storyName: "inherit theme", + name: "inherit theme", render: () => ( <ThemeProvider colorScheme="light"> <Boundary> @@ -72,7 +74,7 @@ export const InheritTheme: OverlayStory = { }; export const StyledSystem: OverlayStory = { - storyName: "styled system", + name: "styled system", render: () => ( <Boundary> <Overlay border="warning" show> @@ -83,7 +85,7 @@ export const StyledSystem: OverlayStory = { }; export const ClassName: OverlayStory = { - storyName: "className", + name: "className", render: () => ( <Boundary> <Overlay className="border-red" show> @@ -94,7 +96,7 @@ export const ClassName: OverlayStory = { }; export const Style: OverlayStory = { - storyName: "style", + name: "style", render: () => ( <Boundary> <Overlay style={{ border: "1px solid red" }} show> diff --git a/packages/components/src/overlay/tests/chromatic/Underlay.stories.tsx b/packages/components/src/overlay/tests/chromatic/Underlay.stories.tsx index 8d6603764..1d9aa5f3c 100644 --- a/packages/components/src/overlay/tests/chromatic/Underlay.stories.tsx +++ b/packages/components/src/overlay/tests/chromatic/Underlay.stories.tsx @@ -1,7 +1,7 @@ import { Underlay } from "@components/overlay"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/Underlay", component: Underlay, parameters: { @@ -10,33 +10,35 @@ export default { chromaticPauseAnimationAtEnd: true } } -} as ComponentMeta<typeof Underlay>; +} as Meta<typeof Underlay>; -type UnderlayStory = ComponentStoryObj<typeof Underlay>; +export default meta; + +type UnderlayStory = StoryObj<typeof meta>; export const Default: UnderlayStory = { - storyName: "default", + name: "default", render: () => ( <Underlay /> ) }; export const StyledSystem: UnderlayStory = { - storyName: "styled system", + name: "styled system", render: () => ( <Underlay border="warning" /> ) }; export const ClassName: UnderlayStory = { - storyName: "className", + name: "className", render: () => ( <Underlay className="border-red" /> ) }; export const Style: UnderlayStory = { - storyName: "style", + name: "style", render: () => ( <Underlay style={{ border: "1px solid red" }} /> ) diff --git a/packages/components/src/popover/tests/chromatic/Popover-hopper.stories.tsx b/packages/components/src/popover/tests/chromatic/Popover-hopper.stories.tsx index ad7bbf1da..7e188e3e1 100644 --- a/packages/components/src/popover/tests/chromatic/Popover-hopper.stories.tsx +++ b/packages/components/src/popover/tests/chromatic/Popover-hopper.stories.tsx @@ -5,17 +5,19 @@ import { Image } from "@components/image"; import { Launch } from "./assets"; import { Popover } from "@components/popover"; import { Button, ButtonGroup, Footer, Form, Heading, Label, Link, TextField } from "@hopper-ui/components"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/Popover-hopper", component: Popover -} as ComponentMeta<typeof Popover>; +} as Meta<typeof Popover>; -type PopoverStory = ComponentStoryObj<typeof Popover>; +export default meta; + +type PopoverStory = StoryObj<typeof meta>; export const Default: PopoverStory = { - storyName: "default", + name: "default", render: () => ( <Popover> <Heading>Space News</Heading> @@ -25,7 +27,7 @@ export const Default: PopoverStory = { }; export const TextFooter: PopoverStory = { - storyName: "text footer", + name: "text footer", render: () => ( <Popover> <Heading>Space News</Heading> @@ -36,7 +38,7 @@ export const TextFooter: PopoverStory = { }; export const LinkFooter: PopoverStory = { - storyName: "link footer", + name: "link footer", render: () => ( <Popover> <Heading>Space News</Heading> @@ -49,7 +51,7 @@ export const LinkFooter: PopoverStory = { }; export const PopoverButton: PopoverStory = { - storyName: "button", + name: "button", render: () => ( <Popover> <Heading>Space News</Heading> @@ -60,7 +62,7 @@ export const PopoverButton: PopoverStory = { }; export const PopoverButtonGroup: PopoverStory = { - storyName: "button group", + name: "button group", render: () => ( <Popover> <Heading>Space News</Heading> @@ -74,7 +76,7 @@ export const PopoverButtonGroup: PopoverStory = { }; export const AllSlots: PopoverStory = { - storyName: "all slots", + name: "all slots", render: () => ( <Popover> <Heading>Space News</Heading> @@ -89,7 +91,7 @@ export const AllSlots: PopoverStory = { }; export const PopoverForm: PopoverStory = { - storyName: "form", + name: "form", render: () => ( <Popover> <Heading>Space News</Heading> @@ -112,7 +114,7 @@ export const PopoverForm: PopoverStory = { }; export const PopoverImage: PopoverStory = { - storyName: "image", + name: "image", render: () => ( <Popover> <Heading>Space News</Heading> @@ -128,7 +130,7 @@ export const PopoverImage: PopoverStory = { }; export const Focused: PopoverStory = { - storyName: "focused", + name: "focused", render: () => ( <Popover focus> <Heading>Space News</Heading> @@ -138,7 +140,7 @@ export const Focused: PopoverStory = { }; export const NotDismissable: PopoverStory = { - storyName: "not dismissable", + name: "not dismissable", render: () => ( <Popover dismissable={false}> <Heading>Space News</Heading> @@ -148,7 +150,7 @@ export const NotDismissable: PopoverStory = { }; export const StyledSystem: PopoverStory = { - storyName: "styled system", + name: "styled system", render: () => ( <Popover border="warning"> <Heading>Space News</Heading> @@ -158,7 +160,7 @@ export const StyledSystem: PopoverStory = { }; export const ClassName: PopoverStory = { - storyName: "className", + name: "className", render: () => ( <Popover className="border-red"> <Heading>Space News</Heading> @@ -168,7 +170,7 @@ export const ClassName: PopoverStory = { }; export const ZoomIn: PopoverStory = { - storyName: "zoom in", + name: "zoom in", render: () => ( <Div className="zoom-in"> <Popover> @@ -180,7 +182,7 @@ export const ZoomIn: PopoverStory = { }; export const ZoomOut: PopoverStory = { - storyName: "zoom out", + name: "zoom out", render: () => ( <Div className="zoom-out"> <Popover> @@ -192,7 +194,7 @@ export const ZoomOut: PopoverStory = { }; export const Style: PopoverStory = { - storyName: "style", + name: "style", render: () => ( <Popover style={{ border: "1px solid red" }}> <Heading>Space News</Heading> diff --git a/packages/components/src/popover/tests/chromatic/Popover.stories.tsx b/packages/components/src/popover/tests/chromatic/Popover.stories.tsx index fdb58d08e..c4141122c 100644 --- a/packages/components/src/popover/tests/chromatic/Popover.stories.tsx +++ b/packages/components/src/popover/tests/chromatic/Popover.stories.tsx @@ -10,17 +10,19 @@ import { Launch } from "./assets"; import { Popover } from "@components/popover"; import { TextInput } from "@components/text-input"; import { TextLink } from "@components/link"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/Popover", component: Popover -} as ComponentMeta<typeof Popover>; +} as Meta<typeof Popover>; -type PopoverStory = ComponentStoryObj<typeof Popover>; +export default meta; + +type PopoverStory = StoryObj<typeof meta>; export const Default: PopoverStory = { - storyName: "default", + name: "default", render: () => ( <Popover> <Heading>Space News</Heading> @@ -30,7 +32,7 @@ export const Default: PopoverStory = { }; export const TextFooter: PopoverStory = { - storyName: "text footer", + name: "text footer", render: () => ( <Popover> <Heading>Space News</Heading> @@ -41,7 +43,7 @@ export const TextFooter: PopoverStory = { }; export const LinkFooter: PopoverStory = { - storyName: "link footer", + name: "link footer", render: () => ( <Popover> <Heading>Space News</Heading> @@ -54,7 +56,7 @@ export const LinkFooter: PopoverStory = { }; export const PopoverButton: PopoverStory = { - storyName: "button", + name: "button", render: () => ( <Popover> <Heading>Space News</Heading> @@ -65,7 +67,7 @@ export const PopoverButton: PopoverStory = { }; export const PopoverButtonGroup: PopoverStory = { - storyName: "button group", + name: "button group", render: () => ( <Popover> <Heading>Space News</Heading> @@ -79,7 +81,7 @@ export const PopoverButtonGroup: PopoverStory = { }; export const AllSlots: PopoverStory = { - storyName: "all slots", + name: "all slots", render: () => ( <Popover> <Heading>Space News</Heading> @@ -94,7 +96,7 @@ export const AllSlots: PopoverStory = { }; export const PopoverForm: PopoverStory = { - storyName: "form", + name: "form", render: () => ( <Popover> <Heading>Space News</Heading> @@ -119,7 +121,7 @@ export const PopoverForm: PopoverStory = { }; export const PopoverImage: PopoverStory = { - storyName: "image", + name: "image", render: () => ( <Popover> <Heading>Space News</Heading> @@ -135,7 +137,7 @@ export const PopoverImage: PopoverStory = { }; export const Focused: PopoverStory = { - storyName: "focused", + name: "focused", render: () => ( <Popover focus> <Heading>Space News</Heading> @@ -145,7 +147,7 @@ export const Focused: PopoverStory = { }; export const NotDismissable: PopoverStory = { - storyName: "not dismissable", + name: "not dismissable", render: () => ( <Popover dismissable={false}> <Heading>Space News</Heading> @@ -155,7 +157,7 @@ export const NotDismissable: PopoverStory = { }; export const StyledSystem: PopoverStory = { - storyName: "styled system", + name: "styled system", render: () => ( <Popover border="warning"> <Heading>Space News</Heading> @@ -165,7 +167,7 @@ export const StyledSystem: PopoverStory = { }; export const ClassName: PopoverStory = { - storyName: "className", + name: "className", render: () => ( <Popover className="border-red"> <Heading>Space News</Heading> @@ -175,7 +177,7 @@ export const ClassName: PopoverStory = { }; export const ZoomIn: PopoverStory = { - storyName: "zoom in", + name: "zoom in", render: () => ( <Div className="zoom-in"> <Popover> @@ -187,7 +189,7 @@ export const ZoomIn: PopoverStory = { }; export const ZoomOut: PopoverStory = { - storyName: "zoom out", + name: "zoom out", render: () => ( <Div className="zoom-out"> <Popover> @@ -199,7 +201,7 @@ export const ZoomOut: PopoverStory = { }; export const Style: PopoverStory = { - storyName: "style", + name: "style", render: () => ( <Popover style={{ border: "1px solid red" }}> <Heading>Space News</Heading> diff --git a/packages/components/src/popover/tests/chromatic/PopoverTrigger-hopper.stories.tsx b/packages/components/src/popover/tests/chromatic/PopoverTrigger-hopper.stories.tsx index ded8314f5..5e768a488 100644 --- a/packages/components/src/popover/tests/chromatic/PopoverTrigger-hopper.stories.tsx +++ b/packages/components/src/popover/tests/chromatic/PopoverTrigger-hopper.stories.tsx @@ -2,9 +2,9 @@ import { Popover, PopoverTrigger } from "@components/popover"; import { Content } from "@components/placeholders"; import { Button, Heading } from "@hopper-ui/components"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/PopoverTrigger-hopper", component: PopoverTrigger, decorators: [ @@ -20,12 +20,14 @@ export default { chromaticPauseAnimationAtEnd: true } } -} as ComponentMeta<typeof PopoverTrigger>; +} as Meta<typeof PopoverTrigger>; -type PopoverTriggerStory = ComponentStoryObj<typeof PopoverTrigger>; +export default meta; + +type PopoverTriggerStory = StoryObj<typeof meta>; export const Default: PopoverTriggerStory = { - storyName: "default", + name: "default", render: () => ( <PopoverTrigger> <Button variant="secondary">Toggle</Button> @@ -38,7 +40,7 @@ export const Default: PopoverTriggerStory = { }; export const DefaultOpen: PopoverTriggerStory = { - storyName: "default open", + name: "default open", render: () => ( <PopoverTrigger defaultOpen> <Button variant="secondary">Toggle</Button> @@ -51,7 +53,7 @@ export const DefaultOpen: PopoverTriggerStory = { }; export const NotDismissable: PopoverTriggerStory = { - storyName: "not dismissable", + name: "not dismissable", render: () => ( <PopoverTrigger defaultOpen dismissable={false}> <Button variant="secondary">Toggle</Button> @@ -64,7 +66,7 @@ export const NotDismissable: PopoverTriggerStory = { }; export const Position: PopoverTriggerStory = { - storyName: "position", + name: "position", render: () => ( <PopoverTrigger position={{ md: "top", lg: "top" }}> <Button variant="secondary">Toggle</Button> @@ -77,7 +79,7 @@ export const Position: PopoverTriggerStory = { }; export const PositionAuto: PopoverTriggerStory = { - storyName: "position auto", + name: "position auto", render: () => ( <PopoverTrigger position="auto" open> <Button variant="secondary">Toggle</Button> @@ -90,7 +92,7 @@ export const PositionAuto: PopoverTriggerStory = { }; export const PositionAutoStart: PopoverTriggerStory = { - storyName: "position auto-start", + name: "position auto-start", render: () => ( <PopoverTrigger position="auto-start" open> <Button variant="secondary">Toggle</Button> @@ -104,7 +106,7 @@ export const PositionAutoStart: PopoverTriggerStory = { export const PositionAutoEnd: PopoverTriggerStory = { - storyName: "position auto-end", + name: "position auto-end", render: () => ( <PopoverTrigger position="auto-end" open> <Button variant="secondary">Toggle</Button> @@ -117,7 +119,7 @@ export const PositionAutoEnd: PopoverTriggerStory = { }; export const PositionTop: PopoverTriggerStory = { - storyName: "position top", + name: "position top", render: () => ( <PopoverTrigger position="top" open> <Button variant="secondary">Toggle</Button> @@ -130,7 +132,7 @@ export const PositionTop: PopoverTriggerStory = { }; export const PositionTopStart: PopoverTriggerStory = { - storyName: "position top-start", + name: "position top-start", render: () => ( <PopoverTrigger position="top-start" open> <Button variant="secondary">Toggle</Button> @@ -143,7 +145,7 @@ export const PositionTopStart: PopoverTriggerStory = { }; export const PositionTopEnd: PopoverTriggerStory = { - storyName: "position top-end", + name: "position top-end", render: () => ( <PopoverTrigger position="top-end" open> <Button variant="secondary">Toggle</Button> @@ -156,7 +158,7 @@ export const PositionTopEnd: PopoverTriggerStory = { }; export const PositionBottom: PopoverTriggerStory = { - storyName: "position bottom", + name: "position bottom", render: () => ( <PopoverTrigger position="bottom" open> <Button variant="secondary">Toggle</Button> @@ -169,7 +171,7 @@ export const PositionBottom: PopoverTriggerStory = { }; export const PositionBottomStart: PopoverTriggerStory = { - storyName: "position bottom-start", + name: "position bottom-start", render: () => ( <PopoverTrigger position="bottom-start" open> <Button variant="secondary">Toggle</Button> @@ -182,7 +184,7 @@ export const PositionBottomStart: PopoverTriggerStory = { }; export const PositionBottomEnd: PopoverTriggerStory = { - storyName: "position bottom-end", + name: "position bottom-end", render: () => ( <PopoverTrigger position="bottom-end" open> <Button variant="secondary">Toggle</Button> @@ -195,7 +197,7 @@ export const PositionBottomEnd: PopoverTriggerStory = { }; export const PositionRight: PopoverTriggerStory = { - storyName: "position right", + name: "position right", render: () => ( <PopoverTrigger position="right" open> <Button variant="secondary">Toggle</Button> @@ -208,7 +210,7 @@ export const PositionRight: PopoverTriggerStory = { }; export const PositionRightStart: PopoverTriggerStory = { - storyName: "position right-start", + name: "position right-start", render: () => ( <PopoverTrigger position="right-start" open> <Button variant="secondary">Toggle</Button> @@ -221,7 +223,7 @@ export const PositionRightStart: PopoverTriggerStory = { }; export const PositionRightEnd: PopoverTriggerStory = { - storyName: "position right-end", + name: "position right-end", render: () => ( <PopoverTrigger position="right-end" open> <Button variant="secondary">Toggle</Button> @@ -234,7 +236,7 @@ export const PositionRightEnd: PopoverTriggerStory = { }; export const PositionLeft: PopoverTriggerStory = { - storyName: "position left", + name: "position left", render: () => ( <PopoverTrigger position="left" open> <Button variant="secondary">Toggle</Button> @@ -247,7 +249,7 @@ export const PositionLeft: PopoverTriggerStory = { }; export const PositionLeftStart: PopoverTriggerStory = { - storyName: "position left-start", + name: "position left-start", render: () => ( <PopoverTrigger position="left-start" open> <Button variant="secondary">Toggle</Button> @@ -260,7 +262,7 @@ export const PositionLeftStart: PopoverTriggerStory = { }; export const PositionLeftEnd: PopoverTriggerStory = { - storyName: "position left-end", + name: "position left-end", render: () => ( <PopoverTrigger position="left-end" open> <Button variant="secondary">Toggle</Button> @@ -273,7 +275,7 @@ export const PositionLeftEnd: PopoverTriggerStory = { }; export const FunctionalContent: PopoverTriggerStory = { - storyName: "functional content", + name: "functional content", render: () => ( <PopoverTrigger defaultOpen> {(() => { diff --git a/packages/components/src/popover/tests/chromatic/PopoverTrigger.stories.tsx b/packages/components/src/popover/tests/chromatic/PopoverTrigger.stories.tsx index 28c79396b..2180b876c 100644 --- a/packages/components/src/popover/tests/chromatic/PopoverTrigger.stories.tsx +++ b/packages/components/src/popover/tests/chromatic/PopoverTrigger.stories.tsx @@ -3,9 +3,9 @@ import { Popover, PopoverTrigger } from "@components/popover"; import { Button } from "@components/button"; import { Content } from "@components/placeholders"; import { Heading } from "@components/typography"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/PopoverTrigger", component: PopoverTrigger, decorators: [ @@ -21,12 +21,14 @@ export default { chromaticPauseAnimationAtEnd: true } } -} as ComponentMeta<typeof PopoverTrigger>; +} as Meta<typeof PopoverTrigger>; -type PopoverTriggerStory = ComponentStoryObj<typeof PopoverTrigger>; +export default meta; + +type PopoverTriggerStory = StoryObj<typeof meta>; export const Default: PopoverTriggerStory = { - storyName: "default", + name: "default", render: () => ( <PopoverTrigger> <Button variant="secondary">Toggle</Button> @@ -39,7 +41,7 @@ export const Default: PopoverTriggerStory = { }; export const DefaultOpen: PopoverTriggerStory = { - storyName: "default open", + name: "default open", render: () => ( <PopoverTrigger defaultOpen> <Button variant="secondary">Toggle</Button> @@ -52,7 +54,7 @@ export const DefaultOpen: PopoverTriggerStory = { }; export const NotDismissable: PopoverTriggerStory = { - storyName: "not dismissable", + name: "not dismissable", render: () => ( <PopoverTrigger defaultOpen dismissable={false}> <Button variant="secondary">Toggle</Button> @@ -65,7 +67,7 @@ export const NotDismissable: PopoverTriggerStory = { }; export const Position: PopoverTriggerStory = { - storyName: "position", + name: "position", render: () => ( <PopoverTrigger position={{ md: "top", lg: "top" }}> <Button variant="secondary">Toggle</Button> @@ -78,7 +80,7 @@ export const Position: PopoverTriggerStory = { }; export const PositionAuto: PopoverTriggerStory = { - storyName: "position auto", + name: "position auto", render: () => ( <PopoverTrigger position="auto" open> <Button variant="secondary">Toggle</Button> @@ -91,7 +93,7 @@ export const PositionAuto: PopoverTriggerStory = { }; export const PositionAutoStart: PopoverTriggerStory = { - storyName: "position auto-start", + name: "position auto-start", render: () => ( <PopoverTrigger position="auto-start" open> <Button variant="secondary">Toggle</Button> @@ -105,7 +107,7 @@ export const PositionAutoStart: PopoverTriggerStory = { export const PositionAutoEnd: PopoverTriggerStory = { - storyName: "position auto-end", + name: "position auto-end", render: () => ( <PopoverTrigger position="auto-end" open> <Button variant="secondary">Toggle</Button> @@ -118,7 +120,7 @@ export const PositionAutoEnd: PopoverTriggerStory = { }; export const PositionTop: PopoverTriggerStory = { - storyName: "position top", + name: "position top", render: () => ( <PopoverTrigger position="top" open> <Button variant="secondary">Toggle</Button> @@ -131,7 +133,7 @@ export const PositionTop: PopoverTriggerStory = { }; export const PositionTopStart: PopoverTriggerStory = { - storyName: "position top-start", + name: "position top-start", render: () => ( <PopoverTrigger position="top-start" open> <Button variant="secondary">Toggle</Button> @@ -144,7 +146,7 @@ export const PositionTopStart: PopoverTriggerStory = { }; export const PositionTopEnd: PopoverTriggerStory = { - storyName: "position top-end", + name: "position top-end", render: () => ( <PopoverTrigger position="top-end" open> <Button variant="secondary">Toggle</Button> @@ -157,7 +159,7 @@ export const PositionTopEnd: PopoverTriggerStory = { }; export const PositionBottom: PopoverTriggerStory = { - storyName: "position bottom", + name: "position bottom", render: () => ( <PopoverTrigger position="bottom" open> <Button variant="secondary">Toggle</Button> @@ -170,7 +172,7 @@ export const PositionBottom: PopoverTriggerStory = { }; export const PositionBottomStart: PopoverTriggerStory = { - storyName: "position bottom-start", + name: "position bottom-start", render: () => ( <PopoverTrigger position="bottom-start" open> <Button variant="secondary">Toggle</Button> @@ -183,7 +185,7 @@ export const PositionBottomStart: PopoverTriggerStory = { }; export const PositionBottomEnd: PopoverTriggerStory = { - storyName: "position bottom-end", + name: "position bottom-end", render: () => ( <PopoverTrigger position="bottom-end" open> <Button variant="secondary">Toggle</Button> @@ -196,7 +198,7 @@ export const PositionBottomEnd: PopoverTriggerStory = { }; export const PositionRight: PopoverTriggerStory = { - storyName: "position right", + name: "position right", render: () => ( <PopoverTrigger position="right" open> <Button variant="secondary">Toggle</Button> @@ -209,7 +211,7 @@ export const PositionRight: PopoverTriggerStory = { }; export const PositionRightStart: PopoverTriggerStory = { - storyName: "position right-start", + name: "position right-start", render: () => ( <PopoverTrigger position="right-start" open> <Button variant="secondary">Toggle</Button> @@ -222,7 +224,7 @@ export const PositionRightStart: PopoverTriggerStory = { }; export const PositionRightEnd: PopoverTriggerStory = { - storyName: "position right-end", + name: "position right-end", render: () => ( <PopoverTrigger position="right-end" open> <Button variant="secondary">Toggle</Button> @@ -235,7 +237,7 @@ export const PositionRightEnd: PopoverTriggerStory = { }; export const PositionLeft: PopoverTriggerStory = { - storyName: "position left", + name: "position left", render: () => ( <PopoverTrigger position="left" open> <Button variant="secondary">Toggle</Button> @@ -248,7 +250,7 @@ export const PositionLeft: PopoverTriggerStory = { }; export const PositionLeftStart: PopoverTriggerStory = { - storyName: "position left-start", + name: "position left-start", render: () => ( <PopoverTrigger position="left-start" open> <Button variant="secondary">Toggle</Button> @@ -261,7 +263,7 @@ export const PositionLeftStart: PopoverTriggerStory = { }; export const PositionLeftEnd: PopoverTriggerStory = { - storyName: "position left-end", + name: "position left-end", render: () => ( <PopoverTrigger position="left-end" open> <Button variant="secondary">Toggle</Button> @@ -274,7 +276,7 @@ export const PositionLeftEnd: PopoverTriggerStory = { }; export const FunctionalContent: PopoverTriggerStory = { - storyName: "functional content", + name: "functional content", render: () => ( <PopoverTrigger defaultOpen> {(() => { diff --git a/packages/components/src/radio/tests/chromatic/RadioGroup.stories.tsx b/packages/components/src/radio/tests/chromatic/RadioGroup.stories.tsx index 19c7cdc93..01deeea1d 100644 --- a/packages/components/src/radio/tests/chromatic/RadioGroup.stories.tsx +++ b/packages/components/src/radio/tests/chromatic/RadioGroup.stories.tsx @@ -9,9 +9,9 @@ import { Text } from "@components/typography"; import { ToggleButton } from "@components/button"; import { ComponentProps, useCallback } from "react"; import { as, useCheckableProps } from "@components/shared"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/RadioGroup", component: RadioGroup, parameters: { @@ -19,9 +19,11 @@ export default { delay: 100 } } -} as ComponentMeta<typeof RadioGroup>; +} as Meta<typeof RadioGroup>; -type RadioGroupStory = ComponentStoryObj<typeof RadioGroup>; +export default meta; + +type RadioGroupStory = StoryObj<typeof meta>; const TagAsButton = as(Tag, "button"); type TagAsButtonProps = ComponentProps<typeof TagAsButton>; @@ -52,7 +54,7 @@ function CustomComponent({ } export const Default: RadioGroupStory = { - storyName: "default", + name: "default", render: () => ( <Inline alignY="start"> <RadioGroup size="sm"> @@ -70,7 +72,7 @@ export const Default: RadioGroupStory = { }; export const Selection: RadioGroupStory = { - storyName: "selection", + name: "selection", render: () => ( <Inline alignY="start"> <RadioGroup value="2" size="sm"> @@ -93,7 +95,7 @@ export const Selection: RadioGroupStory = { }; export const Number: RadioGroupStory = { - storyName: "number", + name: "number", render: () => ( <Inline alignY="start"> <RadioGroup defaultValue="2" size="sm"> @@ -111,7 +113,7 @@ export const Number: RadioGroupStory = { }; export const Disabled: RadioGroupStory = { - storyName: "disabled", + name: "disabled", render: () => ( <Inline alignY="start"> <RadioGroup disabled size="sm"> @@ -129,7 +131,7 @@ export const Disabled: RadioGroupStory = { }; export const DisabledRadio: RadioGroupStory = { - storyName: "disabled radio", + name: "disabled radio", render: () => ( <Inline alignY="start"> <RadioGroup size="sm"> @@ -147,7 +149,7 @@ export const DisabledRadio: RadioGroupStory = { }; export const Gap: RadioGroupStory = { - storyName: "gap", + name: "gap", render: () => ( <Inline alignY="start"> <RadioGroup gap={800} size="sm"> @@ -165,7 +167,7 @@ export const Gap: RadioGroupStory = { }; export const Wrap: RadioGroupStory = { - storyName: "wrap", + name: "wrap", render: () => ( <Div width={800}> <RadioGroup wrap orientation="horizontal"> @@ -178,7 +180,7 @@ export const Wrap: RadioGroupStory = { }; export const NoWrap: RadioGroupStory = { - storyName: "no wrap", + name: "no wrap", render: () => ( <Div width={800}> <RadioGroup wrap={false} orientation="horizontal"> @@ -191,7 +193,7 @@ export const NoWrap: RadioGroupStory = { }; export const OverflowWrapped: RadioGroupStory = { - storyName: "overflow wrapped", + name: "overflow wrapped", render: () => ( <Div width={800}> <RadioGroup wrap orientation="horizontal"> @@ -204,7 +206,7 @@ export const OverflowWrapped: RadioGroupStory = { }; export const ToggleButtons: RadioGroupStory = { - storyName: "toggle buttons", + name: "toggle buttons", render: () => ( <Stack> <RadioGroup gap={80} orientation="horizontal" defaultValue="2" size="sm"> @@ -222,7 +224,7 @@ export const ToggleButtons: RadioGroupStory = { }; export const CustomComponents: RadioGroupStory = { - storyName: "custom components", + name: "custom components", render: () => ( <Stack> <RadioGroup gap={80} orientation="horizontal" defaultValue="2" size="sm"> @@ -240,7 +242,7 @@ export const CustomComponents: RadioGroupStory = { }; export const Validation: RadioGroupStory = { - storyName: "validation", + name: "validation", render: () => ( <Inline gap={800} alignY="start"> <RadioGroup validationState="invalid" size="sm"> @@ -263,7 +265,7 @@ export const Validation: RadioGroupStory = { }; export const Styling: RadioGroupStory = { - storyName: "styling", + name: "styling", render: () => ( <Inline> <RadioGroup border="warning"> @@ -286,7 +288,7 @@ export const Styling: RadioGroupStory = { }; export const Reverse: RadioGroupStory = { - storyName: "reverse", + name: "reverse", render: () => ( <Stack inline> <Field> diff --git a/packages/components/src/radio/tests/chromatic/RadioGroupHorizontal.stories.tsx b/packages/components/src/radio/tests/chromatic/RadioGroupHorizontal.stories.tsx index 50eb8a979..937d4ed7a 100644 --- a/packages/components/src/radio/tests/chromatic/RadioGroupHorizontal.stories.tsx +++ b/packages/components/src/radio/tests/chromatic/RadioGroupHorizontal.stories.tsx @@ -1,9 +1,9 @@ import { Radio, RadioGroup } from "@components/radio"; import { Counter } from "@components/counter"; import { Text } from "@components/typography"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/RadioGroup/horizontal", component: RadioGroup, parameters: { @@ -11,12 +11,14 @@ export default { delay: 100 } } -} as ComponentMeta<typeof RadioGroup>; +} as Meta<typeof RadioGroup>; -type RadioGroupStory = ComponentStoryObj<typeof RadioGroup>; +export default meta; + +type RadioGroupStory = StoryObj<typeof meta>; export const Default: RadioGroupStory = { - storyName: "default", + name: "default", render: () => ( <RadioGroup orientation="horizontal"> <Radio value="1">1</Radio> @@ -30,7 +32,7 @@ export const Default: RadioGroupStory = { }; export const Reverse: RadioGroupStory = { - storyName: "reverse", + name: "reverse", render: () => ( <RadioGroup reverse orientation="horizontal"> <Radio value="1">1</Radio> diff --git a/packages/components/src/shared/src/as.tsx b/packages/components/src/shared/src/as.tsx index 069116294..504a5a31b 100644 --- a/packages/components/src/shared/src/as.tsx +++ b/packages/components/src/shared/src/as.tsx @@ -11,7 +11,7 @@ export function as<A extends JSXElementConstructor<any>, B extends ElementType>( return forwardRef<ElementRef<B>, Merge<ComponentProps<A>, ComponentProps<B>>>((props, ref) => ( <Component - {...mergeProps( + {...mergeProps<any>( props, { as: asProp, diff --git a/packages/components/src/shared/tests/chromatic/Slots.stories.tsx b/packages/components/src/shared/tests/chromatic/Slots.stories.tsx index c293cea64..76b5c8d84 100644 --- a/packages/components/src/shared/tests/chromatic/Slots.stories.tsx +++ b/packages/components/src/shared/tests/chromatic/Slots.stories.tsx @@ -2,15 +2,16 @@ import { Box, BoxProps } from "@components/box"; import { TextLink } from "@components/link"; import { forwardRef, useCallback, useMemo } from "react"; import { isNil, slot, useSlots } from "@components/shared"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -// -// eslint-disable-next-line storybook/csf-component -export default { +const meta = { title: "Chromatic/Slots" -} as ComponentMeta<any>; +} as Meta<any>; + +// eslint-disable-next-line storybook/csf-component +export default meta; -type SlotStory = ComponentStoryObj<any>; +type SlotStory = StoryObj<any>; const Card = forwardRef<any, BoxProps>(({ children, ...rest }, ref) => { const { title, content } = useSlots(children, useMemo(() => ({ @@ -68,7 +69,7 @@ const Content = slot("content", forwardRef<any, BoxProps & { blue?: boolean }>(( })); export const DefaultSlot: SlotStory = { - storyName: "default slot", + name: "default slot", render: () => ( <Card> <Title>SpaceX fires up 3-engine Starship SN8 prototype ahead of epic test flight @@ -78,7 +79,7 @@ export const DefaultSlot: SlotStory = { }; export const DynamicSlot: SlotStory = { - storyName: "dynamic slot", + name: "dynamic slot", render: () => ( SpaceX fires up 3-engine Starship SN8 prototype ahead of epic test flight @@ -88,7 +89,7 @@ export const DynamicSlot: SlotStory = { }; export const WrapStringContent: SlotStory = { - storyName: "wrap string", + name: "wrap string", render: () => ( Early this morning (Oct. 20), SpaceX lit up the three Raptor engines on its SN8 ("Serial No. 8") Starship prototype in a brief "static fire" test at the company's South Texas site, near the beachside village of Boca Chica. @@ -97,7 +98,7 @@ export const WrapStringContent: SlotStory = { }; export const WrapMixedContent: SlotStory = { - storyName: "wrap mixed", + name: "wrap mixed", render: () => ( Early this morning (Oct. 20), SpaceX lit up the three Raptor engines on its SN8 ("Serial No. 8") Starship prototype in a brief "static fire" test at the company's South Texas site, near the beachside village of Boca Chica. @@ -106,7 +107,7 @@ export const WrapMixedContent: SlotStory = { }; export const UserPropsOnSlottedComponent: SlotStory = { - storyName: "user props", + name: "user props", render: () => ( SpaceX fires up 3-engine Starship SN8 prototype ahead of epic test flight @@ -135,7 +136,7 @@ const NoDefaultAndPassThroughCard = ({ children, ...rest }: BoxProps) => { }; export const NoDefaultCard: SlotStory = { - storyName: "no default", + name: "no default", render: () => ( Early this morning (Oct. 20), SpaceX lit up the three Raptor engines on its SN8 ("Serial No. 8") Starship prototype in a brief "static fire" test at the company's South Texas site, near the beachside village of Boca Chica. @@ -144,7 +145,7 @@ export const NoDefaultCard: SlotStory = { }; export const SupportFragment: SlotStory = { - storyName: "support fragment", + name: "support fragment", render: () => ( <> @@ -175,7 +176,7 @@ function FunctionalCard({ children, ...rest }: BoxProps) { } export const SlotsFunctionalCard: SlotStory = { - storyName: "support functional", + name: "support functional", render: () => ( Early this morning (Oct. 20), SpaceX lit up the three Raptor engines on its SN8 ("Serial No. 8") Starship prototype in a brief "static fire" test at the company's South Texas site, near the beachside village of Boca Chica. @@ -203,7 +204,7 @@ function ConditionalCard({ children, ...rest }: BoxProps) { } export const SupportConditionnalSlots: SlotStory = { - storyName: "support conditional", + name: "support conditional", render: () => ( SpaceX fires up 3-engine Starship SN8 prototype ahead of epic test flight diff --git a/packages/components/src/spinner/tests/chromatic/Spinner.stories.tsx b/packages/components/src/spinner/tests/chromatic/Spinner.stories.tsx index 068c64ebb..e9e554309 100644 --- a/packages/components/src/spinner/tests/chromatic/Spinner.stories.tsx +++ b/packages/components/src/spinner/tests/chromatic/Spinner.stories.tsx @@ -1,8 +1,8 @@ import { Spinner } from "@components/spinner"; import { Inline, Stack } from "@components/layout"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { component: Spinner, title: "Chromatic/Spinner", parameters: { @@ -11,12 +11,14 @@ export default { chromaticPauseAnimationAtEnd: true } } -} as ComponentMeta; +} as Meta; -type SpinnerStory = ComponentStoryObj; +export default meta; + +type SpinnerStory = StoryObj; export const Default: SpinnerStory = { - storyName: "default", + name: "default", render: () => ( @@ -27,7 +29,7 @@ export const Default: SpinnerStory = { }; export const InheritColor: SpinnerStory = { - storyName: "inherit color", + name: "inherit color", render: () => ( @@ -37,7 +39,7 @@ export const InheritColor: SpinnerStory = { }; export const Styling: SpinnerStory = { - storyName: "styling", + name: "styling", render: () => ( Crawling in progress @@ -48,7 +50,7 @@ export const Styling: SpinnerStory = { }; export const Zoom: SpinnerStory = { - storyName: "zoom", + name: "zoom", render: () => ( @@ -66,7 +68,7 @@ export const Zoom: SpinnerStory = { }; export const Label: SpinnerStory = { - storyName: "label", + name: "label", render: () => ( Crawling in progress @@ -77,7 +79,7 @@ export const Label: SpinnerStory = { }; export const Overflow: SpinnerStory = { - storyName: "overflow", + name: "overflow", render: () => ( Crawling in progress diff --git a/packages/components/src/styling/tests/chromatic/ThemeProvider-hopper.stories.tsx b/packages/components/src/styling/tests/chromatic/ThemeProvider-hopper.stories.tsx index cf34f75a2..d5edaa204 100644 --- a/packages/components/src/styling/tests/chromatic/ThemeProvider-hopper.stories.tsx +++ b/packages/components/src/styling/tests/chromatic/ThemeProvider-hopper.stories.tsx @@ -3,9 +3,9 @@ import { ThemeProvider, useColorSchemeContext } from "@components/styling"; import { Box } from "@components/box"; import { Inline } from "@components/layout"; import { useEffect } from "react"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/ThemeProvider-hopper", component: ThemeProvider, parameters: { @@ -13,9 +13,11 @@ export default { delay: 100 } } -} as ComponentMeta; +} as Meta; -type ThemeProviderStory = ComponentStoryObj; +export default meta; + +type ThemeProviderStory = StoryObj; function PrimaryColors() { return ( @@ -35,7 +37,7 @@ function PrimaryColors() { } export const Sharegate: ThemeProviderStory = { - storyName: "sharegate", + name: "sharegate", render: () => ( @@ -44,7 +46,7 @@ export const Sharegate: ThemeProviderStory = { }; export const Light: ThemeProviderStory = { - storyName: "light", + name: "light", render: () => ( @@ -53,7 +55,7 @@ export const Light: ThemeProviderStory = { }; export const Dark: ThemeProviderStory = { - storyName: "dark", + name: "dark", render: () => ( @@ -72,7 +74,7 @@ const SwitchColorScheme = () => { }; export const SetColorSchemeWithApi: ThemeProviderStory = { - storyName: "set color scheme with api", + name: "set color scheme with api", render: () => ( diff --git a/packages/components/src/styling/tests/chromatic/ThemeProvider.stories.tsx b/packages/components/src/styling/tests/chromatic/ThemeProvider.stories.tsx index 385f8b25c..6d99ae170 100644 --- a/packages/components/src/styling/tests/chromatic/ThemeProvider.stories.tsx +++ b/packages/components/src/styling/tests/chromatic/ThemeProvider.stories.tsx @@ -3,9 +3,9 @@ import { ThemeProvider, useColorSchemeContext } from "@components/styling"; import { Box } from "@components/box"; import { Inline } from "@components/layout"; import { useEffect } from "react"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/ThemeProvider", component: ThemeProvider, parameters: { @@ -13,9 +13,11 @@ export default { delay: 100 } } -} as ComponentMeta; +} as Meta; -type ThemeProviderStory = ComponentStoryObj; +export default meta; + +type ThemeProviderStory = StoryObj; function PrimaryColors() { return ( @@ -35,7 +37,7 @@ function PrimaryColors() { } export const Sharegate: ThemeProviderStory = { - storyName: "sharegate", + name: "sharegate", render: () => ( @@ -44,7 +46,7 @@ export const Sharegate: ThemeProviderStory = { }; export const Light: ThemeProviderStory = { - storyName: "light", + name: "light", render: () => ( @@ -53,7 +55,7 @@ export const Light: ThemeProviderStory = { }; export const Dark: ThemeProviderStory = { - storyName: "dark", + name: "dark", render: () => ( @@ -72,7 +74,7 @@ const SwitchColorScheme = () => { }; export const SetColorSchemeWithApi: ThemeProviderStory = { - storyName: "set color scheme with api", + name: "set color scheme with api", render: () => ( diff --git a/packages/components/src/styling/tests/chromatic/sharegate-hopper.stories.tsx b/packages/components/src/styling/tests/chromatic/sharegate-hopper.stories.tsx index 23ecd435c..25057d77f 100644 --- a/packages/components/src/styling/tests/chromatic/sharegate-hopper.stories.tsx +++ b/packages/components/src/styling/tests/chromatic/sharegate-hopper.stories.tsx @@ -14,14 +14,16 @@ import { Box, BoxProps } from "@components/box"; import { IconColorMapping } from "@hopper-ui/styled-system"; import { NoteIcon } from "@hopper-ui/icons"; import { Inline, Stack } from "@components/layout"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -// eslint-disable-next-line storybook/csf-component -export default { +const meta = { title: "Chromatic/Sharegate-hopper" -} as ComponentMeta; +} as Meta; + +// eslint-disable-next-line storybook/csf-component +export default meta; -type ShareGateStory = ComponentStoryObj; +type ShareGateStory = StoryObj; function SmallSquare(props: BoxProps) { return ( @@ -44,7 +46,7 @@ function LargeSquare(props: BoxProps) { } export const BackgroundColor: ShareGateStory = { - storyName: "background color", + name: "background color", render: () => ( @@ -60,7 +62,7 @@ export const BackgroundColor: ShareGateStory = { }; export const Border: ShareGateStory = { - storyName: "border", + name: "border", render: () => ( @@ -76,7 +78,7 @@ export const Border: ShareGateStory = { }; export const BoxShadow: ShareGateStory = { - storyName: "box shadow", + name: "box shadow", render: () => ( {Object.keys(BoxShadowMapping).map(x => )} @@ -85,7 +87,7 @@ export const BoxShadow: ShareGateStory = { }; export const Color: ShareGateStory = { - storyName: "color", + name: "color", render: () => ( @@ -101,7 +103,7 @@ export const Color: ShareGateStory = { }; export const IconColors: ShareGateStory = { - storyName: "icon colors", + name: "icon colors", render: () => ( @@ -117,21 +119,21 @@ export const IconColors: ShareGateStory = { }; export const FontSize: ShareGateStory = { - storyName: "font size", + name: "font size", render: () => ( <>{Object.keys(FontSizeMapping).map(x => Space exploration)} ) }; export const FontWeight: ShareGateStory = { - storyName: "font weight", + name: "font weight", render: () => ( <>{Object.keys(FontWeightMapping).map(x => Space exploration)} ) }; export const LineHeight: ShareGateStory = { - storyName: "line height", + name: "line height", render: () => ( {Object.keys(LineHeightMapping).map(x => That's one small step for man, one giant leap for mankind.)} @@ -140,7 +142,7 @@ export const LineHeight: ShareGateStory = { }; export const Spacing: ShareGateStory = { - storyName: "spacing", + name: "spacing", render: () => ( {Object.keys(SpacingMapping).map(x => )} @@ -149,7 +151,7 @@ export const Spacing: ShareGateStory = { }; export const Sizing: ShareGateStory = { - storyName: "sizing", + name: "sizing", render: () => ( {Object.keys(SizingMapping).map(x => )} diff --git a/packages/components/src/styling/tests/chromatic/sharegate.stories.tsx b/packages/components/src/styling/tests/chromatic/sharegate.stories.tsx index ea5780146..df52115a6 100644 --- a/packages/components/src/styling/tests/chromatic/sharegate.stories.tsx +++ b/packages/components/src/styling/tests/chromatic/sharegate.stories.tsx @@ -14,14 +14,16 @@ import { Box, BoxProps } from "@components/box"; import { IconColorMapping } from "@hopper-ui/styled-system"; import { NoteIcon } from "@hopper-ui/icons"; import { Inline, Stack } from "@components/layout"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -// eslint-disable-next-line storybook/csf-component -export default { +const meta = { title: "Chromatic/Sharegate" -} as ComponentMeta; +} as Meta; + +// eslint-disable-next-line storybook/csf-component +export default meta; -type ShareGateStory = ComponentStoryObj; +type ShareGateStory = StoryObj; function SmallSquare(props: BoxProps) { return ( @@ -44,7 +46,7 @@ function LargeSquare(props: BoxProps) { } export const BackgroundColor: ShareGateStory = { - storyName: "background color", + name: "background color", render: () => ( @@ -60,7 +62,7 @@ export const BackgroundColor: ShareGateStory = { }; export const Border: ShareGateStory = { - storyName: "border", + name: "border", render: () => ( @@ -76,7 +78,7 @@ export const Border: ShareGateStory = { }; export const BoxShadow: ShareGateStory = { - storyName: "box shadow", + name: "box shadow", render: () => ( {Object.keys(BoxShadowMapping).map(x => )} @@ -85,7 +87,7 @@ export const BoxShadow: ShareGateStory = { }; export const Color: ShareGateStory = { - storyName: "color", + name: "color", render: () => ( @@ -101,7 +103,7 @@ export const Color: ShareGateStory = { }; export const IconColors: ShareGateStory = { - storyName: "icon colors", + name: "icon colors", render: () => ( @@ -117,21 +119,21 @@ export const IconColors: ShareGateStory = { }; export const FontSize: ShareGateStory = { - storyName: "font size", + name: "font size", render: () => ( <>{Object.keys(FontSizeMapping).map(x => Space exploration)} ) }; export const FontWeight: ShareGateStory = { - storyName: "font weight", + name: "font weight", render: () => ( <>{Object.keys(FontWeightMapping).map(x => Space exploration)} ) }; export const LineHeight: ShareGateStory = { - storyName: "line height", + name: "line height", render: () => ( {Object.keys(LineHeightMapping).map(x => That's one small step for man, one giant leap for mankind.)} @@ -140,7 +142,7 @@ export const LineHeight: ShareGateStory = { }; export const Spacing: ShareGateStory = { - storyName: "spacing", + name: "spacing", render: () => ( {Object.keys(SpacingMapping).map(x => )} @@ -149,7 +151,7 @@ export const Spacing: ShareGateStory = { }; export const Sizing: ShareGateStory = { - storyName: "sizing", + name: "sizing", render: () => ( {Object.keys(SizingMapping).map(x => )} diff --git a/packages/components/src/styling/tests/chromatic/useStyledSystem-hopper.stories.tsx b/packages/components/src/styling/tests/chromatic/useStyledSystem-hopper.stories.tsx index bdbe828ec..a9ad3dd02 100644 --- a/packages/components/src/styling/tests/chromatic/useStyledSystem-hopper.stories.tsx +++ b/packages/components/src/styling/tests/chromatic/useStyledSystem-hopper.stories.tsx @@ -1,10 +1,9 @@ import { Box } from "@components/box"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; const viewports = [640, 768, 1024, 1280, 1440]; -// eslint-disable-next-line storybook/csf-component -export default { +const meta = { title: "Chromatic/UseStyledSystem-hopper", parameters: { chromatic: { @@ -12,12 +11,15 @@ export default { viewports: viewports } } -} as ComponentMeta; +} as Meta; + +// eslint-disable-next-line storybook/csf-component +export default meta; -type UseStyledSystemStory = ComponentStoryObj; +type UseStyledSystemStory = StoryObj; export const EverySingleBreakpoints: UseStyledSystemStory = { - storyName: "every single breakpoints", + name: "every single breakpoints", render: () => ( ( ( ; +} as Meta; + +// eslint-disable-next-line storybook/csf-component +export default meta; -type UseStyledSystemStory = ComponentStoryObj; +type UseStyledSystemStory = StoryObj; export const EverySingleBreakpoints: UseStyledSystemStory = { - storyName: "every single breakpoints", + name: "every single breakpoints", render: () => ( ( ( ; +} as Meta; -type TabsStory = ComponentStoryObj; +export default meta; + +type TabsStory = StoryObj; export const Default: TabsStory = { - storyName: "default", + name: "default", render: () => ( @@ -40,7 +42,7 @@ export const Default: TabsStory = { }; export const Fluid: TabsStory = { - storyName: "fluid", + name: "fluid", render: () => ( @@ -60,7 +62,7 @@ export const Fluid: TabsStory = { }; export const TabWithIcon: TabsStory = { - storyName: "tab with icon", + name: "tab with icon", render: () => ( @@ -79,7 +81,7 @@ export const TabWithIcon: TabsStory = { }; export const TabWithLozenge: TabsStory = { - storyName: "tab with lozenge", + name: "tab with lozenge", render: () => ( @@ -102,7 +104,7 @@ export const TabWithLozenge: TabsStory = { }; export const InCard: TabsStory = { - storyName: "in card", + name: "in card", render: () => ( @@ -121,7 +123,7 @@ export const InCard: TabsStory = { }; export const Heading: TabsStory = { - storyName: "heading", + name: "heading", render: () => ( @@ -140,7 +142,7 @@ export const Heading: TabsStory = { }; export const States: TabsStory = { - storyName: "states", + name: "states", render: () => ( diff --git a/packages/components/src/tabs/tests/chromatic/TabsVertical.stories.tsx b/packages/components/src/tabs/tests/chromatic/TabsVertical.stories.tsx index 95098d355..7bdc566ec 100644 --- a/packages/components/src/tabs/tests/chromatic/TabsVertical.stories.tsx +++ b/packages/components/src/tabs/tests/chromatic/TabsVertical.stories.tsx @@ -6,9 +6,9 @@ import { Tabs } from "@components/tabs"; import { Item } from "@components/collection"; import { Lozenge } from "@components/lozenge"; import { Text } from "@components/typography"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/Tabs/vertical", component: Tabs, parameters: { @@ -16,12 +16,14 @@ export default { delay: 100 } } -} as ComponentMeta; +} as Meta; -type TabsStory = ComponentStoryObj; +export default meta; + +type TabsStory = StoryObj; export const Default: TabsStory = { - storyName: "default", + name: "default", render: () => ( @@ -41,7 +43,7 @@ export const Default: TabsStory = { }; export const Fluid: TabsStory = { - storyName: "fluid", + name: "fluid", render: () => ( @@ -61,7 +63,7 @@ export const Fluid: TabsStory = { }; export const TabWithIcon: TabsStory = { - storyName: "tab with icon", + name: "tab with icon", render: () => ( @@ -80,7 +82,7 @@ export const TabWithIcon: TabsStory = { }; export const TabWithLozenge: TabsStory = { - storyName: "tab with lozenge", + name: "tab with lozenge", render: () => ( @@ -103,7 +105,7 @@ export const TabWithLozenge: TabsStory = { }; export const InCard: TabsStory = { - storyName: "in card", + name: "in card", render: () => ( @@ -122,7 +124,7 @@ export const InCard: TabsStory = { }; export const Heading: TabsStory = { - storyName: "heading", + name: "heading", render: () => ( @@ -141,7 +143,7 @@ export const Heading: TabsStory = { }; export const States: TabsStory = { - storyName: "states", + name: "states", render: () => ( diff --git a/packages/components/src/tag/src/TagList.tsx b/packages/components/src/tag/src/TagList.tsx index 71aca0541..23e7cadb3 100644 --- a/packages/components/src/tag/src/TagList.tsx +++ b/packages/components/src/tag/src/TagList.tsx @@ -12,7 +12,7 @@ export interface InnerTagListProps extends InternalProps, StyledComponentProps; +} as Meta; -type TagListStory = ComponentStoryObj; +export default meta; + +type TagListStory = StoryObj; export const Default: TagListStory = { - storyName: "default", + name: "default", render: () => ( @@ -34,7 +36,7 @@ export const Default: TagListStory = { }; export const ItemWithIicon: TagListStory = { - storyName: "item with an icon", + name: "item with an icon", render: () => ( @@ -54,7 +56,7 @@ export const ItemWithIicon: TagListStory = { }; export const ItemWithDot: TagListStory = { - storyName: "item with a dot", + name: "item with a dot", render: () => ( @@ -74,7 +76,7 @@ export const ItemWithDot: TagListStory = { }; export const ItemWithCounter: TagListStory = { - storyName: "item with a counter", + name: "item with a counter", render: () => ( @@ -94,7 +96,7 @@ export const ItemWithCounter: TagListStory = { }; export const WithClearButton: TagListStory = { - storyName: "with clear button", + name: "with clear button", render: () => ( {}}> @@ -112,7 +114,7 @@ export const WithClearButton: TagListStory = { }; export const WithClearButtonEmpty: TagListStory = { - storyName: "with clear button & empty", + name: "with clear button & empty", render: () => ( {}}> {[]} @@ -121,7 +123,7 @@ export const WithClearButtonEmpty: TagListStory = { }; export const Readonly: TagListStory = { - storyName: "readonly", + name: "readonly", render: () => ( @@ -139,7 +141,7 @@ export const Readonly: TagListStory = { }; export const Validation: TagListStory = { - storyName: "validation", + name: "validation", render: () => ( @@ -162,7 +164,7 @@ export const Validation: TagListStory = { }; export const MultipleRows: TagListStory = { - storyName: "multiple rows", + name: "multiple rows", render: () => (
@@ -202,7 +204,7 @@ export const MultipleRows: TagListStory = { }; export const Styling: TagListStory = { - storyName: "styling", + name: "styling", render: () => ( diff --git a/packages/components/src/tag/tests/chromatic/TagList.stories.tsx b/packages/components/src/tag/tests/chromatic/TagList.stories.tsx index d70249aac..844be4dbf 100644 --- a/packages/components/src/tag/tests/chromatic/TagList.stories.tsx +++ b/packages/components/src/tag/tests/chromatic/TagList.stories.tsx @@ -6,17 +6,19 @@ import { Inline, Stack } from "@components/layout"; import { Item } from "@components/collection"; import { TagList } from "@components/tag"; import { Text } from "@components/typography"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/TagList", component: TagList -} as ComponentMeta; +} as Meta; -type TagListStory = ComponentStoryObj; +export default meta; + +type TagListStory = StoryObj; export const Default: TagListStory = { - storyName: "default", + name: "default", render: () => ( @@ -34,7 +36,7 @@ export const Default: TagListStory = { }; export const ItemWithIicon: TagListStory = { - storyName: "item with an icon", + name: "item with an icon", render: () => ( @@ -54,7 +56,7 @@ export const ItemWithIicon: TagListStory = { }; export const ItemWithDot: TagListStory = { - storyName: "item with a dot", + name: "item with a dot", render: () => ( @@ -74,7 +76,7 @@ export const ItemWithDot: TagListStory = { }; export const ItemWithCounter: TagListStory = { - storyName: "item with a counter", + name: "item with a counter", render: () => ( @@ -94,7 +96,7 @@ export const ItemWithCounter: TagListStory = { }; export const WithClearButton: TagListStory = { - storyName: "with clear button", + name: "with clear button", render: () => ( {}}> @@ -112,7 +114,7 @@ export const WithClearButton: TagListStory = { }; export const WithClearButtonEmpty: TagListStory = { - storyName: "with clear button & empty", + name: "with clear button & empty", render: () => ( {}}> @@ -120,7 +122,7 @@ export const WithClearButtonEmpty: TagListStory = { }; export const Readonly: TagListStory = { - storyName: "readonly", + name: "readonly", render: () => ( @@ -138,7 +140,7 @@ export const Readonly: TagListStory = { }; export const Validation: TagListStory = { - storyName: "validation", + name: "validation", render: () => ( @@ -161,7 +163,7 @@ export const Validation: TagListStory = { }; export const MultipleRows: TagListStory = { - storyName: "multiple rows", + name: "multiple rows", render: () => (
@@ -201,7 +203,7 @@ export const MultipleRows: TagListStory = { }; export const Styling: TagListStory = { - storyName: "styling", + name: "styling", render: () => ( diff --git a/packages/components/src/text-area/tests/chromatic/TextArea-hopper.stories.tsx b/packages/components/src/text-area/tests/chromatic/TextArea-hopper.stories.tsx index cc36f6a81..272e65b5b 100644 --- a/packages/components/src/text-area/tests/chromatic/TextArea-hopper.stories.tsx +++ b/packages/components/src/text-area/tests/chromatic/TextArea-hopper.stories.tsx @@ -3,9 +3,9 @@ import { Inline, Stack } from "@components/layout"; import { CrossButton } from "@components/button"; import { Div } from "@components/html"; import { TextArea } from "@components/text-area"; -import { ComponentMeta, ComponentStoryObj } from "@storybook/react"; +import { Meta, StoryObj } from "@storybook/react"; -export default { +const meta = { title: "Chromatic/TextArea-hopper", component: TextArea, parameters: { @@ -13,12 +13,14 @@ export default { delay: 100 } } -} as ComponentMeta; +} as Meta; -type TextAreaStory = ComponentStoryObj; +export default meta; + +type TextAreaStory = StoryObj; export const Default: TextAreaStory = { - storyName: "default", + name: "default", render: () => (