chore(ARCH-662): upgrade storybook to 7 (#4538)

* upgrade storybook to 7
* think to revert #4573
* Apply [migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md)
* Create a common storybook for chromatic support

details:
* remove manager-webpack5 as now the manager is build using vite
* add framework in config (react-webpack5)
* create storybook-one package to have one storybook for chromatic
* keep storybook package to design-system doc (change the name ?)
* override storybook webpack config to support mono repository
* fix form stories
* sb doc (design.talend.com)

.changeset/fuzzy-spies-grab.md

@@ -0,0 +1,8 @@
+---
+'@talend/scripts-config-react-webpack': major
+---
+
+feat: upgrade dependencies to latest
+
+* babel-loader from 8 to 9
+* fork-ts-checker-webpack-plugin from 7 to 8

.changeset/khaki-years-do.md

@@ -0,0 +1,6 @@
+---
+'@talend/scripts-config-storybook-lib': major
+---
+
+feat: upgrade configuration to run storybook 7.
+So once you have upgrade you can remove the resolution.

.changeset/lazy-hornets-juggle.md

@@ -0,0 +1,5 @@
+---
+'@talend/scripts-core': major
+---
+
+feat: upgrade storybook to 7.x major release

.changeset/perfect-windows-wave.md

@@ -0,0 +1,5 @@
+---
+'@talend/react-forms': patch
+---
+
+chore: fix some lint errors

.changeset/selfish-hairs-tie.md

@@ -0,0 +1,5 @@
+---
+'@talend/design-system': patch
+---
+
+fix: some lint errors. Start to export types for some components.

.changeset/stupid-rings-wait.md

@@ -0,0 +1,5 @@
+---
+'@talend/storybook-docs': minor
+---
+
+feat: add most of the design-system docs components

.github/workflows/before-surge.sh

@@ -4,27 +4,16 @@ echo "Prepare demo folder before execute surge"
 rm -rf .static
 mkdir .static
 mkdir .static/cmf
-mkdir .static/components
 mkdir .static/containers
-mkdir .static/dataviz
 mkdir .static/design-system
 mkdir .static/faceted-search
-mkdir .static/forms
-mkdir .static/icons
 mkdir .static/theme
-mkdir .static/storybook-docs
+mkdir .static/storybook-one
 cp .surge/index.html .static
 cp -R packages/cmf/jsdoc .static/cmf
-cp -R packages/components/storybook-static/* .static/components
 cp -R packages/containers/storybook-static/* .static/containers
-cp -R packages/dataviz/storybook-static/* .static/dataviz
-cp -R packages/storybook/storybook-static/* .static/design-system
-cp -R packages/faceted-search/storybook-static/* .static/faceted-search
-cp -R packages/forms/storybook-static/* .static/forms
-cp -R packages/icons/storybook-static/* .static/icons
-cp -R packages/icons/dist .static/icons
+cp -R packages/storybook-one/storybook-static/* .static/storybook-one
+cp -R packages/design-docs/storybook-static/* .static/design-system
 cp -R packages/theme/dist/* .static/theme
-cp -R packages/theme/dist .static/theme
-cp -R packages/storybook-docs/storybook-static/* .static/storybook-docs
 echo Size of demo:
 du -d 1 -h .static

.github/workflows/pr-demo.yml

@@ -66,12 +66,11 @@ jobs:
         if: github.ref == 'refs/heads/master'
         uses: netlify/actions/cli@master
         with:
-          args: deploy --prod --dir=packages/storybook/storybook-static
+          args: deploy --dir=packages/design-docs/storybook-static --prod
         env:
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
 
-
       - name: deploy if PR
         if: github.ref != 'refs/heads/master'
         run: |

.github/workflows/visual-testing.yml

@@ -47,7 +47,7 @@ jobs:
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
-          workingDir: packages/storybook
+          workingDir: packages/storybook-one
           exitZeroOnChanges: true # Option to prevent the workflow from failing in PR
           # Handle monorepos https://www.chromatic.com/docs/monorepos
           forceRebuild: true
@@ -59,6 +59,6 @@ jobs:
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
-          workingDir: packages/storybook
+          workingDir: packages/storybook-one
           autoAcceptChanges: true # Option to accept any change for this baseline refresh
           forceRebuild: true

.surge/index.html

@@ -7,7 +7,7 @@
 		<meta name="description" content="" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 
-		<link rel="stylesheet" href="/theme/dist/bootstrap.css" />
+		<link rel="stylesheet" href="/theme/bootstrap.css" />
 		<style>
 			.layout {
 				position: relative;
@@ -161,194 +161,18 @@ <h2 class="card__heading">Boostrap theme</h2>
 						<p class="card__body">HTML and CSS only.</p>
 					</a>
 				</div>
-				<div class="card">
-					<a href="icons" class="card__link">
-						<h2 class="card__heading">Icons</h2>
-						<p class="card__body">SVG icon set.</p>
-					</a>
-					<a class="card__link--with-arrow" href="/@talend/icons/dist/TalendIcons.js.report.html"
-						>UMD
-						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 10">
-							<path
-								fill="currentColor"
-								d="M5.586.625l-.965.957 2.758 2.734H0v1.368h7.38L4.62 8.418l.966.957L10 4.999 5.586.625z"
-							/></svg
-					></a>
-					<a
-						class="card__link--with-arrow"
-						href="/@talend/icons/dist/TalendIcons.min.js.report.html"
-						>Minified UMD
-						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 10">
-							<path
-								fill="currentColor"
-								d="M5.586.625l-.965.957 2.758 2.734H0v1.368h7.38L4.62 8.418l.966.957L10 4.999 5.586.625z"
-							/></svg
-					></a>
-				</div>
-
 				<div class="card">
 					<a href="design-system" class="card__link">
 						<h2 class="card__heading">Coral</h2>
-						<p class="card__body">Talend's Design system documentation and React library</p>
-					</a>
-					<a
-						class="card__link--with-arrow"
-						href="/@talend/design-system/dist/TalendDesignSystem.js.report.html"
-						>UMD
-						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 10">
-							<path
-								fill="currentColor"
-								d="M5.586.625l-.965.957 2.758 2.734H0v1.368h7.38L4.62 8.418l.966.957L10 4.999 5.586.625z"
-							/></svg
-					></a>
-					<a
-						class="card__link--with-arrow"
-						href="/@talend/design-system/dist/TalendDesignSystem.min.js.report.html"
-						>Minified UMD
-						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 10">
-							<path
-								fill="currentColor"
-								d="M5.586.625l-.965.957 2.758 2.734H0v1.368h7.38L4.62 8.418l.966.957L10 4.999 5.586.625z"
-							/></svg
-					></a>
-				</div>
-
-				<div class="card">
-					<a href="components" class="card__link">
-						<h2 class="card__heading">Components</h2>
-						<p class="card__body">
-							A set of stateless components which follows the Talend Guidelines.
-						</p>
+						<p class="card__body">Talend design system</p>
 					</a>
-					<a
-						class="card__link--with-arrow"
-						href="/@talend/react-components/dist/TalendReactComponents.js.report.html"
-						>UMD
-						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 10">
-							<path
-								fill="currentColor"
-								d="M5.586.625l-.965.957 2.758 2.734H0v1.368h7.38L4.62 8.418l.966.957L10 4.999 5.586.625z"
-							/></svg
-					></a>
-					<a
-						class="card__link--with-arrow"
-						href="/@talend/react-components/dist/TalendReactComponents.min.js.report.html"
-						>Minified UMD
-						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 10">
-							<path
-								fill="currentColor"
-								d="M5.586.625l-.965.957 2.758 2.734H0v1.368h7.38L4.62 8.418l.966.957L10 4.999 5.586.625z"
-							/></svg
-					></a>
 				</div>
 
 				<div class="card">
-					<a href="forms" class="card__link">
-						<h2 class="card__heading">Forms</h2>
-						<p class="card__body">
-							This library is designed to be used on top of react-jsonschema-form, a React component
-							for building Web forms from JSONSchema.
-						</p>
+					<a href="storybook-one" class="card__link">
+						<h2 class="card__heading">Storybook</h2>
+						<p class="card__body">All the stories of all the packages</p>
 					</a>
-					<a
-						class="card__link--with-arrow"
-						href="/@talend/react-forms/dist/TalendReactForms.js.report.html"
-						>UMD
-						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 10">
-							<path
-								fill="currentColor"
-								d="M5.586.625l-.965.957 2.758 2.734H0v1.368h7.38L4.62 8.418l.966.957L10 4.999 5.586.625z"
-							/></svg
-					></a>
-					<a
-						class="card__link--with-arrow"
-						href="/@talend/react-forms/dist/TalendReactForms.min.js.report.html"
-						>Minified UMD
-						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 10">
-							<path
-								fill="currentColor"
-								d="M5.586.625l-.965.957 2.758 2.734H0v1.368h7.38L4.62 8.418l.966.957L10 4.999 5.586.625z"
-							/></svg
-					></a>
-				</div>
-
-				<div class="card">
-					<a href="faceted-search" class="card__link">
-						<h2 class="card__heading">Faceted search</h2>
-						<p class="card__body">This library support basic and advanced faceted search.</p>
-					</a>
-					<a
-						class="card__link--with-arrow"
-						href="/@talend/react-faceted-search/dist/TalendReactfaceted-search.js.report.html"
-						>UMD
-						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 10">
-							<path
-								fill="currentColor"
-								d="M5.586.625l-.965.957 2.758 2.734H0v1.368h7.38L4.62 8.418l.966.957L10 4.999 5.586.625z"
-							/></svg
-					></a>
-					<a
-						class="card__link--with-arrow"
-						href="/@talend/react-faceted-search/dist/TalendReactfaceted-search.min.js.report.html"
-						>Minified UMD
-						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 10">
-							<path
-								fill="currentColor"
-								d="M5.586.625l-.965.957 2.758 2.734H0v1.368h7.38L4.62 8.418l.966.957L10 4.999 5.586.625z"
-							/></svg
-					></a>
-				</div>
-
-				<div class="card">
-					<h2 class="card__heading">Stepper</h2>
-					<p class="card__body">This library provides the Stepper</p>
-					<a
-						class="card__link--with-arrow"
-						href="/@talend/react-stepper/dist/TalendReactStepper.js.report.html"
-						>UMD
-						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 10">
-							<path
-								fill="currentColor"
-								d="M5.586.625l-.965.957 2.758 2.734H0v1.368h7.38L4.62 8.418l.966.957L10 4.999 5.586.625z"
-							/></svg
-					></a>
-					<a
-						class="card__link--with-arrow"
-						href="/@talend/react-stepper/dist/TalendReactStepper.min.js.report.html"
-						>Minified UMD
-						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 10">
-							<path
-								fill="currentColor"
-								d="M5.586.625l-.965.957 2.758 2.734H0v1.368h7.38L4.62 8.418l.966.957L10 4.999 5.586.625z"
-							/></svg
-					></a>
-				</div>
-
-				<div class="card">
-					<a href="/dataviz" class="card__link">
-						<h2 class="card__heading">Dataviz</h2>
-						<p class="card__body">This library provides charts components</p>
-					</a>
-					<a
-						class="card__link--with-arrow"
-						href="/@talend/dataviz/dist/TalendReactDataviz.js.report.html"
-						>UMD
-						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 10">
-							<path
-								fill="currentColor"
-								d="M5.586.625l-.965.957 2.758 2.734H0v1.368h7.38L4.62 8.418l.966.957L10 4.999 5.586.625z"
-							/></svg
-					></a>
-					<a
-						class="card__link--with-arrow"
-						href="/@talend/dataviz/dist/TalendReactDataviz.min.js.report.html"
-						>Minified UMD
-						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 10">
-							<path
-								fill="currentColor"
-								d="M5.586.625l-.965.957 2.758 2.734H0v1.368h7.38L4.62 8.418l.966.957L10 4.999 5.586.625z"
-							/></svg
-					></a>
 				</div>
 
 				<div class="card">

package.json

@@ -13,7 +13,7 @@
     "postinstall": "talend-yarn-workspace run build:lib",
     "pre-release": "talend-yarn-workspace run pre-release",
     "start": "yarn workspace @talend/ui-playground run start",
-    "start-storybook": "yarn workspace @talend/ui-storybook run start",
+    "start-storybook": "yarn workspace @talend/ui-storybook-one run start",
     "release": "yarn pre-release && yarn changeset publish",
     "lint-staged": "lint-staged",
     "lint": "cross-env WORKSPACE_RUN_FAIL=no-bail talend-yarn-workspace run lint",
@@ -32,9 +32,6 @@
     "prepare": "husky install"
   },
   "resolutions": {
-    "**/webpack": "^5.73.0",
-    "**/terser-webpack-plugin": "^5.3.3",
-    "**/webpack-dev-middleware": "^5.3.3",
     "**/@types/react": "^17.0.2",
     "**/@types/react-dom": "^17.0.2",
     "**/i18next-scanner-typescript/typescript": "^5.0.4",

packages/components/package.json

@@ -13,7 +13,6 @@
     "test": "cross-env TZ=Europe/Paris talend-scripts test",
     "test:watch": "cross-env TZ=Europe/Paris talend-scripts test --watch",
     "test:cov": "cross-env TZ=Europe/Paris talend-scripts test --coverage",
-    "test:demo": "talend-scripts build-storybook --quiet",
     "lint": "talend-scripts lint",
     "start": "talend-scripts start -p 6006",
     "extract-i18n": "i18next-scanner --config i18next-scanner.config.js 'src/**/*.js' '!src/**/*.stories.js'"
@@ -69,7 +68,7 @@
     "styled-components": "^5.3.11"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^6.5.16",
+    "@storybook/addon-actions": "^7.4.1",
     "@talend/bootstrap-theme": "^8.1.3",
     "@talend/design-system": "^7.15.0",
     "@talend/icons": "^6.60.0",

packages/containers/package.json

@@ -49,7 +49,7 @@
     "reselect": "^2.5.4"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^6.5.16",
+    "@storybook/addon-actions": "^7.4.1",
     "@talend/bootstrap-theme": "^8.1.3",
     "@talend/icons": "^6.59.0",
     "@talend/locales-tui-containers": "^8.0.2",

packages/dataviz/package.json

@@ -18,8 +18,7 @@
     "test": "cross-env TZ=Europe/Paris talend-scripts test",
     "test:cy": "cypress run --component --spec **.cy.tsx",
     "test:watch": "cross-env TZ=Europe/Paris talend-scripts test --watch",
-    "test:cov": "cross-env TZ=Europe/Paris talend-scripts test --coverage",
-    "test:demo": "talend-scripts build-storybook --quiet"
+    "test:cov": "cross-env TZ=Europe/Paris talend-scripts test --coverage"
   },
   "keywords": [
     "react",

packages/design-docs/.babelrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "@talend/scripts-config-babel/.babelrc.json"
+}

packages/design-docs/.storybook/.babelrc

@@ -0,0 +1,3 @@
+{
+  "extends": "@talend/scripts-config-babel/.babelrc.json"
+}