Fix camel casing token

jpmorganchase · Sep 27, 2023 · b81e8d0 · b81e8d0
1 parent 9284434
commit b81e8d0
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 6 deletions.
diff --git a/packages/export-salt-theme/plugin-src/utils.ts b/packages/export-salt-theme/plugin-src/utils.ts
@@ -26,13 +26,23 @@ export function setNestedKey(obj: any, path: string[], value: any): any {
 
 const KEY_MAP = new Map([["border", "borderColor"]]);
 
+/**
+ * https://stackoverflow.com/a/2970667
+ **/
+function camelize(str: string) {
+  return str.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, function (match, index) {
+    if (+match === 0) return ""; // or if (/\s+/.test(match)) for white spaces
+    return index === 0 ? match.toLowerCase() : match.toUpperCase();
+  });
+}
+
 /** Design side has different naming convention than code, need to modify the path to fit. */
 export const fixPathForSalt = (path: string[]) => {
   return path.reduce(
     (prev, current, index, fullArray) => {
       const key = current.toLowerCase();
 
-      const mappedKey = KEY_MAP.get(key) || key;
+      const mappedKey = camelize(KEY_MAP.get(key) || key);
 
       // Ignore default when at last position
       if (mappedKey === "default" && fullArray.length - 1 === index) {
@@ -55,7 +65,7 @@ export const updateTheme = (
 
   const newPath = fixPathForSalt(path);
 
-  console.log({ newPath });
+  // console.log({ newPath });
 
   newTheme = setNestedKey(newTheme, newPath, newToken);
 

diff --git a/packages/export-salt-theme/ui-src/components/icons/AvocadoIcon.tsx b/packages/export-salt-theme/ui-src/components/icons/AvocadoIcon.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import { Icon, IconProps } from "@salt-ds/icons";
+
+export const AvocadoIcon = (props: IconProps) => {
+  return (
+    <Icon
+      aria-label="Avocado"
+      data-testid="avocado-icon"
+      viewBox="0 0 120 120"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M44 18.5C44 18.5 47 8 61.5 8C76 8 79.5 16 85 34C90.5 52 93.5 52.5 96 65.5C98.5 78.5 97.5 85.5 94 92.5C90.5 99.5 84 110 68.5 112C53 114 41.5 110 34 102.5C26.5 95 21 85.5 22.5 71.5C24 57.5 31.5 53.5 36 43.5C40.5 33.5 44 18.5 44 18.5Z"
+        stroke="#1E4624"
+        stroke-width="4"
+      />
+      <path
+        d="M45.682 21.7453C45.682 21.7453 48.3971 12 61.5199 12C74.6427 12 77.8103 19.425 82.7879 36.1311C87.7655 52.8373 90.4806 53.3014 92.7432 65.367C95.0057 77.4325 94.1007 83.9294 90.9331 90.4262C87.7655 96.9231 81.8829 106.668 67.8551 108.525C53.8272 110.381 43.4195 106.668 36.6318 99.7074C29.8442 92.7465 24.8666 83.9294 26.2241 70.9357C27.5816 57.942 34.3693 54.2295 38.4419 44.9483C42.5145 35.6671 45.682 21.7453 45.682 21.7453Z"
+        fill="#C9F263"
+        stroke="#9DE14E"
+        stroke-width="4"
+      />
+      <circle
+        cx="60.5"
+        cy="77.5"
+        r="17.5"
+        fill="#C79A4E"
+        stroke="#61481C"
+        stroke-width="2"
+      />
+    </Icon>
+  );
+};
diff --git a/packages/export-salt-theme/ui-src/views/ExportJsonView.tsx b/packages/export-salt-theme/ui-src/views/ExportJsonView.tsx
@@ -1,8 +1,9 @@
 import { Button, StackLayout } from "@salt-ds/core";
+import { compressToEncodedURIComponent } from "lz-string";
 import React, { useEffect, useRef, useState } from "react";
 import { PostToFigmaMessage } from "../../shared-src";
+import { AvocadoIcon } from "../components/icons/AvocadoIcon";
 import { FigmaToUIMessageEvent } from "../types";
-import { compressToEncodedURIComponent } from "lz-string";
 
 function compressObject(object: object): string {
   const compressed = compressToEncodedURIComponent(JSON.stringify(object));
@@ -15,7 +16,7 @@ export const ExportJsonView = () => {
 
   const [text, setText] = useState("");
 
-  const onExport = () => {
+  const onGenerateJson = () => {
     parent.postMessage(
       {
         pluginMessage: {
@@ -26,6 +27,11 @@ export const ExportJsonView = () => {
     );
   };
 
+  // Generate JSON on load
+  useEffect(() => {
+    onGenerateJson();
+  }, []);
+
   const onCopy = () => {
     textareaRef.current?.select();
     document.execCommand("copy");
@@ -66,7 +72,7 @@ export const ExportJsonView = () => {
 
   return (
     <StackLayout gap={1}>
-      <Button onClick={onExport}>Export</Button>
+      <Button onClick={onGenerateJson}>Refresh</Button>
       <textarea
         value={text}
         onChange={(e) => setText(e.currentTarget.value)}
@@ -76,7 +82,9 @@ export const ExportJsonView = () => {
       <Button onClick={onCopy} ref={copyButtonRef}>
         Copy
       </Button>
-      <Button onClick={onGoSandpack}>Preview</Button>
+      <Button onClick={onGoSandpack}>
+        Preview <AvocadoIcon />
+      </Button>
     </StackLayout>
   );
 };