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

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

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

@@ -0,0 +1,123 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+
+import { VStack } from "@repo/rb-components";
+import {
+  RBIcons,
+  RBLabelButton,
+  RBDropdownMenu,
+  RBDropdownMenuCheckboxItem,
+  RBDropdownMenuContent,
+  RBDropdownMenuItem,
+  RBDropdownMenuLabel,
+  RBDropdownMenuSeparator,
+  RBDropdownMenuShortcut,
+  RBDropdownMenuSub,
+  RBDropdownMenuSubContent,
+  RBDropdownMenuSubTrigger,
+  RBDropdownMenuTrigger,
+} from "@repo/rb-components/new_components";
+
+const meta = {
+  tags: ["autodocs"],
+  component: RBDropdownMenu,
+} satisfies Meta<typeof RBDropdownMenu>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: () => {
+    const [bookmarked, setBookmarked] = useState(true);
+    const [notifications, setNotifications] = useState(false);
+
+    return (
+      <VStack className="bg-alt-1 min-h-[420px] items-center justify-center rounded-2xl p-8">
+        <RBDropdownMenu>
+          <RBDropdownMenuTrigger asChild>
+            <RBLabelButton size="sm" variant="outlined">
+              Open
+            </RBLabelButton>
+          </RBDropdownMenuTrigger>
+          <RBDropdownMenuContent className="w-40" sideOffset={8}>
+            <RBDropdownMenuLabel>My Account</RBDropdownMenuLabel>
+            <RBDropdownMenuSeparator />
+
+            <RBDropdownMenuCheckboxItem
+              checked={bookmarked}
+              onCheckedChange={(next) => setBookmarked(next === true)}
+            >
+              <span className="flex-1 truncate">Bookmarked</span>
+              <RBDropdownMenuShortcut>⌘B</RBDropdownMenuShortcut>
+            </RBDropdownMenuCheckboxItem>
+            <RBDropdownMenuCheckboxItem
+              checked={notifications}
+              onCheckedChange={(next) => setNotifications(next === true)}
+            >
+              <span className="flex-1 truncate">Notifications</span>
+              <RBDropdownMenuShortcut>⌘N</RBDropdownMenuShortcut>
+            </RBDropdownMenuCheckboxItem>
+
+            <RBDropdownMenuSeparator />
+
+            <RBDropdownMenuItem>
+              <RBIcons.SvgFolderOpenRegular className="size-4" />
+              <span className="flex-1 truncate">Profile</span>
+              <RBDropdownMenuShortcut>⇧⌘P</RBDropdownMenuShortcut>
+            </RBDropdownMenuItem>
+
+            <RBDropdownMenuItem>
+              <RBIcons.SvgFolderOpenRegular className="size-4" />
+              <span className="flex-1 truncate">Billing</span>
+              <RBDropdownMenuShortcut>⌘B</RBDropdownMenuShortcut>
+            </RBDropdownMenuItem>
+
+            <RBDropdownMenuItem>
+              <RBIcons.SvgFolderOpenRegular className="size-4" />
+              <span className="flex-1 truncate">Settings</span>
+              <RBDropdownMenuShortcut>⌘S</RBDropdownMenuShortcut>
+            </RBDropdownMenuItem>
+
+            <RBDropdownMenuSeparator />
+
+            <RBDropdownMenuItem>
+              <span className="flex-1 truncate">Team</span>
+            </RBDropdownMenuItem>
+
+            <RBDropdownMenuSub>
+              <RBDropdownMenuSubTrigger>
+                <span className="flex-1 truncate">Invite users</span>
+              </RBDropdownMenuSubTrigger>
+              <RBDropdownMenuSubContent className="w-56">
+                <RBDropdownMenuItem>Email</RBDropdownMenuItem>
+                <RBDropdownMenuItem>Message</RBDropdownMenuItem>
+                <RBDropdownMenuSub>
+                  <RBDropdownMenuSubTrigger>
+                    <span className="flex-1 truncate">More options</span>
+                  </RBDropdownMenuSubTrigger>
+                </RBDropdownMenuSub>
+              </RBDropdownMenuSubContent>
+            </RBDropdownMenuSub>
+
+            <RBDropdownMenuItem>
+              <span className="flex-1 truncate">New Team</span>
+              <RBDropdownMenuShortcut>⌘+T</RBDropdownMenuShortcut>
+            </RBDropdownMenuItem>
+
+            <RBDropdownMenuItem disabled>
+              <span className="flex-1 truncate">API</span>
+            </RBDropdownMenuItem>
+
+            <RBDropdownMenuSeparator />
+
+            <RBDropdownMenuItem variant="destructive">
+              <RBIcons.SvgFolderOpenRegular className="size-4" />
+              <span className="flex-1 truncate">Log out</span>
+              <RBDropdownMenuShortcut>⌘Q</RBDropdownMenuShortcut>
+            </RBDropdownMenuItem>
+          </RBDropdownMenuContent>
+        </RBDropdownMenu>
+      </VStack>
+    );
+  },
+};