fix lint problems

ensdomains · Aug 7, 2024 · 5222a0e · 5222a0e
1 parent 89c9ad8
commit 5222a0e
Show file tree

Hide file tree

Showing 10 changed files with 134 additions and 109 deletions.
diff --git a/components/src/components/atoms/DynamicPopover/utils/getValueForTransitionState.ts b/components/src/components/atoms/DynamicPopover/utils/getValueForTransitionState.ts
@@ -76,7 +76,7 @@ const transitionStateValues: {
   },
 }
 
-type Property = keyof typeof transitionStateValues['unmounted']
+type Property = keyof (typeof transitionStateValues)['unmounted']
 
 export const getValueForTransitionState = (
   state: TransitionState['status'],

diff --git a/components/src/components/atoms/RecordItem/RecordItem.tsx b/components/src/components/atoms/RecordItem/RecordItem.tsx
@@ -190,68 +190,68 @@ export const RecordItem = React.forwardRef<
     const hasPrefix = !!icon || !!keyLabel
     const hasLabels = !!keyLabel || !!keySublabel
 
-  const KeyLabel =
-    typeof keyLabel === 'string' ? (
-      <Typography
-        color="grey"
-        ellipsis={!inline}
-        fontVariant={size === 'large' ? 'bodyBold' : 'smallBold'}
-        textAlign="left"
-        width="$full"
-      >
-        {keyLabel}
-      </Typography>
-    ) : (
-      keyLabel
-    )
-
-  const KeySublabel =
-    typeof keySublabel === 'string' ? (
-      <Typography
-        color="grey"
-        ellipsis={!inline}
-        fontVariant={size === 'large' ? 'smallBold' : 'extraSmallBold'}
-        textAlign="left"
-        width="$full"
-      >
-        {keySublabel}
-      </Typography>
-    ) : (
-      keySublabel
-    )
-  const PostfixProps = postfixIcon 
-    ? { as: postfixIcon } 
-    : link
-    ? { $rotate: true, as: UpArrowSVG }
-    : copied
-    ? { as: CheckSVG }
-    : { as: CopySVG }
+    const KeyLabel =
+      typeof keyLabel === 'string' ? (
+        <Typography
+          color="grey"
+          ellipsis={!inline}
+          fontVariant={size === 'large' ? 'bodyBold' : 'smallBold'}
+          textAlign="left"
+          width="$full"
+        >
+          {keyLabel}
+        </Typography>
+      ) : (
+        keyLabel
+      )
 
-  return (
-    <ContainerBox $inline={inline} as={asProp} {...generatedProps}>
-      {hasPrefix && (
-        <PrefixBox $inline={inline} $size={size}>
-          {icon && <PrefixSVGBox as={icon as React.ReactElement} />}
-          {hasLabels && (
-            <PrefixLabelsContainerBox $inline={inline}>
-              {KeyLabel}
-              {KeySublabel}
-            </PrefixLabelsContainerBox>
-          )}
-        </PrefixBox>
-      )}
-      <Typography
-        flex="1"
-        fontVariant={size === 'large' ? 'body' : 'small'}
-        textAlign="left"
-        wordBreak={inline ? 'normal' : 'break-all'}
-      >
-        {children}
-      </Typography>
-      <TrailingSVGBox {...(PostfixProps as any)} />
-    </ContainerBox>
-  )
-})
+    const KeySublabel =
+      typeof keySublabel === 'string' ? (
+        <Typography
+          color="grey"
+          ellipsis={!inline}
+          fontVariant={size === 'large' ? 'smallBold' : 'extraSmallBold'}
+          textAlign="left"
+          width="$full"
+        >
+          {keySublabel}
+        </Typography>
+      ) : (
+        keySublabel
+      )
+    const PostfixProps = postfixIcon
+      ? { as: postfixIcon }
+      : link
+      ? { $rotate: true, as: UpArrowSVG }
+      : copied
+      ? { as: CheckSVG }
+      : { as: CopySVG }
 
+    return (
+      <ContainerBox $inline={inline} as={asProp} {...generatedProps}>
+        {hasPrefix && (
+          <PrefixBox $inline={inline} $size={size}>
+            {icon && <PrefixSVGBox as={icon as React.ReactElement} />}
+            {hasLabels && (
+              <PrefixLabelsContainerBox $inline={inline}>
+                {KeyLabel}
+                {KeySublabel}
+              </PrefixLabelsContainerBox>
+            )}
+          </PrefixBox>
+        )}
+        <Typography
+          flex="1"
+          fontVariant={size === 'large' ? 'body' : 'small'}
+          textAlign="left"
+          wordBreak={inline ? 'normal' : 'break-all'}
+        >
+          {children}
+        </Typography>
+        <TrailingSVGBox {...(PostfixProps as any)} />
+      </ContainerBox>
+    )
+  },
+)
 
 RecordItem.displayName = 'RecordItem'
