From ed6ddff966d3a6286e4837d0abbe55bad8b399ef Mon Sep 17 00:00:00 2001
From: Bento Pereira <bento.pereira@vtex.com>
Date: Tue, 3 Aug 2021 13:32:01 -0300
Subject: [PATCH] Feat: adding select atom

---
 .../store-ui/src/atoms/Select/Select.test.tsx | 30 +++++++++++
 packages/store-ui/src/atoms/Select/Select.tsx | 19 +++++++
 packages/store-ui/src/atoms/Select/index.ts   |  2 +
 .../src/atoms/Select/stories/Select.mdx       | 12 +++++
 .../atoms/Select/stories/Select.stories.tsx   | 51 +++++++++++++++++++
 5 files changed, 114 insertions(+)
 create mode 100644 packages/store-ui/src/atoms/Select/Select.test.tsx
 create mode 100644 packages/store-ui/src/atoms/Select/Select.tsx
 create mode 100644 packages/store-ui/src/atoms/Select/index.ts
 create mode 100644 packages/store-ui/src/atoms/Select/stories/Select.mdx
 create mode 100644 packages/store-ui/src/atoms/Select/stories/Select.stories.tsx

diff --git a/packages/store-ui/src/atoms/Select/Select.test.tsx b/packages/store-ui/src/atoms/Select/Select.test.tsx
new file mode 100644
index 0000000000..6e051ee27e
--- /dev/null
+++ b/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')
+  })
+})
diff --git a/packages/store-ui/src/atoms/Select/Select.tsx b/packages/store-ui/src/atoms/Select/Select.tsx
new file mode 100644
index 0000000000..56714dd673
--- /dev/null
+++ b/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
diff --git a/packages/store-ui/src/atoms/Select/index.ts b/packages/store-ui/src/atoms/Select/index.ts
new file mode 100644
index 0000000000..87f0787f67
--- /dev/null
+++ b/packages/store-ui/src/atoms/Select/index.ts
@@ -0,0 +1,2 @@
+export { default } from './Select'
+export type { SelectProps } from './Select'
diff --git a/packages/store-ui/src/atoms/Select/stories/Select.mdx b/packages/store-ui/src/atoms/Select/stories/Select.mdx
new file mode 100644
index 0000000000..f7d26ce3f9
--- /dev/null
+++ b/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} />
diff --git a/packages/store-ui/src/atoms/Select/stories/Select.stories.tsx b/packages/store-ui/src/atoms/Select/stories/Select.stories.tsx
new file mode 100644
index 0000000000..bc1a34bd61
--- /dev/null
+++ b/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,
+    },
+  },
+}