feat: storybook publishing, add new components

.github/workflows/storybook.yaml

@@ -0,0 +1,30 @@
+# workflow based off https://storybook.js.org/docs/8.5/sharing/publish-storybook#github-pages
+name: Publish Storybook to GitHub Pages
+
+on:
+  push:
+    branches:
+      - develop
+      - main
+      - figma-tokens
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: yarn
+      - uses: bitovi/[email protected]
+        working-directory: ./packages/curve-ui-kit
+        with:
+          install_command: yarn install
+          build_command: yarn build:storybook
+          checkout: false

packages/curve-common/src/features/switch-advanced-mode/AdvancedModeSwitcher.tsx

@@ -16,6 +16,7 @@ export const AdvancedModeSwitcher: FunctionComponent<AdvancedModeSwitcherProps>
       onChange={() => onChange(!advancedMode)}
       color="primary"
       inputProps={{ ...label && { 'aria-label': label } }}
+      size="small"
     />
     {label && (
       <Typography variant="headingXsBold" display="inline-block" sx={{ marginLeft: 3, marginRight: 4, textTransform: 'uppercase', lineHeight: '37px' }}>

packages/curve-ui-kit/.storybook/preview.tsx

@@ -1,16 +1,20 @@
-import { CssBaseline, ThemeProvider } from '@mui/material'
+import { Card, Container, CssBaseline, ThemeProvider } from '@mui/material'
 import { withThemeFromJSXProvider } from '@storybook/addon-themes'
 import type { Decorator, Preview, ReactRenderer } from '@storybook/react'
 import { chadTheme, darkTheme, lightTheme } from '../src/themes'
 import { monaSans, hubotSans } from '../src/themes/typography/fonts'
+import { DocsContainer } from '@storybook/blocks'
+import Box from '@mui/material/Box'
+
+const themes = {
+  light: lightTheme,
+  dark: darkTheme,
+  chad: chadTheme,
+}
 
 export const decorators: Decorator[] = [
   withThemeFromJSXProvider<ReactRenderer>({
-    themes: {
-      light: lightTheme,
-      dark: darkTheme,
-      chad: chadTheme,
-    },
+    themes,
     defaultTheme: 'light',
     Provider: ThemeProvider,
     GlobalStyles: CssBaseline,
@@ -44,11 +48,7 @@ export const decorators: Decorator[] = [
 const preview: Preview = {
   decorators: decorators,
   parameters: {
-    themes: {
-      light: lightTheme,
-      dark: darkTheme,
-      chad: chadTheme,
-    },
+    themes,
     controls: {
       expanded: true, // Adds the description and default columns
       matchers: {
@@ -57,28 +57,20 @@ const preview: Preview = {
       },
     },
     docs: {
-      // TODO: Fix docs container theme application
-      // The current issue is that the theme is only applied to individual components
-      // within the docs, but not to the root level of the documentation container.
-      // This results in inconsistent styling, where component examples may have the
-      // correct theme, but the surrounding documentation does not.
-      //
-      // Potential solution:
       // Implement a custom docs container that applies the theme at the root level.
-      // This may involve creating a wrapper component that uses the current theme
-      // from the Storybook context and applies it to the entire docs container.
-      //
-      // container: ({ children, context }) => {
-      //   const theme = context.store.userGlobals.globals.theme
-      //   return (
-      //     <DocsContainer context={context}>
-      //       <ThemeProvider theme={chadTheme}>
-      //         <CssBaseline />
-      //         {children}
-      //       </ThemeProvider>
-      //     </DocsContainer>
-      //   )
-      // },
+      // Workaround for: https://github.com/storybookjs/storybook/issues/26242
+      container: ({ children, context }) => {
+        const theme = context.store.userGlobals.globals.theme
+        return (
+          <DocsContainer context={context}>
+            <ThemeProvider theme={themes[theme]}>
+              <Box sx={{ '& .docs-story': { backgroundColor: 'background.paper' } }}>
+                {children}
+              </Box>
+            </ThemeProvider>
+          </DocsContainer>
+        )
+      },
     },
     layout: 'centered',
   },

packages/curve-ui-kit/package.json

@@ -8,9 +8,8 @@
   "private": true,
   "scripts": {
     "lint": "eslint \"**/*.ts*\"",
-    "validate:figma-tokens": "node scripts/figma-tokens/validation/validate-figma-tokens.js",
-    "storybook": "yarn validate:figma-tokens && storybook dev -p 6006 --no-open",
-    "build:storybook": "yarn validate:figma-tokens && storybook build",
+    "storybook": "storybook dev -p 6006 --no-open",
+    "build:storybook": "storybook build",
     "extract-figma-tokens": "npx tsx scripts/figma-tokens/main.ts"
   },
   "dependencies": {