From 1c3824955c2b5d85b2b20cbceedb630c1c187188 Mon Sep 17 00:00:00 2001 From: Philzen Date: Sun, 29 Dec 2024 01:53:38 +0100 Subject: [PATCH 1/3] Fix link that is broken since release of Chakra UI 3 --- packages/cli/src/commands/setup/ui/libraries/chakra-ui.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/cli/src/commands/setup/ui/libraries/chakra-ui.js b/packages/cli/src/commands/setup/ui/libraries/chakra-ui.js index 6420834a7831..aa654af9c8ba 100644 --- a/packages/cli/src/commands/setup/ui/libraries/chakra-ui.js +++ b/packages/cli/src/commands/setup/ui/libraries/chakra-ui.js @@ -30,7 +30,7 @@ export function builder(yargs) { const CHAKRA_THEME_AND_COMMENTS = `\ // This object will be used to override Chakra-UI theme defaults. -// See https://chakra-ui.com/docs/styled-system/theming/theme for theming options +// See https://v2.chakra-ui.com/docs/styled-system/theme for theming options const theme = {} export default theme ` From e066158b6edd37adacbd04016e07a3de294864c3 Mon Sep 17 00:00:00 2001 From: Philzen Date: Sun, 29 Dec 2024 02:04:00 +0100 Subject: [PATCH 2/3] Implement Chakra UI theme switcher in Storybook Toolbar --- .../chakra.storybook.preview.tsx.template | 46 +++++++++++++++---- 1 file changed, 37 insertions(+), 9 deletions(-) diff --git a/packages/cli/src/commands/setup/ui/templates/chakra.storybook.preview.tsx.template b/packages/cli/src/commands/setup/ui/templates/chakra.storybook.preview.tsx.template index 16d7757db076..17ebdf292442 100644 --- a/packages/cli/src/commands/setup/ui/templates/chakra.storybook.preview.tsx.template +++ b/packages/cli/src/commands/setup/ui/templates/chakra.storybook.preview.tsx.template @@ -1,20 +1,48 @@ import * as React from 'react' -import { ChakraProvider, extendTheme } from '@chakra-ui/react' -import type { Preview, StoryFn } from '@storybook/react' +import { ChakraProvider, extendTheme, useColorMode } from '@chakra-ui/react' +import type { GlobalTypes } from '@storybook/csf' +import type { Preview, StoryContext, StoryFn } from '@storybook/react' import theme from 'config/chakra.config' const extendedTheme = extendTheme(theme) -/** @see {@link https://storybook.js.org/docs/7/essentials/toolbars-and-globals#create-a-decorator | Create a decorator} */ -const withChakra = (Story: StoryFn) => ( - - - -) +/** @see {@link https://storybook.js.org/docs/7/essentials/toolbars-and-globals#global-types-and-the-toolbar-annotation | Global types and the toolbar annotation} */ +const globalTypes: GlobalTypes = { + theme: { + description: 'Theme', + defaultValue: 'dark', + toolbar: { + dynamicTitle: true, + icon: 'contrast', + items: [ + { value: 'dark', left: '🌜', title: 'Dark mode' }, + { value: 'light', left: '🌞', title: 'Light mode' }, + ], + }, + }, +} + +const ColorModeSwitch = ({ colorMode }: { colorMode: 'light' | 'dark' }) => { + const { setColorMode } = useColorMode() + React.useEffect(() => setColorMode(colorMode), [colorMode, setColorMode]) + + return <> +} + +const withChakra = (Story: StoryFn, context: StoryContext) => { + theme.config.initialColorMode = context.globals.theme // avoids flash on reload for non-default color mode + return ( + + + + + ) +} const preview: Preview = { - decorators: [withChakra] + decorators: [withChakra], + globalTypes, } export default preview From c907487fc7c620fdc8e335353eaa6448ef7b5668 Mon Sep 17 00:00:00 2001 From: Philzen Date: Sun, 29 Dec 2024 02:12:34 +0100 Subject: [PATCH 3/3] Fix wrong theme object and imports formatting --- .../setup/ui/templates/chakra.storybook.preview.tsx.template | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/cli/src/commands/setup/ui/templates/chakra.storybook.preview.tsx.template b/packages/cli/src/commands/setup/ui/templates/chakra.storybook.preview.tsx.template index 17ebdf292442..c54d61885690 100644 --- a/packages/cli/src/commands/setup/ui/templates/chakra.storybook.preview.tsx.template +++ b/packages/cli/src/commands/setup/ui/templates/chakra.storybook.preview.tsx.template @@ -3,6 +3,7 @@ import * as React from 'react' import { ChakraProvider, extendTheme, useColorMode } from '@chakra-ui/react' import type { GlobalTypes } from '@storybook/csf' import type { Preview, StoryContext, StoryFn } from '@storybook/react' + import theme from 'config/chakra.config' const extendedTheme = extendTheme(theme) @@ -31,7 +32,7 @@ const ColorModeSwitch = ({ colorMode }: { colorMode: 'light' | 'dark' }) => { } const withChakra = (Story: StoryFn, context: StoryContext) => { - theme.config.initialColorMode = context.globals.theme // avoids flash on reload for non-default color mode + extendedTheme.config.initialColorMode = context.globals.theme // avoids flash on reload for non-default color mode return (