@rainbow-robotics/muscat-plugin-kit 0.1.2-dev.8 → 0.10.1-dev.0

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

@@ -0,0 +1,56 @@
+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" },
+    min: { control: "date" },
+    max: { control: "date" },
+    maxDays: {
+      control: { type: "number", min: 0, step: 1 },
+      description: "선택 가능한 최대 일수. 0은 제한 없음.",
+    },
+  },
+  args: { maxDays: 0 },
+} as Meta<typeof RBRangeDateInput>;
+
+const Template: StoryTemplate = (args) => {
+  return (
+    <div style={{ height: 700 }}>
+      <RBRangeDateInput
+        {...args}
+        min={args.min != null ? new Date(args.min) : undefined}
+        max={args.max != null ? new Date(args.max) : undefined}
+        maxDays={(args.maxDays ?? 0) > 0 ? args.maxDays : undefined}
+      />
+    </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/RBInput/RBCheckBox.stories.tsx

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