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

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

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

@@ -0,0 +1,135 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+
+import { VStack } from "@repo/rb-components";
+import {
+  RBMenubar,
+  RBMenubarCheckboxItem,
+  RBMenubarContent,
+  RBMenubarItem,
+  RBMenubarMenu,
+  RBMenubarSeparator,
+  RBMenubarShortcut,
+  RBMenubarSub,
+  RBMenubarSubContent,
+  RBMenubarSubTrigger,
+  RBMenubarTrigger,
+} from "@repo/rb-components/new_components";
+
+const meta = {
+  tags: ["autodocs"],
+  component: RBMenubar,
+} satisfies Meta<typeof RBMenubar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const PlaygroundStory = () => {
+  const [showToolbar, setShowToolbar] = useState(true);
+  const [showStatusBar, setShowStatusBar] = useState(false);
+
+  return (
+    <VStack className="bg-alt-1 min-h-[420px] items-center justify-center rounded-2xl p-8">
+      <RBMenubar>
+        <RBMenubarMenu>
+          <RBMenubarTrigger>File</RBMenubarTrigger>
+          <RBMenubarContent>
+            <RBMenubarCheckboxItem
+              checked={showToolbar}
+              onCheckedChange={(next) => setShowToolbar(next === true)}
+            >
+              <span className="flex-1 truncate">Show Toolbar</span>
+              <RBMenubarShortcut>⌘T</RBMenubarShortcut>
+            </RBMenubarCheckboxItem>
+
+            <RBMenubarCheckboxItem
+              checked={showStatusBar}
+              onCheckedChange={(next) => setShowStatusBar(next === true)}
+            >
+              <span className="flex-1 truncate">Show Status Bar</span>
+              <RBMenubarShortcut>⌘S</RBMenubarShortcut>
+            </RBMenubarCheckboxItem>
+
+            <RBMenubarSeparator />
+
+            <RBMenubarItem>
+              <span className="flex-1 truncate">New Tab</span>
+              <RBMenubarShortcut>⌘T</RBMenubarShortcut>
+            </RBMenubarItem>
+            <RBMenubarItem>
+              <span className="flex-1 truncate">New Window</span>
+              <RBMenubarShortcut>⌘N</RBMenubarShortcut>
+            </RBMenubarItem>
+            <RBMenubarItem>
+              <span className="flex-1 truncate">New Incognito Window</span>
+            </RBMenubarItem>
+
+            <RBMenubarSeparator />
+
+            <RBMenubarSub>
+              <RBMenubarSubTrigger>
+                <span className="flex-1 truncate">Share</span>
+              </RBMenubarSubTrigger>
+              <RBMenubarSubContent>
+                <RBMenubarItem>
+                  <span className="flex-1 truncate">Email link</span>
+                </RBMenubarItem>
+                <RBMenubarItem>
+                  <span className="flex-1 truncate">Messages</span>
+                </RBMenubarItem>
+                <RBMenubarItem variant="destructive">
+                  <span className="flex-1 truncate">Notes</span>
+                </RBMenubarItem>
+              </RBMenubarSubContent>
+            </RBMenubarSub>
+
+            <RBMenubarSeparator />
+
+            <RBMenubarItem disabled>
+              <span className="flex-1 truncate">Print</span>
+              <RBMenubarShortcut>⌘P</RBMenubarShortcut>
+            </RBMenubarItem>
+          </RBMenubarContent>
+        </RBMenubarMenu>
+
+        <RBMenubarMenu>
+          <RBMenubarTrigger>Edit</RBMenubarTrigger>
+          <RBMenubarContent>
+            <RBMenubarItem>
+              <span className="flex-1 truncate">Menubar Item Text</span>
+              <RBMenubarShortcut>⌘P</RBMenubarShortcut>
+            </RBMenubarItem>
+            <RBMenubarItem>
+              <span className="flex-1 truncate">Menubar Item Text</span>
+              <RBMenubarShortcut>⌘P</RBMenubarShortcut>
+            </RBMenubarItem>
+          </RBMenubarContent>
+        </RBMenubarMenu>
+
+        <RBMenubarMenu>
+          <RBMenubarTrigger>View</RBMenubarTrigger>
+          <RBMenubarContent>
+            <RBMenubarItem>
+              <span className="flex-1 truncate">Menubar Item Text</span>
+              <RBMenubarShortcut>⌘P</RBMenubarShortcut>
+            </RBMenubarItem>
+          </RBMenubarContent>
+        </RBMenubarMenu>
+
+        <RBMenubarMenu>
+          <RBMenubarTrigger>Profiles</RBMenubarTrigger>
+          <RBMenubarContent>
+            <RBMenubarItem variant="destructive">
+              <span className="flex-1 truncate">Menubar Item Text</span>
+              <RBMenubarShortcut>⌘P</RBMenubarShortcut>
+            </RBMenubarItem>
+          </RBMenubarContent>
+        </RBMenubarMenu>
+      </RBMenubar>
+    </VStack>
+  );
+};
+
+export const Playground: Story = {
+  render: () => <PlaygroundStory />,
+};

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

