@rainbow-robotics/muscat-plugin-kit 0.1.2-dev.5 → 0.1.2-dev.51

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

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

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj, StoryFn } from "@storybook/react";
+import { RBJoyStick } from "@repo/rb-components/new_components";
+
+type StoryComponent = StoryObj<typeof RBJoyStick>;
+type StoryTemplate = StoryFn<typeof RBJoyStick>;
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+export default {
+  component: RBJoyStick,
+  tags: ["autodocs"],
+} as Meta<typeof RBJoyStick>;
+
+const Template: StoryTemplate = (args) => {
+  return (
+    <div className="bg-fill-subtler p-10">
+      <RBJoyStick {...args} />
+    </div>
+  );
+};
+
+export const Default: StoryComponent = {
+  parameters: {
+    docs: {
+      description: {
+        story: "",
+      },
+    },
+  },
+  args: {},
+  render: Template,
+};

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

@@ -0,0 +1,36 @@
+import type { Meta, StoryFn, StoryObj } from "@storybook/react";
+import { RBLight } from "@repo/rb-components/new_components";
+import { lightColors, lightSizes } from "@repo/rb-components/new_components";
+
+type StoryComponent = StoryObj<typeof RBLight>;
+type StoryTemplate = StoryFn<typeof RBLight>;
+
+const Template: StoryTemplate = (args) => <RBLight {...args} />;
+
+export default {
+  component: RBLight,
+  tags: ["autodocs"],
+  render: Template,
+  argTypes: {
+    color: {
+      control: { type: "select" },
+      options: lightColors,
+      table: {
+        type: { summary: lightColors.map((c) => `"${c}"`).join(" | ") },
+      },
+    },
+    size: {
+      control: { type: "select" },
+      options: lightSizes,
+      table: {
+        type: { summary: lightSizes.map((s) => `"${s}"`).join(" | ") },
+      },
+    },
+  },
+  args: {
+    color: "green",
+    size: "md",
+  },
+} as Meta<typeof RBLight>;
+
+export const Playground: StoryComponent = {};

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

@@ -0,0 +1,49 @@
+import { useEffect, useState } from "react";
+import type { Meta, StoryObj, StoryFn } from "@storybook/react";
+import { RBPagination } from "@repo/rb-components/new_components";
+
+type StoryComponent = StoryObj<typeof RBPagination>;
+type StoryTemplate = StoryFn<typeof RBPagination>;
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+export default {
+  component: RBPagination,
+  tags: ["autodocs"],
+} as Meta<typeof RBPagination>;
+
+const Template: StoryTemplate = (args) => {
+  const [currPage, setCurrPage] = useState(args.currPage ?? 1);
+
+  useEffect(() => {
+    setCurrPage(args.currPage ?? 1);
+  }, [args.currPage]);
+
+  return (
+    <RBPagination
+      {...args}
+      currPage={currPage}
+      handlePageChange={(page) => {
+        setCurrPage(page);
+        args.handlePageChange?.(page);
+      }}
+    />
+  );
+};
+
+export const Default: StoryComponent = {
+  parameters: {
+    docs: {
+      description: {
+        story: "",
+      },
+    },
+  },
+  args: {
+    currPage: 1,
+    listSize: 1,
+    pageSize: 10,
+    totalCount: 100,
+    handlePageChange: () => {},
+  },
+  render: Template,
+};

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

@@ -0,0 +1,89 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { HStack, VStack } from "@repo/rb-components";
+
+import {
+  RBCard,
+  RBCardContent,
+  RBCardDescription,
+  RBCardFooter,
+  RBCardHeader,
+  RBCardHeaderText,
+  RBLabelButton,
+  RBCardTitle,
+  RBTextLabel,
+  RBTextInput,
+} from "@repo/rb-components/new_components";
+
+const meta = {
+  component: RBCard,
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: ["sm", "md"],
+      table: { type: { summary: '"sm" | "md"' } },
+    },
+  },
+  args: {
+    size: "md",
+  },
+} satisfies Meta<typeof RBCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: ({ size }) => {
+    return (
+      <RBCard size={size}>
+        <RBCardHeader>
+          <RBCardHeaderText>
+            <RBCardTitle>Title Text</RBCardTitle>
+            <RBCardDescription>This is a card description.</RBCardDescription>
+          </RBCardHeaderText>
+        </RBCardHeader>
+
+        <RBCardContent>
+          <VStack className="w-full gap-6">
+            <VStack className="w-full gap-2">
+              <RBTextLabel label="Email" />
+              <RBTextInput
+                defaultValue="m@example.com"
+                type="email"
+                size="sm"
+                className="w-full"
+              />
+            </VStack>
+            <VStack className="w-full gap-2">
+              <HStack className="w-full items-start justify-between">
+                <RBTextLabel label="Password" className="w-auto" />
+                <span className="text-fg-default typo-compact-xs-normal whitespace-nowrap">
+                  Forgot your password?
+                </span>
+              </HStack>
+              <RBTextInput
+                defaultValue="Placeholder"
+                type="password"
+                size="sm"
+                className="w-full"
+              />
+            </VStack>
+            <p className="text-fg-default typo-body-xs-normal">
+              The card component supports a size prop that can be set to
+              &quot;sm&quot; for a more compact appearance.
+            </p>
+          </VStack>
+        </RBCardContent>
+
+        <RBCardFooter>
+          <RBLabelButton size="sm" variant="solid" className="w-full">
+            Login
+          </RBLabelButton>
+          <RBLabelButton size="sm" variant="outlined" className="w-full">
+            Login with Google
+          </RBLabelButton>
+        </RBCardFooter>
+      </RBCard>
+    );
+  },
+};

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

