refactor(app): move to a full React library

Author: dpellier

.cds/actions/setup.yml

@@ -0,0 +1,13 @@
+name: "setup"
+description: "Setup ODS repository"
+runs:
+  runs-on: library/node-22
+  steps:
+    - name: Checkout code
+      uses: actions/checkout
+
+    - name: Install Yarn
+      run: npm i --force -g yarn
+
+    - name: Install dependencies
+      run: yarn

.cds/workflows/pull-request-check.yml

@@ -0,0 +1,66 @@
+name: pull-request-check
+
+on: [push]
+
+integrations:
+  - artifactory-digital-tools-tech-components-ods
+
+jobs:
+  deploy-storybook:
+    runs-on: library/node-22
+    steps:
+      - name: Setup repository
+        uses: .cds/actions/setup.yml
+
+      - name: Build ODS
+        run: yarn build:prod
+
+      - name: Generate documentation
+        run: yarn doc
+
+      - name: Build storybook
+        run: yarn build:storybook
+
+      - uses: library/serveStaticFiles
+        with:
+          name: ods-storybook
+          destination: ${{ git.ref_name }}
+          source: packages/storybook/dist
+
+  e2e-tests:
+    runs-on: library/node-22
+    steps:
+      - name: Install needed libraries
+        run: |
+          apt-get update -y
+          apt install -y ca-certificates fonts-liberation libasound2 libatk-bridge2.0-0 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgbm1 libgcc1 libglib2.0-0 libgtk-3-0 libnspr4 libnss3 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 lsb-release wget xdg-utils
+
+      - name: Setup repository
+        uses: .cds/actions/setup.yml
+
+      - name: Build ODS
+        run: yarn build:prod
+
+      - name: Run e2e tests
+        run: yarn test:e2e:ci
+
+  linters:
+    runs-on: library/node-22
+    steps:
+      - name: Setup repository
+        uses: .cds/actions/setup.yml
+
+      - name: Run linter TS
+        run: yarn lint:ts
+
+      - name: Run linter SCSS
+        run: yarn lint:scss
+
+  unit-tests:
+    runs-on: library/node-22
+    steps:
+      - name: Setup repository
+        uses: .cds/actions/setup.yml
+
+      - name: Run unit tests
+        run: yarn test:spec:ci

.eslintrc

