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

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

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj, StoryFn } from "@storybook/react";
+import NxAvatar from "@nexus/components/shared/avatars/NxAvatar";
+
+type StoryComponent = StoryObj<typeof NxAvatar>;
+type StoryTemplate = StoryFn<typeof NxAvatar>;
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+export default {
+  component: NxAvatar,
+  tags: ["autodocs"],
+} as Meta<typeof NxAvatar>;
+
+const Template: StoryTemplate = (args) => {
+  return <NxAvatar {...args} />;
+};
+
+export const Default: StoryComponent = {
+  parameters: {
+    docs: {
+      description: {
+        story: "",
+      },
+    },
+  },
+  args: { imgSize: "3rem" },
+  render: Template,
+};

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

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj, StoryFn } from "@storybook/react";
+import NxPagination from "@nexus/components/shared/pagination/NxPagination";
+import { Pagination } from "@sb/index";
+
+type StoryComponent = StoryObj<typeof Pagination>;
+type StoryTemplate = StoryFn<typeof NxPagination>;
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+export default {
+  component: Pagination,
+  tags: ["autodocs"],
+} as Meta<typeof Pagination>;
+
+const Template: StoryTemplate = (args) => {
+  return <NxPagination {...args} />;
+};
+
+export const Default: StoryComponent = {
+  parameters: {
+    docs: {
+      description: {
+        story: "",
+      },
+    },
+  },
+  args: {},
+  render: Template,
+};

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

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj, StoryFn } from "@storybook/react";
+import { RBAccordion } from "@repo/rb-components/new_components";
+
+type StoryComponent = StoryObj<typeof RBAccordion>;
+type StoryTemplate = StoryFn<typeof RBAccordion>;
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+export default {
+  component: RBAccordion,
+  tags: ["autodocs"],
+  argTypes: {
+    type: {
+      control: { type: "select" },
+      options: ["transparent", "fill"],
+      table: { type: { summary: '"transparent" | "fill"' } },
+    },
+  },
+} as Meta<typeof RBAccordion>;
+
+const Template: StoryTemplate = (args) => {
+  return (
+    <div className="w-64">
+      <RBAccordion {...args} />
+    </div>
+  );
+};
+
+export const Default: StoryComponent = {
+  parameters: {
+    docs: {
+      description: {
+        story: "",
+      },
+    },
+  },
+  args: {
+    type: "transparent",
+    title: "Accordion Title",
+    children: (
+      <div className="typo-compact-xs-normal text-fg-subtle flex h-12 items-center justify-center">
+        Accordion Content
+      </div>
+    ),
+  },
+  render: Template,
+};

package/cli/storybook-dist/_stories-src/RBAccordion/RBAccordionGroup.stories.tsx

@@ -0,0 +1,73 @@
+import type { Meta, StoryObj, StoryFn } from "@storybook/react";
+import { RBAccordionGroup } from "@repo/rb-components/new_components";
+
+type StoryComponent = StoryObj<typeof RBAccordionGroup>;
+type StoryTemplate = StoryFn<typeof RBAccordionGroup>;
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+export default {
+  component: RBAccordionGroup,
+  tags: ["autodocs"],
+  argTypes: {
+    type: {
+      control: { type: "select" },
+      options: ["transparent", "fill"],
+      table: { type: { summary: '"transparent" | "fill"' } },
+    },
+  },
+} as Meta<typeof RBAccordionGroup>;
+
+const Template: StoryTemplate = (args) => {
+  return (
+    <div className="w-64">
+      <RBAccordionGroup {...args} />;
+    </div>
+  );
+};
+
+export const Default: StoryComponent = {
+  parameters: {
+    docs: {
+      description: {
+        story: "",
+      },
+    },
+  },
+  args: {
+    list: [
+      {
+        title: "Accordion Title",
+        children: (
+          <div className="typo-compact-xs-normal text-fg-subtle flex h-12 items-center justify-center">
+            Accordion Content
+          </div>
+        ),
+      },
+      {
+        title: "Accordion Title",
+        children: (
+          <div className="typo-compact-xs-normal text-fg-subtle flex h-12 items-center justify-center">
+            Accordion Content
+          </div>
+        ),
+      },
+      {
+        title: "Accordion Title",
+        children: (
+          <div className="typo-compact-xs-normal text-fg-subtle flex h-12 items-center justify-center">
+            Accordion Content
+          </div>
+        ),
+      },
+      {
+        title: "Accordion Title",
+        children: (
+          <div className="typo-compact-xs-normal text-fg-subtle flex h-12 items-center justify-center">
+            Accordion Content
+          </div>
+        ),
+      },
+    ],
+  },
+  render: Template,
+};

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

