feat(libs/shared/ui): create storybook

cuhacking · Nov 12, 2024 · 12c454c · 12c454c
1 parent 4a89083
commit 12c454c
Show file tree

Hide file tree

Showing 21 changed files with 1,536 additions and 6 deletions.
diff --git a/libs/shared/ui/.storybook/custom-viewports.ts b/libs/shared/ui/.storybook/custom-viewports.ts
@@ -0,0 +1,40 @@
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
+
+export const customViewports = {
+  ...INITIAL_VIEWPORTS,
+  '720p': {
+    name: '720p',
+    styles: {
+      width: '1280px',
+      height: '720px',
+    },
+  },
+  '1080p': {
+    name: '1080p',
+    styles: {
+      width: '1920px',
+      height: '1080px',
+    },
+  },
+  '2k': {
+    name: '2K',
+    styles: {
+      width: '2560px',
+      height: '1440px',
+    },
+  },
+  '4k': {
+    name: '4K',
+    styles: {
+      width: '3840px',
+      height: '2160px',
+    },
+  },
+  '21/9': {
+    name: '21/9',
+    styles: {
+      width: '2560px',
+      height: '1080px',
+    },
+  },
+}
diff --git a/libs/shared/ui/.storybook/global.css b/libs/shared/ui/.storybook/global.css
@@ -0,0 +1,66 @@
+/**
+ * Don't forget to update your APPs global.css to include this file!
+ */
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5.9% 10%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings:
+      'rlig' 1,
+      'calt' 1;
+  }
+}
diff --git a/libs/shared/ui/.storybook/main.ts b/libs/shared/ui/.storybook/main.ts
@@ -0,0 +1,88 @@
+import type { StorybookConfig } from '@storybook/nextjs'
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'],
+  framework: {
+    name: '@storybook/nextjs',
+    options: {},
+  },
+  docs: {},
+  // Did not use @storybook/addon-essentials due to lack of toolbar ordering API
+  addons: [
+    // --------------- Toolbar Icons ---------------
+    // Ruler
+    '@storybook/addon-measure',
+    // Phone
+    '@storybook/addon-viewport',
+    // Dotted Outline
+    '@storybook/addon-outline',
+    // Sun/Moon icon. Toggle Manager, Preview Components, and Preview Background
+    'storybook-dark-mode',
+    // Pen. Toggle both Preview Components and Preview Background
+    '@storybook/addon-themes',
+    // Portrait. Toggle only Preview Background. Not affected by other two, use to 'lock' the background.
+    '@storybook/addon-backgrounds',
+
+    // --------------- Action Bar ---------------
+    // https://storybook.js.org/docs/essentials/controls
+    '@storybook/addon-controls',
+    // Person inside circle icon. Also 'Accessibility' tab to action bar
+    '@storybook/addon-a11y',
+    // Accessibility tab added by '@storybook/addon-a11y'
+    {
+      name: '@storybook/addon-designs', // Actually has amazing docs for once: https://storybookjs.github.io/addon-designs/?path=/docs/docs-quick-start--docs
+      options: {
+        // renderTarget: 'canvas' | 'tab'
+      },
+    },
+    // https://storybook.js.org/docs/essentials/actions
+    '@storybook/addon-actions',
+    // https://storybook.js.org/docs/essentials/interactions
+    '@storybook/addon-interactions', // Must be listed after @storybook/addon-actions or @storybook/addon-essentials
+
+    // '@chromatic-com/storybook',
+    // Code for component story
+    // {
+    //   name: '@storybook/addon-storysource',
+    //   options: {
+    //     rule: {
+    //       test: [/\.stories\.tsx?$/],
+    //       include: [path.resolve(__dirname, '../src')], // You can specify directories
+    //     },
+    //     loaderOptions: {
+    //       parser: 'typescript',
+    //       injectStoryParameters: false,
+    //       prettierConfig: { printWidth: 80, singleQuote: false },
+    //     },
+    //     enforce: 'pre',
+    //   },
+    // },
+    '@storybook/addon-links',
+
+    // --------------- No-icons ---------------
+    // Onboarding flow
+    // '@storybook/addon-onboarding',
+    // Custom toolbars
+    // '@storybook/addon-toolbars',
+    // Auto-generate MDX/React/JSX documentation for components
+    // https://github.com/storybookjs/storybook/tree/next/code/addons/docs
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        // csfPluginOptions: null,
+        // mdxPluginOptions: {
+        //   mdxCompileOptions: {
+        //     remarkPlugins: [],
+        //   },
+        // },
+        sourceLoaderOptions: {
+          injectStoryParameters: false,
+        },
+      },
+    },
+    // HTML Tab in action bar
+    // https://github.com/whitespace-se/storybook-addon-html
+    '@whitespace/storybook-addon-html',
+  ],
+}
+export default config
diff --git a/libs/shared/ui/.storybook/preview.tsx b/libs/shared/ui/.storybook/preview.tsx
@@ -0,0 +1,178 @@
+import type { Preview } from '@storybook/react'
+import { withThemeByClassName } from '@storybook/addon-themes'// Wide button with a pen and text. Toggles both Preview Components and Preview Background
+
+import { DocsContainer, type DocsContextProps } from '@storybook/blocks'
+import { themes, type ThemeVars } from '@storybook/theming'
+import { ThemeProvider } from 'next-themes'
+import React from 'react'
+
+import { DARK_MODE_EVENT_NAME } from 'storybook-dark-mode'
+
+import { customViewports } from './custom-viewports'
+import { commonTheme, darkUIStorybook, lightUIStorybook } from './themes-storybook-ui'
+/* import '../../utils/src/global.css' */
+import './global.css'
+
+const preview: Preview = {
+  parameters: {
+    layout: 'fullscreen',
+    // https://storybook.js.org/docs/essentials/actions
+    actions: {
+      argTypesRegex: '^on[A-Z].*',
+    },
+    // https://storybook.js.org/docs/essentials/controls
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    options: {
+      // https://storybook.js.org/docs/writing-stories/naming-components-and-hierarchy#sorting-stories
+      storySort: {
+        method: 'alphabetical',
+        order: [
+          'Website',
+          ['Hero', 'About'],
+          'cuHacking Design System',
+          'Shadcn-ui',
+          [
+            'Introduction',
+            'Semantic Color Palette',
+            'Font Size',
+            'Typography',
+          ],
+          'Tailwind CSS Primitives',
+        ],
+      },
+    },
+    // https://storybook.js.org/docs/essentials/viewport
+    viewport: {
+      viewports: {
+        ...customViewports,
+      },
+    },
+    // globalTypes: {
+    //   theme: {
+    //     description: 'Global theme for components',
+    //     defaultValue: 'light',
+    //     toolbar: { // Requires @storybook/addon-toolbars, included in @storybook/addon-essentials. Imported separately in main.ts.
+    //       // The label to show for this toolbar item
+    //       title: 'Theme',
+    //       icon: 'medium',
+    //       // Array of plain string values or MenuItem shape (see below)
+    //       items: ['light', 'dark'],
+    //       // Change title based on selected value
+    //       dynamicTitle: true,
+    //     },
+    //   },
+    // },
+    // https://storybook.js.org/addons/storybook-dark-mode
+    darkMode: {
+      classTarget: 'html',
+      stylePreview: true,
+      darkClass: 'dark',
+      lightClass: 'light',
+      // Set the initial theme
+      current: 'dark',
+      // Override the default dark theme
+      dark: {
+        ...themes.dark,
+        ...darkUIStorybook,
+        ...commonTheme,
+      },
+      // Override the default light theme
+      light: {
+        ...themes.normal,
+        ...lightUIStorybook,
+        ...commonTheme,
+      },
+    },
+    // https://storybook.js.org/docs/essentials/backgrounds
+    backgrounds: {
+      // disable: true,
+      // default: 'twitter',
+      values: [
+        {
+          name: 'black',
+          value: '#000000',
+        },
+        {
+          name: 'twitter',
+          value: '#00aced',
+        },
+        {
+          name: 'facebook',
+          value: '#3b5998',
+        },
+      ],
+      grid: {
+        // disable: true,
+        // cellSize: 20,
+        // opacity: 0.5,
+        // cellAmount: 5,
+        // offsetX: 16, // Default is 0 if story has 'fullscreen' layout, 16 if layout is 'padded'
+        // offsetY: 16, // Default is 0 if story has 'fullscreen' layout, 16 if layout is 'padded'
+      },
+    },
+    // fix for theming docs page found here: https://github.com/hipstersmoothie/storybook-dark-mode/issues/282#issuecomment-2208816632
+    docs: {
+      defaultName: 'Documentation',
+      toc: true,
+      container: (props: {
+        children: React.ReactNode
+        context: DocsContextProps
+        theme?: ThemeVars
+      }) => {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const [isDark, setDark] = React.useState(true)
+        props.context.channel.on(DARK_MODE_EVENT_NAME, state =>
+          setDark(state))
+        const currentProps = { ...props }
+        // currentProps.theme = isDark ? themes.dark : themes.light
+        currentProps.theme = isDark ? darkUIStorybook as ThemeVars : themes.light
+        // console.log('Current Props Theme:', currentProps.theme)
+        // console.log('Themes Dark:', themes.dark)
+        // console.log('Dark UI Storybook:', darkUIStorybook)
+        // console.log('Merged Theme:', { ...themes.dark, ...darkUIStorybook, ...commonTheme })
+        return <DocsContainer {...currentProps} />
+      },
+    },
+    // https://github.com/whitespace-se/storybook-addon-html
+    html: {
+      prettier: {
+        tabWidth: 4,
+        useTabs: false,
+        htmlWhitespaceSensitivity: 'strict',
+      },
+      highlighter: {
+        showLineNumbers: true, // default: false
+        wrapLines: true, // default: true
+      },
+      // disable: true, // default: false
+    },
+  },
+
+  decorators: [
+    (Story) => {
+      return (
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="dark"
+          disableTransitionOnChange
+        >
+          <Story />
+        </ThemeProvider>
+      )
+    },
+    withThemeByClassName({
+      themes: {
+        light: 'light',
+        dark: 'dark',
+      },
+      defaultTheme: 'dark',
+    }),
+  ],
+}
+
+export default preview