fix(TDOPS-5683): Add missing deps for latest packages, fix eslint and…

… fix react-webpack using BASENAME without CDN (#4990)

.changeset/clever-humans-promise.md

@@ -0,0 +1,5 @@
+---
+'@talend/scripts-config-react-webpack': patch
+---
+
+Fix possibility to use BASENAME even if we are not using the cdn

.changeset/fast-seas-suffer.md

@@ -0,0 +1,5 @@
+---
+'@talend/react-bootstrap': patch
+---
+
+Fix lint issue

.changeset/gold-carrots-brush.md

@@ -0,0 +1,5 @@
+---
+'@talend/bootstrap-sass': patch
+---
+
+Add missing deps

.changeset/lazy-tools-invite.md

@@ -0,0 +1,5 @@
+---
+'@talend/design-system': patch
+---
+
+Add missing deps

.changeset/nasty-tips-bow.md

@@ -0,0 +1,5 @@
+---
+'@talend/scripts-config-prettier': patch
+---
+
+Add missing deps

.changeset/silly-grapes-sleep.md

@@ -0,0 +1,5 @@
+---
+'@talend/eslint-config': patch
+---
+
+Fix issue with eslint config

.changeset/tricky-ties-scream.md

@@ -0,0 +1,5 @@
+---
+'@talend/dynamic-cdn-webpack-plugin': minor
+---
+
+Add missing deps, adapt code to keep test working with pnpm and use custom eslint config to not have circular dependency

.changeset/weak-tips-own.md

@@ -0,0 +1,5 @@
+---
+'@talend/scripts-cmf': patch
+---
+
+Add missing deps

fork/bootstrap-sass/package.json

@@ -38,5 +38,10 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "devDependencies": {
+    "@talend/eslint-config": "^13.0.0",
+    "@talend/eslint-plugin": "^1.1.0",
+    "eslint": "^8.53.0"
   }
 }

fork/dynamic-cdn-webpack-plugin/.eslintrc.json

@@ -1,4 +1,16 @@
 {
   "root": true,
-  "extends": "@talend"
+  "extends": ["eslint:recommended", "plugin:prettier/recommended", "plugin:import/recommended"],
+  "env": {
+    "es6": true,
+    "node": true,
+    "jasmine": true,
+    "jest": true
+  },
+  "parser": "@babel/eslint-parser",
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module",
+    "requireConfigFile": false
+  }
 }

fork/dynamic-cdn-webpack-plugin/.gitignore

@@ -4,3 +4,4 @@ test/fixtures/output
 yarn.lock
 .nyc_output
 coverage
+!test/fixtures/app/node_modules

fork/dynamic-cdn-webpack-plugin/package.json

