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

package/cli/storybook-dist/_stories-src/RBInput/RBMultiRangeInput.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj, StoryFn } from "@storybook/react";
+import { RBMultiRangeInput } from "@repo/rb-components/new_components";
+
+type StoryComponent = StoryObj<typeof RBMultiRangeInput>;
+type StoryTemplate = StoryFn<typeof RBMultiRangeInput>;
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+export default {
+  component: RBMultiRangeInput,
+  tags: ["autodocs"],
+  argTypes: {
+    min: {
+      control: { type: "number" },
+      defaultValue: 0,
+    },
+    max: {
+      control: { type: "number" },
+      defaultValue: 100,
+    },
+    step: {
+      control: { type: "number" },
+      defaultValue: 1,
+    },
+    thumbSize: {
+      control: { type: "number" },
+      defaultValue: 20,
+    },
+    sliderHeight: {
+      control: { type: "number" },
+      defaultValue: 4,
+    },
+    thumbBorderColor: {
+      control: { type: "color" },
+    },
+    thumbColor: {
+      control: { type: "color" },
+    },
+    trackColor: {
+      control: { type: "color" },
+    },
+    rangeColor: {
+      control: { type: "color" },
+    },
+  },
+} as Meta<typeof RBMultiRangeInput>;
+
+const Template: StoryTemplate = (args) => {
+  return <RBMultiRangeInput {...args} />;
+};
+
+export const Default: StoryComponent = {
+  parameters: {
+    docs: {
+      description: {
+        story: "",
+      },
+    },
+  },
+  args: {
+    min: 0,
+    max: 100,
+  },
+  render: Template,
+};

package/cli/storybook-dist/_stories-src/RBInput/RBRadioBox.stories.tsx

@@ -0,0 +1,65 @@
+import { useState } from "react";
+import type { Meta, StoryFn, StoryObj } from "@storybook/react";
+
+import { RBRadioBox } from "@repo/rb-components/new_components";
+import type { RadioBoxProps } from "@repo/rb-components/new_components";
+
+type StoryComponent = StoryObj<typeof RBRadioBox>;
+type StoryTemplate = StoryFn<typeof RBRadioBox>;
+
+const Template: StoryTemplate = (args) => {
+  const list = [1, 2, 3, 4];
+  const [value, setValue] = useState<RadioBoxProps["value"]>();
+
+  const handleChange = (nextValue: string | number, name?: string) => {
+    setValue(nextValue);
+    args.handleChange?.(nextValue, name);
+  };
+
+  return (
+    <div className="space-y-3">
+      <div className="flex flex-col gap-4">
+        {list.map((num) => (
+          <RBRadioBox
+            key={num}
+            {...args}
+            name={args.name ?? "rb-radio-demo"}
+            checkValue={num}
+            value={value}
+            handleChange={handleChange}
+          >
+            {`${args.children ?? "Radio Button Dummy Text"} ${num}`}
+          </RBRadioBox>
+        ))}
+      </div>
+      <div className="text-fg-default text-xs">DATA: {String(value ?? "")}</div>
+    </div>
+  );
+};
+
+export default {
+  component: RBRadioBox,
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: ["sm", "md"],
+      table: { type: { summary: '"sm" | "md"' } },
+    },
+    disabled: { control: { type: "boolean" } },
+    children: { control: { type: "text" } },
+    checkValue: { control: false },
+    value: { control: false },
+    handleChange: { control: false },
+  },
+  args: {
+    size: "sm",
+    disabled: false,
+    children: "Radio Button Dummy Text",
+    name: "rb-radio-demo",
+    checkValue: "option-1",
+  },
+  render: Template,
+} as Meta<typeof RBRadioBox>;
+
+export const Default: StoryComponent = {};

package/cli/storybook-dist/_stories-src/RBInput/RBRadioButton.stories.tsx

