From 6a69ef40713421fed7d25f7b495ef8a93d869a07 Mon Sep 17 00:00:00 2001 From: Benji <64439681+benjitrosch@users.noreply.github.com> Date: Thu, 14 Apr 2022 18:44:56 -0400 Subject: [PATCH] chore: restyled preview to match daisyui and provide source code (#87) --- .storybook/preview-head.html | 2 +- .storybook/preview.tsx | 17 ++++- .storybook/story-layout.js | 84 +++++++++++++++++++++++ .storybook/story-layout.tsx | 34 --------- package-lock.json | 17 +++++ package.json | 1 + src/Breadcrumbs/Breadcrumbs.stories.tsx | 6 +- src/Button/Button.stories.tsx | 6 +- src/CodeMockup/CodeMockup.stories.tsx | 12 ++-- src/Footer/Footer.stories.tsx | 19 +++-- src/Navbar/Navbar.stories.tsx | 14 ++-- src/PhoneMockup/PhoneMockup.stories.tsx | 6 +- src/Theme/Theme.stories.tsx | 6 +- src/WindowMockup/WindowMockup.stories.tsx | 13 ++-- src/styles.css | 18 +++++ 15 files changed, 174 insertions(+), 81 deletions(-) create mode 100644 .storybook/story-layout.js delete mode 100644 .storybook/story-layout.tsx diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index 574b18c4..7d02d222 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -2,4 +2,4 @@ #story-root { margin-bottom: 3rem; } - \ No newline at end of file + diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index bc4372fb..fd711a09 100644 --- 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) => ( - + {', ''). + /* Removes leftover newline from previous replace */ + replace('\n', ''). + /* Removes the last occurence of a closing bracket (from the lambda) */ + replace(/}([^}]*)$/, '$1') + } + > ), diff --git a/.storybook/story-layout.js b/.storybook/story-layout.js new file mode 100644 index 00000000..00c5cfee --- /dev/null +++ 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 ( + + + + react-daisyui + + + +
+

{title}

+

{description}

+
+
+ setTab(t)} + > + + Preview + + + HTML + + + +
+ {tab === 'preview' ? ( +
+ {children} +
+ ) : ( + + + {({ tokens, getLineProps, getTokenProps }) => ( + 
+                      {tokens.map((line, i) => (
+                        

+                          {line.map((token, key) => (
+                            
+                          ))}
+                        

+                      ))}
+
+ )} + + + )} +
+
+
+
+ + ) +} + +export default StoryLayout diff --git a/.storybook/story-layout.tsx b/.storybook/story-layout.tsx deleted file mode 100644 index 79885b02..00000000 --- a/.storybook/story-layout.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React, { ReactNode } from 'react' - -import { useGlobalTheme } from './theming' - -import Navbar from '../src/Navbar' -import Theme from '../src/Theme' - -type Props = { - children: ReactNode | ReactNode[] - title?: any - description?: string -} - -const StoryLayout = ({ children, title, description }: Props): JSX.Element => { - const globalTheme = useGlobalTheme() - - return ( - - - - react-daisyui - - - -
-

{title}

-

{description}

-
{children}
-
- - ) -} - -export default StoryLayout diff --git a/package-lock.json b/package-lock.json index 302cd58e..1f539b72 100644 --- a/package-lock.json +++ b/package-lock.json @@ -43,6 +43,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", @@ -22532,6 +22533,15 @@ "node": ">= 0.8" } }, + "node_modules/prism-react-renderer": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-1.3.1.tgz", + "integrity": "sha512-xUeDMEz074d0zc5y6rxiMp/dlC7C+5IDDlaEUlcBOFE2wddz7hz5PNupb087mPwTt7T9BrFmewObfCBuf/LKwQ==", + "dev": true, + "peerDependencies": { + "react": ">=0.14.9" + } + }, "node_modules/prismjs": { "version": "1.27.0", "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.27.0.tgz", @@ -46155,6 +46165,13 @@ "integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=", "dev": true }, + "prism-react-renderer": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-1.3.1.tgz", + "integrity": "sha512-xUeDMEz074d0zc5y6rxiMp/dlC7C+5IDDlaEUlcBOFE2wddz7hz5PNupb087mPwTt7T9BrFmewObfCBuf/LKwQ==", + "dev": true, + "requires": {} + }, "prismjs": { "version": "1.27.0", "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.27.0.tgz", diff --git a/package.json b/package.json index fe59aaee..a32b1589 100644 --- 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 index f81ac3d7..dd0bb8f6 100644 --- a/src/Breadcrumbs/Breadcrumbs.stories.tsx +++ b/src/Breadcrumbs/Breadcrumbs.stories.tsx @@ -13,9 +13,9 @@ export default { export const Default: Story = (args) => { return ( - Home - Documents - Add Document + Home + Documents + Add Document ) } diff --git a/src/Button/Button.stories.tsx b/src/Button/Button.stories.tsx index 15a90873..57328ea9 100644 --- a/src/Button/Button.stories.tsx +++ b/src/Button/Button.stories.tsx @@ -16,9 +16,9 @@ export default { }, } as Meta -const Template: Story = (args) => ( - - + ) } diff --git a/src/PhoneMockup/PhoneMockup.stories.tsx b/src/PhoneMockup/PhoneMockup.stories.tsx index 220fa233..1df791bc 100644 --- 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 }) => ( - {children} -) +const Template: Story = (args) => { + return Hi. +} export const Default = Template.bind({}) Default.args = {} diff --git a/src/Theme/Theme.stories.tsx b/src/Theme/Theme.stories.tsx index 132e0002..4e64a518 100644 --- a/src/Theme/Theme.stories.tsx +++ b/src/Theme/Theme.stories.tsx @@ -11,7 +11,7 @@ export default { component: Theme, } as Meta -export const Default: Story = () => { +export const Default: Story = (args) => { return (
{DEFAULT_THEMES.map((theme) => ( @@ -20,7 +20,9 @@ export const Default: Story = () => { dataTheme={theme} className="p-8 bg-neutral rounded-2xl" > -

{toTitleCase(theme)}

+

+ {toTitleCase(theme)} +

diff --git a/src/WindowMockup/WindowMockup.stories.tsx b/src/WindowMockup/WindowMockup.stories.tsx index 93725b2d..6c820bb4 100644 --- a/src/WindowMockup/WindowMockup.stories.tsx +++ b/src/WindowMockup/WindowMockup.stories.tsx @@ -3,7 +3,6 @@ import { Story, Meta } from '@storybook/react' import WindowMockup, { WindowMockupProps } from '.' import { componentColors } from '../constants' -import { twMerge } from 'tailwind-merge' const meta: Meta = { title: `Mockup/WindowMockup`, @@ -18,11 +17,13 @@ const meta: Meta = { export default meta -const Template: Story = ({ children = 'Hello!', ...rest }) => ( - -
{children}
- -) +const Template: Story = (args) => { + return ( + +
Hello!
+ + ) +} export const Default = Template.bind({}) Default.args = {} diff --git a/src/styles.css b/src/styles.css index b5c61c95..5fac10d2 100644 --- a/src/styles.css +++ b/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; +}