chore: ESLint v9 (#5197)

eslint.config.mjs

@@ -0,0 +1,50 @@
+import smarthr from 'eslint-config-smarthr'
+import storybook from 'eslint-plugin-storybook'
+
+/**
+ * @type {import('eslint').Linter.Config[]}
+ */
+export default [
+  ...smarthr,
+  ...storybook.configs['flat/recommended'],
+  {
+    rules: {
+      'jsx-a11y/anchor-is-valid': 'warn',
+      'jsx-a11y/click-events-have-key-events': 'warn',
+      'jsx-a11y/no-static-element-interactions': 'warn',
+      'jsx-a11y/label-has-associated-control': [
+        'error',
+        {
+          controlComponents: ['Input', 'InputWithTooltip'],
+        },
+      ],
+      '@typescript-eslint/consistent-type-definitions': [
+        'error',
+        'type',
+      ],
+      'smarthr/require-barrel-import': 'off',
+      'smarthr/a11y-anchor-has-href-attribute': [
+        'error',
+        {
+          checkType: 'allow-spread-attributes',
+        }
+      ],
+      'smarthr/a11y-input-has-name-attribute': [
+        'error',
+        {
+          checkType: 'allow-spread-attributes',
+        }
+      ],
+    },
+  },
+  {
+    ignores: [
+      '**/*.{mjs,js}',
+      'sandbox/',
+      'storybook-static/',
+      'packages/smarthr-ui/esm/',
+      'packages/smarthr-ui/lib/',
+      'packages/smarthr-ui/.storybook',
+    ]
+  },
+]

package.json

@@ -6,8 +6,8 @@
   "devDependencies": {
     "@commitlint/cli": "^19.6.1",
     "@commitlint/config-conventional": "^19.6.0",
-    "eslint": "^8.57.0",
-    "eslint-config-smarthr": "^7.3.0",
+    "eslint": "^9.17.0",
+    "eslint-config-smarthr": "^8.0.0",
     "eslint-plugin-storybook": "^0.11.1",
     "husky": "^9.1.7",
     "lint-staged": "^15.2.11",

packages/smarthr-ui/src/components/Button/ButtonWrapper.tsx

@@ -60,7 +60,7 @@ export function ButtonWrapper({
   if (props.isAnchor) {
     const { anchorRef, elementAs, isAnchor: _, ...others } = props
     const Component = elementAs || 'a'
-    // eslint-disable-next-line jsx-a11y/anchor-has-content
+
     return <Component {...others} className={anchorStyle} ref={anchorRef} />
   } else {
     const { buttonRef, disabled, onClick, ...others } = props

packages/smarthr-ui/src/components/ComboBox/ListBoxItemButton.tsx

@@ -66,7 +66,6 @@ const ListBoxItemButton = <T,>({
   )
 
   return isNew ? (
-    // eslint-disable-next-line smarthr/a11y-clickable-element-has-text
     <button
       type="button"
       key={option.id}

packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/SingleComboBox.stories.tsx

@@ -8,7 +8,6 @@ import { Stack } from '../../../Layout'
 import { Text } from '../../../Text'
 import { SingleComboBox } from '../SingleComboBox'
 
-// eslint-disable-next-line storybook/prefer-pascal-case
 export const defaultItems = {
   'option 1': {
     label: 'option 1',
@@ -68,7 +67,6 @@ export const defaultItems = {
   },
 }
 
-// eslint-disable-next-line storybook/prefer-pascal-case
 export const prefixes = { なし: '', あり: <FaCirclePlusIcon /> }
 
 export default {

packages/smarthr-ui/src/components/Dialog/MessageDialog/MessageDialogContentInner.tsx

@@ -42,7 +42,6 @@ export const MessageDialogContentInner: FC<MessageDialogContentInnerProps> = ({
       <DialogBody contentPadding={contentPadding} contentBgColor={contentBgColor}>
         {description}
       </DialogBody>
-      {/* eslint-disable-next-line smarthr/best-practice-for-layouts */}
       <Cluster as="footer" justify="flex-end" className={actionArea()}>
         <Button onClick={onClickClose} className="smarthr-ui-Dialog-closeButton">
           {decorators?.closeButtonLabel?.(CLOSE_BUTTON_LABEL) || CLOSE_BUTTON_LABEL}

packages/smarthr-ui/src/components/FormControl/stories/FormControl.stories.tsx

@@ -54,7 +54,7 @@ export default {
   },
   args: {
     title: 'フォームコントロール',
-    // eslint-disable-next-line smarthr/a11y-input-has-name-attribute, smarthr/a11y-input-in-form-control
+
     children: <Input />,
   },
   parameters: {

packages/smarthr-ui/src/components/Input/SearchInput/stories/SearchInput.stories.tsx

@@ -9,7 +9,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 export default {
   title: 'Forms（フォーム）/SearchInput',
   component: SearchInput,
-  // eslint-disable-next-line smarthr/a11y-input-in-form-control
+
   render: (args) => <SearchInput {...args} />,
   args: {
     tooltipMessage: '氏名、ヨミガナ、社員番号で検索できます。スペース区切りでAND検索ができます。',
@@ -55,7 +55,6 @@ export const Width: StoryObj<typeof SearchInput> = {
   render: (args) => (
     <Stack align="flex-start">
       {['15em', '50%', 200].map((width) => (
-        // eslint-disable-next-line smarthr/a11y-input-in-form-control
         <SearchInput {...args} width={width} key={width} />
       ))}
     </Stack>

packages/smarthr-ui/src/components/Layout/Cluster/Cluster.tsx

@@ -97,7 +97,7 @@ type Props<T extends React.ElementType> = PropsWithChildren<
 > &
   ComponentPropsWithoutRef<T>
 
-const _Cluster = <T extends React.ElementType = 'div'>(
+const ActualCluster = <T extends React.ElementType = 'div'>(
   { as, gap = 0.5, inline = false, align, justify, className, ...rest }: Props<T>,
   ref: ForwardedRef<HTMLDivElement>,
 ) => {
@@ -119,4 +119,4 @@ const _Cluster = <T extends React.ElementType = 'div'>(
   )
 }
 
-export const Cluster = genericsForwardRef(_Cluster)
+export const Cluster = genericsForwardRef(ActualCluster)

packages/smarthr-ui/src/components/Layout/Reel/Reel.stories.tsx

@@ -29,11 +29,9 @@ export const All: StoryFn = () => {
   return (
     <Stack as="article" gap="M" style={{ padding: '20px' }}>
       <header>
-        {/* eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content */}
         <Heading>Reel</Heading>
       </header>
       <Stack as="section">
-        {/* eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content */}
         <Heading type="sectionTitle">
           with <code>gap</code>, <code>padding</code>
         </Heading>
@@ -46,7 +44,6 @@ export const All: StoryFn = () => {
         </Reel>
       </Stack>
       <Stack as="section">
-        {/* eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content */}
         <Heading type="sectionTitle">
           <code>TabBar</code>
         </Heading>
@@ -66,7 +63,6 @@ export const All: StoryFn = () => {
         </Reel>
       </Stack>
       <Stack as="section">
-        {/* eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content */}
         <Heading type="sectionTitle">
           <code>Table</code>
         </Heading>

packages/smarthr-ui/src/components/Picker/TimePicker.tsx

@@ -21,7 +21,6 @@ export const TimePicker = forwardRef<HTMLInputElement, PickerProps<Props>>(
 
     return (
       <span className={wrapperStyle}>
-        {/* eslint-disable-next-line smarthr/a11y-input-in-form-control */}
         <input
           {...rest}
           data-smarthr-ui-input="true"

packages/smarthr-ui/src/hooks/usePortal.tsx

@@ -42,7 +42,6 @@ export function usePortal() {
       document.body.removeChild(portalRoot)
     }
     // spread parentSeqs array for deps
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [portalRoot, ...parentSeqs])
 
   const isChildPortal = useCallback(