feat(store-ui): Checkbox atom component (#813)

* Add checkbox atom component

* Change the default testId value

* Add actions and controls to Checkbox component

* Fix test ids from test

packages/store-ui/src/atoms/Checkbox/Checkbox.test.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+
+import Checkbox from './Checkbox'
+
+describe('Checkbox', () => {
+  it('data-store-checkbox is present', () => {
+    const { getByTestId } = render(<Checkbox testId="store-checkbox" />)
+
+    expect(getByTestId('store-checkbox')).toHaveAttribute('data-store-checkbox')
+  })
+
+  it('type checkbox is present', () => {
+    const { getByTestId } = render(<Checkbox testId="store-checkbox" />)
+
+    expect(getByTestId('store-checkbox')).toHaveAttribute('type', 'checkbox')
+  })
+})

packages/store-ui/src/atoms/Checkbox/Checkbox.tsx

@@ -0,0 +1,24 @@
+import React, { forwardRef } from 'react'
+import type { InputHTMLAttributes } from 'react'
+
+export interface Props
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  testId?: string
+}
+
+const Checkbox = forwardRef<HTMLInputElement, Props>(function Checkbox(
+  { testId = 'store-checkbox', ...props }: Props,
+  ref
+) {
+  return (
+    <input
+      ref={ref}
+      data-store-checkbox
+      data-testid={testId}
+      type="checkbox"
+      {...props}
+    />
+  )
+})
+
+export default Checkbox

packages/store-ui/src/atoms/Checkbox/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Checkbox'
+export * from './Checkbox'

packages/store-ui/src/atoms/Checkbox/stories/Checkbox.mdx

@@ -0,0 +1,12 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'
+import Checkbox from '../Checkbox'
+
+# Preview
+
+<Canvas>
+  <Story id="atoms-checkbox--checkbox" />
+</Canvas>
+
+# Props
+
+<ArgsTable of="Checkbox" />

packages/store-ui/src/atoms/Checkbox/stories/Checkbox.stories.tsx

@@ -0,0 +1,38 @@
+import type { Story, Meta, ArgTypes } from '@storybook/react'
+import React from 'react'
+
+import type { Props as CheckboxProps } from '../Checkbox'
+import Component from '../Checkbox'
+import mdx from './Checkbox.mdx'
+
+const CheckboxTemplate: Story<CheckboxProps> = (props) => (
+  <Component {...props} />
+)
+
+export const Checkbox = CheckboxTemplate.bind({})
+
+const controls: ArgTypes = {
+  checked: {
+    control: {
+      type: 'boolean',
+    },
+  },
+}
+
+const actions: ArgTypes = {
+  onClick: { action: 'clicked', table: { disable: true } },
+}
+
+export default {
+  title: 'Atoms/Checkbox',
+  component: Checkbox,
+  argTypes: {
+    ...controls,
+    ...actions,
+  },
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+} as Meta