chore: restyled preview to match daisyui and provide source code

.storybook/preview-head.html

@@ -2,4 +2,4 @@
   #story-root {
     margin-bottom: 3rem;
   }
-</style>
+</style>

.storybook/preview.tsx

@@ -1,5 +1,3 @@
-import { addons } from '@storybook/addons'
-import { themes } from '@storybook/theming'
 import React from 'react'
 
 import StoryLayout from './story-layout'
@@ -58,7 +56,20 @@ export const parameters = {
 
 export const decorators = [
   (Story, options) => (
-    <StoryLayout title={options.title} description={options.story}>
+    <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) => {', '').
+        /* Removes leftover newline from previous replace */
+        replace('\n', '').
+        /* Removes the last occurence of a closing bracket (from the lambda) */
+        replace(/}([^}]*)$/, '$1')
+      }
+    >
       <Story />
     </StoryLayout>
   ),

.storybook/story-layout.js

@@ -0,0 +1,84 @@
+import React, { useEffect, useState } from 'react'
+import Highlight, { defaultProps } from "prism-react-renderer"
+import theme from "prism-react-renderer/themes/vsDark"
+
+import { useGlobalTheme } from './theming'
+
+import Navbar from '../src/Navbar'
+import Tabs from '../src/Tabs'
+import CodeMockup from '../src/CodeMockup'
+import Theme from '../src/Theme'
+
+const StoryLayout = ({ children, title, description, source }) => {
+  const [tab, setTab] = useState('preview')
+  const globalTheme = useGlobalTheme()
+
+  useEffect(() => {
+    document.getElementsByTagName('html')[0].setAttribute('data-theme', globalTheme)
+  }, [globalTheme])
+
+  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">
+        <Navbar.Start>
+          <span className="text-lg font-bold">react-daisyui</span>
+        </Navbar.Start>
+      </Navbar>
+
+      <div className="w-full h-full my-4">
+        <h1 className="text-4xl text-base-content font-bold">{title}</h1>
+        <p className="text-base-content">{description}</p>
+        <div className="my-4">
+          <div className='grid'>
+            <Tabs
+              className='z-10 -mb-px'
+              variant='lifted'
+              value={tab}
+              onChange={(t) => setTab(t)}
+            >
+              <Tabs.Tab value="preview" className="[--tab-bg:hsl(var(--b2))]">
+                Preview
+              </Tabs.Tab> 
+              <Tabs.Tab value="html" className={tab === 'html' ? "[--tab-bg:hsl(var(--n))] [--tab-border-color:hsl(var(--n))] [--tab-color:hsl(var(--nc))]" : ""}>
+                HTML
+              </Tabs.Tab> 
+              <Tabs.Tab value="html" className="mr-6 flex-1 cursor-default [--tab-border-color:transparent]" /> 
+            </Tabs>
+            <div className='rounded-b-box rounded-tr-box relative overflow-x-auto'>
+              {tab === 'preview' ? (
+                <div
+                  className="preview border-base-300 bg-base-200 rounded-b-box rounded-tr-box
+                            flex min-h-[6rem] min-w-[18rem] flex-wrap items-center justify-center gap-2
+                            overflow-x-hidden border bg-cover bg-top p-4"
+                  style={{
+                    backgroundSize: '5px 5px',
+                  }}
+                >
+                  {children}
+                </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>
+                </CodeMockup>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </Theme>
+  )
+}
+
+export default StoryLayout

package.json

@@ -74,6 +74,7 @@
     "plop": "^3.0.5",
     "postcss": "^8.4.8",
     "prettier": "^2.3.2",
+    "prism-react-renderer": "^1.3.1",
     "react-test-renderer": "^17.0.2",
     "storybook-addon-themes": "^6.1.0",
     "storybook-builder-vite": "^0.1.18",

src/Button/Button.stories.tsx

@@ -16,9 +16,9 @@ export default {
   },
 } as Meta
 
-const Template: Story<ButtonProps> = (args) => (
-  <Button {...args} />
-)
+const Template: Story<ButtonProps> = (args) => {
+  return <Button {...args} />
+}
 export const Default = Template.bind({})
 Default.args = {
   children: 'Button'

src/styles.css

@@ -1,3 +1,21 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+:root {
+    --base-content: theme('colors.base-content');
+    --base-100: theme('colors.base-100');
+    --base-200: theme('colors.base-200');
+    --alpha: 0.2;
+}
+
+/* FIXME: this class should add the polka-dotted background to story previews. 
+ * however we cannot add transparency to the base-content color variable.
+ */
+.preview {
+    background: radial-gradient(
+        var(--base-100), 0.5px,
+        var(--base-200) 0.5px
+    );
+    background-size: 5px 5px;
+}