lint + prettier

.prettierrc

@@ -3,6 +3,6 @@
   "tabWidth": 2,
   "semi": false,
   "singleQuote": true,
-  "printWidth": 120,
+  "printWidth": 80,
   "bracketSpacing": true
 }

package.json

@@ -10,6 +10,7 @@
     "build-storybook": "build-storybook",
     "lint": "eslint ./src --ext .ts,.tsx",
     "lint:fix": "eslint ./src --fix --ext .ts,.tsx",
+    "prettier": "prettier --write ./src/**/*.{ts,tsx}",
     "rollup": "rollup -c",
     "start": "npm run storybook",
     "storybook": "start-storybook -p 6006",

src/components/Button/cmp.stories.tsx

@@ -1,26 +1,26 @@
-import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
 import { withDesign } from 'storybook-addon-designs'
 
-import Button from "./cmp";
-import { ButtonKind, ButtonProps, ButtonSize, ButtonVariant } from "./types";
+import Button from './cmp'
+import { ButtonKind, ButtonProps, ButtonSize, ButtonVariant } from './types'
 
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
-  title: "Components/UI/Button",
+  title: 'Components/UI/Button',
   component: Button,
   decorators: [withDesign],
   // argTypes: {
   //   iconPosition: { control: { type: 'inline-radio' } }
   // },