@@ -0,0 +1,69 @@
+import type { Meta, StoryFn, StoryObj } from "@storybook/react";
+
+import {
+  RBPopover,
+  RBPopoverContent,
+  RBPopoverPlacements,
+  RBPopoverTrigger,
+  type RBPopoverPlacement,
+} from "@repo/rb-components/new_components";
+
+type StoryArgs = {
+  place: RBPopoverPlacement;
+  arrow: boolean;
+};
+
+type StoryComponent = StoryObj<StoryArgs>;
+type StoryTemplate = StoryFn<StoryArgs>;
+
+export default {
+  component: RBPopover,
+  tags: ["autodocs"],
+  args: {
+    place: "bottom-center",
+    arrow: false,
+  },
+  argTypes: {
+    place: {
+      control: "select",
+      options: RBPopoverPlacements,
+    },
+    arrow: {
+      control: "boolean",
+    },
+  },
+} as Meta<StoryArgs>;
+
+const Template: StoryTemplate = ({ place, arrow }: StoryArgs) => {
+  return (
+    <div className="flex items-center justify-center overflow-hidden">
+      <RBPopover>
+        <RBPopoverTrigger asChild>
+          <button className="text-fg-default border-danger border-1">
+            Open Popover
+          </button>
+        </RBPopoverTrigger>
+
+        <RBPopoverContent
+          place={place}
+          arrow={arrow}
+          className="text-fg-default py-2_5 min-h-32 min-w-64 px-3"
+        >
+          Popover Content
+        </RBPopoverContent>
+      </RBPopover>
+    </div>
+  );
+};
+
+export const Default: StoryComponent = {
+  parameters: {
+    docs: {
+      description: {
+        story: "",
+      },
+    },
+  },
+  args: {},
+  render: Template,
+};

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

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import {
+  RBResizable,
+  RBResizableHandle,
+  RBResizablePanel,
+} from "@repo/rb-components/new_components";
+
+const meta = {
+  tags: ["autodocs"],
+  component: RBResizable,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    direction: {
+      control: "select",
+      options: ["horizontal", "vertical"],
+    },
+  },
+} satisfies Meta<typeof RBResizable>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const panelBaseClassName =
+  "flex h-full items-center justify-center text-base font-medium text-fg-default";
+
+export const Overview: Story = {
+  args: {
+    direction: "horizontal",
+  },
+  render: ({ direction }) => (
+    <div className="relative h-[520px] w-[520px] overflow-hidden p-5">
+      <div className="flex h-full items-center justify-center">
+        <RBResizable direction={direction} className="h-[480px] w-[480px]">
+          <RBResizablePanel>
+            <div className={panelBaseClassName}>One</div>
+          </RBResizablePanel>
+          <RBResizableHandle />
+          <RBResizablePanel>
+            <div className={panelBaseClassName}>Two</div>
+          </RBResizablePanel>
+        </RBResizable>
+      </div>
+    </div>
+  ),
+};

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

