Teasing 2023

.dockerignore

@@ -1,17 +1,17 @@
-.git/
-Dockerfile
-
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# next.js
-/.next/
-
-# production
-/build
-
-# misc
-.DS_Store
-.env
+.git/
+Dockerfile
+
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# next.js
+/.next/
+
+# production
+/build
+
+# misc
+.DS_Store
+.env

.editorconfig

@@ -1,13 +1,13 @@
-# EditorConfig is awesome: http://EditorConfig.org
-
-# top-most EditorConfig file
-root = true
-
-[*]
-# Unix-style newlines
-end_of_line = lf
-insert_final_newline = false
-charset = utf-8
-indent_style = space
-indent_size = 2
+# EditorConfig is awesome: http://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+# Unix-style newlines
+end_of_line = lf
+insert_final_newline = false
+charset = utf-8
+indent_style = space
+indent_size = 2
 trim_trailing_whitespace = true

.eslintrc.json

@@ -5,10 +5,18 @@
     "plugin:import/warnings",
     "plugin:import/react",
     "eslint:recommended",
-    "next",
-    "prettier"
+    "next/core-web-vitals",
+    "prettier",
+    "plugin:storybook/recommended",
+    "plugin:@typescript-eslint/recommended"
   ],
-  "plugins": ["react-hooks", "react", "prettier"],
+  "parser": "@typescript-eslint/parser",
+  "plugins": [
+    "react",
+    "prettier",
+    "@typescript-eslint"
+  ],
+  "root": true,
   "parserOptions": {
     "ecmaVersion": 2018,
     "sourceType": "module",
@@ -25,20 +33,29 @@
     },
     "import/resolver": {
       "node": {
-        "extensions": [".js", ".jsx"]
+        "extensions": [
+          ".js",
+          ".jsx"
+        ]
       }
     }
   },
   "rules": {
-    "prettier/prettier": ["error"],
-    "no-console": "error",
+    "prettier/prettier": [
+      "error"
+    ],
+    "no-console": "off",
     "no-alert": "error",
-    "linebreak-style": ["warn", "unix"],
-    "react/require-default-props": "error",
+    "linebreak-style": [
+      "warn",
+      "unix"
+    ],
+    "react/require-default-props": "off",
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "off",
     "react/no-unescaped-entities": "off",
     "import/default": "off",
+    "@typescript-eslint/no-explicit-any": "warn",
     "@next/next/no-img-element": "off"
   }
 }

.github/workflows/ci.yml

@@ -8,14 +8,21 @@ on:
 jobs:
   lint:
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [18]
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/cache@v2
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
         with:
-          path: '**/node_modules'
-          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
-      - run: yarn --frozen-lockfile
-      - run: yarn lint
+          version: 8
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'pnpm'
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm lint
       - uses: lazy-actions/slatify@master
         if: ${{ failure() }}
         with:
@@ -27,14 +34,21 @@ jobs:
 
   build:
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [18]
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/cache@v2
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
         with:
-          path: '**/node_modules'
-          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
-      - run: yarn --frozen-lockfile
-      - run: yarn build
+          node-version: ${{ matrix.node-version }}
+          cache: 'pnpm'
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm build
       - uses: lazy-actions/slatify@master
         if: ${{ failure() }}
         with:
@@ -53,7 +67,7 @@ jobs:
     env:
       RESOURCE_NAME: ${{ github.ref == 'refs/heads/master' && 'prod-front' || github.ref == 'refs/heads/teaser' && 'prod-teaser' || 'dev-front' }}
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - name: Install oc
         uses: redhat-actions/oc-installer@v1
         with:

.gitignore

@@ -2,15 +2,42 @@
 
 # dependencies
 /node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+/.nyc_output
 
 # next.js
 /.next/
+/out/
 
 # production
 /build
 
 # misc
 .DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+pnpm-debug.log*
+pnpm-error.log*
+
+# local env files
+.env*.local
 .env
-.vscode/
-yarn-error.log
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# docs
+/docs
+
+# Webstorm
+.idea/

.storybook/main.ts