@@ -0,0 +1,116 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { CheckIcon } from "lucide-react";
+import { useState, type ComponentProps } from "react";
+
+import {
+  RBIcons,
+  RBCommand,
+  RBCommandEmpty,
+  RBCommandGroup,
+  RBCommandInput,
+  RBCommandItem,
+  RBCommandList,
+  RBCommandSelected,
+  RBCommandSeparator,
+  RBCommandShortcut,
+} from "@repo/rb-components/new_components";
+
+const meta = {
+  component: RBCommand,
+  tags: ["autodocs"],
+} satisfies Meta<typeof RBCommand>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+type RBCommandProps = ComponentProps<typeof RBCommand>;
+
+export const Suggestions: Story = {
+  render: function Render(args: RBCommandProps) {
+    const [selectedItem, setSelectedItem] = useState<string | null>(null);
+    const placeholder = selectedItem
+      ? `${selectedItem} 선택됨`
+      : "플레이스홀더";
+
+    return (
+      <RBCommand {...args} className={`w-96 ${args.className ?? ""}`}>
+        <RBCommandInput placeholder={placeholder} />
+        <RBCommandList>
+          <RBCommandGroup heading="Suggestions">
+            <RBCommandItem onSelect={() => setSelectedItem("Calendar")}>
+              <RBIcons.SvgInformationRegular />
+              Calendar
+              {selectedItem === "Calendar" && (
+                <RBCommandSelected>
+                  <CheckIcon />
+                </RBCommandSelected>
+              )}
+            </RBCommandItem>
+            <RBCommandItem onSelect={() => setSelectedItem("Search Emoji")}>
+              <RBIcons.SvgInformationRegular />
+              Search Emoji
+              {selectedItem === "Search Emoji" && (
+                <RBCommandSelected>
+                  <CheckIcon />
+                </RBCommandSelected>
+              )}
+            </RBCommandItem>
+            <RBCommandItem onSelect={() => setSelectedItem("Calculator")}>
+              <RBIcons.SvgInformationRegular />
+              Calculator
+              {selectedItem === "Calculator" && (
+                <RBCommandSelected>
+                  <CheckIcon />
+                </RBCommandSelected>
+              )}
+            </RBCommandItem>
+          </RBCommandGroup>
+          <RBCommandSeparator className="w-full" />
+          <RBCommandGroup heading="Settings">
+            <RBCommandItem onSelect={() => setSelectedItem("Profile")}>
+              <RBIcons.SvgInformationRegular />
+              Profile
+              {selectedItem === "Profile" && (
+                <RBCommandSelected>
+                  <CheckIcon />
+                </RBCommandSelected>
+              )}
+              <RBCommandShortcut>⌘P</RBCommandShortcut>
+            </RBCommandItem>
+            <RBCommandItem onSelect={() => setSelectedItem("Billing")}>
+              <RBIcons.SvgInformationRegular />
+              Billing
+              {selectedItem === "Billing" && (
+                <RBCommandSelected>
+                  <CheckIcon />
+                </RBCommandSelected>
+              )}
+              <RBCommandShortcut>⌘B</RBCommandShortcut>
+            </RBCommandItem>
+            <RBCommandItem onSelect={() => setSelectedItem("Settings")}>
+              <RBIcons.SvgInformationRegular />
+              Settings
+              {selectedItem === "Settings" && (
+                <RBCommandSelected>
+                  <CheckIcon />
+                </RBCommandSelected>
+              )}
+              <RBCommandShortcut>⌘S</RBCommandShortcut>
+            </RBCommandItem>
+          </RBCommandGroup>
+        </RBCommandList>
+      </RBCommand>
+    );
+  },
+};
+
+export const EmptyState: Story = {
+  render: () => (
+    <RBCommand className="h-60 w-96">
+      <RBCommandInput placeholder="플레이스홀더" />
+      <RBCommandList className="flex flex-1 flex-col items-center justify-center p-0">
+        <RBCommandEmpty>No results found.</RBCommandEmpty>
+      </RBCommandList>
+    </RBCommand>
+  ),
+};

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

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import {
+  RBDialog,
+  RBDialogContent,
+  RBDialogDescription,
+  RBDialogFooter,
+  RBDialogHeader,
+  RBDialogTitle,
+  RBDialogTrigger,
+  RBLabelButton,
+} from "@repo/rb-components/new_components";
+
+const meta = {
+  tags: ["autodocs"],
+  argTypes: {
+    showCloseButton: {
+      control: "boolean",
+    },
+    size: {
+      control: { type: "select" },
+      options: ["sm", "md", "lg"],
+    },
+  },
+  args: {
+    showCloseButton: true,
+    size: "lg",
+  },
+  component: RBDialogContent,
+} satisfies Meta<typeof RBDialogContent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: (args) => (
+    <div>
+      <RBDialog>
+        <RBDialogTrigger asChild>
+          <RBLabelButton size="sm" variant="solid">
+            Open Dialog
+          </RBLabelButton>
+        </RBDialogTrigger>
+
+        <RBDialogContent {...args}>
+          <RBDialogHeader>
+            <RBDialogTitle>타이틀</RBDialogTitle>
+            <RBDialogDescription>설명 영역</RBDialogDescription>
+          </RBDialogHeader>
+
+          <div className="text-fg-default px-4 py-2 text-sm">
+            다이얼로그 본문 콘텐츠 영역입니다.
+          </div>
+
+          <RBDialogFooter>
+            <div className="flex flex-1 items-center justify-start gap-1">
+              <RBLabelButton variant="outlined" size="xs2">
+                버튼
+              </RBLabelButton>
+            </div>
+            <div className="flex items-center gap-1">
+              <RBLabelButton variant="outlined" size="xs2">
+                버튼
+              </RBLabelButton>
+              <RBLabelButton variant="brand" size="xs2">
+                버튼
+              </RBLabelButton>
+            </div>
+          </RBDialogFooter>
+        </RBDialogContent>
+      </RBDialog>
+    </div>
+  ),
+};

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