@@ -0,0 +1,91 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { VStack } from "@repo/rb-components";
+
+import {
+  RBLabelButton,
+  RBSheet,
+  RBSheetContent,
+  RBSheetDescription,
+  RBSheetFooter,
+  RBSheetHeader,
+  RBSheetTitle,
+  RBSheetTrigger,
+  RBTextField,
+  RBTextInput,
+} from "@repo/rb-components/new_components";
+
+const meta = {
+  tags: ["autodocs"],
+  argTypes: {
+    showCloseButton: {
+      control: "boolean",
+    },
+    side: {
+      control: { type: "select" },
+      options: ["right", "left", "bottom", "top"],
+    },
+  },
+  args: {
+    showCloseButton: true,
+    side: "right",
+  },
+  component: RBSheetContent,
+} satisfies Meta<typeof RBSheetContent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: (args) => (
+    <div>
+      <RBSheet defaultOpen>
+        <RBSheetTrigger asChild>
+          <RBLabelButton size="sm" variant="solid">
+            Open Sheet
+          </RBLabelButton>
+        </RBSheetTrigger>
+        <RBSheetContent
+          {...args}
+          className={
+            args.side === "top" || args.side === "bottom" ? "w-full" : "w-96"
+          }
+        >
+          <RBSheetHeader>
+            <RBSheetTitle>Edit profile</RBSheetTitle>
+            <RBSheetDescription>
+              Make changes to your profile here. Click save when you&apos;re
+              done.
+            </RBSheetDescription>
+          </RBSheetHeader>
+
+          <VStack className="flex-1 gap-6">
+            <RBTextField
+              label="Name"
+              required
+              className="gap-1_5 flex flex-col"
+            >
+              <RBTextInput size="sm" className="w-full" />
+            </RBTextField>
+
+            <RBTextField
+              label="Username"
+              required
+              className="flex flex-col gap-1.5"
+            >
+              <RBTextInput size="sm" className="w-full" />
+            </RBTextField>
+          </VStack>
+
+          <RBSheetFooter>
+            <RBLabelButton size="sm" variant="solid" className="w-full">
+              Save changes
+            </RBLabelButton>
+            <RBLabelButton size="sm" variant="outlined" className="w-full">
+              Cancel
+            </RBLabelButton>
+          </RBSheetFooter>
+        </RBSheetContent>
+      </RBSheet>
+    </div>
+  ),
+};

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

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { VStack } from "@repo/rb-components";
+
+import { RBSlider } from "@repo/rb-components/new_components";
+
+const meta = {
+  component: RBSlider,
+  tags: ["autodocs"],
+  argTypes: {
+    className: { control: false, table: { disable: true } },
+    trackClassName: { control: false, table: { disable: true } },
+    rangeClassName: { control: false, table: { disable: true } },
+    thumbClassName: { control: false, table: { disable: true } },
+    min: { control: { type: "number" } },
+    max: { control: { type: "number" } },
+    step: { control: { type: "number" } },
+    disabled: { control: "boolean" },
+    defaultValue: { control: { type: "object" } },
+  },
+  args: {
+    min: 0,
+    max: 100,
+    step: 1,
+    disabled: false,
+    defaultValue: [64],
+  },
+} satisfies Meta<typeof RBSlider>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  render: (args) => (
+    <VStack className="w-80 gap-4">
+      <RBSlider {...args} />
+    </VStack>
+  ),
+};

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

