fix lint errors

Author: koji

app/src/DesignTokens/BorderRadius/BorderRadius.stories.tsx

@@ -5,8 +5,8 @@ import {
   COLORS,
   DIRECTION_COLUMN,
   Flex,
-  LegacyStyledText,
   SPACING,
+  StyledText,
   TYPOGRAPHY,
 } from '@opentrons/components'
 
@@ -17,13 +17,13 @@ export default {
 } as Meta
 
 interface BorderRadiusStorybookProps {
-  borderRadius: string[]
+  borderRadius: Array<[string, string]>
 }
 
 const Template: Story<BorderRadiusStorybookProps> = args => {
   const targetBorderRadiuses = args.borderRadius
     .filter(s => s[0].includes('borderRadius'))
-    .sort((a, b) => {
+    .sort((a: [string, string], b: [string, string]) => {
       const aValue = parseInt(a[1])
       const bValue = parseInt(b[1])
       return aValue - bValue
@@ -45,9 +45,9 @@ const Template: Story<BorderRadiusStorybookProps> = args => {
           width="100%"
           height="6rem"
         >
-          <LegacyStyledText as="h2" fontWeight={TYPOGRAPHY.fontWeightRegular}>
+          <StyledText as="h2" fontWeight={TYPOGRAPHY.fontWeightRegular}>
             {`${br[0]}" ${br[1]}`}
-          </LegacyStyledText>
+          </StyledText>
           <Box
             width="10rem"
             height="4rem"

app/src/DesignTokens/Spacing/Spacing.stories.tsx

@@ -19,17 +19,21 @@ export default {
 } as Meta
 
 interface SpacingsStorybookProps {
-  spacings: string[]
+  spacings: Array<[string, string]>
 }
 
 const Template: Story<SpacingsStorybookProps> = args => {
-  const targetSpacings = args.spacings.filter(s => !s[1].includes('auto'))
+  const targetSpacings = args.spacings.filter(
+    (s: [string, string]) => !s[1].includes('auto')
+  )
   // sort by rem value
-  const sortedSpacing = targetSpacings.sort((a, b) => {
-    const aValue = parseFloat(a[1].replace('rem', ''))
-    const bValue = parseFloat(b[1].replace('rem', ''))
-    return aValue - bValue
-  })
+  const sortedSpacing = targetSpacings.sort(
+    (a: [string, string], b: [string, string]) => {
+      const aValue = parseFloat(a[1].replace('rem', ''))
+      const bValue = parseFloat(b[1].replace('rem', ''))
+      return aValue - bValue
+    }
+  )
 
   const convertToPx = (remFormat: string): string => {
     const pxVal = Number(remFormat.replace('rem', '')) * 16
@@ -42,7 +46,7 @@ const Template: Story<SpacingsStorybookProps> = args => {
       gridGap={SPACING.spacing8}
       padding={SPACING.spacing24}
     >
-      {sortedSpacing.map((spacing, index) => (
+      {sortedSpacing.map((spacing: [string, string], index) => (
         <Flex
           key={`spacing_${index}`}
           flexDirection={DIRECTION_COLUMN}

app/src/DesignTokens/Typography/Typography.stories.tsx

@@ -71,7 +71,7 @@ export default {
   title: 'Design Tokens/Typography',
   argTypes: {
     text: {
-      type: 'text',
+      type: 'string',
     },
     styles: {
       control: {
@@ -139,10 +139,17 @@ const fontWeightForPairForLegacy = (style: string, weight: string): string => {
 
 const valueFromFlattenedInterp = (
   style: FlattenSimpleInterpolation,
-  valueName: str
+  valueName: string
 ): string => {
-  return style.reduce(
-    ([sawKey, value]: [boolean, null | string], el) => {
+  if (style == null) {
+    return ''
+  }
+  const styleArray = Array.isArray(style) ? style : [style]
+  const result = styleArray.reduce<[boolean, null | string]>(
+    ([sawKey, value], el) => {
+      if (el == null || typeof el !== 'string') {
+        return [sawKey, value]
+      }
       const thisEl = el.trim()
       if (sawKey && value == null) {
         return [sawKey, el]
@@ -157,6 +164,7 @@ const valueFromFlattenedInterp = (
     },
     [false, null]
   )[1]
+  return result ?? ''
 }
 
 const styleForPair = (

components/src/forms/RadioGroup.stories.tsx

@@ -22,7 +22,7 @@ const Template: Story<React.ComponentProps<typeof RadioGroupComponent>> = ({
   ...args
 }) => {
   const [controlledValue, setControlledValue] = React.useState<string>(
-    args?.options?.[0] != null ? args.options[0].value : ''
+    args?.options?.[0] != null ? (args.options[0].value as string) : ''
   )
   return (
     <Box width={SIZE_6}>

components/src/molecules/TextListTableContent/TextListTableContent.stories.tsx

@@ -17,7 +17,7 @@ export default {
       description: 'The text that appears above the table',
     },
     listTableHeaders: {
-      control: 'array',
+      control: { type: 'array' },
       description: 'Headers for the list table',
     },
     rowCount: {
@@ -59,7 +59,7 @@ const Template: Story<TextListTableContentStoryProps> = args => {
     return Array.from({ length: rowCount }, (_, i) => {
       return (
         // @ts-expect-error Works.
-        <tr key={`row-${i}`} css={rowStyle(numColumns)}>
+        <tr key={`row-${i}`} css={rowStyle(numColumns as number)}>
           {Array.from({ length: numColumns }, (_, j) => {
             const textIndex = (i + j) % loremIpsumSentences.length
             return (