chore(lint): make eslint run, fix errors (#9361)

Co-authored-by: Daniel Cousens <dcousens@users.noreply.github.com>

design-system/packages/core/src/components/Box.tsx

@@ -181,10 +181,10 @@ function useRadii (
   { rounding, roundingTop, roundingRight, roundingBottom, roundingLeft }: RadiiProps,
   { radii }: Theme
 ) {
-  let borderBottomLeftRadius = roundingBottom || roundingLeft || rounding
-  let borderBottomRightRadius = roundingBottom || roundingRight || rounding
-  let borderTopLeftRadius = roundingTop || roundingLeft || rounding
-  let borderTopRightRadius = roundingTop || roundingRight || rounding
+  const borderBottomLeftRadius = roundingBottom || roundingLeft || rounding
+  const borderBottomRightRadius = roundingBottom || roundingRight || rounding
+  const borderTopLeftRadius = roundingTop || roundingLeft || rounding
+  const borderTopRightRadius = roundingTop || roundingRight || rounding
 
   return {
     borderBottomLeftRadius:
@@ -208,10 +208,10 @@ function usePadding (
   }: PaddingProps,
   { spacing }: Theme
 ) {
-  let pb = paddingBottom || paddingY || padding
-  let pt = paddingTop || paddingY || padding
-  let pl = paddingLeft || paddingX || padding
-  let pr = paddingRight || paddingX || padding
+  const pb = paddingBottom || paddingY || padding
+  const pt = paddingTop || paddingY || padding
+  const pl = paddingLeft || paddingX || padding
+  const pr = paddingRight || paddingX || padding
 
   return {
     paddingBottom: pb && mapResponsiveProp(pb, spacing),
@@ -225,10 +225,10 @@ function useMargin (
   { margin, marginTop, marginRight, marginBottom, marginLeft, marginY, marginX }: MarginProps,
   { spacing }: Theme
 ) {
-  let mb = marginBottom || marginY || margin
-  let mt = marginTop || marginY || margin
-  let ml = marginLeft || marginX || margin
-  let mr = marginRight || marginX || margin
+  const mb = marginBottom || marginY || margin
+  const mt = marginTop || marginY || margin
+  const ml = marginLeft || marginX || margin
+  const mr = marginRight || marginX || margin
 
   return {
     marginBottom: mb && mapResponsiveProp(mb, spacing),

design-system/packages/core/src/components/Link.tsx

@@ -5,7 +5,7 @@ import { jsx } from '../emotion'
 import { useTheme } from '../theme'
 import { forwardRefWithAs } from '../utils'
 
-export const Link = forwardRefWithAs<'a', {}>(({ as: Tag = 'a', ...props }, ref) => {
+export const Link = forwardRefWithAs<'a', unknown>(({ as: Tag = 'a', ...props }, ref) => {
   const { typography, colors } = useTheme()
 
   const styles = {

design-system/packages/fields/src/FieldContainer.tsx

@@ -2,6 +2,6 @@
 /** @jsx jsx */
 import { jsx, forwardRefWithAs } from '@keystone-ui/core'
 
-export const FieldContainer = forwardRefWithAs<'div', {}>(({ as: Tag = 'div', ...props }, ref) => {
+export const FieldContainer = forwardRefWithAs<'div', unknown>(({ as: Tag = 'div', ...props }, ref) => {
   return <Tag ref={ref} {...props} />
 })

design-system/packages/fields/src/Switch.tsx

@@ -47,7 +47,7 @@ type SwitchControlProps = {
 
 export const SwitchControl = forwardRef<HTMLButtonElement, SwitchControlProps>(
   ({ a11yLabels = { on: 'On', off: 'Off' }, checked = false, onChange, ...props }, ref) => {
-    let onClick = () => {
+    const onClick = () => {
       if (onChange) {
         onChange(!checked)
       }
@@ -64,10 +64,10 @@ export const SwitchControl = forwardRef<HTMLButtonElement, SwitchControlProps>(
 const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
   const { animation, fields, sizing } = useTheme()
 
-  let gutter = 3
-  let trackHeight = sizing.xsmall + gutter
-  let trackWidth = trackHeight * 2 - 2 * gutter
-  let handleSize = trackHeight - gutter * 2
+  const gutter = 3
+  const trackHeight = sizing.xsmall + gutter
+  const trackWidth = trackHeight * 2 - 2 * gutter
+  const handleSize = trackHeight - gutter * 2
 
   return (
     <button

design-system/packages/icons/src/Icon.tsx

@@ -21,7 +21,7 @@ const sizeMap = {
 }
 
 export const createIcon = (children: ReactNode, name: string) => {
-  let Icon = forwardRef<SVGSVGElement, IconProps>(
+  const Icon = forwardRef<SVGSVGElement, IconProps>(
     ({ size = 'medium', color, ...props }: IconProps, ref: any) => {
       const resolvedSize = typeof size === 'number' ? size : mapResponsiveProp(size, sizeMap)
 

design-system/packages/modals/src/DrawerBase.tsx

@@ -51,7 +51,7 @@ export const DrawerBase = ({
   const uniqueKey = makeId('drawer', id)
 
   // sync drawer state
-  let drawerDepth = useDrawerManager(uniqueKey)
+  const drawerDepth = useDrawerManager(uniqueKey)
 
   const onKeyDown = (event: KeyboardEvent) => {
     if (event.key === 'Escape' && !event.defaultPrevented) {
@@ -71,7 +71,7 @@ export const DrawerBase = ({
   let Tag: 'div' | 'form' = 'div'
   if (onSubmit) {
     Tag = 'form'
-    let oldOnSubmit = onSubmit
+    const oldOnSubmit = onSubmit
     // @ts-expect-error
     onSubmit = (event: any) => {
       if (!event.defaultPrevented) {
@@ -134,8 +134,8 @@ export const DrawerBase = ({
 // ------------------------------
 
 function getDialogTransition (depth: number) {
-  let scaleInc = 0.05
-  let transformValue = `scale(${1 - scaleInc * depth}) translateX(-${depth * 40}px)`
+  const scaleInc = 0.05
+  const transformValue = `scale(${1 - scaleInc * depth}) translateX(-${depth * 40}px)`
 
   return {
     entering: { transform: 'translateX(100%)' },

design-system/packages/modals/src/DrawerController.tsx

@@ -13,7 +13,7 @@ const DrawerControllerContext = React.createContext<null | TransitionState>(null
 export const DrawerControllerContextProvider = DrawerControllerContext.Provider
 
 export const useDrawerControllerContext = () => {
-  let context = useContext(DrawerControllerContext)
+  const context = useContext(DrawerControllerContext)
   if (!context) {
     throw new Error(
       'Drawers must be wrapped in a <DrawerController>. You should generally do this outside of the component that renders the <Drawer> or <TabbedDrawer>.'

design-system/packages/modals/src/drawer-context.tsx

@@ -9,14 +9,14 @@ export type ModalState = {
 const ModalContext = React.createContext<ModalState | null>(null)
 
 export const DrawerProvider = ({ children }: { children: ReactNode }) => {
-  let [drawerStack, setDrawerStack] = useState<string[]>([])
+  const [drawerStack, setDrawerStack] = useState<string[]>([])
 
   const pushToDrawerStack = useCallback((key: string) => {
     setDrawerStack(stack => [...stack, key])
   }, [])
   const popFromDrawerStack = useCallback(() => {
     setDrawerStack(stack => {
-      let less = stack.slice(0, -1)
+      const less = stack.slice(0, -1)
       return less
     })
   }, [])
@@ -50,7 +50,7 @@ export const useDrawerManager = (uniqueKey: string) => {
   }, [])
   // the last key in the array is the "top" modal visually, so the depth is the inverse index
   // be careful not to mutate the stack
-  let depth = modalState.drawerStack.slice().reverse().indexOf(uniqueKey)
+  const depth = modalState.drawerStack.slice().reverse().indexOf(uniqueKey)
   // if it's not in the stack already,
   // we know that it should be the last drawer in the stack but the effect hasn't happened yet
   // so we need to make the depth 0 so the depth is correct even though the effect hasn't happened yet

design-system/packages/popover/src/Popover.tsx

@@ -262,7 +262,7 @@ type UseClickOutsideProps = {
 const useClickOutside = ({ handler, elements, listenWhen }: UseClickOutsideProps) => {
   useEffect(() => {
     if (listenWhen) {
-      let handleMouseDown = (event: MouseEvent) => {
+      const handleMouseDown = (event: MouseEvent) => {
         // bail on mouse down "inside" any of the provided elements
         if (elements.some(el => el && el.contains(event.target as Node))) {
           return
@@ -300,8 +300,8 @@ const useKeyPress = ({
 
   // add event listeners
   useEffect(() => {
-    let target = targetElement || document.body
-    let onDown = (event: KeyboardEvent) => {
+    const target = targetElement || document.body
+    const onDown = (event: KeyboardEvent) => {
       if (event.key === targetKey) {
         setKeyPressed(true)
 
@@ -310,7 +310,7 @@ const useKeyPress = ({
         }
       }
     }
-    let onUp = (event: KeyboardEvent) => {
+    const onUp = (event: KeyboardEvent) => {
       if (event.key === targetKey) {
         setKeyPressed(false)
 

design-system/packages/segmented-control/src/SegmentedControl.tsx

@@ -82,8 +82,8 @@ export const SegmentedControl = ({
   // Animate the selected segment indicator
   useEffect(() => {
     if (animate && rootRef.current instanceof HTMLElement) {
-      let nodes = Array.from(rootRef.current.children)
-      let selected = selectedIndex !== undefined && nodes[selectedIndex]
+      const nodes = Array.from(rootRef.current.children)
+      const selected = selectedIndex !== undefined && nodes[selectedIndex]
       let rootRect
       let nodeRect = { height: 0, width: 0, left: 0, top: 0 }
       let offsetLeft

design-system/packages/toast/src/Toast.tsx

@@ -29,7 +29,7 @@ export function ToastProvider ({ children }: { children: ReactNode }) {
           }
 
           // populate defaults and update state
-          let toast = populateDefaults(options)
+          const toast = populateDefaults(options)
           return [...currentStack, toast]
         })
       },
@@ -68,7 +68,7 @@ export function ToastProvider ({ children }: { children: ReactNode }) {
 // ------------------------------
 
 let idCount = -1
-let genId = () => ++idCount
+const genId = () => ++idCount
 function populateDefaults (props: ToastProps): ToastPropsExact {
   return {
     title: props.title,

design-system/website/pages/components/fields.tsx

@@ -41,7 +41,7 @@ const StatefulSwitch = ({ children, ...props }: ComponentProps<typeof Switch>) =
 }
 
 const BasicDatePicker = () => {
-  let [value, setValue] = useState<DateType>('')
+  const [value, setValue] = useState<DateType>('')
   return (
     <Stack gap="small">
       <pre>{value || 'no value'}</pre>

design-system/website/pages/components/modals.tsx

@@ -8,9 +8,9 @@ import { Drawer, DrawerController, AlertDialog } from '@keystone-ui/modals'
 import { Page } from '../../components/Page'
 
 export default function ModalsPage () {
-  let [isNarrowOpen, setIsNarrowOpen] = useState(false)
-  let [isWideOpen, setIsWideOpen] = useState(false)
-  let [isAlertDialogOpen, setIsAlertDialogOpen] = useState(false)
+  const [isNarrowOpen, setIsNarrowOpen] = useState(false)
+  const [isWideOpen, setIsWideOpen] = useState(false)
+  const [isAlertDialogOpen, setIsAlertDialogOpen] = useState(false)
 
   return (
     <Page>

design-system/website/pages/components/options.tsx

@@ -17,7 +17,7 @@ const props: ComponentProps<typeof CheckMark>[] = [
 ]
 
 export default function OptionsPage () {
-  let [value, setValue] = useState<undefined | { label: string, value: string }>()
+  const [value, setValue] = useState<undefined | { label: string, value: string }>()
   return (
     <Page>
       <h1>Options</h1>

docs/components/ContactForm.tsx

@@ -8,10 +8,9 @@ import { Field } from './primitives/Field'
 import { Stack } from './primitives/Stack'
 import { Type } from './primitives/Type'
 
-const validEmail = (email: string) =>
-  /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test(
-    email
-  )
+function validEmail (email: string) {
+  return /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test(email)
+}
 
 const enquiryUrl = 'https://endpoints.thinkmill.com.au/enquiry'
 

docs/components/Header.tsx

@@ -272,7 +272,7 @@ export function Header () {
   useEffect(() => {
     document.body.style.overflow = 'auto'
     // search - init field
-    let searchAttempt = 0
+    const searchAttempt = 0
     // @ts-expect-error
     document.getElementById('search-field').disabled = true
     const loadSearch = (searchAttempt: number) => {
@@ -308,7 +308,7 @@ export function Header () {
     // yoo hooo
     loadSearch(searchAttempt)
     // search - keyboard shortcut
-    let keysPressed: { [key: KeyboardEvent['key']]: boolean } = {}
+    const keysPressed: { [key: KeyboardEvent['key']]: boolean } = {}
     document.body.addEventListener('keydown', (event) => {
       // If we're typing in an input, don't ever focus the search input
       if (

docs/components/docs/DocumentEditorDemo.tsx

@@ -177,7 +177,7 @@ function objToShorthand<
   Obj extends Record<string, undefined | true | readonly any[] | Record<string, any>>
 > (obj: Obj): Obj | true | undefined {
   const values = Object.values(obj)
-  let state: (typeof values)[number] = values[0]!
+  const state: (typeof values)[number] = values[0]!
   for (const val of values) {
     if (val !== state || (val !== undefined && val !== true)) {
       return obj

docs/components/docs/TableOfContents.tsx

@@ -32,16 +32,16 @@ export function TableOfContents ({
   container: React.RefObject<HTMLElement | null>
   headings: Heading[]
 }) {
-  let [visibleIds, setVisibleIds] = useState<Array<string | null>>([])
-  let [lastVisibleId, setLastVisbleId] = useState<string | null>(null)
+  const [visibleIds, setVisibleIds] = useState<Array<string | null>>([])
+  const [lastVisibleId, setLastVisbleId] = useState<string | null>(null)
 
   const mq = useMediaQuery()
 
   // observe relevant headings
 
   useEffect(() => {
     if (container.current) {
-      let allIds = headings.map(h => h.id)
+      const allIds = headings.map(h => h.id)
       const observer = new IntersectionObserver(entries => {
         entries.forEach(entry => {
           const targetId: string | null = entry.target.getAttribute('id')
@@ -62,7 +62,7 @@ export function TableOfContents ({
   }, [container, headings])
 
   // catch if we're in a long gap between headings and resolve to the last available.
-  let activeId = visibleIds[0] || lastVisibleId
+  const activeId = visibleIds[0] || lastVisibleId
 
   return (
     <div id="toc">
@@ -87,7 +87,7 @@ export function TableOfContents ({
         </Type>
         <ul css={{ listStyle: 'none', margin: 0, padding: 0 }}>
           {headings.map((h: Heading, i: number) => {
-            let isActive = activeId === h.id
+            const isActive = activeId === h.id
             const slug = `#${h.id}`
             return (
               <li

docs/components/primitives/Code.tsx

@@ -11,14 +11,14 @@ type Range = { start: number, end: number }
 type CollapseRange = Range & { isCollapsed: boolean }
 
 const getRanges = (lines: string): Range[] => {
-  let ranges: Range[] = []
+  const ranges: Range[] = []
 
   lines.split(',').forEach((lineRange) => {
     if (lineRange.length) {
       const [range1, range2] = lineRange.split('-')
 
       let parsedRange1 = parseInt(range1)
-      let parsedRange2 = parseInt(range2)
+      const parsedRange2 = parseInt(range2)
 
       if (isNaN(parsedRange1)) {
         throw new Error(`When trying to do highlighting, error in {${lines}}`)
@@ -41,24 +41,24 @@ const getRanges = (lines: string): Range[] => {
 const parseClassName = (
   className?: string
 ): { highlightRanges: Range[], collapseRanges: CollapseRange[], language: string } => {
-  let trimmedLanguage = (className || '').replace(/language-/, '')
+  const trimmedLanguage = (className || '').replace(/language-/, '')
   let language, highlights, collapses
 
   if (
     !trimmedLanguage.includes('[') ||
     trimmedLanguage.indexOf('{') < trimmedLanguage.indexOf('[')
   ) {
-    let [scopedLanguage, modifiers = ''] = trimmedLanguage.split('{')
+    const [scopedLanguage, modifiers = ''] = trimmedLanguage.split('{')
 
-    let [scopedHighlights, scopedCollapses] = modifiers.split('[')
+    const [scopedHighlights, scopedCollapses] = modifiers.split('[')
 
     language = scopedLanguage
     highlights = scopedHighlights
     collapses = scopedCollapses
   } else {
-    let [scopedLanguage, modifiers = ''] = trimmedLanguage.split('[')
+    const [scopedLanguage, modifiers = ''] = trimmedLanguage.split('[')
 
-    let [scopedCollapses, scopedHighlights] = modifiers.split('{')
+    const [scopedCollapses, scopedHighlights] = modifiers.split('{')
 
     language = scopedLanguage
     highlights = scopedHighlights
@@ -92,7 +92,7 @@ export function CodeBlock (props: { children: string, className?: string }) {
 }
 
 export function Code ({ children, className }: { children: string, className?: string }) {
-  let { language, highlightRanges, collapseRanges } = useMemo(
+  const { language, highlightRanges, collapseRanges } = useMemo(
     () => parseClassName(className),
     [className]
   )
@@ -120,7 +120,7 @@ export function Code ({ children, className }: { children: string, className?: s
                   <button
                     key={i}
                     onClick={() => {
-                      let updated = collapseState.map((item) =>
+                      const updated = collapseState.map((item) =>
                         item.start === i ? { ...item, isCollapsed: false } : item
                       )