Feat: adding select atom

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

@@ -0,0 +1,30 @@
+import { render } from '@testing-library/react'
+import React from 'react'
+
+import Input from '.'
+
+describe('Input', () => {
+  it('`data-store-input` is present', () => {
+    const { getByPlaceholderText } = render(
+      <Input placeholder="Hello World!" />
+    )
+
+    expect(getByPlaceholderText('Hello World!')).toHaveAttribute(
+      'data-store-input'
+    )
+  })
+  it('`data-error` is present', () => {
+    const { getByPlaceholderText } = render(
+      <Input placeholder="Hello World!" variant="error" />
+    )
+
+    expect(getByPlaceholderText('Hello World!')).toHaveAttribute('data-error')
+  })
+  it('`data-success` is present', () => {
+    const { getByPlaceholderText } = render(
+      <Input placeholder="Hello World!" variant="success" />
+    )
+
+    expect(getByPlaceholderText('Hello World!')).toHaveAttribute('data-success')
+  })
+})

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

@@ -0,0 +1,19 @@
+/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
+import type { SelectHTMLAttributes } from 'react'
+import React, { forwardRef } from 'react'
+
+export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+}
+
+const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(
+  { testId = 'store-select', ...props },
+  ref
+) {
+  return <select ref={ref} data-store-select data-testid={testId} {...props} />
+})
+
+export default Select

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

@@ -0,0 +1,2 @@
+export { default } from './Select'
+export type { SelectProps } from './Select'

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

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

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

@@ -0,0 +1,51 @@
+import type { Story } from '@storybook/react'
+import React from 'react'
+
+import type { ComponentArgTypes } from '../../../typings/utils'
+import type { InputProps } from '../Input'
+import Component from '../Input'
+import mdx from './Input.mdx'
+
+const InputTemplate: Story<InputProps> = ({ placeholder, variant }) => {
+  const colorByVariant = {
+    default: 'black',
+    success: 'green',
+    error: 'red',
+  }
+
+  return (
+    <Component
+      style={{
+        borderColor: colorByVariant[variant || 'default'],
+        borderStyle: 'solid',
+      }}
+      placeholder={placeholder}
+      variant={variant}
+    />
+  )
+}
+
+export const Input = InputTemplate.bind({})
+
+const argTypes: ComponentArgTypes<InputProps> = {
+  variant: {
+    options: ['default', 'success', 'error'],
+    defaultValue: 'default',
+    control: { type: 'select' },
+  },
+  placeholder: {
+    control: { type: 'text' },
+    defaultValue: 'Input',
+  },
+}
+
+export default {
+  title: 'Atoms/Input',
+  component: Input,
+  argTypes,
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+}