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

package/cli/storybook-dist/_stories-src/RBShadcn/RBToggleGroup/RBToggleGroup.stories.tsx

@@ -0,0 +1,84 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import {
+  RBIcons,
+  RBToggleGroup,
+  RBToggleGroupItem,
+} from "@repo/rb-components/new_components";
+
+type ToggleGroupStoryArgs = {
+  orientation?: "horizontal" | "vertical";
+  separated?: boolean;
+  stretched?: boolean;
+};
+
+const meta: Meta<ToggleGroupStoryArgs> = {
+  component: RBToggleGroup,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    orientation: {
+      control: "select",
+      options: ["horizontal", "vertical"],
+    },
+    separated: {
+      control: "boolean",
+    },
+    stretched: {
+      control: "boolean",
+    },
+  },
+  args: {
+    orientation: "horizontal",
+    separated: false,
+    stretched: false,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<ToggleGroupStoryArgs>;
+
+export const Playground: Story = {
+  args: {
+    orientation: "horizontal",
+    separated: false,
+    stretched: false,
+  },
+  render: function Render(args) {
+    const [value, setValue] = useState<string>("left");
+
+    return (
+      <RBToggleGroup
+        type="single"
+        orientation={args.orientation}
+        separated={args.separated}
+        stretched={args.stretched}
+        value={value}
+        onValueChange={(nextValue: string) => {
+          if (nextValue) setValue(nextValue);
+        }}
+        className={args.stretched ? "w-[360px]" : undefined}
+      >
+        <RBToggleGroupItem
+          value="left"
+          aria-label="왼쪽 정렬"
+          icon={<RBIcons.SvgListChecksBold />}
+        />
+        <RBToggleGroupItem
+          value="center"
+          aria-label="가운데 정렬"
+          icon={<RBIcons.SvgBulletSolid />}
+        />
+        <RBToggleGroupItem
+          value="right"
+          aria-label="오른쪽 정렬"
+          icon={<RBIcons.SvgBoardSolid />}
+        />
+      </RBToggleGroup>
+    );
+  },
+};

package/cli/storybook-dist/_stories-src/RBTab/RBChipTab.stories.tsx

@@ -0,0 +1,102 @@
+import { useEffect, useState } from "react";
+import type { Meta, StoryObj, StoryFn } from "@storybook/react";
+
+import { RBChipTab } from "@repo/rb-components/new_components";
+import type { ChipTabProps } from "@repo/rb-components/new_components";
+
+type StoryComponent = StoryObj<typeof RBChipTab>;
+type StoryTemplate = StoryFn<typeof RBChipTab>;
+
+const baseTabItems: ChipTabProps["tabItems"] = Array.from({ length: 8 }).map(
+  (_, i) => ({
+    key: i + 1,
+    label: "Menu",
+  }),
+);
+
+const Template: StoryTemplate = (args) => {
+  const items = args.tabItems ?? baseTabItems;
+  const [activeKey, setActiveKey] = useState<string | number>(
+    args.activeKey ?? items?.[0]?.key ?? 1,
+  );
+
+  useEffect(() => {
+    setActiveKey(args.activeKey ?? items?.[0]?.key ?? 1);
+  }, [args.activeKey, items]);
+
+  const handleChange = (key: string | number, name?: string) => {
+    setActiveKey(key);
+    args.handleChange?.(key, name as string);
+  };
+
+  return (
+    <RBChipTab {...args} activeKey={activeKey} handleChange={handleChange} />
+  );
+};
+
+export default {
+  component: RBChipTab,
+  tags: ["autodocs"],
+  argTypes: {
+    className: { control: { type: "text" } },
+    size: {
+      control: { type: "select" },
+      options: ["sm", "md", "lg"],
+      table: { type: { summary: '"sm" | "md" | "lg"' } },
+    },
+    tabItems: { control: { type: "object" } },
+    activeKey: { control: { type: "number" } },
+    name: { control: { type: "text" } },
+    slider: { control: false },
+    disabled: { control: { type: "boolean" } },
+    destroyInactiveTabPanel: { control: { type: "boolean" } },
+    tabNavScrollRef: { table: { disable: true } },
+    swipeContent: { control: { type: "boolean" } },
+    rippleOption: { control: { type: "object" } },
+    tabBtnClassName: { control: { type: "text" } },
+    useDefaultItemStyle: { table: { disable: true } },
+    tabNavClassName: { control: { type: "text" } },
+    handleChange: { table: { disable: true } },
+    onClick: { table: { disable: true } },
+  },
+  args: {
+    size: "md",
+    tabItems: baseTabItems,
+    disabled: false,
+    destroyInactiveTabPanel: true,
+    activeKey: 1,
+  },
+  render: Template,
+} as Meta<typeof RBChipTab>;
+
+export const Default: StoryComponent = {};
+
+export const WithContent: StoryComponent = {
+  args: {
+    activeKey: 1,
+    tabItems: [
+      {
+        key: 1,
+        label: "Overview",
+        children: (
+          <div className="bg-bg-alt-2 text-fg-default rounded-md p-4">
+            Overview content
+          </div>
+        ),
+      },
+      {
+        key: 2,
+        label: "Sensors",
+        children: (
+          <div className="bg-bg-alt-2 text-fg-default rounded-md p-4">
+            Sensors content
+          </div>
+        ),
+      },
+      {
+        key: 3,
+        label: "Logs",
+      },
+    ],
+  },
+};

package/cli/storybook-dist/_stories-src/RBTab/RBChipsBoxTab.stories.tsx

@@ -0,0 +1,78 @@
+import { useEffect, useState } from "react";
+import type { Meta, StoryFn, StoryObj } from "@storybook/react";
+
+import { RBChipsBoxTab } from "@repo/rb-components/new_components";
+import type { ChipsBoxTabProps } from "@repo/rb-components/new_components";
+
+type StoryComponent = StoryObj<typeof RBChipsBoxTab>;
+type StoryTemplate = StoryFn<typeof RBChipsBoxTab>;
+
+const baseTabItems: ChipsBoxTabProps["tabItems"] = Array.from({
+  length: 8,
+}).map((_, i) => ({
+  key: i + 1,
+  label: "Menu",
+}));
+
+const Template: StoryTemplate = (args) => {
+  const items = args.tabItems ?? baseTabItems;
+  const [activeKey, setActiveKey] = useState<string | number>(
+    args.activeKey ?? items?.[0]?.key ?? 1,
+  );
+
+  useEffect(() => {
+    setActiveKey(args.activeKey ?? items?.[0]?.key ?? 1);
+  }, [args.activeKey, items]);
+
+  const handleChange = (key: string | number, name?: string) => {
+    setActiveKey(key);
+    args.handleChange?.(key, name as string);
+  };
+
+  return (
+    <div className="w-72">
+      <RBChipsBoxTab
+        {...args}
+        activeKey={activeKey}
+        handleChange={handleChange}
+      />
+    </div>
+  );
+};
+
+export default {
+  component: RBChipsBoxTab,
+  tags: ["autodocs"],
+  argTypes: {
+    className: { control: { type: "text" } },
+    size: {
+      control: { type: "select" },
+      options: ["xs", "xs2"],
+      table: { type: { summary: '"xs" | "xs2"' } },
+    },
+    tabItems: { control: { type: "object" } },
+    activeKey: { control: { type: "number" } },
+    name: { control: { type: "text" } },
+    slider: { control: false },
+    disabled: { control: { type: "boolean" } },
+    destroyInactiveTabPanel: { control: { type: "boolean" } },
+    tabNavScrollRef: { table: { disable: true } },
+    swipeContent: { control: { type: "boolean" } },
+    rippleOption: { control: { type: "object" } },
+    tabBtnClassName: { control: { type: "text" } },
+    useDefaultItemStyle: { table: { disable: true } },
+    tabNavClassName: { table: { disable: true } },
+    handleChange: { table: { disable: true } },
+    onClick: { table: { disable: true } },
+  },
+  args: {
+    size: "xs",
+    tabItems: baseTabItems,
+    disabled: false,
+    destroyInactiveTabPanel: true,
+    activeKey: 1,
+  },
+  render: Template,
+} as Meta<typeof RBChipsBoxTab>;
+
+export const Default: StoryComponent = {};

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

@@ -0,0 +1,57 @@
+import { useState } from "react";
+import type { Meta, StoryObj, StoryFn } from "@storybook/react";
+
+import { RBTab } from "@repo/rb-components/new_components";
+import type { TabProps } from "@repo/rb-components/new_components";
+
+type StoryComponent = StoryObj<typeof RBTab>;
+type StoryTemplate = StoryFn<typeof RBTab>;
+
+const baseTabItems: TabProps["tabItems"] = Array.from({ length: 8 }).map(
+  (_, i) => ({
+    key: i + 1,
+    label: "Menu",
+  }),
+);
+
+const Template: StoryTemplate = (args) => {
+  const [activeKey, setActiveKey] = useState<string | number>(
+    args.activeKey ?? baseTabItems?.[0]?.key ?? 1,
+  );
+
+  const handleChange = (key: string | number, name?: string) => {
+    setActiveKey(key);
+    args.handleChange?.(key, name as string);
+  };
+
+  return <RBTab {...args} activeKey={activeKey} handleChange={handleChange} />;
+};
+
+export default {
+  component: RBTab,
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: ["sm", "md", "lg"],
+      table: { type: { summary: '"sm" | "md" | "lg"' } },
+    },
+    tabItems: { control: false },
+    tabNavScrollRef: { control: false },
+    rippleOption: { control: false },
+    handleChange: { control: false },
+    onClick: { control: false },
+  },
+  args: {
+    size: "md",
+    tabItems: baseTabItems,
+    slider: true,
+    swipeContent: false,
+    disabled: false,
+    destroyInactiveTabPanel: true,
+    activeKey: 1,
+  },
+  render: Template,
+} as Meta<typeof RBTab>;
+
+export const Default: StoryComponent = {};

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

