feat: add basic webui

apps/storybook/stories/input-otp.stories.tsx

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { REGEXP_ONLY_DIGITS_AND_CHARS } from 'input-otp';
+
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from '@konobangu/design-system/components/ui/input-otp';
+
+/**
+ * Accessible one-time password component with copy paste functionality.
+ */
+const meta = {
+  title: 'ui/InputOTP',
+  component: InputOTP,
+  tags: ['autodocs'],
+  argTypes: {},
+  args: {
+    maxLength: 6,
+    pattern: REGEXP_ONLY_DIGITS_AND_CHARS,
+    children: null,
+  },
+
+  render: (args) => (
+    <InputOTP {...args} render={undefined}>
+      <InputOTPGroup>
+        <InputOTPSlot index={0} />
+        <InputOTPSlot index={1} />
+        <InputOTPSlot index={2} />
+        <InputOTPSlot index={3} />
+        <InputOTPSlot index={4} />
+        <InputOTPSlot index={5} />
+      </InputOTPGroup>
+    </InputOTP>
+  ),
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof InputOTP>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/**
+ * The default form of the InputOTP field.
+ */
+export const Default: Story = {};
+
+/**
+ * Use multiple groups to separate the input slots.
+ */
+export const SeparatedGroup: Story = {
+  render: (args) => (
+    <InputOTP {...args} render={undefined}>
+      <InputOTPGroup>
+        <InputOTPSlot index={0} />
+        <InputOTPSlot index={1} />
+        <InputOTPSlot index={2} />
+      </InputOTPGroup>
+      <InputOTPSeparator />
+      <InputOTPGroup>
+        <InputOTPSlot index={3} />
+        <InputOTPSlot index={4} />
+        <InputOTPSlot index={5} />
+      </InputOTPGroup>
+    </InputOTP>
+  ),
+};