Adds disable alias option

jpmorganchase · Sep 22, 2023 · d98a69c · d98a69c
1 parent 998ffa9
commit d98a69c
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 31 deletions.
diff --git a/packages/style-lib-to-variables/plugin-src/code.ts b/packages/style-lib-to-variables/plugin-src/code.ts
@@ -57,6 +57,7 @@ figma.ui.onmessage = async (msg: PostToFigmaMessage) => {
         msg.selectedLibrary,
         msg.collectionName,
         msg.modeName,
+        msg.useAlias,
         msg.aliasCollectionName,
         msg.aliasModeName
       );

diff --git a/packages/style-lib-to-variables/plugin-src/utils.ts b/packages/style-lib-to-variables/plugin-src/utils.ts
@@ -7,12 +7,12 @@ export const storeLibraryStyles = async () => {
   const styles = figma.getLocalPaintStyles();
   const styleNameToDataMap = styles.reduce((into, current) => {
     const paints = current.paints.filter(({ visible }) => visible);
-    if (paints.length > 1) {
-      // do something different i guess
+    if (paints.length !== 1) {
+      // TODO: warn user
     } else {
       const paint0 = paints[0];
       if (paint0.type !== "SOLID") {
-        // do something different i guess
+        // TODO: warn user
       } else {
         const {
           blendMode,
@@ -183,6 +183,7 @@ export const createVariablesFromLibrary = async (
   libraryName: string,
   collectionName: string,
   modeName: string,
+  useAlias: boolean,
   aliasCollectionName?: string,
   aliasModeName?: string
 ) => {
@@ -200,6 +201,7 @@ export const createVariablesFromLibrary = async (
     storedInfo,
     collectionName,
     modeName,
+    useAlias,
     aliasCollectionName,
     aliasModeName
   );
@@ -209,6 +211,7 @@ function createTokens(
   styleData: StoredColorStyleInfo[],
   collectionName: string,
   modeName: string,
+  useAlias: boolean,
   aliasCollectionName?: string,
   aliasModeName?: string
 ) {
@@ -238,7 +241,7 @@ function createTokens(
    * */
   const aliasData: { [key: string]: string } = {};
 
-  if (aliasCollectionName && aliasModeName) {
+  if (useAlias && aliasCollectionName && aliasModeName) {
     aliasCollection = existingCollections.find(
       (x) => x.name === aliasCollectionName
     );
@@ -297,7 +300,7 @@ function createTokens(
   styleData.forEach(({ name: originalName, color, opacity }) => {
     const name = originalName.replaceAll(".", "-"); // `createVariable` will fail when name contains "."
     // Alias path
-    if (aliasCollectionName && aliasModeName) {
+    if (useAlias && aliasCollectionName && aliasModeName) {
       // Dirty way to check whether the token existed
       const key = rgbToKey({ ...color, a: opacity });
 

diff --git a/packages/style-lib-to-variables/shared-src/messages.ts b/packages/style-lib-to-variables/shared-src/messages.ts
@@ -33,6 +33,7 @@ export type CreateVariablesFromLibraryToFigmaMessage = {
   selectedLibrary: string;
   collectionName: string;
   modeName: string;
+  useAlias: boolean;
   aliasCollectionName: string;
   aliasModeName: string;
 };

diff --git a/packages/style-lib-to-variables/ui-src/views/MainView.tsx b/packages/style-lib-to-variables/ui-src/views/MainView.tsx
@@ -1,5 +1,5 @@
-import { Button, FlexLayout, StackLayout } from "@salt-ds/core";
-import { FormField, Input, List } from "@salt-ds/lab";
+import { Button, FlexLayout, StackLayout, Tooltip } from "@salt-ds/core";
+import { FormField, Input, List, Switch } from "@salt-ds/lab";
 import React, { useEffect, useRef, useState } from "react";
 import { PostToFigmaMessage } from "../../shared-src";
 import { FigmaToUIMessageEvent } from "../types";
@@ -11,6 +11,7 @@ export const MainView = () => {
   const [collectionName, setCollectionName] = useState<string>("Salt Palette");
   const [modeName, setModeName] = useState<string>("Light");
 
+  const [useAlias, setUseAlias] = useState(false);
   const [aliasCollectionName, setAliasCollectionName] =
     useState<string>("Salt Foundation");
   const [aliasModeName, setAliasModeName] = useState<string>("Color");
@@ -102,6 +103,7 @@ export const MainView = () => {
             selectedLibrary: selectedLibrary,
             collectionName,
             modeName,
+            useAlias,
             aliasCollectionName,
             aliasModeName,
           } satisfies PostToFigmaMessage,
@@ -141,31 +143,55 @@ export const MainView = () => {
       <List
         source={libraries}
         onSelectionChange={(_, selected) => setSelectedLibrary(selected)}
+        showEmptyMessage
+        emptyMessage="Open library and store color styles"
       ></List>
-      <FormField label="Collection Name">
-        <Input
-          value={collectionName}
-          onChange={(e) => setCollectionName(e.target.value)}
-        />
-      </FormField>
-      <FormField label="Mode Name">
-        <Input value={modeName} onChange={(e) => setModeName(e.target.value)} />
-      </FormField>
-      <Button onClick={onCreateVariables} disabled={selectedLibrary === null}>
-        Create Variables
-      </Button>
-      <FormField label="Alias Collection Name">
-        <Input
-          value={aliasCollectionName}
-          onChange={(e) => setAliasCollectionName(e.target.value)}
-        />
-      </FormField>
-      <FormField label="Alias Mode Name">
-        <Input
-          value={aliasModeName}
-          onChange={(e) => setAliasModeName(e.target.value)}
-        />
-      </FormField>
+      <FlexLayout>
+        <FormField label="Collection Name">
+          <Input
+            value={collectionName}
+            onChange={(e) => setCollectionName(e.target.value)}
+          />
+        </FormField>
+        <FormField label="Mode Name">
+          <Input
+            value={modeName}
+            onChange={(e) => setModeName(e.target.value)}
+          />
+        </FormField>
+      </FlexLayout>
+      <Tooltip
+        content="Select stored style from list"
+        disabled={selectedLibrary !== null}
+        placement="bottom"
+      >
+        <Button
+          onClick={onCreateVariables}
+          disabled={selectedLibrary === null}
+          focusableWhenDisabled
+        >
+          Create Variables
+        </Button>
+      </Tooltip>
+      <Switch
+        label="Use Alias"
+        checked={useAlias}
+        onChange={(e) => setUseAlias(e.target.checked)}
+      />
+      <FlexLayout>
+        <FormField label="Alias Collection Name" disabled={!useAlias}>
+          <Input
+            value={aliasCollectionName}
+            onChange={(e) => setAliasCollectionName(e.target.value)}
+          />
+        </FormField>
+        <FormField label="Alias Mode Name" disabled={!useAlias}>
+          <Input
+            value={aliasModeName}
+            onChange={(e) => setAliasModeName(e.target.value)}
+          />
+        </FormField>
+      </FlexLayout>
       <textarea
         value={jsonContent}
         onChange={(e) => setJsonContent(e.target.value)}