fixup: tweak eslint config for Storybook (#7708)

Opentrons · Apr 27, 2021 · bcd2fdb · bcd2fdb
1 parent 2d3a7b7
commit bcd2fdb
Show file tree

Hide file tree

Showing 27 changed files with 324 additions and 187 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -16,8 +16,6 @@ components/flow-types/**
 app-shell/lib/**
 discovery-client/lib/**
 **/lib/**/*.d.ts
-# TODO add story files back to linting once the are parsed by tsc
-**/*.stories.tsx
 
 # prettier
 **/package.json

diff --git a/.eslintrc.js b/.eslintrc.js
@@ -4,7 +4,7 @@ module.exports = {
   root: true,
 
   parserOptions: {
-    project: './*/tsconfig.json',
+    project: './tsconfig-eslint.json',
   },
 
   extends: ['standard-with-typescript', 'plugin:react/recommended', 'prettier'],
@@ -95,6 +95,13 @@ module.exports = {
         'jest/no-done-callback': 'warn',
       },
     },
+    {
+      files: ['**/*.stories.tsx'],
+      rules: {
+        'import/no-default-export': 'off',
+        '@typescript-eslint/consistent-type-assertions': 'off',
+      },
+    },
     {
       files: ['**/cypress/**'],
       extends: ['plugin:cypress/recommended'],

diff --git a/components/src/deck/Module.stories.tsx b/components/src/deck/Module.stories.tsx
@@ -30,16 +30,16 @@ export default {
 
 const Template: Story<React.ComponentProps<typeof ModuleComponent>> = args => {
   return (
-      <RobotWorkSpace deckDef={getDeckDefinitions()["ot2_standard"]}>
-        {({deckSlotsById}: RobotWorkSpaceRenderProps) => {
-          const slot =  deckSlotsById['7']
-          return (
-            <g transform={`translate(${slot.position[0]}, ${slot.position[1]})`} >
-                <ModuleComponent mode={args.mode} model={args.model} slot={slot}/>
-            </g>
-          )
-        }}
-      </RobotWorkSpace>
+    <RobotWorkSpace deckDef={getDeckDefinitions()['ot2_standard']}>
+      {({ deckSlotsById }: RobotWorkSpaceRenderProps) => {
+        const slot = deckSlotsById['7']
+        return (
+          <g transform={`translate(${slot.position[0]}, ${slot.position[1]})`}>
+            <ModuleComponent mode={args.mode} model={args.model} slot={slot} />
+          </g>
+        )
+      }}
+    </RobotWorkSpace>
   )
 }
 export const Module = Template.bind({})
@@ -49,14 +49,13 @@ Module.argTypes = {
       type: 'select',
       options: moduleModels,
     },
-    defaultValue: moduleModels[0]
+    defaultValue: moduleModels[0],
   },
   mode: {
     control: {
       type: 'select',
       options: displayModes,
     },
-    defaultValue: displayModes[0]
+    defaultValue: displayModes[0],
   },
 }
-
diff --git a/components/src/deck/RobotWorkSpace.stories.tsx b/components/src/deck/RobotWorkSpace.stories.tsx
@@ -1,6 +1,10 @@
 import * as React from 'react'
 import { RobotWorkSpace } from './RobotWorkSpace'
-import { RobotCoordsText, RobotCoordsForeignDiv, Module } from '@opentrons/components'
+import {
+  RobotCoordsText,
+  RobotCoordsForeignDiv,
+  Module,
+} from '@opentrons/components'
 import { getDeckDefinitions } from './getDeckDefinitions'
 
 import type { Story, Meta } from '@storybook/react'
@@ -38,7 +42,7 @@ const Template: Story<React.ComponentProps<typeof RobotWorkSpace>> = ({
 export const Deck = Template.bind({})
 Deck.args = {
   children: ({ deckSlotsById }) => {
-    const divSlot =  deckSlotsById['9']
+    const divSlot = deckSlotsById['9']
     const moduleSlot = deckSlotsById['10']
     const rectSlot = deckSlotsById['11']
     return (
@@ -57,7 +61,11 @@ Deck.args = {
           height={divSlot.boundingBox.yDimension}
         >
           <input
-            style={{ backgroundColor: 'lightgray', margin: '1rem', width: '6rem' }}
+            style={{
+              backgroundColor: 'lightgray',
+              margin: '1rem',
+              width: '6rem',
+            }}
             placeholder="example input"
           />
         </RobotCoordsForeignDiv>

diff --git a/components/src/forms/CheckboxField.stories.tsx b/components/src/forms/CheckboxField.stories.tsx
@@ -9,7 +9,9 @@ export default {
   component: CheckboxFieldComponent,
 } as Meta
 
-const Template: Story<React.ComponentProps<typeof CheckboxFieldComponent>> = args => {
+const Template: Story<
+  React.ComponentProps<typeof CheckboxFieldComponent>
+> = args => {
   const [isChecked, setIsChecked] = React.useState<boolean>(false)
   return (
     <CheckboxFieldComponent

diff --git a/components/src/forms/DropdownField.stories.tsx b/components/src/forms/DropdownField.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { DropdownField as DropdownFieldComponent} from './DropdownField'
+import { DropdownField as DropdownFieldComponent } from './DropdownField'
 
 import type { Story, Meta } from '@storybook/react'
 
@@ -9,7 +9,9 @@ export default {
   argTypes: { onChange: { action: 'clicked' } },
 } as Meta
 
-const Template: Story<React.ComponentProps<typeof DropdownFieldComponent>> = args => {
+const Template: Story<
+  React.ComponentProps<typeof DropdownFieldComponent>
+> = args => {
   const [selectedValue, setSelectedValue] = React.useState<string | null>(null)
   return (
     <DropdownFieldComponent

diff --git a/components/src/forms/FormGroup.stories.tsx b/components/src/forms/FormGroup.stories.tsx
@@ -10,14 +10,14 @@ export default {
   argTypes: { onChange: { action: 'clicked' } },
 } as Meta
 
-const Template: Story<React.ComponentProps<typeof FormGroupComponent>> = args => (
-  <FormGroupComponent {...args} />
-)
+const Template: Story<
+  React.ComponentProps<typeof FormGroupComponent>
+> = args => <FormGroupComponent {...args} />
 export const FormGroup = Template.bind({})
 FormGroup.args = {
   label: 'This is a FormGroup',
   children: [
-      <CheckboxField onChange={e => {}} key="first" label='first field'/>,
-      <CheckboxField onChange={e => {}} key="second" label='second field'/>
-  ]
+    <CheckboxField onChange={e => {}} key="first" label="first field" />,
+    <CheckboxField onChange={e => {}} key="second" label="second field" />,
+  ],
 }
diff --git a/components/src/forms/InputField.stories.tsx b/components/src/forms/InputField.stories.tsx
@@ -5,13 +5,15 @@ import { InputField as InputFieldComponent } from './InputField'
 
 import type { Story, Meta } from '@storybook/react'
 
-
 export default {
   title: 'Library/Molecules/Forms/Input Field',
 } as Meta
 
-
-const Template: Story<React.ComponentProps<typeof InputFieldComponent>> = ({value, onChange, ...args}) => {
+const Template: Story<React.ComponentProps<typeof InputFieldComponent>> = ({
+  value,
+  onChange,
+  ...args
+}) => {
   const [controlledValue, setControlledValue] = React.useState('')
   const secondaryCaption = controlledValue.length + '/12'
   const error = controlledValue.length > 12 ? 'Too many characters' : undefined
@@ -22,15 +24,16 @@ const Template: Story<React.ComponentProps<typeof InputFieldComponent>> = ({valu
         error={error}
         secondaryCaption={secondaryCaption}
         value={controlledValue}
-        onChange={e => setControlledValue(e.target.value)} />
+        onChange={e => setControlledValue(e.target.value)}
+      />
     </Box>
   )
 }
 export const InputField = Template.bind({})
 InputField.args = {
-  label: "Input field",
-  placeholder: "Placeholder Text",
-  units: "μL",
-  caption: "caption here",
+  label: 'Input field',
+  placeholder: 'Placeholder Text',
+  units: 'μL',
+  caption: 'caption here',
   isIndeterminate: false,
 }
diff --git a/components/src/forms/RadioGroup.stories.tsx b/components/src/forms/RadioGroup.stories.tsx
@@ -5,26 +5,31 @@ import { RadioGroup as RadioGroupComponent } from './RadioGroup'
 
 import type { Story, Meta } from '@storybook/react'
 
-
 export default {
   title: 'Library/Molecules/Forms/Radio Group',
 } as Meta
 
-
 const OPTIONS = [
   { name: 'Hazelnut', value: 'hazelnut' },
   { name: 'Chocolate', value: 'chocolate' },
   { name: 'Ginger', value: 'ginger' },
 ]
 
-const Template: Story<React.ComponentProps<typeof RadioGroupComponent>> = ({value, onChange, ...args}) => {
-  const [controlledValue, setControlledValue] = React.useState(args.options[0].value)
+const Template: Story<React.ComponentProps<typeof RadioGroupComponent>> = ({
+  value,
+  onChange,
+  ...args
+}) => {
+  const [controlledValue, setControlledValue] = React.useState(
+    args.options[0].value
+  )
   return (
     <Box width={SIZE_6}>
       <RadioGroupComponent
         {...args}
         value={controlledValue}
-        onChange={e => setControlledValue(e.target.value)} />
+        onChange={e => setControlledValue(e.target.value)}
+      />
     </Box>
   )
 }

diff --git a/components/src/forms/Select.stories.tsx b/components/src/forms/Select.stories.tsx
@@ -17,7 +17,8 @@ export const Basic = Template.bind({})
 Basic.parameters = {
   docs: {
     description: {
-      component: 'Thin wrapper around `react-select` to apply our Opentrons-specific styles. All props are passed directly to [`react-select`](https://react-select.com/props) except for `styles`, `components`, and `classNamePrefix`. The `className` prop appends to the `className` we pass `react-select`. Those props are not passed directly because they provide the base styling of the component'
+      component:
+        'Thin wrapper around `react-select` to apply our Opentrons-specific styles. All props are passed directly to [`react-select`](https://react-select.com/props) except for `styles`, `components`, and `classNamePrefix`. The `className` prop appends to the `className` we pass `react-select`. Those props are not passed directly because they provide the base styling of the component',
     },
   },
 }
@@ -33,7 +34,7 @@ export const GroupedOptions = Template.bind({})
 GroupedOptions.parameters = {
   docs: {
     description: {
-      component: 'You can also pass grouped options:'
+      component: 'You can also pass grouped options:',
     },
   },
 }
@@ -44,14 +45,14 @@ GroupedOptions.args = {
       options: [
         { label: 'DNA', value: 'dna' },
         { label: 'RNA', value: 'rna' },
-      ]
+      ],
     },
     {
       label: 'Polypeptides',
       options: [
-        {label: 'Dipeptide', value: 'dipeptide'},
-        {label: 'Tripeptide', value: 'Tripeptide'}
-      ]
+        { label: 'Dipeptide', value: 'dipeptide' },
+        { label: 'Tripeptide', value: 'Tripeptide' },
+      ],
     },
   ],
 }
@@ -60,7 +61,8 @@ export const Controlled = Template.bind({})
 Controlled.parameters = {
   docs: {
     description: {
-      component: 'Passing `value` controls the input. **Note that `value` has the same format as an entry in `options`**'
+      component:
+        'Passing `value` controls the input. **Note that `value` has the same format as an entry in `options`**',
     },
   },
 }
@@ -69,38 +71,39 @@ Controlled.args = {
   options: [
     { label: 'DNA', value: 'dna' },
     { label: 'RNA', value: 'rna' },
-    { label: 'Protein', value: 'protein'}
+    { label: 'Protein', value: 'protein' },
   ],
 }
 
 export const FormattedOptionLabel = Template.bind({})
 FormattedOptionLabel.parameters = {
   docs: {
     description: {
-      component: 'You can control the renders of individual options with the `formatOptionLabel` prop:'
+      component:
+        'You can control the renders of individual options with the `formatOptionLabel` prop:',
     },
   },
 }
 FormattedOptionLabel.args = {
   options: [
     { label: 'DNA', value: 'dna' },
     { label: 'RNA', value: 'rna' },
-    { label: 'Protein', value: 'protein'}
+    { label: 'Protein', value: 'protein' },
   ],
-  formatOptionLabel: (option, { context }) => (
+  formatOptionLabel: (option, { context }) =>
     context === 'menu' && option.value === 'rna' ? (
       <span style={{ color: 'green' }}>{option.label}</span>
     ) : (
       option.label
-    )
-  )
+    ),
 }
 
 export const StyleOverride = Template.bind({})
 StyleOverride.parameters = {
   docs: {
     description: {
-      component: "To override any styling, we use [`react-select`'s BEM](https://react-select.com/styles#using-classnames) class names with our specific prefix, which is `ot_select`. See `SelectField` for a specific example, where the background color of the `Control` element is modified if the field has an error"
+      component:
+        "To override any styling, we use [`react-select`'s BEM](https://react-select.com/styles#using-classnames) class names with our specific prefix, which is `ot_select`. See `SelectField` for a specific example, where the background color of the `Control` element is modified if the field has an error",
     },
   },
 }
@@ -109,6 +112,6 @@ StyleOverride.args = {
   options: [
     { label: 'DNA', value: 'dna' },
     { label: 'RNA', value: 'rna' },
-    { label: 'Protein', value: 'protein'}
+    { label: 'Protein', value: 'protein' },
   ],
-}
+}
diff --git a/components/src/forms/ToggleField.stories.tsx b/components/src/forms/ToggleField.stories.tsx
@@ -9,7 +9,9 @@ export default {
   component: ToggleField,
 } as Meta
 
-const Template: Story<React.ComponentProps<typeof ToggleFieldComponent>> = args => {
+const Template: Story<
+  React.ComponentProps<typeof ToggleFieldComponent>
+> = args => {
   const [isOn, setIsOn] = React.useState<boolean>(false)
   return (
     <ToggleFieldComponent

diff --git a/components/src/instrument/InstrumentDiagram.stories.tsx b/components/src/instrument/InstrumentDiagram.stories.tsx
@@ -6,7 +6,10 @@ import { InstrumentDiagram as InstrumentDiagramComponent } from './InstrumentDia
 
 import type { Story, Meta } from '@storybook/react'
 
-const allPipetteSpecsByDisplayNames = keyBy(getAllPipetteNames().map(getPipetteNameSpecs), 'displayName')
+const allPipetteSpecsByDisplayNames = keyBy(
+  getAllPipetteNames().map(getPipetteNameSpecs),
+  'displayName'
+)
 
 export default {
   title: 'Library/Organisms/Instrument Diagram',
@@ -24,12 +27,16 @@ export default {
         options: Object.keys(allPipetteSpecsByDisplayNames),
       },
       defaultValue: Object.keys(allPipetteSpecsByDisplayNames)[0],
-    }
-  }
+    },
+  },
 } as Meta
 
-
-const Template: Story<React.ComponentProps<typeof InstrumentDiagramComponent>> = ({pipetteSpecs, ...args}) => (
-  <InstrumentDiagramComponent {...args} pipetteSpecs={allPipetteSpecsByDisplayNames[pipetteSpecs]} />
+const Template: Story<
+  React.ComponentProps<typeof InstrumentDiagramComponent>
+> = ({ pipetteSpecs, ...args }) => (
+  <InstrumentDiagramComponent
+    {...args}
+    pipetteSpecs={allPipetteSpecsByDisplayNames[pipetteSpecs]}
+  />
 )
 export const InstrumentDiagram = Template.bind({})