⚡️(frontend) lib-components live transpiling

.circleci/config.yml

@@ -433,7 +433,6 @@ jobs:
           paths:
             - ./packages/lib_common/lib
             - ./packages/lib_tests/lib
-            - ./packages/lib_components/lib
           key: front-libs-<< pipeline.parameters.cache-version >>-{{ checksum "packages-last-commit.txt" }}
 
   build-front:

CHANGELOG.md

@@ -22,6 +22,7 @@ Versioning](https://semver.org/spec/v2.0.0.html).
 - live transpilation on lib-video (#2150)
 - live transpilation on lib-classroom (#2157)
 - live transpilation on lib-markdown (#2160)
+- live transpilation on lib-components (#2161)
 - Add a widget provider for the classroom creation form
 - Add classroom widgets :
   - InfoBar

src/frontend/apps/lti_site/package.json

@@ -91,9 +91,9 @@
     "highlight.js": "11.7.0",
     "iframe-resizer": "4.3.6",
     "intl": "1.2.5",
-    "jwt-decode": "3.1.2",
     "katex": "0.16.4",
     "lib-classroom": "4.0.0-beta.18",
+    "lib-components": "*",
     "lib-markdown": "4.0.0-beta.18",
     "lib-video": "4.0.0-beta.18",
     "lodash": "4.17.21",

src/frontend/apps/standalone_site/package.json

@@ -20,9 +20,12 @@
   "dependencies": {
     "@craco/craco": "7.1.0",
     "grommet": "*",
+    "grommet-icons": "4.10.0",
     "http-proxy-middleware": "2.0.6",
     "lib-classroom": "4.0.0-beta.18",
+    "lib-components": "*",
     "lib-video": "4.0.0-beta.18",
+    "luxon": "3.3.0",
     "marsha-config": "*",
     "react": "17.0.2",
     "react-dom": "17.0.2",

src/frontend/package.json

@@ -30,7 +30,7 @@
     "test-site": "yarn build-tests && yarn workspace standalone_site run test",
     "test": "yarn test-libs && yarn test-lib-classroom && yarn test-lti && yarn test-site",
     "build-tests": "yarn workspace lib-common run build && yarn workspace lib-tests run build",
-    "build-libs": "yarn build-tests && yarn workspace lib-components run build",
+    "build-libs": "yarn build-tests",
     "build-lti": "yarn build-libs && yarn workspace marsha run build",
     "build-site": "yarn build-libs && yarn workspace standalone_site run build",
     "start-site": "yarn build-libs && yarn workspace standalone_site run start",
@@ -48,6 +48,7 @@
     "eslint": "8.36.0",
     "eslint-config-marsha": "4.0.0-beta.18",
     "grommet": "2.31.0",
+    "lib-components": "4.0.0-beta.18",
     "marsha-config": "4.0.0-beta.18",
     "styled-components": "5.3.9",
     "typescript": "4.9.5",

src/frontend/packages/lib_classroom/jest.config.js

@@ -4,6 +4,7 @@ module.exports = {
   moduleNameMapper: {
     '\\.(css)$': '<rootDir>/__mocks__/styleMock.js',
     '@lib-classroom/(.*)': '<rootDir>/src/$1',
+    '@lib-components/(.*)': '<rootDir>/../lib_components/src/$1',
   },
   reporters: [
     'default',

src/frontend/packages/lib_classroom/package.json

@@ -22,9 +22,7 @@
     "react-dom": "*",
     "react-hot-toast": "*",
     "react-intl": "*",
-    "react-query": "*",
-    "styled-components": "*",
-    "zustand": "*"
+    "react-query": "*"
   },
   "devDependencies": {
     "@babel/core": "7.21.3",
@@ -70,10 +68,12 @@
     "react-query": "3.39.3",
     "react-router-dom": "5.3.0",
     "source-map-loader": "4.0.1",
-    "styled-components": "*",
     "typescript": "*"
   },
   "dependencies": {
-    "react-dropzone": "14.2.3"
+    "lib-components": "*",
+    "react-dropzone": "14.2.3",
+    "styled-components": "*",
+    "zustand": "*"
   }
 }

src/frontend/packages/lib_classroom/tsconfig.json

@@ -3,7 +3,12 @@
   "compilerOptions": {
     "baseUrl": "./src",
     "paths": {
-      "@lib-classroom/*": ["./*"]
+      "@lib-classroom/*": ["./*"],
+      "@lib-components/*": ["../../lib_components/src/*"],
+      "converse": ["../../lib_components/src/types/libs/converse"],
+      "JitsiMeetExternalAPI": [
+        "../../lib_components/src/types/libs/JitsiMeetExternalAPI"
+      ]
     }
   },
   "include": ["**/*.ts", "**/*.tsx", "**/*.d.ts"],

src/frontend/packages/lib_components/.eslintrc.js

@@ -22,7 +22,7 @@ module.exports = {
         ],
         pathGroups: [
           {
-            pattern: '+(common|hooks|types|utils|data|settings)/**',
+            pattern: '+(@lib-components)/**',
             group: 'internal',
           },
         ],

src/frontend/packages/lib_components/jest.config.js

@@ -5,6 +5,7 @@ module.exports = {
     '\\.(css)$': '<rootDir>/__mocks__/styleMock.js',
     'is-reference': '<rootDir>/node_modules/is-reference/src/index.js',
     'estree-walker': '<rootDir>/node_modules/estree-walker/src/index.js',
+    '@lib-components/(.*)': '<rootDir>/src/$1',
   },
   reporters: [
     'default',
@@ -14,7 +15,7 @@ module.exports = {
   setupFilesAfterEnv: [
     'core-js',
     'regenerator-runtime/runtime',
-    './testSetup.ts',
+    './testSetup.js',
   ],
   testEnvironment: 'jsdom',
   testEnvironmentOptions: {

src/frontend/packages/lib_components/package.json

@@ -2,38 +2,26 @@
   "name": "lib-components",
   "version": "4.0.0-beta.18",
   "license": "MIT",
-  "directories": {
-    "lib": "lib"
-  },
-  "main": "lib/cjs/index.js",
-  "module": "lib/esm/index.js",
-  "types": "lib/dts/index.d.ts",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
   "sideEffects": false,
   "scripts": {
-    "build": "rollup -c",
-    "build:watch": "yarn build --watch",
-    "lint": "eslint src/**/*.{ts,tsx}",
-    "lint:fix": "yarn run lint -- --fix",
+    "lint": "tsc --noEmit && eslint src/**/*.{ts,tsx}",
+    "lint:fix": "yarn run lint --fix",
     "test": "cross-env TZ=UTC jest --passWithNoTests",
     "test:coverage": "yarn run test -- --coverage",
     "test:ci": "yarn run lint && yarn run test -- --reporters=jest-junit",
     "prettier": "prettier --list-different '**/*.+(ts|tsx|json|js|jsx)' --ignore-path ../../../.prettierignore"
   },
   "peerDependencies": {
-    "@testing-library/react": "*",
     "grommet": "*",
-    "jest-image-snapshot": "*",
-    "jest-matchmedia-mock": "*",
-    "jsdom-screenshot": "*",
+    "grommet-icons": "*",
     "luxon": "3.3.0",
     "react": "*",
     "react-dom": "*",
     "react-hot-toast": "*",
     "react-intl": "*",
-    "react-query": "*",
-    "rollup-plugin-dts": "5.3.0",
-    "styled-components": "*",
-    "zustand": "4.3.6"
+    "react-query": "*"
   },
   "devDependencies": {
     "@babel/core": "7.21.3",
@@ -44,10 +32,6 @@
     "@babel/preset-env": "7.20.2",
     "@babel/preset-typescript": "7.21.0",
     "@formatjs/cli": "6.0.4",
-    "@rollup/plugin-babel": "6.0.3",
-    "@rollup/plugin-commonjs": "24.0.1",
-    "@rollup/plugin-json": "6.0.0",
-    "@rollup/plugin-node-resolve": "15.0.1",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "12.1.5",
     "@testing-library/react-hooks": "8.0.1",
@@ -65,13 +49,8 @@
     "@types/styled-components": "5.1.26",
     "@types/uuid": "9.0.1",
     "@types/video.js": "7.3.51",
-    "babel-jest": "29.5.0",
-    "babel-loader": "9.1.2",
-    "babel-plugin-formatjs": "10.4.0",
-    "babel-preset-react": "7.0.0-beta.3",
     "clipboard": "2.0.11",
     "cross-env": "7.0.3",
-    "css-loader": "6.7.3",
     "eslint": "*",
     "eslint-config-marsha": "*",
     "faker": "5.5.3",
@@ -83,7 +62,6 @@
     "jest-matchmedia-mock": "1.1.0",
     "jest-styled-components": "7.1.1",
     "jsdom-screenshot": "4.0.0",
-    "jwt-decode": "3.1.2",
     "luxon": "3.3.0",
     "prettier": "2.8.7",
     "react": "17.0.2",
@@ -93,22 +71,16 @@
     "react-intl": "5.24.8",
     "react-query": "3.39.3",
     "react-router-dom": "5.3.0",
-    "rollup": "3.20.2",
-    "rollup-jest": "3.1.0",
-    "rollup-plugin-delete": "2.0.0",
-    "rollup-plugin-dts": "5.3.0",
-    "rollup-plugin-peer-deps-external": "2.2.4",
-    "rollup-plugin-polyfill-node": "0.12.0",
-    "rollup-plugin-typescript2": "0.34.1",
     "source-map-loader": "4.0.1",
-    "style-loader": "3.3.2",
-    "styled-components": "5.3.9",
-    "ts-jest": "29.0.5",
-    "tsc-alias": "1.8.4",
     "typescript": "4.9.5",
+    "xhr-mock": "2.5.1"
+  },
+  "dependencies": {
+    "jwt-decode": "3.1.2",
+    "react-dropzone": "14.2.3",
+    "styled-components": "*",
     "uuid": "9.0.0",
     "web-streams-polyfill": "3.2.1",
-    "xhr-mock": "2.5.1",
-    "zustand": "4.3.6"
+    "zustand": "*"
   }
 }