@@ -38,14 +38,17 @@
   "dependencies": {
     "@talend/module-to-cdn": "^9.10.0",
     "read-pkg-up": "^7.0.1",
+    "semver": "^7.5.4",
     "webpack-sources": "^3.2.3"
   },
   "peerDependencies": {
     "webpack": "^5.89.0"
   },
   "devDependencies": {
+    "@babel/eslint-parser": "^7.23.3",
     "all-contributors-cli": "^6.26.1",
     "codecov": "^3.8.3",
+    "eslint": "^8.53.0",
     "html-webpack-plugin": "^5.5.3",
     "jest": "^29.7.0",
     "mz": "^2.7.0",

fork/dynamic-cdn-webpack-plugin/src/find.js

@@ -9,6 +9,7 @@ function findPackage(info) {
 	if (name.startsWith('@')) {
 		[scope, name] = info.name.split('/');
 	}
+	// eslint-disable-next-line no-use-before-define
 	return findPackages(scope, name).find(cwd => {
 		const {
 			packageJson: { version },
@@ -34,13 +35,13 @@ function findPackagesFromScopeFolder(scope, name, scopeFolderPath) {
 				// just add the path to the found list
 				return accu.concat(subFolderPath);
 			}
+
 			// the scope or package name is not the one we look for
 			// if there is a nested node modules folder, we dive into it for the search
 			const nestedNodeModulesPath = path.join(subFolderPath, 'node_modules');
 			if (fs.existsSync(nestedNodeModulesPath)) {
-				return accu.concat(
-					findPackagesFromNonScopeFolder(scope, name, nestedNodeModulesPath, []),
-				);
+				// eslint-disable-next-line no-use-before-define
+				return accu.concat(findPackagesFromNonScopeFolder(scope, name, nestedNodeModulesPath, []));
 			}
 			return accu;
 		}, []);
@@ -54,29 +55,21 @@ function findPackagesFromNonScopeFolder(scope, name, nonScopeFolderPath) {
 			if (subFolder.name === '.bin') {
 				return accu;
 			}
-			if (subFolder.name.startsWith('@')) {
+			// MAKE IT COMPATIBLE WITH PNPM (especially for test) WHEN deps is @talend/scripts-...
+			let regex = /@talend\/(scripts|babel|eslint)-.*\/node_modules$/;
+			if (subFolder.name.startsWith('@') && !regex.test(subFolder?.path)) {
 				// for scope folders, we need a special treatment to avoid getting scoped packages when we don't want a scoped one.
 				// ex: search for `classnames`, we don't want to find `@types/classnames` in the result
 				return accu.concat(
-					findPackagesFromScopeFolder(
-						scope,
-						name,
-						path.join(nonScopeFolderPath, subFolder.name),
-					),
+					findPackagesFromScopeFolder(scope, name, path.join(nonScopeFolderPath, subFolder.name)),
 				);
 			} else if (!scope && subFolder.name === name) {
 				// we want a NON scoped package, we are in a non scoped folder, and the names match
 				return accu.concat(path.join(nonScopeFolderPath, subFolder.name));
 			}
-			const nestedNodeModulesPath = path.join(
-				nonScopeFolderPath,
-				subFolder.name,
-				'node_modules',
-			);
+			const nestedNodeModulesPath = path.join(nonScopeFolderPath, subFolder.name, 'node_modules');
 			if (fs.existsSync(nestedNodeModulesPath)) {
-				return accu.concat(
-					findPackagesFromNonScopeFolder(scope, name, nestedNodeModulesPath),
-				);
+				return accu.concat(findPackagesFromNonScopeFolder(scope, name, nestedNodeModulesPath));
 			}
 			return accu;
 		}, []);
@@ -88,7 +81,14 @@ function findPackages(scope, name, buff = []) {
 	if (roots === null) {
 		return buff;
 	}
-	return buff.concat(...roots.map(root => findPackagesFromNonScopeFolder(scope, name, root)));
+	const result = buff.concat(
+		...roots.map(root => findPackagesFromNonScopeFolder(scope, name, root)),
+	);
+	// Return a new Set to remove duplicate values: case possible with PNPM in GHA, due to pnpm/action-setup
+	// With the action, a folder setup-pnpm is created to manage the store and the script see it and try to scan it, and this generate duplicate entry
+	// Before we returned directly result of buff.concat...
+	// TODO: Manage pnpm installation manually (not reproduce the issue in this case but need to find solution to install global dep like surge)
+	return [...new Set(result)];
 }
 
 module.exports = {

fork/dynamic-cdn-webpack-plugin/src/find.test.js

@@ -17,12 +17,9 @@ describe('findPackages', () => {
 		'/node_modules/react/index.js': 'console.log("react");',
 		'/node_modules/react/package.json': '{"name": "react", "version": "16.14.0"}',
 		'/node_modules/@types/classnames/index.js': 'console.log("@types/classnames");',
-		'/node_modules/@talend/react-components/index.js':
-			'console.log("@talend/react-components");',
-		'/node_modules/@talend/react-components/node_modules/react/index.js':
-			'console.log("react");',
-		'/node_modules/@talend/react-containers/index.js':
-			'console.log("@talend/react-containers");',
+		'/node_modules/@talend/react-components/index.js': 'console.log("@talend/react-components");',
+		'/node_modules/@talend/react-components/node_modules/react/index.js': 'console.log("react");',
+		'/node_modules/@talend/react-containers/index.js': 'console.log("@talend/react-containers");',
 	};
 
 	beforeEach(() => {

fork/dynamic-cdn-webpack-plugin/test/core.test.js

@@ -55,9 +55,7 @@ describe('core', () => {
 		expect(output).toContain('module.exports = React');
 		const manifest = JSON.parse(
 			fs
-				.readFileSync(
-					path.resolve(__dirname, './fixtures/output/basic/app.js.dependencies.json'),
-				)
+				.readFileSync(path.resolve(__dirname, './fixtures/output/basic/app.js.dependencies.json'))
 				.toString(),
 		);
 		expect(manifest.react.peerDependency).toBe('^15.6.1');

fork/react-bootstrap/server/ModalSpec.js

@@ -1,19 +1,20 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { assert } from 'chai';
-import React from 'react';
+
 import ReactDOMServer from 'react-dom/server';
 
-import Modal from '../../src/Modal';
+import Modal from '../src/Modal';
 
 describe('Modal', () => {
   it('Should be rendered on the server side', () => {
-    let noOp = () => {};
+    const noOp = () => {};
 
     assert.doesNotThrow(() =>
       ReactDOMServer.renderToString(
         <Modal onHide={noOp}>
           <strong>Message</strong>
-        </Modal>
-      )
+        </Modal>,
+      ),
     );
   });
 });

packages/components/package.json

@@ -105,7 +105,6 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "~6.3.0",
     "react-i18next": "^13.4.1",
-    "react-storybook-addon-props-combinations": "^1.1.0",
     "react-test-renderer": "^18.2.0"
   },
   "peerDependencies": {

packages/components/src/Actions/ActionButton/Button.stories.js

@@ -1,6 +1,6 @@
 import { Component, Fragment } from 'react';
+
 import { action } from '@storybook/addon-actions';
-import withPropsCombinations from 'react-storybook-addon-props-combinations';
 
 import ActionButton from './ActionButton.component';
 
@@ -158,25 +158,3 @@ export const Default = () => (
 		</div>
 	</div>
 );
-
-export const Combinations = withPropsCombinations(ActionButton, {
-	label: ['Click me'],
-	bsStyle: [
-		'default',
-		'primary',
-		'success',
-		'info',
-		'warning',
-		'danger',
-		'link',
-		'info btn-inverse',
-	],
-	icon: ['talend-dataprep'],
-	'data-feature': ['my.feature'],
-	onClick: [action('You clicked me')],
-	hideLabel: [false, true],
-	inProgress: [true, false],
-	disabled: [false, true],
-	tooltip: [true],
-	tooltipLabel: ['Tooltip custom label'],
-});

packages/design-system/package.json

@@ -93,6 +93,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
+    "react-hook-form": "^7.48.2",
     "react-i18next": "^13.4.1",
     "react-is": "^17.0.2",
     "react-router-dom": "~6.3.0",

packages/playground/.talend/head.html

@@ -0,0 +1,8 @@
+<script type="text/javascript">
+	window.Talend = {
+		// this set the URL to use by assets-api
+		CDN_URL: 'https://statics.cloud.talend.com',
+	};
+	// just follow https://unpkg.com/@talend/[email protected]/dist/TalendDesignSystem.js.dependencies.json
+	// and you will have all the dependencies to put also the DS
+</script>

packages/playground/src/app/index.js

@@ -1,24 +1,26 @@
 /* eslint-disable no-console */
+
 /**
  * Import theme.
  * Being the first import is important, so that it is the default style
  * and other style can override it
  */
-import '@talend/bootstrap-theme';
-import getRouter from '@talend/react-cmf-router';
+// eslint-disable-next-line @talend/import-depth
+import { initI18n } from './i18n';
+
+import '@talend/bootstrap-theme/dist/bootstrap.css';
 import cmf from '@talend/react-cmf';
+import getRouter from '@talend/react-cmf-router';
 import { AppLoader, IconsProvider as BaseIconsProvider } from '@talend/react-components';
 import containersModule from '@talend/react-containers';
 import ComponentForm from '@talend/react-containers/lib/ComponentForm';
-import { initI18n } from './i18n';
+
+import actions from './actions';
 import ComponentFormSandbox from './components/ComponentFormSandbox';
+import { Dataviz } from './components/Dataviz';
 import { FacetedSearchPlayground } from './components/FacetedSearch';
 import { Icons } from './components/Icons';
-
 import { LeaguesList } from './components/List';
-import { Dataviz } from './components/Dataviz';
-
-import actions from './actions';
 
 // thanks ui-scripts
 let basename = window.basename;

packages/playground/talend-scripts.json

@@ -7,5 +7,6 @@
       "development": "./webpack.config.dev.js",
       "production": "./webpack.config.dev.js"
     }
-  }
+  },
+  "dynamic-cdn-webpack-plugin": false
 }

tools/scripts-cmf/package.json

@@ -22,6 +22,7 @@
   "devDependencies": {
     "@babel/eslint-parser": "^7.23.3",
     "@talend/eslint-config": "^13.0.0",
+    "@talend/eslint-plugin": "^1.1.0",
     "eslint": "^8.53.0"
   },
   "repository": {

tools/scripts-config-eslint/.eslintrc.json

@@ -88,9 +88,7 @@
     "testing-library/custom-renders": "off",
     "testing-library/custom-queries": "off",
     "testing-library/no-node-access": "off",
-    "testing-library/render-result-naming-convention": "off",
-
-    "@typescript-eslint/no-explicit-any": 1
+    "testing-library/render-result-naming-convention": "off"
   },
   "overrides": [
     {

tools/scripts-config-eslint/index.js

@@ -37,7 +37,8 @@ if (isTS) {
 		rules: {
 			...config.rules,
 			'@typescript-eslint/indent': 0,
-			'@typescript-eslint/no-var-requires': 0, // we have a lot of CJS files to lint
+			'@typescript-eslint/no-var-requires': 0, // we have a lot of CJS files to lint,
+			'@typescript-eslint/no-explicit-any': 1,
 		},
 		overrides: [
 			...(config.overrides || []),

tools/scripts-config-prettier/package.json

@@ -25,6 +25,7 @@
   "devDependencies": {
     "@babel/eslint-parser": "^7.23.3",
     "@talend/eslint-config": "^13.0.0",
+    "@talend/eslint-plugin": "^1.1.0",
     "eslint": "^8.53.0"
   }
 }

tools/scripts-config-react-webpack/config/webpack.config.js

@@ -197,6 +197,11 @@ async function getIndexTemplate(env, mode, indexTemplatePath, useInitiator = tru
 			window.Talend = { build: <%= JSON.stringify(htmlWebpackPlugin.files.jsMetadata || [])%>, cssBuild:  <%= JSON.stringify(htmlWebpackPlugin.files.cssMetadata || [])%> };
 			${await inject.getMinified()}
 		</script>`;
+	} else {
+		headScript = `${renderMeta()}<base href="${BASENAME}" />
+		<script type="text/javascript">
+			window.basename = '${BASENAME}';
+		</script>`;
 	}
 	const header = `${customHead}
 		<link rel="icon" type="image/svg+xml" href="<%= htmlWebpackPlugin.options.favicon || htmlWebpackPlugin.options.b64favicon %>">