diff --git a/examples/next-with-app-router/.eslintrc.js b/examples/next-with-app-router/.eslintrc.js new file mode 100644 index 0000000000..373793ce92 --- /dev/null +++ b/examples/next-with-app-router/.eslintrc.js @@ -0,0 +1,109 @@ +module.exports = { + extends: [ + '../../.eslintrc', + '@lmc-eu/eslint-config-react', + '@lmc-eu/eslint-config-typescript', + '@lmc-eu/eslint-config-typescript/react', + 'prettier', + 'plugin:prettier/recommended', + '@lmc-eu/eslint-config-jest', + 'plugin:@next/next/recommended', + ], + env: { + jest: true, + }, + plugins: ['promise', 'react', '@typescript-eslint', 'prettier', 'react-refresh'], + parser: '@typescript-eslint/parser', + parserOptions: { + ecmaVersion: 'latest', + project: './tsconfig.eslint.json', + }, + rules: { + // @see: https://github.com/ArnaudBarre/eslint-plugin-react-refresh + 'react-refresh/only-export-components': 'warn', + // @TODO: add to typescript config + 'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx', '.ts', '.tsx'] }], + // we like to use props spreading for additional props in this case + 'react/jsx-props-no-spreading': 'off', // Used inside HOC, that is fine. + // prefer arrow function over function expression + 'react/function-component-definition': [ + 'warn', + { namedComponents: 'arrow-function', unnamedComponents: 'arrow-function' }, + ], + // we have missing displayName attribute in our components + // it is good for debugging + // @see: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/display-name.md + 'react/display-name': 'off', + // ignore UNSTABLE_ prefix in component names + 'react/jsx-pascal-case': [ + 'error', + { + allowAllCaps: true, + ignore: ['UNSTABLE_*'], + }, + ], + // ignore UNSAFE and UNSTABLE_ prefixes + camelcase: [ + 'error', + { + properties: 'never', + ignoreDestructuring: false, + allow: ['^UNSAFE_', '^UNSTABLE_'], + }, + ], + // allow ++ in for loops + 'no-plusplus': ['error', { allowForLoopAfterthoughts: true }], + // allow reassign in properties + 'no-param-reassign': ['warn', { props: false }], + // support monorepos + 'import/no-extraneous-dependencies': [ + 'error', + { + packageDir: ['./', '../../'], + peerDependencies: true, + }, + ], + 'import/order': [ + 'error', + { + groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'], + pathGroups: [ + { + pattern: '**', + group: 'internal', + }, + { + pattern: '..', + group: 'parent', + position: 'after', + }, + ], + pathGroupsExcludedImportTypes: ['builtin'], + alphabetize: { + order: 'asc', + caseInsensitive: true, + }, + 'newlines-between': 'never', + }, + ], + // disable double quotes + quotes: ['warn', 'single'], + // use useIsomorphicLayoutEffect instead of useLayoutEffect + // @see: https://medium.com/@alexandereardon/uselayouteffect-and-ssr-192986cdcf7a + 'no-restricted-imports': [ + 'error', + // Disabling using of useLayoutEffect from react + { + name: 'react', + importNames: ['useLayoutEffect'], + message: '`useLayoutEffect` causes a warning in SSR. Use `useIsomorphicLayoutEffect`', + }, + ], + // allow empty interfaces with single extends (e.g. interface Foo extends SpiritBar {}) + // interface which extends some other interface is not considered as meaningful interface + // we need this for meeting our component API conventions + // @see: https://typescript-eslint.io/rules/no-empty-interface/ + '@typescript-eslint/no-empty-interface': ['error', { allowSingleExtends: true }], + 'react/react-in-jsx-scope': 'off', + }, +}; diff --git a/examples/next-with-app-router/.eslintrc.json b/examples/next-with-app-router/.eslintrc.json deleted file mode 100644 index f6565e04a8..0000000000 --- a/examples/next-with-app-router/.eslintrc.json +++ /dev/null @@ -1,109 +0,0 @@ -{ - "extends": [ - "../../.eslintrc", - "@lmc-eu/eslint-config-react", - "@lmc-eu/eslint-config-typescript", - "@lmc-eu/eslint-config-typescript/react", - "prettier", - "plugin:prettier/recommended", - "@lmc-eu/eslint-config-jest", - "plugin:@next/next/recommended" - ], - "env": { - "jest": true - }, - "plugins": ["promise", "react", "@typescript-eslint", "prettier", "react-refresh"], - "parser": "@typescript-eslint/parser", - "parserOptions": { - "ecmaVersion": "latest", - "project": "./tsconfig.eslint.json" - }, - "rules": { - // @see: https://github.com/ArnaudBarre/eslint-plugin-react-refresh - "react-refresh/only-export-components": "warn", - // @TODO: add to typescript config - "react/jsx-filename-extension": ["error", { "extensions": [".js", ".jsx", ".ts", ".tsx"] }], - // we like to use props spreading for additional props in this case - "react/jsx-props-no-spreading": "off", // Used inside HOC, that is fine. - // prefer arrow function over function expression - "react/function-component-definition": [ - "warn", - { "namedComponents": "arrow-function", "unnamedComponents": "arrow-function" } - ], - // we have missing displayName attribute in our components - // it is good for debugging - // @see: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/display-name.md - "react/display-name": "off", - // ignore UNSTABLE_ prefix in component names - "react/jsx-pascal-case": [ - "error", - { - "allowAllCaps": true, - "ignore": ["UNSTABLE_*"] - } - ], - // ignore UNSAFE and UNSTABLE_ prefixes - "camelcase": [ - "error", - { - "properties": "never", - "ignoreDestructuring": false, - "allow": ["^UNSAFE_", "^UNSTABLE_"] - } - ], - // allow ++ in for loops - "no-plusplus": ["error", { "allowForLoopAfterthoughts": true }], - // allow reassign in properties - "no-param-reassign": ["warn", { "props": false }], - // support monorepos - "import/no-extraneous-dependencies": [ - "error", - { - "packageDir": ["./", "../../"], - "peerDependencies": true - } - ], - "import/order": [ - "error", - { - "groups": ["builtin", "external", "internal", "parent", "sibling", "index"], - "pathGroups": [ - { - "pattern": "**", - "group": "internal" - }, - { - "pattern": "..", - "group": "parent", - "position": "after" - } - ], - "pathGroupsExcludedImportTypes": ["builtin"], - "alphabetize": { - "order": "asc", - "caseInsensitive": true - }, - "newlines-between": "never" - } - ], - // disable double quotes - "quotes": ["warn", "single"], - // use useIsomorphicLayoutEffect instead of useLayoutEffect - // @see: https://medium.com/@alexandereardon/uselayouteffect-and-ssr-192986cdcf7a - "no-restricted-imports": [ - "error", - // Disabling using of useLayoutEffect from react - { - "name": "react", - "importNames": ["useLayoutEffect"], - "message": "`useLayoutEffect` causes a warning in SSR. Use `useIsomorphicLayoutEffect`" - } - ], - // allow empty interfaces with single extends (e.g. interface Foo extends SpiritBar {}) - // interface which extends some other interface is not considered as meaningful interface - // we need this for meeting our component API conventions - // @see: https://typescript-eslint.io/rules/no-empty-interface/ - "@typescript-eslint/no-empty-interface": ["error", { "allowSingleExtends": true }], - "react/react-in-jsx-scope": "off" - } -} diff --git a/examples/next-with-app-router/README.md b/examples/next-with-app-router/README.md index d896e8c195..2032e7d1e7 100644 --- a/examples/next-with-app-router/README.md +++ b/examples/next-with-app-router/README.md @@ -14,16 +14,4 @@ In case of error `npm error ERR! code ENOWORKSPACES`, please use `npx another te Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. -You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. - -## Learn More - -To learn more about Next.js, take a look at the following resources: - -- [Next.js Documentation][nextjs-documentation] - learn about Next.js features and API. -- [Learn Next.js][learn-nextjs] - an interactive Next.js tutorial. - -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! - -[nextjs-documentation]: https://nextjs.org/docs -[learn-nextjs]: https://nextjs.org/learn +You can start editing the page by modifying `src/app/page.tsx`. The page auto-updates as you edit the file.