feat(ui): light/dark themer for storybook

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 (
+ <div
+ {...props}
+ style={{
+ display: 'flex',
+ padding: '3rem',
+ justifyContent: 'center',
+ alignItems: 'center',
+ }}
+ >
+ {children}
+ </div>
+ );
+ }
+
+ if (scheme === 'light') {
+ return (
+ <Flex className="color-scheme--light">
+ <Story />
+ </Flex>
+ );
+ }
+
+ if (scheme === 'dark') {
+ return (
+ <Flex className="color-scheme--dark">
+ <Story />
+ </Flex>
+ );
+ }
+
+ return (
+ <div>
+ <Flex className="color-scheme--dark">
+ <Story />
+ </Flex>
+ <Flex className="color-scheme--light">
+ <Story />
+ </Flex>
+ </div>
+ );
+}

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,
+ },
+ },
+};

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;
+}

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;
+

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;
+}

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;

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",

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',
  }}
  >
- <Text variant="heading-4">{value}% complete</Text>
+ <Text alignment="left" variant="heading-4">
+ {value}% complete
+ </Text>
  <Progress value={value} />
  </div>
  );
@@ -23,6 +26,7 @@ const DefaultTemplate = ({ value = 40 }) => {
 export default {
  title: 'components/Progress',
  component: DefaultTemplate,
+ decorators: [withGlobalStyles],
 } as Meta;
 
 export const Default = () => {