@rainbow-robotics/muscat-plugin-kit 0.1.2-dev.44 → 0.1.2-dev.46

package/cli/storybook-dist/_stories-src/RBDatePicker/RBRangeDateInput.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj, StoryFn } from "@storybook/react";
+import { RBRangeDateInput } from "@repo/rb-components/new_components";
+
+type StoryComponent = StoryObj<typeof RBRangeDateInput>;
+type StoryTemplate = StoryFn<typeof RBRangeDateInput>;
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+export default {
+  component: RBRangeDateInput,
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: ["xs2", "sm", "md", "lg"],
+      table: { type: { summary: '"xs2" | "sm" | "md" | "lg"' } },
+    },
+    showPresets: { control: "boolean" },
+    showFooter: { control: "boolean" },
+  },
+} as Meta<typeof RBRangeDateInput>;
+
+const Template: StoryTemplate = (args) => {
+  return (
+    <div style={{ height: 700 }}>
+      <RBRangeDateInput {...args} />
+    </div>
+  );
+};
+
+export const Default: StoryComponent = {
+  parameters: {
+    docs: {
+      description: {
+        story: "",
+      },
+    },
+  },
+  args: {
+    size: "md",
+    showPresets: true,
+    showFooter: true,
+  },
+  render: Template,
+};

package/cli/storybook-dist/_stories-src/RBDialog/RBAlert.stories.tsx

@@ -0,0 +1,51 @@
+import { useState } from "react";
+import type { Meta, StoryObj, StoryFn } from "@storybook/react";
+import { RBAlert, RBLabelButton } from "@repo/rb-components/new_components";
+
+type StoryComponent = StoryObj<typeof RBAlert>;
+type StoryTemplate = StoryFn<typeof RBAlert>;
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+export default {
+  component: RBAlert,
+  tags: ["autodocs"],
+} as Meta<typeof RBAlert>;
+
+const Template: StoryTemplate = (args) => {
+  const [open, setOpen] = useState(true);
+
+  return (
+    <div>
+      <RBLabelButton size="sm" variant="solid" onClick={() => setOpen(true)}>
+        Open Alert
+      </RBLabelButton>
+      <RBAlert
+        {...args}
+        open={open}
+        onOpenChange={setOpen}
+        resolve={() => setOpen(false)}
+        onConfirm={() => setOpen(false)}
+      />
+    </div>
+  );
+};
+
+export const Default: StoryComponent = {
+  parameters: {
+    docs: {
+      description: {
+        story: "",
+      },
+    },
+  },
+  args: {
+    title: "Alert Modal",
+    content: (
+      <div className="text-fg-default px-4 py-2 text-sm">
+        Alert Modal Body Text
+      </div>
+    ),
+    buttonText: "Confirm",
+  },
+  render: Template,
+};

package/cli/storybook-dist/_stories-src/RBDialog/RBConfirm.stories.tsx

@@ -0,0 +1,55 @@
+import { useState } from "react";
+import type { Meta, StoryObj, StoryFn } from "@storybook/react";
+import { RBConfirm, RBLabelButton } from "@repo/rb-components/new_components";
+
+type StoryComponent = StoryObj<typeof RBConfirm>;
+type StoryTemplate = StoryFn<typeof RBConfirm>;
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+export default {
+  component: RBConfirm,
+  tags: ["autodocs"],
+} as Meta<typeof RBConfirm>;
+
+const Template: StoryTemplate = (args) => {
+  const [open, setOpen] = useState(true);
+
+  return (
+    <div>
+      <RBLabelButton size="sm" variant="solid" onClick={() => setOpen(true)}>
+        Open Confirm
+      </RBLabelButton>
+      <RBConfirm
+        {...args}
+        open={open}
+        onOpenChange={setOpen}
+        resolve={() => setOpen(false)}
+        onConfirm={() => setOpen(false)}
+        onCancel={() => setOpen(false)}
+      />
+    </div>
+  );
+};
+
+export const Default: StoryComponent = {
+  parameters: {
+    docs: {
+      description: {
+        story: "",
+      },
+    },
+  },
+  args: {
+    title: "Confirm Modal",
+    content: (
+      <div className="text-fg-default px-4 py-2 text-sm">
+        Confirm Modal Body Text
+      </div>
+    ),
+    buttonText: {
+      yes: "Confirm",
+      no: "Cancel",
+    },
+  },
+  render: Template,
+};

package/cli/storybook-dist/_stories-src/RBDialog/RBPrompt.stories.tsx

@@ -0,0 +1,52 @@
+import { useState } from "react";
+import type { Meta, StoryObj, StoryFn } from "@storybook/react";
+import { RBLabelButton, RBPrompt } from "@repo/rb-components/new_components";
+
+type StoryComponent = StoryObj<typeof RBPrompt>;
+type StoryTemplate = StoryFn<typeof RBPrompt>;
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+export default {
+  component: RBPrompt,
+  tags: ["autodocs"],
+} as Meta<typeof RBPrompt>;
+
+const Template: StoryTemplate = (args) => {
+  const [open, setOpen] = useState(true);
+
+  return (
+    <div>
+      <RBLabelButton size="sm" variant="solid" onClick={() => setOpen(true)}>
+        Open Prompt
+      </RBLabelButton>
+      <RBPrompt
+        {...args}
+        open={open}
+        onOpenChange={setOpen}
+        resolve={() => setOpen(false)}
+        close={() => setOpen(false)}
+      />
+    </div>
+  );
+};
+
+export const Default: StoryComponent = {
+  parameters: {
+    docs: {
+      description: {
+        story: "",
+      },
+    },
+  },
+  args: {
+    title: "Prompt Modal",
+    content: "",
+    placeholder: "Placeholder",
+    value: "",
+    buttonText: {
+      yes: "Confirm",
+      no: "Cancel",
+    },
+  },
+  render: Template,
+};

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

@@ -0,0 +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 = {};

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

@@ -0,0 +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 />,
+  },
+};

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

@@ -0,0 +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 />,
+};

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

@@ -0,0 +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 />,
+};

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

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