@@ -1,7 +1,9 @@
 {
   "extends": [
     "eslint:recommended",
-    "plugin:@typescript-eslint/recommended"
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
@@ -12,7 +14,8 @@
   "plugins": [
     "@typescript-eslint",
     "eslint-plugin-import",
-    "eslint-plugin-tsdoc"
+    "eslint-plugin-tsdoc",
+    "react"
   ],
   "root": true,
   "rules": {
@@ -26,19 +29,23 @@
     "@typescript-eslint/ban-ts-comment": ["error", { "ts-ignore": "allow-with-description" }],
     "array-bracket-spacing": ["error", "never"],
     "arrow-parens": ["error", "always"],
-    "arrow-spacing": ["error", { "before": true, "after": true }],
+    "arrow-spacing": ["error", { "after": true, "before": true }],
     "brace-style": ["error", "1tbs"],
     "comma-dangle": ["error", "always-multiline"],
     "complexity": ["error"],
     "curly": ["error", "all"],
     "default-case": "error",
     "func-call-spacing": ["error", "never"],
-    "func-style": ["error", "declaration"],
+    "func-style": ["error", "declaration", { "allowArrowFunctions": true }],
     "function-call-argument-newline": ["error", "consistent"],
     "import/no-unresolved": "error",
     "import/order": [
       "error",
       {
+        "alphabetize": {
+          "caseInsensitive": true,
+          "order": "asc"
+        },
         "groups": [
           "type",
           "builtin", // Built-in imports (come from NodeJS native) go first
@@ -51,10 +58,13 @@
           "unknown" // <- unknown
         ],
         "newlines-between": "never",
-        "alphabetize": {
-          "order": "asc",
-          "caseInsensitive": true
-        }
+        "pathGroups": [
+          {
+            "group": "object",
+            "pattern": "{.,..}/*.scss", // same directory only
+            "position": "after"
+          }
+        ]
       }
     ],
     "indent": ["error", 2, { "SwitchCase": 1 }],
@@ -65,7 +75,7 @@
     "newline-per-chained-call": "off",
     "no-array-constructor": "error",
     "no-await-in-loop": "error",
-    "no-console": ["error", { "allow": ["warn", "error"] }],
+    "no-console": ["error", { "allow": ["error", "warn"] }],
     "no-extra-bind": "error",
     "no-magic-numbers": "off",
     "no-multi-spaces": "error",
@@ -75,6 +85,7 @@
     "object-curly-spacing": ["error", "always"],
     "operator-linebreak": ["error", "before", { "overrides": { "&&": "after" }}],
     "quotes": ["error", "single"],
+    "react/prop-types": 0,
     "semi": ["error", "always"],
     "sort-imports": [
       "error",
@@ -94,6 +105,9 @@
       "typescript": {
         "project": "./tsconfig.json"
       }
+    },
+    "react": {
+      "version": "detect"
     }
   }
 }

.gitignore

@@ -1,4 +1,3 @@
-
 # Created by https://www.toptal.com/developers/gitignore/api/node
 # Edit at https://www.toptal.com/developers/gitignore?templates=node
 
@@ -11,7 +10,7 @@ yarn-debug.log*
 yarn-error.log*
 lerna-debug.log*
 
-# Stencil #
+-# Stencil #
 .stencil/
 dist/
 loader/
@@ -140,6 +139,7 @@ Thumbs.db
 
 # remove generated definition files
 *.d.ts
+!modules.d.ts
 
 # used file storing the artijfrog token, used when building docker image
 /artitoken

package.json

@@ -7,13 +7,8 @@
   "license": "Apache-2.0",
   "workspaces": [
     "packages/examples/*",
-    "packages/ods",
-    "packages/ods/react",
-    "packages/ods/react/tests/*",
-    "packages/ods/src/components/!(dist|loader)*",
-    "packages/ods/style",
-    "packages/ods/vue",
-    "packages/ods/vue/tests/*",
+    "packages/ods-react",
+    "packages/ods-react/src/components/*",
     "packages/storybook",
     "packages/themes"
   ],
@@ -22,11 +17,11 @@
     "build:prod": "lerna run --stream build:prod",
     "build:storybook": "lerna run --stream build:storybook",
     "clean": "lerna run clean",
-    "doc": "lerna run doc",
+    "doc": "lerna run --concurrency 1 doc",
     "lint": "yarn lint:ts && yarn lint:scss",
     "lint:a11y": "lerna run lint:a11y",
-    "lint:ts": "lerna run lint:ts",
-    "lint:scss": "lerna run lint:scss",
+    "lint:ts": "lerna run --concurrency 1 lint:ts",
+    "lint:scss": "lerna run --concurrency 1 lint:scss",
     "new:component": "plop --plopfile scripts/component-generator/plopfile.js component",
     "ods:graduate": "yarn ods:release:prepare && yarn version:graduate",
     "ods:major": "yarn ods:release:prepare && yarn version:major",
@@ -65,6 +60,7 @@
     "eslint-import-resolver-typescript": "3.6.1",
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-jsx-a11y": "6.8.0",
+    "eslint-plugin-react": "7.37.4",
     "eslint-plugin-tsdoc": "0.2.17",
     "husky": "4.3.8",
     "lerna": "3.22.1",
@@ -76,11 +72,10 @@
     "stylelint-formatter-html": "1.0.1"
   },
   "engines": {
-    "node": ">= 18.17",
+    "node": ">= 22",
     "yarn": ">= 2.4.0"
   },
   "resolutions": {
-    "@types/react": "18.2.56",
     "@types/scheduler": "< 0.23.0"
   }
 }