feat: add basic webui

apps/storybook/stories/checkbox.stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Checkbox } from '@konobangu/design-system/components/ui/checkbox';
+
+/**
+ * A control that allows the user to toggle between checked and not checked.
+ */
+const meta: Meta<typeof Checkbox> = {
+  title: 'ui/Checkbox',
+  component: Checkbox,
+  tags: ['autodocs'],
+  argTypes: {},
+  args: {
+    id: 'terms',
+    disabled: false,
+  },
+  render: (args) => (
+    <div className="flex space-x-2">
+      <Checkbox {...args} />
+      <label
+        htmlFor={args.id}
+        className="font-medium text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50"
+      >
+        Accept terms and conditions
+      </label>
+    </div>
+  ),
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof Checkbox>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/**
+ * The default form of the checkbox.
+ */
+export const Default: Story = {};
+
+/**
+ * Use the `disabled` prop to disable the checkbox.
+ */
+export const Disabled: Story = {
+  args: {
+    id: 'disabled-terms',
+    disabled: true,
+  },
+};