From 505d4c4f9457e1c5cb743fe9795c9937336a8af2 Mon Sep 17 00:00:00 2001
From: Vincenzo Guerrisi <vincenzo@buildo.io>
Date: Mon, 25 Sep 2023 17:16:58 +0200
Subject: [PATCH] Implement brand tokens section

---
 .../src/ConfiguratorStatusContext.tsx         |   7 +-
 .../configuration-builder/src/MyTheme.tsx     |   3 +-
 .../src/TokensSection/TokensSection.tsx       | 126 ++++++++++++++++++
 .../configuration-builder/src/locales/en.json |  10 +-
 packages/configuration-builder/src/main.tsx   |   9 +-
 packages/configuration-builder/src/router.tsx |   5 +
 6 files changed, 152 insertions(+), 8 deletions(-)
 create mode 100644 packages/configuration-builder/src/TokensSection/TokensSection.tsx

diff --git a/packages/configuration-builder/src/ConfiguratorStatusContext.tsx b/packages/configuration-builder/src/ConfiguratorStatusContext.tsx
index a30c43bb3..f552a3e23 100644
--- a/packages/configuration-builder/src/ConfiguratorStatusContext.tsx
+++ b/packages/configuration-builder/src/ConfiguratorStatusContext.tsx
@@ -1,6 +1,6 @@
 import { createContext, useContext, useState } from "react";
 import { defaultColorConfig } from "./ColorsSection/defaultColor";
-import { Children, defaultTokens } from "@buildo/bento-design-system";
+import { BentoTokens, Children, defaultTokens } from "@buildo/bento-design-system";
 import { HexColor } from "./utils/colorUtils";
 import { ColorConfig } from "./ColorEditor/ColorEditor";
 
@@ -33,9 +33,10 @@ export type ThemeConfig = {
       pink: ColorConfig;
     };
   };
+  tokens: BentoTokens;
 };
 
-export type ThemeSection = "colors";
+export type ThemeSection = "colors" | "tokens";
 
 type ConfiguratorStatus = {
   theme: ThemeConfig;
@@ -75,10 +76,12 @@ export function ConfiguratorStatusProvider(props: { children: Children }) {
         pink: defaultColorConfig(defaultTokens.dataVisualizationColor.brightPink as HexColor),
       },
     },
