From bbe11ec63765d92a98e9b1ed17d4fe5dc2d44b17 Mon Sep 17 00:00:00 2001 From: tylerapfledderer Date: Fri, 14 Feb 2025 20:21:09 -0500 Subject: [PATCH 1/5] feat: move primitive color story to tailwind --- .storybook/main.ts | 3 +- src/styles/colors.stories.tsx | 90 +++++++++++++++++++++++++++++++++++ 2 files changed, 92 insertions(+), 1 deletion(-) create mode 100644 src/styles/colors.stories.tsx diff --git a/.storybook/main.ts b/.storybook/main.ts index 02d785aefdc..97348a81ede 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -17,8 +17,9 @@ import type { StorybookConfig } from "@storybook/nextjs" const config: StorybookConfig = { stories: [ "../src/components/**/*.stories.{ts,tsx}", - "../src/@chakra-ui/stories/*.stories.tsx", + // "../src/@chakra-ui/stories/*.stories.tsx", "../src/layouts/stories/*.stories.tsx", + "../src/styles/*.stories.tsx", ], addons: [ "@storybook/addon-links", diff --git a/src/styles/colors.stories.tsx b/src/styles/colors.stories.tsx new file mode 100644 index 00000000000..c2d2072fb9c --- /dev/null +++ b/src/styles/colors.stories.tsx @@ -0,0 +1,90 @@ +import { type ReactNode } from "react" +import type { Meta, StoryObj } from "@storybook/react/" + +import { HStack, Stack, VStack } from "@/components/ui/flex" + +const meta = { + title: "Design System/ShadCN Colors", + parameters: { + // Do not create snapshots for any stories in the file. + chromatic: { disableSnapshot: true }, + }, +} satisfies Meta + +export default meta + +/** + * Get all CSS Variables in the document. + * + * Used to search CSS Variables and retrieve their values. + * + * NOTE: Function created with AI assistance + */ +const getCSSCustomPropIndex = () => { + const rootStyles = document.styleSheets + const variables = {} + + for (const sheet of rootStyles) { + for (const rule of sheet.cssRules) { + // Check for CSSStyleRule type as `selectorText` might not always be available + if (rule instanceof CSSStyleRule && rule.selectorText === ":root") { + for (const style of rule.style) { + if (style.startsWith("--")) { + variables[style] = rule.style.getPropertyValue(style).trim() + } + } + } + } + } + return variables as Record +} +const primitiveColorKeys = ["gray", "purple"] as const +export const Primitives: StoryObj = { + render: () => { + const cssVarsEntries = Object.entries(getCSSCustomPropIndex()) + + return ( + + {primitiveColorKeys.map((color) => ( + + + {cssVarsEntries + .filter(([key]) => key.startsWith(`--${color}`)) + .map(([tokenKey, value]) => ( + +
+
+
+ + {value} + {tokenKey} + + + ))} + + + ))} + + ) + }, +} + +const ColorGroupWrapper = ({ + color, + children, +}: { + color: (typeof primitiveColorKeys)[number] + children: ReactNode +}) => ( +
+ {children} +
+) + +// bg-linear-[180deg,_#1b1b1b_35%,_#fff_35%] From f06889f7538aada6a2aa36960cc88856045ebfbb Mon Sep 17 00:00:00 2001 From: tylerapfledderer Date: Fri, 14 Feb 2025 21:03:53 -0500 Subject: [PATCH 2/5] feat: move semantic color story to tailwind --- src/styles/colors.stories.tsx | 67 ++++++++++++++++++++++++++++++++--- 1 file changed, 63 insertions(+), 4 deletions(-) diff --git a/src/styles/colors.stories.tsx b/src/styles/colors.stories.tsx index c2d2072fb9c..69211f26915 100644 --- a/src/styles/colors.stories.tsx +++ b/src/styles/colors.stories.tsx @@ -1,8 +1,11 @@ import { type ReactNode } from "react" -import type { Meta, StoryObj } from "@storybook/react/" +import capitalize from "lodash/capitalize" +import type { Meta, StoryObj } from "@storybook/react" import { HStack, Stack, VStack } from "@/components/ui/flex" +import { cn } from "@/lib/utils/cn" + const meta = { title: "Design System/ShadCN Colors", parameters: { @@ -38,11 +41,12 @@ const getCSSCustomPropIndex = () => { } return variables as Record } + +const cssVarsEntries = Object.entries(getCSSCustomPropIndex()) + const primitiveColorKeys = ["gray", "purple"] as const export const Primitives: StoryObj = { render: () => { - const cssVarsEntries = Object.entries(getCSSCustomPropIndex()) - return ( {primitiveColorKeys.map((color) => ( @@ -87,4 +91,59 @@ const ColorGroupWrapper = ({
) -// bg-linear-[180deg,_#1b1b1b_35%,_#fff_35%] +export const SemanticScheme: StoryObj = { + render: () => { + const tokenNames = [ + "primary", + "body", + "background", + "disabled", + "success", + "warning", + "error", + ] as const + + return ( + + {tokenNames.map((tokenName) => { + const variableObj = cssVarsEntries.filter(([key]) => + key.startsWith(`--${tokenName}`) + ) + + return ( + +

{capitalize(tokenName)}

