@seed-design/figma 0.2.4 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/figma",
-  "version": "0.2.4",
+  "version": "1.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -35,18 +35,19 @@
   "scripts": {
     "clean": "rm -rf lib",
     "build": "bunchee",
-    "lint:publish": "bun publint"
+    "lint:publish": "bun publint",
+    "sync-entities": "rm -rf src/entities/data/__generated__ && bun figma-extractor src/entities/data/__generated__ component-sets variables variable-collections"
   },
   "dependencies": {
-    "@seed-design/css": "0.2.4",
+    "@seed-design/css": "1.0.0",
     "change-case": "^5.4.4",
     "ts-pattern": "^5.7.0"
   },
   "devDependencies": {
     "@figma/plugin-typings": "^1.110.0",
     "@figma/rest-api-spec": "^0.33.0",
-    "@seed-design/figma-extractor": "^0.0.5",
-    "typescript": "^5.8.3"
+    "@seed-design/figma-extractor": "^1.0.0",
+    "typescript": "^5.9.2"
   },
   "publishConfig": {
     "access": "public"

package/src/codegen/component-properties.ts

@@ -334,6 +334,10 @@ export type SwitchProperties = InferComponentDefinition<
   typeof metadata.switch.componentPropertyDefinitions
 >;
 
+export type SwitchMarkProperties = InferComponentDefinition<
+  typeof metadata.switchMark.componentPropertyDefinitions
+>;
+
 export type ToggleButtonProperties = InferComponentDefinition<
   typeof metadata.toggleButton.componentPropertyDefinitions
 >;

package/src/codegen/core/value-resolver.ts

@@ -135,13 +135,17 @@ export function createValueResolver<TColor, TGradient, TDimension, TFontDimensio
       return undefined;
     }
 
