Feat: Example NextJS app with pages router #DS-1393

.prettierignore

@@ -62,3 +62,6 @@ makefile
 
 # Shell Scripts
 *.sh
+
+# Favicon
+*.ico

examples/next-with-pages-router/.eslintignore

@@ -0,0 +1,18 @@
+# .eslintignore
+
+node_modules
+
+# NOTE:
+# The following directives are only relevant when linting the whole
+# project directory, ie. running `eslint .` ⚠️
+
+# If you compile JavaScript into some output folder, exclude it here
+dist
+build
+
+# Highly recommended to re-include JavaScript dotfiles to lint them
+# (This will cause .eslintrc.js to be linted by ESLint 🤘)
+!.*.js
+
+# Some tools use this pattern for their configuration files. Lint them!
+!*.config.js

examples/next-with-pages-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',
+  },
+};

examples/next-with-pages-router/.gitignore

@@ -0,0 +1,8 @@
+# production
+/build
+
+# vercel
+.vercel
+
+# typescript
+next-env.d.ts

examples/next-with-pages-router/README.md

@@ -0,0 +1,21 @@
+# Example Next.js application with pages router
+
+This application is used to demonstrate the configuration of a Next.js application with an App router for use with the Spirit Design System.
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+yarn dev
+```
+
+In case of error `npm error ERR! code ENOWORKSPACES`, please use `npx another telemetry disable`. For more information see [NPM error code ENOWORKSPACES with NextJS][npm-error-enoworkspaces].
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `src/pages/index.tsx`. The page auto-updates as you edit the file.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+[npm-error-enoworkspaces]: https://github.com/vercel/turborepo/issues/4183

examples/next-with-pages-router/next.config.mjs

@@ -0,0 +1,19 @@
+import path, { dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const pathDir = dirname(fileURLToPath(import.meta.url));
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  transpilePackages: ['@lmc-eu/spirit-web-react'],
+  reactStrictMode: true,
+  sassOptions: {
+    fiber: false,
+    includePaths: [
+      path.join(pathDir, '../../node_modules'),
+      path.join(pathDir, '../../node_modules/@lmc-eu/spirit-design-tokens/scss'),
+    ],
+  },
+};
+
+export default nextConfig;

examples/next-with-pages-router/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@almacareer/spirit-example-next-with-pages-router",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@lmc-eu/spirit-design-tokens": "workspace:^",
+    "@lmc-eu/spirit-web": "workspace:^",
+    "@lmc-eu/spirit-web-react": "workspace:^",
+    "next": "14.2.3",
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "devDependencies": {
+    "@babel/preset-typescript": "^7.24.7",
+    "@next/eslint-plugin-next": "^14.2.5",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.5",
+    "typescript": "4.7.4"
+  },
+  "description": "This is a [Next.js](https://nextjs.org/) project with demo Spirit Design System components and pages router",
+  "main": "index.js",
+  "author": "Spirit Design System Team"
+}

examples/next-with-pages-router/src/pages/_app.tsx

@@ -0,0 +1,6 @@
+import type { AppProps } from 'next/app';
+import '../styles/globals.scss';
+
+const App = ({ Component, pageProps }: AppProps) => <Component {...pageProps} />;
+
+export default App;

examples/next-with-pages-router/src/pages/_document.tsx

@@ -0,0 +1,15 @@
+import { Html, Head, Main, NextScript } from 'next/document';
+
+const Document = () => {
+  return (
+    <Html lang="en">
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+};
+
+export default Document;

examples/next-with-pages-router/src/pages/index.tsx

@@ -0,0 +1,5 @@
+import { Heading } from '@lmc-eu/spirit-web-react';
+
+const Home = () => <Heading size="large">Spirit Pages App</Heading>;
+
+export default Home;

examples/next-with-pages-router/src/styles/globals.scss

@@ -0,0 +1 @@
+@import '@lmc-eu/spirit-web/src/scss';

examples/next-with-pages-router/tsconfig.eslint.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["./", "./.eslintrc.js"]
+}

examples/next-with-pages-router/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "useUnknownInCatchVariables": false,
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"],
+      "@lmc-eu/spirit-web-react": ["../../node_modules/@lmc-eu/spirit-web-react/src"],
+      "@lmc-eu/spirit-design-tokens": ["../../node_modules/@lmc-eu/spirit-design-tokens/src/js"]
+    },
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

yarn.lock

@@ -32,6 +32,27 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@almacareer/spirit-example-next-with-pages-router@workspace:examples/next-with-pages-router":
+  version: 0.0.0-use.local
+  resolution: "@almacareer/spirit-example-next-with-pages-router@workspace:examples/next-with-pages-router"
+  dependencies:
+    "@babel/preset-typescript": "npm:^7.24.7"
+    "@lmc-eu/spirit-design-tokens": "workspace:^"
+    "@lmc-eu/spirit-web": "workspace:^"
+    "@lmc-eu/spirit-web-react": "workspace:^"
+    "@next/eslint-plugin-next": "npm:^14.2.5"
+    "@types/node": "npm:^20"
+    "@types/react": "npm:^18"
+    "@types/react-dom": "npm:^18"
+    eslint: "npm:^8"
+    eslint-config-next: "npm:14.2.5"
+    next: "npm:14.2.3"
+    react: "npm:^18"
+    react-dom: "npm:^18"
+    typescript: "npm:4.7.4"
+  languageName: unknown
+  linkType: soft
+
 "@almacareer/spirit-exporters-variables-scss@workspace:exporters/variables-scss":
   version: 0.0.0-use.local
   resolution: "@almacareer/spirit-exporters-variables-scss@workspace:exporters/variables-scss"