@rainbow-robotics/muscat-plugin-kit 0.1.2-dev.5 → 0.1.2-dev.51

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

@@ -0,0 +1,117 @@
+import { useState } from "react";
+import type { ComponentProps, ReactElement } from "react";
+import type { Meta, StoryFn, StoryObj } from "@storybook/react";
+
+import { RBSimpleToast } from "@repo/rb-components/new_components";
+import {
+  RBToastContainer,
+  toast,
+  type ToastType,
+  type ToastVariant,
+} from "@repo/rb-modules/RBToast";
+
+type StoryArgs = ComponentProps<typeof RBToastContainer> & {
+  variant: ToastVariant;
+  type: ToastType;
+  icon?: ReactElement;
+  actionLabel?: string;
+  handleActionClick?: () => void;
+  closeOnActionClick?: boolean;
+};
+
+type StoryComponent = StoryObj<StoryArgs>;
+type StoryTemplate = StoryFn<StoryArgs>;
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+export default {
+  component: RBToastContainer,
+  tags: ["autodocs"],
+  args: {
+    position: "top-left",
+    type: "basic",
+    variant: "default",
+    actionLabel: "",
+    closeOnActionClick: true,
+  },
+  argTypes: {
+    position: {
+      control: { type: "select" },
+      options: [
+        "top-center",
+        "top-left",
+        "top-right",
+        "bottom-center",
+        "bottom-left",
+        "bottom-right",
+      ],
+    },
+    variant: {
+      control: { type: "select" },
+      options: ["default", "danger", "warning", "caution", "success", "copy"],
+    },
+    type: {
+      control: { type: "select" },
+      options: ["basic", "alert"],
+    },
+    icon: { control: false },
+    actionLabel: {
+      control: { type: "text" },
+      description: "액션 버튼 라벨",
+    },
+    handleActionClick: {
+      control: false,
+      description: "액션 버튼 클릭 시 실행할 함수",
+    },
+    closeOnActionClick: {
+      control: { type: "boolean" },
+      description: "액션 버튼 클릭 뒤 토스트를 닫을지 여부",
+    },
+  },
+} as Meta<StoryArgs>;
+
+const Template: StoryTemplate = (args) => {
+  const [count, setCount] = useState(0);
+
+  const handleClick = () => {
+    setCount(count + 1);
+    toast.openToast({
+      title: `Toast Title ${count}`,
+      content: `This is a toast message long test long test long test long test long test long test.`,
+      icon: args.icon,
+      actionLabel: args.actionLabel || undefined,
+      handleActionClick: args.actionLabel
+        ? () => console.info("toast action clicked")
+        : undefined,
+      closeOnActionClick: args.closeOnActionClick,
+      type: args.type as ToastType,
+      variant: args.variant as ToastVariant,
+      position: args.position,
+      duration: args.duration,
+    });
+  };
+
+  return (
+    <div className="border-danger flex h-100 flex-col items-center justify-center border-1">
+      <RBToastContainer
+        position={args.position}
+        duration={args.duration}
+        toastComponent={RBSimpleToast}
+      />
+      <button onClick={handleClick} className="text-fg-default">
+        open toast
+      </button>
+    </div>
+  );
+};
+
+export const Default: StoryComponent = {
+  parameters: {
+    docs: {
+      description: {
+        story: "",
+      },
+    },
+  },
+  args: {},
+  render: Template,
+};

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

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj, StoryFn } from "@storybook/react";
+import { RBTooltip } from "@repo/rb-components/new_components";
+
+type StoryComponent = StoryObj<typeof RBTooltip>;
+type StoryTemplate = StoryFn<typeof RBTooltip>;
+
+const count = 0;
+
+export default {
+  component: RBTooltip,
+  tags: ["autodocs"],
+  argTypes: {
+    place: {
+      control: "radio",
+      options: ["top", "left", "bottom", "right"],
+      defaultValue: "bottom",
+    },
+    tooltipColor: {
+      control: "color",
+    },
+    tooltipTextColor: {
+      control: "color",
+    },
+  },
+} as Meta<typeof RBTooltip>;
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const Template: StoryTemplate = (args) => {
+  return (
+    <div className="flex items-center justify-center p-30">
+      <button
+        className="text-fg-default border-danger border-1"
+        id={`${args.anchorId}${count}`}
+      >
+        Tooltip
+      </button>
+      <RBTooltip {...args} anchorId={`${args.anchorId}${count}`} />
+    </div>
+  );
+};
+
+export const Default: StoryComponent = {
+  args: {
+    anchorId: "tooltip-anchor",
+    children: "Tooltip Content",
+    events: ["hover"],
+    place: "top",
+  },
+  render: Template,
+};

