feat(config): enhance development experience with strict linting and types

- Update ESLint configuration with strict React/TypeScript rules
- Enhance TypeScript configuration with stricter checks
- Add comprehensive type definitions and exports
- Update App.tsx with new routing and layout integration
- Create showcase pages for component development
- Improve package.json with proper dependencies

Configuration ensures code quality and developer productivity with
zero-tolerance for type errors and consistent code standards.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-08-16 12:44:54 -06:00
parent 48b9b680e3
commit edb83ff6b5
9 changed files with 874 additions and 249 deletions

View File

@@ -79,11 +79,11 @@ export default tseslint.config(
},
},
rules: {
// React Rules
// React Rules - Strict Configuration
...react.configs.recommended.rules,
...react.configs['jsx-runtime'].rules,
...reactHooks.configs.recommended.rules,
...jsxA11y.configs.recommended.rules,
...jsxA11y.configs.strict.rules,
// React Refresh
'react-refresh/only-export-components': [
@@ -122,11 +122,27 @@ export default tseslint.config(
},
],
'react/jsx-pascal-case': ['error', { allowAllCaps: true }],
'react/no-array-index-key': 'off', // Allow index keys for static lists
'react/no-array-index-key': 'warn', // Warn about index keys - use stable IDs when possible
'react/no-danger': 'error',
'react/no-deprecated': 'error',
'react/no-unsafe': 'error',
'react/hook-use-state': 'warn',
'react-hooks/exhaustive-deps': 'error', // Strict enforcement of exhaustive deps
'react/display-name': 'error', // All components must have display names
// Accessibility - Additional Strict Rules
'jsx-a11y/no-autofocus': ['error', { ignoreNonDOM: true }],
'jsx-a11y/anchor-is-valid': 'error',
'jsx-a11y/click-events-have-key-events': 'error',
'jsx-a11y/interactive-supports-focus': 'error',
'jsx-a11y/label-has-associated-control': 'error',
'jsx-a11y/media-has-caption': 'error',
'jsx-a11y/no-static-element-interactions': 'error',
'jsx-a11y/role-has-required-aria-props': 'error',
'jsx-a11y/role-supports-aria-props': 'error',
'jsx-a11y/scope': 'error',
'jsx-a11y/heading-has-content': 'error',
'jsx-a11y/img-redundant-alt': 'error',
// TypeScript Rules
'@typescript-eslint/no-unused-vars': [
@@ -148,12 +164,22 @@ export default tseslint.config(
'@typescript-eslint/no-unused-expressions': 'error',
'@typescript-eslint/prefer-readonly': 'warn',
'@typescript-eslint/explicit-function-return-type': [
'off', // Let TypeScript infer return types for React components
'warn', // Enforce explicit return types for better documentation
{
allowExpressions: true,
allowTypedFunctionExpressions: true,
allowHigherOrderFunctions: true,
allowDirectConstAssertionInArrowFunctions: true,
allowConciseArrowFunctionExpressionsStartingWithVoid: true,
},
],
'@typescript-eslint/explicit-module-boundary-types': [
'warn',
{
allowArgumentsExplicitlyTypedAsAny: false,
allowDirectConstAssertionInArrowFunctions: true,
allowHigherOrderFunctions: true,
allowTypedFunctionExpressions: true,
},
],
'@typescript-eslint/consistent-type-imports': [
@@ -216,8 +242,11 @@ export default tseslint.config(
'import/default': 'off', // React 18 JSX transform doesn't export default
'import/export': 'error',
// General Code Quality
'no-console': ['warn', { allow: ['warn', 'error'] }],
// General Code Quality - Strict Rules
'no-console': process.env.NODE_ENV === 'production'
? ['error', { allow: ['warn', 'error'] }]
: ['warn', { allow: ['warn', 'error', 'info'] }],
'prefer-const': 'error',
'no-debugger': 'error',
'no-alert': 'error',
'no-var': 'error',
@@ -248,7 +277,7 @@ export default tseslint.config(
'no-async-promise-executor': 'error',
'no-await-in-loop': 'warn',
// Naming Conventions
// Naming Conventions - Strict Standards
'@typescript-eslint/naming-convention': [
'error',
{
@@ -268,6 +297,15 @@ export default tseslint.config(
selector: 'interface',
format: ['PascalCase'],
},
{
selector: 'interface',
filter: {
regex: '^.*Props$',
match: true,
},
format: ['PascalCase'],
suffix: ['Props'],
},
{
selector: 'typeAlias',
format: ['PascalCase'],
@@ -276,6 +314,10 @@ export default tseslint.config(
selector: 'enum',
format: ['PascalCase'],
},
{
selector: 'enumMember',
format: ['UPPER_CASE'],
},
],
},
},
@@ -320,11 +362,11 @@ export default tseslint.config(
},
},
rules: {
// React Rules
// React Rules - Strict Configuration
...react.configs.recommended.rules,
...react.configs['jsx-runtime'].rules,
...reactHooks.configs.recommended.rules,
...jsxA11y.configs.recommended.rules,
...jsxA11y.configs.strict.rules,
// React Refresh
'react-refresh/only-export-components': [
@@ -355,13 +397,16 @@ export default tseslint.config(
},
],
'react/jsx-pascal-case': ['error', { allowAllCaps: true }],
'react/no-array-index-key': 'off', // Allow index keys for static lists
'react/no-array-index-key': 'warn', // Warn about index keys - use stable IDs when possible
'react/no-danger': 'error',
'react/no-deprecated': 'error',
'react/no-unsafe': 'error',
// General Code Quality
'no-console': ['warn', { allow: ['warn', 'error'] }],
// General Code Quality - Strict Rules
'no-console': process.env.NODE_ENV === 'production'
? ['error', { allow: ['warn', 'error'] }]
: ['warn', { allow: ['warn', 'error', 'info'] }],
'prefer-const': 'error',
'no-debugger': 'error',
'no-alert': 'error',
'no-var': 'error',