From c81243add03d1705e80a20b6603ce0750f339b78 Mon Sep 17 00:00:00 2001
From: Marcelo Ludovino <marcelo.docutec@gmail.com>
Date: Fri, 19 May 2023 16:05:01 -0300
Subject: [PATCH] feat: :sparkles: Add select

---
 package.json                          |  2 +-
 src/components/atoms/Select/index.tsx | 26 +++++++++++++++++
 src/stories/Select.stories.tsx        | 40 +++++++++++++++++++++++++++
 3 files changed, 67 insertions(+), 1 deletion(-)
 create mode 100644 src/components/atoms/Select/index.tsx
 create mode 100644 src/stories/Select.stories.tsx

diff --git a/package.json b/package.json
index a77aa04..54be526 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
     "name": "Marcelo Ludovino",
     "email": "marcelo.docutec@gmail.com"
   },
-  "version": "0.0.8",
+  "version": "0.0.10",
   "type": "module",
   "engines": {
     "node": ">=18.0.0"
diff --git a/src/components/atoms/Select/index.tsx b/src/components/atoms/Select/index.tsx
new file mode 100644
index 0000000..8fb8f0c
--- /dev/null
+++ b/src/components/atoms/Select/index.tsx
@@ -0,0 +1,26 @@
+import { FC } from 'react'
+
+import { MenuItem } from '@mui/material'
+import MuiSelect, { SelectProps } from '@mui/material/Select'
+
+export interface MuiSelectProps extends SelectProps {
+  options: string[]
+}
+
+export const Select: FC<MuiSelectProps> = ({
+  options,
+  label = '',
+  ...props
+}) => {
+  return (
+    <MuiSelect {...props}>
+      {options.map(option => {
+        return (
+          <MenuItem value={option} key={option}>
+            {option}
+          </MenuItem>
+        )
+      })}
+    </MuiSelect>
+  )
+}
diff --git a/src/stories/Select.stories.tsx b/src/stories/Select.stories.tsx
new file mode 100644
index 0000000..f65d490
--- /dev/null
+++ b/src/stories/Select.stories.tsx
@@ -0,0 +1,40 @@
+import type { Meta, StoryFn } from '@storybook/react'
+
+import { Select } from '../components/atoms/Select'
+
+export default {
+  title: 'Atoms/Select',
+  component: Select,
+  tags: ['autodocs'],
+  argTypes: {},
+} as Meta<typeof Select>
+
+type Story = StoryFn<typeof Select>
+
+const Template: Story = args => {
+  return (
+    <Select
+      {...args}
+      options={['Ambos', 'Activo', 'Inactivo', 'Lorem ipsum dolor sit amet']}
+      label='Estado'
+    />
+  )
+}
+
+export const Standard = Template.bind({})
+Standard.args = {
+  variant: 'standard',
+  defaultValue: 'Ambos',
+}
+
+export const Outlined = Template.bind({})
+Outlined.args = {
+  variant: 'outlined',
+  defaultValue: 'Ambos',
+}
+
+export const DefaultLongText = Template.bind({})
+DefaultLongText.args = {
+  variant: 'outlined',
+  defaultValue: 'Lorem ipsum dolor sit amet',
+}