feat: add basic webui

apps/storybook/stories/carousel.stories.tsx

@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from '@konobangu/design-system/components/ui/carousel';
+
+/**
+ * A carousel with motion and swipe built using Embla.
+ */
+const meta: Meta<typeof Carousel> = {
+  title: 'ui/Carousel',
+  component: Carousel,
+  tags: ['autodocs'],
+  argTypes: {},
+  args: {
+    className: 'w-full max-w-xs',
+  },
+  render: (args) => (
+    <Carousel {...args}>
+      <CarouselContent>
+        {Array.from({ length: 5 }).map((_, index) => (
+          <CarouselItem key={index}>
+            <div className="flex aspect-square items-center justify-center rounded border bg-card p-6">
+              <span className="font-semibold text-4xl">{index + 1}</span>
+            </div>
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
+  ),
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof Carousel>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/**
+ * The default form of the carousel.
+ */
+export const Default: Story = {};
+
+/**
+ * Use the `basis` utility class to change the size of the carousel.
+ */
+export const Size: Story = {
+  render: (args) => (
+    <Carousel {...args} className="mx-12 w-full max-w-xs">
+      <CarouselContent>
+        {Array.from({ length: 5 }).map((_, index) => (
+          <CarouselItem key={index} className="basis-1/3">
+            <div className="flex aspect-square items-center justify-center rounded border bg-card p-6">
+              <span className="font-semibold text-4xl">{index + 1}</span>
+            </div>
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
+  ),
+  args: {
+    className: 'mx-12 w-full max-w-xs',
+  },
+};