@@ -0,0 +1,112 @@
+import { useEffect, useState, type ComponentProps } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { VStack } from "@repo/rb-components";
+import { RBSwitch, RBSwitchField } from "@repo/rb-components/new_components";
+
+type SwitchStoryArgs = ComponentProps<typeof RBSwitch> & {
+  defaultChecked: boolean;
+};
+
+type WithTextStoryArgs = ComponentProps<typeof RBSwitchField> &
+  ComponentProps<typeof RBSwitch> & {
+    defaultChecked: boolean;
+  };
+
+const meta: Meta<SwitchStoryArgs> = {
+  component: RBSwitch,
+  tags: ["autodocs"],
+  argTypes: {
+    checked: { control: false, table: { disable: true } },
+    defaultChecked: { control: "boolean" },
+    size: {
+      control: { type: "select" },
+      options: ["default", "sm"],
+    },
+    invalid: { control: "boolean" },
+    disabled: { control: "boolean" },
+  },
+  args: {
+    defaultChecked: false,
+    disabled: false,
+    invalid: false,
+    size: "default",
+  },
+};
+
+export default meta;
+type Story = StoryObj<SwitchStoryArgs>;
+type WithTextStory = StoryObj<WithTextStoryArgs>;
+
+export const Playground: Story = {
+  render: function Render(args) {
+    const [checked, setChecked] = useState(Boolean(args.defaultChecked));
+
+    useEffect(() => {
+      setChecked(Boolean(args.defaultChecked));
+    }, [args.defaultChecked]);
+
+    return (
+      <VStack className="w-80 gap-4">
+        <RBSwitch {...args} checked={checked} onCheckedChange={setChecked} />
+      </VStack>
+    );
+  },
+};
+
+export const WithText: WithTextStory = {
+  args: {
+    controlPlacement: "start",
+    defaultChecked: false,
+    description: "This is a switch description.",
+    disabled: false,
+    invalid: false,
+    label: "Switch Text",
+    size: "default",
+    type: "default",
+  },
+  argTypes: {
+    controlPlacement: {
+      control: { type: "select" },
+      options: ["start", "end"],
+    },
+    description: { control: "text" },
+    descriptionClassName: { control: false, table: { disable: true } },
+    label: { control: "text" },
+    labelClassName: { control: false, table: { disable: true } },
+    type: {
+      control: { type: "select" },
+      options: ["default", "box"],
+    },
+  },
+  render: function Render(args) {
+    const [checked, setChecked] = useState(Boolean(args.defaultChecked));
+
+    useEffect(() => {
+      setChecked(Boolean(args.defaultChecked));
+    }, [args.defaultChecked]);
+
+    return (
+      <VStack className="w-80 gap-4">
+        <RBSwitchField
+          controlPlacement={args.controlPlacement}
+          description={args.description}
+          descriptionClassName={args.descriptionClassName}
+          invalid={args.invalid}
+          label={args.label}
+          labelClassName={args.labelClassName}
+          size={args.size}
+          type={args.type}
+        >
+          <RBSwitch
+            checked={checked}
+            disabled={args.disabled}
+            invalid={args.invalid}
+            size={args.size}
+            onCheckedChange={setChecked}
+          />
+        </RBSwitchField>
+      </VStack>
+    );
+  },
+};

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

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import {
+  RBTabs,
+  RBTabsList,
+  RBTabsTrigger,
+} from "@repo/rb-components/new_components";
+
+const meta = {
+  tags: ["autodocs"],
+  component: RBTabs,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    size: {
+      control: "select",
+      options: ["sm", "xs"],
+      table: {
+        type: {
+          summary: '"sm" | "xs"',
+        },
+      },
+    },
+    variant: {
+      control: "select",
+      options: ["default", "line"],
+      table: {
+        type: {
+          summary: '"default" | "line"',
+        },
+      },
+    },
+    orientation: {
+      control: "select",
+      options: ["horizontal", "vertical"],
+      description: "line variant 는 horizontal orientation 만 지원",
+      table: {
+        type: {
+          summary: '"horizontal" | "vertical"',
+        },
+      },
+    },
+  },
+} satisfies Meta<typeof RBTabs>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  args: {
+    size: "sm",
+    variant: "default",
+    orientation: "horizontal",
+  },
+  render: ({ orientation, size, variant }) => {
+    const resolvedOrientation = variant === "line" ? "horizontal" : orientation;
+
+    return (
+      <RBTabs
+        defaultValue="tab-1"
+        variant={variant}
+        size={size}
+        orientation={resolvedOrientation}
+      >
+        <RBTabsList>
+          <RBTabsTrigger value="tab-1">Tabs Text</RBTabsTrigger>
+          <RBTabsTrigger value="tab-2">Tabs Text</RBTabsTrigger>
+          <RBTabsTrigger value="tab-3">Tabs Text</RBTabsTrigger>
+        </RBTabsList>
+      </RBTabs>
+    );
+  },
+};