upgrade eslint

.prettierrc.yaml

@@ -3,6 +3,7 @@ semi: false
 printWidth: 80
 tabWidth: 4
 singleQuote: true
+endOfLine: lf
 plugins:
     - '@ianvs/prettier-plugin-sort-imports'
 importOrder:

eslint.config.js

@@ -0,0 +1,29 @@
+import js from '@eslint/js'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import globals from 'globals'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+    { ignores: ['dist', '**/*.stories.*'] },
+    {
+        extends: [js.configs.recommended, ...tseslint.configs.recommended],
+        files: ['**/*.{ts,tsx}'],
+        languageOptions: {
+            ecmaVersion: 2020,
+            globals: globals.browser,
+        },
+        plugins: {
+            'react-hooks': reactHooks,
+            'react-refresh': reactRefresh,
+        },
+        rules: {
+            ...reactHooks.configs.recommended.rules,
+            'react-refresh/only-export-components': [
+                'warn',
+                { allowConstantExport: true },
+            ],
+            'react-hooks/rules-of-hooks': ['error'],
+        },
+    },
+)

package.json

@@ -1,6 +1,6 @@
 {
     "name": "soda-material",
-    "version": "0.0.28",
+    "version": "0.0.29",
     "type": "module",
     "types": "dist/index.d.ts",
     "main": "dist/index.js",
@@ -10,7 +10,7 @@
         "build": "vite build",
         "storybook": "storybook dev -p 6006",
         "build-storybook": "storybook build",
-        "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+        "lint": "eslint .",
         "format": "prettier --write ./src",
         "preview": "vite preview",
         "chromatic": "chromatic --exit-zero-on-changes"
@@ -21,6 +21,7 @@
     },
     "devDependencies": {
         "@chromatic-com/storybook": "1",
+        "@eslint/js": "^9.9.1",
         "@floating-ui/react": "^0.26.23",
         "@ianvs/prettier-plugin-sort-imports": "^4.3.1",
         "@material/material-color-utilities": "^0.2.7",
@@ -34,21 +35,20 @@
         "@storybook/react-vite": "^8.2.9",
         "@types/react": "^18.3.5",
         "@types/react-dom": "^18.3.0",
-        "@typescript-eslint/eslint-plugin": "^7.18.0",
-        "@typescript-eslint/parser": "^7.18.0",
         "@vitejs/plugin-react": "^4.3.1",
         "chromatic": "^11.7.1",
         "clsx": "^2.1.1",
-        "eslint": "^8.57.0",
-        "eslint-plugin-react-hooks": "^4.6.2",
+        "eslint": "^9.9.1",
+        "eslint-plugin-react-hooks": "^5.1.0-rc-e56f4ae3-20240830",
         "eslint-plugin-react-refresh": "^0.4.11",
-        "eslint-plugin-storybook": "^0.8.0",
+        "globals": "^15.9.0",
         "glob": "^10.4.5",
         "prettier": "^3.3.3",
         "sass": "^1.77.8",
         "storybook": "^8.2.9",
         "styled-jsx": "^5.1.6",
         "typescript": "^5.5.4",
+        "typescript-eslint": "^8.3.0",
         "vite": "^5.4.2",
         "vite-plugin-dts": "^3.9.1"
     },

src/components/date-picker/SelectDay.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx'
-import { useRippleRef } from '@/ripple/hooks'
+import { ripple } from '@/ripple/ripple-effect'
 import { getFormatCalendar, isSameDay } from './calendar'
 
 export function SelectDay({
@@ -44,7 +44,7 @@ export function SelectDay({
                                     if (col.isThisMonth && onChange)
                                         onChange(col.date)
                                 }}
-                                ref={useRippleRef()}
+                                ref={(el) => el && ripple(el)}
                             >
                                 {col.day}
                             </time>

src/components/date-picker/SelectYear.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx'
-import { useRippleRef } from '@/ripple/hooks'
+import { ripple } from '@/ripple/ripple-effect'
 
 export function SelectYear({
     current,
@@ -15,7 +15,7 @@ export function SelectYear({
                     className={clsx(current === year && 'active')}
                     onClick={() => onChange?.(year)}
                     key={year}
-                    ref={useRippleRef()}
+                    ref={(el) => el && ripple(el)}
                 >
                     <div className="cell">
                         {

src/components/navigation/Helper.tsx

@@ -38,6 +38,7 @@ export function Helper({
     ...props
 }: ExtendProps<HelperItem>) {
     const [hover, setHover] = useState(false)
+    const ref = useRippleRef()
 
     return (
         <div
@@ -49,7 +50,7 @@ export function Helper({
             onPointerLeave={() => setHover(false)}
         >
             <Badge
-                ref={useRippleRef()}
+                ref={ref}
                 className="sd-navigation_helper-active_indicator"
                 variant={badge?.active ? badge?.sd : 'none'}
                 label={buildReactNode(badge?.label, badge?.active)}

src/composition/Select/Select.tsx

@@ -241,7 +241,7 @@ export const Select = forwardRef<
                     })}
                 >
                     {typeof option === 'object'
-                        ? option.label ?? option.value
+                        ? (option.label ?? option.value)
                         : option}
                 </MenuItem>
             )
@@ -290,7 +290,7 @@ export const Select = forwardRef<
                 >
                     {typeof children === 'function'
                         ? children(value!)
-                        : children ?? (
+                        : (children ?? (
                               <Ripple
                                   as="div"
                                   className="sd-select-menu_button"
@@ -308,7 +308,7 @@ export const Select = forwardRef<
                                       />
                                   </div>
                               </Ripple>
-                          )}
+                          ))}
                 </div>
                 {optionsNode}
             </div>

src/composition/SodaImage/SodaImage.tsx

@@ -178,7 +178,7 @@ export const SodaImage = forwardRef<
                     setState('loaded')
                     img.src = URL.createObjectURL(blob)
                 }
-            } catch (e) {
+            } catch {
                 // fail to load or timeout
                 setState('error')
                 img.src = ''

src/documentation/components/ChangeTheme.tsx

@@ -24,7 +24,6 @@ export function ChangeTheme() {
     }, [sourceColor])
 
     useEffect(() => {
-        // eslint-disable-next-line no-extra-semi
         ;(async () => {
             const theme = file
                 ? await themeFromImageOrFile(file)

src/hooks/use-event-listener.ts

@@ -1,6 +1,6 @@
 import { useEffect } from 'react'
 
-export function useEventListener<
+export function refEventListener<
     T extends HTMLElement,
     K extends keyof HTMLElementEventMap,
 >(
@@ -27,7 +27,7 @@ export function useEventListenerEffect<
     options?: boolean | AddEventListenerOptions,
 ) {
     useEffect(
-        () => useEventListener(elementRef, type, listener, options),
+        () => refEventListener(elementRef, type, listener, options),
         [elementRef, type, listener, options],
     )
 }