From fc72bf4c63827068c1f06b8a71108b8834ef84b7 Mon Sep 17 00:00:00 2001 From: Vincenzo Guerrisi Date: Mon, 25 Sep 2023 17:54:31 +0200 Subject: [PATCH] Extract brand tokens step --- .../src/TokensSection/BrandTokens.tsx | 104 ++++++++++++++ .../src/TokensSection/ColorTokenField.tsx | 29 ++++ .../src/TokensSection/TokensSection.tsx | 134 +++--------------- .../configuration-builder/src/locales/en.json | 3 +- 4 files changed, 156 insertions(+), 114 deletions(-) create mode 100644 packages/configuration-builder/src/TokensSection/BrandTokens.tsx create mode 100644 packages/configuration-builder/src/TokensSection/ColorTokenField.tsx diff --git a/packages/configuration-builder/src/TokensSection/BrandTokens.tsx b/packages/configuration-builder/src/TokensSection/BrandTokens.tsx new file mode 100644 index 000000000..90d9a2804 --- /dev/null +++ b/packages/configuration-builder/src/TokensSection/BrandTokens.tsx @@ -0,0 +1,104 @@ +import { + AreaLoader, + BentoThemeProvider, + BentoTokens, + Body, + Box, + Column, + Columns, + SliderField, + Stack, + unsafeLocalizedString, + DecorativeDivider, + Headline, +} from "@buildo/bento-design-system"; +import { ColorTokenField } from "./ColorTokenField"; +import { useTranslation } from "react-i18next"; + +type Props = { + tokens: BentoTokens; + onChange: (value: BentoTokens["brandColor"]) => void; +}; + +export function BrandTokens(props: Props) { + const { t } = useTranslation(); + + return ( + + {t("TokensSection.Step.brand")} + + + + + props.onChange({ ...props.tokens.brandColor, brandPrimary: value }) + } + /> + + props.onChange({ + ...props.tokens.brandColor, + brandSecondary: value, + }) + } + /> + + props.onChange({ + ...props.tokens.brandColor, + brandTertiary: value, + }) + } + /> + + + + + + + + {t("Component.decorativeDivider")} + + + + + + {t("Component.areaLoader")} + + + + + + + + {t("Component.sliderField")} + + {}} + /> + + + + + + + ); +} diff --git a/packages/configuration-builder/src/TokensSection/ColorTokenField.tsx b/packages/configuration-builder/src/TokensSection/ColorTokenField.tsx new file mode 100644 index 000000000..9fc1ccf8c --- /dev/null +++ b/packages/configuration-builder/src/TokensSection/ColorTokenField.tsx @@ -0,0 +1,29 @@ +import { Box, Column, Columns, LocalizedString, Stack, Title } from "@buildo/bento-design-system"; +import { useConfiguratorStatusContext } from "../ConfiguratorStatusContext"; +import { useTranslation } from "react-i18next"; +import { ColorPickerField } from "../ColorPickerField/ColorPickerField"; + +export function ColorTokenField(props: { + label: LocalizedString; + value: string; + onChange: (value: string) => void; +}) { + const { theme } = useConfiguratorStatusContext(); + const { t } = useTranslation(); + return ( + + + + + + {props.label} + + + + ); +} diff --git a/packages/configuration-builder/src/TokensSection/TokensSection.tsx b/packages/configuration-builder/src/TokensSection/TokensSection.tsx index 4abe983e9..6524cfd16 100644 --- a/packages/configuration-builder/src/TokensSection/TokensSection.tsx +++ b/packages/configuration-builder/src/TokensSection/TokensSection.tsx @@ -1,126 +1,34 @@ -import { - AreaLoader, - BentoThemeProvider, - Body, - Box, - Column, - Columns, - DecorativeDivider, - LocalizedString, - SliderField, - Stack, - Title, - unsafeLocalizedString, -} from "@buildo/bento-design-system"; import { ConfiguratorSection } from "../ConfiguratorSection/ConfiguratorSection"; import { useConfiguratorStatusContext } from "../ConfiguratorStatusContext"; -import { ColorPickerField } from "../ColorPickerField/ColorPickerField"; import { useTranslation } from "react-i18next"; - -function ColorTokenField(props: { - label: LocalizedString; - value: string; - onChange: (value: string) => void; -}) { - const { theme } = useConfiguratorStatusContext(); - const { t } = useTranslation(); - return ( - - - - - - {props.label} - - - - ); -} +import { useState } from "react"; +import { BrandTokens } from "./BrandTokens"; +import { match } from "ts-pattern"; export function TokensSection() { const { theme, setTheme } = useConfiguratorStatusContext(); const { t } = useTranslation(); - const tokens = theme.tokens; - const setTokens = (tokens: typeof theme.tokens) => setTheme({ ...theme, tokens }); + const steps = ["brand" as const]; + const [currentStep] = useState<(typeof steps)[0]>("brand"); + const currentStepIndex = steps.indexOf(currentStep); return ( - - - - - - setTokens({ ...tokens, brandColor: { ...tokens.brandColor, brandPrimary: value } }) - } - /> - - setTokens({ - ...tokens, - brandColor: { ...tokens.brandColor, brandSecondary: value }, - }) - } - /> - - setTokens({ ...tokens, brandColor: { ...tokens.brandColor, brandTertiary: value } }) - } - /> - - - - - - - - {t("Component.decorativeDivider")} - - - - - - {t("Component.areaLoader")} - - - - - - - - {t("Component.sliderField")} - - {}} - /> - - - - - + ({ label: t(`TokensSection.Step.${step}`) }))} + currentStep={currentStepIndex} + > + {match(currentStep) + .with("brand", () => ( + + setTheme({ ...theme, tokens: { ...theme.tokens, brandColor: brandTokens } }) + } + /> + )) + .exhaustive()} ); } diff --git a/packages/configuration-builder/src/locales/en.json b/packages/configuration-builder/src/locales/en.json index de67f141c..889110e9c 100644 --- a/packages/configuration-builder/src/locales/en.json +++ b/packages/configuration-builder/src/locales/en.json @@ -93,6 +93,7 @@ "Tokens.Color.label": "Color", "Component.decorativeDivider": "Decorative Divider", "Component.areaLoader": "Area Loader", - "Component.sliderField": "Slider Field" + "Component.sliderField": "Slider Field", + "TokensSection.Step.brand": "Brand" } }