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

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

@@ -1,93 +1,93 @@
-import type { Meta, StoryFn, StoryObj } from "@storybook/react";
-import { RBDivider } from "@repo/rb-components/new_components";
-
-type StoryComponent = StoryObj<typeof RBDivider>;
-type StoryTemplate = StoryFn<typeof RBDivider>;
-
-const Template: StoryTemplate = (args) => {
-  if (args.type === "vertical") {
-    return (
-      <div className="roundedp-4 flex h-24 items-center gap-3">
-        <span className="text-fg-default text-sm">Left</span>
-        <RBDivider {...args} />
-        <span className="text-fg-default text-sm">Right</span>
-      </div>
-    );
-  }
-
-  return (
-    <div className="w-96 max-w-full rounded p-4">
-      <p className="text-fg-default m-0 text-lg">Top</p>
-      <RBDivider {...args}>{args.children}</RBDivider>
-      <p className="text-fg-default m-0 text-lg">Bottom</p>
-    </div>
-  );
-};
-
-export default {
-  component: RBDivider,
-  tags: ["autodocs"],
-  render: Template,
-  argTypes: {
-    type: {
-      control: { type: "select" },
-      options: ["horizontal", "vertical"],
-      table: { type: { summary: '"horizontal" | "vertical"' } },
-    },
-    variant: {
-      control: { type: "select" },
-      options: ["solid", "dashed", "dotted", "soft"],
-      table: { type: { summary: '"solid" | "dashed" | "dotted" | "soft"' } },
-    },
-    thickness: {
-      control: { type: "select" },
-      options: ["thin", "thick"],
-      table: { type: { summary: '"thin" | "thick"' } },
-    },
-    children: {
-      control: { type: "text" },
-      table: { type: { summary: "ReactNode" } },
-    },
-    size: {
-      control: { type: "number" },
-      table: { type: { summary: "number" } },
-    },
-    color: {
-      control: { type: "color" },
-      table: { type: { summary: "string" } },
-    },
-    spaceSize: {
-      control: { type: "number" },
-      table: { type: { summary: "number" } },
-    },
-    spaceDirection: {
-      control: { type: "select" },
-      options: ["top", "bottom", "left", "right", "both"],
-      table: {
-        type: { summary: '"top" | "bottom" | "left" | "right" | "both"' },
-      },
-    },
-    contentAlign: {
-      control: { type: "select" },
-      options: ["left", "center", "right"],
-      table: { type: { summary: '"left" | "center" | "right"' } },
-    },
-    contentSpace: {
-      control: { type: "number" },
-      table: { type: { summary: "number" } },
-    },
-    contentPosition: {
-      control: { type: "number" },
-      table: { type: { summary: "number" } },
-    },
-  },
-  args: {
-    type: "horizontal",
-    variant: "solid",
-    thickness: "thin",
-    spaceDirection: "both",
-    children: undefined,
-  },
-} as Meta<typeof RBDivider>;
-
-export const Default: StoryComponent = {};
+import type { Meta, StoryFn, StoryObj } from "@storybook/react";
+import { RBDivider } from "@repo/rb-components/new_components";
+
+type StoryComponent = StoryObj<typeof RBDivider>;
+type StoryTemplate = StoryFn<typeof RBDivider>;
+
+const Template: StoryTemplate = (args) => {
+  if (args.type === "vertical") {
+    return (
+      <div className="roundedp-4 flex h-24 items-center gap-3">
+        <span className="text-fg-default text-sm">Left</span>
+        <RBDivider {...args} />
+        <span className="text-fg-default text-sm">Right</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-96 max-w-full rounded p-4">
+      <p className="text-fg-default m-0 text-lg">Top</p>
+      <RBDivider {...args}>{args.children}</RBDivider>
+      <p className="text-fg-default m-0 text-lg">Bottom</p>
+    </div>
+  );
+};
+
+export default {
+  component: RBDivider,
+  tags: ["autodocs"],
+  render: Template,
+  argTypes: {
+    type: {
+      control: { type: "select" },
+      options: ["horizontal", "vertical"],
+      table: { type: { summary: '"horizontal" | "vertical"' } },
+    },
+    variant: {
+      control: { type: "select" },
+      options: ["solid", "dashed", "dotted", "soft"],
+      table: { type: { summary: '"solid" | "dashed" | "dotted" | "soft"' } },
+    },
+    thickness: {
+      control: { type: "select" },
+      options: ["thin", "thick"],
+      table: { type: { summary: '"thin" | "thick"' } },
+    },
+    children: {
+      control: { type: "text" },
+      table: { type: { summary: "ReactNode" } },
+    },
+    size: {
+      control: { type: "number" },
+      table: { type: { summary: "number" } },
+    },
+    color: {
+      control: { type: "color" },
+      table: { type: { summary: "string" } },
+    },
+    spaceSize: {
+      control: { type: "number" },
+      table: { type: { summary: "number" } },
+    },
+    spaceDirection: {
+      control: { type: "select" },
+      options: ["top", "bottom", "left", "right", "both"],
+      table: {
+        type: { summary: '"top" | "bottom" | "left" | "right" | "both"' },
+      },
+    },
+    contentAlign: {
+      control: { type: "select" },
+      options: ["left", "center", "right"],
+      table: { type: { summary: '"left" | "center" | "right"' } },
+    },
+    contentSpace: {
+      control: { type: "number" },
+      table: { type: { summary: "number" } },
+    },
+    contentPosition: {
+      control: { type: "number" },
+      table: { type: { summary: "number" } },
+    },
+  },
+  args: {
+    type: "horizontal",
+    variant: "solid",
+    thickness: "thin",
+    spaceDirection: "both",
+    children: undefined,
+  },
+} as Meta<typeof RBDivider>;
+
+export const Default: StoryComponent = {};

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

@@ -1,49 +1,49 @@
-import type { Meta, StoryFn, StoryObj } from "@storybook/react";
-import { RBEmptyView } from "@repo/rb-components/new_components";
-import { SvgSearchBold } from "@repo/rb-components/new_components/assets/icons";
-
-type StoryComponent = StoryObj<typeof RBEmptyView>;
-type StoryTemplate = StoryFn<typeof RBEmptyView>;
-
-const Template: StoryTemplate = (args) => <RBEmptyView {...args} />;
-
-export default {
-  component: RBEmptyView,
-  tags: ["autodocs"],
-  render: Template,
-  argTypes: {
-    type: {
-      control: { type: "select" },
-      options: ["button", "icon"],
-      table: { type: { summary: '"button" | "icon"' } },
-    },
-    message: {
-      control: { type: "text" },
-    },
-    buttonLabel: {
-      control: { type: "text" },
-    },
-    onButtonClick: { control: false },
-    icon: { control: false },
-  },
-  args: {
-    type: "button",
-    message: "엠프티뷰의 안내 메세지를 입력해주세요.",
-    buttonLabel: "버튼 라벨",
-  },
-} as Meta<typeof RBEmptyView>;
-
-export const Button: StoryComponent = {
-  args: {
-    type: "button",
-    message: "엠프티뷰의 안내 메세지를 입력해주세요.",
-    buttonLabel: "버튼 라벨",
-  },
-};
-
-export const Icon: StoryComponent = {
-  args: {
-    type: "icon",
-    icon: <SvgSearchBold />,
-  },
-};
+import type { Meta, StoryFn, StoryObj } from "@storybook/react";
+import { RBEmptyView } from "@repo/rb-components/new_components";
+import { SvgSearchBold } from "@repo/rb-components/new_components/assets/icons";
+
+type StoryComponent = StoryObj<typeof RBEmptyView>;
+type StoryTemplate = StoryFn<typeof RBEmptyView>;
+
+const Template: StoryTemplate = (args) => <RBEmptyView {...args} />;
+
+export default {
+  component: RBEmptyView,
+  tags: ["autodocs"],
+  render: Template,
+  argTypes: {
+    type: {
+      control: { type: "select" },
+      options: ["button", "icon"],
+      table: { type: { summary: '"button" | "icon"' } },
+    },
+    message: {
+      control: { type: "text" },
+    },
+    buttonLabel: {
+      control: { type: "text" },
+    },
+    onButtonClick: { control: false },
+    icon: { control: false },
+  },
+  args: {
+    type: "button",
+    message: "엠프티뷰의 안내 메세지를 입력해주세요.",
+    buttonLabel: "버튼 라벨",
+  },
+} as Meta<typeof RBEmptyView>;
+
+export const Button: StoryComponent = {
+  args: {
+    type: "button",
+    message: "엠프티뷰의 안내 메세지를 입력해주세요.",
+    buttonLabel: "버튼 라벨",
+  },
+};
+
+export const Icon: StoryComponent = {
+  args: {
+    type: "icon",
+    icon: <SvgSearchBold />,
+  },
+};

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

@@ -1,108 +1,108 @@
-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 RBColorIcons from "@repo/rb-components/new_components/assets/color-icons";
-import { copyClipboard } from "@repo/rb-utils/browserUtils";
-
-type IconExport =
-  | string
-  | ((props: React.SVGAttributes<SVGSVGElement>) => React.ReactElement);
-
-const allIcons = Object.entries(RBColorIcons)
-  .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">
-            RBColorIcons
-          </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="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/color-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 RBColorIcons from "@repo/rb-components/new_components/assets/color-icons";
+import { copyClipboard } from "@repo/rb-utils/browserUtils";
+
+type IconExport =
+  | string
+  | ((props: React.SVGAttributes<SVGSVGElement>) => React.ReactElement);
+
+const allIcons = Object.entries(RBColorIcons)
+  .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">
+            RBColorIcons
+          </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="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/color-icons` 에서 export되는 프로그램 아이콘을 한 번에 확인하는 스토리입니다. 아이콘 카드를 클릭하면 사용 코드가 복사됩니다.",
+      },
+    },
+  },
+} satisfies Meta<typeof ProgramIconGallery>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => <ProgramIconGallery />,
+};