Merge pull request #2425 from dxc-technology/jialecl/export-fix

[doc]export theme correctly exports the correct json

Author: Mil4n0r

apps/website/screens/theme-generator/ThemeGeneratorConfigPage.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from "react";
+import { useMemo, useRef, useState } from "react";
 import { DxcContainer, DxcFlex, DxcWizard } from "@dxc-technology/halstack-react";
 import StepHeading from "./components/StepHeading";
 import BottomButtons from "./components/BottomButtons";
@@ -57,6 +57,19 @@ const ThemeGeneratorConfigPage = () => {
   const [tokens, setTokens] = useState<Record<string, string>>({});
   const lastGeneratedColorsRef = useRef<string>("");
 
+  const themeJson = useMemo(() => {
+    const themeObject = {
+      tokens: tokens,
+      logos: {
+        mainLogo: "",
+        footerLogo: "",
+        footerReducedLogo: "",
+        favicon: "",
+      },
+    };
+    return JSON.stringify(themeObject, null, 2);
+  }, [tokens]);
+
   const generateTokensFromColors = () => {
     try {
       const mappedColors = {
@@ -93,7 +106,7 @@ const ThemeGeneratorConfigPage = () => {
       case 1:
         return <ThemeGeneratorPreviewPage tokens={tokens} logos={logos} />;
       case 2:
-        return <ReviewDetails generatedTokens={tokens} logos={logos} />;
+        return <ReviewDetails tokens={tokens} logos={logos} themeJson={themeJson} />;
     }
   };
 
@@ -131,7 +144,7 @@ const ThemeGeneratorConfigPage = () => {
         <BottomButtons
           currentStep={currentStep}
           onChangeStep={handleChangeStep}
-          onExport={() => handleExport(tokens)}
+          onExport={() => handleExport(themeJson)}
         />
       </DxcFlex>
     </DxcContainer>

apps/website/screens/theme-generator/components/review/ReviewTokensGrid.tsx

@@ -3,8 +3,8 @@ import { Tokens } from "../../types";
 import React, { useMemo } from "react";
 import { divideColorTokens, SHADE_VALUES } from "../../utils";
 
-const ReviewTokensGrid = ({ generatedTokens }: { generatedTokens: Tokens }) => {
-  const tokenGroups = useMemo(() => divideColorTokens(generatedTokens), [generatedTokens]);
+const ReviewTokensGrid = ({ tokens }: { tokens: Tokens }) => {
+  const tokenGroups = useMemo(() => divideColorTokens(tokens), [tokens]);
   return (
     <DxcGrid
       templateColumns={["100px", "repeat(10, 1fr)"]}

apps/website/screens/theme-generator/steps/ReviewDetails.tsx

@@ -4,23 +4,9 @@ import ReviewTokensGrid from "../components/review/ReviewTokensGrid";
 import ReviewTokensList from "../components/review/ReviewTokensList";
 import ReviewBrandingAssets from "../components/review/ReviewBrandingAssets";
 import useCopyToClipboard from "hooks/useCopyToClipboard";
-import { useMemo } from "react";
 import ReviewSectionContainer from "../components/review/ReviewSectionContainer";
 
-const ReviewDetails = ({ generatedTokens, logos }: { generatedTokens: Tokens; logos: Logos }) => {
-  const themeJson = useMemo(() => {
-    const themeObject = {
-      tokens: generatedTokens,
-      logos: {
-        mainLogo: "",
-        footerLogo: "",
-        footerReducedLogo: "",
-        favicon: "",
-      },
-    };
-    return JSON.stringify(themeObject, null, 2);
-  }, [generatedTokens]);
-
+const ReviewDetails = ({ tokens, logos, themeJson }: { tokens: Tokens; logos: Logos; themeJson: string }) => {
   const handleCopy = useCopyToClipboard();
 
   return (
@@ -42,7 +28,7 @@ const ReviewDetails = ({ generatedTokens, logos }: { generatedTokens: Tokens; lo
       >
         <DxcGrid templateColumns={["2fr", "1fr"]} templateRows={["368px"]} gap="var(--spacing-gap-m)">
           <DxcFlex justifyContent="center">
-            <ReviewTokensGrid generatedTokens={generatedTokens} />
+            <ReviewTokensGrid tokens={tokens} />
           </DxcFlex>
           <ReviewTokensList themeJson={themeJson} />
         </DxcGrid>

apps/website/screens/theme-generator/utils.ts

@@ -93,8 +93,8 @@ export const generateTokens = (baseColors: BaseColors): Tokens => {
   return generateTokensObject(baseColors);
 };
 
-export const handleExport = (tokens: Tokens) => {
-  const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(tokens, null, 2));
+export const handleExport = (themeJson: string) => {
+  const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(themeJson);
   const downloadAnchorNode = document.createElement("a");
   downloadAnchorNode.setAttribute("href", dataStr);
   downloadAnchorNode.setAttribute("download", "halstack-theme-tokens.json");