@@ -0,0 +1,34 @@
+import type { StorybookConfig } from '@storybook/nextjs';
+import path from 'path';
+
+const config: StorybookConfig = {
+  stories: ['./../src/**/*.mdx', './../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-a11y',
+    '@storybook/addon-coverage'
+  ],
+  framework: {
+    name: '@storybook/nextjs',
+    options: {
+    },
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  webpackFinal: (config) => {
+    /**
+     * Add support for alias-imports
+     * @see https://github.com/storybookjs/storybook/issues/11989#issuecomment-715524391
+     */
+    config!.resolve!.alias = {
+      ...config.resolve?.alias,
+      '@': [path.resolve(__dirname, '../src/'), path.resolve(__dirname, '../')],
+    };
+
+    return config;
+  }
+};
+export default config;

.storybook/manager-head.html

@@ -0,0 +1 @@
+<meta name="robots" content="noindex" />

.storybook/preview-body.html

@@ -0,0 +1,10 @@
+<style>
+    :root {
+        --font-montserrat: 'Montserrat', sans-serif;
+        --font-lexend: 'Lexend', sans-serif;
+    }
+
+    .icon {
+        color: black;
+    }
+</style>

.storybook/preview-head.html

@@ -0,0 +1,2 @@
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lexend&family=Montserrat:wght@400;600;700&display=swap" />
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/2.0.0/modern-normalize.min.css" />

.storybook/preview.ts

@@ -0,0 +1,20 @@
+import type { Preview } from '@storybook/react';
+import { expect } from '@storybook/jest';
+import * as matchers from '@testing-library/jest-dom/matchers';
+expect.extend(matchers);
+
+import '@/styles.scss';
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

Dockerfile

@@ -1,18 +1,20 @@
-FROM node:16
+FROM node:18
 
 ENV NODE_ENV=production
 WORKDIR /srv/app
 
+RUN npm install -g pnpm
+
 RUN chown node:node .
 
 USER node
 
-COPY --chown=node:node package.json yarn.lock ./
+COPY --chown=node:node package.json pnpm-lock.yaml ./
 
-RUN yarn --frozen-lockfile
+RUN pnpm install --frozen-lockfile
 
 COPY --chown=node:node ./ ./
 
-RUN yarn build
+RUN pnpm build
 
-CMD yarn start
+CMD pnpm start

README.md

@@ -9,7 +9,7 @@ Nouvelle version du site de l'UTT Arena ([https://arena.utt.fr](https://arena.ut
 
 ## Pré-requis
 
-- [Yarn](https://yarnpkg.com/fr/)
+- [Pnpm](https://pnpm.io/)
 
 ## Installation
 
@@ -18,7 +18,7 @@ Nouvelle version du site de l'UTT Arena ([https://arena.utt.fr](https://arena.ut
 ```
 git clone https://github.com/ungdev/UA-front.git
 cd UA-front
-yarn
+pnpm install
 ```
 
 ### Modification de la configuration
@@ -31,9 +31,13 @@ cp .env.example .env
 
 ## Scripts disponibles
 
-- `yarn dev` : permet de lancer une version locale de développement
-- `yarn build` : permet de build l'application
-- `yarn start` : permet de servir le build
-- `yarn build-docs` : permet de générer la documentation des composants situés dans le dossier /src/components/UI. La documentation se situera dans le dossier /docs.
-- `yarn lint` : permet d'afficher les recommendations de formatage du code
-- `yarn lint-fix` : permet de corriger le formatage du code
+- `pnpm dev` : permet de lancer une version locale de développement
+- `pnpm build` : permet de build l'application
+- `pnpm start` : permet de servir le build
+- `pnpm lint` : permet d'afficher les recommendations de formatage du code
+- `pnpm lint:fix` : permet de corriger le formatage du code
+- `pnpm storybook` : permet de lancer une version locale de Storybook pour visualiser la documentation des composants
+- `pnpm storybook:build` : permet de générer la documentation des composants via Storybook. La documentation est générée dans le dossier `docs`
+- `pnpm test` : permet de lancer les tests unitaires
+- `pnpm test:watch` : permet de lancer les tests unitaires en mode watch
+- `pnpm test:coverage` : permet de lancer les tests unitaires et d'afficher la couverture de code