@@ -0,0 +1,99 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { VStack } from "@repo/rb-components";
+import {
+  RBLabelButton,
+  RBDrawer,
+  RBDrawerBody,
+  RBDrawerContent,
+  RBDrawerDescription,
+  RBDrawerFooter,
+  RBDrawerHeader,
+  RBDrawerTitle,
+  RBDrawerTrigger,
+} from "@repo/rb-components/new_components";
+
+const meta = {
+  tags: ["autodocs"],
+  argTypes: {
+    showCloseButton: {
+      control: "boolean",
+    },
+    showHandle: {
+      control: "boolean",
+    },
+    side: {
+      control: { type: "select" },
+      options: ["top", "bottom", "right", "left"],
+    },
+  },
+  args: {
+    side: "bottom",
+    showHandle: true,
+    showCloseButton: false,
+  },
+  component: RBDrawerContent,
+} satisfies Meta<typeof RBDrawerContent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const DrawerBodyContent = ({
+  side,
+}: {
+  side: "top" | "bottom" | "right" | "left";
+}) => {
+  const isVertical = side === "top" || side === "bottom";
+
+  return (
+    <>
+      <RBDrawerHeader className={isVertical ? "items-center text-center" : ""}>
+        <RBDrawerTitle className="typo-title-01-medium">
+          Title Text
+        </RBDrawerTitle>
+        <RBDrawerDescription>This is a drawer description.</RBDrawerDescription>
+      </RBDrawerHeader>
+
+      <RBDrawerBody>
+        <div className="border-information bg-fill-information-subtlest text-fg-default typo-compact-sm-normal flex h-16 w-full items-center justify-center border border-dashed px-4 text-center">
+          <span className={isVertical ? "" : "w-full text-left"}>
+            Slot (swap it with your content)
+          </span>
+        </div>
+      </RBDrawerBody>
+
+      <RBDrawerFooter>
+        <RBLabelButton size="sm" variant="solid" className="w-full">
+          버튼 라벨
+        </RBLabelButton>
+        <RBLabelButton size="sm" variant="outlined" className="w-full">
+          버튼 라벨
+        </RBLabelButton>
+      </RBDrawerFooter>
+    </>
+  );
+};
+
+export const Playground: Story = {
+  render: (args) => (
+    <VStack className="bg-alt-1 min-h-[700px] items-center justify-center rounded-2xl p-8">
+      <RBDrawer defaultOpen side={args.side}>
+        <RBDrawerTrigger asChild>
+          <RBLabelButton size="sm" variant="solid">
+            Open Drawer
+          </RBLabelButton>
+        </RBDrawerTrigger>
+        <RBDrawerContent
+          {...args}
+          className={
+            args.side === "top" || args.side === "bottom"
+              ? "w-full"
+              : "h-full w-96"
+          }
+        >
+          <DrawerBodyContent side={args.side} />
+        </RBDrawerContent>
+      </RBDrawer>
+    </VStack>
+  ),
+};