diff --git a/components/src/components/atoms/ScrollBox/ScrollBox.tsx b/components/src/components/atoms/ScrollBox/ScrollBox.tsx
@@ -1,16 +1,14 @@
 import * as React from 'react'
 
-import * as styles from './styles.css'
-import { Box, BoxProps } from '../Box/Box'
 import { commonVars } from '@/src/css/theme.css'
+
 import { Space } from '@/src/tokens'
 
+import * as styles from './styles.css'
+import { Box, BoxProps } from '../Box/Box'
+
 const ScrollBoxBox = React.forwardRef<HTMLElement, BoxProps>((props, ref) => (
-  <Box
-    ref={ref}
-    classNames={styles.scrollBox}
-    {...props}
-  />
+  <Box classNames={styles.scrollBox} ref={ref} {...props} />
 ))
 
 const DividerBox = ({
@@ -23,22 +21,28 @@ const DividerBox = ({
   horizontalPadding?: Space
 }) => {
   return (
-  <Box
-  style={horizontalPadding ? { width: `calc(100% - 2 * ${commonVars.space[horizontalPadding]})`} : {}}
-    backgroundColor={show ? '$border' : 'transparent'}
-    bottom={position === 'bottom' ? '-$px' : 'unset'}
-    data-testid={`scrollbox-${position}-divider`}
-    display="block"
-    height="$px"
-    left={horizontalPadding ? commonVars.space[horizontalPadding] :"$0"}
-    position="absolute"
-    top={position === 'top' ? '$0' : 'unset'}
-    transitionDuration="$150"
-    transitionProperty="background-color"
-    transitionTimingFunction="$inOut"
-    width="$full"
-    zIndex="100"
-  />)}
+    <Box
+      backgroundColor={show ? '$border' : 'transparent'}
+      bottom={position === 'bottom' ? '-$px' : 'unset'}
+      data-testid={`scrollbox-${position}-divider`}
+      display="block"
+      height="$px"
+      left={horizontalPadding ? commonVars.space[horizontalPadding] : '$0'}
+      position="absolute"
+      style={
+        horizontalPadding
+          ? { width: `calc(100% - 2 * ${commonVars.space[horizontalPadding]})` }
+          : {}
+      }
+      top={position === 'top' ? '$0' : 'unset'}
+      transitionDuration="$150"
+      transitionProperty="background-color"
+      transitionTimingFunction="$inOut"
+      width="$full"
+      zIndex="100"
+    />
+  )
+}
 
 type Props = {
   /** If true, the dividers will be hidden */
@@ -143,27 +147,49 @@ export const ScrollBox = ({
 
   return (
     <Box
-      position="relative"
       border="solid $px transparent"
-      width="$full"
-      height="$full"
       borderLeftWidth="$0"
       borderRightWidth="$0"
+      height="$full"
+      position="relative"
+      width="$full"
       {...props}
     >
-      <ScrollBoxBox style={horizontalPadding ? {
-        padding: `0 ${commonVars.space[horizontalPadding]}`,
-      } : {}}>
-        <Box data-testid="scrollbox-top-intersect" ref={topRef} 
-        display="block" height="$0"
+      <ScrollBoxBox
+        style={
+          horizontalPadding
+            ? {
+                padding: `0 ${commonVars.space[horizontalPadding]}`,
+              }
+            : {}
+        }
+      >
+        <Box
+          data-testid="scrollbox-top-intersect"
+          display="block"
+          height="$0"
+          ref={topRef}
         />
         {children}
-        <Box data-testid="scrollbox-bottom-intersect" ref={bottomRef} 
-        display="block" height="$0"
+        <Box
+          data-testid="scrollbox-bottom-intersect"
+          display="block"
+          height="$0"
+          ref={bottomRef}
         />
       </ScrollBoxBox>
-      <DividerBox data-testid="scrollbox-top-line" show={showTop} position='top' horizontalPadding={horizontalPadding}/>
-      <DividerBox data-testid="scrollbox-bottom-line" show={showBottom} position='bottom' horizontalPadding={horizontalPadding}/>
+      <DividerBox
+        data-testid="scrollbox-top-line"
+        horizontalPadding={horizontalPadding}
+        position="top"
+        show={showTop}
+      />
+      <DividerBox
+        data-testid="scrollbox-bottom-line"
+        horizontalPadding={horizontalPadding}
+        position="bottom"
+        show={showBottom}
+      />
     </Box>
   )
 }
diff --git a/components/src/components/atoms/ScrollBox/styles.css.ts b/components/src/components/atoms/ScrollBox/styles.css.ts
@@ -1,4 +1,4 @@
-import { style, createVar } from '@vanilla-extract/css'
+import { createVar, style } from '@vanilla-extract/css'
 
 import { commonVars, modeVars } from '@/src/css/theme.css'
 
@@ -10,7 +10,7 @@ export const scrollBox = style({
       syntax: '<color>',
       inherits: false,
       initialValue: modeVars.color.greyLight,
-    }
+    },
   },
   overflow: 'auto',
   position: 'relative',

diff --git a/components/src/components/organisms/Dialog/Dialog.tsx b/components/src/components/organisms/Dialog/Dialog.tsx
@@ -49,15 +49,14 @@ const StyledCard = (props: BoxProps) => (
     display="flex"
     flexDirection="column"
     gap={{ xs: '$4', sm: '$6' }}
-    maxWidth={{ xs: 'unset', sm: '80vw' }}
     maxHeight={{ xs: '80vh', sm: 'min(90vh, $144)' }}
+    maxWidth={{ xs: 'unset', sm: '80vw' }}
     minWidth={{ xs: 'unset', sm: '$64' }}
+    overflow="hidden"
     padding={{ xs: '$4', sm: '$6' }}
     position="relative"
-    overflow="hidden"
     width="$full"
   />
-
 )
 
 type NonNullableAlert = NonNullable<WithAlert['alert']>

diff --git a/components/src/components/organisms/Dialog/DialogContent.tsx b/components/src/components/organisms/Dialog/DialogContent.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react'
 import styled, { css } from 'styled-components'
 
-import { mq } from '@/src/utils/responsiveHelpers'
-
 import { Space } from '@/src/tokens'
 
+import { mq } from '@/src/utils/responsiveHelpers'
+
 import { ScrollBox } from '../..'
 
 type NativeFromProps = React.FormHTMLAttributes<HTMLFormElement>

diff --git a/components/src/css/utils/getColorStyle.ts b/components/src/css/utils/getColorStyle.ts
@@ -12,7 +12,7 @@ const BASE_COLORS = [
   'grey',
 ] as const
 
-type BaseColor = typeof BASE_COLORS[number]
+type BaseColor = (typeof BASE_COLORS)[number]
 
 const GRADIENT_COLORS = [
   'accent',
@@ -23,7 +23,7 @@ const GRADIENT_COLORS = [
   'grey',
 ] as const
 
-type GradientColor = typeof GRADIENT_COLORS[number]
+type GradientColor = (typeof GRADIENT_COLORS)[number]
 
 const makeColorStyleMap = () => {
   const primaryStyles = Object.fromEntries(

diff --git a/components/src/tokens/color.ts b/components/src/tokens/color.ts
@@ -91,7 +91,7 @@ const gradients = {
  */
 
 export type NamedShade = keyof typeof namedShadeMap
-export type Shade = typeof shades[number]
+export type Shade = (typeof shades)[number]
 export type Hue = keyof typeof hues
 export type Category = keyof Categories | 'accent'
 export type Gradient = keyof typeof gradients

diff --git a/components/src/tokens/colors2.ts b/components/src/tokens/colors2.ts
@@ -95,7 +95,7 @@ const gradients = {
  */
 
 export type NamedShade = keyof typeof namedShadeMap
-export type Shade = typeof shades[number]
+export type Shade = (typeof shades)[number]
 export type Hue = keyof typeof hues
 export type Category = keyof Categories | 'accent'
 export type Gradient = keyof typeof gradients

diff --git a/components/src/types/withColorOrColorStyle.ts b/components/src/types/withColorOrColorStyle.ts
@@ -61,7 +61,7 @@ const BASE_COLORS = [
   'grey',
 ] as const
 
-type BaseColor = typeof BASE_COLORS[number]
+type BaseColor = (typeof BASE_COLORS)[number]
 
 type ColorStyleItem = {
   text: string