@seed-design/figma 1.0.7 → 1.1.2

package/src/codegen/targets/react/component/handlers/action-button.ts

@@ -9,6 +9,8 @@ import type {
 } from "@/codegen/component-properties";
 import { handleSizeProp } from "../size";
 import { createLocalSnippetHelper, createSeedReactElement } from "../../element-factories";
+import { findOne } from "@/utils/figma-node";
+import type { NormalizedTextNode } from "@/normalizer";
 
 const { createLocalSnippetElement } = createLocalSnippetHelper("action-button");
 
@@ -70,60 +72,73 @@ export const createActionButtonHandler = (ctx: ComponentHandlerDeps) =>
 const ACTION_BUTTON_GHOST_BUTTON_KEY = "ea69291fb4d76217419f3d9613ae16aadafb56a5";
 
 export const createActionButtonGhostHandler = (ctx: ComponentHandlerDeps) =>
-  defineComponentHandler<ActionButtonGhostProperties>(
-    ACTION_BUTTON_GHOST_BUTTON_KEY,
-    ({ componentProperties: props }) => {
-      const states = props.State.value.split("-");
+  defineComponentHandler<ActionButtonGhostProperties>(ACTION_BUTTON_GHOST_BUTTON_KEY, (node) => {
+    const props = node.componentProperties;
 
-      const { layout, children } = match(props.Layout.value)
-        .with("Icon Only", () => ({
-          layout: "iconOnly",
-          children: [
-            createSeedReactElement("Icon", {
-              svg: ctx.iconHandler.transform(props["Icon#30525:15"]),
-            }),
-          ],
-        }))
-        .with("Icon First", () => ({
-          layout: "withText",
-          children: [
-            createSeedReactElement("PrefixIcon", {
-              svg: ctx.iconHandler.transform(props["Prefix Icon#30511:3"]),
-            }),
-            props["Label#30511:2"].value,
-          ],
-        }))
-        .with("Icon Last", () => ({
-          layout: "withText",
-          children: [
-            props["Label#30511:2"].value,
-            createSeedReactElement("SuffixIcon", {
-              svg: ctx.iconHandler.transform(props["Suffix Icon#30525:0"]),
-            }),
-          ],
-        }))
-        .with("Text Only", () => ({
-          layout: "withText",
-          children: props["Label#30511:2"].value,
-        }))
-        .exhaustive();
+    const states = props.State.value.split("-");
 
-      const commonProps = {
-        ...(states.includes("Disabled") && {
-          disabled: true,
-        }),
-        ...(states.includes("Loading") && {
-          loading: true,
-        }),
-        size: handleSizeProp(props.Size.value),
-        variant: "ghost",
-        layout,
-        ...(props.Bleed.value === "true" && {
-          bleedX: "asPadding",
-          bleedY: "asPadding",
-        }),
-      };
+    const buttonWrapperNode = findOne(
+      node,
+      (n) => n.type === "FRAME" && n.layoutPositioning !== "ABSOLUTE",
+    );
 
-      return createLocalSnippetElement("ActionButton", commonProps, children);
-    },
-  );
+    const labelNode = buttonWrapperNode
+      ? (findOne(buttonWrapperNode, (n) => n.type === "TEXT") as NormalizedTextNode | undefined)
+      : undefined;
+
+    const color = labelNode ? ctx.valueResolver.getFormattedValue.textFill(labelNode) : null;
+    const fontWeight = labelNode ? ctx.valueResolver.getFormattedValue.fontWeight(labelNode) : null;
+
+    const { layout, children } = match(props.Layout.value)
+      .with("Icon Only", () => ({
+        layout: "iconOnly",
+        children: [
+          createSeedReactElement("Icon", {
+            svg: ctx.iconHandler.transform(props["Icon#30525:15"]),
+          }),
+        ],
+      }))
+      .with("Icon First", () => ({
+        layout: "withText",
+        children: [
+          createSeedReactElement("PrefixIcon", {
+            svg: ctx.iconHandler.transform(props["Prefix Icon#30511:3"]),
+          }),
+          props["Label#30511:2"].value,
+        ],
+      }))
+      .with("Icon Last", () => ({
+        layout: "withText",
+        children: [
+          props["Label#30511:2"].value,
+          createSeedReactElement("SuffixIcon", {
+            svg: ctx.iconHandler.transform(props["Suffix Icon#30525:0"]),
+          }),
+        ],
+      }))
+      .with("Text Only", () => ({
+        layout: "withText",
+        children: props["Label#30511:2"].value,
+      }))
+      .exhaustive();
+
+    const commonProps = {
+      ...(states.includes("Disabled") && {
+        disabled: true,
+      }),
+      ...(states.includes("Loading") && {
+        loading: true,
+      }),
+      size: handleSizeProp(props.Size.value),
+      variant: "ghost",
+      layout,
+      ...(color && { color }),
+      ...(fontWeight && { fontWeight }),
+      ...(props.Bleed.value === "true" && {
+        bleedX: "asPadding",
+        bleedY: "asPadding",
+      }),
+    };
+
+    return createLocalSnippetElement("ActionButton", commonProps, children);
+  });

