chore: upgrade dependencies (#321)

* chore: upgrade dependencies

* docs: regenerated  docs

.storybook/story-layout.js → .storybook/StoryLayout.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { ReactNode, useEffect, useMemo, useState } from 'react'
 import Highlight, { defaultProps } from "prism-react-renderer"
 import theme from "prism-react-renderer/themes/vsDark"
 
@@ -9,14 +9,37 @@ import Navbar from '../src/Navbar'
 import Tabs from '../src/Tabs'
 import Theme from '../src/Theme'
 
-const StoryLayout = ({ children, title, description, source }) => {
+type Props = {
+  children: ReactNode | ReactNode[]
+  title: string
+  description: string
+  source: string
+}
+
+const StoryLayout = ({ children, title, description, source }: Props) => {
   const [tab, setTab] = useState('preview')
   const globalTheme = useGlobalTheme()
 
   useEffect(() => {
     document.getElementsByTagName('html')[0].setAttribute('data-theme', globalTheme)
   }, [globalTheme])
 
+  const Code = () => useMemo(() => (
+    <Highlight {...defaultProps} theme={theme} code={source} language="jsx">
+      {({ tokens, getLineProps, getTokenProps }) => (
+        <pre slot="html">
+          {tokens.map((line, i) => (
+            <div {...getLineProps({ line, key: i })}>
+              {line.map((token, key) => (
+                <span {...getTokenProps({ token, key })} />
+              ))}
+            </div>
+          ))}
+        </pre>
+      )}
+    </Highlight>
+  ), [theme, source])
+
   return (
     <Theme dataTheme={globalTheme} className="w-full h-screen p-8 bg-base-100">
       <Navbar className="p-0 border-b border-neutral text-base-content">
@@ -33,19 +56,7 @@ const StoryLayout = ({ children, title, description, source }) => {
           <div className='block sm:hidden'>
             {children}
             <CodeMockup className="w-full mb-8 mt-3">
-              <Highlight {...defaultProps} theme={theme} code={source} language="jsx">
-                {({ tokens, getLineProps, getTokenProps }) => (
-                  <pre slot="html">
-                    {tokens.map((line, i) => (
-                      <div {...getLineProps({ line, key: i })}>
-                        {line.map((token, key) => (
-                          <span {...getTokenProps({ token, key })} />
-                        ))}
-                      </div>
-                    ))}
-                  </pre>
-                )}
-              </Highlight>
+              <Code />
             </CodeMockup>
           </div>
 
@@ -77,19 +88,7 @@ const StoryLayout = ({ children, title, description, source }) => {
                 </div>
               ) : (
                 <CodeMockup className="w-full mb-8">
-                  <Highlight {...defaultProps} theme={theme} code={source} language="jsx">
-                    {({ tokens, getLineProps, getTokenProps }) => (
-                      <pre slot="html">
-                        {tokens.map((line, i) => (
-                          <div {...getLineProps({ line, key: i })}>
-                            {line.map((token, key) => (
-                              <span {...getTokenProps({ token, key })} />
-                            ))}
-                          </div>
-                        ))}
-                      </pre>
-                    )}
-                  </Highlight>
+                  <Code />
                 </CodeMockup>
               )}
             </div>

.storybook/docs/components/CopyButton.tsx

@@ -6,7 +6,7 @@ export type CopyButtonProps = ButtonProps & {
   text?: string
 }
 
-export const CopyButton = ({ text = '', ...rest }: CopyButtonProps) => {
+export const CopyButton = ({ text = '', ...props }: CopyButtonProps) => {
   const [isCopied, setIsCopied] = useState(false)
 
   const copy = async () => {
@@ -21,7 +21,7 @@ export const CopyButton = ({ text = '', ...rest }: CopyButtonProps) => {
   }
 
   return (
-    <Button {...rest} onClick={handleClick}>
+    <Button {...props} onClick={handleClick}>
       {isCopied ? (
         <svg
           xmlns="http://www.w3.org/2000/svg"

.storybook/docs/pages/Welcome.mdx

@@ -0,0 +1,9 @@
+import { Meta } from '@storybook/blocks'
+
+import { HomePage } from './Welcome'
+
+<Meta title="Welcome" />
+
+<div className="sb-unstyled">
+    <HomePage />
+</div>

.storybook/main.ts

@@ -0,0 +1,22 @@
+import { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['./docs/pages/Welcome.mdx', "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: ['@storybook/addon-actions', '@storybook/addon-storysource', {
+    name: '@storybook/addon-styling',
+    options: {
+      implementation: require("postcss"),
+    },
+  }, {
+    name: '@storybook/addon-essentials',
+    options: {
+      backgrounds: false
+    }
+  }],
+  framework: '@storybook/react-vite',
+  docs: {
+    autodocs: false
+  }
+};
+
+export default config;

.storybook/manager.ts

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/manager-api'
+import theme from './theme'
+
+addons.setConfig({
+  theme: theme,
+})

.storybook/preview.tsx

@@ -1,74 +1,83 @@
 import React from 'react'
+import type { Preview } from "@storybook/react";
 
-import StoryLayout from './story-layout'
+import StoryLayout from './StoryLayout'
 
 import '../src/styles.css'
 import { DEFAULT_THEME, STORAGE_KEY, THEME_PICKER_LIST } from './theming'
-import { docsTheme } from './theme.cjs'
+import theme from './theme'
 
-export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
-  previewTabs: {
-    'storybook/docs/panel': { hidden: true },
-  },
-  controls: {
-    matchers: {
-      date: /Date$/,
-    },
-  },
-  layout: 'fullscreen',
-  options: {
-    storySort: {
-      order: [
-        'Welcome',
-        'Utils',
-        'Actions',
-        'Data Display',
-        'Data Input',
-        'Layout',
-        'Navigation',
-        'Mockup',
-      ],
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    previewTabs: {
+      'storybook/docs/panel': { hidden: true },
     },
-  },
-  themes: {
-    default: window.localStorage.getItem(STORAGE_KEY) || DEFAULT_THEME,
-    onChange: (theme) => {
-      // STORAGE_KEY does not work in onChange... not sure why
-      if (theme) {
-        window.localStorage.setItem(
-          'sb-react-daisyui-preview-theme',
-          theme.class
-        )
-      } else {
-        window.localStorage.removeItem('sb-react-daisyui-preview-theme')
-      }
+    controls: {
+      matchers: {
+        date: /Date$/,
+      },
     },
-    list: THEME_PICKER_LIST,
-  },
-  docs: {
-    theme: docsTheme,
+    layout: 'fullscreen',
     options: {
-      layout: 'fullscreen',
+      storySort: {
+        order: [
+          'Welcome',
+          'Utils',
+          'Actions',
+          'Data Display',
+          'Data Input',
+          'Layout',
+          'Navigation',
+          'Mockup',
+        ],
+      },
+    },
+    themes: {
+      default: window.localStorage.getItem(STORAGE_KEY) || DEFAULT_THEME,
+      onChange: (theme) => {
+        // STORAGE_KEY does not work in onChange... not sure why
+        if (theme) {
+          window.localStorage.setItem(
+            'sb-react-daisyui-preview-theme',
+            theme.class
+          )
+        } else {
+          window.localStorage.removeItem('sb-react-daisyui-preview-theme')
+        }
+      },
+      list: THEME_PICKER_LIST,
+    },
+    docs: {
+      theme: theme,
+      options: {
+        layout: 'fullscreen',
+      },
     },
   },
+  decorators: [
+    (Story, options) => (
+      <StoryLayout
+        title={options.title}
+        description={options.name}
+        source={
+          options.parameters.docs.source.originalSource.
+          /* TODO: clean up all this string formatting/regex */
+          /* Removes the args arrow function */
+          replace(/^args\s*=>\s*\{\s*/, '    ').
+          replace(/\(.*args.*\)\s*=>\s*\{\s*\n/, '    ').
+          replace(/^(\s*)return\s+/, '$1').
+          replace(/_s\(\);/, '').
+          /* Removes the last occurence of a closing bracket (from the lambda) */
+          replace(/}([^}]*)$/, '$1')
+          /* Removes the last occurence of a semicolon */
+          .replace(/;(?=[^;]*$)/, '')
+        }
+      >
+        <Story />
+      </StoryLayout>
+    ),
+  ]
 }
 
-export const decorators = [
-  (Story, options) => (
-    <StoryLayout
-      title={options.title}
-      description={options.story}
-      source={
-        options.parameters.storySource.source.
-        /* TODO: clean up all this string formatting/regex */
-        /* Removes the args arrow function */
-        replace(/\(.*args.*\)\s*=>\s*\{\s*\n/, '').
-        /* Removes the last occurence of a closing bracket (from the lambda) */
-        replace(/}([^}]*)$/, '$1')
-      }
-    >
-      <Story />
-    </StoryLayout>
-  ),
-]
+export default preview

.storybook/theme.cjs → .storybook/theme.ts

@@ -1,6 +1,6 @@
-import { create } from '@storybook/theming'
+import { create, ThemeVars } from '@storybook/theming'
 
-const baseTheme = {
+const baseTheme: ThemeVars = {
   base: 'dark',
   brandTitle: 'react-daisyUI',
   brandUrl: 'https://github.com/daisyui/react-daisyui',
@@ -24,9 +24,4 @@ const baseTheme = {
   barBg: '#191D24',
 }
 
-export const docsTheme = {
-  ...baseTheme,
-  maxWidth: '100%',
-}
-
 export default create(baseTheme)