+ + {variableObj.map((variable) => ( + + ))} + + + ) + })} + + ) + }, +} + +const SemanticColorBlock = ({ + variable: [varName, varValue], +}: { + variable: [string, string] +}) => ( + +
+ {varName} + +) From 9a8803621b8adbcc1717af27f46434f924431f09 Mon Sep 17 00:00:00 2001 From: tylerapfledderer Date: Fri, 14 Feb 2025 21:06:49 -0500 Subject: [PATCH 3/5] chore: remove old colors story file --- src/@chakra-ui/stories/Colors.stories.tsx | 187 ---------------------- 1 file changed, 187 deletions(-) delete mode 100644 src/@chakra-ui/stories/Colors.stories.tsx diff --git a/src/@chakra-ui/stories/Colors.stories.tsx b/src/@chakra-ui/stories/Colors.stories.tsx deleted file mode 100644 index ddaf32ef76d..00000000000 --- a/src/@chakra-ui/stories/Colors.stories.tsx +++ /dev/null @@ -1,187 +0,0 @@ -import { type ReactNode } from "react" -import capitalize from "lodash/capitalize" -import { Box, Flex, HStack, Square, Stack, Text } from "@chakra-ui/react" -import type { Meta, StoryObj } from "@storybook/react" - -import colors from "@/@chakra-ui/foundations/colors" -import semanticTokens from "@/@chakra-ui/semanticTokens" - -const semanticTokenColors = semanticTokens["colors"] - -import Heading from "@/components/Heading" - -const meta = { - title: "Design System/Colors", - parameters: { - // Do not create snapshots for any stories in the file. - chromatic: { disableSnapshot: true }, - }, -} satisfies Meta - -export default meta - -const primitiveColorKeys = ["gray", "blue", "orange"] -export const Primitives: StoryObj = { - render: () => { - const primitiveColorsMap = Object.entries(colors) - .filter((obj) => primitiveColorKeys.includes(obj[0])) - .reduce<{ [tokenKey: string]: [string, string][] }>( - (acc, [key, value]) => { - const tokenMap = Object.entries(value) - return { - ...acc, - [key]: tokenMap, - } - }, - {} - ) - - return ( - - {primitiveColorKeys.map((color) => ( - - - {primitiveColorsMap[color].map(([tokenKey, value]) => ( - - - - - - {value} - - {color}.{tokenKey} - - - - ))} - - - ))} - - ) - }, -} - -const ColorGroupWrapper = ({ - color, - children, -}: { - color: string - children: ReactNode -}) => { - return ( - - {children} - - ) -} - -export const SemanticScheme: StoryObj = { - parameters: { - chromatic: { - modes: { - darkMode: { - colorMode: "dark", - }, - lightMode: { - colorMode: "light", - }, - }, - }, - }, - render: () => { - const tokenNames = [ - "primary", - "body", - "background", - "disabled", - "success", - "attention", - "error", - ] as const - const deprecatedTokens: Record<(typeof tokenNames)[number], string[]> = { - primary: ["light", "dark", "pressed"], - body: [], - background: [], - disabled: [], - success: ["neutral", "outline"], - attention: ["neutral", "outline"], - error: ["neutral", "outline"], - } - - return ( - - {tokenNames.map((tokenName) => { - const currentDeprecatedTokens = deprecatedTokens[ - tokenName - ] as string[] - - const tokenObj = semanticTokenColors[tokenName] - - const filteredTokenObj = - "base" in tokenObj - ? Object.keys(semanticTokens["colors"][tokenName]).filter( - (key) => !currentDeprecatedTokens.includes(key) - ) - : undefined - - return ( - - {capitalize(tokenName)} - - {!filteredTokenObj ? ( - - ) : ( - <> - {filteredTokenObj.map((nestedKey) => ( - - ))} - - )} - - - ) - })} - - ) - }, -} - -const SemanticColorBlock = ({ - nestedKey, - tokenName, -}: Record<"nestedKey" | "tokenName", string>) => ( - - - - {tokenName}.{nestedKey} - - -) From 47c18ca9efbdca38c26609d2f4954ba1503dcbc2 Mon Sep 17 00:00:00 2001 From: tylerapfledderer Date: Mon, 17 Feb 2025 09:12:07 -0500 Subject: [PATCH 4/5] chore:(.storybook/main): remove commented story path --- .storybook/main.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/.storybook/main.ts b/.storybook/main.ts index 97348a81ede..f7b4b280d24 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -17,7 +17,6 @@ import type { StorybookConfig } from "@storybook/nextjs" const config: StorybookConfig = { stories: [ "../src/components/**/*.stories.{ts,tsx}", - // "../src/@chakra-ui/stories/*.stories.tsx", "../src/layouts/stories/*.stories.tsx", "../src/styles/*.stories.tsx", ], From fd0db905919df5830afdd8551962b72de6f93e32 Mon Sep 17 00:00:00 2001 From: tylerapfledderer Date: Mon, 17 Feb 2025 09:14:39 -0500 Subject: [PATCH 5/5] chore(colors.stories): revert name of story title set --- src/styles/colors.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/colors.stories.tsx b/src/styles/colors.stories.tsx index 69211f26915..4af728227c7 100644 --- a/src/styles/colors.stories.tsx +++ b/src/styles/colors.stories.tsx @@ -7,7 +7,7 @@ import { HStack, Stack, VStack } from "@/components/ui/flex" import { cn } from "@/lib/utils/cn" const meta = { - title: "Design System/ShadCN Colors", + title: "Design System / Colors", parameters: { // Do not create snapshots for any stories in the file. chromatic: { disableSnapshot: true },