From 553f97dddded41a35e454bbf4d9be2821246914e Mon Sep 17 00:00:00 2001 From: SySagar Date: Sat, 5 Oct 2024 00:14:35 +0530 Subject: [PATCH] feat(ui): light/dark themer for storybook --- apps/ui/.storybook/decorator.tsx | 48 ++++++++++ apps/ui/.storybook/preview.tsx | 15 +++- apps/ui/lib/color-scheme.css | 9 ++ apps/ui/lib/color-scheme.css.d.ts | 6 ++ apps/ui/lib/tailwind.css | 10 +++ apps/ui/lib/tailwind.css.d.ts | 2 + apps/ui/package.json | 2 + apps/ui/stories/Progress.stories.tsx | 8 +- package-lock.json | 127 +++++++++++++++++++++++++-- 9 files changed, 215 insertions(+), 12 deletions(-) create mode 100644 apps/ui/.storybook/decorator.tsx create mode 100644 apps/ui/lib/color-scheme.css create mode 100644 apps/ui/lib/color-scheme.css.d.ts diff --git a/apps/ui/.storybook/decorator.tsx b/apps/ui/.storybook/decorator.tsx new file mode 100644 index 0000000..129aeeb --- /dev/null +++ b/apps/ui/.storybook/decorator.tsx @@ -0,0 +1,48 @@ +import React from 'react'; + +export function withGlobalStyles(Story, context) { + let { scheme } = context.globals; + + function Flex({ children, ...props }) { + return ( +
+ {children} +
+ ); + } + + if (scheme === 'light') { + return ( + + + + ); + } + + if (scheme === 'dark') { + return ( + + + + ); + } + + return ( +
+ + + + + + +
+ ); +} diff --git a/apps/ui/.storybook/preview.tsx b/apps/ui/.storybook/preview.tsx index c2b1abd..cd9bc6e 100644 --- a/apps/ui/.storybook/preview.tsx +++ b/apps/ui/.storybook/preview.tsx @@ -1,6 +1,6 @@ // https://storybook.js.org/docs/react/writing-stories/parameters#global-parameters import '../lib/tailwind.css'; - +import '../lib/color-scheme.css'; const customViewports = { xs: { name: 'XS', @@ -52,3 +52,16 @@ export const parameters = { customViewports, }, }; + +export const globalTypes = { + scheme: { + name: 'Scheme', + description: 'Select light or dark', + defaultValue: 'both', + toolbar: { + icon: 'mirror', + items: ['light', 'dark', 'both'], + dynamicTitle: true, + }, + }, +}; diff --git a/apps/ui/lib/color-scheme.css b/apps/ui/lib/color-scheme.css new file mode 100644 index 0000000..480792f --- /dev/null +++ b/apps/ui/lib/color-scheme.css @@ -0,0 +1,9 @@ +.color-scheme--dark { + background-color: #0a0a0a; + --text-color: #ffffff; +} + +.color-scheme--light { + background-color: #ffffff; + --text-color: #000000; +} diff --git a/apps/ui/lib/color-scheme.css.d.ts b/apps/ui/lib/color-scheme.css.d.ts new file mode 100644 index 0000000..18788e4 --- /dev/null +++ b/apps/ui/lib/color-scheme.css.d.ts @@ -0,0 +1,6 @@ +declare const styles: { + readonly "color-scheme--dark": string; + readonly "color-scheme--light": string; +}; +export = styles; + diff --git a/apps/ui/lib/tailwind.css b/apps/ui/lib/tailwind.css index 74f91df..c3aee29 100644 --- a/apps/ui/lib/tailwind.css +++ b/apps/ui/lib/tailwind.css @@ -21,3 +21,13 @@ margin: 0; /* Remove default margins */ padding: 0; /* Remove default paddings */ } + +.color-scheme--light { + --background-color: #ffffff; + --text-color: #000000; +} + +.color-scheme--dark { + --background-color: #333333; + --text-color: #ffffff; +} diff --git a/apps/ui/lib/tailwind.css.d.ts b/apps/ui/lib/tailwind.css.d.ts index d0f5e95..37f9b86 100644 --- a/apps/ui/lib/tailwind.css.d.ts +++ b/apps/ui/lib/tailwind.css.d.ts @@ -1,4 +1,6 @@ declare const styles: { + readonly "color-scheme--dark": string; + readonly "color-scheme--light": string; readonly "ui": string; }; export = styles; diff --git a/apps/ui/package.json b/apps/ui/package.json index c6827ac..acceb83 100644 --- a/apps/ui/package.json +++ b/apps/ui/package.json @@ -71,10 +71,12 @@ "@storybook/addon-themes": "^8.3.0", "@storybook/addons": "^7.5.3", "@storybook/builder-vite": "^8.2.1", + "@storybook/manager-api": "^8.3.5", "@storybook/react": "^7.6.17", "@storybook/react-vite": "^8.2.1", "@storybook/react-webpack5": "7.5.3", "@storybook/testing-react": "^2.0.1", + "@storybook/theming": "^8.3.5", "@testing-library/jest-dom": "^6.1.5", "@testing-library/react": "^14.1.2", "@types/node": "^20.11.19", diff --git a/apps/ui/stories/Progress.stories.tsx b/apps/ui/stories/Progress.stories.tsx index 7bdcb00..6313e01 100644 --- a/apps/ui/stories/Progress.stories.tsx +++ b/apps/ui/stories/Progress.stories.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { Meta, Story } from '@storybook/react'; - +import { withGlobalStyles } from '../.storybook/decorator'; import { Progress, Text } from '../lib'; const DefaultTemplate = ({ value = 40 }) => { @@ -10,11 +10,14 @@ const DefaultTemplate = ({ value = 40 }) => { display: 'flex', alignItems: 'start', flexDirection: 'column', + width: '70%', justifyItems: 'start', gap: '1rem', }} > - {value}% complete + + {value}% complete + ); @@ -23,6 +26,7 @@ const DefaultTemplate = ({ value = 40 }) => { export default { title: 'components/Progress', component: DefaultTemplate, + decorators: [withGlobalStyles], } as Meta; export const Default = () => { diff --git a/package-lock.json b/package-lock.json index 49ead0c..5b7ef8b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -31,6 +31,7 @@ "@groovy-box/ui": "*", "@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-select": "^2.1.1", + "clsx": "^2.1.1", "framer-motion": "^11.5.6", "fumadocs-core": "13.4.10", "fumadocs-mdx": "10.0.2", @@ -42,6 +43,7 @@ "react-dom": "^18.3.1", "react-icons": "^5.3.0", "react-syntax-highlighter": "^15.5.0", + "tailwind-merge": "^2.5.3", "tailwindcss-scoped-preflight": "^3.4.4" }, "devDependencies": { @@ -110,10 +112,12 @@ "@storybook/addon-themes": "^8.3.0", "@storybook/addons": "^7.5.3", "@storybook/builder-vite": "^8.2.1", + "@storybook/manager-api": "^8.3.5", "@storybook/react": "^7.6.17", "@storybook/react-vite": "^8.2.1", "@storybook/react-webpack5": "7.5.3", "@storybook/testing-react": "^2.0.1", + "@storybook/theming": "^8.3.5", "@testing-library/jest-dom": "^6.1.5", "@testing-library/react": "^14.1.2", "@types/node": "^20.11.19", @@ -169,6 +173,32 @@ "react": ">=16" } }, + "apps/ui/node_modules/@storybook/manager-api": { + "version": "8.3.5", + "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-8.3.5.tgz", + "integrity": "sha512-fEQoKKi7h7pzh2z9RfuzatJxubrsfL/CB99fNXQ0wshMSY/7O4ckd18pK4fzG9ErnCtLAO9qsim4N/4eQC+/8Q==", + "dev": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "storybook": "^8.3.5" + } + }, + "apps/ui/node_modules/@storybook/theming": { + "version": "8.3.5", + "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-8.3.5.tgz", + "integrity": "sha512-9HmDDyC691oqfg4RziIM9ElsS2HITaxmH7n/yeUPtuirkPdAQzqOzhvH/Sa0qOhifzs8VjR+Gd/a/ZQ+S38r7w==", + "dev": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "storybook": "^8.3.5" + } + }, "apps/ui/node_modules/@testing-library/jest-dom": { "version": "6.4.6", "dev": true, @@ -8113,16 +8143,19 @@ } }, "node_modules/@storybook/core": { - "version": "8.3.0", + "version": "8.3.5", + "resolved": "https://registry.npmjs.org/@storybook/core/-/core-8.3.5.tgz", + "integrity": "sha512-GOGfTvdioNa/n+Huwg4u/dsyYyBcM+gEcdxi3B7i5x4yJ3I912KoVshumQAOF2myKSRdI8h8aGWdx7nnjd0+5Q==", "dev": true, - "license": "MIT", "dependencies": { "@storybook/csf": "^0.1.11", "@types/express": "^4.17.21", + "better-opn": "^3.0.2", "browser-assert": "^1.2.1", "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0", "esbuild-register": "^3.5.0", "express": "^4.19.2", + "jsdoc-type-pratt-parser": "^4.0.0", "process": "^0.11.10", "recast": "^0.23.5", "semver": "^7.6.2", @@ -12218,6 +12251,18 @@ "version": "1.0.2", "license": "MIT" }, + "node_modules/better-opn": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/better-opn/-/better-opn-3.0.2.tgz", + "integrity": "sha512-aVNobHnJqLiUelTaHat9DZ1qM2w0C0Eym4LPI/3JxOnSokGVdsl1T1kN7TFvsEAD8G47A6VKQ0TVHqbBnYMJlQ==", + "dev": true, + "dependencies": { + "open": "^8.0.4" + }, + "engines": { + "node": ">=12.0.0" + } + }, "node_modules/better-path-resolve": { "version": "1.0.0", "license": "MIT", @@ -13014,8 +13059,8 @@ }, "node_modules/clsx": { "version": "2.1.1", - "dev": true, - "license": "MIT", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", "engines": { "node": ">=6" } @@ -14103,6 +14148,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/define-lazy-prop": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz", + "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==", + "dev": true, + "engines": { + "node": ">=8" + } + }, "node_modules/define-properties": { "version": "1.2.1", "dev": true, @@ -17964,6 +18018,21 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/is-docker": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz", + "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==", + "dev": true, + "bin": { + "is-docker": "cli.js" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/is-extendable": { "version": "0.1.1", "license": "MIT", @@ -18297,6 +18366,18 @@ "node": ">=0.10.0" } }, + "node_modules/is-wsl": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz", + "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==", + "dev": true, + "dependencies": { + "is-docker": "^2.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/isarray": { "version": "2.0.5", "dev": true, @@ -19594,6 +19675,15 @@ "js-yaml": "bin/js-yaml.js" } }, + "node_modules/jsdoc-type-pratt-parser": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/jsdoc-type-pratt-parser/-/jsdoc-type-pratt-parser-4.1.0.tgz", + "integrity": "sha512-Hicd6JK5Njt2QB6XYFS7ok9e37O8AYk3jTcppG4YVQnYjOemymvTcmc7OWsmq/Qqj5TdRFO5/x/tIPmBeRtGHg==", + "dev": true, + "engines": { + "node": ">=12.0.0" + } + }, "node_modules/jsdom": { "version": "20.0.3", "dev": true, @@ -22395,6 +22485,23 @@ "url": "https://github.com/sponsors/antfu" } }, + "node_modules/open": { + "version": "8.4.2", + "resolved": "https://registry.npmjs.org/open/-/open-8.4.2.tgz", + "integrity": "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==", + "dev": true, + "dependencies": { + "define-lazy-prop": "^2.0.0", + "is-docker": "^2.1.1", + "is-wsl": "^2.2.0" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/optionator": { "version": "0.9.4", "license": "MIT", @@ -25396,11 +25503,12 @@ "license": "MIT" }, "node_modules/storybook": { - "version": "8.3.0", + "version": "8.3.5", + "resolved": "https://registry.npmjs.org/storybook/-/storybook-8.3.5.tgz", + "integrity": "sha512-hYQVtP2l+3kO8oKDn4fjXXQYxgTRsj/LaV6lUMJH0zt+OhVmDXKJLxmdUP4ieTm0T8wEbSYosFavgPcQZlxRfw==", "dev": true, - "license": "MIT", "dependencies": { - "@storybook/core": "8.3.0" + "@storybook/core": "8.3.5" }, "bin": { "getstorybook": "bin/index.cjs", @@ -26048,8 +26156,9 @@ "license": "BSD-3-Clause" }, "node_modules/tailwind-merge": { - "version": "2.5.2", - "license": "MIT", + "version": "2.5.3", + "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.3.tgz", + "integrity": "sha512-d9ZolCAIzom1nf/5p4LdD5zvjmgSxY0BGgdSvmXIoMYAiPdAW/dSpP7joCDYFY7r/HkEa2qmPtkgsu0xjQeQtw==", "funding": { "type": "github", "url": "https://github.com/sponsors/dcastil"