@@ -0,0 +1,68 @@
+import { useState } from "react";
+import type { Meta, StoryObj, StoryFn } from "@storybook/react";
+
+import { RBRadioButton } from "@repo/rb-components/new_components";
+import type { RadioButtonProps } from "@repo/rb-components/new_components";
+
+type StoryComponent = StoryObj<typeof RBRadioButton>;
+type StoryTemplate = StoryFn<typeof RBRadioButton>;
+
+const Template: StoryTemplate = (args) => {
+  const list = [1, 2, 3, 4];
+  const [value, setValue] = useState<RadioButtonProps["value"]>();
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex flex-col gap-2">
+        {list.map((num) => (
+          <RBRadioButton
+            key={num}
+            {...args}
+            name="rb-radio-button-demo"
+            checkValue={String(num)}
+            value={value}
+            handleChange={setValue}
+          >
+            {`버튼 라벨 ${num}`}
+          </RBRadioButton>
+        ))}
+      </div>
+      <div className="text-fg-default text-xs">DATA: {String(value ?? "")}</div>
+    </div>
+  );
+};
+
+export default {
+  component: RBRadioButton,
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: ["sm", "md"],
+      table: { type: { summary: '"sm" | "md"' } },
+    },
+    disabled: { control: { type: "boolean" } },
+    children: { control: false },
+    name: { control: false },
+    checkValue: { control: false },
+    value: { control: false },
+    handleChange: { control: false },
+  },
+  args: {
+    size: "sm",
+    disabled: false,
+  },
+  render: Template,
+} as Meta<typeof RBRadioButton>;
+
+export const Default: StoryComponent = {
+  parameters: {
+    docs: {
+      description: {
+        story: "",
+      },
+    },
+  },
+  args: {},
+  render: Template,
+};

package/cli/storybook-dist/_stories-src/RBInput/RBSelectBox.stories.tsx

@@ -0,0 +1,216 @@
+import type { Meta, StoryFn, StoryObj } from "@storybook/react";
+import { expect, userEvent, waitFor, within } from "@storybook/test";
+
+import { RBSelectBox, Option } from "@repo/rb-components/new_components";
+import { VStack } from "@repo/rb-components";
+
+type StoryComponent = StoryObj<typeof RBSelectBox>;
+type StoryTemplate = StoryFn<typeof RBSelectBox>;
+
+const options = Array.from({ length: 40 }, (_, i) => ({
+  value: `option-${i + 1}`,
+  label: `옵션 ${i + 1}`,
+}));
+
+const Template: StoryTemplate = (args) => {
+  return (
+    <div className="min-h-80 overflow-visible">
+      <RBSelectBox {...args} className="w-96">
+        {/* <Option value="option-1">옵션 1</Option>
+        <Option value="option-2">옵션 2</Option>
+        <Option value="option-3">옵션 3</Option>
+        <Option value="option-4" disabled>
+          옵션 4 (disabled)
+        </Option> */}
+        {options.map(({ value, label }) => (
+          <Option key={value} value={value}>
+            {label}
+          </Option>
+        ))}
+      </RBSelectBox>
+    </div>
+  );
+};
+
+const HasInfoListTemplate: StoryTemplate = (args) => {
+  return (
+    <div className="min-h-80 overflow-visible">
+      <RBSelectBox {...args} className="w-96">
+        <Option value="option-1" label="옵션 1" className="h-12">
+          <VStack>
+            옵션 1
+            <span className="typo-compact-xs-normal">
+              Additional Information goes here
+            </span>
+          </VStack>
+        </Option>
+        <Option value="option-2" label="옵션 2" className="h-12">
+          <VStack>
+            옵션 2
+            <span className="typo-compact-xs-normal">
+              Additional Information goes here
+            </span>
+          </VStack>
+        </Option>
+        <Option value="option-3" label="옵션 3" disabled className="h-12">
+          <VStack>
+            옵션 3
+            <span className="typo-compact-xs-normal">
+              Additional Information goes here
+            </span>
+          </VStack>
+        </Option>
+      </RBSelectBox>
+    </div>
+  );
+};
+
+export default {
+  component: RBSelectBox,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: ["xs2", "sm", "md", "lg"],
+    },
+    maxDropBoxHeight: { control: { type: "number" } },
+    disabled: { control: { type: "boolean" } },
+    readOnly: { control: { type: "boolean" } },
+    search: { control: { type: "boolean" } },
+    keepDropDown: { control: { type: "boolean" } },
+    showCloseBtn: { control: { type: "boolean" } },
+    whenScrollCloseDropBox: { control: { type: "boolean" } },
+    enableModal: { control: { type: "boolean" } },
+    error: { control: { type: "boolean" } },
+    searchPlaceholder: { control: { type: "text" } },
+    mobileLabel: { control: { type: "text" } },
+    placeholder: { control: { type: "text" } },
+    selectArrow: { control: false, table: { disable: true } },
+    noDataMsg: { control: false, table: { disable: true } },
+    onClick: { action: false, control: false, table: { disable: true } },
+    onChange: { action: "onChange", control: false },
+    handleChange: { action: "handleChange", control: false },
+  },
+  args: {
+    size: "md",
+    maxDropBoxHeight: 200,
+    disabled: false,
+    readOnly: false,
+    placeholder: "placeholder",
+    search: false,
+    keepDropDown: false,
+    showCloseBtn: false,
+    whenScrollCloseDropBox: false,
+    enableModal: false,
+    error: false,
+    searchPlaceholder: "Search",
+    onClick: undefined,
+  },
+  render: Template,
+} as Meta<typeof RBSelectBox>;
+
+// RBSelectBox는 마운트 시점 기준 300ms 이내의 클릭을 더블클릭 방지 가드로 무시하므로
+// play 함수의 첫 클릭 전에 가드 구간을 지나도록 대기
+const waitPastClickGuard = () =>
+  new Promise((resolve) => setTimeout(resolve, 350));
+
+export const Default: StoryComponent = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const doc = canvasElement.ownerDocument;
+
+    await waitPastClickGuard();
+    await userEvent.click(canvas.getByText("placeholder"));
+
+    const dropBox = await waitFor(() => {
+      const el = doc.querySelector('[data-slot="select-drop-box"]');
+      if (!el) throw new Error("drop box not opened");
+      return el as HTMLElement;
+    });
+
+    const option = within(dropBox).getByText("옵션 3");
+    await userEvent.click(option);
+
+    await waitFor(() => {
+      expect(
+        canvasElement.querySelector('[data-slot="select-box-value"] span')
+          ?.textContent,
+      ).toBe("옵션 3");
+      expect(doc.querySelector('[data-slot="select-drop-box"]')).toBeNull();
+    });
+  },
+};
+
+export const HasInfoList: StoryComponent = {
+  args: {
+    value: "option-2",
+  },
+  render: HasInfoListTemplate,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const doc = canvasElement.ownerDocument;
+    // DropBox가 열려있을 때는 옵션 목록에도 같은 라벨 텍스트가 존재해
+    // canvas.getByText가 trigger와 옵션을 동시에 매칭해버리므로, trigger는
+    // select-box-value 슬롯을 직접 조회해 값이 바뀌었는지 확인한다
+    const getTriggerText = () =>
+      canvasElement.querySelector('[data-slot="select-box-value"] span')
+        ?.textContent;
+
+    await waitPastClickGuard();
+    await userEvent.click(canvas.getByText("옵션 2"));
+
+    const dropBox = await waitFor(() => {
+      const el = doc.querySelector('[data-slot="select-drop-box"]');
+      if (!el) throw new Error("drop box not opened");
+      return el as HTMLElement;
+    });
+
+    const optionEls = within(dropBox).getAllByRole("button");
+    const disabledOption = optionEls.find((el) =>
+      el.textContent?.startsWith("옵션 3"),
+    );
+    expect(disabledOption?.textContent).toContain(
+      "Additional Information goes here",
+    );
+
+    // disabled 옵션은 클릭해도 선택이 바뀌지 않고 DropBox도 닫히지 않음
+    await userEvent.click(disabledOption!);
+    expect(getTriggerText()).toBe("옵션 2");
+    expect(doc.querySelector('[data-slot="select-drop-box"]')).not.toBeNull();
+
+    const enabledOption = optionEls.find((el) =>
+      el.textContent?.startsWith("옵션 1"),
+    );
+    await userEvent.click(enabledOption!);
+
+    await waitFor(() => {
+      expect(getTriggerText()).toBe("옵션 1");
+      expect(doc.querySelector('[data-slot="select-drop-box"]')).toBeNull();
+    });
+  },
+};
+
+export const MaxDropBoxHeight: StoryComponent = {
+  args: {
+    maxDropBoxHeight: 120,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await waitPastClickGuard();
+    await userEvent.click(canvas.getByText("placeholder"));
+
+    const doc = canvasElement.ownerDocument;
+    await waitFor(() => {
+      const dropBox = doc.querySelector(
+        '[data-slot="select-drop-box"]',
+      ) as HTMLElement;
+
+      expect(dropBox).toBeTruthy();
+      expect(dropBox.getBoundingClientRect().height).toBeLessThanOrEqual(121);
+    });
+  },
+};