package/src/codegen/targets/react/component/handlers/bottom-sheet.ts

@@ -28,9 +28,8 @@ export const createBottomSheetHandler = (_ctx: ComponentHandlerDeps) =>
       ...(props["Show Description#25192:0"].value === true && {
         description: props["Description#19787:7"].value,
       }),
-      ...(props["Show Close Button#19787:11"].value === false && {
-        hideCloseButton: true,
-      }),
+      showHandle: props["Show Handle#49774:6"].value,
+      showCloseButton: props["Show Close Button#19787:11"].value,
     };
 
     const bodyNodes = findAllInstances({

package/src/codegen/targets/react/component/handlers/error-state.ts

@@ -1,39 +1,51 @@
-import type { ActionButtonProperties, ErrorStateProperties } from "@/codegen/component-properties";
+import type {
+  ActionButtonGhostProperties,
+  ActionButtonProperties,
+  ErrorStateProperties,
+} from "@/codegen/component-properties";
 import { defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
 import { findAllInstances } from "@/utils/figma-node";
 import { camelCase } from "change-case";
 import { createLocalSnippetHelper } from "../../element-factories";
 import type { ComponentHandlerDeps } from "../deps.interface";
-import { createActionButtonHandler } from "./action-button";
+import { createActionButtonGhostHandler, createActionButtonHandler } from "./action-button";
 
 const { createLocalSnippetElement } = createLocalSnippetHelper("error-state");
 
 export const createErrorStateHandler = (ctx: ComponentHandlerDeps) => {
   const actionButtonHandler = createActionButtonHandler(ctx);
+  const ghostButtonHandler = createActionButtonGhostHandler(ctx);
 
   return defineComponentHandler<ErrorStateProperties>(
     metadata.templateErrorState.key,
     (node, traverse) => {
       const props = node.componentProperties;
 
-      const [actionButtonNode] = findAllInstances<ActionButtonProperties>({
+      const [actionButton] = findAllInstances<ActionButtonProperties>({
         node,
         key: actionButtonHandler.key,
       });
 
+      const [ghostButton] = findAllInstances<ActionButtonGhostProperties>({
+        node,
+        key: ghostButtonHandler.key,
+      });
+
       const commonProps = {
         variant: camelCase(props.Variant.value),
         ...(props.Layout.value === "With Title" && {
           title: props["Title#16237:0"].value,
         }),
         description: props["Description#16237:5"].value,
-        ...(actionButtonNode && {
+        ...(actionButton && {
           primaryActionProps: {
-            children: actionButtonHandler.transform(actionButtonNode, traverse).children[0],
+            children: actionButtonHandler.transform(actionButton, traverse).children[0],
           },
+        }),
+        ...(ghostButton && {
           secondaryActionProps: {
-            children: props["Secondary Action Label#17042:0"].value,
+            children: ghostButtonHandler.transform(ghostButton, traverse).children[0],
           },
         }),
       };

package/src/codegen/targets/react/component/handlers/field-button.ts

@@ -0,0 +1,197 @@
+import { defineComponentHandler } from "@/codegen/core";
+import * as sets from "@/entities/data/__generated__/component-sets";
+import * as components from "@/entities/data/__generated__/components";
+import { createLocalSnippetHelper } from "../../element-factories";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import {
+  createFieldFooterHandler,
+  createFieldHeaderHandler,
+  FIELD_KEYS,
+  type FieldFooterProps,
+  type FieldHeaderProps,
+} from "@/codegen/targets/react/component/handlers/field";
+import type {
+  FieldHeaderProperties,
+  FieldFooterProperties,
+  FieldButtonProperties,
+  InputButtonProperties,
+  InputButtonPrefixProperties,
+  InputButtonSuffixProperties,
+  ActionButtonGhostProperties,
+  GenericFieldButtonProps,
+} from "@/codegen/component-properties";
+import { findAllInstances, findOne } from "@/utils/figma-node";
+import type { NormalizedTextNode } from "@/normalizer";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("field-button");
+
+const INPUT_BUTTON_KEY = "965bdecb58755af9a08d60cc3c8d2d33b42e15f0";
+const INPUT_BUTTON_PREFIX_KEY = "12b40c736a098298c64ba16de85702b4b460d1f1";
+const INPUT_BUTTON_SUFFIX_KEY = "5dda27af9f4afafa471925c17acf97d81912877a";
+
+export const createFieldButtonHandler = (ctx: ComponentHandlerDeps) => {
+  const fieldHeaderHandler = createFieldHeaderHandler(ctx);
+  const fieldFooterHandler = createFieldFooterHandler(ctx);
+
+  return defineComponentHandler<FieldButtonProperties>(
+    sets.templateCustomPickerField.key,
+    (node, traverse) => {
+      const props = node.componentProperties;
+
+      const [inputButton] = findAllInstances<InputButtonProperties>({
+        node,
+        key: INPUT_BUTTON_KEY,
+      });
+
+      const [clearButton] = findAllInstances<ActionButtonGhostProperties>({
+        node,
+        key: sets.actionButtonGhostButton.key,
+      });
+
+      const [fieldHeader] = findAllInstances<FieldHeaderProperties>({
+        node,
+        key: FIELD_KEYS.HEADER,
+      });
+      const [fieldFooter] = findAllInstances<FieldFooterProperties>({
+        node,
+        key: FIELD_KEYS.FOOTER,
+      });
+
+      // maxGraphemeCount and required can't be props of FieldButton
+      const { required: __required, ...headerProps } =
+        props["Show Header#40606:8"].value && fieldHeader
+          ? (fieldHeaderHandler.transform(fieldHeader, traverse).props as FieldHeaderProps)
+          : {};
+      const { maxGraphemeCount: __maxGraphemeCount, ...footerProps } =
+        props["Show Footer#40606:9"].value && fieldFooter
+          ? (fieldFooterHandler.transform(fieldFooter, traverse).props as FieldFooterProps)
+          : {};
+
+      const [prefix] = findAllInstances<InputButtonPrefixProperties>({
+        node: inputButton,
+        key: INPUT_BUTTON_PREFIX_KEY,
+      });
+
+      const [suffix] = findAllInstances<InputButtonSuffixProperties>({
+        node: inputButton,
+        key: INPUT_BUTTON_SUFFIX_KEY,
+      });
+
+      const commonProps = {
+        ...(inputButton.componentProperties.State.value === "Disabled" && {
+          disabled: true,
+        }),
+        ...((inputButton.componentProperties.State.value === "Error" ||
+          inputButton.componentProperties.State.value === "Error Pressed") && {
+          invalid: true,
+        }),
+        ...(clearButton && {
+          showClearButton: true,
+        }),
+        ...(inputButton.componentProperties["Has Prefix#32514:10"].value === true &&
+          prefix &&
+          prefix.componentProperties.Type.value === "Icon" && {
+            prefixIcon: ctx.iconHandler.transform(prefix.componentProperties["Icon#34021:2"]),
+          }),
+        ...(inputButton.componentProperties["Has Suffix#32865:68"].value === true &&
+          suffix &&
+          suffix.componentProperties["Type (Figma Only)"].value === "Icon" && {
+            suffixIcon: ctx.iconHandler.transform(suffix.componentProperties["Icon#37963:0"]),
+          }),
+        ...(inputButton.componentProperties["Has Suffix#32865:68"].value === true &&
+          suffix &&
+          suffix.componentProperties["Type (Figma Only)"].value === "Text" && {
+            suffix: suffix.componentProperties["Suffix Text#34021:4"].value,
+          }),
+      };
+
+      // these can be fragile but better than having 9 different handlers
+      const placeholder = findOne(
+        node,
+        (node) => node.type === "TEXT" && node.name.toLowerCase().includes("placeholder"),
+      ) as NormalizedTextNode;
+
+      const value = findOne(
+        node,
+        (node) => node.type === "TEXT" && node.name.toLowerCase().includes("value"),
+      ) as NormalizedTextNode;
+
+      return createLocalSnippetElement(
+        "FieldButton",
+        { ...headerProps, ...footerProps, ...commonProps },
+        props["Has Value"].value === "True" && value
+          ? createLocalSnippetElement("FieldButtonValue", undefined, value.characters)
+          : placeholder
+            ? createLocalSnippetElement("FieldButtonPlaceholder", undefined, placeholder.characters)
+            : undefined,
+        { comment: "buttonProps를 통해 aria-label을 제공하세요." },
+      );
+    },
+  );
+};
+
+// TODO: those 4 are basically the same
+
+export const createSelectFieldHandler = (ctx: ComponentHandlerDeps) => {
+  const fieldButtonHandler = createFieldButtonHandler(ctx);
+
+  return defineComponentHandler<GenericFieldButtonProps>(
+    components.templateSelectField.key,
+    (node, traverse) => {
+      const [fieldButton] = findAllInstances<FieldButtonProperties>({
+        node,
+        key: fieldButtonHandler.key,
+      });
+
+      return fieldButtonHandler.transform(fieldButton, traverse);
+    },
+  );
+};
+
+export const createDatePickerFieldHandler = (ctx: ComponentHandlerDeps) => {
+  const fieldButtonHandler = createFieldButtonHandler(ctx);
+
+  return defineComponentHandler<GenericFieldButtonProps>(
+    components.templateDatePickerField.key,
+    (node, traverse) => {
+      const [fieldButton] = findAllInstances<FieldButtonProperties>({
+        node,
+        key: fieldButtonHandler.key,
+      });
+
+      return fieldButtonHandler.transform(fieldButton, traverse);
+    },
+  );
+};
+
+export const createTimePickerFieldHandler = (ctx: ComponentHandlerDeps) => {
+  const fieldButtonHandler = createFieldButtonHandler(ctx);
+
+  return defineComponentHandler<GenericFieldButtonProps>(
+    components.templateTimePickerField.key,
+    (node, traverse) => {
+      const [fieldButton] = findAllInstances<FieldButtonProperties>({
+        node,
+        key: fieldButtonHandler.key,
+      });
+
+      return fieldButtonHandler.transform(fieldButton, traverse);
+    },
+  );
+};
+
+export const createAddressFieldHandler = (ctx: ComponentHandlerDeps) => {
+  const fieldButtonHandler = createFieldButtonHandler(ctx);
+
+  return defineComponentHandler<GenericFieldButtonProps>(
+    components.templateAddressPickerField.key,
+    (node, traverse) => {
+      const [fieldButton] = findAllInstances<FieldButtonProperties>({
+        node,
+        key: fieldButtonHandler.key,
+      });
+
+      return fieldButtonHandler.transform(fieldButton, traverse);
+    },
+  );
+};

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

@@ -0,0 +1,167 @@
+import type {
+  FieldCharacterCountProperties,
+  FieldFooterProperties,
+  FieldHeaderProperties,
+  FieldIndicatorProperties,
+} from "@/codegen/component-properties";
+import { defineComponentHandler } from "@/codegen/core";
+import { createSeedReactElement } from "../../element-factories";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import { match } from "ts-pattern";
+import { findAllInstances } from "@/utils/figma-node";
+import { camelCase } from "change-case";
+
+const FIELD_HEADER_KEY = "84fe2e479c3291177662e41c71af29716e48789b";
+const FIELD_INDICATOR_KEY = "a0a170973212ea0cd952b45a8acb11a92561f402";
+const FIELD_FOOTER_KEY = "ab528f3b51a6dc529bb144de1495b07deef77ffa";
+const FIELD_CHARACTER_COUNT_KEY = "25dd9a96f4bf3b866b8713f6d8deec370eebfa72";
+
+export const FIELD_KEYS = {
+  HEADER: FIELD_HEADER_KEY,
+  FOOTER: FIELD_FOOTER_KEY,
+};
+
+export type FieldHeaderProps = FieldIndicatorProps & {
+  label?: string;
+  labelWeight?: string;
+};
+
+/**
+ * NOTE: only gives useful 'props' for field-related components but doesn't give fully functional code.
+ */
+export const createFieldHeaderHandler = (ctx: ComponentHandlerDeps) => {
+  const indicatorHandler = createFieldIndicatorHandler(ctx);
+
+  return defineComponentHandler<FieldHeaderProperties>(FIELD_HEADER_KEY, (node, traverse) => {
+    const { componentProperties: props } = node;
+
+    const [indicator] = findAllInstances<FieldIndicatorProperties>({
+      node,
+      key: FIELD_INDICATOR_KEY,
+    });
+
+    // only returns some nice common props for Slider, TextField and more
+    return createSeedReactElement("__FieldHeader__", {
+      label: props["Label#34796:0"].value,
+      labelWeight: camelCase(props.Weight.value),
+      ...(indicator &&
+        (indicatorHandler.transform(indicator, traverse).props as FieldIndicatorProps)),
+    } satisfies FieldHeaderProps);
+  });
+};
+
+type FieldIndicatorProps = {
+  required?: boolean;
+  showRequiredIndicator?: boolean;
+  indicator?: string;
+};
+
+/**
+ * NOTE: only gives useful 'props' for field-related components but doesn't give fully functional code.
+ */
+const createFieldIndicatorHandler = (_ctx: ComponentHandlerDeps) => {
+  return defineComponentHandler<FieldIndicatorProperties>(
+    FIELD_INDICATOR_KEY,
+    ({ componentProperties: props }) => {
+      const { required, showRequiredIndicator, indicator } = match(props.Type.value)
+        .with("Required Mark", () => ({
+          required: true,
+          showRequiredIndicator: true,
+          indicator: undefined,
+        }))
+        .with("Text", () => ({
+          required: undefined,
+          showRequiredIndicator: undefined,
+          indicator: props["Required Label#40606:3"].value,
+        }))
+        .exhaustive();
+
+      // only returns some nice common props for Slider, TextField and more
+      return createSeedReactElement("__FieldIndicator__", {
+        required,
+        showRequiredIndicator,
+        indicator,
+      } satisfies FieldIndicatorProps);
+    },
+  );
+};
+
+export type FieldFooterProps = FieldCharacterCountProps & {
+  description?: string;
+  maxGraphemeCount?: number;
+  invalid?: boolean;
+  errorMessage?: string;
+};
+
+/**
+ * NOTE: only gives useful 'props' for field-related components but doesn't give fully functional code.
+ */
+export const createFieldFooterHandler = (ctx: ComponentHandlerDeps) => {
+  const characterCountHandler = createFieldCharacterCountHandler(ctx);
+
+  return defineComponentHandler<FieldFooterProperties>(FIELD_FOOTER_KEY, (node, traverse) => {
+    const { componentProperties: props } = node;
+
+    const { description, maxGraphemeCount } = match(props.Type.value)
+      .with("Description", () => ({
+        description: props["Text#2770:0"].value,
+        maxGraphemeCount: undefined,
+      }))
+      .with("Description With Character Count", () => ({
+        description: props["Text#2770:0"].value,
+        maxGraphemeCount: undefined,
+      }))
+      .with("Character Count", () => {
+        const [characterCount] = findAllInstances<FieldCharacterCountProperties>({
+          node,
+          key: FIELD_CHARACTER_COUNT_KEY,
+        });
+
+        return {
+          description: undefined,
+          ...(characterCount &&
+            (characterCountHandler.transform(characterCount, traverse)
+              .props as FieldCharacterCountProps)),
+        };
+      })
+      .exhaustive();
+
+    const { errorMessage, invalid } = match(props.Error.value === "true")
+      .with(true, () => ({
+        invalid: true,
+        errorMessage: props["Error Text#32821:0"].value,
+      }))
+      .with(false, () => ({
+        invalid: undefined,
+        errorMessage: undefined,
+      }))
+      .exhaustive();
+
+    // only returns some nice common props for Slider, TextField and more
+    return createSeedReactElement("__FieldFooter__", {
+      description,
+      maxGraphemeCount,
+      invalid,
+      errorMessage,
+    } satisfies FieldFooterProps);
+  });
+};
+
+type FieldCharacterCountProps = {
+  maxGraphemeCount?: number;
+};
+
+/**
+ * NOTE: only gives useful 'props' for field-related components but doesn't give fully functional code.
+ */
+const createFieldCharacterCountHandler = (_ctx: ComponentHandlerDeps) => {
+  return defineComponentHandler<FieldCharacterCountProperties>(
+    FIELD_CHARACTER_COUNT_KEY,
+    ({ componentProperties: props }) => {
+      // only returns some nice common props for Slider, TextField and more
+      return createSeedReactElement("__FieldCharacterCount__", {
+        maxGraphemeCount: Number(props["Max Count#40960:4"].value),
+      } satisfies FieldCharacterCountProps);
+    },
+  );
+};

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

@@ -0,0 +1,114 @@
+import type {
+  FieldFooterProperties,
+  FieldHeaderProperties,
+  SliderFieldProperties,
+  SliderProperties,
+  SliderTicksProperties,
+} 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";
+import { findAllInstances } from "@/utils/figma-node";
+import {
+  createFieldFooterHandler,
+  createFieldHeaderHandler,
+  FIELD_KEYS,
+  type FieldFooterProps,
+  type FieldHeaderProps,
+} from "@/codegen/targets/react/component/handlers/field";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("slider");
+
+const SLIDER_TICK_KEY = "ace432ffb7a2af13bce549b19c932ac5f96a9a78";
+
+function getSliderComment(props: { markers?: unknown; ticks?: unknown } & Record<string, unknown>) {
+  return [
+    "min, max, step 값을 적절히 조정해주세요.",
+    props.markers && "markers 배열을 채워주세요.",
+    props.ticks && "ticks 배열을 채워주세요.",
+  ]
+    .filter(Boolean)
+    .join(" ");
+}
+
+export const createSliderFieldHandler = (ctx: ComponentHandlerDeps) => {
+  const sliderHandler = createSliderHandler(ctx);
+  const fieldHeaderHandler = createFieldHeaderHandler(ctx);
+  const fieldFooterHandler = createFieldFooterHandler(ctx);
+
+  return defineComponentHandler<SliderFieldProperties>(
+    metadata.templateSliderField.key,
+    (node, traverse) => {
+      const props = node.componentProperties;
+
+      const [slider] = findAllInstances<SliderProperties>({ node, key: metadata.slider.key });
+      const [fieldHeader] = findAllInstances<FieldHeaderProperties>({
+        node,
+        key: FIELD_KEYS.HEADER,
+      });
+      const [fieldFooter] = findAllInstances<FieldFooterProperties>({
+        node,
+        key: FIELD_KEYS.FOOTER,
+      });
+
+      const sliderProps = sliderHandler.transform(slider, traverse).props;
+
+      // maxGraphemeCount and required can't be props of Slider
+      const { required: __required, ...headerProps } =
+        props["Show Header#40606:8"].value && fieldHeader
+          ? (fieldHeaderHandler.transform(fieldHeader, traverse).props as FieldHeaderProps)
+          : {};
+      const { maxGraphemeCount: __maxGraphemeCount, ...footerProps } =
+        props["Show Footer#40606:9"].value && fieldFooter
+          ? (fieldFooterHandler.transform(fieldFooter, traverse).props as FieldFooterProps)
+          : {};
+
+      const commonProps = {
+        ...sliderProps,
+        ...headerProps,
+        ...footerProps,
+      };
+
+      return createLocalSnippetElement("Slider", commonProps, undefined, {
+        comment: getSliderComment(commonProps),
+      });
+    },
+  );
+};
+
+export const createSliderHandler = (_ctx: ComponentHandlerDeps) => {
+  return defineComponentHandler<SliderProperties>(metadata.slider.key, (node) => {
+    const { componentProperties: props } = node;
+
+    const { min, max, defaultValues } = match(props.Value.value)
+      .with("Single", () => ({ min: 0, max: 100, defaultValues: [50] }))
+      .with("Range", () => ({ min: 0, max: 100, defaultValues: [0, 50] }))
+      .exhaustive();
+
+    const [ticks] = findAllInstances<SliderTicksProperties>({ node, key: SLIDER_TICK_KEY });
+
+    const commonProps = {
+      min,
+      max,
+      defaultValues,
+      hideRange: props["Show Active Track#48156:0"].value === false,
+      ...(props["Show Markers#49596:0"].value === true && {
+        markers: [],
+      }),
+      ...(props["Has Tick Mark#47921:0"].value === true &&
+        ticks && {
+          ticks: [],
+          tickWeight: ticks.componentProperties.Type.value === "Discrete" ? "thick" : "thin",
+        }),
+      ...(props.State.value === "Disabled" && {
+        disabled: true,
+      }),
+    };
+
+    return createLocalSnippetElement("Slider", commonProps, undefined, {
+      comment: getSliderComment(commonProps),
+    });
+  });
+};