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

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,

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'

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,15 +12,15 @@ const CheckboxTemplate: Story<CheckboxProps> = (props) => (
 
 export const Checkbox = CheckboxTemplate.bind({})
 
-const controls: ArgTypes = {
+const controls: ComponentArgTypes<CheckboxProps> = {
   checked: {
     control: {
       type: 'boolean',
     },
   },
 }
 
-const actions: ArgTypes = {
+const actions: ComponentArgTypes<CheckboxProps> = {
   onClick: { action: 'clicked', table: { disable: true } },
 }
 

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

@@ -5,31 +5,34 @@ 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 />} />
 )
 
 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,

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')

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

@@ -4,30 +4,30 @@ 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).
    */
   testId?: string
 }
 
 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 (
     <input
       ref={ref}
       data-store-input
       data-testid={testId}
-      {...states}
+      {...variants}
       {...props}
     />
   )

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,

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,

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,

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')

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

@@ -4,30 +4,30 @@ 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).
    */
   testId?: string
 }
 
 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 (
     <textarea
       ref={ref}
       data-store-textarea
       data-testid={testId}
-      {...states}
+      {...variants}
       {...props}
     />
   )