@@ -0,0 +1,93 @@
+import type { Meta, StoryFn, StoryObj } from "@storybook/react";
+import { RBBadge } from "@repo/rb-components/new_components";
+import {
+  SvgDangerSolid,
+  SvgWarningSolid,
+  SvgChargingSolid,
+  SvgInfoSolid,
+  SvgBugBeetleSolid,
+  SvgLogSolid,
+} from "@repo/rb-components/new_components/assets/icons";
+
+type StoryComponent = StoryObj<typeof RBBadge>;
+type StoryTemplate = StoryFn<typeof RBBadge>;
+
+const colorIcons = {
+  red: <SvgDangerSolid className="size-3 shrink-0" />,
+  orange: <SvgWarningSolid className="size-3 shrink-0" />,
+  green: <SvgChargingSolid className="size-3 shrink-0" />,
+  blue: <SvgInfoSolid className="size-3 shrink-0" />,
+  purple: <SvgBugBeetleSolid className="size-3 shrink-0" />,
+  gray: <SvgLogSolid className="size-3 shrink-0" />,
+  "gray-subtle": <SvgLogSolid className="size-3 shrink-0" />,
+} as const;
+
+const Template: StoryTemplate = (args) => {
+  const children =
+    args.children ?? (args.type === "number" ? "8" : "Badge Label");
+
+  return (
+    <RBBadge
+      {...args}
+      leadingIcon={
+        args.type === "transparent"
+          ? (args.leadingIcon ?? colorIcons[args.color ?? "red"])
+          : undefined
+      }
+    >
+      {children}
+    </RBBadge>
+  );
+};
+
+export default {
+  component: RBBadge,
+  tags: ["autodocs"],
+  render: Template,
+  argTypes: {
+    type: {
+      control: { type: "select" },
+      options: ["number", "capsule", "transparent"],
+      table: { type: { summary: '"number" | "capsule" | "transparent"' } },
+    },
+    numberVariant: {
+      control: { type: "select" },
+      options: ["solid", "soft", "outlined", "ghost"],
+      table: {
+        type: { summary: '"solid" | "soft" | "outlined" | "ghost"' },
+      },
+    },
+    color: {
+      control: { type: "select" },
+      options: [
+        "red",
+        "orange",
+        "green",
+        "blue",
+        "purple",
+        "gray",
+        "gray-subtle",
+      ],
+      table: {
+        type: {
+          summary:
+            '"red" | "orange" | "green" | "blue" | "purple" | "gray" | "gray-subtle"',
+        },
+      },
+    },
+    leadingIcon: {
+      control: false,
+      table: {
+        type: { summary: "ReactNode" },
+      },
+    },
+    children: { control: { type: "text" } },
+  },
+  args: {
+    type: "number",
+    numberVariant: "solid",
+    color: "red",
+  },
+} as Meta<typeof RBBadge>;
+
+export const Playground: StoryComponent = {};

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

@@ -0,0 +1,74 @@
+import type { Meta, StoryFn, StoryObj } from "@storybook/react";
+import { RBBattery } from "@repo/rb-components/new_components";
+
+type StoryComponent = StoryObj<typeof RBBattery>;
+type StoryTemplate = StoryFn<typeof RBBattery>;
+
+const Template: StoryTemplate = (args) => {
+  const percent =
+    args.showPercentLabel && args.percent == null ? 0 : args.percent;
+
+  return <RBBattery {...args} percent={percent} />;
+};
+
+export default {
+  component: RBBattery,
+  tags: ["autodocs"],
+  argTypes: {
+    status: {
+      control: { type: "select" },
+      table: { type: { summary: '"critical" | "low" | "normal" | "full"' } },
+      options: ["critical", "low", "normal", "full"],
+    },
+    size: {
+      control: { type: "select" },
+      options: ["xs", "sm", "md", "lg"],
+      table: {
+        type: { summary: '"xs" | "sm" | "md" | "lg"' },
+      },
+    },
+    borderColor: {
+      control: { type: "color" },
+      description: "배터리 보더 오버레이 색상을 직접 지정합니다.",
+      table: { type: { summary: "string" } },
+    },
+    showPercentLabel: {
+      control: { type: "boolean" },
+      description: "true면 배터리 아이콘 오른쪽에 `percent` 라벨을 표시합니다.",
+      table: { type: { summary: "boolean" } },
+    },
+    wrapperClassName: {
+      control: { type: "text" },
+      description:
+        "아이콘+라벨 전체 wrapper에 추가되는 클래스입니다. 간격/정렬 조정용입니다.",
+      table: { type: { summary: "string" } },
+    },
+    percentLabelClassName: {
+      control: { type: "text" },
+      description:
+        "퍼센트 텍스트 라벨에만 적용되는 클래스입니다. 색상/타이포 조정용입니다.",
+      table: { type: { summary: "string" } },
+    },
+  },
+  args: {
+    size: "md",
+    status: undefined,
+    percent: undefined,
+    charging: false,
+    borderColor: undefined,
+    showPercentLabel: false,
+  },
+} as Meta<typeof RBBattery>;
+
+export const Default: StoryComponent = {
+  args: {},
+  render: Template,
+};
+
+export const WithPercentLabel: StoryComponent = {
+  args: {
+    percent: 72,
+    showPercentLabel: true,
+  },
+  render: Template,
+};