package/cli/storybook-dist/_stories-src/loading/RBSpinner.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj, StoryFn } from "@storybook/react";
+import { RBSpinner } from "@repo/rb-components/new_components";
+
+type StoryComponent = StoryObj<typeof RBSpinner>;
+type StoryTemplate = StoryFn<typeof RBSpinner>;
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+export default {
+  component: RBSpinner,
+  tags: ["autodocs"],
+} as Meta<typeof RBSpinner>;
+
+const Template: StoryTemplate = (args) => {
+  return <RBSpinner {...args} />;
+};
+
+export const Default: StoryComponent = {
+  parameters: {
+    docs: {
+      description: {
+        story: "",
+      },
+    },
+  },
+  args: {
+    size: "1.5rem",
+    className: "text-fg-default",
+  },
+  render: Template,
+};

package/cli/storybook-dist/_stories-src/nx-button/NxButton.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj, StoryFn } from "@storybook/react";
+import NxButton from "@nexus/components/shared/button/NxButton";
+
+type StoryComponent = StoryObj<typeof NxButton>;
+type StoryTemplate = StoryFn<typeof NxButton>;
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+export default {
+  component: NxButton,
+  tags: ["autodocs"],
+  argTypes: {
+    children: {
+      control: "text",
+      description: "버튼에 표시될 내용",
+      table: {
+        type: {
+          summary: "string | ReactNode",
+        },
+      },
+    },
+    size: {
+      control: { type: "select" },
+      options: ["default", "sm", "lg", "icon"],
+      description: "버튼 크기",
+      table: {
+        type: {
+          summary: `"default" | "sm" | "lg" | "icon"`,
+        },
+        defaultValue: {
+          summary: "default",
+        },
+      },
+    },
+  },
+} as Meta<typeof NxButton>;
+
+const Template: StoryTemplate = (args) => {
+  return <NxButton {...args} />;
+};
+
+export const Default: StoryComponent = {
+  parameters: {
+    docs: {
+      description: {
+        story: "",
+      },
+    },
+  },
+  args: {
+    children: "NexusButton",
+    size: "default",
+  },
+  render: Template,
+};

package/cli/storybook-dist/_stories-src/nx-button/NxPointerHoldButton.stories.tsx

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj, StoryFn } from "@storybook/react";
+import NxPointerHoldButton from "@nexus/components/shared/button/NxPointerHoldButton";
+
+type StoryComponent = StoryObj<typeof NxPointerHoldButton>;
+type StoryTemplate = StoryFn<typeof NxPointerHoldButton>;
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+export default {
+  component: NxPointerHoldButton,
+  tags: ["autodocs"],
+  argTypes: {
+    children: {
+      control: "text",
+      description: "버튼에 표시될 내용",
+      table: {
+        type: {
+          summary: "string | ReactNode",
+        },
+      },
+    },
+    size: {
+      control: { type: "select" },
+      options: ["default", "sm", "lg", "icon"],
+      description: "버튼 크기",
+      table: {
+        type: {
+          summary: `"default" | "sm" | "lg" | "icon"`,
+        },
+        defaultValue: {
+          summary: "default",
+        },
+      },
+    },
+    disabled: {
+      type: "boolean",
+    },
+  },
+} as Meta<typeof NxPointerHoldButton>;
+
+const Template: StoryTemplate = (args) => {
+  return <NxPointerHoldButton {...args} />;
+};
+
+export const Default: StoryComponent = {
+  parameters: {
+    docs: {
+      description: {
+        story: "",
+      },
+    },
+  },
+  args: {
+    children: "Hold Button",
+    size: "sm",
+  },
+  render: Template,
+};

package/cli/storybook-dist/_stories-src/nx-icons/NxIcons.stories.tsx

