@rainbow-robotics/muscat-plugin-kit 1.10.1-dev.1 → 1.10.1

package/cli/storybook-dist/_stories-src/RBIcons/RBIcons.stories.tsx

@@ -1,106 +1,106 @@
-import type React from "react";
-import type { Meta, StoryObj } from "@storybook/react";
-import { useMemo, useState } from "react";
-
-import { RBTextInput } from "@repo/rb-components/new_components";
-import * as RBIcons from "@repo/rb-components/new_components/assets/icons";
-import { copyClipboard } from "@repo/rb-utils/browserUtils";
-
-type IconExport =
-  | string
-  | ((props: React.SVGAttributes<SVGSVGElement>) => React.ReactElement);
-
-const allIcons = Object.entries(RBIcons)
-  .filter(
-    ([, value]) => typeof value === "function" || typeof value === "string",
-  )
-  .sort(([left], [right]) => left.localeCompare(right)) as Array<
-  [string, IconExport]
->;
-
-const toIconUsage = (name: string) => `<${name} className="size-5" />`;
-
-const handleCopy = (name: string) => {
-  void copyClipboard({ text: toIconUsage(name) });
-};
-
-const ProgramIconGallery = () => {
-  const [query, setQuery] = useState("");
-
-  const filteredIcons = useMemo(() => {
-    const keyword = query.trim().toLowerCase();
-
-    if (!keyword) {
-      return allIcons;
-    }
-
-    return allIcons.filter(([name]) => name.toLowerCase().includes(keyword));
-  }, [query]);
-
-  return (
-    <div className="flex flex-col gap-4">
-      <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
-        <div>
-          <h3 className="text-fg-default text-lg font-semibold">RBIcons</h3>
-          <p className="text-fg-subtle text-sm">
-            현재 export된 아이콘 {filteredIcons.length} / {allIcons.length}
-          </p>
-        </div>
-        <RBTextInput
-          value={query}
-          handleChange={(value) => setQuery(String(value ?? ""))}
-          placeholder="Search program icons"
-          className="w-full md:w-72"
-        />
-      </div>
-
-      <div className="grid grid-cols-2 gap-3 md:grid-cols-4 xl:grid-cols-6">
-        {filteredIcons.map(([name, Icon]) => (
-          <button
-            key={name}
-            type="button"
-            onClick={() => handleCopy(name)}
-            title={`Copy ${toIconUsage(name)}`}
-            className="border-default bg-default flex min-h-32 cursor-copy flex-col items-center justify-center gap-3 rounded-xl border p-4 text-center transition-colors"
-          >
-            {typeof Icon === "function" ? (
-              <Icon className="text-fg-default size-6 shrink-0" />
-            ) : (
-              <img src={Icon} alt={name} className="shrink-0" />
-            )}
-            <div className="flex flex-col gap-1">
-              <span className="text-default text-xs font-medium break-all">
-                {name}
-              </span>
-              <span className="text-fg-subtle text-[11px] break-all">
-                {toIconUsage(name)}
-              </span>
-            </div>
-          </button>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-const meta = {
-  component: ProgramIconGallery,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "padded",
-    docs: {
-      description: {
-        component:
-          "`@repo/rb-components/new_components/assets/icons` 에서 export되는 프로그램 아이콘을 한 번에 확인하는 스토리입니다. 아이콘 카드를 클릭하면 사용 코드가 복사됩니다.",
-      },
-    },
-  },
-} satisfies Meta<typeof ProgramIconGallery>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => <ProgramIconGallery />,
-};
+import type React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { useMemo, useState } from "react";
+
+import { RBTextInput } from "@repo/rb-components/new_components";
+import * as RBIcons from "@repo/rb-components/new_components/assets/icons";
+import { copyClipboard } from "@repo/rb-utils/browserUtils";
+
+type IconExport =
+  | string
+  | ((props: React.SVGAttributes<SVGSVGElement>) => React.ReactElement);
+
+const allIcons = Object.entries(RBIcons)
+  .filter(
+    ([, value]) => typeof value === "function" || typeof value === "string",
+  )
+  .sort(([left], [right]) => left.localeCompare(right)) as Array<
+  [string, IconExport]
+>;
+
+const toIconUsage = (name: string) => `<${name} className="size-5" />`;
+
+const handleCopy = (name: string) => {
+  void copyClipboard({ text: toIconUsage(name) });
+};
+
+const ProgramIconGallery = () => {
+  const [query, setQuery] = useState("");
+
+  const filteredIcons = useMemo(() => {
+    const keyword = query.trim().toLowerCase();
+
+    if (!keyword) {
+      return allIcons;
+    }
+
+    return allIcons.filter(([name]) => name.toLowerCase().includes(keyword));
+  }, [query]);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+        <div>
+          <h3 className="text-fg-default text-lg font-semibold">RBIcons</h3>
+          <p className="text-fg-subtle text-sm">
+            현재 export된 아이콘 {filteredIcons.length} / {allIcons.length}
+          </p>
+        </div>
+        <RBTextInput
+          value={query}
+          handleChange={(value) => setQuery(String(value ?? ""))}
+          placeholder="Search program icons"
+          className="w-full md:w-72"
+        />
+      </div>
+
+      <div className="grid grid-cols-2 gap-3 md:grid-cols-4 xl:grid-cols-6">
+        {filteredIcons.map(([name, Icon]) => (
+          <button
+            key={name}
+            type="button"
+            onClick={() => handleCopy(name)}
+            title={`Copy ${toIconUsage(name)}`}
+            className="border-default bg-default flex min-h-32 cursor-copy flex-col items-center justify-center gap-3 rounded-xl border p-4 text-center transition-colors"
+          >
+            {typeof Icon === "function" ? (
+              <Icon className="text-fg-default size-6 shrink-0" />
+            ) : (
+              <img src={Icon} alt={name} className="shrink-0" />
+            )}
+            <div className="flex flex-col gap-1">
+              <span className="text-default text-xs font-medium break-all">
+                {name}
+              </span>
+              <span className="text-fg-subtle text-[11px] break-all">
+                {toIconUsage(name)}
+              </span>
+            </div>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const meta = {
+  component: ProgramIconGallery,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "`@repo/rb-components/new_components/assets/icons` 에서 export되는 프로그램 아이콘을 한 번에 확인하는 스토리입니다. 아이콘 카드를 클릭하면 사용 코드가 복사됩니다.",
+      },
+    },
+  },
+} satisfies Meta<typeof ProgramIconGallery>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => <ProgramIconGallery />,
+};

package/cli/storybook-dist/_stories-src/RBInput/RBCheckBox.stories.tsx

@@ -1,89 +1,89 @@
-import type { Meta, StoryFn, StoryObj } from "@storybook/react";
-import { RBCheckBox } from "@repo/rb-components/new_components";
-import { useState } from "react";
-import type { CheckBoxProps } from "@repo/rb-components/new_components";
-
-type StoryComponent = StoryObj<typeof RBCheckBox>;
-type StoryTemplate = StoryFn<typeof RBCheckBox>;
-
-const Template: StoryTemplate = (args) => {
-  const list = [1, 2, 3, 4];
-  const [value, setValue] = useState<(string | number)[]>([1, 2]);
-
-  const handleChange = (
-    nextValue: CheckBoxProps["value"] | undefined,
-    name?: string,
-  ) => {
-    if (Array.isArray(nextValue)) {
-      setValue(nextValue as (string | number)[]);
-    }
-
-    args.handleChange?.(nextValue, name);
-  };
-
-  return (
-    <div className="space-y-3">
-      <div className="flex flex-col gap-4">
-        <RBCheckBox
-          {...args}
-          name="rb-checkbox-demo-all"
-          checkValue={list}
-          value={value}
-          handleChange={handleChange}
-        >
-          전체 선택
-        </RBCheckBox>
-
-        {list.map((num) => (
-          <RBCheckBox
-            key={num}
-            {...args}
-            name="rb-checkbox-demo"
-            checkValue={num}
-            value={value}
-            handleChange={handleChange}
-          >
-            <>
-              <span>{args.children ?? "CheckBox Dummy Text"}</span>
-              <span>{num}</span>
-            </>
-          </RBCheckBox>
-        ))}
-      </div>
-
-      <div className="text-fg-default text-xs">
-        DATA: [{value.map(String).join(", ")}]
-      </div>
-    </div>
-  );
-};
-
-export default {
-  component: RBCheckBox,
-  tags: ["autodocs"],
-  argTypes: {
-    size: {
-      control: { type: "select" },
-      options: ["sm", "md"],
-      table: { type: { summary: '"sm" | "md"' } },
-    },
-    disabled: { control: { type: "boolean" } },
-    readOnly: { control: { type: "boolean" } },
-    children: { control: { type: "text" } },
-    selected: { control: { type: "boolean" } },
-    partial: { control: { type: "boolean" } },
-    checkValue: { control: false },
-    value: { control: false },
-    handleChange: { control: false },
-  },
-  args: {
-    size: "sm",
-    disabled: false,
-    readOnly: false,
-    selected: false,
-    partial: false,
-  },
-  render: Template,
-} as Meta<typeof RBCheckBox>;
-
-export const Default: StoryComponent = {};
+import type { Meta, StoryFn, StoryObj } from "@storybook/react";
+import { RBCheckBox } from "@repo/rb-components/new_components";
+import { useState } from "react";
+import type { CheckBoxProps } from "@repo/rb-components/new_components";
+
+type StoryComponent = StoryObj<typeof RBCheckBox>;
+type StoryTemplate = StoryFn<typeof RBCheckBox>;
+
+const Template: StoryTemplate = (args) => {
+  const list = [1, 2, 3, 4];
+  const [value, setValue] = useState<(string | number)[]>([1, 2]);
+
+  const handleChange = (
+    nextValue: CheckBoxProps["value"] | undefined,
+    name?: string,
+  ) => {
+    if (Array.isArray(nextValue)) {
+      setValue(nextValue as (string | number)[]);
+    }
+
+    args.handleChange?.(nextValue, name);
+  };
+
+  return (
+    <div className="space-y-3">
+      <div className="flex flex-col gap-4">
+        <RBCheckBox
+          {...args}
+          name="rb-checkbox-demo-all"
+          checkValue={list}
+          value={value}
+          handleChange={handleChange}
+        >
+          전체 선택
+        </RBCheckBox>
+
+        {list.map((num) => (
+          <RBCheckBox
+            key={num}
+            {...args}
+            name="rb-checkbox-demo"
+            checkValue={num}
+            value={value}
+            handleChange={handleChange}
+          >
+            <>
+              <span>{args.children ?? "CheckBox Dummy Text"}</span>
+              <span>{num}</span>
+            </>
+          </RBCheckBox>
+        ))}
+      </div>
+
+      <div className="text-fg-default text-xs">
+        DATA: [{value.map(String).join(", ")}]
+      </div>
+    </div>
+  );
+};
+
+export default {
+  component: RBCheckBox,
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: ["sm", "md"],
+      table: { type: { summary: '"sm" | "md"' } },
+    },
+    disabled: { control: { type: "boolean" } },
+    readOnly: { control: { type: "boolean" } },
+    children: { control: { type: "text" } },
+    selected: { control: { type: "boolean" } },
+    partial: { control: { type: "boolean" } },
+    checkValue: { control: false },
+    value: { control: false },
+    handleChange: { control: false },
+  },
+  args: {
+    size: "sm",
+    disabled: false,
+    readOnly: false,
+    selected: false,
+    partial: false,
+  },
+  render: Template,
+} as Meta<typeof RBCheckBox>;
+
+export const Default: StoryComponent = {};

package/cli/storybook-dist/_stories-src/RBInput/RBMultiRangeInput.stories.tsx

@@ -1,64 +1,64 @@
-import type { Meta, StoryObj, StoryFn } from "@storybook/react";
-import { RBMultiRangeInput } from "@repo/rb-components/new_components";
-
-type StoryComponent = StoryObj<typeof RBMultiRangeInput>;
-type StoryTemplate = StoryFn<typeof RBMultiRangeInput>;
-
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
-export default {
-  component: RBMultiRangeInput,
-  tags: ["autodocs"],
-  argTypes: {
-    min: {
-      control: { type: "number" },
-      defaultValue: 0,
-    },
-    max: {
-      control: { type: "number" },
-      defaultValue: 100,
-    },
-    step: {
-      control: { type: "number" },
-      defaultValue: 1,
-    },
-    thumbSize: {
-      control: { type: "number" },
-      defaultValue: 20,
-    },
-    sliderHeight: {
-      control: { type: "number" },
-      defaultValue: 4,
-    },
-    thumbBorderColor: {
-      control: { type: "color" },
-    },
-    thumbColor: {
-      control: { type: "color" },
-    },
-    trackColor: {
-      control: { type: "color" },
-    },
-    rangeColor: {
-      control: { type: "color" },
-    },
-  },
-} as Meta<typeof RBMultiRangeInput>;
-
-const Template: StoryTemplate = (args) => {
-  return <RBMultiRangeInput {...args} />;
-};
-
-export const Default: StoryComponent = {
-  parameters: {
-    docs: {
-      description: {
-        story: "",
-      },
-    },
-  },
-  args: {
-    min: 0,
-    max: 100,
-  },
-  render: Template,
-};
+import type { Meta, StoryObj, StoryFn } from "@storybook/react";
+import { RBMultiRangeInput } from "@repo/rb-components/new_components";
+
+type StoryComponent = StoryObj<typeof RBMultiRangeInput>;
+type StoryTemplate = StoryFn<typeof RBMultiRangeInput>;
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+export default {
+  component: RBMultiRangeInput,
+  tags: ["autodocs"],
+  argTypes: {
+    min: {
+      control: { type: "number" },
+      defaultValue: 0,
+    },
+    max: {
+      control: { type: "number" },
+      defaultValue: 100,
+    },
+    step: {
+      control: { type: "number" },
+      defaultValue: 1,
+    },
+    thumbSize: {
+      control: { type: "number" },
+      defaultValue: 20,
+    },
+    sliderHeight: {
+      control: { type: "number" },
+      defaultValue: 4,
+    },
+    thumbBorderColor: {
+      control: { type: "color" },
+    },
+    thumbColor: {
+      control: { type: "color" },
+    },
+    trackColor: {
+      control: { type: "color" },
+    },
+    rangeColor: {
+      control: { type: "color" },
+    },
+  },
+} as Meta<typeof RBMultiRangeInput>;
+
+const Template: StoryTemplate = (args) => {
+  return <RBMultiRangeInput {...args} />;
+};
+
+export const Default: StoryComponent = {
+  parameters: {
+    docs: {
+      description: {
+        story: "",
+      },
+    },
+  },
+  args: {
+    min: 0,
+    max: 100,
+  },
+  render: Template,
+};

package/cli/storybook-dist/_stories-src/RBInput/RBRadioBox.stories.tsx

@@ -1,65 +1,65 @@
-import { useState } from "react";
-import type { Meta, StoryFn, StoryObj } from "@storybook/react";
-
-import { RBRadioBox } from "@repo/rb-components/new_components";
-import type { RadioBoxProps } from "@repo/rb-components/new_components";
-
-type StoryComponent = StoryObj<typeof RBRadioBox>;
-type StoryTemplate = StoryFn<typeof RBRadioBox>;
-
-const Template: StoryTemplate = (args) => {
-  const list = [1, 2, 3, 4];
-  const [value, setValue] = useState<RadioBoxProps["value"]>();
-
-  const handleChange = (nextValue: string | number, name?: string) => {
-    setValue(nextValue);
-    args.handleChange?.(nextValue, name);
-  };
-
-  return (
-    <div className="space-y-3">
-      <div className="flex flex-col gap-4">
-        {list.map((num) => (
-          <RBRadioBox
-            key={num}
-            {...args}
-            name={args.name ?? "rb-radio-demo"}
-            checkValue={num}
-            value={value}
-            handleChange={handleChange}
-          >
-            {`${args.children ?? "Radio Button Dummy Text"} ${num}`}
-          </RBRadioBox>
-        ))}
-      </div>
-      <div className="text-fg-default text-xs">DATA: {String(value ?? "")}</div>
-    </div>
-  );
-};
-
-export default {
-  component: RBRadioBox,
-  tags: ["autodocs"],
-  argTypes: {
-    size: {
-      control: { type: "select" },
-      options: ["sm", "md"],
-      table: { type: { summary: '"sm" | "md"' } },
-    },
-    disabled: { control: { type: "boolean" } },
-    children: { control: { type: "text" } },
-    checkValue: { control: false },
-    value: { control: false },
-    handleChange: { control: false },
-  },
-  args: {
-    size: "sm",
-    disabled: false,
-    children: "Radio Button Dummy Text",
-    name: "rb-radio-demo",
-    checkValue: "option-1",
-  },
-  render: Template,
-} as Meta<typeof RBRadioBox>;
-
-export const Default: StoryComponent = {};
+import { useState } from "react";
+import type { Meta, StoryFn, StoryObj } from "@storybook/react";
+
+import { RBRadioBox } from "@repo/rb-components/new_components";
+import type { RadioBoxProps } from "@repo/rb-components/new_components";
+
+type StoryComponent = StoryObj<typeof RBRadioBox>;
+type StoryTemplate = StoryFn<typeof RBRadioBox>;
+
+const Template: StoryTemplate = (args) => {
+  const list = [1, 2, 3, 4];
+  const [value, setValue] = useState<RadioBoxProps["value"]>();
+
+  const handleChange = (nextValue: string | number, name?: string) => {
+    setValue(nextValue);
+    args.handleChange?.(nextValue, name);
+  };
+
+  return (
+    <div className="space-y-3">
+      <div className="flex flex-col gap-4">
+        {list.map((num) => (
+          <RBRadioBox
+            key={num}
+            {...args}
+            name={args.name ?? "rb-radio-demo"}
+            checkValue={num}
+            value={value}
+            handleChange={handleChange}
+          >
+            {`${args.children ?? "Radio Button Dummy Text"} ${num}`}
+          </RBRadioBox>
+        ))}
+      </div>
+      <div className="text-fg-default text-xs">DATA: {String(value ?? "")}</div>
+    </div>
+  );
+};
+
+export default {
+  component: RBRadioBox,
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: ["sm", "md"],
+      table: { type: { summary: '"sm" | "md"' } },
+    },
+    disabled: { control: { type: "boolean" } },
+    children: { control: { type: "text" } },
+    checkValue: { control: false },
+    value: { control: false },
+    handleChange: { control: false },
+  },
+  args: {
+    size: "sm",
+    disabled: false,
+    children: "Radio Button Dummy Text",
+    name: "rb-radio-demo",
+    checkValue: "option-1",
+  },
+  render: Template,
+} as Meta<typeof RBRadioBox>;
+
+export const Default: StoryComponent = {};