package/cli/storybook-dist/_stories-src/RBButton/RBCheckIconButton.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryFn, StoryObj } from "@storybook/react";
+import { RBCheckIconButton, RBIcons } from "@repo/rb-components/new_components";
+
+type StoryComponent = StoryObj<typeof RBCheckIconButton>;
+type StoryTemplate = StoryFn<typeof RBCheckIconButton>;
+
+const Template: StoryTemplate = (args) => <RBCheckIconButton {...args} />;
+
+export default {
+  component: RBCheckIconButton,
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: ["xs", "xs2"],
+    },
+    icon: { control: false },
+    children: { control: false },
+  },
+  args: {
+    size: "xs",
+    icon: <RBIcons.SvgPlusBold />,
+    disabled: false,
+  },
+  render: Template,
+} as Meta<typeof RBCheckIconButton>;
+
+export const Default: StoryComponent = {};

package/cli/storybook-dist/_stories-src/RBButton/RBCheckLabelButton.stories.tsx

@@ -0,0 +1,84 @@
+import type { ChangeEvent } from "react";
+import { useState } from "react";
+import type { Meta, StoryFn, StoryObj } from "@storybook/react";
+import { RBCheckLabelButton } from "@repo/rb-components/new_components";
+
+type StoryComponent = StoryObj<typeof RBCheckLabelButton>;
+type StoryTemplate = StoryFn<typeof RBCheckLabelButton>;
+
+const Template: StoryTemplate = (args) => <RBCheckLabelButton {...args} />;
+
+export default {
+  component: RBCheckLabelButton,
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: ["xs", "xs2"],
+    },
+    leadingIcon: { control: false },
+    trailingIcon: { control: false },
+  },
+  args: {
+    children: "버튼 라벨",
+    size: "xs",
+    disabled: false,
+  },
+  render: Template,
+} as Meta<typeof RBCheckLabelButton>;
+
+export const Default: StoryComponent = {};
+
+export const Multiple: StoryComponent = {
+  render: (args) => {
+    const [selected, setSelected] = useState<Array<string | number>>([
+      "button-1",
+    ]);
+
+    const handleChange =
+      (value: string) => (e: ChangeEvent<HTMLInputElement>) => {
+        setSelected((prev) =>
+          e.target.checked
+            ? prev.includes(value)
+              ? prev
+              : [...prev, value]
+            : prev.filter((item) => item !== value),
+        );
+      };
+
+    return (
+      <div className="flex flex-col gap-3">
+        <div className="flex items-start gap-2">
+          <RBCheckLabelButton
+            {...args}
+            value={selected}
+            checkValue="button-1"
+            onChange={handleChange("button-1")}
+          >
+            버튼 1
+          </RBCheckLabelButton>
+          <RBCheckLabelButton
+            {...args}
+            value={selected}
+            checkValue="button-2"
+            onChange={handleChange("button-2")}
+          >
+            버튼 2
+          </RBCheckLabelButton>
+          <RBCheckLabelButton
+            {...args}
+            className="w-20"
+            value={selected}
+            checkValue="button-3"
+            onChange={handleChange("button-3")}
+          >
+            버튼 3
+          </RBCheckLabelButton>
+        </div>
+        <div className="text-default text-xs">
+          selected: {JSON.stringify(selected)}
+        </div>
+      </div>
+    );
+  },
+};

package/cli/storybook-dist/_stories-src/RBButton/RBIconButton.stories.tsx

