@rainbow-robotics/muscat-plugin-kit 1.3.8-dev.2 → 1.10.1-dev.0

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

@@ -1,57 +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 = {};
+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

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

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