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

package/cli/storybook-dist/_stories-src/RBIcons/RBProgramIcons.stories.tsx

@@ -0,0 +1,116 @@
+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 RBProgramIcons from "@repo/rb-components/new_components/assets/program-icons";
+import { useRainbowUi } from "@repo/rb-components/provider";
+import { copyClipboard } from "@repo/rb-utils/browserUtils";
+import { cn } from "@repo/rb-utils/parserUtils";
+
+type IconExport =
+  | string
+  | ((props: React.SVGAttributes<SVGSVGElement>) => React.ReactElement);
+
+const allIcons = Object.entries(RBProgramIcons)
+  .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 { theme } = useRainbowUi();
+  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">
+            RBProgramIcons
+          </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={cn(
+                  theme === "light" ? "text-fill-subtler" : "text-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/program-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 = {};

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,119 @@
+import type { Meta, StoryFn, StoryObj } from "@storybook/react";
+
+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"],
+    },
+    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",
+    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>;
+
+export const Default: StoryComponent = {};
+
+export const HasInfoList: StoryComponent = {
+  args: {
+    value: "option-2",
+  },
+  render: HasInfoListTemplate,
+};

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