@@ -0,0 +1,57 @@
+import type { Meta, StoryFn, StoryObj } from "@storybook/react";
+import { RBIconButton, RBIcons } from "@repo/rb-components/new_components";
+
+type StoryComponent = StoryObj<typeof RBIconButton>;
+type StoryTemplate = StoryFn<typeof RBIconButton>;
+
+const Template: StoryTemplate = (args) => <RBIconButton {...args} />;
+
+export default {
+  component: RBIconButton,
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: ["3xs", "2xs", "xs", "xs2", "sm", "md"],
+      table: {
+        type: { summary: '"3xs" | "2xs" | "xs" | "xs2" | "sm" | "md"' },
+      },
+    },
+    variant: {
+      control: { type: "select" },
+      options: [
+        "transparent",
+        "outlined",
+        "soft",
+        "solid",
+        "inverse",
+        "inverseSoft",
+        "brand",
+        "circle",
+      ],
+      table: {
+        type: {
+          summary:
+            '"transparent" | "outlined" | "soft" | "solid" | "inverse" | "inverseSoft" | "brand" | "circle"',
+        },
+      },
+    },
+    type: {
+      control: { type: "select" },
+      options: ["button", "submit", "reset"],
+      table: { type: { summary: '"button" | "submit" | "reset"' } },
+    },
+    icon: { control: false },
+    children: { control: false },
+  },
+  args: {
+    icon: <RBIcons.SvgPlusBold />,
+    size: "sm",
+    variant: "solid",
+    type: "button",
+    disabled: false,
+  },
+  render: Template,
+} as Meta<typeof RBIconButton>;
+
+export const Default: StoryComponent = {};

package/cli/storybook-dist/_stories-src/RBButton/RBInlineLabelButton.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryFn, StoryObj } from "@storybook/react";
+import { RBInlineLabelButton } from "@repo/rb-components/new_components";
+
+type StoryComponent = StoryObj<typeof RBInlineLabelButton>;
+type StoryTemplate = StoryFn<typeof RBInlineLabelButton>;
+
+const Template: StoryTemplate = (args) => <RBInlineLabelButton {...args} />;
+
+export default {
+  component: RBInlineLabelButton,
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: ["xs", "sm", "md"],
+      table: { type: { summary: '"xs" | "sm" | "md"' } },
+    },
+    variant: {
+      control: { type: "select" },
+      options: ["default", "brand"],
+      table: { type: { summary: '"default" | "brand"' } },
+    },
+    type: {
+      control: { type: "select" },
+      options: ["button", "submit"],
+      table: { type: { summary: '"button" | "submit"' } },
+    },
+    leadingIcon: { control: false },
+    trailingIcon: { control: false },
+  },
+  args: {
+    children: "버튼 라벨",
+    size: "sm",
+    variant: "default",
+    type: "button",
+    disabled: false,
+  },
+  render: Template,
+} as Meta<typeof RBInlineLabelButton>;
+
+export const Default: StoryComponent = {};

package/cli/storybook-dist/_stories-src/RBButton/RBLabelButton.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryFn, StoryObj } from "@storybook/react";
+import { RBLabelButton } from "@repo/rb-components/new_components";
+
+type StoryComponent = StoryObj<typeof RBLabelButton>;
+type StoryTemplate = StoryFn<typeof RBLabelButton>;
+
+const Template: StoryTemplate = (args) => <RBLabelButton {...args} />;
+
+export default {
+  component: RBLabelButton,
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: ["3xs", "2xs", "xs", "xs2", "sm", "md"],
+      table: {
+        type: { summary: '"3xs" | "2xs" | "xs" | "xs2" | "sm" | "md"' },
+      },
+    },
+    variant: {
+      control: { type: "select" },
+      options: [
+        "transparent",
+        "outlined",
+        "soft",
+        "solid",
+        "inverse",
+        "inverseSoft",
+        "brand",
+        "danger",
+        "dangerSoft",
+        "success",
+        "successSoft",
+      ],
+      table: {
+        type: {
+          summary:
+            '"transparent" | "outlined" | "soft" | "solid" | "inverse" | "inverseSoft" | "brand" | "danger" | "dangerSoft" | "success" | "successSoft"',
+        },
+      },
+    },
+    type: {
+      control: { type: "select" },
+      options: ["button", "submit", "reset"],
+      table: { type: { summary: '"button" | "submit" | "reset"' } },
+    },
+    leadingIcon: { control: false },
+    trailingIcon: { control: false },
+  },
+  args: {
+    children: "버튼 라벨",
+    size: "sm",
+    variant: "solid",
+    type: "button",
+    disabled: false,
+  },
+  render: Template,
+} as Meta<typeof RBLabelButton>;
+
+export const Default: StoryComponent = {};

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

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj, StoryFn } from "@storybook/react";
+import { RBDateInput } from "@repo/rb-components/new_components";
+
+type StoryComponent = StoryObj<typeof RBDateInput>;
+type StoryTemplate = StoryFn<typeof RBDateInput>;
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+export default {
+  component: RBDateInput,
+  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 RBDateInput>;
+
+const Template: StoryTemplate = (args) => {
+  return (
+    <div style={{ height: 700 }}>
+      <RBDateInput {...args} />
+    </div>
+  );
+};
+
+export const Default: StoryComponent = {
+  parameters: {
+    docs: {
+      description: {
+        story: "",
+      },
+    },
+  },
+  args: {
+    size: "md",
+    showPresets: true,
+    showFooter: true,
+  },
+  render: Template,
+};