@@ -0,0 +1,48 @@
+import type React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import * as Icons from "@nexus/assets/icons";
+import { copyClipboard } from "@repo/rb-utils/browserUtils";
+
+const meta: Meta = {
+  title: "muscat/nx-icons",
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+const handleCopy = (text: string) => {
+  copyClipboard({ text });
+  alert("복사가 완료되었습니다.");
+};
+
+const toIconUsage = (name: string) => `<${name} className="size-5" />`;
+
+const IconGrid = () => {
+  const entries = Object.entries(Icons).filter(
+    ([, Comp]) => typeof Comp === "function",
+  ) as Array<[string, React.ComponentType<React.SVGAttributes<SVGSVGElement>>]>;
+
+  return (
+    <div className="grid grid-cols-3 gap-3 md:grid-cols-6 xl:grid-cols-8">
+      {entries.map(([name, Icon]) => (
+        <button
+          key={name}
+          type="button"
+          className="border-default bg-default text-default flex cursor-copy flex-col items-center gap-2 rounded-lg border p-3"
+          onClick={() => handleCopy(toIconUsage(name))}
+          title={`Copy ${toIconUsage(name)}`}
+        >
+          <Icon className="size-5" />
+          <span className="text-subtle text-center text-sm break-all">
+            {toIconUsage(name)}
+          </span>
+        </button>
+      ))}
+    </div>
+  );
+};
+
+export const Preview: Story = {
+  render: () => <IconGrid />,
+};

package/cli/storybook-dist/_stories-src/nx-inputs/NxNumberInput.stories.tsx

@@ -0,0 +1,103 @@
+import type { Meta, StoryObj, StoryFn } from "@storybook/react";
+import NxNumberInput from "@nexus/components/shared/inputs/NxNumberInput";
+import { SideNumberInput } from "@sb/index";
+
+type StoryComponent = StoryObj<typeof SideNumberInput>;
+type StoryTemplate = StoryFn<typeof NxNumberInput>;
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+export default {
+  component: NxNumberInput,
+  tags: ["autodocs"],
+  argTypes: {
+    value: {
+      type: "string",
+    },
+    step: {
+      type: "number",
+    },
+    increaseStep: {
+      type: "number",
+    },
+    decreaseStep: {
+      type: "number",
+    },
+    error: {
+      type: "boolean",
+    },
+    maxLength: {
+      control: "text",
+      description: "string | number",
+    },
+    digit: {
+      type: "number",
+    },
+    isDirect: {
+      control: { type: "boolean" },
+      description: "직접 입력 허용 여부",
+      table: {
+        defaultValue: { summary: "true" },
+      },
+    },
+    detectDobleClick: {
+      control: { type: "boolean" },
+      description: "더블 클릭 감지 여부",
+      table: {
+        defaultValue: { summary: "false" },
+      },
+    },
+    readOnly: {
+      type: "boolean",
+    },
+    increaseElement: {
+      description: "증가 버튼에 표시될 아이콘 컴포넌트",
+      control: false,
+      table: {
+        type: {
+          summary: "ReactElement",
+        },
+      },
+    },
+    decreaseElement: {
+      description: "감소 버튼에 표시될 아이콘 컴포넌트",
+      control: false,
+      table: {
+        type: {
+          summary: "ReactElement",
+        },
+      },
+    },
+    handleChange: {
+      action: "onChange",
+      description: "값이 변경될 때 호출되는 함수",
+      table: {
+        type: {
+          summary:
+            "(value: string, name?: string, option?: ChangeOption) => void",
+          detail: `
+- value: 변경된 값
+- name?: 입력 필드(input) name 값
+- option?: up/down 버튼을 눌렀을 경우 전달
+  - type: 'up' | 'down'
+`.trim(),
+        },
+      },
+    },
+  },
+} as Meta<typeof SideNumberInput>;
+
+const Template: StoryTemplate = (args) => {
+  return <NxNumberInput {...args} />;
+};
+
+export const Default: StoryComponent = {
+  parameters: {
+    docs: {
+      description: {
+        story: "",
+      },
+    },
+  },
+  args: {},
+  render: Template,
+};

package/cli/storybook-dist/_stories-src/nx-inputs/NxRangeInput.stories.tsx

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

package/cli/storybook-dist/_stories-src/nx-inputs/NxSelectBox.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj, StoryFn } from "@storybook/react";
+import NxSelectBox from "@nexus/components/shared/inputs/NxSelectBox";
+import { SelectBox, Option } from "@sb/index";
+
+type StoryComponent = StoryObj<typeof SelectBox>;
+type StoryTemplate = StoryFn<typeof NxSelectBox>;
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+export default {
+  component: NxSelectBox,
+  tags: ["autodocs"],
+  argTypes: {
+    value: {
+      control: "text",
+      description: "string | number",
+    },
+    children: {
+      control: false,
+      description: "Option 컴포넌트를 children으로 전달",
+    },
+    keepDropDown: {
+      type: "boolean",
+      description: "Option 선택 후 DropBox를 닫을지 유지할지 여부",
+    },
+    error: {
+      type: "boolean",
+    },
+    onChange: {
+      action: "onChange",
+      description: "값이 변경될 때 호출되는 함수",
+      table: {
+        type: {
+          summary: `(
+              e: ChangeEvent<HTMLInputElement> | { target: HTMLInputElement },
+            ) => void`,
+          detail: `
+- e: 변경된 value의 ChangeEvent. e.target.value로 변경하려는 value값을 가져옴
+`.trim(),
+        },
+      },
+    },
+  },
+} as Meta<typeof SelectBox>;
+
+const Template: StoryTemplate = (args) => {
+  return (
+    <NxSelectBox {...args}>
+      <Option value="a">Option A</Option>
+      <Option value="b">Option B</Option>
+      <Option value="c" disabled>
+        Option C
+      </Option>
+    </NxSelectBox>
+  );
+};
+
+export const Default: StoryComponent = {
+  parameters: {
+    docs: {
+      description: {
+        story: "",
+      },
+    },
+  },
+  args: { value: "a" },
+  render: Template,
+};

