wip fix components lint

.vscode/settings.json

@@ -6,8 +6,7 @@
   },
   "editor.formatOnSave": false,
   "eslint.useFlatConfig": true,
-  "stylelint.configFile": ".stylelintrc.json",
-  "stylelint.validate": ["css", "typescriptreact"],
+  "stylelint.configFile": "stylelint.config.mjs",
   "svg.preview.background": "custom",
   "prettier.enable": false
 }

components/src/components/atoms/Portal/Portal.tsx

@@ -27,7 +27,6 @@ export const Portal: React.FC<Props> = ({
     return () => {
       document.body.removeChild(container)
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [renderCallback])
 
   return ReactDOM.createPortal(children, container)

components/src/components/atoms/ScrollBox/ScrollBox.tsx

@@ -138,7 +138,6 @@ export const ScrollBox = ({
     return () => {
       observer.disconnect()
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [bottomTriggerPx, topTriggerPx])
 
   React.useEffect(() => {

components/src/components/molecules/Backdrop/Backdrop.tsx

@@ -82,7 +82,6 @@ export const Backdrop = ({
     return () => {
       toggle(false)
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open, noBackground])
 
   return state.status !== 'unmounted'

components/src/components/molecules/RadioButtonGroup/RadioButtonGroup.tsx

@@ -58,7 +58,7 @@ export const RadioButtonGroup = React.forwardRef(
     const [value, setValue] = React.useState(_value)
     React.useEffect(() => {
       if (_value && _value != value) setValue(_value)
-      // eslint-disable-next-line react-hooks/exhaustive-deps
+
     }, [_value])
 
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {

components/src/components/molecules/Select/Select.tsx

@@ -561,15 +561,14 @@ export const Select = React.forwardRef(
     const [value, setValue] = React.useState<SelectProps['value']>('')
     React.useEffect(() => {
       if (_value !== value && _value !== undefined) setValue(_value)
-      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [_value])
 
     const selectedOption = options?.find(o => o.value === value) || null
 
     const changeSelectedOption = (option?: SelectOptionProps, event?: any) => {
       if (option?.disabled) return
       if (option?.value === CREATE_OPTION_VALUE) {
-        onCreate && onCreate(queryValue)
+        onCreate?.(queryValue)
       }
       else if (option?.value) {
         setValue(option?.value)
@@ -592,7 +591,7 @@ export const Select = React.forwardRef(
               },
             },
           })
-          onChange && onChange(clonedEvent)
+          onChange?.(clonedEvent)
         }
       }
     }
@@ -683,7 +682,6 @@ export const Select = React.forwardRef(
 
     useEffect(() => {
       toggle(isOpen)
-      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isOpen])
 
     useEffect(() => {
@@ -845,14 +843,15 @@ export const Select = React.forwardRef(
                 tabIndex={-1}
                 value={value}
                 onChange={(e) => {
-                  const newValue = (e.target as any).value
+                  const newValue = (e.target as HTMLInputElement).value
                   const option = options?.find(o => o.value === newValue)
                   if (option) {
                     setValue(option.value)
-                    onChange && onChange(e)
+                    onChange?.(e)
                   }
                 }}
                 onFocus={() => {
+                  // eslint-disable-next-line @typescript-eslint/no-unused-expressions
                   searchInputRef.current
                     ? searchInputRef.current.focus()
                     : displayRef.current?.focus()

components/src/components/organisms/Dialog/Dialog.tsx

@@ -9,7 +9,7 @@ import { FontSize } from '@/src/tokens/typography'
 
 import { DialogContent } from './DialogContent'
 
-import { Modal, ScrollBox, Typography } from '../..'
+import { Modal, Typography } from '../..'
 import { Box, BoxProps } from '../../atoms/Box/Box'
 import { getValueForAlert } from './utils/getValueForAlert'
 import { getValueForStepType } from './utils/getValueForStepType'
@@ -217,19 +217,19 @@ const Heading = ({
   )
 }
 
-const Content = ({ children }: { children?: React.ReactNode }) => {
-  return (
-    <Box
-      maxHeight="60vh"
-      maxWidth={{ base: '100vw', sm: '$128' }}
-      width={{ base: '100vw', sm: '80vw' }}
-    >
-      <ScrollBox height="$full" width="$full">
-        <Box paddingRight="$2">{children}</Box>
-      </ScrollBox>
-    </Box>
-  )
-}
+// const Content = ({ children }: { children?: React.ReactNode }) => {
+//   return (
+//     <Box
+//       maxHeight="60vh"
+//       maxWidth={{ base: '100vw', sm: '$128' }}
+//       width={{ base: '100vw', sm: '80vw' }}
+//     >
+//       <ScrollBox height="$full" width="$full">
+//         <Box paddingRight="$2">{children}</Box>
+//       </ScrollBox>
+//     </Box>
+//   )
+// }
 
 const Footer = ({
   leading,

components/src/components/organisms/Toast/Toast.tsx

@@ -187,7 +187,6 @@ InternalProps & {
     if (open) {
       setCalcTop(0.025 * window.innerHeight)
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open])
 
   React.useEffect(() => {
@@ -228,7 +227,6 @@ InternalProps & {
       //   }
       // }
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [touches])
 
   const onTouchStart = React.useCallback((e: TouchEvent) => {
@@ -261,7 +259,6 @@ InternalProps & {
         capture: false,
       })
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   React.useEffect(() => {
@@ -274,7 +271,6 @@ InternalProps & {
         capture: false,
       })
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [popped])
 
   return (
@@ -335,7 +331,6 @@ export const Toast = ({
         onClose()
       }
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open])
 
   React.useEffect(() => {

components/src/hooks/useDocumentEvent.ts

@@ -15,6 +15,5 @@ export const useDocumentEvent = (
     return () => {
       document.removeEventListener(event, callback)
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [shouldCallback])
 }

components/src/hooks/useIntersectionalObserver.ts

@@ -20,6 +20,5 @@ export const useIntersectionalObserver = (
     return () => {
       if (observer && target) observer.unobserve(target)
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [ref, active])
 }

components/test/index.tsx

@@ -5,16 +5,12 @@ import './mocks/URL.js'
 
 // --------------------------------------------------
 // re-export everything
-// --------------------------------------------------
-/* eslint-disable import/export */
+// ----------------------------------
 export * from '@testing-library/react'
-/* eslint-enable import/export */
 export { default as userEvent } from '@testing-library/user-event'
 
 // override methods
-/* eslint-disable import/export */
 export { render }
-/* eslint-enable import/export */
 export * from './utils'
 
 export const getPropertyValue = (element: Element, property: string) => {

components/test/overrides.ts

@@ -1,7 +1,7 @@
 export {}
 
 // Format string with arguments
-function sprintf(message: string, args: any[]) {
+function sprintf(message: string, args: unknown[]) {
   let i = 0
   return message.replace(/%((%)|s|d)/g, function (m: any) {
     // m is the matched format, e.g. %s, %d

eslint.config.mjs

@@ -19,7 +19,7 @@ const baseConfig = tseslint.config(
     },
   },
   {
-    ignores: ['docs/node_modules', 'docs/dist', 'docs/.next', '**/*.cjs'],
+    ignores: ['docs/node_modules', 'docs/dist', 'docs/.next', '**/*.cjs', '**/*.js'],
   },
   eslint.configs.recommended,
   ...tseslint.configs.recommended,

stylelint.config.mjs

@@ -6,4 +6,5 @@ export default {
     '@stylistic/max-empty-lines': 1,
     '@stylistic/string-quotes': 'single',
   },
+  ignorePatterns: ['**/*.tsx'],
 }

tsconfig.json

@@ -10,7 +10,8 @@
     },
     "module": "ESNext",
     "target": "ESNext",
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "jsx": "preserve"
   },
   "include": ["components/**/*", "docs/**/*", "playroom/**/*"]
 }