-    const inferred = variableService.infer(value, scope);
+    try {
+      const inferred = variableService.infer(value, scope);
 
-    if (!inferred) {
+      if (!inferred) {
+        return undefined;
+      }
+
+      return getVariableName(inferred.key);
+    } catch {
       return undefined;
     }
-
-    return getVariableName(inferred.key);
   }
 
   function processColor(

package/src/codegen/targets/react/component/handlers/list-header.ts

@@ -0,0 +1,20 @@
+import type { ListHeaderProperties } from "@/codegen/component-properties";
+import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
+import { createLocalSnippetHelper } from "../../element-factories";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import { camelCase } from "change-case";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("list-header");
+
+export const createListHeaderHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<ListHeaderProperties>(
+    metadata.listHeader.key,
+    ({ componentProperties: props }) => {
+      const commonProps = {
+        variant: camelCase(props["Variant"].value),
+      };
+
+      return createLocalSnippetElement("ListHeader", commonProps, props["Title#28588:0"].value);
+    },
+  );

package/src/codegen/targets/react/component/handlers/list-item.ts

@@ -102,6 +102,10 @@ export const createListItemHandler = (ctx: ComponentHandlerDeps) =>
     const disabled = props.State.value === "Disabled";
 
     const tag = (() => {
+      if (suffix?.tag === "SwitchMark") {
+        return "ListSwitchItem";
+      }
+
       if (prefix?.tag === "Checkmark" || suffix?.tag === "Checkmark") {
         return "ListCheckItem";
       }
@@ -131,7 +135,10 @@ export const createListItemHandler = (ctx: ComponentHandlerDeps) =>
       ...(prefix && { prefix }),
       ...(suffix && { suffix }),
       ...(disabled &&
-        (tag === "ListButtonItem" || tag === "ListCheckItem" || tag === "ListRadioItem") && {
+        (tag === "ListButtonItem" ||
+          tag === "ListCheckItem" ||
+          tag === "ListRadioItem" ||
+          tag === "ListSwitchItem") && {
           disabled: true,
         }),
       ...(props.State.value === "Highlighted" && {

package/src/codegen/targets/react/component/handlers/switch-mark.ts

@@ -0,0 +1,26 @@
+import type { SwitchMarkProperties } from "@/codegen/component-properties";
+import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
+import { createLocalSnippetHelper } from "../../element-factories";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import { match } from "ts-pattern";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("switch");
+
+export const createSwitchMarkHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<SwitchMarkProperties>(
+    metadata.switchMark.key,
+    ({ componentProperties: props }) => {
+      const tone = match(props.Tone.value)
+        .with("Neutral", () => "neutral")
+        .with("🚫[Deprecated] Brand", () => "brand")
+        .exhaustive();
+
+      const commonProps = {
+        tone,
+        size: props.Size.value,
+      };
+
+      return createLocalSnippetElement("SwitchMark", commonProps);
+    },
+  );

package/src/codegen/targets/react/component/handlers/switch.ts

@@ -19,6 +19,14 @@ export const createSwitchHandler = (_ctx: ComponentHandlerDeps) =>
       const commonProps = {
         tone,
         size: props.Size.value,
+      };
+
+      if (props["Layout(Figma Only)"].value === "🚫[Switch Mark 사용] Switch Only") {
+        return createLocalSnippetElement("SwitchMark", commonProps);
+      }
+
+      return createLocalSnippetElement("Switch", {
+        ...commonProps,
         label: props["Label#36578:0"].value,
         ...(props.Selected.value === "True" && {
           defaultChecked: true,
@@ -26,8 +34,6 @@ export const createSwitchHandler = (_ctx: ComponentHandlerDeps) =>
         ...(props.State.value === "Disabled" && {
           disabled: true,
         }),
-      };
-
-      return createLocalSnippetElement("Switch", commonProps);
+      });
     },
   );

package/src/codegen/targets/react/component/index.ts

@@ -22,24 +22,26 @@ import { createErrorStateHandler } from "./handlers/error-state";
 import { createFloatingActionButtonHandler } from "./handlers/floating-action-button";
 import { createHelpBubbleHandler } from "./handlers/help-bubble";
 import { createIdentityPlaceholderHandler } from "./handlers/identity-placeholder";
+import { createListHeaderHandler } from "@/codegen/targets/react/component/handlers/list-header";
+import { createListItemHandler } from "@/codegen/targets/react/component/handlers/list-item";
 import { createMannerTempBadgeHandler } from "./handlers/manner-temp-badge";
 import { createMannerTempHandler } from "./handlers/manner-temp";
 import { createMenuSheetHandler } from "./handlers/menu-sheet";
 import { createMultilineTextFieldHandler } from "./handlers/multiline-text-field";
 import { createPageBannerHandler } from "./handlers/page-banner";
 import { createProgressCircleHandler } from "./handlers/progress-circle";
-import { createRadioMarkHandler } from "@/codegen/targets/react/component/handlers/radio-mark";
 import { createRadioGroupItemHandler } from "@/codegen/targets/react/component/handlers/radio-group";
+import { createRadioMarkHandler } from "@/codegen/targets/react/component/handlers/radio-mark";
 import { createReactionButtonHandler } from "./handlers/reaction-button";
 import { createSegmentedControlHandler } from "./handlers/segmented-control";
 import { createSelectBoxGroupHandler, createSelectBoxHandler } from "./handlers/select-box";
 import { createSkeletonHandler } from "./handlers/skeleton";
 import { createSnackbarHandler } from "./handlers/snackbar";
+import { createSwitchMarkHandler } from "@/codegen/targets/react/component/handlers/switch-mark";
 import { createSwitchHandler } from "./handlers/switch";
 import { createTabsHandler } from "@/codegen/targets/react/component/handlers/tabs";
 import { createTextFieldHandler } from "./handlers/text-field";
 import { createToggleButtonHandler } from "./handlers/toggle-button";
-import { createListItemHandler } from "@/codegen/targets/react/component/handlers/list-item";
 
 export type { ComponentHandlerDeps };
 export type UnboundComponentHandler<T extends NormalizedInstanceNode["componentProperties"]> = (
@@ -72,6 +74,7 @@ export const unboundSeedComponentHandlers: Array<UnboundComponentHandler<any>> =
   createFloatingActionButtonHandler,
   createHelpBubbleHandler,
   createIdentityPlaceholderHandler,
+  createListHeaderHandler,
   createListItemHandler,
   createMannerTempBadgeHandler,
   createMannerTempHandler,
@@ -88,6 +91,7 @@ export const unboundSeedComponentHandlers: Array<UnboundComponentHandler<any>> =
   createSkeletonHandler,
   createSnackbarHandler,
   createSwitchHandler,
+  createSwitchMarkHandler,
   createTabsHandler,
   createTextFieldHandler,
   createToggleButtonHandler,

package/src/entities/data/__generated__/component-sets/index.d.ts

@@ -44,6 +44,7 @@ export { metadata as slider } from "./slider";
 export { metadata as snackbar } from "./snackbar";
 export { metadata as superscriptChild } from "./superscript-child";
 export { metadata as switch } from "./switch";
+export { metadata as switchMark } from "./switch-mark";
 export { metadata as tabs } from "./tabs";
 export { metadata as textField } from "./text-field";
 export { metadata as toggleButton } from "./toggle-button";

package/src/entities/data/__generated__/component-sets/index.mjs

@@ -44,6 +44,7 @@ export { metadata as slider } from "./slider.mjs";
 export { metadata as snackbar } from "./snackbar.mjs";
 export { metadata as superscriptChild } from "./superscript-child.mjs";
 export { metadata as switch } from "./switch.mjs";
+export { metadata as switchMark } from "./switch-mark.mjs";
 export { metadata as tabs } from "./tabs.mjs";
 export { metadata as textField } from "./text-field.mjs";
 export { metadata as toggleButton } from "./toggle-button.mjs";

package/src/entities/data/__generated__/component-sets/list-header.d.ts

@@ -13,11 +13,11 @@ export declare const metadata: {
         "Custom"
       ]
     },
-    "Title Weight": {
+    "Variant": {
       "type": "VARIANT",
       "variantOptions": [
-        "Medium",
-        "Bold"
+        "Medium Weak",
+        "Bold Solid"
       ]
     }
   }

package/src/entities/data/__generated__/component-sets/list-header.mjs

@@ -13,11 +13,11 @@ export const metadata = {
         "Custom"
       ]
     },
-    "Title Weight": {
+    "Variant": {
       "type": "VARIANT",
       "variantOptions": [
-        "Medium",
-        "Bold"
+        "Medium Weak",
+        "Bold Solid"
       ]
     }
   }

package/src/entities/data/__generated__/component-sets/manner-temp-badge.d.ts

@@ -5,12 +5,16 @@ export declare const metadata: {
     "Level": {
       "type": "VARIANT",
       "variantOptions": [
-        "L1 (~29.9)",
-        "L2 (30.0~36.2)",
-        "L3 (36.3~37.5)",
-        "L4 (37.6~41.9)",
-        "L5 (42~51.9)",
-        "L6 (52~)"
+        "L1",
+        "L2",
+        "L3",
+        "L4",
+        "L5",
+        "L6",
+        "L7",
+        "L8",
+        "L9",
+        "L10"
       ]
     }
   }

package/src/entities/data/__generated__/component-sets/manner-temp-badge.mjs

@@ -5,12 +5,16 @@ export const metadata = {
     "Level": {
       "type": "VARIANT",
       "variantOptions": [
-        "L1 (~29.9)",
-        "L2 (30.0~36.2)",
-        "L3 (36.3~37.5)",
-        "L4 (37.6~41.9)",
-        "L5 (42~51.9)",
-        "L6 (52~)"
+        "L1",
+        "L2",
+        "L3",
+        "L4",
+        "L5",
+        "L6",
+        "L7",
+        "L8",
+        "L9",
+        "L10"
       ]
     }
   }

package/src/entities/data/__generated__/component-sets/manner-temp.d.ts

@@ -5,12 +5,16 @@ export declare const metadata: {
     "Level": {
       "type": "VARIANT",
       "variantOptions": [
-        "L1 (~29.9)",
-        "L2 (30.0~36.2)",
-        "L3 (36.3~37.5)",
-        "L4 (37.6~41.9)",
-        "L5 (42~51.9)",
-        "L6 (52~)"
+        "L1",
+        "L2",
+        "L3",
+        "L4",
+        "L5",
+        "L6",
+        "L7",
+        "L8",
+        "L9",
+        "L10"
       ]
     }
   }

package/src/entities/data/__generated__/component-sets/manner-temp.mjs

@@ -5,12 +5,16 @@ export const metadata = {
     "Level": {
       "type": "VARIANT",
       "variantOptions": [
-        "L1 (~29.9)",
-        "L2 (30.0~36.2)",
-        "L3 (36.3~37.5)",
-        "L4 (37.6~41.9)",
-        "L5 (42~51.9)",
-        "L6 (52~)"
+        "L1",
+        "L2",
+        "L3",
+        "L4",
+        "L5",
+        "L6",
+        "L7",
+        "L8",
+        "L9",
+        "L10"
       ]
     }
   }

package/src/entities/data/__generated__/component-sets/segmented-control.d.ts

@@ -9,15 +9,6 @@ export declare const metadata: {
         "3",
         "4"
       ]
-    },
-    "Selected Item": {
-      "type": "VARIANT",
-      "variantOptions": [
-        "1",
-        "2",
-        "3",
-        "4"
-      ]
     }
   }
 };

package/src/entities/data/__generated__/component-sets/segmented-control.mjs

@@ -9,15 +9,6 @@ export const metadata = {
         "3",
         "4"
       ]
-    },
-    "Selected Item": {
-      "type": "VARIANT",
-      "variantOptions": [
-        "1",
-        "2",
-        "3",
-        "4"
-      ]
     }
   }
 };

