Save TS config on file

buildo · Dec 1, 2023 · 9e1b2c0 · 9e1b2c0
1 parent 2a87623
commit 9e1b2c0
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 5 deletions.
diff --git a/packages/configuration-builder/package.json b/packages/configuration-builder/package.json
@@ -24,6 +24,7 @@
     "@react-stately/select": "3.5.4",
     "@vanilla-extract/css": "1.12.0",
     "@vanilla-extract/recipes": "0.5.0",
+    "file-saver": "^2.0.5",
     "i18next": "22.5.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -37,6 +38,7 @@
     "@react-types/numberfield": "3.5.0",
     "@react-types/shared": "3.19.0",
     "@tsconfig/vite-react": "2.0.0",
+    "@types/file-saver": "^2.0.7",
     "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",
     "@typescript-eslint/eslint-plugin": "6.5.0",

diff --git a/packages/configuration-builder/src/MyTheme.tsx b/packages/configuration-builder/src/MyTheme.tsx
@@ -32,7 +32,8 @@ import {
   IconDiamondsFour,
   IconSwatches,
 } from "./PhosphorIcons";
-import { useConfigurationExporter } from "./utils/useConfigurationExporter";
+import { useConfigGeneratorTS } from "./utils/useConfigGeneratorTS";
+import { saveAs } from "file-saver";
 
 const numberImages = [image1, image2, image3];
 
@@ -95,7 +96,7 @@ export function MyTheme() {
 
   const { sections } = useConfiguratorStatusContext();
   const navigate = useNavigate();
-  const exportTS = useConfigurationExporter();
+  const generateTS = useConfigGeneratorTS();
 
   return (
     <Box display="flex" flexGrow={1} overflowY="auto" flexDirection="column">
@@ -202,8 +203,9 @@ export function MyTheme() {
                 hierarchy="primary"
                 label={t("Theme.Export.React.action")}
                 onPress={() => {
-                  const ts = exportTS();
-                  console.log(ts);
+                  const generatedCode = generateTS();
+                  const blob = new Blob([generatedCode], { type: "text/plain;charset=utf-8" });
+                  saveAs(blob, "generatedCode.ts");
                 }}
               />
             </Inline>

diff --git a/...der/src/utils/useConfigurationExporter.ts → ...builder/src/utils/useConfigGeneratorTS.ts b/...der/src/utils/useConfigurationExporter.ts → ...builder/src/utils/useConfigGeneratorTS.ts
@@ -9,7 +9,7 @@ function colorTokenToVarName(colorToken: ColorToken): string {
   return `${tokenPart}_${colorToken.alpha}`;
 }
 
-export function useConfigurationExporter(): () => string {
+export function useConfigGeneratorTS(): () => string {
   const { tokens, colors } = useConfiguratorStatusContext().theme;
   const colorTokenToValue = _colorTokenToValue(colors);
   return () => {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml