@rainbow-robotics/muscat-plugin-kit 1.10.1-dev.1 → 1.10.1

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

@@ -1,68 +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,
-};
+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

@@ -1,216 +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);
-    });
-  },
-};
+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);
+    });
+  },
+};