-} as ComponentMeta<typeof Button>;
+} as ComponentMeta<typeof Button>
 
 const defaultArgs: Partial<ButtonProps> = {
   label: 'Text',
   color: 'main2',
   variant: 'primary',
   kind: 'flat',
-  size: 'regular'
+  size: 'regular',
 }
 
 const defaultParams = {
@@ -34,16 +34,16 @@ const defaultParams = {
 
 // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
 // More on args: https://storybook.js.org/docs/react/writing-stories/args
-const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
+const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />
 
-export const Default = Template.bind({});
+export const Default = Template.bind({})
 Default.args = {
   ...defaultArgs,
   hover: false,
   active: false,
   focus: false,
   disabled: false,
-};
+}
 Default.parameters = {
   ...defaultParams,
 }
@@ -53,38 +53,49 @@ Default.parameters = {
 const CatalogTemplate: ComponentStory<typeof Button> = (args) => {
   args = {
     ...defaultArgs,
-    ...args
+    ...args,
   } as ButtonProps
 
   const colors: string[] = ['main0', 'main1', 'main2']
   const kinds: ButtonKind[] = ['neon', 'flat']
   const sizes: ButtonSize[] = ['big', 'regular']
-  const variants: ButtonVariant[] = ['primary', 'secondary', 'tertiary', 'text-only']
+  const variants: ButtonVariant[] = [
+    'primary',
+    'secondary',
+    'tertiary',
+    'text-only',
+  ]
 
-  const col1 = (kinds.length * sizes.length * variants.length) - sizes.length
-  const col2 = (sizes.length * variants.length)
-  const col3 = (variants.length)
+  const col1 = kinds.length * sizes.length * variants.length - sizes.length
+  const col2 = sizes.length * variants.length
+  const col3 = variants.length
 
   function Cell({ children, gc, gr, bg = false }: any) {
-    return (<div style={{
-      gridColumn: gc,
-      gridRow: gr,
-      padding: '5px',
-      background: bg ? 'rgba(255,255,255,0.2)' : undefined,
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-    }}>{children}</div>)
+    return (
+      <div
+        style={{
+          gridColumn: gc,
+          gridRow: gr,
+          padding: '5px',
+          background: bg ? 'rgba(255,255,255,0.2)' : undefined,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        {children}
+      </div>
+    )
   }
 
-
   return (
-    <div style={{
-      display: 'grid',
-      gridTemplateColumns: 'auto auto auto auto 1fr 1fr 1fr 1fr 1fr',
-      gap: '4px',
-    }}>
-
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: 'auto auto auto auto 1fr 1fr 1fr 1fr 1fr',
+        gap: '4px',
+      }}
+    >
       <Cell bg gc={`span 4`}></Cell>
       <Cell bg>Default</Cell>
       <Cell bg>Focus</Cell>
@@ -95,31 +106,53 @@ const CatalogTemplate: ComponentStory<typeof Button> = (args) => {
       {colors.map((color) => {
         return (
           <>
-            <Cell bg gr={`span ${col1}`}>{color}</Cell>
-            {kinds.map(kind => {
+            <Cell bg gr={`span ${col1}`}>
+              {color}
+            </Cell>
+            {kinds.map((kind) => {
               const isFlat = kind === 'flat'
               const removeCols = isFlat ? sizes.length : 0
 
               return (
                 <>
-                  <Cell bg gr={`span ${col2 - removeCols}`}>{kind}</Cell>
-                  {sizes.map(size => {
+                  <Cell bg gr={`span ${col2 - removeCols}`}>
+                    {kind}
+                  </Cell>
+                  {sizes.map((size) => {
                     const removeCols = isFlat ? 1 : 0
 
                     return (
                       <>
-                        <Cell bg gr={`span ${col3 - removeCols}`}>{size}</Cell>
-                        {variants.map(variant => {
+                        <Cell bg gr={`span ${col3 - removeCols}`}>
+                          {size}
+                        </Cell>
+                        {variants.map((variant) => {
                           if (variant === 'tertiary' && isFlat) return null
-                          const extraArgs = { ...args, kind, size, variant, color }
+                          const extraArgs = {
+                            ...args,
+                            kind,
+                            size,
+                            variant,
+                            color,
+                          }
                           return (
                             <>
                               <Cell bg>{variant}</Cell>
-                              <Cell><Button {...extraArgs} /></Cell>
-                              <Cell><Button {...extraArgs} focus /></Cell>
-                              <Cell><Button {...extraArgs} active /></Cell>
-                              <Cell><Button {...extraArgs} hover /></Cell>
-                              <Cell><Button {...extraArgs} disabled /></Cell>
+                              <Cell>
+                                <Button {...extraArgs} />
+                              </Cell>
+                              <Cell>
+                                <Button {...extraArgs} focus />
+                              </Cell>
+                              <Cell>
+                                <Button {...extraArgs} active />
+                              </Cell>
+                              <Cell>
+                                <Button {...extraArgs} hover />
+                              </Cell>
+                              <Cell>
+                                <Button {...extraArgs} disabled />
+                              </Cell>
                             </>
                           )
                         })}
@@ -132,16 +165,15 @@ const CatalogTemplate: ComponentStory<typeof Button> = (args) => {
           </>
         )
       })}
-
     </div>
   )
-};
+}
 
 export const Catalog = CatalogTemplate.bind({})
 Catalog.args = {
-  ...defaultArgs
-};
+  ...defaultArgs,
+}
 Catalog.parameters = {
   ...defaultParams,
-  controls: { include: [], hideNoControlsWarning: true }
-}
+  controls: { include: [], hideNoControlsWarning: true },
+}

src/components/Button/cmp.tsx

@@ -1,6 +1,6 @@
-import React, { useMemo } from "react";
-import { StyledButton } from "./styles";
-import { ButtonProps } from "./types";
+import React, { useMemo } from 'react'
+import { StyledButton } from './styles'
+import { ButtonProps } from './types'
 
 export const Button = ({
   variant = 'primary',
@@ -18,23 +18,24 @@ export const Button = ({
     return [
       hover ? '_hover' : '',
       active ? '_active' : '',
-      focus ? '_focus' : ''
+      focus ? '_focus' : '',
     ].join(' ')
   }, [hover, active, focus])
 
   return (
-    <StyledButton {...{
-      variant,
-      kind,
-      size,
-      color,
-      disabled,
-      className: classes,
-    }}
+    <StyledButton
+      {...{
+        variant,
+        kind,
+        size,
+        color,
+        disabled,
+        className: classes,
+      }}
     >
       {label}
     </StyledButton>
-  );
-};
+  )
+}
 
-export default Button;
+export default Button

src/components/Button/index.ts

@@ -1,2 +1,2 @@
-export { default } from "./cmp";
-export { ButtonProps } from "./types";
+export { default } from './cmp'
+export { ButtonProps } from './types'