refactor: address PR feedback - share CSS config and simplify providers

Author: jeffredodd

.storybook/main.ts

@@ -1,6 +1,7 @@
 import type { StorybookConfig } from '@storybook/react-vite'
 import { mergeConfig } from 'vite'
 import { resolve } from 'path'
+import { scssPreprocessorOptions } from '../vite.config'
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
@@ -23,12 +24,7 @@ const config: StorybookConfig = {
         },
       },
       css: {
-        preprocessorOptions: {
-          scss: {
-            api: 'modern-compiler',
-            additionalData: `@use "@/styles/Helpers" as *; @use '@/styles/Responsive' as *;\n`,
-          },
-        },
+        preprocessorOptions: scssPreprocessorOptions,
       },
     })
   },

.storybook/preview.tsx

@@ -1,8 +1,4 @@
 import type { Decorator, Preview } from '@storybook/react'
-import { I18nextProvider } from 'react-i18next'
-import { SDKI18next } from '@/contexts/GustoProvider/SDKI18next'
-import { LocaleProvider } from '@/contexts/LocaleProvider'
-import { ThemeProvider } from '@/contexts/ThemeProvider'
 import { GustoProviderCustomUIAdapter } from '@/contexts'
 import { defaultComponents } from '@/contexts/ComponentAdapter/adapters/defaultComponentAdapter'
 import { PlainComponentAdapter } from './adapters/PlainComponentAdapter'
@@ -19,15 +15,14 @@ const withProviders: Decorator = (Story, context: StoryContext) => {
   const components = adapterMode === 'plain' ? PlainComponentAdapter : defaultComponents
 
   return (
-    <I18nextProvider i18n={SDKI18next}>
-      <LocaleProvider locale="en-US" currency="USD">
-        <ThemeProvider>
-          <GustoProviderCustomUIAdapter config={{ baseUrl: '' }} components={components}>
-            <Story />
-          </GustoProviderCustomUIAdapter>
-        </ThemeProvider>
-      </LocaleProvider>
-    </I18nextProvider>
+    <GustoProviderCustomUIAdapter
+      config={{ baseUrl: '' }}
+      components={components}
+      locale="en-US"
+      currency="USD"
+    >
+      <Story />
+    </GustoProviderCustomUIAdapter>
   )
 }
 

src/components/Common/UI/Badge/Badge.stories.tsx

@@ -1,4 +1,4 @@
-import type { StoryObj, Meta } from '@storybook/react'
+import type { StoryObj } from '@storybook/react'
 import type { BadgeProps } from './BadgeTypes'
 import { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'
 
@@ -7,11 +7,10 @@ const BadgeWrapper = (props: BadgeProps) => {
   return <Components.Badge {...props} />
 }
 
-const meta: Meta<typeof BadgeWrapper> = {
+export default {
   title: 'UI/Components/Badge',
   component: BadgeWrapper,
 }
-export default meta
 
 type Story = StoryObj<typeof BadgeWrapper>
 

src/components/Common/UI/Card/Card.stories.tsx

@@ -1,4 +1,4 @@
-import type { StoryObj, Meta } from '@storybook/react'
+import type { StoryObj } from '@storybook/react'
 import type { CardProps } from './CardTypes'
 import { Flex } from '@/components/Common/Flex/Flex'
 import { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'
@@ -56,11 +56,10 @@ const CardWrapper = (args: Omit<CardProps, 'children'>) => {
   )
 }
 
-const meta: Meta<typeof CardWrapper> = {
+export default {
   title: 'UI/Components/Card',
   component: CardWrapper,
 }
-export default meta
 
 type Story = StoryObj<typeof CardWrapper>
 

src/components/Common/UI/LoadingSpinner/LoadingSpinner.stories.tsx

@@ -1,4 +1,4 @@
-import type { StoryObj, Meta } from '@storybook/react'
+import type { StoryObj } from '@storybook/react'
 import type { LoadingSpinnerProps } from './LoadingSpinnerTypes'
 import { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'
 
@@ -7,11 +7,10 @@ const LoadingSpinnerWrapper = (props: LoadingSpinnerProps) => {
   return <Components.LoadingSpinner {...props} />
 }
 
-const meta: Meta<typeof LoadingSpinnerWrapper> = {
+export default {
   title: 'UI/Components/LoadingSpinner',
   component: LoadingSpinnerWrapper,
 }
-export default meta
 
 type Story = StoryObj<typeof LoadingSpinnerWrapper>
 

src/components/Common/UI/ProgressBar/ProgressBar.stories.tsx

@@ -1,4 +1,4 @@
-import type { StoryObj, Meta } from '@storybook/react'
+import type { StoryObj } from '@storybook/react'
 import { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'
 
 interface ProgressBarStoryProps {
@@ -10,7 +10,7 @@ const ProgressBarWrapper = ({ currentStep }: ProgressBarStoryProps) => {
   return <ProgressBar totalSteps={10} currentStep={currentStep} label="Progress Bar" />
 }
 
-const meta: Meta<typeof ProgressBarWrapper> = {
+export default {
   title: 'UI/Components/ProgressBar',
   component: ProgressBarWrapper,
   argTypes: {
@@ -19,7 +19,6 @@ const meta: Meta<typeof ProgressBarWrapper> = {
     },
   },
 }
-export default meta
 
 type Story = StoryObj<typeof ProgressBarWrapper>
 

vite.config.ts

@@ -9,6 +9,13 @@ import circularDependencyDetector from 'vite-plugin-circular-dependency'
 import checker from 'vite-plugin-checker'
 import { externalizeDeps } from 'vite-plugin-externalize-deps'
 
+export const scssPreprocessorOptions = {
+  scss: {
+    api: 'modern-compiler',
+    additionalData: `@use "@/styles/Helpers" as *; @use '@/styles/Responsive' as *;\n`,
+  },
+} as const
+
 /**
  * Current config is set to build sdk in library mode, retaining the original file structure and file names while also allowing for css modules and single css file output.
  * Development mode removes unnecessary plugins and configurations to speed up the build process.
@@ -63,13 +70,7 @@ export default defineConfig(({ mode }) => {
       },
     },
     css: {
-      preprocessorOptions: {
-        scss: {
-          api: 'modern-compiler',
-          additionalData: `@use "@/styles/Helpers" as *; @use '@/styles/Responsive' as *;
-`,
-        },
-      },
+      preprocessorOptions: scssPreprocessorOptions,
     },
     build: {
       lib: {