Centralize theme extension into config file, reducing code duplication

redwoodjs · Dec 29, 2024 · e513aed · e513aed
1 parent 28de96e
commit e513aed
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 9 deletions.
diff --git a/packages/cli/src/commands/setup/ui/libraries/chakra-ui.js b/packages/cli/src/commands/setup/ui/libraries/chakra-ui.js
@@ -30,12 +30,12 @@ export function builder(yargs) {
 }
 
 const CHAKRA_THEME_AND_COMMENTS = `\
-import type { ChakraTheme, DeepPartial } from '@chakra-ui/react'
+import type { ChakraTheme, DeepPartial, extendTheme } from '@chakra-ui/react'
 
 // This object will be used to override Chakra-UI theme defaults.
 // See https://chakra-ui.com/docs/styled-system/theming/theme for theming options
 const theme: DeepPartial<ChakraTheme> = {}
-export default theme
+export default extendTheme(theme)
 `
 
 export async function handler({ force, install }) {
@@ -80,15 +80,14 @@ export async function handler({ force, install }) {
           extendJSXFile(rwPaths.web.app, {
             insertComponent: {
               name: 'ChakraProvider',
-              props: { theme: 'extendedTheme' },
+              props: { theme: 'theme' },
               within: 'RedwoodProvider',
               insertBefore: '<ColorModeScript />',
             },
             imports: [
-              "import { ChakraProvider, ColorModeScript, extendTheme } from '@chakra-ui/react'",
+              "import { ChakraProvider, ColorModeScript } from '@chakra-ui/react'",
               "import * as theme from 'config/chakra.config'",
             ],
-            moduleScopeLines: ['const extendedTheme = extendTheme(theme)'],
           }),
       },
       {

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
@@ -1,14 +1,12 @@
 import * as React from 'react'
 
-import { ChakraProvider, extendTheme } from '@chakra-ui/react'
+import { ChakraProvider } from '@chakra-ui/react'
 import type { Preview, 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) => (
-  <ChakraProvider theme={extendedTheme}>
+  <ChakraProvider theme={theme}>
     <Story />
   </ChakraProvider>
 )