feat(component): checkbox (#4665)

tests/storybook/src/stories/checkbox.stories.tsx

@@ -0,0 +1,64 @@
+import { Checkbox } from '@affine/component';
+import type { Meta, StoryFn } from '@storybook/react';
+import { useState } from 'react';
+
+export default {
+  title: 'AFFiNE/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,
+  intermediate: false,
+  onChange: console.log,
+};

tests/storybook/src/stories/input.stories.tsx

@@ -0,0 +1,42 @@
+import { Input } from '@affine/component';
+import { expect } from '@storybook/jest';
+import type { Meta, StoryFn } from '@storybook/react';
+import { userEvent, within } from '@storybook/testing-library';
+
+export default {
+  title: 'AFFiNE/Input',
+  component: Input,
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
+} satisfies Meta<typeof Input>;
+
+export const Basic: StoryFn<typeof Input> = () => {
+  return <Input data-testid="test-input" defaultValue="test" />;
+};
+
+Basic.play = async ({ canvasElement }) => {
+  const element = within(canvasElement);
+  const item = element.getByTestId('test-input') as HTMLInputElement;
+  expect(item).toBeTruthy();
+  expect(item.value).toBe('test');
+  await userEvent.clear(item);
+  await userEvent.type(item, 'test 2');
+  expect(item.value).toBe('test 2');
+};
+
+export const DynamicHeight: StoryFn<typeof Input> = () => {
+  return <Input width={200} data-testid="test-input" />;
+};
+
+DynamicHeight.play = async ({ canvasElement }) => {
+  const element = within(canvasElement);
+  const item = element.getByTestId('test-input') as HTMLInputElement;
+  expect(item).toBeTruthy();
+  // FIXME: the following is not correct
+  // expect(item.getBoundingClientRect().width).toBe(200);
+};
+
+export const NoBorder: StoryFn<typeof Input> = () => {
+  return <Input noBorder={true} data-testid="test-input" />;
+};