package/cli/storybook-dist/_stories-src/nx-inputs/NxSlideRange.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj, StoryFn } from "@storybook/react";
+import NxSlideRange from "@nexus/components/shared/inputs/NxSlideRange";
+import { ShadSlider } from "@repo/rb-components/shadcn/ui";
+
+type StoryComponent = StoryObj<typeof ShadSlider>;
+type StoryTemplate = StoryFn<typeof NxSlideRange>;
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+export default {
+  component: NxSlideRange,
+  tags: ["autodocs"],
+  argTypes: {
+    min: {
+      control: "number",
+    },
+    max: {
+      control: "number",
+    },
+    trackClassName: {
+      type: "string",
+    },
+    rangeClassName: {
+      type: "string",
+    },
+    thumbClassName: {
+      type: "string",
+    },
+  },
+} as Meta<typeof ShadSlider>;
+
+const Template: StoryTemplate = (args) => {
+  return <NxSlideRange {...args} />;
+};
+
+export const Default: StoryComponent = {
+  parameters: {
+    docs: {
+      description: {
+        story: "",
+      },
+    },
+  },
+  args: { min: 0, max: 100 },
+  render: Template,
+};

package/cli/storybook-dist/_stories-src/nx-inputs/NxSwitch.stories.tsx

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

package/cli/storybook-dist/_stories-src/nx-inputs/NxTextArea.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj, StoryFn } from "@storybook/react";
+import NxTextArea from "@nexus/components/shared/inputs/NxTextArea";
+import { TextArea } from "@sb/index";
+
+type StoryComponent = StoryObj<typeof TextArea>;
+type StoryTemplate = StoryFn<typeof NxTextArea>;
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+export default {
+  component: NxTextArea,
+  tags: ["autodocs"],
+  argTypes: {
+    maxLength: {
+      type: "number",
+    },
+    error: {
+      type: "boolean",
+    },
+    info: {
+      type: "boolean",
+    },
+    handleChange: {
+      action: "onChange",
+      description: "값이 변경될 때 호출되는 함수",
+      table: {
+        type: {
+          summary: `(value: string, name?: string) => void`,
+        },
+      },
+    },
+  },
+} as Meta<typeof TextArea>;
+
+const Template: StoryTemplate = (args) => {
+  return <NxTextArea {...args} />;
+};
+
+export const Default: StoryComponent = {
+  parameters: {
+    docs: {
+      description: {
+        story: "",
+      },
+    },
+  },
+  args: {},
+  render: Template,
+};