chore: restyled preview to match daisyui and provide source code (#87)

daisyui · Apr 14, 2022 · 6a69ef4 · 6a69ef4
1 parent a24406c
commit 6a69ef4
Show file tree

Hide file tree

Showing 15 changed files with 174 additions and 81 deletions.
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -2,4 +2,4 @@
   #story-root {
     margin-bottom: 3rem;
   }
-</style>
+</style>
diff --git a/.storybook/preview.tsx b/.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>
   ),

diff --git a/.storybook/story-layout.js b/.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
diff --git a/.storybook/story-layout.tsx b/.storybook/story-layout.tsx
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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",

diff --git a/src/Breadcrumbs/Breadcrumbs.stories.tsx b/src/Breadcrumbs/Breadcrumbs.stories.tsx
@@ -13,9 +13,9 @@ export default {
 export const Default: Story<BreadcrumbsProps> = (args) => {
   return (
     <Breadcrumbs {...args}>
-      <Item href="/">Home</Item>
-      <Item href="/">Documents</Item>
-      <Item href="/">Add Document</Item>
+      <Breadcrumbs.Item href="/">Home</Breadcrumbs.Item>
+      <Breadcrumbs.Item href="/">Documents</Breadcrumbs.Item>
+      <Breadcrumbs.Item href="/">Add Document</Breadcrumbs.Item>
     </Breadcrumbs>
   )
 }

diff --git a/src/Button/Button.stories.tsx b/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'

diff --git a/src/CodeMockup/CodeMockup.stories.tsx b/src/CodeMockup/CodeMockup.stories.tsx
@@ -1,9 +1,7 @@
 import React from 'react'
 import { Story, Meta } from '@storybook/react'
 
-import Code, { CodeProps } from '.'
-
-import CodeMockup from '.'
+import CodeMockup, { CodeMockupProps } from '.'
 
 const meta: Meta = {
   title: `Mockup/CodeMockup`,
@@ -16,11 +14,9 @@ const meta: Meta = {
 
 export default meta
 
-const Template: Story = ({ children, ...rest }) => (
-  <div className="w-96">
-    <CodeMockup {...rest}>{children}</CodeMockup>
-  </div>
-)
+const Template: Story<CodeMockupProps> = (args) => {
+  return <CodeMockup {...args} />
+}
 
 export const Default = Template.bind({})
 Default.args = {

diff --git a/src/Footer/Footer.stories.tsx b/src/Footer/Footer.stories.tsx
@@ -2,7 +2,6 @@ import React from 'react'
 import { Story, Meta } from '@storybook/react'
 
 import Footer, { FooterProps } from '.'
-import FooterTitle from './FooterTitle'
 
 export default {
   title: 'Layout/Footer',
@@ -13,21 +12,21 @@ export const Default: Story<FooterProps> = (args) => {
   return (
     <Footer className="p-10 bg-neutral text-neutral-content" {...args}>
       <div>
-        <FooterTitle>Services</FooterTitle>
+        <Footer.Title>Services</Footer.Title>
         <a className="link link-hover">Branding</a>
         <a className="link link-hover">Design</a>
         <a className="link link-hover">Marketing</a>
         <a className="link link-hover">Advertisement</a>
       </div>
       <div>
-        <FooterTitle>Company</FooterTitle>
+        <Footer.Title>Company</Footer.Title>
         <a className="link link-hover">About us</a>
         <a className="link link-hover">Contact</a>
         <a className="link link-hover">Jobs</a>
         <a className="link link-hover">Press kit</a>
       </div>
       <div>
-        <FooterTitle>Legal</FooterTitle>
+        <Footer.Title>Legal</Footer.Title>
         <a className="link link-hover">Terms of use</a>
         <a className="link link-hover">Privacy policy</a>
         <a className="link link-hover">Cookie policy</a>
@@ -59,21 +58,21 @@ export const WithLogo: Story<FooterProps> = (args) => {
       </div>
 
       <div>
-        <FooterTitle>Services</FooterTitle>
+        <Footer.Title>Services</Footer.Title>
         <a className="link link-hover">Branding</a>
         <a className="link link-hover">Design</a>
         <a className="link link-hover">Marketing</a>
         <a className="link link-hover">Advertisement</a>
       </div>
       <div>
-        <FooterTitle>Company</FooterTitle>
+        <Footer.Title>Company</Footer.Title>
         <a className="link link-hover">About us</a>
         <a className="link link-hover">Contact</a>
         <a className="link link-hover">Jobs</a>
         <a className="link link-hover">Press kit</a>
       </div>
       <div>
-        <FooterTitle>Legal</FooterTitle>
+        <Footer.Title>Legal</Footer.Title>
         <a className="link link-hover">Terms of use</a>
         <a className="link link-hover">Privacy policy</a>
         <a className="link link-hover">Cookie policy</a>
@@ -105,21 +104,21 @@ export const WithLogoAndLightBackground: Story<FooterProps> = (args) => {
       </div>
 
       <div>
-        <FooterTitle>Services</FooterTitle>
+        <Footer.Title>Services</Footer.Title>
         <a className="link link-hover">Branding</a>
         <a className="link link-hover">Design</a>
         <a className="link link-hover">Marketing</a>
         <a className="link link-hover">Advertisement</a>
       </div>
       <div>
-        <FooterTitle>Company</FooterTitle>
+        <Footer.Title>Company</Footer.Title>
         <a className="link link-hover">About us</a>
         <a className="link link-hover">Contact</a>
         <a className="link link-hover">Jobs</a>
         <a className="link link-hover">Press kit</a>
       </div>
       <div>
-        <FooterTitle>Legal</FooterTitle>
+        <Footer.Title>Legal</Footer.Title>
         <a className="link link-hover">Terms of use</a>
         <a className="link link-hover">Privacy policy</a>
         <a className="link link-hover">Cookie policy</a>

diff --git a/src/Navbar/Navbar.stories.tsx b/src/Navbar/Navbar.stories.tsx
@@ -4,8 +4,6 @@ import { Story, Meta } from '@storybook/react'
 import Navbar, { NavbarProps } from '.'
 import Button from '../Button'
 
-const { Start, Center, End } = Navbar
-
 export default {
   title: 'Navigation/Navbar',
   component: Navbar,
@@ -14,20 +12,20 @@ export default {
 export const Default: Story<NavbarProps> = (args) => {
   return (
     <Navbar {...args}>
-      <Start className="px-2 mx-2">
+      <Navbar.Start className="px-2 mx-2">
         <span className="text-lg font-bold">daisyUI</span>
-      </Start>
+      </Navbar.Start>
 
-      <Center className="px-2 mx-2">
+      <Navbar.Center className="px-2 mx-2">
         <div className="flex items-stretch">
           <a className="btn btn-ghost btn-sm rounded-btn">Home</a>
           <a className="btn btn-ghost btn-sm rounded-btn">Portfolio</a>
           <a className="btn btn-ghost btn-sm rounded-btn">About</a>
           <a className="btn btn-ghost btn-sm rounded-btn">Contact</a>
         </div>
-      </Center>
+      </Navbar.Center>
 
-      <End className="px-2 mx-2">
+      <Navbar.End className="px-2 mx-2">
         <Button shape="square" color="ghost">
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -58,7 +56,7 @@ export const Default: Story<NavbarProps> = (args) => {
             ></path>
           </svg>
         </Button>
-      </End>
+      </Navbar.End>
     </Navbar>
   )
 }

diff --git a/src/PhoneMockup/PhoneMockup.stories.tsx b/src/PhoneMockup/PhoneMockup.stories.tsx
@@ -17,9 +17,9 @@ const meta: Meta = {
 
 export default meta
 
-const Template: Story = ({ children = 'Hi.', ...rest }) => (
-  <PhoneMockup {...rest}>{children}</PhoneMockup>
-)
+const Template: Story<PhoneMockupProps> = (args) => {
+  return <PhoneMockup {...args}>Hi.</PhoneMockup>
+}
 
 export const Default = Template.bind({})
 Default.args = {}