From 9e831b81fc4d385119f7cba01db744b627d8af68 Mon Sep 17 00:00:00 2001 From: Masoud Amjadi Date: Tue, 12 Mar 2024 13:26:23 -0400 Subject: [PATCH] refactor(colors): show semantic names in color component --- .../components/{Color => Colors}/color.tsx | 5 ++-- .../components/{Color => Colors}/index.tsx | 23 +++++++++++++++++-- .../components/{Color => Colors}/style.ts | 0 .../__storybook__/components/Colors/util.ts | 19 +++++++++++++++ .../__storybook__/stories/primitiveColors.tsx | 2 +- .../stories/semanticComponentColors.tsx | 2 +- .../stories/semanticTextColors.tsx | 2 +- 7 files changed, 46 insertions(+), 7 deletions(-) rename packages/components/src/core/Bases/Colors/__storybook__/components/{Color => Colors}/color.tsx (91%) rename packages/components/src/core/Bases/Colors/__storybook__/components/{Color => Colors}/index.tsx (65%) rename packages/components/src/core/Bases/Colors/__storybook__/components/{Color => Colors}/style.ts (100%) create mode 100644 packages/components/src/core/Bases/Colors/__storybook__/components/Colors/util.ts diff --git a/packages/components/src/core/Bases/Colors/__storybook__/components/Color/color.tsx b/packages/components/src/core/Bases/Colors/__storybook__/components/Colors/color.tsx similarity index 91% rename from packages/components/src/core/Bases/Colors/__storybook__/components/Color/color.tsx rename to packages/components/src/core/Bases/Colors/__storybook__/components/Colors/color.tsx index 1c1b462df..dea44647a 100644 --- a/packages/components/src/core/Bases/Colors/__storybook__/components/Color/color.tsx +++ b/packages/components/src/core/Bases/Colors/__storybook__/components/Colors/color.tsx @@ -15,10 +15,11 @@ interface ColorComponentProps { value: string; shade?: string; prefix?: string; + semanticName?: string; } const Color = (props: ColorComponentProps) => { - const { group, value, shade, prefix = "$" } = props; + const { group, value, shade, prefix = "$", semanticName } = props; const sassVariable = shade ? "$" + prefix + "-" + group + "-" + convertToKebabCase(shade) @@ -48,7 +49,7 @@ const Color = (props: ColorComponentProps) => {
copyToClipboard(value)}> - {String(value)} + {String(semanticName)} copyToClipboard(cssVariable)}> diff --git a/packages/components/src/core/Bases/Colors/__storybook__/components/Color/index.tsx b/packages/components/src/core/Bases/Colors/__storybook__/components/Colors/index.tsx similarity index 65% rename from packages/components/src/core/Bases/Colors/__storybook__/components/Color/index.tsx rename to packages/components/src/core/Bases/Colors/__storybook__/components/Colors/index.tsx index 7b9ebde68..bc2910030 100644 --- a/packages/components/src/core/Bases/Colors/__storybook__/components/Color/index.tsx +++ b/packages/components/src/core/Bases/Colors/__storybook__/components/Colors/index.tsx @@ -1,6 +1,8 @@ -import { Color as ColorType } from "src/core/styles"; +import { Color as ColorType, getColors } from "src/core/styles"; import Color from "./color"; import { StyledColorGroupTitle, StyledColorsWrapper } from "./style"; +import { useTheme } from "@mui/material"; +import { NestedObject, flattenObj } from "./util"; interface SemanticColorsProps { colors: object; @@ -11,6 +13,13 @@ interface SemanticColorsProps { const Colors = (props: SemanticColorsProps): JSX.Element => { const { colors, type = "semantic", prefix } = props; + const theme = useTheme(); + const primitiveColors = getColors({ theme }); + + const flattenColors = primitiveColors + ? flattenObj(primitiveColors as unknown as NestedObject, null) + : {}; + const renderColorGroups = (colorGroups: object) => { if (colorGroups) { return Object.entries(colorGroups).map(([key, value]) => ( @@ -26,7 +35,16 @@ const Colors = (props: SemanticColorsProps): JSX.Element => { const renderColors = (sdsColors: ColorType, groupName: string) => { if (typeof sdsColors === "string") { - return ; + return ( + + ); } else { return Object.entries(sdsColors).map(([k, v]) => { if (v === "transparent") return; @@ -36,6 +54,7 @@ const Colors = (props: SemanticColorsProps): JSX.Element => { key={k} group={groupName} value={v} + semanticName={type === "semantic" ? flattenColors[v] : v} shade={k} prefix={prefix} /> diff --git a/packages/components/src/core/Bases/Colors/__storybook__/components/Color/style.ts b/packages/components/src/core/Bases/Colors/__storybook__/components/Colors/style.ts similarity index 100% rename from packages/components/src/core/Bases/Colors/__storybook__/components/Color/style.ts rename to packages/components/src/core/Bases/Colors/__storybook__/components/Colors/style.ts diff --git a/packages/components/src/core/Bases/Colors/__storybook__/components/Colors/util.ts b/packages/components/src/core/Bases/Colors/__storybook__/components/Colors/util.ts new file mode 100644 index 000000000..c6598aaef --- /dev/null +++ b/packages/components/src/core/Bases/Colors/__storybook__/components/Colors/util.ts @@ -0,0 +1,19 @@ +export type NestedObject = { + [key: string]: NestedObject | string; +}; + +export function flattenObj( + obj: NestedObject, + parent: string | null = null, + res: { [key: string]: string } = {} +) { + for (const key in obj) { + const propName = parent ? `${parent}-${key}` : key; + if (typeof obj[key] === "object") { + flattenObj(obj[key] as NestedObject, propName, res); + } else { + res[obj[key] as string] = propName; + } + } + return res; +} diff --git a/packages/components/src/core/Bases/Colors/__storybook__/stories/primitiveColors.tsx b/packages/components/src/core/Bases/Colors/__storybook__/stories/primitiveColors.tsx index f2860b651..d348c4d41 100644 --- a/packages/components/src/core/Bases/Colors/__storybook__/stories/primitiveColors.tsx +++ b/packages/components/src/core/Bases/Colors/__storybook__/stories/primitiveColors.tsx @@ -1,6 +1,6 @@ import { useTheme } from "@mui/material"; import { getColors } from "src/core/styles"; -import Colors from "../components/Color"; +import Colors from "../components/Colors"; export const PrimitiveColorsTemplate = () => { const theme = useTheme(); diff --git a/packages/components/src/core/Bases/Colors/__storybook__/stories/semanticComponentColors.tsx b/packages/components/src/core/Bases/Colors/__storybook__/stories/semanticComponentColors.tsx index 0f1a59e29..a7ebfec9d 100644 --- a/packages/components/src/core/Bases/Colors/__storybook__/stories/semanticComponentColors.tsx +++ b/packages/components/src/core/Bases/Colors/__storybook__/stories/semanticComponentColors.tsx @@ -1,6 +1,6 @@ import { useTheme } from "@mui/material"; import { getSemanticComponentColors } from "src/core/styles"; -import Colors from "../components/Color"; +import Colors from "../components/Colors"; export const SemanticComponentColorsTemplate = () => { const theme = useTheme(); diff --git a/packages/components/src/core/Bases/Colors/__storybook__/stories/semanticTextColors.tsx b/packages/components/src/core/Bases/Colors/__storybook__/stories/semanticTextColors.tsx index e0c63ddc2..55f7c013c 100644 --- a/packages/components/src/core/Bases/Colors/__storybook__/stories/semanticTextColors.tsx +++ b/packages/components/src/core/Bases/Colors/__storybook__/stories/semanticTextColors.tsx @@ -1,6 +1,6 @@ import { useTheme } from "@mui/material"; import { getSemanticTextColors } from "src/core/styles"; -import Colors from "../components/Color"; +import Colors from "../components/Colors"; export const SemanticTextColorsTemplate = () => { const theme = useTheme();