From b4d79e489d706cb598c62ded91c2b9c6027b9c71 Mon Sep 17 00:00:00 2001
From: Igor Brasileiro <brasileiro456@gmail.com>
Date: Wed, 14 Jul 2021 16:44:02 -0300
Subject: [PATCH] chore(store-ui): Improve atoms pattern consistency (#819)

* Create type to avoid wrong props inside StoryBook argtypes

* Change TextArea state prop to variant

* Change Input state prop to variant

* Improve atoms argtypes type

* Improve molecules argtypes

* Fix Checkbox export

* Fix request changes
---
 .../atoms/Button/stories/Button.stories.tsx   | 23 ++++++------
 packages/store-ui/src/atoms/Checkbox/index.ts |  2 +-
 .../Checkbox/stories/Checkbox.stories.tsx     |  7 ++--
 .../src/atoms/Icon/stories/Icon.stories.tsx   | 33 +++++++++--------
 .../store-ui/src/atoms/Input/Input.test.tsx   |  4 +--
 packages/store-ui/src/atoms/Input/Input.tsx   | 14 ++++----
 .../src/atoms/Input/stories/Input.stories.tsx | 33 +++++++++--------
 .../atoms/Popover/stories/Popover.stories.tsx |  9 +++--
 .../src/atoms/Price/stories/Price.stories.tsx | 21 ++++++-----
 .../src/atoms/TextArea/TextArea.test.tsx      |  6 ++--
 .../store-ui/src/atoms/TextArea/TextArea.tsx  | 14 ++++----
 .../TextArea/stories/TextArea.stories.tsx     | 15 ++++----
 packages/store-ui/src/deprecated/index.ts     |  8 ++---
 packages/store-ui/src/index.ts                |  3 ++
 .../Bullets/stories/Bullets.stories.tsx       | 35 ++++++++++---------
 .../stories/SearchInput.stories.tsx           | 23 ++++++------
 packages/store-ui/src/typings/utils.d.ts      |  5 +++
 17 files changed, 144 insertions(+), 111 deletions(-)
 create mode 100644 packages/store-ui/src/typings/utils.d.ts

diff --git a/packages/store-ui/src/atoms/Button/stories/Button.stories.tsx b/packages/store-ui/src/atoms/Button/stories/Button.stories.tsx
index 4ac3a8a817..7f4bf8d951 100644
--- a/packages/store-ui/src/atoms/Button/stories/Button.stories.tsx
+++ b/packages/store-ui/src/atoms/Button/stories/Button.stories.tsx
@@ -1,6 +1,7 @@
 import type { Story } from '@storybook/react'
 import React from 'react'
 
+import type { ComponentArgTypes } from '../../../typings/utils'
 import type { ButtonProps } from '../Button'
 import Component from '../Button'
 import mdx from './Button.mdx'
@@ -13,19 +14,21 @@ const ButtonTemplate: Story<ButtonProps> = ({ children, onClick, testId }) => (
 
 export const Button = ButtonTemplate.bind({})
 
+const argTypes: ComponentArgTypes<ButtonProps> = {
+  children: {
+    control: { type: 'text' },
+    defaultValue: 'Button',
+  },
+  onClick: {
+    action: 'Button clicked',
+    table: { disable: true },
+  },
+}
+
 export default {
   title: 'Atoms/Button',
   component: Button,
-  argTypes: {
-    children: {
-      control: { type: 'text' },
-      defaultValue: 'Button',
-    },
-    onClick: {
-      action: 'Button clicked',
-      table: { disable: true },
-    },
-  },
+  argTypes,
   parameters: {
     docs: {
       page: mdx,
diff --git a/packages/store-ui/src/atoms/Checkbox/index.ts b/packages/store-ui/src/atoms/Checkbox/index.ts
index a671f3183b..c44fd9c41a 100644
--- a/packages/store-ui/src/atoms/Checkbox/index.ts
+++ b/packages/store-ui/src/atoms/Checkbox/index.ts
@@ -1,2 +1,2 @@
 export { default } from './Checkbox'
-export * from './Checkbox'
+export { Props as CheckboxProps } from './Checkbox'
diff --git a/packages/store-ui/src/atoms/Checkbox/stories/Checkbox.stories.tsx b/packages/store-ui/src/atoms/Checkbox/stories/Checkbox.stories.tsx
index 7b542f8eee..5f576fd3f5 100644
--- a/packages/store-ui/src/atoms/Checkbox/stories/Checkbox.stories.tsx
+++ b/packages/store-ui/src/atoms/Checkbox/stories/Checkbox.stories.tsx
@@ -1,6 +1,7 @@
-import type { Story, Meta, ArgTypes } from '@storybook/react'
+import type { Story, Meta } from '@storybook/react'
 import React from 'react'
 
+import type { ComponentArgTypes } from '../../../typings/utils'
 import type { Props as CheckboxProps } from '../Checkbox'
 import Component from '../Checkbox'
 import mdx from './Checkbox.mdx'
@@ -11,7 +12,7 @@ const CheckboxTemplate: Story<CheckboxProps> = (props) => (
 
 export const Checkbox = CheckboxTemplate.bind({})
 
-const controls: ArgTypes = {
+const controls: ComponentArgTypes<CheckboxProps> = {
   checked: {
     control: {
       type: 'boolean',
@@ -19,7 +20,7 @@ const controls: ArgTypes = {
   },
 }
 
-const actions: ArgTypes = {
+const actions: ComponentArgTypes<CheckboxProps> = {
   onClick: { action: 'clicked', table: { disable: true } },
 }
 
diff --git a/packages/store-ui/src/atoms/Icon/stories/Icon.stories.tsx b/packages/store-ui/src/atoms/Icon/stories/Icon.stories.tsx
index f8c5be91eb..6f496ffea8 100644
--- a/packages/store-ui/src/atoms/Icon/stories/Icon.stories.tsx
+++ b/packages/store-ui/src/atoms/Icon/stories/Icon.stories.tsx
@@ -5,6 +5,7 @@ import Component from '../Icon'
 import type { IconProps } from '../Icon'
 import mdx from './Icon.mdx'
 import ShoppingCart from './assets/ShoppingCart'
+import type { ComponentArgTypes } from '../../../typings/utils'
 
 const IconTemplate: Story<IconProps> = ({ style }) => (
   <Component style={style} component={<ShoppingCart />} />
@@ -12,24 +13,26 @@ const IconTemplate: Story<IconProps> = ({ style }) => (
 
 export const Icon = IconTemplate.bind({})
 
+const argTypes: ComponentArgTypes<Omit<IconProps, 'component'>> = {
+  style: {
+    control: { type: 'object' },
+    defaultValue: {
+      fontSize: '32px',
+      color: 'red',
+      display: 'inline-block',
+      lineHeight: 0,
+    },
+  },
+  onClick: {
+    action: 'Icon clicked',
+    table: { disable: true },
+  },
+}
+
 export default {
   title: 'Atoms/Icon',
   component: Icon,
-  argTypes: {
-    style: {
-      control: { type: 'object' },
-      defaultValue: {
-        fontSize: '32px',
-        color: 'red',
-        display: 'inline-block',
-        lineHeight: 0,
-      },
-    },
-    onClick: {
-      action: 'Icon clicked',
-      table: { disable: true },
-    },
-  },
+  argTypes,
   parameters: {
     docs: {
       page: mdx,
diff --git a/packages/store-ui/src/atoms/Input/Input.test.tsx b/packages/store-ui/src/atoms/Input/Input.test.tsx
index ebda256450..6e051ee27e 100644
--- a/packages/store-ui/src/atoms/Input/Input.test.tsx
+++ b/packages/store-ui/src/atoms/Input/Input.test.tsx
@@ -15,14 +15,14 @@ describe('Input', () => {
   })
   it('`data-error` is present', () => {
     const { getByPlaceholderText } = render(
-      <Input placeholder="Hello World!" state="error" />
+      <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!" state="success" />
+      <Input placeholder="Hello World!" variant="success" />
     )
 
     expect(getByPlaceholderText('Hello World!')).toHaveAttribute('data-success')
diff --git a/packages/store-ui/src/atoms/Input/Input.tsx b/packages/store-ui/src/atoms/Input/Input.tsx
index 0d53863181..ed9f9d4d52 100644
--- a/packages/store-ui/src/atoms/Input/Input.tsx
+++ b/packages/store-ui/src/atoms/Input/Input.tsx
@@ -4,9 +4,9 @@ import React, { forwardRef } from 'react'
 
 export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   /**
-   * Current state of the input.
+   * Current variant of the input.
    */
-  state?: 'success' | 'error'
+  variant?: 'success' | 'error'
   /**
    * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
    */
@@ -14,12 +14,12 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
 }
 
 const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
-  { state, testId = 'store-input', ...props },
+  { variant, testId = 'store-input', ...props },
   ref
 ) {
-  const states = {
-    'data-error': state === 'error' || undefined,
-    'data-success': state === 'success' || undefined,
+  const variants = {
+    'data-error': variant === 'error' || undefined,
+    'data-success': variant === 'success' || undefined,
   }
 
   return (
@@ -27,7 +27,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
       ref={ref}
       data-store-input
       data-testid={testId}
-      {...states}
+      {...variants}
       {...props}
     />
   )
diff --git a/packages/store-ui/src/atoms/Input/stories/Input.stories.tsx b/packages/store-ui/src/atoms/Input/stories/Input.stories.tsx
index 769e86a70c..bc1a34bd61 100644
--- a/packages/store-ui/src/atoms/Input/stories/Input.stories.tsx
+++ b/packages/store-ui/src/atoms/Input/stories/Input.stories.tsx
@@ -1,12 +1,13 @@
 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, state }) => {
-  const colorByState = {
+const InputTemplate: Story<InputProps> = ({ placeholder, variant }) => {
+  const colorByVariant = {
     default: 'black',
     success: 'green',
     error: 'red',
@@ -15,31 +16,33 @@ const InputTemplate: Story<InputProps> = ({ placeholder, state }) => {
   return (
     <Component
       style={{
-        borderColor: colorByState[state || 'default'],
+        borderColor: colorByVariant[variant || 'default'],
         borderStyle: 'solid',
       }}
       placeholder={placeholder}
-      state={state}
+      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: {
-    state: {
-      options: ['default', 'success', 'error'],
-      defaultValue: 'default',
-      control: { type: 'select' },
-    },
-    placeholder: {
-      control: { type: 'text' },
-      defaultValue: 'Input',
-    },
-  },
+  argTypes,
   parameters: {
     docs: {
       page: mdx,
diff --git a/packages/store-ui/src/atoms/Popover/stories/Popover.stories.tsx b/packages/store-ui/src/atoms/Popover/stories/Popover.stories.tsx
index 30359ef16b..d1a71b89b2 100644
--- a/packages/store-ui/src/atoms/Popover/stories/Popover.stories.tsx
+++ b/packages/store-ui/src/atoms/Popover/stories/Popover.stories.tsx
@@ -5,6 +5,7 @@ import Component from '../Popover'
 import Input from '../../Input'
 import type { PopoverProps } from '../Popover'
 import mdx from './Popover.mdx'
+import type { ComponentArgTypes } from '../../../typings/utils'
 
 const PopoverTemplate: Story<PopoverProps> = ({ children }) => {
   const ref = useRef(null)
@@ -27,11 +28,13 @@ const PopoverTemplate: Story<PopoverProps> = ({ children }) => {
 
 export const Popover = PopoverTemplate.bind({})
 
+const argTypes: ComponentArgTypes<Omit<PopoverProps, 'targetRef'>> = {
+  children: 'Whoa! Look at me!',
+}
+
 export default {
   title: 'Atoms/Popover',
-  argTypes: {
-    children: 'Whoa! Look at me!',
-  },
+  argTypes,
   parameters: {
     docs: {
       page: mdx,
diff --git a/packages/store-ui/src/atoms/Price/stories/Price.stories.tsx b/packages/store-ui/src/atoms/Price/stories/Price.stories.tsx
index 3e67fb629e..bdb7d1dbc6 100644
--- a/packages/store-ui/src/atoms/Price/stories/Price.stories.tsx
+++ b/packages/store-ui/src/atoms/Price/stories/Price.stories.tsx
@@ -4,6 +4,7 @@ import type { Story } from '@storybook/react'
 import Component from '../Price'
 import type { PriceProps } from '../Price'
 import mdx from './Price.mdx'
+import type { ComponentArgTypes } from '../../../typings/utils'
 
 const priceValue = 62.5
 
@@ -108,17 +109,19 @@ Custom.args = {
   value: priceValue,
 }
 
+const argTypes: ComponentArgTypes<Omit<PriceProps, 'value'>> = {
+  variant: {
+    options: ['selling', 'listing', 'spot', 'savings', 'installment'],
+    control: { type: 'select' },
+  },
+  formatter: {
+    table: { disable: true },
+  },
+}
+
 export default {
   title: 'Atoms/Price',
-  argTypes: {
-    variant: {
-      options: ['selling', 'listing', 'spot', 'savings', 'installment'],
-      control: { type: 'select' },
-    },
-    formatter: {
-      table: { disable: true },
-    },
-  },
+  argTypes,
   parameters: {
     docs: {
       page: mdx,
diff --git a/packages/store-ui/src/atoms/TextArea/TextArea.test.tsx b/packages/store-ui/src/atoms/TextArea/TextArea.test.tsx
index 37818ba3cd..172cb77f0e 100644
--- a/packages/store-ui/src/atoms/TextArea/TextArea.test.tsx
+++ b/packages/store-ui/src/atoms/TextArea/TextArea.test.tsx
@@ -13,14 +13,16 @@ describe('TextArea', () => {
   })
 
   it('state is error', () => {
-    const { getByTestId } = render(<TextArea testId={testId} state="error" />)
+    const { getByTestId } = render(<TextArea testId={testId} variant="error" />)
 
     expect(getByTestId(testId)).toHaveAttribute('data-error', 'true')
     expect(getByTestId(testId)).not.toHaveAttribute('data-success')
   })
 
   it('state is success', () => {
-    const { getByTestId } = render(<TextArea testId={testId} state="success" />)
+    const { getByTestId } = render(
+      <TextArea testId={testId} variant="success" />
+    )
 
     expect(getByTestId(testId)).toHaveAttribute('data-success', 'true')
     expect(getByTestId(testId)).not.toHaveAttribute('data-error')
diff --git a/packages/store-ui/src/atoms/TextArea/TextArea.tsx b/packages/store-ui/src/atoms/TextArea/TextArea.tsx
index 2bc146c682..e48f77aaf0 100644
--- a/packages/store-ui/src/atoms/TextArea/TextArea.tsx
+++ b/packages/store-ui/src/atoms/TextArea/TextArea.tsx
@@ -4,9 +4,9 @@ import React, { forwardRef } from 'react'
 export interface Props
   extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'children'> {
   /**
-   * Current state of the input.
+   * Current variant of the input.
    */
-  state?: 'success' | 'error'
+  variant?: 'success' | 'error'
   /**
    * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
    */
@@ -14,12 +14,12 @@ export interface Props
 }
 
 const TextArea = forwardRef<HTMLTextAreaElement, Props>(function TextArea(
-  { state, testId = 'store-textarea', ...props },
+  { variant, testId = 'store-textarea', ...props },
   ref
 ) {
-  const states = {
-    'data-success': state === 'success' || undefined,
-    'data-error': state === 'error' || undefined,
+  const variants = {
+    'data-success': variant === 'success' || undefined,
+    'data-error': variant === 'error' || undefined,
   }
 
   return (
@@ -27,7 +27,7 @@ const TextArea = forwardRef<HTMLTextAreaElement, Props>(function TextArea(
       ref={ref}
       data-store-textarea
       data-testid={testId}
-      {...states}
+      {...variants}
       {...props}
     />
   )
diff --git a/packages/store-ui/src/atoms/TextArea/stories/TextArea.stories.tsx b/packages/store-ui/src/atoms/TextArea/stories/TextArea.stories.tsx
index 15af45d8cc..fb06e9c1f6 100644
--- a/packages/store-ui/src/atoms/TextArea/stories/TextArea.stories.tsx
+++ b/packages/store-ui/src/atoms/TextArea/stories/TextArea.stories.tsx
@@ -1,13 +1,14 @@
 import React from 'react'
-import type { Story, Meta, ArgTypes } from '@storybook/react'
+import type { Story, Meta } from '@storybook/react'
 
 import Component from '../TextArea'
 import type { Props as TextAreaProps } from '../TextArea'
 import mdx from './TextArea.mdx'
+import type { ComponentArgTypes } from '../../../typings/utils'
 
 const TextAreaTemplate: Story<TextAreaProps> = (props) => {
-  const colorByState: Record<
-    NonNullable<TextAreaProps['state']> | 'default',
+  const colorByVariant: Record<
+    NonNullable<TextAreaProps['variant']> | 'default',
     string
   > = {
     default: 'black',
@@ -20,7 +21,7 @@ const TextAreaTemplate: Story<TextAreaProps> = (props) => {
       style={{
         borderWidth: 2,
         borderStyle: 'solid',
-        borderColor: colorByState[props.state || 'default'],
+        borderColor: colorByVariant[props.variant || 'default'],
       }}
       {...props}
     />
@@ -32,8 +33,8 @@ TextArea.args = {
   defaultValue: 'Write something here',
 }
 
-const controls: ArgTypes = {
-  state: {
+const controls: ComponentArgTypes<TextAreaProps> = {
+  variant: {
     options: ['default', 'success', 'error'],
     defaultValue: 'default',
     control: { type: 'select' },
@@ -48,7 +49,7 @@ const controls: ArgTypes = {
   },
 }
 
-const actions: ArgTypes = {
+const actions: ComponentArgTypes<TextAreaProps> = {
   onChange: { action: 'changed', table: { disable: true } },
 }
 
diff --git a/packages/store-ui/src/deprecated/index.ts b/packages/store-ui/src/deprecated/index.ts
index 935826ec9b..97cbc9ea0d 100644
--- a/packages/store-ui/src/deprecated/index.ts
+++ b/packages/store-ui/src/deprecated/index.ts
@@ -17,10 +17,10 @@ export {
   Label,
   Input as UIInput,
   Select,
-  Textarea,
+  Textarea as UITextarea,
   Text,
   Radio,
-  Checkbox,
+  Checkbox as UICheckbox,
   Slider,
   Field,
   Progress,
@@ -55,10 +55,10 @@ export type {
   LabelProps,
   InputProps as UIInputProps,
   SelectProps,
-  TextareaProps,
+  TextareaProps as UITextareaProps,
   TextProps,
   RadioProps,
-  CheckboxProps,
+  CheckboxProps as UICheckboxProps,
   SliderProps,
   ProgressProps,
   DonutProps,
diff --git a/packages/store-ui/src/index.ts b/packages/store-ui/src/index.ts
index 91502e2d6a..867eb33816 100644
--- a/packages/store-ui/src/index.ts
+++ b/packages/store-ui/src/index.ts
@@ -17,6 +17,9 @@ export type { PriceProps } from './atoms/Price'
 export { default as TextArea } from './atoms/TextArea'
 export type { TextAreaProps } from './atoms/TextArea'
 
+export { default as Checkbox } from './atoms/Checkbox'
+export type { CheckboxProps } from './atoms/Checkbox'
+
 // Molecules
 export { default as SearchInput } from './molecules/SearchInput'
 export type { SearchInputProps } from './molecules/SearchInput'
diff --git a/packages/store-ui/src/molecules/Bullets/stories/Bullets.stories.tsx b/packages/store-ui/src/molecules/Bullets/stories/Bullets.stories.tsx
index 1bc7444ff5..e062f1f48c 100644
--- a/packages/store-ui/src/molecules/Bullets/stories/Bullets.stories.tsx
+++ b/packages/store-ui/src/molecules/Bullets/stories/Bullets.stories.tsx
@@ -1,6 +1,7 @@
 import type { Story } from '@storybook/react'
 import React from 'react'
 
+import type { ComponentArgTypes } from '../../../typings/utils'
 import type { BulletsProps } from '../Bullets'
 import Component from '../Bullets'
 import mdx from './Bullets.mdx'
@@ -23,25 +24,27 @@ const BulletsTemplate: Story<BulletsProps> = ({
 
 export const Bullets = BulletsTemplate.bind({})
 
+const argTypes: ComponentArgTypes<BulletsProps> = {
+  totalQuantity: {
+    control: { type: 'number', min: 1 },
+    defaultValue: 5,
+    min: 1,
+  },
+  activeBullet: {
+    control: { type: 'number', min: 0 },
+    defaultValue: 3,
+    min: 0,
+  },
+  onClick: {
+    action: 'Bullet clicked',
+    table: { disable: true },
+  },
+}
+
 export default {
   title: 'Molecules/Bullets',
   component: Bullets,
-  argTypes: {
-    totalQuantity: {
-      control: { type: 'number', min: 1 },
-      defaultValue: 5,
-      min: 1,
-    },
-    activeBullet: {
-      control: { type: 'number', min: 0 },
-      defaultValue: 3,
-      min: 0,
-    },
-    onClick: {
-      action: 'Bullet clicked',
-      table: { disable: true },
-    },
-  },
+  argTypes,
   parameters: {
     docs: {
       page: mdx,
diff --git a/packages/store-ui/src/molecules/SearchInput/stories/SearchInput.stories.tsx b/packages/store-ui/src/molecules/SearchInput/stories/SearchInput.stories.tsx
index d747426a45..9d24cc9965 100644
--- a/packages/store-ui/src/molecules/SearchInput/stories/SearchInput.stories.tsx
+++ b/packages/store-ui/src/molecules/SearchInput/stories/SearchInput.stories.tsx
@@ -5,6 +5,7 @@ import type { SearchInputProps } from '../SearchInput'
 import Component from '../SearchInput'
 import mdx from './SearchInput.mdx'
 import Icon from './assets/CustomIcon'
+import type { ComponentArgTypes } from '../../../typings/utils'
 
 const DefaultTemplate: Story<SearchInputProps> = ({
   onSubmit,
@@ -22,18 +23,20 @@ const CustomIconTemplate: Story<SearchInputProps> = ({
 
 export const CustomIcon = CustomIconTemplate.bind({})
 
+const argTypes: ComponentArgTypes<SearchInputProps> = {
+  placeholder: {
+    control: { type: 'text' },
+    defaultValue: 'Search',
+  },
+  onSubmit: {
+    action: 'SearchInput submitted!',
+    table: { disable: true },
+  },
+}
+
 export default {
   title: 'Molecules/SearchInput',
-  argTypes: {
-    placeholder: {
-      control: { type: 'text' },
-      defaultValue: 'Search',
-    },
-    onSubmit: {
-      action: 'SearchInput submitted!',
-      table: { disable: true },
-    },
-  },
+  argTypes,
   parameters: {
     docs: {
       page: mdx,
diff --git a/packages/store-ui/src/typings/utils.d.ts b/packages/store-ui/src/typings/utils.d.ts
new file mode 100644
index 0000000000..9bcc4f0eff
--- /dev/null
+++ b/packages/store-ui/src/typings/utils.d.ts
@@ -0,0 +1,5 @@
+import type { ArgType } from '@storybook/react'
+
+export type ComponentArgTypes<T> = {
+  [K in keyof T]: ArgType
+}