package/src/entities/data/__generated__/component-sets/switch-mark.d.ts

@@ -0,0 +1,35 @@
+export declare const metadata: {
+  "name": "🟢 Switch Mark",
+  "key": "bc53f269089e02a1d241e2a21ac7631bfa49834e",
+  "componentPropertyDefinitions": {
+    "Size": {
+      "type": "VARIANT",
+      "variantOptions": [
+        "16",
+        "24",
+        "32"
+      ]
+    },
+    "Tone": {
+      "type": "VARIANT",
+      "variantOptions": [
+        "Neutral",
+        "🚫[Deprecated] Brand"
+      ]
+    },
+    "Selected": {
+      "type": "VARIANT",
+      "variantOptions": [
+        "True",
+        "False"
+      ]
+    },
+    "State": {
+      "type": "VARIANT",
+      "variantOptions": [
+        "Enabled",
+        "Disabled"
+      ]
+    }
+  }
+};

package/src/entities/data/__generated__/component-sets/switch-mark.mjs

@@ -0,0 +1,35 @@
+export const metadata = {
+  "name": "🟢 Switch Mark",
+  "key": "bc53f269089e02a1d241e2a21ac7631bfa49834e",
+  "componentPropertyDefinitions": {
+    "Size": {
+      "type": "VARIANT",
+      "variantOptions": [
+        "16",
+        "24",
+        "32"
+      ]
+    },
+    "Tone": {
+      "type": "VARIANT",
+      "variantOptions": [
+        "Neutral",
+        "🚫[Deprecated] Brand"
+      ]
+    },
+    "Selected": {
+      "type": "VARIANT",
+      "variantOptions": [
+        "True",
+        "False"
+      ]
+    },
+    "State": {
+      "type": "VARIANT",
+      "variantOptions": [
+        "Enabled",
+        "Disabled"
+      ]
+    }
+  }
+};

package/src/entities/data/__generated__/component-sets/switch.d.ts

@@ -34,12 +34,12 @@ export declare const metadata: {
         "Disabled"
       ]
     },
-    "Label Layout(Figma Only)": {
+    "Layout(Figma Only)": {
       "type": "VARIANT",
       "variantOptions": [
         "Label Last",
         "Label First",
-        "Switch Only"
+        "🚫[Switch Mark 사용] Switch Only"
       ]
     }
   }

package/src/entities/data/__generated__/component-sets/switch.mjs

@@ -34,12 +34,12 @@ export const metadata = {
         "Disabled"
       ]
     },
-    "Label Layout(Figma Only)": {
+    "Layout(Figma Only)": {
       "type": "VARIANT",
       "variantOptions": [
         "Label Last",
         "Label First",
-        "Switch Only"
+        "🚫[Switch Mark 사용] Switch Only"
       ]
     }
   }

package/src/entities/data/__generated__/variable-collections/index.d.ts

@@ -0,0 +1,3 @@
+import type { VariableCollection } from "../../../variable.interface";
+
+export declare const FIGMA_VARIABLE_COLLECTIONS: Record<string, VariableCollection>;