feat(component): add storybook (#5079)

packages/frontend/component/src/ui/checkbox/checkbox.stories.tsx

@@ -0,0 +1,65 @@
+import type { Meta, StoryFn } from '@storybook/react';
+import { useState } from 'react';
+
+import { Checkbox } from './checkbox';
+
+export default {
+  title: 'UI/Checkbox',
+  component: Checkbox,
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
+} satisfies Meta<typeof Checkbox>;
+
+export const Basic: StoryFn<typeof Checkbox> = props => {
+  const [checked, setChecked] = useState(props.checked);
+  const handleChange = (
+    _event: React.ChangeEvent<HTMLInputElement>,
+    checked: boolean
+  ) => {
+    setChecked(checked);
+    props.onChange?.(_event, checked);
+  };
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '1rem',
+        justifyContent: 'center',
+      }}
+    >
+      <Checkbox
+        style={{ fontSize: 14 }}
+        {...props}
+        checked={checked}
+        onChange={handleChange}
+      />
+      <Checkbox
+        style={{ fontSize: 16 }}
+        {...props}
+        checked={checked}
+        onChange={handleChange}
+      />
+      <Checkbox
+        style={{ fontSize: 18 }}
+        {...props}
+        checked={checked}
+        onChange={handleChange}
+      />
+      <Checkbox
+        style={{ fontSize: 24 }}
+        {...props}
+        checked={checked}
+        onChange={handleChange}
+      />
+    </div>
+  );
+};
+
+Basic.args = {
+  checked: true,
+  disabled: false,
+  indeterminate: false,
+  onChange: console.log,
+};