package/cli/storybook-dist/_stories-src/RBInput/RBSideNumberInput.stories.tsx

@@ -0,0 +1,90 @@
+import type { Meta, StoryFn, StoryObj } from "@storybook/react";
+import {
+  RBSideNumberInput,
+  RBTextField,
+} from "@repo/rb-components/new_components";
+
+type StoryComponent = StoryObj<typeof RBSideNumberInput>;
+type StoryTemplate = StoryFn<typeof RBSideNumberInput>;
+
+const Template: StoryTemplate = (args) => <RBSideNumberInput {...args} />;
+
+export default {
+  component: RBSideNumberInput,
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: ["xs2", "sm", "md", "lg"],
+      table: { type: { summary: '"xs2" | "sm" | "md" | "lg"' } },
+    },
+    variant: {
+      control: { type: "select" },
+      options: ["default", "success"],
+      table: {
+        type: {
+          summary: '"default" | "success"',
+        },
+      },
+    },
+    step: {
+      control: { type: "number" },
+    },
+    increaseStep: {
+      control: { type: "number" },
+    },
+    decreaseStep: {
+      control: { type: "number" },
+    },
+    min: {
+      control: { type: "number" },
+    },
+    max: {
+      control: { type: "number" },
+    },
+    maxLength: {
+      control: { type: "number" },
+    },
+    digit: {
+      control: { type: "number" },
+    },
+    isDirect: {
+      control: { type: "boolean" },
+    },
+    detectDobleClick: {
+      control: { type: "boolean" },
+    },
+    type: {
+      control: { type: "select" },
+      options: ["number", "nx-number"],
+    },
+    disabled: { control: { type: "boolean" } },
+    inputDisabled: { control: { type: "boolean" } },
+    readOnly: { control: { type: "boolean" } },
+  },
+  args: {
+    size: "md",
+    variant: "default",
+    defaultValue: 0.5,
+    step: 0.1,
+    isDirect: true,
+    detectDobleClick: false,
+  },
+  render: Template,
+} as Meta<typeof RBSideNumberInput>;
+
+export const Default: StoryComponent = {};
+
+export const WithTextField: StoryComponent = {
+  render: (args) => (
+    <RBTextField
+      label="Node Name"
+      description="노드 이름을 입력하세요."
+      required
+      helperText="중복되지 않는 이름을 사용하세요."
+      helperTone="default"
+    >
+      <RBSideNumberInput {...args} />
+    </RBTextField>
+  ),
+};

package/cli/storybook-dist/_stories-src/RBInput/RBText/RBTextArea.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryFn, StoryObj } from "@storybook/react";
+import { RBTextField, RBTextArea } from "@repo/rb-components/new_components";
+
+type StoryComponent = StoryObj<typeof RBTextArea>;
+type StoryTemplate = StoryFn<typeof RBTextArea>;
+
+const Template: StoryTemplate = (args) => (
+  <div className="bg-alt-2 py-10">
+    <RBTextArea {...args} />
+  </div>
+);
+
+export default {
+  component: RBTextArea,
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: { type: "select" },
+      options: ["default", "success"],
+      table: { type: { summary: '"default" | "success"' } },
+    },
+  },
+  args: {
+    variant: "default",
+    disabled: false,
+    readOnly: false,
+  },
+  render: Template,
+} as Meta<typeof RBTextArea>;
+
+export const Default: StoryComponent = {};
+
+export const WithTextField: StoryComponent = {
+  render: (args) => (
+    <RBTextField
+      label="Description"
+      description="상세 설명을 입력하세요."
+      required
+      helperText="최대 500자까지 입력할 수 있습니다."
+      helperTone="default"
+    >
+      <RBTextArea {...args} placeholder="내용을 입력해주세요." />
+    </RBTextField>
+  ),
+};

