Merge pull request #114 from goodpatch/fix/select

Selectの修正

Author: touyou

README.md

@@ -213,7 +213,7 @@ Sparkle Design のバッジは、コンポーネントが Sparkle Design を使
 
 現在のコンポーネントの実装状況は以下の表を参照してください。
 
-| コンポーネント    | 実装 | Storybook | レジストリ | Figma Code Connect | A11y チェック |
+| コンポーネント      | 実装  | Storybook | レジストリ   | Figma Code Connect | A11y チェック |
 | ----------------- | ---- | --------- | ---------- | ------------------ | ------------- |
 | Avatar            | ❌   | ❌        | ❌         | ❌                 | ❌            |
 | Badge             | ✅   | ✅        | ✅         | ✅                 | ❌            |
@@ -248,7 +248,7 @@ Sparkle Design のバッジは、コンポーネントが Sparkle Design を使
 | Popover           | ❌   | ❌        | ❌         | ❌                 | ❌            |
 | Radio             | ✅   | ✅        | ✅         | ✅                 | ❌            |
 | Segmented Control | ❌   | ❌        | ❌         | ❌                 | ❌            |
-| Select            | ✅   | ✅        | ✅         | ❌                 | ❌            |
+| Select            | ✅   | ✅        | ✅         | ✅                 | ❌            |
 | Side Navigation   | ❌   | ❌        | ❌         | ❌                 | ❌            |
 | Skeleton          | ✅   | ✅        | ✅         | ✅                 | ❌            |
 | Slider            | ✅   | ✅        | ✅         | ✅                 | ❌            |

src/components/ui/select/index.figma.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import figma from "@figma/code-connect";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "./index";
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * `props` includes a mapping from your code props to Figma properties.
+ * You should check this is correct, and update the `example` function
+ * to return the code example you'd like to see in Figma
+ */
+
+figma.connect(
+  SelectTrigger,
+  "https://www.figma.com/design/7alBZXZf65YgcII41TWT0r/Sparkle-Design?node-id=139%3A22300",
+  {
+    props: {
+      // These props were automatically mapped based on your linked code:
+      size: figma.enum("size", {
+        sm: "sm",
+        md: "md",
+        lg: "lg",
+      }),
+      isInvalid: figma.enum("isInvalid", {
+        false: false,
+        true: true,
+      }),
+      disabled: figma.enum("state", {
+        disabled: true,
+      }),
+      // No matching props could be found for these Figma properties:
+      // "isFocused": figma.boolean('isFocused'),
+      value: figma.string("value"),
+    },
+    example: props => (
+      <Select>
+        <SelectTrigger
+          size={props.size}
+          isInvalid={props.isInvalid}
+          disabled={props.disabled}
+        >
+          <SelectValue placeholder={props.value} />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="option1">Option 1</SelectItem>
+          <SelectItem value="option2">Option 2</SelectItem>
+          <SelectItem value="option3">Option 3</SelectItem>
+        </SelectContent>
+      </Select>
+    ),
+  }
+);

src/components/ui/select/index.stories.tsx

@@ -1,49 +1,62 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import {
   Select,
-  SelectContent,
   SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
   SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
   SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+  SelectTriggerProps,
 } from "./index";
 
 const meta = {
   title: "Form/Select",
-  component: SelectTrigger,
+  component: Select,
+  subcomponents: {
+    SelectGroup,
+    SelectValue,
+    SelectTrigger,
+    SelectContent,
+    SelectLabel,
+    SelectItem,
+    SelectSeparator,
+    SelectScrollUpButton,
+    SelectScrollDownButton,
+  },
   parameters: {
     layout: "centered",
   },
   tags: ["autodocs"],
-  argTypes: {
-    disabled: {
-      control: "boolean",
-      description: "セレクトを無効化します",
-      defaultValue: false,
-    },
-    size: {
-      control: { type: "radio" },
-      options: ["sm", "md", "lg"],
-      description: "セレクトのサイズを指定します",
-      defaultValue: "md",
-    },
-    isInvalid: {
-      control: "boolean",
-      description: "エラー状態を指定します",
-      defaultValue: false,
-    },
-  },
-} satisfies Meta<typeof SelectTrigger>;
+  argTypes: {},
+} satisfies Meta<typeof Select>;
 
 export default meta;
-type Story = StoryObj<typeof SelectTrigger>;
+type Story = StoryObj<SelectTriggerProps>;
+const argTypes: Story["argTypes"] = {
+  disabled: {
+    control: "boolean",
+    defaultValue: false,
+  },
+  size: {
+    control: { type: "radio" },
+    options: ["sm", "md", "lg"],
+    defaultValue: "md",
+  },
+  isInvalid: {
+    control: "boolean",
+    defaultValue: false,
+  },
+};
 
 export const Default: Story = {
+  argTypes: argTypes,
   render: args => (
     <Select>
-      <SelectTrigger className="w-[280px]" {...args}>
+      <SelectTrigger className="w-[480px]" {...args}>
         <SelectValue placeholder="Select a timezone" />
       </SelectTrigger>
       <SelectContent>
@@ -111,6 +124,7 @@ export const Small: Story = {
   args: {
     size: "sm",
   },
+  argTypes: argTypes,
   render: args => (
     <Select>
       <SelectTrigger className="w-[240px]" {...args}>
@@ -129,6 +143,7 @@ export const Medium: Story = {
   args: {
     size: "md",
   },
+  argTypes: argTypes,
   render: args => (
     <Select>
       <SelectTrigger className="w-[240px]" {...args}>
@@ -147,6 +162,7 @@ export const Large: Story = {
   args: {
     size: "lg",
   },
+  argTypes: argTypes,
   render: args => (
     <Select>
       <SelectTrigger className="w-[240px]" {...args}>
@@ -162,6 +178,7 @@ export const Large: Story = {
 };
 
 export const Invalid: Story = {
+  argTypes: argTypes,
   render: args => (
     <Select>
       <SelectTrigger className="w-[240px]" isInvalid {...args}>
@@ -177,6 +194,7 @@ export const Invalid: Story = {
 };
 
 export const Disabled: Story = {
+  argTypes: argTypes,
   render: args => (
     <Select>
       <SelectTrigger className="w-[240px]" disabled {...args}>
@@ -192,6 +210,7 @@ export const Disabled: Story = {
 };
 
 export const DisabledWithInvalidState: Story = {
+  argTypes: argTypes,
   render: args => (
     <Select>
       <SelectTrigger className="w-[240px]" disabled isInvalid {...args}>