Fix typescript and lint errors in stories and storybook config

Author: thayannevls

.github/CONTRIBUTING.md

@@ -29,6 +29,7 @@ Example:
     └── components
         └── Button
             ├── index.tsx
+            ├── index.test.tsx
             └── button.stories.tsx
 
 ```

.github/PULL_REQUEST_TEMPLATE.md

@@ -12,7 +12,6 @@
 
 <!-- Add the code that is necessary to test your change in the Playground-->
 
-
 <details>
 <summary>Add this code in <code>react/playground/Playground.tsx</code>:</summary>
 

.storybook/main.js

@@ -1,4 +1,4 @@
-const path = require('path');
+const path = require('path')
 
 const custom = require('../config/webpack.config.js')
 

.storybook/manager.js

@@ -1,5 +1,5 @@
-import {addons} from '@storybook/addons';
-import {create} from '@storybook/theming';
+import { addons } from '@storybook/addons'
+import { create } from '@storybook/theming'
 
 addons.setConfig({
   panelPosition: 'bottom',
@@ -16,10 +16,9 @@ addons.setConfig({
     // Typography
     fontBase: '"Fabriga", sans-serif',
     fontCode: 'monospace',
-
 
     brandTitle: 'VTEX Styleguide',
     brandUrl: '/',
     brandImage: null,
   }),
-});
+})

.storybook/preview.js

@@ -10,4 +10,4 @@ addParameters({
   },
 })
 
-addDecorator(story => (<div style={{padding: '10px'}}>{story()}</div>)) // Add padding in the canvas
+addDecorator(story => (<div style={{padding: '10px'}}>{story()}</div>))

package.json

@@ -29,7 +29,7 @@
     "prepare": "yarn --cwd react --ignore-scripts",
     "postreleasy": "vtex publish --public --verbose",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "build:storybook": "build-storybook"
   },
   "devDependencies": {
     "@babel/cli": "^7.5.5",

react/components/Button/button.stories.tsx

@@ -1,21 +1,29 @@
 import React from 'react'
 import { withA11y } from '@storybook/addon-a11y'
-import { withKnobs, text, boolean, select } from "@storybook/addon-knobs"
+import { withKnobs, text, boolean, select } from '@storybook/addon-knobs'
 import { action } from '@storybook/addon-actions'
 
 import Button from '.'
 
 export default {
   title: 'Components|Button',
   component: Button,
-  decorators: [withA11y, withKnobs]
+  decorators: [withA11y, withKnobs],
 }
 
-const variations = ['primary', 'secondary', 'tertiary', 'danger', 'danger-tertiary', 'inverted-tertiary']
+const variations = [
+  'primary',
+  'secondary',
+  'tertiary',
+  'danger',
+  'danger-tertiary',
+  'inverted-tertiary',
+]
 const sizes = ['small', 'regular', 'large']
 
 export const Default = () => (
   <Button
+    type="button"
     variation={select('Variation', variations, 'primary')}
     isLoading={boolean('Is loading', false)}
     disabled={boolean('Disabled', false)}
@@ -24,14 +32,12 @@ export const Default = () => (
     onClick={action('button-click')}
     onFocus={action('button-focus')}
   >
-    {text("Label", "With a text")}
+    {text('Label', 'With a text')}
   </Button>
 )
 
 export const withLoadingState = () => (
-  <Button
-    isLoading={true}
-  >
+  <Button type="button" isLoading>
     Loading
   </Button>
 )
@@ -40,16 +46,21 @@ export const withDiffentVariations = () => (
   <>
     {variations.map(variation => (
       <>
-        <Button variation={variation}>{variation}</Button>
-        <br/>
-        <br/>
+        <Button type="button" variation={variation}>
+          {variation}
+        </Button>
+        <br />
+        <br />
       </>
     ))}
   </>
 )
 
 export const withOnMouseEvents = () => (
   <Button
+    type="button"
+    onFocus={() => null}
+    onBlur={() => null}
     onMouseDown={action('button-on-mouse-down')}
     onMouseEnter={action('button-on-mouse-enter')}
     onMouseOver={action('button-on-mouse-over')}
@@ -65,9 +76,11 @@ export const withDifferentSizes = () => (
   <>
     {sizes.map(size => (
       <>
-        <Button size={size}>{size}</Button>
-        <br/>
-        <br/>
+        <Button type="button" size={size}>
+          {size}
+        </Button>
+        <br />
+        <br />
       </>
     ))}
   </>

react/components/Tooltip/tooltip.stories.tsx

@@ -1,32 +1,31 @@
 import React from 'react'
-import { withKnobs, text, boolean, select, number } from "@storybook/addon-knobs"
+import { withKnobs, text, select, number } from '@storybook/addon-knobs'
 
+import { Position } from './TooltipPopup'
 import Tooltip from '.'
 import Button from '../Button'
 
 export default {
   title: 'Components|Tooltip',
   component: Tooltip,
-  decorators: [withKnobs]
+  decorators: [withKnobs],
 }
 
-const positions = ['top', 'left', 'right', 'bottom']
+const positions: Position[] = ['top', 'left', 'right', 'bottom']
 
 export const Default = () => (
   <Tooltip
     label={text('Label', 'Tooltip Label')}
     trigger={select('Trigger', ['click', 'hover', 'focus'], 'hover')}
-    wordBreak={select('Word Break', ['normal', 'break-all', 'keep-all', 'break-word'], 'normal')}
-    position={select('Position', positions, 'left')}
+    wordBreak={select(
+      'Word Break',
+      ['normal', 'break-all', 'keep-all', 'break-word'],
+      'normal'
+    )}
+    position={select('Position', positions, 'left') ?? ''}
     delay={number('Delay(ms)', 0)}
-    fallbackPosition={select('Fallback Position', positions, 'right')}
+    fallbackPosition={select('Fallback Position', positions, 'right') ?? ''}
   >
-    <Button>Button</Button>
-  </Tooltip>
-)
-
-export const AlwaysVisible = () => (
-  <Tooltip label="Tooltip Label" trigger="focus">
-    <Button autoFocus={true}>Button with focus</Button>
+    <Button type="button">Button</Button>
   </Tooltip>
 )

react/tsconfig.json

@@ -6,6 +6,11 @@
     "typeRoots": ["node_modules/@types"],
     "types": ["node", "jest"]
   },
-  "include": ["./typings/*.d.ts", "./**/*.tsx", "./**/*.ts", "./**/*.stories.tsx"],
+  "include": [
+    "./typings/*.d.ts",
+    "./**/*.tsx",
+    "./**/*.ts",
+    "./**/*.stories.tsx"
+  ],
   "exclude": ["node_modules", "*.md"]
 }