package/cli/storybook-dist/_stories-src/RBInput/RBText/RBTextInput.stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta, StoryFn, StoryObj } from "@storybook/react";
+import { RBTextField, RBTextInput } from "@repo/rb-components/new_components";
+
+type StoryComponent = StoryObj<typeof RBTextInput>;
+type StoryTemplate = StoryFn<typeof RBTextInput>;
+
+const Template: StoryTemplate = (args) => (
+  <div className="bg-alt-2 py-10">
+    <RBTextInput {...args} />
+  </div>
+);
+
+export default {
+  component: RBTextInput,
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: ["xs2", "sm", "md", "lg"],
+      table: { type: { summary: '"xs2" | "sm" | "md" | "lg"' } },
+    },
+    variant: {
+      control: { type: "select" },
+      options: ["default", "success"],
+      table: { type: { summary: '"default" | "success"' } },
+    },
+  },
+  args: {
+    variant: "default",
+    disabled: false,
+    readOnly: false,
+  },
+  render: Template,
+} as Meta<typeof RBTextInput>;
+
+export const Default: StoryComponent = {};
+
+export const WithTextField: StoryComponent = {
+  render: (args) => (
+    <RBTextField
+      label="Node Name"
+      description="노드 이름을 입력하세요."
+      required
+      helperText="중복되지 않는 이름을 사용하세요."
+      helperTone="default"
+    >
+      <RBTextInput {...args} placeholder="node_053" />
+    </RBTextField>
+  ),
+};

package/cli/storybook-dist/_stories-src/RBInput/RBTextField.stories.tsx

@@ -0,0 +1,102 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import {
+  Option,
+  RBSelectBox,
+  RBSideNumberInput,
+  RBTextArea,
+  RBTextField,
+  RBTextInput,
+} from "@repo/rb-components/new_components";
+
+type StoryComponent = StoryObj<typeof RBTextField>;
+
+export default {
+  component: RBTextField,
+  tags: ["autodocs"],
+  args: {
+    label: "Node Name",
+    description: "노드 이름을 입력하세요.",
+    required: false,
+    helperText: "중복되지 않는 이름을 사용하세요.",
+    helperTone: "default",
+  },
+  argTypes: {
+    helperTone: {
+      control: { type: "select" },
+      options: ["default", "error", "success"],
+      table: { type: { summary: '"default" | "error" | "success"' } },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[360px]">
+        <Story />
+      </div>
+    ),
+  ],
+} as Meta<typeof RBTextField>;
+
+export const WithTextInput: StoryComponent = {
+  render: (args) => (
+    <RBTextField {...args}>
+      <RBTextInput placeholder="node_053" />
+    </RBTextField>
+  ),
+};
+
+export const WithTextArea: StoryComponent = {
+  args: {
+    label: "Description",
+    description: "상세 설명을 입력하세요.",
+    helperText: "최대 500자까지 입력할 수 있습니다.",
+  },
+  render: (args) => (
+    <RBTextField {...args}>
+      <RBTextArea placeholder="내용을 입력해주세요." />
+    </RBTextField>
+  ),
+};
+
+export const WithSideNumberInput: StoryComponent = {
+  args: {
+    label: "Threshold",
+    description: "숫자 값을 입력하세요.",
+    helperText: "증가/감소 버튼으로도 조절할 수 있습니다.",
+  },
+  render: (args) => (
+    <RBTextField {...args}>
+      <RBSideNumberInput value="0.5" step={0.1} isDirect />
+    </RBTextField>
+  ),
+};
+
+export const WithSelectBox: StoryComponent = {
+  args: {
+    label: "Category",
+    description: "옵션을 선택하세요.",
+    helperText: "필요한 분류를 선택해주세요.",
+  },
+  render: (args) => (
+    <RBTextField {...args}>
+      <RBSelectBox placeholder="카테고리 선택">
+        <Option value="sensor">Sensor</Option>
+        <Option value="network">Network</Option>
+        <Option value="power">Power</Option>
+      </RBSelectBox>
+    </RBTextField>
+  ),
+};
+
+export const Error: StoryComponent = {
+  args: {
+    helperText: "이미 사용 중인 이름입니다.",
+    helperTone: "error",
+    required: true,
+  },
+  render: (args) => (
+    <RBTextField {...args}>
+      <RBTextInput placeholder="node_053" />
+    </RBTextField>
+  ),
+};