feat(store-ui): components migration to .tsx + .mdx and update storybook version to v6.3

packages/store-ui/.storybook/stories/releases/v0.x.x/changelog-template.stories.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs/blocks'
+import { Meta } from '@storybook/addon-docs'
 
 <Meta title="Releases/v0.x.x/CHANGELOG - template" />
 

packages/store-ui/.storybook/stories/releases/v0.x.x/migration-template.stories.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs/blocks'
+import { Meta } from '@storybook/addon-docs'
 
 <Meta title="Releases/v0.x.x/Migration Guide - template" />
 

packages/store-ui/.storybook/theme.js

@@ -4,13 +4,13 @@ import { version } from '../package.json'
 export default create({
   base: 'light',
 
-  colorPrimary: '#f71963',
-  colorSecondary: '#f71963',
+  colorPrimary: '#05a0c7',
+  colorSecondary: '#05a0c7',
 
   // UI
   appBg: 'white',
   appContentBg: 'white',
-  appBorderColor: '#f71963',
+  appBorderColor: '#05a0c7',
   appBorderRadius: 4,
 
   // Typography
@@ -22,13 +22,13 @@ export default create({
 
   // Toolbar default and active colors
   barTextColor: 'black',
-  barSelectedColor: '#f71963',
+  barSelectedColor: '#05a0c7',
   barBg: 'white',
-  barBorder: '#f71963',
+  barBorder: '#05a0c7',
 
   // Form colors
   inputBg: 'white',
-  inputBorder: '#f71963',
+  inputBorder: '#05a0c7',
   inputTextColor: 'black',
   inputBorderRadius: 4,
 

packages/store-ui/package.json

@@ -75,13 +75,13 @@
   "devDependencies": {
     "@babel/core": "^7.13.16",
     "@size-limit/preset-small-lib": "^4.11.0",
-    "@storybook/addon-actions": "^6.2.9",
-    "@storybook/addon-docs": "^6.2.9",
-    "@storybook/addon-essentials": "^6.2.9",
-    "@storybook/addon-links": "^6.2.9",
-    "@storybook/addon-storysource": "^6.2.9",
-    "@storybook/addons": "^6.2.9",
-    "@storybook/react": "^6.2.9",
+    "@storybook/addon-actions": "^6.3.1",
+    "@storybook/addon-docs": "^6.3.1",
+    "@storybook/addon-essentials": "^6.3.1",
+    "@storybook/addon-links": "^6.3.1",
+    "@storybook/addon-storysource": "^6.3.1",
+    "@storybook/addons": "^6.3.1",
+    "@storybook/react": "^6.3.1",
     "@testing-library/jest-dom": "^5.12.0",
     "@testing-library/react": "^11.2.6",
     "@testing-library/user-event": "^13.1.8",

packages/store-ui/src/atoms/Button/stories/Button.mdx

@@ -0,0 +1,12 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'
+import Button from '../Button'
+
+# Preview
+
+<Canvas>
+  <Story id="atoms-button--button" />
+</Canvas>
+
+# Props
+
+<ArgsTable of={Button} />

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

@@ -0,0 +1,34 @@
+import type { Story } from '@storybook/react'
+import React from 'react'
+
+import type { ButtonProps } from '../Button'
+import Component from '../Button'
+import mdx from './Button.mdx'
+
+const ButtonTemplate: Story<ButtonProps> = ({ children, onClick, testId }) => (
+  <Component onClick={onClick} testId={testId}>
+    {children}
+  </Component>
+)
+
+export const Button = ButtonTemplate.bind({})
+
+export default {
+  title: 'Atoms/Button',
+  component: Button,
+  argTypes: {
+    children: {
+      control: { type: 'text' },
+      defaultValue: 'Button',
+    },
+    onClick: {
+      action: 'Button clicked',
+      table: { disable: true },
+    },
+  },
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+}

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

@@ -0,0 +1,12 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'
+import Icon from '../Icon'
+
+# Preview
+
+<Canvas>
+  <Story id="atoms-icon--icon" />
+</Canvas>
+
+# Props
+
+<ArgsTable of={Icon} />

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

@@ -0,0 +1,38 @@
+import React from 'react'
+import type { Story } from '@storybook/react'
+
+import Component from '../Icon'
+import type { IconProps } from '../Icon'
+import mdx from './Icon.mdx'
+import ShoppingCart from './assets/ShoppingCart'
+
+const IconTemplate: Story<IconProps> = ({ style }) => (
+  <Component style={style} component={<ShoppingCart />} />
+)
+
+export const Icon = IconTemplate.bind({})
+
+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 },
+    },
+  },
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+}

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

@@ -0,0 +1,23 @@
+import React from 'react'
+import type { FC } from 'react'
+
+// icon by feathericons
+const ShoppingCart: FC = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <circle cx="9" cy="21" r="1" />
+    <circle cx="20" cy="21" r="1" />
+    <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6" />
+  </svg>
+)
+
+export default ShoppingCart

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

@@ -1,7 +1,7 @@
 import { render } from '@testing-library/react'
 import React from 'react'
 
-import Input from './Input'
+import Input from '.'
 
 describe('Input', () => {
   it('`data-store-input` is present', () => {

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

@@ -3,7 +3,13 @@ import type { InputHTMLAttributes } from 'react'
 import React, { forwardRef } from 'react'
 
 export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  /**
+   * Current state of the input.
+   */
   state?: 'success' | 'error'
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
   testId?: string
 }
 

packages/store-ui/src/atoms/Input/stories/Input.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} />

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

@@ -0,0 +1,48 @@
+import type { Story } from '@storybook/react'
+import React from 'react'
+
+import type { InputProps } from '../Input'
+import Component from '../Input'
+import mdx from './Input.mdx'
+
+const InputTemplate: Story<InputProps> = ({ placeholder, state }) => {
+  const colorByState = {
+    default: 'black',
+    success: 'green',
+    error: 'red',
+  }
+
+  return (
+    <Component
+      style={{
+        borderColor: colorByState[state || 'default'],
+        borderStyle: 'solid',
+      }}
+      placeholder={placeholder}
+      state={state}
+    />
+  )
+}
+
+export const Input = InputTemplate.bind({})
+
+export default {
+  title: 'Atoms/Input',
+  component: Input,
+  argTypes: {
+    state: {
+      options: ['default', 'success', 'error'],
+      defaultValue: 'default',
+      control: { type: 'select' },
+    },
+    placeholder: {
+      control: { type: 'text' },
+      defaultValue: 'Input',
+    },
+  },
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+}