+    tokens: defaultTokens,
   });
 
   const [sections, setSections] = useState<ConfiguratorStatus["sections"]>({
     colors: false,
+    tokens: false,
   });
 
   return (
diff --git a/packages/configuration-builder/src/MyTheme.tsx b/packages/configuration-builder/src/MyTheme.tsx
index 9e2d27484..0629f346d 100644
--- a/packages/configuration-builder/src/MyTheme.tsx
+++ b/packages/configuration-builder/src/MyTheme.tsx
@@ -129,7 +129,8 @@ export function MyTheme() {
               name={t("Theme.Foundations.Tokens.title")}
               description={t("Theme.Foundations.Tokens.description")}
               icon={IconCards}
-              disabled
+              kind={sections.tokens ? "done" : "todo"}
+              onClick={() => navigate("/theme/tokens")}
             />
           </Stack>
         </MainColumn>
diff --git a/packages/configuration-builder/src/TokensSection/TokensSection.tsx b/packages/configuration-builder/src/TokensSection/TokensSection.tsx
new file mode 100644
index 000000000..4abe983e9
--- /dev/null
+++ b/packages/configuration-builder/src/TokensSection/TokensSection.tsx
@@ -0,0 +1,126 @@
+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 (
+    <Columns space={24} alignY="stretch">
+      <Column width="content">
+        <Box borderRadius={16} height="full" style={{ background: props.value, width: 64 }} />
+      </Column>
+      <Stack space={8}>
+        <Title size="medium">{props.label}</Title>
+        <ColorPickerField
+          colors={theme.colors}
+          label={t("Tokens.Color.label")}
+          value={props.value}
+          onChange={props.onChange}
+        />
+      </Stack>
+    </Columns>
+  );
+}
+
+export function TokensSection() {
+  const { theme, setTheme } = useConfiguratorStatusContext();
+  const { t } = useTranslation();
+
+  const tokens = theme.tokens;
+  const setTokens = (tokens: typeof theme.tokens) => setTheme({ ...theme, tokens });
+
+  return (
+    <ConfiguratorSection title={t("Tokens.title")} steps={[]} currentStep={0}>
+      <Columns space={40} alignY="stretch">
+        <Column width="1/4">
+          <Stack space={16}>
+            <ColorTokenField
+              label={t("Tokens.Color.primary")}
+              value={tokens.brandColor.brandPrimary}
+              onChange={(value) =>
+                setTokens({ ...tokens, brandColor: { ...tokens.brandColor, brandPrimary: value } })
+              }
+            />
+            <ColorTokenField
+              label={t("Tokens.Color.secondary")}
+              value={tokens.brandColor.brandSecondary}
+              onChange={(value) =>
+                setTokens({
+                  ...tokens,
+                  brandColor: { ...tokens.brandColor, brandSecondary: value },
+                })
+              }
+            />
+            <ColorTokenField
+              label={t("Tokens.Color.tertiary")}
+              value={tokens.brandColor.brandTertiary}
+              onChange={(value) =>
+                setTokens({ ...tokens, brandColor: { ...tokens.brandColor, brandTertiary: value } })
+              }
+            />
+          </Stack>
+        </Column>
+        <Box
+          borderRadius={24}
+          padding={40}
+          background="backgroundSecondary"
+          display="flex"
+          flexDirection="column"
+          flexGrow={1}
+        >
+          <BentoThemeProvider theme={tokens}>
+            <Stack space={40}>
+              <Stack space={12}>
+                <Body size="medium" color="secondary">
+                  {t("Component.decorativeDivider")}
+                </Body>
+                <DecorativeDivider />
+              </Stack>
+              <Stack space={12}>
+                <Body size="medium" color="secondary">
+                  {t("Component.areaLoader")}
+                </Body>
+                <Box position="relative" style={{ height: 240 }}>
+                  <AreaLoader />
+                </Box>
+              </Stack>
+              <Stack space={12}>
+                <Body size="medium" color="secondary">
+                  {t("Component.sliderField")}
+                </Body>
+                <SliderField
+                  type="single"
+                  label={unsafeLocalizedString("")}
+                  value={50}
+                  minValue={0}
+                  maxValue={100}
+                  onChange={() => {}}
+                />
+              </Stack>
+            </Stack>
+          </BentoThemeProvider>
+        </Box>
+      </Columns>
+    </ConfiguratorSection>
+  );
+}
diff --git a/packages/configuration-builder/src/locales/en.json b/packages/configuration-builder/src/locales/en.json
index 08a1ae6ca..de67f141c 100644
--- a/packages/configuration-builder/src/locales/en.json
+++ b/packages/configuration-builder/src/locales/en.json
@@ -85,6 +85,14 @@
     "DataVizColors.blue": "Blue",
     "DataVizColors.indigo": "Indigo",
     "DataVizColors.violet": "Violet",
-    "DataVizColors.pink": "Pink"
+    "DataVizColors.pink": "Pink",
+    "Tokens.title": "Tokens",
+    "Tokens.Color.primary": "Primary",
+    "Tokens.Color.secondary": "Secondary",
+    "Tokens.Color.tertiary": "Tertiary",
+    "Tokens.Color.label": "Color",
+    "Component.decorativeDivider": "Decorative Divider",
+    "Component.areaLoader": "Area Loader",
+    "Component.sliderField": "Slider Field"
   }
 }
diff --git a/packages/configuration-builder/src/main.tsx b/packages/configuration-builder/src/main.tsx
index a8fbe744c..d5513799a 100644
--- a/packages/configuration-builder/src/main.tsx
+++ b/packages/configuration-builder/src/main.tsx
@@ -1,3 +1,8 @@
+import "@buildo/bento-design-system/index.css";
+import { sprinkles } from "./sprinkles.css";
+import "@buildo/bento-design-system/defaultTheme.css";
+import "./main.css";
+
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { BentoProvider, LinkComponentProps } from "@buildo/bento-design-system";
@@ -7,10 +12,6 @@ import { App } from "./App";
 import { ConfiguratorStatusProvider } from "./ConfiguratorStatusContext";
 
 import "./intl";
-import "@buildo/bento-design-system/index.css";
-import "@buildo/bento-design-system/defaultTheme.css";
-import "./main.css";
-import { sprinkles } from "./sprinkles.css";
 
 function LinkComponent({ href, ...props }: LinkComponentProps) {
   return (
diff --git a/packages/configuration-builder/src/router.tsx b/packages/configuration-builder/src/router.tsx
index 6df5ffb20..8998b8492 100644
--- a/packages/configuration-builder/src/router.tsx
+++ b/packages/configuration-builder/src/router.tsx
@@ -2,6 +2,7 @@ import { createBrowserRouter } from "react-router-dom";
 import { MyTheme } from "./MyTheme";
 import { Home } from "./Home";
 import { ColorsSection } from "./ColorsSection/ColorsSection";
+import { TokensSection } from "./TokensSection/TokensSection";
 
 export const router = createBrowserRouter([
   {
@@ -20,4 +21,8 @@ export const router = createBrowserRouter([
     path: "/theme/typography",
     element: null,
   },
+  {
+    path: "/theme/tokens",
+    element: <TokensSection />,
+  },
 ]);