feat(store-ui): Adding select atom (#876)

* Feat: adding select atom

package.json

@@ -55,3 +55,4 @@
     "@typescript-eslint/parser": "^4"
   }
 }
+

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

@@ -0,0 +1,38 @@
+import { render } from '@testing-library/react'
+import React from 'react'
+
+import Select from './Select'
+
+const optionsArray = [
+  ['great', 'Great'],
+  ['ok', 'Ok'],
+  ['bad', 'Bad'],
+]
+
+const mapPairToOption = (value: string, label: string) => {
+  return (
+    <option key={value} value={value}>
+      {label}
+    </option>
+  )
+}
+
+describe('Select', () => {
+  it('`data-store-select` is present', () => {
+    const { getByTestId } = render(
+      <Select testId="store-select">
+        {optionsArray.map(([value, label]) => {
+          return mapPairToOption(value, label)
+        })}
+      </Select>
+    )
+
+    expect(getByTestId('store-select')).toHaveAttribute('data-store-select')
+  })
+
+  it('select is empty when no options are given', () => {
+    const { getByTestId } = render(<Select testId="store-select" />)
+
+    expect(getByTestId('store-select')).toBeEmptyDOMElement()
+  })
+})

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

@@ -0,0 +1,22 @@
+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(
+  { children, testId = 'store-select', ...props },
+  ref
+) {
+  return (
+    <select ref={ref} data-store-select data-testid={testId} {...props}>
+      {children}
+    </select>
+  )
+})
+
+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 Select from '../Select'
+
+# Default
+
+<Canvas>
+  <Story id="atoms-select--select" />
+</Canvas>
+
+# Props
+
+<ArgsTable of={Select} />

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

@@ -0,0 +1,59 @@
+import type { Story } from '@storybook/react'
+import React from 'react'
+
+import type { ComponentArgTypes } from '../../../typings/utils'
+import type { SelectProps } from '../Select'
+import Component from '../Select'
+import mdx from './Select.mdx'
+
+const SelectTemplate: Story<SelectProps> = ({ options, ...props }) => {
+  return (
+    <Component {...props}>
+      {options.map(([value, label]) => {
+        return (
+          <option key={value} value={value}>
+            {label}
+          </option>
+        )
+      })}
+    </Component>
+  )
+}
+
+export const DefaultSelect = SelectTemplate.bind({})
+
+export const DisabledSelect = SelectTemplate.bind({})
+DisabledSelect.args = {
+  disabled: true,
+}
+
+export const MultipleSelect = SelectTemplate.bind({})
+MultipleSelect.args = {
+  multiple: true,
+}
+
+export const BaseValueSelect = SelectTemplate.bind({})
+BaseValueSelect.args = {
+  defaultValue: 'ok',
+}
+
+const argTypes: ComponentArgTypes<SelectProps> = {
+  options: {
+    control: { type: 'array' },
+    defaultValue: [
+      ['great', 'Great'],
+      ['ok', 'Ok'],
+      ['bad', 'Bad'],
+    ],
+  },
+}
+
+export default {
+  title: 'Atoms/Select',
+  argTypes,
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+}

packages/store-ui/src/deprecated/index.ts

@@ -16,7 +16,6 @@ export {
   Card,
   Label,
   Input as UIInput,
-  Select,
   Textarea as UITextarea,
   Text,
   Radio,
@@ -54,7 +53,6 @@ export type {
   CardProps,
   LabelProps,
   InputProps as UIInputProps,
-  SelectProps,
   TextareaProps as UITextareaProps,
   TextProps,
   RadioProps,
@@ -81,6 +79,10 @@ export type {
 // https://github.com/vtex/faststore/pull/558
 export { default as Spinner } from './Spinner'
 
+// Exporting with different names not to conflict with our atom
+export { Select as UISelect } from 'theme-ui'
+export { SelectProps as UISelectProps } from 'theme-ui'
+
 // Base components from @vtex-components
 // Drawer
 export { default as Drawer } from '@vtex-components/drawer'

packages/store-ui/src/index.ts

@@ -23,6 +23,9 @@ export type { CheckboxProps } from './atoms/Checkbox'
 export { default as Overlay } from './atoms/Overlay'
 export type { OverlayProps } from './atoms/Overlay'
 
+export { default as Select } from './atoms/Select'
+export type { SelectProps } from './atoms/Select'
+
 // Molecules
 export { default as Bullets } from './molecules/Bullets'
 export type { BulletsProps } from './molecules/Bullets'