@@ -0,0 +1,177 @@
+import { useState } from "react";
+import type { Meta, StoryObj, StoryFn } from "@storybook/react";
+import {
+  RBBadge,
+  RBCheckBox,
+  RBLabelButton,
+  RBSwitch,
+  RBTable,
+  RBTableRow,
+  RBTdColumn,
+} from "@repo/rb-components/new_components";
+import { SvgDangerSolid } from "@repo/rb-components/new_components/assets/icons";
+
+type StoryArgs = {
+  list: typeof sampleList | null;
+  hideThead?: boolean;
+  stickyThead?: boolean;
+  loading?: boolean;
+};
+
+type StoryComponent = StoryObj<StoryArgs>;
+type StoryTemplate = StoryFn<StoryArgs>;
+
+const sampleList = [
+  { name: "테스트1", number: 1, role: "member", test: "test" },
+  { name: "테스트2", number: 2, role: "member", test: "test" },
+  { name: "테스트3", number: 3, role: "member", test: "test" },
+];
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+export default {
+  component: RBTable,
+  tags: ["autodocs"],
+  args: {
+    list: sampleList,
+    hideThead: false,
+    stickyThead: false,
+    loading: false,
+  },
+} as Meta<StoryArgs>;
+
+const Template: StoryTemplate = (args) => {
+  return (
+    <RBTable
+      {...args}
+      className="[&_[data-slot='table-head-cell']]:!bg-raised [&_[data-slot='table-cell']]:!bg-alt-2"
+    >
+      {({ item, index }) => (
+        <RBTableRow key={`row-${index}`}>
+          <RBTdColumn fieldId="name" label="Name" sortValue={item.name}>
+            <span>{item.name}</span>
+          </RBTdColumn>
+          <RBTdColumn fieldId="number" label="Number">
+            <span>{item.number}</span>
+          </RBTdColumn>
+          <RBTdColumn fieldId="role" label="Role">
+            <span>{item.role}</span>
+          </RBTdColumn>
+          <RBTdColumn fieldId="test" label="Test" align="center">
+            <span>{item.test}</span>
+          </RBTdColumn>
+        </RBTableRow>
+      )}
+    </RBTable>
+  );
+};
+
+export const Default: StoryComponent = {
+  parameters: {
+    docs: {
+      description: {
+        story: "",
+      },
+    },
+  },
+  args: {},
+  render: Template,
+};
+
+type ShowcaseItem = {
+  id: number;
+  text: string;
+  badge: string;
+  button: string;
+  checked: boolean;
+  enabled: boolean;
+};
+
+const showcaseList: ShowcaseItem[] = [
+  {
+    id: 1,
+    text: "Test1",
+    badge: "Test",
+    button: "Test",
+    checked: true,
+    enabled: true,
+  },
+  {
+    id: 2,
+    text: "Test2",
+    badge: "Test",
+    button: "Test",
+    checked: false,
+    enabled: false,
+  },
+];
+
+export const CellExamples: StoryComponent = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "RBTable 셀 안에 text, RBBadge, RBLabelButton, RBCheckBox, RBSwitch가 들어가는 예제입니다.",
+      },
+    },
+  },
+  render: () => {
+    const [rows, setRows] = useState(showcaseList);
+
+    return (
+      <RBTable list={rows}>
+        {({ item, index }) => (
+          <RBTableRow key={`showcase-row-${item.id}`}>
+            <RBTdColumn fieldId="text" label="Text" sortValue={item.text}>
+              <span>{item.text}</span>
+            </RBTdColumn>
+
+            <RBTdColumn fieldId="badge" label="RBBadge">
+              <RBBadge
+                color="red"
+                leadingIcon={<SvgDangerSolid className="size-3 shrink-0" />}
+                numberVariant="solid"
+                type="transparent"
+              >
+                {item.badge}
+              </RBBadge>
+            </RBTdColumn>
+
+            <RBTdColumn fieldId="button" label="RBButton">
+              <RBLabelButton size="xs" variant="soft">
+                {item.button}
+              </RBLabelButton>
+            </RBTdColumn>
+
+            <RBTdColumn fieldId="checkbox" label="RBCheckbox">
+              <RBCheckBox
+                value={item.checked}
+                handleChange={(value) => {
+                  setRows((prev) =>
+                    prev.map((row, rowIndex) =>
+                      rowIndex === index
+                        ? { ...row, checked: Boolean(value) }
+                        : row,
+                    ),
+                  );
+                }}
+              />
+            </RBTdColumn>
+
+            <RBTdColumn fieldId="switch" label="RBSwitch" align="center">
+              <RBSwitch
+                checked={item.enabled}
+                onCheckedChange={(checked) => {
+                  setRows((prev) =>
+                    prev.map((row, rowIndex) =>
+                      rowIndex === index ? { ...row, enabled: checked } : row,
+                    ),
+                  );
+                }}
+              />
+            </RBTdColumn>
+          </RBTableRow>
+        )}
+      </RBTable>
+    );
+  },
+};

package/cli/storybook-dist/_stories-src/RBTable/RBTableRow.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj, StoryFn } from "@storybook/react";
+import {
+  RBTable,
+  RBTableRow,
+  RBTdColumn,
+  RBTdExpend,
+  type TableRowProps,
+} from "@repo/rb-components/new_components";
+
+type StoryArgs = TableRowProps;
+type StoryComponent = StoryObj<StoryArgs>;
+type StoryTemplate = StoryFn<StoryArgs>;
+
+const sampleList = [
+  { name: "테스트1", number: 1, role: "member", test: "test" },
+];
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+export default {
+  component: RBTableRow,
+  tags: ["autodocs"],
+  args: {
+    expendOpen: false,
+  },
+} as Meta<StoryArgs>;
+
+const Template: StoryTemplate = (args) => {
+  return (
+    <RBTable
+      className="[&_[data-slot='table-head-cell']]:bg-raised [&_[data-slot='table-cell']]:bg-alt-1"
+      list={sampleList}
+    >
+      {({ item, index }) => (
+        <RBTableRow key={`row-${index}`} {...args}>
+          <RBTdColumn fieldId="name" label="Name" sortValue={item.name} expend>
+            <span>{item.name}</span>
+          </RBTdColumn>
+          <RBTdColumn fieldId="number" label="Number" expend>
+            <span>{item.number}</span>
+          </RBTdColumn>
+          <RBTdColumn fieldId="role" label="Role" expend>
+            <span>{item.role}</span>
+          </RBTdColumn>
+          <RBTdColumn fieldId="test" label="Test" align="center" expend>
+            <span>{item.test}</span>
+          </RBTdColumn>
+          <RBTdExpend>RBTable Data Expend Test</RBTdExpend>
+        </RBTableRow>
+      )}
+    </RBTable>
+  );
+};
+
+export const Default: StoryComponent = {
+  parameters: {
+    docs: {
+      description: {
+        story: "",
+      },
+    },
+  },
+  args: {},
+  render: Template,
+};

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