diff --git a/.changeset/itchy-onions-refuse.md b/.changeset/itchy-onions-refuse.md new file mode 100644 index 00000000000..fa54d97ea8a --- /dev/null +++ b/.changeset/itchy-onions-refuse.md @@ -0,0 +1,5 @@ +--- +'@talend/react-containers': minor +--- + +fix(containers): Expose defaultRegistry through ComponentForm.kit diff --git a/.changeset/large-hotels-nail.md b/.changeset/large-hotels-nail.md new file mode 100644 index 00000000000..6fc72dddbde --- /dev/null +++ b/.changeset/large-hotels-nail.md @@ -0,0 +1,5 @@ +--- +"@talend/eslint-plugin": patch +--- + +Add `btn-inverse` to list of warning for eslint bootstrap classes diff --git a/.github/actions/sourceclear/Dockerfile b/.github/actions/sourceclear/Dockerfile deleted file mode 100644 index e22853a74cd..00000000000 --- a/.github/actions/sourceclear/Dockerfile +++ /dev/null @@ -1,5 +0,0 @@ -FROM node:16 -RUN apt-get update -RUN apt-get install -y --no-install-recommends curl jq -COPY entrypoint.sh /entrypoint.sh -ENTRYPOINT ["/entrypoint.sh"] diff --git a/.github/actions/sourceclear/action.yml b/.github/actions/sourceclear/action.yml deleted file mode 100644 index 7a27be95d90..00000000000 --- a/.github/actions/sourceclear/action.yml +++ /dev/null @@ -1,9 +0,0 @@ -name: 'SourceClear Scan' -description: 'Scan a project with the SourceClear agent' -author: 'SourceClear' -secrets: - SRCCLR_API_TOKEN: - description: 'The API token to use' -runs: - using: 'docker' - image: 'Dockerfile' diff --git a/.github/actions/sourceclear/entrypoint.sh b/.github/actions/sourceclear/entrypoint.sh deleted file mode 100755 index 9108988b3b8..00000000000 --- a/.github/actions/sourceclear/entrypoint.sh +++ /dev/null @@ -1,26 +0,0 @@ -#!/bin/sh -l -echo "Download srcclr ci script ..." -curl -sSL https://download.sourceclear.com/ci.sh --output srcclr.sh -echo "Script saved to srcclr.sh" -chmod a+x srcclr.sh -echo "Script execution rights added" - -packages=$(yarn --silent workspaces info | jq '.[].location' | sed 's/\"//g') - -# scan each folder -echo "Starting scan on . (root) ..." -./srcclr.sh scan . -echo "Scan completed on . (root)" - -for folder in $packages; -do - echo "Starting scan on ./$folder ..." - echo "> ln -s yarn.lock ./$folder/yarn.lock" - cp yarn.lock ./$folder/yarn.lock - ls -l ./$folder - echo "> ./srcclr.sh scan ./$folder" - ./srcclr.sh scan ./$folder - echo "Scan completed on ./$folder" -done - - diff --git a/.github/workflows/changeset.yml b/.github/workflows/changeset.yml index ebad6dc38e5..4d7e719ba77 100644 --- a/.github/workflows/changeset.yml +++ b/.github/workflows/changeset.yml @@ -23,7 +23,7 @@ jobs: runs-on: ubuntu-latest steps: - name: Checkout Repo - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 #v4.1.1 + uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 #v4.1.7 with: # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits fetch-depth: 0 @@ -37,7 +37,7 @@ jobs: - name: Create Release Pull Request or Publish to npm id: changesets - uses: changesets/action@f13b1baaa620fde937751f5d2c3572b9da32af23 #v1.4.5 + uses: changesets/action@aba318e9165b45b7948c60273e0b72fce0a64eb9 #v1.4.7 with: # This expects you to have a script called release which does a build for your packages and calls changeset publish publish: yarn release diff --git a/.github/workflows/dependencies.yml b/.github/workflows/dependencies.yml index 6df61ba5878..d6eb7f2f43f 100644 --- a/.github/workflows/dependencies.yml +++ b/.github/workflows/dependencies.yml @@ -19,7 +19,7 @@ jobs: steps: - name: Checkout - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 #v4.1.1 + uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 #v4.1.7 - name: Use Node.js uses: ./.github/actions/setup-node @@ -33,7 +33,7 @@ jobs: git add dependencies-latest.txt - name: Create Pull Request - uses: peter-evans/create-pull-request@153407881ec5c347639a548ade7d8ad1d6740e38 #v5.0.2 + uses: peter-evans/create-pull-request@c5a7806660adbe173f04e3e038b0ccdcd758773c #v6.1.0 with: reviewers: "@Talend/frontend-admins" commit-message: "chore: upgrade dependencies" diff --git a/.github/workflows/design-system-component-testing.yml b/.github/workflows/design-system-component-testing.yml index 58ddb436ea2..cfff6061f83 100644 --- a/.github/workflows/design-system-component-testing.yml +++ b/.github/workflows/design-system-component-testing.yml @@ -22,12 +22,12 @@ jobs: browser: ["chrome", "firefox"] steps: - name: Checkout repository - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 #v4.1.1 + uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 #v4.1.7 - name: Use Node.js uses: ./.github/actions/setup-node - - uses: actions/cache@13aacd865c20de90d75de3b17ebe84f7a17d57d2 #v4.0.0 + - uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 #v4.0.2 with: path: ~/.cache/Cypress key: my-cache-${{ runner.os }}-${{ hashFiles('yarn.lock') }} @@ -36,10 +36,12 @@ jobs: run: | yarn --frozen-lock --ignore-scripts yarn cypress install - yarn workspace @talend/assets-api run build:lib - yarn workspace @talend/utils run build:lib + yarn workspace @talend/assets-api run build:lib:esm + yarn workspace @talend/utils run build:lib:esm yarn workspace @talend/icons run build:lib + yarn workspace @talend/icons run build:lib:esm yarn workspace @talend/design-tokens run build:lib + yarn workspace @talend/design-tokens run build:lib:esm - name: Cypress Component Testing uses: cypress-io/github-action@1b70233146622b69e789ccdd4f9452adc638d25a #v6.6.1 @@ -49,14 +51,14 @@ jobs: command: yarn workspace @talend/design-system run test:cy - name: Cypress screenshots upload - uses: actions/upload-artifact@694cdabd8bdb0f10b2cea11669e1bf5453eed0a6 #v4.2.0 + uses: actions/upload-artifact@65462800fd760344b1a7b4382951275a0abb4808 #v4.3.3 if: failure() with: name: cypress-component-testing-${{ matrix.browser }}-screenshots path: packages/design-system/cypress/screenshots/**/* - name: Cypress videos upload - uses: actions/upload-artifact@694cdabd8bdb0f10b2cea11669e1bf5453eed0a6 #v4.2.0 + uses: actions/upload-artifact@65462800fd760344b1a7b4382951275a0abb4808 #v4.3.3 if: failure() with: name: cypress-component-testing-${{ matrix.browser }}-videos diff --git a/.github/workflows/icons.yml b/.github/workflows/icons.yml index 1215e3af51c..80861d7a527 100644 --- a/.github/workflows/icons.yml +++ b/.github/workflows/icons.yml @@ -19,7 +19,7 @@ jobs: working-directory: ./packages/icons steps: - name: Checkout sources - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 #v4.1.1 + uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 #v4.1.7 with: # Required when using a PAT for opening the PR persist-credentials: false @@ -52,7 +52,7 @@ jobs: - name: Create Pull Request id: cpr - uses: peter-evans/create-pull-request@153407881ec5c347639a548ade7d8ad1d6740e38 #v5.0.2 + uses: peter-evans/create-pull-request@c5a7806660adbe173f04e3e038b0ccdcd758773c #v6.1.0 with: commit-message: "chore(icons): from Figma" title: "chore(icons): from Figma" diff --git a/.github/workflows/pr-demo.yml b/.github/workflows/pr-demo.yml index d6791c165d0..1e0c266ae68 100644 --- a/.github/workflows/pr-demo.yml +++ b/.github/workflows/pr-demo.yml @@ -25,13 +25,13 @@ jobs: steps: - name: Checkout sources - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 #v4.1.1 + uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 #v4.1.7 - name: Use Node.js uses: ./.github/actions/setup-node - name: cache for storybook - uses: actions/cache@13aacd865c20de90d75de3b17ebe84f7a17d57d2 #v4.0.0 + uses: actions/cache@0c45773b623bea8c8e75f6c82b208c3cf94ea4f9 #v4.0.2 with: path: packages/*/node_modules key: ${{ runner.os }}-storybook-${{ hashFiles('**/yarn.lock') }} diff --git a/.github/workflows/pr-lint.yml b/.github/workflows/pr-lint.yml index ae053c4aa2e..bb2467b0fb0 100644 --- a/.github/workflows/pr-lint.yml +++ b/.github/workflows/pr-lint.yml @@ -22,7 +22,7 @@ jobs: steps: - name: Checkout sources - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 #v4.1.1 + uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 #v4.1.7 with: persist-credentials: false # otherwise, the token used is the GITHUB_TOKEN, instead of your personal token fetch-depth: 0 # otherwise, you will failed to push refs to dest repo diff --git a/.github/workflows/pr-playground.yml b/.github/workflows/pr-playground.yml index e1e777c1a89..bc84c921a64 100644 --- a/.github/workflows/pr-playground.yml +++ b/.github/workflows/pr-playground.yml @@ -24,7 +24,7 @@ jobs: steps: - name: Checkout sources - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 #v4.1.1 + uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 #v4.1.7 - name: Use Node.js uses: ./.github/actions/setup-node @@ -70,7 +70,7 @@ jobs: steps: - name: Checkout sources - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 #v4.1.1 + uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 #v4.1.7 - name: Use Node.js uses: ./.github/actions/setup-node @@ -80,7 +80,7 @@ jobs: node --version - name: Check UMD files size diff - uses: preactjs/compressed-size-action@8119d3d31b6e57b167e09c81dfa877eada3bcb35 #v2.5.0 + uses: preactjs/compressed-size-action@f780fd104362cfce9e118f9198df2ee37d12946c #v2.6.0 if: github.ref != 'refs/heads/master' with: repo-token: "${{ secrets.GITHUB_TOKEN }}" diff --git a/.github/workflows/pr-test.yml b/.github/workflows/pr-test.yml index e635183a6b9..a10a696044a 100644 --- a/.github/workflows/pr-test.yml +++ b/.github/workflows/pr-test.yml @@ -21,7 +21,7 @@ jobs: steps: - name: Checkout sources - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 #v4.1.1 + uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 #v4.1.7 - name: Use Node.js uses: ./.github/actions/setup-node @@ -33,7 +33,7 @@ jobs: run: yarn test --coverage --coverageReporters json-summary - name: Jest Coverage Comment - uses: MishaKav/jest-coverage-comment@f2e8b560403c4fd8234a2b268af3c28ca91e5cc7 #1.0.24 + uses: MishaKav/jest-coverage-comment@434e6d2d37116d23d812809b61d499639842fa3b #1.0.26 with: multiple-files: | assets-api, ./packages/assets-api/coverage/coverage-summary.json diff --git a/.github/workflows/security-scan.yml b/.github/workflows/security-scan.yml deleted file mode 100644 index 442d2c03767..00000000000 --- a/.github/workflows/security-scan.yml +++ /dev/null @@ -1,21 +0,0 @@ -name: Security scan - -on: - workflow_dispatch: - schedule: - - cron: '0 0 * * 0' # https://crontab.guru/every-week "At 00:00 on Sunday." - -permissions: - contents: read - -jobs: - build: - environment: main - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 #v4.1.1 - - name: Scan - uses: ./.github/actions/sourceclear - env: - SRCCLR_API_TOKEN: ${{ secrets.SRCCLR_API_TOKEN }} - SRCCLR_SCOPE: 'production' diff --git a/.github/workflows/semgrep.yml b/.github/workflows/semgrep.yml deleted file mode 100644 index eb1a26be9a3..00000000000 --- a/.github/workflows/semgrep.yml +++ /dev/null @@ -1,34 +0,0 @@ -# Name of this GitHub Actions workflow. -name: Semgrep - -on: - workflow_dispatch: - pull_request: - push: - branches: - - master - paths: - - .github/workflows/semgrep.yml - schedule: - - cron: '0 0 * * 0' - -jobs: - semgrep: - environment: pull_request_unsafe - name: Scan - runs-on: ubuntu-latest - - container: - # A Docker image with Semgrep installed. Do not change this. - image: returntocorp/semgrep - - # Skip any PR created by dependabot to avoid permission issues: - if: (github.actor != 'dependabot[bot]') - - steps: - - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 #v4.1.1 - # Run the "semgrep ci" command on the command line of the docker image. - - run: semgrep ci - env: - SEMGREP_APP_TOKEN: ${{ secrets.SEMGREP_APP_TOKEN }} - diff --git a/.github/workflows/tests-cron.yml b/.github/workflows/tests-cron.yml index 85732cf3c8c..fed7c509d9a 100644 --- a/.github/workflows/tests-cron.yml +++ b/.github/workflows/tests-cron.yml @@ -17,7 +17,7 @@ jobs: steps: - name: Checkout - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 #v4.1.1 + uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 #v4.1.7 - name: Use Node.js uses: ./.github/actions/setup-node diff --git a/.github/workflows/visual-testing.yml b/.github/workflows/visual-testing.yml index be3321d813b..74cefbfe47d 100644 --- a/.github/workflows/visual-testing.yml +++ b/.github/workflows/visual-testing.yml @@ -28,7 +28,7 @@ jobs: environment: pull_request_unsafe if: ( github.ref == 'refs/heads/master' || contains(github.event.pull_request.labels.*.name, 'need visual approval') ) steps: - - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 #v4.1.1 + - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 #v4.1.7 with: fetch-depth: 0 diff --git a/.github/workflows/yarn-deduplicate.yml b/.github/workflows/yarn-deduplicate.yml index 0683f3e806b..ae96c07e52e 100644 --- a/.github/workflows/yarn-deduplicate.yml +++ b/.github/workflows/yarn-deduplicate.yml @@ -23,7 +23,7 @@ jobs: steps: - name: Checkout sources - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 #v4.1.1 + uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 #v4.1.7 with: persist-credentials: false # otherwise, the token used is the GITHUB_TOKEN, instead of your personal token fetch-depth: 0 # otherwise, you will failed to push refs to dest repo @@ -40,7 +40,7 @@ jobs: - name: Commit dedupe if: steps.deduplicate.outputs.diff - uses: actions-js/push@156f2b10c3aa000c44dbe75ea7018f32ae999772 #1.4 + uses: actions-js/push@5a7cbd780d82c0c937b5977586e641b2fd94acc5 #1.5 with: github_token: ${{ secrets.GITHUB_TOKEN }} message: "chore: yarn-deduplicate" diff --git a/.gitignore b/.gitignore index abc39076d1d..ed9f9e57949 100644 --- a/.gitignore +++ b/.gitignore @@ -44,6 +44,7 @@ build/ /packages/*/i18n/ tmp/ lib/ +lib-esm/ storybook-static/ dist/ eslint-report.json diff --git a/.prettierignore b/.prettierignore index da1cc32ff32..34f6040084a 100644 --- a/.prettierignore +++ b/.prettierignore @@ -7,3 +7,4 @@ build dist node_modules __fixtures__ +tools/scripts-config-storybook-lib/.storybook-templates/main.js diff --git a/dependencies-latest.txt b/dependencies-latest.txt index 2da3e52c946..c1d96d52498 100644 --- a/dependencies-latest.txt +++ b/dependencies-latest.txt @@ -1,254 +1,353 @@ -yarn run v1.22.21 +yarn run v1.22.22 $ /home/runner/work/ui/ui/node_modules/.bin/talend-upgrade-deps --latest --dry check versions of /home/runner/work/ui/ui/package.json using latest -"lint-staged": "^13.3.0" => "^15.1.0" -"rimraf": "^3.0.2" => "^5.0.5" +"@types/react": "^18.2.7" => "^18.3.3" +"@types/react-dom": "^18.2.7" => "^18.3.0" +"cypress": "^13.6.0" => "^13.11.0" +"eslint": "^8.57.0" => "^9.4.0" +"husky": "^8.0.3" => "^9.0.11" check versions of packages/a11y/package.json using latest -"@types/date-fns": "^0.0.2" => "^2.6.0" -"date-fns": "^1.30.1" => "^2.30.0" +"@testing-library/react": "^14.3.1" => "^16.0.0" check versions of packages/assets-api/package.json using latest -"@types/node": "^6.14.13" => "^20.10.1" +"@types/node": "^6.14.13" => "^20.14.2" "read-pkg-up": "^7.0.1" => "^11.0.0" check versions of packages/cmf-cqrs/package.json using latest -"immutable": "^3.8.2" => "^5.0.0-beta.4" +"immutable": "^3.8.2" => "^4.3.6" +"@testing-library/react": "^14.3.1" => "^16.0.0" check versions of packages/cmf-router/package.json using latest -"react-redux": "^7.2.9" => "^8.1.3" -"react-router": "~6.3.0" => "^6.20.0" -"react-router-dom": "~6.3.0" => "^6.20.0" +"react-redux": "^7.2.9" => "^9.1.2" +"react-router": "~6.3.0" => "^6.23.1" +"react-router-dom": "~6.3.0" => "^6.23.1" check versions of packages/cmf/package.json using latest -"immutable": "^3.8.2" => "^5.0.0-beta.4" +"commander": "^6.2.1" => "^12.1.0" +"immutable": "^3.8.2" => "^4.3.6" "nested-combine-reducers": "^1.2.2" => "^2.0.0" -"path-to-regexp": "^2.4.0" => "^6.2.1" -"react-redux": "^7.2.9" => "^8.1.3" -"jsdoc": "^3.6.11" => "^4.0.2" +"path-to-regexp": "^2.4.0" => "^6.2.2" +"react-redux": "^7.2.9" => "^9.1.2" +"redux": "^4.2.1" => "^5.0.1" +"redux-thunk": "^2.4.2" => "^3.1.0" +"@testing-library/react": "^14.3.1" => "^16.0.0" "node-fetch": "^2.7.0" => "^3.3.2" check versions of packages/components/package.json using latest -"date-fns": "^1.30.1" => "^2.30.0" "dom-helpers": "^3.4.0" => "^5.2.1" -"immutable": "^3.8.2" => "^5.0.0-beta.4" +"immutable": "^3.8.2" => "^4.3.6" "react-autowhatever": "10.2.0" => "^10.2.1" -"react-is": "^17.0.2" => "^18.2.0" +"react-is": "^17.0.2" => "^18.3.1" "react-transition-group": "^2.9.0" => "^4.4.5" -"simplebar": "^5.3.9" => "^6.2.5" -"simplebar-react": "^2.4.3" => "^3.2.4" -"styled-components": "^5.3.11" => "^6.1.1" +"simplebar-react": "^2.4.3" => "^3.2.5" +"styled-components": "^5.3.11" => "^6.1.11" "warning": "^3.0.0" => "^4.0.3" -"@types/date-fns": "^0.0.2" => "^2.6.0" -"jsdom": "^20.0.3" => "^23.0.1" +"@storybook/addon-actions": "^7.6.19" => "^8.1.6" +"@testing-library/react": "^14.3.1" => "^16.0.0" +"jsdom": "^20.0.3" => "^24.1.0" "react-a11y": "^0.3.4" => "^1.1.0" -"react-router-dom": "~6.3.0" => "^6.20.0" +"react-i18next": "^13.5.0" => "^14.1.2" +"react-router-dom": "~6.3.0" => "^6.23.1" check versions of packages/containers/package.json using latest -"immutable": "^3.8.2" => "^5.0.0-beta.4" -"reselect": "^2.5.4" => "^4.1.8" -"msw": "^1.3.2" => "^2.0.9" +"immutable": "^3.8.2" => "^4.3.6" +"reselect": "^2.5.4" => "^5.1.1" +"@storybook/addon-actions": "^7.6.19" => "^8.1.6" +"@testing-library/react": "^14.3.1" => "^16.0.0" +"msw": "^1.3.3" => "^2.3.1" +"react-i18next": "^13.5.0" => "^14.1.2" check versions of packages/dataviz/package.json using latest -"@cypress/react": "^7.0.3" => "^8.0.0" -"@types/node": "^6.14.13" => "^20.10.1" +"@cypress/react": "^7.0.3" => "^8.0.2" +"@testing-library/react": "^14.3.1" => "^16.0.0" +"@types/node": "^6.14.13" => "^20.14.2" +"react-i18next": "^13.5.0" => "^14.1.2" check versions of packages/design-docs/package.json using latest +"@storybook/blocks": "^7.6.19" => "^8.1.6" +"@storybook/react": "^7.6.19" => "^8.1.6" +"figma-js": "^1.16.0" => "^1.16.1-0" "pkg-dir": "^7.0.0" => "^8.0.0" -"react-router-dom": "~6.3.0" => "^6.20.0" +"@storybook/addon-a11y": "^7.6.19" => "^8.1.6" +"@storybook/addon-actions": "^7.6.19" => "^8.1.6" +"@storybook/addon-essentials": "^7.6.19" => "^8.1.6" +"@storybook/addon-interactions": "^7.6.19" => "^8.1.6" +"@storybook/addon-links": "^7.6.19" => "^8.1.6" +"@storybook/addons": "^7.6.19" => "^7.6.17" +"@storybook/core-events": "^7.6.19" => "^8.1.6" +"@storybook/theming": "^7.6.19" => "^8.1.6" +"react-router-dom": "~6.3.0" => "^6.23.1" check versions of packages/design-system/package.json using latest -"@floating-ui/react": "^0.24.8" => "^0.26.3" +"@floating-ui/react": "^0.24.8" => "^0.26.16" "react-transition-group": "^2.9.0" => "^4.4.5" -"@cypress/react": "^7.0.3" => "^8.0.0" +"@cypress/react": "^7.0.3" => "^8.0.2" +"@storybook/addon-a11y": "^7.6.19" => "^8.1.6" +"@storybook/addon-actions": "^7.6.19" => "^8.1.6" +"@storybook/addon-essentials": "^7.6.19" => "^8.1.6" +"@storybook/addon-interactions": "^7.6.19" => "^8.1.6" +"@storybook/addon-links": "^7.6.19" => "^8.1.6" +"@storybook/addons": "^7.6.19" => "^7.6.17" +"@storybook/blocks": "^7.6.19" => "^8.1.6" +"@storybook/core-events": "^7.6.19" => "^8.1.6" +"@storybook/react": "^7.6.19" => "^8.1.6" +"@storybook/theming": "^7.6.19" => "^8.1.6" "@svgr/webpack": "^5.5.0" => "^8.1.0" -"@types/react-transition-group": "^2.9.2" => "^4.4.9" -"concurrently": "^7.6.0" => "^8.2.2" -"react-is": "^17.0.2" => "^18.2.0" -"react-router-dom": "~6.3.0" => "^6.20.0" +"@types/react-transition-group": "^2.9.2" => "^4.4.10" +"browser-sync": "^2.29.3" => "^3.0.2" +"jest-axe": "^8.0.0" => "^9.0.0" +"react-i18next": "^13.5.0" => "^14.1.2" +"react-is": "^17.0.2" => "^18.3.1" +"react-router-dom": "~6.3.0" => "^6.23.1" check versions of packages/design-tokens/package.json using latest check versions of packages/faceted-search/package.json using latest -"date-fns": "^1.30.1" => "^2.30.0" +"@storybook/addon-actions": "^7.6.19" => "^8.1.6" +"@testing-library/react": "^14.3.1" => "^16.0.0" +"react-i18next": "^13.5.0" => "^14.1.2" check versions of packages/flow-designer/package.json using latest -"@types/node": "^6.14.13" => "^20.10.1" -"immutable": "^3.8.2" => "^5.0.0-beta.4" -"react-redux": "^7.2.9" => "^8.1.3" +"@testing-library/react": "^14.3.1" => "^16.0.0" +"@types/node": "^6.14.13" => "^20.14.2" +"immutable": "^3.8.2" => "^4.3.6" +"react-i18next": "^13.5.0" => "^14.1.2" +"react-redux": "^7.2.9" => "^9.1.2" +"redux": "^4.2.1" => "^5.0.1" +"redux-thunk": "^2.4.2" => "^3.1.0" +"reselect": "^4.1.8" => "^5.1.1" check versions of packages/forms/package.json using latest -"ace-builds": "1.10.1" => "^1.32.0" -"ajv": "^6.12.6" => "^8.12.0" +"ace-builds": "1.10.1" => "^1.35.0" +"ajv": "^6.12.6" => "^8.16.0" "react-autowhatever": "10.2.0" => "^10.2.1" +"react-ace": "10.1.0" => "^11.0.1" "react-jsonschema-form": "0.51.0" => "^1.8.1" +"@storybook/addon-actions": "^7.6.19" => "^8.1.6" +"@storybook/addon-controls": "^7.6.19" => "^8.1.6" +"@testing-library/react": "^14.3.1" => "^16.0.0" +"react-i18next": "^13.5.0" => "^14.1.2" check versions of packages/http/package.json using latest "node-fetch": "^2.7.0" => "^3.3.2" check versions of packages/icons/package.json using latest "@svgr/webpack": "^5.5.0" => "^8.1.0" -"copy-webpack-plugin": "^10.2.4" => "^11.0.0" -"css-loader": "^4.3.0" => "^6.8.1" +"copy-webpack-plugin": "^11.0.0" => "^12.0.2" +"css-loader": "^4.3.0" => "^7.1.2" "mkdirp": "^1.0.4" => "^3.0.1" "string-replace-loader": "^2.3.0" => "^3.1.0" -"style-loader": "^1.3.0" => "^3.3.3" -"svgo": "^1.3.2" => "^3.0.5" +"style-loader": "^1.3.0" => "^4.0.0" +"svgo": "^1.3.2" => "^3.3.2" "webpack-cli": "^4.10.0" => "^5.1.4" -check versions of packages/jsfc/package.json using latest -"objectpath": "^1.2.2" => "^2.0.0" -"@types/chai": "^3.5.2" => "^4.3.11" -"@types/node": "^6.14.13" => "^20.10.1" -"rimraf": "^3.0.2" => "^5.0.5" - check versions of packages/local-libs-webpack-plugin/package.json using latest +check versions of packages/playground-vite/package.json using latest +"react-i18next": "^13.5.0" => "^14.1.2" +"body-parser": "1.20.1" => "^1.20.2" +"copy-webpack-plugin": "^11.0.0" => "^12.0.2" +"i18next-http-backend": "^1.4.5" => "^2.5.2" + check versions of packages/playground/package.json using latest +"react-i18next": "^13.5.0" => "^14.1.2" "body-parser": "1.20.1" => "^1.20.2" -"copy-webpack-plugin": "^10.2.4" => "^11.0.0" -"i18next-http-backend": "^1.4.5" => "^2.4.2" +"copy-webpack-plugin": "^11.0.0" => "^12.0.2" +"i18next-http-backend": "^1.4.5" => "^2.5.2" check versions of packages/router-bridge/package.json using latest -"react-router-dom": "~6.3.0" => "^6.20.0" +"react-router-dom": "~6.3.0" => "^6.23.1" check versions of packages/sagas/package.json using latest -"immutable": "^3.8.2" => "^5.0.0-beta.4" +"immutable": "^3.8.2" => "^4.3.6" check versions of packages/stepper/package.json using latest "@trivago/prettier-plugin-sort-imports": "^3.4.0" => "^4.3.0" -"immutable": "^3.8.2" => "^5.0.0-beta.4" -"jsdom": "^20.0.3" => "^23.0.1" -"react-redux": "^7.2.9" => "^8.1.3" +"immutable": "^3.8.2" => "^4.3.6" +"jsdom": "^20.0.3" => "^24.1.0" +"react-i18next": "^13.5.0" => "^14.1.2" +"react-redux": "^7.2.9" => "^9.1.2" "react-transition-group": "^2.9.0" => "^4.4.5" check versions of packages/storybook-cmf/package.json using latest -"react-redux": "^7.2.9" => "^8.1.3" +"@testing-library/react": "^14.3.1" => "^16.0.0" +"react-redux": "^7.2.9" => "^9.1.2" check versions of packages/storybook-docs/package.json using latest -"@types/node": "^6.14.13" => "^20.10.1" -"css-loader": "^4.3.0" => "^6.8.1" +"@storybook/blocks": "^7.6.19" => "^8.1.6" +"@storybook/react": "^7.6.19" => "^8.1.6" +"figma-js": "^1.16.0" => "^1.16.1-0" +"@types/node": "^6.14.13" => "^20.14.2" +"css-loader": "^4.3.0" => "^7.1.2" +"postcss-loader": "^7.3.4" => "^8.1.1" "webpack-cli": "^4.10.0" => "^5.1.4" check versions of packages/storybook-one/package.json using latest "pkg-dir": "^7.0.0" => "^8.0.0" -"react-router-dom": "~6.3.0" => "^6.20.0" +"@storybook/addon-a11y": "^7.6.19" => "^8.1.6" +"@storybook/addon-actions": "^7.6.19" => "^8.1.6" +"@storybook/addon-essentials": "^7.6.19" => "^8.1.6" +"@storybook/addon-interactions": "^7.6.19" => "^8.1.6" +"@storybook/addon-links": "^7.6.19" => "^8.1.6" +"@storybook/addons": "^7.6.19" => "^7.6.17" +"@storybook/core-events": "^7.6.19" => "^8.1.6" +"@storybook/theming": "^7.6.19" => "^8.1.6" +"react-router-dom": "~6.3.0" => "^6.23.1" check versions of packages/theme/package.json using latest -"copy-webpack-plugin": "^10.2.4" => "^11.0.0" -"css-minimizer-webpack-plugin": "^4.2.2" => "^5.0.1" -"css-loader": "^4.3.0" => "^6.8.1" -"postcss-preset-env": "^7.8.3" => "^9.3.0" -"rimraf": "^3.0.2" => "^5.0.5" +"copy-webpack-plugin": "^11.0.0" => "^12.0.2" +"css-minimizer-webpack-plugin": "^5.0.1" => "^7.0.0" +"css-loader": "^4.3.0" => "^7.1.2" +"postcss-loader": "^7.3.4" => "^8.1.1" +"postcss-preset-env": "^7.8.3" => "^9.5.14" +"style-loader": "^3.3.4" => "^4.0.0" "webpack-cli": "^4.10.0" => "^5.1.4" check versions of packages/utils/package.json using latest -"date-fns": "^1.30.1" => "^2.30.0" -"@types/date-fns": "^0.0.2" => "^2.6.0" check versions of tools/babel-plugin-assets-api/package.json using latest "read-pkg-up": "^7.0.1" => "^11.0.0" "babel-plugin-tester": "^10.1.0" => "^11.0.4" +"eslint": "^8.57.0" => "^9.4.0" check versions of tools/babel-plugin-import-d3/package.json using latest "babel-plugin-tester": "^10.1.0" => "^11.0.4" check versions of tools/babel-plugin-import-from-index/package.json using latest "babel-plugin-tester": "^10.1.0" => "^11.0.4" +"eslint": "^8.57.0" => "^9.4.0" check versions of tools/babel-plugin-import-from-lib/package.json using latest "babel-plugin-tester": "^10.1.0" => "^11.0.4" check versions of tools/cmf-webpack-plugin/package.json using latest +"eslint": "^8.57.0" => "^9.4.0" check versions of tools/cypress-api-mock-plugin/package.json using latest check versions of tools/eslint-plugin/package.json using latest +"eslint": "^8.57.0" => "^9.4.0" check versions of tools/scripts-build-cdn/package.json using latest -"commander": "^6.2.1" => "^11.1.0" -"cpx2": "^3.0.2" => "^6.0.1" -"execa": "^4.1.0" => "^8.0.1" +"commander": "^6.2.1" => "^12.1.0" +"cpx2": "^3.0.2" => "^7.0.1" +"execa": "^4.1.0" => "^9.2.0" "mkdirp": "^1.0.4" => "^3.0.1" "queue": "^6.0.2" => "^7.0.0" -"rimraf": "^3.0.2" => "^5.0.5" "webpack-cli": "^4.10.0" => "^5.1.4" check versions of tools/scripts-cmf/package.json using latest +"commander": "^6.2.1" => "^12.1.0" "deepmerge": "^1.5.2" => "^4.3.1" "mkdirp": "^1.0.4" => "^3.0.1" +"eslint": "^8.57.0" => "^9.4.0" check versions of tools/scripts-config-babel/package.json using latest "babel-core": "^7.0.0-bridge.0" => "^6.26.3" +"eslint": "^8.57.0" => "^9.4.0" check versions of tools/scripts-config-cdn/package.json using latest -"js-yaml": "^3.14.1" => "^4.1.0" "read-pkg-up": "^7.0.1" => "^11.0.0" +"eslint": "^8.57.0" => "^9.4.0" check versions of tools/scripts-config-eslint/package.json using latest +"@testing-library/dom": "^9.3.4" => "^10.1.0" +"@typescript-eslint/parser": "^6.21.0" => "^7.13.0" +"@typescript-eslint/eslint-plugin": "^6.21.0" => "^7.13.0" +"eslint": "^8.57.0" => "^9.4.0" +"eslint-config-airbnb-typescript": "^17.1.0" => "^18.0.0" +"eslint-plugin-cypress": "^2.15.2" => "^3.3.0" +"eslint-plugin-mdx": "^2.3.4" => "^3.1.5" +"eslint-plugin-storybook": "^0.6.15" => "^0.8.0" check versions of tools/scripts-config-jest/package.json using latest -"regenerator-runtime": "^0.13.11" => "^0.14.0" +"regenerator-runtime": "^0.13.11" => "^0.14.1" check versions of tools/scripts-config-prettier/package.json using latest "@trivago/prettier-plugin-sort-imports": "^3.4.0" => "^4.3.0" +"eslint": "^8.57.0" => "^9.4.0" check versions of tools/scripts-config-react-webpack/package.json using latest -"@sentry/webpack-plugin": "^1.21.0" => "^2.10.2" -"copy-webpack-plugin": "^10.2.4" => "^11.0.0" -"css-loader": "^4.3.0" => "^6.8.1" -"fork-ts-checker-webpack-plugin": "^8.0.0" => "^9.0.2" +"@sentry/webpack-plugin": "^1.21.0" => "^2.18.0" +"@welldone-software/why-did-you-render": "^7.0.1" => "^8.0.1" +"copy-webpack-plugin": "^11.0.0" => "^12.0.2" +"css-loader": "^4.3.0" => "^7.1.2" +"postcss-loader": "^7.3.4" => "^8.1.1" "postcss-safe-parser": "^6.0.0" => "^7.0.0" -"regenerator-runtime": "^0.13.11" => "^0.14.0" +"regenerator-runtime": "^0.13.11" => "^0.14.1" +"source-map-loader": "^4.0.2" => "^5.0.0" +"style-loader": "^3.3.4" => "^4.0.0" "svg64": "^1.2.0" => "^2.0.0" "webpack-cli": "^4.10.0" => "^5.1.4" +"webpack-dev-server": "^4.15.2" => "^5.0.4" check versions of tools/scripts-config-storybook-lib/package.json using latest -"i18next-http-backend": "^1.4.5" => "^2.4.2" -"msw": "^1.3.2" => "^2.0.9" +"@storybook/addon-a11y": "^7.6.19" => "^8.1.6" +"@storybook/addon-essentials": "^7.6.19" => "^8.1.6" +"@storybook/addon-interactions": "^7.6.19" => "^8.1.6" +"@storybook/addon-links": "^7.6.19" => "^8.1.6" +"@storybook/addon-storysource": "^7.6.19" => "^8.1.6" +"@storybook/source-loader": "^7.6.19" => "^8.1.6" +"@storybook/react": "^7.6.19" => "^8.1.6" +"@storybook/react-webpack5": "^7.6.19" => "^8.1.6" +"i18next-http-backend": "^1.4.5" => "^2.5.2" +"msw": "^1.3.3" => "^2.3.1" +"msw-storybook-addon": "^1.10.0" => "^2.0.2" +"storybook": "^7.6.19" => "^8.1.6" check versions of tools/scripts-config-stylelint/package.json using latest +"stylelint": "^15.11.0" => "^16.6.1" +"stylelint-config-sass-guidelines": "^10.0.0" => "^11.1.0" +"stylelint-config-standard": "^34.0.0" => "^36.0.0" check versions of tools/scripts-config-typescript/package.json using latest check versions of tools/scripts-core/package.json using latest -"cpx2": "^3.0.2" => "^6.0.1" +"stylelint": "^15.11.0" => "^16.6.1" +"cpx2": "^3.0.2" => "^7.0.1" "fs-extra": "^10.1.0" => "^11.2.0" -"rimraf": "^3.0.2" => "^5.0.5" "yargs": "^15.4.1" => "^17.7.2" check versions of tools/scripts-locales/package.json using latest check versions of tools/scripts-publish-local/package.json using latest -"rimraf": "^3.0.2" => "^5.0.5" check versions of tools/scripts-teorem/package.json using latest -"@octokit/rest": "^18.12.0" => "^20.0.2" -"commander": "^6.2.1" => "^11.1.0" -"dotenv": "^8.6.0" => "^16.3.1" +"@octokit/rest": "^18.12.0" => "^20.1.1" +"commander": "^6.2.1" => "^12.1.0" +"dotenv": "^8.6.0" => "^16.4.5" "mkdirp": "^1.0.4" => "^3.0.1" "queue": "^6.0.2" => "^7.0.0" check versions of tools/scripts-utils/package.json using latest "fs-extra": "^10.1.0" => "^11.2.0" -"glob": "^8.1.0" => "^10.3.10" +"glob": "^8.1.0" => "^10.4.1" "which": "^2.0.2" => "^4.0.0" +"eslint": "^8.57.0" => "^9.4.0" check versions of tools/scripts-yarn-workspace/package.json using latest check versions of tools/upgrade-deps/package.json using latest check versions of fork/bootstrap-sass/package.json using latest +"eslint": "^8.57.0" => "^9.4.0" check versions of fork/dynamic-cdn-webpack-plugin/package.json using latest "read-pkg-up": "^7.0.1" => "^11.0.0" -"rimraf": "^3.0.2" => "^5.0.5" +"eslint": "^8.57.0" => "^9.4.0" "webpack-cli": "^4.10.0" => "^5.1.4" +check versions of fork/json-schema-form-core/package.json using latest +"objectpath": "^1.2.2" => "^2.0.0" +"@types/chai": "^3.5.2" => "^4.3.16" +"@types/node": "^6.14.13" => "^20.14.2" + check versions of fork/module-to-cdn/package.json using latest -"execa": "^4.1.0" => "^8.0.1" +"execa": "^4.1.0" => "^9.2.0" "mkdirp": "^1.0.4" => "^3.0.1" +"eslint": "^8.57.0" => "^9.4.0" check versions of fork/react-bootstrap/package.json using latest "dom-helpers": "^3.4.0" => "^5.2.1" @@ -256,6 +355,8 @@ check versions of fork/react-bootstrap/package.json using latest "react-transition-group": "^2.9.0" => "^4.4.5" "uncontrollable": "^7.2.1" => "^8.0.4" "warning": "^3.0.0" => "^4.0.3" +"@testing-library/react": "^14.3.1" => "^16.0.0" +"chai": "^4.4.1" => "^5.1.1" "chalk": "^2.4.2" => "^5.3.0" -"sinon": "^11.1.2" => "^17.0.1" -Done in 168.28s. +"sinon": "^11.1.2" => "^18.0.0" +Done in 149.50s. diff --git a/docs/adr-2024-04-add-support-to-esm.md b/docs/adr-2024-04-add-support-to-esm.md new file mode 100644 index 00000000000..a714cebbdd0 --- /dev/null +++ b/docs/adr-2024-04-add-support-to-esm.md @@ -0,0 +1,41 @@ +# ADR: Add support to ECMAScript Modules (ESM) + +## Context + +Our build and bundling setup currently uses CommonJS modules along with webpack and the dynamic-cdn-webpack-plugin. + +To streamline our development workflow and reduce complexity, we are transitioning from yarn to pnpm. + +However, it has been identified that pnpm is not compatible with dynamic-cdn-webpack-plugin. This incompatibility, along with the decision to remove the plugin, has resulted in a degradation of the developer experience, primarily through increased build times. + +At the same time, the entire frontend world is moving towards ECMAScript Modules (ESM). + +Modern browsers that our customers use now support ESM natively. + +All existing frameworks are now relying on Vite for the build process, which, under the hood, relies on ESM. + +Therefore, having to configure a complex toolchain is becoming obsolete. Given this changing context, we can reevaluate our decisions around the "talend-scripts build\*" toolchain. + +## Problem + +The transition from yarn to pnpm has uncovered an incompatibility with dynamic-cdn-webpack-plugin, exacerbating the decision to discontinue using this plugin. + +This has adversely impacted the developer experience by elongating the build times, a significant concern as it can hinder our overall productivity and agility. + +## Decision + +Our packages must export ESM to be futur proof and let us use modern tooling like vite or parcel. + +## Alternatives Considered + +- **Sticking with webpack and dynamic-cdn-webpack-plugin**: This was initially considered to maintain our current setup and avoid the complexities associated with migration. However, given the incompatibility with pnpm and the underlying issues related to complexity and inefficiency in build times, this option was deemed unsuitable. + +- **Switching to another build tool without adopting ESM**: Several other build tools could potentially improve build times. However, without addressing the fundamental shift towards ESM in the JavaScript ecosystem, this would be a short-term fix rather than a long-term solution. + +- **Migrating to Vite while keeping our packages in CommonJS**: This alternative involves moving to Vite for its development speed advantages but not converting our packages to ESM. While this approach could reduce the immediate workload and avoid potential issues with third-party CommonJS dependencies, it would limit our ability to fully leverage Vite’s capabilities. Vite is optimized for ESM, and using CommonJS may result in suboptimal build performance and hinder live module reloading, affecting developer experience and potentially leading to more complex configurations. + +## Consequences + +- **Positive**: Moving to ESM and adopting Vite is expected to reduce build times, enhancing developer experience and productivity. It aligns our development practices with the modern JavaScript ecosystem's move towards ESM. +- **Negative**: The migration from CommonJS to ESM syntax could require significant effort. It might also temporarily disrupt our development workflow and necessitate additional training for developers not yet familiar with ESM or Vite. +- **Risks**: There is a risk of encountering third-party libraries not yet compatible with ESM, which could complicate the migration process. diff --git a/fork/bootstrap-sass/CHANGELOG.md b/fork/bootstrap-sass/CHANGELOG.md index ed2701f8558..aa7ef491ee5 100644 --- a/fork/bootstrap-sass/CHANGELOG.md +++ b/fork/bootstrap-sass/CHANGELOG.md @@ -1,5 +1,19 @@ # Changelog +## 5.3.0 + +### Minor Changes + +- c3750a1: chore: upgrade dependencies + + Major upgrade for all packages that have a peerDependency on react or react-dom. Those packages now ask for react@18 and react-dom@18. + +## 5.2.1 + +### Patch Changes + +- 1abc22f: chore: upgrade dependencies + ## 5.2.0 ### Minor Changes diff --git a/fork/bootstrap-sass/package.json b/fork/bootstrap-sass/package.json index b604287e771..d5133004d79 100644 --- a/fork/bootstrap-sass/package.json +++ b/fork/bootstrap-sass/package.json @@ -1,6 +1,6 @@ { "name": "@talend/bootstrap-sass", - "version": "5.2.0", + "version": "5.3.0", "description": "bootstrap-sass is a Sass-powered version of Bootstrap 3, ready to drop right into your Sass powered applications.", "main": "assets/javascripts/bootstrap.js", "style": "assets/stylesheets/_bootstrap.scss", @@ -40,8 +40,8 @@ "access": "public" }, "devDependencies": { - "@talend/eslint-config": "^13.0.1", - "@talend/eslint-plugin": "^1.1.0", - "eslint": "^8.55.0" + "@talend/eslint-config": "^13.2.0", + "@talend/eslint-plugin": "^1.3.0", + "eslint": "^8.57.0" } } diff --git a/fork/dynamic-cdn-webpack-plugin/CHANGELOG.md b/fork/dynamic-cdn-webpack-plugin/CHANGELOG.md index eaf006cb4e4..81a0732d093 100644 --- a/fork/dynamic-cdn-webpack-plugin/CHANGELOG.md +++ b/fork/dynamic-cdn-webpack-plugin/CHANGELOG.md @@ -1,5 +1,32 @@ # CHANGELOG +## 14.0.0 + +### Major Changes + +- c3750a1: chore: upgrade dependencies + + Major upgrade for all packages that have a peerDependency on react or react-dom. Those packages now ask for react@18 and react-dom@18. + +### Patch Changes + +- Updated dependencies [c3750a1] + - @talend/module-to-cdn@9.11.0 + +## 13.1.2 + +### Patch Changes + +- af0ac2d: Upgrade rimraf to version 5.0.5 + +## 13.1.1 + +### Patch Changes + +- 1abc22f: chore: upgrade dependencies +- Updated dependencies [1abc22f] + - @talend/module-to-cdn@9.10.1 + ## 13.1.0 ### Minor Changes diff --git a/fork/dynamic-cdn-webpack-plugin/package.json b/fork/dynamic-cdn-webpack-plugin/package.json index 335e4d3071c..8c3f8cedfac 100644 --- a/fork/dynamic-cdn-webpack-plugin/package.json +++ b/fork/dynamic-cdn-webpack-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@talend/dynamic-cdn-webpack-plugin", - "version": "13.1.0", + "version": "14.0.0", "description": "Dynamically get your dependencies from a cdn rather than bundling them in your app", "license": "MIT", "repository": "Talend/dynamic-cdn-webpack-plugin", @@ -36,24 +36,24 @@ "externals" ], "dependencies": { - "@talend/module-to-cdn": "^9.10.0", + "@talend/module-to-cdn": "^9.11.0", "read-pkg-up": "^7.0.1", - "semver": "^7.5.4", + "semver": "^7.6.2", "webpack-sources": "^3.2.3" }, "peerDependencies": { - "webpack": "^5.89.0" + "webpack": "^5.92.0" }, "devDependencies": { - "@babel/eslint-parser": "^7.23.3", + "@babel/eslint-parser": "^7.24.7", "all-contributors-cli": "^6.26.1", "codecov": "^3.8.3", - "eslint": "^8.55.0", - "html-webpack-plugin": "^5.5.3", + "eslint": "^8.57.0", + "html-webpack-plugin": "^5.6.0", "jest": "^29.7.0", "mz": "^2.7.0", - "rimraf": "^3.0.2", - "webpack": "^5.89.0", + "rimraf": "^5.0.7", + "webpack": "^5.92.0", "webpack-cli": "^4.10.0", "webpack-manifest-plugin": "^5.0.0" }, diff --git a/fork/dynamic-cdn-webpack-plugin/test/helpers/clean-dir.js b/fork/dynamic-cdn-webpack-plugin/test/helpers/clean-dir.js index 23ae125d635..dfae7778fcb 100644 --- a/fork/dynamic-cdn-webpack-plugin/test/helpers/clean-dir.js +++ b/fork/dynamic-cdn-webpack-plugin/test/helpers/clean-dir.js @@ -1,14 +1,6 @@ // eslint-disable-next-line import/no-extraneous-dependencies -const rimraf = require('rimraf'); +const { rimraf } = require('rimraf'); module.exports = function cleanDir(dir) { - return new Promise((resolve, reject) => { - rimraf(dir, err => { - if (err) { - return reject(err); - } - - return resolve(); - }); - }); + return rimraf(dir); }; diff --git a/packages/jsfc/.eslintrc.json b/fork/json-schema-form-core/.eslintrc.json similarity index 100% rename from packages/jsfc/.eslintrc.json rename to fork/json-schema-form-core/.eslintrc.json diff --git a/packages/jsfc/.gitignore b/fork/json-schema-form-core/.gitignore similarity index 100% rename from packages/jsfc/.gitignore rename to fork/json-schema-form-core/.gitignore diff --git a/packages/jsfc/.jscsrc b/fork/json-schema-form-core/.jscsrc similarity index 100% rename from packages/jsfc/.jscsrc rename to fork/json-schema-form-core/.jscsrc diff --git a/packages/jsfc/.mocharc.json b/fork/json-schema-form-core/.mocharc.json similarity index 100% rename from packages/jsfc/.mocharc.json rename to fork/json-schema-form-core/.mocharc.json diff --git a/packages/jsfc/.travis.yml b/fork/json-schema-form-core/.travis.yml similarity index 100% rename from packages/jsfc/.travis.yml rename to fork/json-schema-form-core/.travis.yml diff --git a/packages/jsfc/CHANGELOG.md b/fork/json-schema-form-core/CHANGELOG.md similarity index 52% rename from packages/jsfc/CHANGELOG.md rename to fork/json-schema-form-core/CHANGELOG.md index c850ddcfc4f..135d9eb5a9c 100644 --- a/packages/jsfc/CHANGELOG.md +++ b/fork/json-schema-form-core/CHANGELOG.md @@ -1,5 +1,58 @@ # @talend/json-schema-form-core +## 1.4.1 + +### Patch Changes + +- f321a0d: Remove unused tsconfig.esm.json (initially added to use TSC but we stay with babel at the end) + +## 1.4.0 + +### Minor Changes + +- c3750a1: chore: upgrade dependencies + + Major upgrade for all packages that have a peerDependency on react or react-dom. Those packages now ask for react@18 and react-dom@18. + +## 1.3.0 + +### Minor Changes + +- 3bd16fc: Add support to ESM + +## 1.2.7 + +### Patch Changes + +- 568481a: Remove usage of path-browserify as it's not needed + +## 1.2.6 + +### Patch Changes + +- f546896: Fix: improve call of use in sass files + fix ts lint + +## 1.2.5 + +### Patch Changes + +- 779fc8c: - JSFC is a fork of https://github.com/json-schema-form/json-schema-form-core : its place is in the Fork folder + - Remove local copy of json-refs and use package instead + - add missing type to fix ts compilation error + - add a polyfill for json-refs: path-browserify + +## 1.2.4 + +### Patch Changes + +- af0ac2d: Upgrade rimraf to version 5.0.5 + +## 1.2.3 + +### Patch Changes + +- 1abc22f: chore: upgrade dependencies + ## 1.2.2 ### Patch Changes diff --git a/packages/jsfc/LICENSE b/fork/json-schema-form-core/LICENSE similarity index 100% rename from packages/jsfc/LICENSE rename to fork/json-schema-form-core/LICENSE diff --git a/packages/jsfc/README.md b/fork/json-schema-form-core/README.md similarity index 82% rename from packages/jsfc/README.md rename to fork/json-schema-form-core/README.md index aa05bda5f7c..485213c45bf 100644 --- a/packages/jsfc/README.md +++ b/fork/json-schema-form-core/README.md @@ -1,4 +1,5 @@ # JSON Schema Form Core + [![Gitter](https://img.shields.io/badge/GITTER-JOIN%20CHAT%20%E2%86%92-ff69b4.svg?style=flat-square)](https://gitter.im/json-schema-form/angular-schema-form?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) [![Build Status](https://travis-ci.org/json-schema-form/json-schema-form-core.svg?branch=development)](https://travis-ci.org/json-schema-form/json-schema-form-core) @@ -11,11 +12,13 @@ You **DO NOT** use this file in addition to Angular Schema Form, it is embedded build into any frameworks using it. ## Work-In-Progress! + There is [test output](docs/test.md) that forms some super basic documentation and I intend to expand them much further to the point of almost being useful before I create a proper API and document that. ## Keeping Track + After changing to Webpack 2, this library now includes a detailed version header which is passed through into `Angular Schema Form` and also the `Bootstrap` decorator bundle @@ -31,6 +34,7 @@ header which is passed through into `Angular Schema Form` and also the `Bootstra ``` ## Contributing / Plans + The main contributions we need to the core at the moment are related to both the migration of `Angular Schema Form` features to the core (like templates/builders) and the addition of an API for use by ASF (Angular) and RSF (React) libraries. @@ -40,21 +44,24 @@ Please contact @Anthropic via our [Gitter](https://gitter.im/json-schema-form/an ## Testing it ### With Angular Schema Form + There is a branch in angular-schema-form called `feature/webpack-babel` that integrates the core. To use it roughly follow these steps: -* Clone angular-schema-form to a **sibling** directory and switch to branch `feature/webpack-babel` -* `npm install` to install dependencies -* `npm run build` to build with the core. -* Use dist/angular-schema-form.js, now with the core from this folder. *No need to also load ObjectPath since it is already included* +- Clone angular-schema-form to a **sibling** directory and switch to branch `feature/webpack-babel` +- `npm install` to install dependencies +- `npm run build` to build with the core. +- Use dist/angular-schema-form.js, now with the core from this folder. _No need to also load ObjectPath since it is already included_ ### With Mocha tests + Tests are written in mocha + chai and run trough `npm test`. When the command `npm run testdoc` is run instead, the tests will also generate a readable `markdown` file [test.md](docs/test.md) to document elements of the library. ## Notes -* ObjectPath is bundled with json-schema-form-core -* angular-schema-form bundles json-schema-form-core so the user doesn't have to include it as an dependency. -* The code for not using ObjectPath on Angular 1.2 is removed. Could maybe be fixed but I (davidlgj) strongly believe its time to drop Angular 1.2 support since it complicates validation code as well. + +- ObjectPath is bundled with json-schema-form-core +- angular-schema-form bundles json-schema-form-core so the user doesn't have to include it as a dependency. +- The code for not using ObjectPath on Angular 1.2 is removed. Could maybe be fixed but I (davidlgj) strongly believe its time to drop Angular 1.2 support since it complicates validation code as well. diff --git a/packages/jsfc/package.json b/fork/json-schema-form-core/package.json similarity index 69% rename from packages/jsfc/package.json rename to fork/json-schema-form-core/package.json index e0211545c7e..a6881c47202 100644 --- a/packages/jsfc/package.json +++ b/fork/json-schema-form-core/package.json @@ -1,11 +1,18 @@ { "name": "@talend/json-schema-form-core", - "version": "1.2.2", + "version": "1.4.1", "description": "JSON-Schema and JSON-UI-Schema utilities for form generation.", "main": "dist/index.js", - "mainSrc": "src/index.js", + "module": "./lib-esm/index.js", + "exports": { + ".": { + "import": "./lib-esm/index.js", + "require": "./dist/index.js" + } + }, "scripts": { "build:lib": "rimraf dist && talend-scripts build --umd", + "build:lib:esm": "talend-scripts build --esm", "watch": "webpack --watch", "dist-untested": "webpack --config webpack.config.dist.js", "test:cov": "npm run test", @@ -39,20 +46,20 @@ "json-schema" ], "devDependencies": { - "@talend/eslint-config": "^13.0.2", - "@talend/eslint-plugin": "^1.1.0", - "@talend/scripts-core": "^16.3.2", - "@talend/scripts-config-react-webpack": "^16.3.3", - "@talend/scripts-config-typescript": "^11.2.0", - "@talend/babel-plugin-import-from-index": "^1.6.1", - "@talend/babel-plugin-assets-api": "^1.2.1", + "@talend/babel-plugin-assets-api": "^1.4.0", + "@talend/babel-plugin-import-from-index": "^1.8.0", + "@talend/eslint-config": "^13.2.0", + "@talend/eslint-plugin": "^1.3.0", + "@talend/scripts-config-react-webpack": "^16.8.0", + "@talend/scripts-config-typescript": "^11.3.0", + "@talend/scripts-core": "^16.5.1", "@types/chai": "^3.5.2", "@types/node": "^6.14.13", - "json-refs": "^3.0.15", - "rimraf": "^3.0.2", - "webpack": "^5.89.0" + "rimraf": "^5.0.7", + "webpack": "^5.92.0" }, "dependencies": { + "json-refs": "3.0.15", "objectpath": "^1.2.2", "tv4": "^1.3.0" }, diff --git a/packages/jsfc/src/canonical-title-map.spec.js b/fork/json-schema-form-core/src/canonical-title-map.spec.js similarity index 100% rename from packages/jsfc/src/canonical-title-map.spec.js rename to fork/json-schema-form-core/src/canonical-title-map.spec.js diff --git a/packages/jsfc/src/canonical-title-map.ts b/fork/json-schema-form-core/src/canonical-title-map.ts similarity index 94% rename from packages/jsfc/src/canonical-title-map.ts rename to fork/json-schema-form-core/src/canonical-title-map.ts index e73dbfb5b3f..392e6c9e48d 100644 --- a/packages/jsfc/src/canonical-title-map.ts +++ b/fork/json-schema-form-core/src/canonical-title-map.ts @@ -2,7 +2,7 @@ // in the list format. export default function (titleMap: Array, originalEnum?: any) { if (!Array.isArray(titleMap)) { - const canonical = []; + const canonical: any = []; if (originalEnum) { originalEnum.forEach(value => { canonical.push({ name: titleMap[value], value }); diff --git a/packages/jsfc/src/index.js b/fork/json-schema-form-core/src/index.js similarity index 100% rename from packages/jsfc/src/index.js rename to fork/json-schema-form-core/src/index.js diff --git a/packages/jsfc/src/merge.js b/fork/json-schema-form-core/src/merge.js similarity index 100% rename from packages/jsfc/src/merge.js rename to fork/json-schema-form-core/src/merge.js diff --git a/packages/jsfc/src/merge.spec.js b/fork/json-schema-form-core/src/merge.spec.js similarity index 100% rename from packages/jsfc/src/merge.spec.js rename to fork/json-schema-form-core/src/merge.spec.js diff --git a/packages/jsfc/src/module.spec.js b/fork/json-schema-form-core/src/module.spec.js similarity index 99% rename from packages/jsfc/src/module.spec.js rename to fork/json-schema-form-core/src/module.spec.js index 1c3ee688ac3..00010d88e40 100644 --- a/packages/jsfc/src/module.spec.js +++ b/fork/json-schema-form-core/src/module.spec.js @@ -1,15 +1,16 @@ import chai from 'chai'; import { describe, it } from 'mocha'; + import { + canonicalTitleMap, + jsonref, merge, + schemaDefaults, select, - traverseSchema, + sfPath, traverseForm, + traverseSchema, validate, - sfPath, - schemaDefaults, - canonicalTitleMap, - jsonref, } from '.'; chai.should(); diff --git a/packages/jsfc/src/resolve.js b/fork/json-schema-form-core/src/resolve.js similarity index 89% rename from packages/jsfc/src/resolve.js rename to fork/json-schema-form-core/src/resolve.js index ee81a78d056..d5245b941a2 100644 --- a/packages/jsfc/src/resolve.js +++ b/fork/json-schema-form-core/src/resolve.js @@ -1,4 +1,4 @@ -import * as JsonRefs from './../lib/json-refs-standalone'; +import * as JsonRefs from 'json-refs'; export function jsonref(schema, callBack) { let promise = new Promise(function (resolve, reject) { diff --git a/packages/jsfc/src/resolve.spec.js b/fork/json-schema-form-core/src/resolve.spec.js similarity index 100% rename from packages/jsfc/src/resolve.spec.js rename to fork/json-schema-form-core/src/resolve.spec.js diff --git a/packages/jsfc/src/schema-defaults.test.js b/fork/json-schema-form-core/src/schema-defaults.test.js similarity index 100% rename from packages/jsfc/src/schema-defaults.test.js rename to fork/json-schema-form-core/src/schema-defaults.test.js diff --git a/packages/jsfc/src/schema-defaults.ts b/fork/json-schema-form-core/src/schema-defaults.ts similarity index 93% rename from packages/jsfc/src/schema-defaults.ts rename to fork/json-schema-form-core/src/schema-defaults.ts index 90adb2c2936..d489aefff8a 100644 --- a/packages/jsfc/src/schema-defaults.ts +++ b/fork/json-schema-form-core/src/schema-defaults.ts @@ -16,7 +16,7 @@ const stripNullType = type => { // Creates an default titleMap list from an enum, i.e. a list of strings. const enumToTitleMap = enm => { - const titleMap = []; // canonical titleMap format is a list. + const titleMap: any = []; // canonical titleMap format is a list. enm.forEach(name => { titleMap.push({ name, value: name }); }); @@ -94,7 +94,7 @@ export function stdFormObj(name, schema, options) { f.validationMessage = schema.validationMessage; } if (schema.enumNames) { - f.titleMap = canonicalTitleMap(schema.enumNames, schema['enum']); + f.titleMap = canonicalTitleMap(schema.enumNames, schema.enum); } f.schema = schema; @@ -107,7 +107,7 @@ export function stdFormObj(name, schema, options) { /*** Schema types to form type mappings, with defaults ***/ export function text(name, schema, options) { - if (stripNullType(schema.type) === 'string' && !schema['enum']) { + if (stripNullType(schema.type) === 'string' && !schema.enum) { const f = stdFormObj(name, schema, options); f.key = options.path; f.type = 'text'; @@ -149,12 +149,12 @@ export function checkbox(name, schema, options) { } export function select(name, schema, options) { - if (stripNullType(schema.type) === 'string' && schema['enum']) { + if (stripNullType(schema.type) === 'string' && schema.enum) { const f = stdFormObj(name, schema, options); f.key = options.path; f.type = 'select'; if (!f.titleMap) { - f.titleMap = enumToTitleMap(schema['enum']); + f.titleMap = enumToTitleMap(schema.enum); } options.lookup[stringify(options.path)] = f; return f; @@ -162,12 +162,12 @@ export function select(name, schema, options) { } export function checkboxes(name, schema, options) { - if (stripNullType(schema.type) === 'array' && schema.items && schema.items['enum']) { + if (stripNullType(schema.type) === 'array' && schema.items && schema.items.enum) { const f = stdFormObj(name, schema, options); f.key = options.path; f.type = 'checkboxes'; if (!f.titleMap) { - f.titleMap = enumToTitleMap(schema.items['enum']); + f.titleMap = enumToTitleMap(schema.items.enum); } options.lookup[stringify(options.path)] = f; return f; @@ -262,7 +262,7 @@ export function defaultForm( ignore?: any, globalOptions?: any, ) { - const form = []; + const form: any[] = []; const lookup = {}; // Map path => form obj for fast lookup in merging ignore = ignore || {}; globalOptions = globalOptions || {}; @@ -272,7 +272,7 @@ export function defaultForm( Object.keys(schema.properties).forEach(key => { if (ignore[key] !== true) { const required = schema.required && schema.required.indexOf(key) !== -1; - const def = defaultFormDefinition(defaultSchemaTypes, key, schema.properties[key], { + const def: any = defaultFormDefinition(defaultSchemaTypes, key, schema.properties[key], { path: [key], // Path to this property in bracket notation. lookup: lookup, // Extra map to register with. Optimization for merger. ignore: ignore, // The ignore list of paths (sans root level name) diff --git a/packages/jsfc/src/select.js b/fork/json-schema-form-core/src/select.js similarity index 100% rename from packages/jsfc/src/select.js rename to fork/json-schema-form-core/src/select.js diff --git a/packages/jsfc/src/select.test.js b/fork/json-schema-form-core/src/select.test.js similarity index 100% rename from packages/jsfc/src/select.test.js rename to fork/json-schema-form-core/src/select.test.js diff --git a/packages/jsfc/src/sf-path.test.js b/fork/json-schema-form-core/src/sf-path.test.js similarity index 100% rename from packages/jsfc/src/sf-path.test.js rename to fork/json-schema-form-core/src/sf-path.test.js diff --git a/packages/jsfc/src/sf-path.ts b/fork/json-schema-form-core/src/sf-path.ts similarity index 100% rename from packages/jsfc/src/sf-path.ts rename to fork/json-schema-form-core/src/sf-path.ts diff --git a/packages/jsfc/src/traverse.test.js b/fork/json-schema-form-core/src/traverse.test.js similarity index 100% rename from packages/jsfc/src/traverse.test.js rename to fork/json-schema-form-core/src/traverse.test.js diff --git a/packages/jsfc/src/traverse.ts b/fork/json-schema-form-core/src/traverse.ts similarity index 100% rename from packages/jsfc/src/traverse.ts rename to fork/json-schema-form-core/src/traverse.ts diff --git a/packages/jsfc/src/validate.js b/fork/json-schema-form-core/src/validate.js similarity index 100% rename from packages/jsfc/src/validate.js rename to fork/json-schema-form-core/src/validate.js diff --git a/packages/jsfc/src/validate.test.js b/fork/json-schema-form-core/src/validate.test.js similarity index 100% rename from packages/jsfc/src/validate.test.js rename to fork/json-schema-form-core/src/validate.test.js diff --git a/packages/jsfc/talend-scripts.json b/fork/json-schema-form-core/talend-scripts.json similarity index 100% rename from packages/jsfc/talend-scripts.json rename to fork/json-schema-form-core/talend-scripts.json diff --git a/fork/json-schema-form-core/test.md b/fork/json-schema-form-core/test.md new file mode 100644 index 00000000000..185599bbb72 --- /dev/null +++ b/fork/json-schema-form-core/test.md @@ -0,0 +1,257 @@ +# TOC + +- [merge.js](#mergejs) + - [merge](#mergejs-merge) +- [schema-defaults.js](#schema-defaultsjs) - [createDefaults](#schema-defaultsjs-createdefaults) - [defaultForm](#schema-defaultsjs-defaultform) + + + + +# merge.js + +should contain a function for merging schema and form definitions. + +```js +_merge.merge.should.be.an('function'); +``` + + + +## merge + +should combine a schema and form definition, regardless of order. + +```js +(0, _merge.merge)(schema, ['name', 'gender']).should.be.deep.equal(stdForm.form); +(0, _merge.merge)(schema, ['gender']).should.be.deep.equal([stdForm.form[1]]); +(0, _merge.merge)(schema, ['gender', 'name']).should.be.deep.equal([ + stdForm.form[1], + stdForm.form[0], +]); +``` + +should handle a wildcard \* in the form definition. + +```js +(0, _merge.merge)(schema, ['*']).should.be.deep.equal(stdForm.form); +``` + +should allow items that are not in the schema. + +```js +(0, _merge.merge)(schema, ['*', { type: 'fieldset' }]).should.be.deep.equal( + stdForm.form.concat([{ type: 'fieldset' }]), +); +``` + + + +# schema-defaults.js + +should hold functions for generating a default form schema from defaults it creates. + +```js +_schemaDefaults.defaultForm.should.be.an('function'); +_schemaDefaults.createDefaults.should.be.an('function'); +``` + + + +## createDefaults + +should create default rules. + +```js +var rules = (0, _schemaDefaults.createDefaults)(); +rules.should.be.an('object'); +``` + + + +## defaultForm + +should generate default form def from a schema. + +```js +var schema = { + type: 'object', + properties: { + name: { + title: 'Name', + description: 'Gimme yea name lad', + type: 'string', + }, + gender: { + title: 'Choose', + type: 'string', + enum: ['undefined', 'null', 'NaN'], + }, + overEighteen: { + title: 'Are you over 18 years old?', + type: 'boolean', + default: false, + }, + attributes: { + type: 'object', + required: ['eyecolor'], + properties: { + eyecolor: { type: 'string', title: 'Eye color' }, + haircolor: { type: 'string', title: 'Hair color' }, + shoulders: { + type: 'object', + title: 'Shoulders', + properties: { + left: { type: 'string' }, + right: { type: 'string' }, + }, + }, + }, + }, + }, +}; +var form = [ + { + title: 'Name', + description: 'Gimme yea name lad', + schema: { + title: 'Name', + description: 'Gimme yea name lad', + type: 'string', + }, + ngModelOptions: {}, + key: ['name'], + type: 'text', + }, + { + title: 'Choose', + schema: { + title: 'Choose', + type: 'string', + enum: ['undefined', 'null', 'NaN'], + }, + ngModelOptions: {}, + key: ['gender'], + type: 'select', + titleMap: [ + { + name: 'undefined', + value: 'undefined', + }, + { + name: 'null', + value: 'null', + }, + { + name: 'NaN', + value: 'NaN', + }, + ], + }, + { + title: 'Are you over 18 years old?', + schema: { + title: 'Are you over 18 years old?', + type: 'boolean', + default: false, + }, + ngModelOptions: {}, + key: ['overEighteen'], + type: 'checkbox', + }, + { + title: 'attributes', + schema: { + type: 'object', + required: ['eyecolor'], + properties: { + eyecolor: { + type: 'string', + title: 'Eye color', + }, + haircolor: { + type: 'string', + title: 'Hair color', + }, + shoulders: { + type: 'object', + title: 'Shoulders', + properties: { + left: { + type: 'string', + }, + right: { + type: 'string', + }, + }, + }, + }, + }, + ngModelOptions: {}, + key: ['attributes'], + type: 'fieldset', + items: [ + { + title: 'Eye color', + required: true, + schema: { + type: 'string', + title: 'Eye color', + }, + ngModelOptions: {}, + key: ['attributes', 'eyecolor'], + type: 'text', + }, + { + title: 'Hair color', + schema: { + type: 'string', + title: 'Hair color', + }, + ngModelOptions: {}, + key: ['attributes', 'haircolor'], + type: 'text', + }, + { + title: 'Shoulders', + schema: { + type: 'object', + title: 'Shoulders', + properties: { + left: { + type: 'string', + }, + right: { + type: 'string', + }, + }, + }, + ngModelOptions: {}, + key: ['attributes', 'shoulders'], + type: 'fieldset', + items: [ + { + title: 'left', + schema: { + type: 'string', + }, + ngModelOptions: {}, + key: ['attributes', 'shoulders', 'left'], + type: 'text', + }, + { + title: 'right', + schema: { + type: 'string', + }, + ngModelOptions: {}, + key: ['attributes', 'shoulders', 'right'], + type: 'text', + }, + ], + }, + ], + }, +]; +var f = (0, _schemaDefaults.defaultForm)(schema, (0, _schemaDefaults.createDefaults)()); +f.form.should.be.deep.equal(form); +``` diff --git a/packages/jsfc/tsconfig.json b/fork/json-schema-form-core/tsconfig.json similarity index 87% rename from packages/jsfc/tsconfig.json rename to fork/json-schema-form-core/tsconfig.json index 03264a1df9f..0f7c9589bbb 100644 --- a/packages/jsfc/tsconfig.json +++ b/fork/json-schema-form-core/tsconfig.json @@ -2,6 +2,7 @@ "extends": "@talend/scripts-config-typescript/tsconfig.json", "include": ["src/**/*"], "compilerOptions": { + "noImplicitAny": false, "declaration": true, "target": "ES5", "module": "CommonJs" diff --git a/packages/jsfc/webpack.config.js b/fork/json-schema-form-core/webpack.config.js similarity index 54% rename from packages/jsfc/webpack.config.js rename to fork/json-schema-form-core/webpack.config.js index 349b3015baa..91e7b797243 100644 --- a/packages/jsfc/webpack.config.js +++ b/fork/json-schema-form-core/webpack.config.js @@ -2,4 +2,9 @@ module.exports = { output: { filename: 'index.js', }, + resolve: { + fallback: { + path: false, + }, + }, }; diff --git a/fork/module-to-cdn/CHANGELOG.md b/fork/module-to-cdn/CHANGELOG.md index 8bd76963639..0a9ac93852e 100644 --- a/fork/module-to-cdn/CHANGELOG.md +++ b/fork/module-to-cdn/CHANGELOG.md @@ -1,5 +1,19 @@ # @talend/module-to-cdn +## 9.11.0 + +### Minor Changes + +- c3750a1: chore: upgrade dependencies + + Major upgrade for all packages that have a peerDependency on react or react-dom. Those packages now ask for react@18 and react-dom@18. + +## 9.10.1 + +### Patch Changes + +- 1abc22f: chore: upgrade dependencies + ## 9.10.0 ### Minor Changes diff --git a/fork/module-to-cdn/package.json b/fork/module-to-cdn/package.json index e955cb26062..c0a00ef63b4 100644 --- a/fork/module-to-cdn/package.json +++ b/fork/module-to-cdn/package.json @@ -1,6 +1,6 @@ { "name": "@talend/module-to-cdn", - "version": "9.10.0", + "version": "9.11.0", "description": "Get cdn config from npm module name", "license": "MIT", "repository": "https://github.com/Talend/ui", @@ -35,11 +35,11 @@ "dependencies": { "execa": "^4.1.0", "mkdirp": "^1.0.4", - "semver": "^7.5.4" + "semver": "^7.6.2" }, "devDependencies": { - "@babel/eslint-parser": "^7.23.3", - "eslint": "^8.55.0", + "@babel/eslint-parser": "^7.24.7", + "eslint": "^8.57.0", "jest": "^29.7.0" }, "publishConfig": { diff --git a/fork/react-bootstrap/CHANGELOG.md b/fork/react-bootstrap/CHANGELOG.md index b8aedeae1cf..58e3019d5ee 100644 --- a/fork/react-bootstrap/CHANGELOG.md +++ b/fork/react-bootstrap/CHANGELOG.md @@ -1,5 +1,43 @@ ## [v0.32.5] +## 3.0.2 + +### Patch Changes + +- f321a0d: Remove unused tsconfig.esm.json (initially added to use TSC but we stay with babel at the end) + +## 3.0.1 + +### Patch Changes + +- b8f7672: fix module not found error for @talend/react-bootstrap and @talend/icons + +## 3.0.0 + +### Major Changes + +- c3750a1: chore: upgrade dependencies + + Major upgrade for all packages that have a peerDependency on react or react-dom. Those packages now ask for react@18 and react-dom@18. + +## 2.3.0 + +### Minor Changes + +- 3bd16fc: Add support to ESM + +## 2.2.3 + +### Patch Changes + +- d332ab1: Fix imports and typing + +## 2.2.2 + +### Patch Changes + +- 1abc22f: chore: upgrade dependencies + ## 2.2.1 ### Patch Changes diff --git a/fork/react-bootstrap/package.json b/fork/react-bootstrap/package.json index 321e62a1e63..87a05e87941 100644 --- a/fork/react-bootstrap/package.json +++ b/fork/react-bootstrap/package.json @@ -1,6 +1,6 @@ { "name": "@talend/react-bootstrap", - "version": "2.2.1", + "version": "3.0.2", "description": "Bootstrap 3 components built with React", "repository": { "type": "git", @@ -9,9 +9,17 @@ "homepage": "https://react-bootstrap.github.io/", "sideEffects": false, "main": "lib/index.js", + "module": "./lib-esm/index.js", + "exports": { + ".": { + "import": "./lib-esm/index.js", + "require": "./lib/index.js" + } + }, "scripts": { "build:dev": "talend-scripts build --umd --dev", "build:prod": "talend-scripts build --umd --prod", + "build:lib:esm": "talend-scripts build --esm", "pre-release": "yarn build:dev && yarn build:prod", "build:lib": "talend-scripts build", "lint": "talend-scripts lint", @@ -22,6 +30,7 @@ "files": [ "CHANGELOG.md", "lib", + "lib-esm", "dist", "es" ], @@ -34,30 +43,31 @@ "author": "Stephen J. Collings ", "license": "MIT", "peerDependencies": { - "react": ">=16.3.0", - "react-dom": ">=16.3.0" + "react": "^18.3.1", + "react-dom": "^18.3.1" }, "devDependencies": { - "@talend/eslint-config": "^13.0.2", - "@talend/eslint-plugin": "^1.1.0", - "@talend/scripts-core": "^16.3.2", - "@talend/scripts-config-babel": "^13.2.1", - "@talend/scripts-config-react-webpack": "^16.3.3", - "@testing-library/jest-dom": "^6.1.5", - "@testing-library/react": "^14.1.2", - "@testing-library/user-event": "^14.5.1", - "chai": "^4.3.10", + "@talend/eslint-config": "^13.2.0", + "@talend/eslint-plugin": "^1.3.0", + "@talend/scripts-config-typescript": "^11.3.0", + "@talend/scripts-core": "^16.5.1", + "@talend/scripts-config-babel": "^13.5.0", + "@talend/scripts-config-react-webpack": "^16.8.0", + "@testing-library/jest-dom": "^6.4.6", + "@testing-library/react": "^14.3.1", + "@testing-library/user-event": "^14.5.2", + "chai": "^4.4.1", "chalk": "^2.4.2", "create-react-class": "^15.7.0", "cross-env": "^7.0.3", "lodash": "^4.17.21", - "react": "^18.2.0", - "react-dom": "^18.2.0", - "react-test-renderer": "^18.2.0", + "react": "^18.3.1", + "react-dom": "^18.3.1", + "react-test-renderer": "^18.3.1", "sinon": "^11.1.2" }, "dependencies": { - "classnames": "^2.3.2", + "classnames": "^2.5.1", "dom-helpers": "^3.4.0", "invariant": "^2.2.4", "prop-types": "^15.8.1", diff --git a/fork/react-bootstrap/src/index.js b/fork/react-bootstrap/src/index.js index 5709ee30b0c..90a7961b7d1 100644 --- a/fork/react-bootstrap/src/index.js +++ b/fork/react-bootstrap/src/index.js @@ -1,72 +1,72 @@ -export Accordion from './Accordion'; -export Alert from './Alert'; -export Badge from './Badge'; -export Breadcrumb from './Breadcrumb'; -export BreadcrumbItem from './BreadcrumbItem'; -export Button from './Button'; -export ButtonGroup from './ButtonGroup'; -export ButtonToolbar from './ButtonToolbar'; -export Carousel from './Carousel'; -export CarouselItem from './CarouselItem'; -export Checkbox from './Checkbox'; -export Clearfix from './Clearfix'; -export CloseButton from './CloseButton'; -export ControlLabel from './ControlLabel'; -export Col from './Col'; -export Collapse from './Collapse'; -export Dropdown from './Dropdown'; -export DropdownButton from './DropdownButton'; -export Fade from './Fade'; -export Form from './Form'; -export FormControl from './FormControl'; -export FormGroup from './FormGroup'; -export Glyphicon from './Glyphicon'; -export Grid from './Grid'; -export HelpBlock from './HelpBlock'; -export Image from './Image'; -export InputGroup from './InputGroup'; -export Jumbotron from './Jumbotron'; -export Label from './Label'; -export ListGroup from './ListGroup'; -export ListGroupItem from './ListGroupItem'; -export Media from './Media'; -export MenuItem from './MenuItem'; -export Modal from './Modal'; -export ModalBody from './ModalBody'; -export ModalDialog from './ModalDialog'; -export ModalFooter from './ModalFooter'; -export ModalHeader from './ModalHeader'; -export ModalTitle from './ModalTitle'; -export Nav from './Nav'; -export Navbar from './Navbar'; -export NavbarBrand from './NavbarBrand'; -export NavDropdown from './NavDropdown'; -export NavItem from './NavItem'; -export Overlay from './Overlay'; -export OverlayTrigger from './OverlayTrigger'; -export PageHeader from './PageHeader'; -export PageItem from './PageItem'; -export Pager from './Pager'; -export Pagination from './Pagination'; -export Panel from './Panel'; -export PanelGroup from './PanelGroup'; -export Popover from './Popover'; -export ProgressBar from './ProgressBar'; -export Radio from './Radio'; -export ResponsiveEmbed from './ResponsiveEmbed'; -export Row from './Row'; -export SafeAnchor from './SafeAnchor'; -export SplitButton from './SplitButton'; -export Tab from './Tab'; -export TabContainer from './TabContainer'; -export TabContent from './TabContent'; -export Table from './Table'; -export TabPane from './TabPane'; -export Tabs from './Tabs'; -export Thumbnail from './Thumbnail'; -export ToggleButton from './ToggleButton'; -export ToggleButtonGroup from './ToggleButtonGroup'; -export Tooltip from './Tooltip'; -export Well from './Well'; +export { default as Accordion } from './Accordion'; +export { default as Alert } from './Alert'; +export { default as Badge } from './Badge'; +export { default as Breadcrumb } from './Breadcrumb'; +export { default as BreadcrumbItem } from './BreadcrumbItem'; +export { default as Button } from './Button'; +export { default as ButtonGroup } from './ButtonGroup'; +export { default as ButtonToolbar } from './ButtonToolbar'; +export { default as Carousel } from './Carousel'; +export { default as CarouselItem } from './CarouselItem'; +export { default as Checkbox } from './Checkbox'; +export { default as Clearfix } from './Clearfix'; +export { default as CloseButton } from './CloseButton'; +export { default as ControlLabel } from './ControlLabel'; +export { default as Col } from './Col'; +export { default as Collapse } from './Collapse'; +export { default as Dropdown } from './Dropdown'; +export { default as DropdownButton } from './DropdownButton'; +export { default as Fade } from './Fade'; +export { default as Form } from './Form'; +export { default as FormControl } from './FormControl'; +export { default as FormGroup } from './FormGroup'; +export { default as Glyphicon } from './Glyphicon'; +export { default as Grid } from './Grid'; +export { default as HelpBlock } from './HelpBlock'; +export { default as Image } from './Image'; +export { default as InputGroup } from './InputGroup'; +export { default as Jumbotron } from './Jumbotron'; +export { default as Label } from './Label'; +export { default as ListGroup } from './ListGroup'; +export { default as ListGroupItem } from './ListGroupItem'; +export { default as Media } from './Media'; +export { default as MenuItem } from './MenuItem'; +export { default as Modal } from './Modal'; +export { default as ModalBody } from './ModalBody'; +export { default as ModalDialog } from './ModalDialog'; +export { default as ModalFooter } from './ModalFooter'; +export { default as ModalHeader } from './ModalHeader'; +export { default as ModalTitle } from './ModalTitle'; +export { default as Nav } from './Nav'; +export { default as Navbar } from './Navbar'; +export { default as NavbarBrand } from './NavbarBrand'; +export { default as NavDropdown } from './NavDropdown'; +export { default as NavItem } from './NavItem'; +export { default as Overlay } from './Overlay'; +export { default as OverlayTrigger } from './OverlayTrigger'; +export { default as PageHeader } from './PageHeader'; +export { default as PageItem } from './PageItem'; +export { default as Pager } from './Pager'; +export { default as Pagination } from './Pagination'; +export { default as Panel } from './Panel'; +export { default as PanelGroup } from './PanelGroup'; +export { default as Popover } from './Popover'; +export { default as ProgressBar } from './ProgressBar'; +export { default as Radio } from './Radio'; +export { default as ResponsiveEmbed } from './ResponsiveEmbed'; +export { default as Row } from './Row'; +export { default as SafeAnchor } from './SafeAnchor'; +export { default as SplitButton } from './SplitButton'; +export { default as Tab } from './Tab'; +export { default as TabContainer } from './TabContainer'; +export { default as TabContent } from './TabContent'; +export { default as Table } from './Table'; +export { default as TabPane } from './TabPane'; +export { default as Tabs } from './Tabs'; +export { default as Thumbnail } from './Thumbnail'; +export { default as ToggleButton } from './ToggleButton'; +export { default as ToggleButtonGroup } from './ToggleButtonGroup'; +export { default as Tooltip } from './Tooltip'; +export { default as Well } from './Well'; export * as utils from './utils'; diff --git a/fork/react-bootstrap/src/utils/index.js b/fork/react-bootstrap/src/utils/index.js index 0fb3a1ae023..1605c60316e 100644 --- a/fork/react-bootstrap/src/utils/index.js +++ b/fork/react-bootstrap/src/utils/index.js @@ -1,3 +1,3 @@ export * as bootstrapUtils from './bootstrapUtils'; -export createChainedFunction from './createChainedFunction'; -export ValidComponentChildren from './ValidComponentChildren'; +export { default as createChainedFunction } from './createChainedFunction'; +export { default as ValidComponentChildren } from './ValidComponentChildren'; diff --git a/fork/react-bootstrap/tsconfig.json b/fork/react-bootstrap/tsconfig.json new file mode 100644 index 00000000000..3405e576ec1 --- /dev/null +++ b/fork/react-bootstrap/tsconfig.json @@ -0,0 +1,4 @@ +{ + "extends": "@talend/scripts-config-typescript/tsconfig.json", + "include": ["src/**/*"] +} diff --git a/package.json b/package.json index 9f88cd605d0..14d0879c20f 100644 --- a/package.json +++ b/package.json @@ -1,22 +1,22 @@ { "devDependencies": { - "@changesets/cli": "^2.27.1", - "@talend/scripts-config-babel": "^13.2.0", - "@talend/scripts-config-prettier": "^12.1.2", - "@talend/scripts-core": "^16.3.1", - "@talend/scripts-yarn-workspace": "^2.0.0", + "@changesets/cli": "^2.27.5", + "@talend/scripts-config-babel": "^13.4.0", + "@talend/scripts-config-prettier": "^12.1.3", + "@talend/scripts-core": "^16.4.0", + "@talend/scripts-yarn-workspace": "^2.0.2", "cross-env": "^7.0.3", "cross-spawn": "^7.0.3", - "eslint": "^8.55.0", + "eslint": "^8.57.0", "husky": "^8.0.3", "i18next-scanner": "^4.4.0", - "lint-staged": "^15.2.0", - "prettier": "^3.1.0", - "rimraf": "^3.0.2", - "typescript": "^5.3.3" + "lint-staged": "^15.2.6", + "prettier": "^3.3.2", + "rimraf": "^5.0.7", + "typescript": "^5.4.5" }, "scripts": { - "postinstall": "talend-yarn-workspace run build:lib", + "postinstall": "talend-yarn-workspace run build:lib && talend-yarn-workspace run build:lib:esm", "pre-release": "talend-yarn-workspace run pre-release", "start": "yarn workspace @talend/ui-playground run start", "start-storybook": "yarn workspace @talend/ui-storybook-one run start", @@ -38,6 +38,7 @@ "prepare": "husky install" }, "resolutions": { + "**/ace-builds": "1.10.1", "**/cypress": "^13.6.0", "**/@types/react": "^18.2.7", "**/@types/react-dom": "^18.2.7", @@ -66,7 +67,8 @@ ] }, "dependencies": { - "@types/react": "^18.2.43", - "@types/react-dom": "^18.2.17" + "@types/react": "^18.2.7", + "@types/react-dom": "^18.2.7", + "cypress": "^13.6.0" } } diff --git a/packages/a11y/CHANGELOG.md b/packages/a11y/CHANGELOG.md index b97cdc2287d..39765241792 100644 --- a/packages/a11y/CHANGELOG.md +++ b/packages/a11y/CHANGELOG.md @@ -1,5 +1,45 @@ # @talend/react-a11y +## 4.0.1 + +### Patch Changes + +- f321a0d: Remove unused tsconfig.esm.json (initially added to use TSC but we stay with babel at the end) +- Updated dependencies [f321a0d] + - @talend/utils@3.2.2 + +## 4.0.0 + +### Major Changes + +- c3750a1: chore: upgrade dependencies + + Major upgrade for all packages that have a peerDependency on react or react-dom. Those packages now ask for react@18 and react-dom@18. + +### Patch Changes + +- Updated dependencies [c3750a1] + - @talend/utils@3.2.0 + +## 3.1.0 + +### Minor Changes + +- 3bd16fc: Add support to ESM + +### Patch Changes + +- Updated dependencies [3bd16fc] + - @talend/utils@3.1.0 + +## 3.0.1 + +### Patch Changes + +- 1abc22f: chore: upgrade dependencies +- Updated dependencies [1abc22f] + - @talend/utils@3.0.4 + ## 3.0.0 ### Major Changes diff --git a/packages/a11y/package.json b/packages/a11y/package.json index e804f4da3df..f83b59f97bf 100644 --- a/packages/a11y/package.json +++ b/packages/a11y/package.json @@ -5,8 +5,16 @@ "mainSrc": "src/index.js", "license": "Apache-2.0", "types": "./lib/index.d.ts", + "module": "./lib-esm/index.js", + "exports": { + ".": { + "import": "./lib-esm/index.js", + "require": "./lib/index.js" + } + }, "scripts": { "build:lib": "talend-scripts build", + "build:lib:esm": "talend-scripts build --esm", "test": "talend-scripts test", "lint": "talend-scripts lint" }, @@ -24,30 +32,30 @@ "url": "https://github.com/Talend/ui.git" }, "dependencies": { - "@talend/utils": "^3.0.0" + "@talend/utils": "^3.2.2" }, "devDependencies": { - "@talend/eslint-config": "^13.0.2", - "@talend/eslint-plugin": "^1.1.0", - "@talend/scripts-core": "^16.3.2", - "@talend/scripts-config-typescript": "^11.2.0", - "@testing-library/react": "^14.1.2", - "@testing-library/user-event": "^14.5.1", + "@talend/eslint-config": "^13.2.0", + "@talend/eslint-plugin": "^1.3.0", + "@talend/scripts-core": "^16.5.1", + "@talend/scripts-config-typescript": "^11.3.0", + "@testing-library/react": "^14.3.1", + "@testing-library/user-event": "^14.5.2", "@types/date-fns": "^2.6.0", - "@types/jest": "^29.5.11", - "@types/react": "^18.2.43", - "@types/react-dom": "^18.2.17", - "date-fns": "^3.0.0", + "@types/jest": "^29.5.12", + "@types/react": "^18.3.3", + "@types/react-dom": "^18.3.0", + "date-fns": "^3.6.0", "jest-in-case": "^1.0.2", - "react": "^18.2.0", - "react-dom": "^18.2.0" + "react": "^18.3.1", + "react-dom": "^18.3.1" }, "peerDependencies": { - "react": ">= 16.14.0", - "react-dom": ">= 16.14.0" + "react": "^18.3.1", + "react-dom": "^18.3.1" }, "publishConfig": { "access": "public" }, - "version": "3.0.0" + "version": "4.0.1" } diff --git a/packages/assets-api/CHANGELOG.md b/packages/assets-api/CHANGELOG.md index 0ff2dfb2b5b..5c5d1d37b3f 100644 --- a/packages/assets-api/CHANGELOG.md +++ b/packages/assets-api/CHANGELOG.md @@ -1,5 +1,31 @@ # @talend/assets-api +## 1.5.1 + +### Patch Changes + +- f321a0d: Remove unused tsconfig.esm.json (initially added to use TSC but we stay with babel at the end) + +## 1.5.0 + +### Minor Changes + +- c3750a1: chore: upgrade dependencies + + Major upgrade for all packages that have a peerDependency on react or react-dom. Those packages now ask for react@18 and react-dom@18. + +## 1.4.0 + +### Minor Changes + +- 3bd16fc: Add support to ESM + +## 1.3.2 + +### Patch Changes + +- 1abc22f: chore: upgrade dependencies + ## 1.3.1 ### Patch Changes diff --git a/packages/assets-api/package.json b/packages/assets-api/package.json index e7720f02caf..1438509fb9d 100644 --- a/packages/assets-api/package.json +++ b/packages/assets-api/package.json @@ -3,11 +3,18 @@ "description": "A set of API designed to access assets using CDN", "types": "lib/index.d.ts", "main": "lib/index.js", - "mainSrc": "src/index.ts", + "module": "./lib-esm/index.js", + "exports": { + ".": { + "import": "./lib-esm/index.js", + "require": "./lib/index.js" + } + }, "license": "Apache-2.0", "scripts": { "pre-release": "talend-scripts build --umd && talend-scripts build --umd --dev", "build:lib": "talend-scripts build", + "build:lib:esm": "talend-scripts build --esm", "start": "echo nothing to start", "test": "talend-scripts test", "test:watch": "talend-scripts test --watch", @@ -28,18 +35,18 @@ }, "dependencies": {}, "devDependencies": { - "@talend/babel-plugin-import-from-index": "^1.6.1", - "@talend/eslint-config": "^13.0.2", - "@talend/eslint-plugin": "^1.1.0", - "@talend/scripts-core": "^16.3.2", - "@talend/scripts-config-react-webpack": "^16.3.3", - "@talend/scripts-config-typescript": "^11.2.0", + "@talend/babel-plugin-import-from-index": "^1.8.0", + "@talend/eslint-config": "^13.2.0", + "@talend/eslint-plugin": "^1.3.0", + "@talend/scripts-core": "^16.5.1", + "@talend/scripts-config-react-webpack": "^16.8.0", + "@talend/scripts-config-typescript": "^11.3.0", "@types/node": "^6.14.13", - "@types/jest": "^29.5.11", + "@types/jest": "^29.5.12", "read-pkg-up": "^7.0.1" }, "publishConfig": { "access": "public" }, - "version": "1.3.1" + "version": "1.5.1" } diff --git a/packages/cmf-cqrs/CHANGELOG.md b/packages/cmf-cqrs/CHANGELOG.md index 223bcc55c94..9ab9f957109 100644 --- a/packages/cmf-cqrs/CHANGELOG.md +++ b/packages/cmf-cqrs/CHANGELOG.md @@ -1,5 +1,35 @@ # @talend/react-cmf-cqrs +## 11.0.0 + +### Major Changes + +- c3750a1: chore: upgrade dependencies + + Major upgrade for all packages that have a peerDependency on react or react-dom. Those packages now ask for react@18 and react-dom@18. + +### Patch Changes + +- Updated dependencies [c3750a1] + - @talend/react-cmf@10.0.0 + - @talend/utils@3.2.0 + +## 10.1.4 + +### Patch Changes + +- Updated dependencies [e48ae5f] + - @talend/react-cmf@9.0.0 + +## 10.1.3 + +### Patch Changes + +- 1abc22f: chore: upgrade dependencies +- Updated dependencies [1abc22f] + - @talend/utils@3.0.4 + - @talend/react-cmf@8.4.1 + ## 10.1.2 ### Patch Changes diff --git a/packages/cmf-cqrs/package.json b/packages/cmf-cqrs/package.json index 5107083e9b1..579af4e7c8f 100644 --- a/packages/cmf-cqrs/package.json +++ b/packages/cmf-cqrs/package.json @@ -32,33 +32,33 @@ }, "homepage": "https://github.com/Talend/ui/cmf-cqrs#readme", "dependencies": { - "@talend/react-cmf": "^8.3.3", - "@talend/utils": "^3.0.0", + "@talend/react-cmf": "^10.0.0", + "@talend/utils": "^3.2.0", "immutable": "^3.8.2", - "redux-saga": "^1.2.3" + "redux-saga": "^1.3.0" }, "devDependencies": { - "@talend/eslint-config": "^13.0.2", - "@talend/eslint-plugin": "^1.1.0", - "@talend/scripts-core": "^16.3.2", - "@talend/scripts-config-babel": "^13.2.1", - "@talend/scripts-config-react-webpack": "^16.4.2", - "@talend/scripts-config-typescript": "^11.2.0", - "@testing-library/react": "^14.1.2", + "@talend/eslint-config": "^13.2.0", + "@talend/eslint-plugin": "^1.3.0", + "@talend/scripts-core": "^16.5.0", + "@talend/scripts-config-babel": "^13.5.0", + "@talend/scripts-config-react-webpack": "^16.8.0", + "@talend/scripts-config-typescript": "^11.3.0", + "@testing-library/react": "^14.3.1", "@testing-library/react-hooks": "^8.0.1", "mock-socket": "^9.3.1", "prop-types": "^15.8.1", - "react": "^18.2.0", - "react-dom": "^18.2.0", + "react": "^18.3.1", + "react-dom": "^18.3.1", "redux-mock-store": "^1.5.4" }, "peerDependencies": { "prop-types": "^15.5.10", - "react": ">= 16.14.0", - "react-dom": ">= 16.14.0" + "react": "^18.3.1", + "react-dom": "^18.3.1" }, "publishConfig": { "access": "public" }, - "version": "10.1.2" + "version": "11.0.0" } diff --git a/packages/cmf-router/CHANGELOG.md b/packages/cmf-router/CHANGELOG.md index ba4c72aee91..148391f5f16 100644 --- a/packages/cmf-router/CHANGELOG.md +++ b/packages/cmf-router/CHANGELOG.md @@ -1,5 +1,52 @@ # Changelog +## 7.0.1 + +### Patch Changes + +- f321a0d: Remove unused tsconfig.esm.json (initially added to use TSC but we stay with babel at the end) +- Updated dependencies [f321a0d] + - @talend/react-cmf@10.0.1 + +## 7.0.0 + +### Major Changes + +- c3750a1: chore: upgrade dependencies + + Major upgrade for all packages that have a peerDependency on react or react-dom. Those packages now ask for react@18 and react-dom@18. + +### Patch Changes + +- Updated dependencies [c3750a1] + - @talend/react-cmf@10.0.0 + +## 6.2.0 + +### Minor Changes + +- 3bd16fc: Add support to ESM + +### Patch Changes + +- Updated dependencies [3bd16fc] + - @talend/react-cmf@9.1.0 + +## 6.1.3 + +### Patch Changes + +- Updated dependencies [e48ae5f] + - @talend/react-cmf@9.0.0 + +## 6.1.2 + +### Patch Changes + +- 1abc22f: chore: upgrade dependencies +- Updated dependencies [1abc22f] + - @talend/react-cmf@8.4.1 + ## 6.1.1 ### Patch Changes diff --git a/packages/cmf-router/package.json b/packages/cmf-router/package.json index c674e5ef96d..f085dbce927 100644 --- a/packages/cmf-router/package.json +++ b/packages/cmf-router/package.json @@ -1,13 +1,21 @@ { "name": "@talend/react-cmf-router", - "version": "6.1.1", + "version": "7.0.1", "description": "", "main": "lib/index.js", + "module": "./lib-esm/index.js", + "exports": { + ".": { + "import": "./lib-esm/index.js", + "require": "./lib/index.js" + } + }, "author": "Talend Frontend (http://www.talend.com)", "license": "Apache-2.0", "scripts": { "build:dev": "talend-scripts build --umd --dev", "build:prod": "talend-scripts build --umd --prod", + "build:lib:esm": "talend-scripts build --esm", "pre-release": "yarn build:dev && yarn build:prod", "build:lib": "talend-scripts build", "start": "echo nothing to start", @@ -17,30 +25,31 @@ "lint": "talend-scripts lint" }, "dependencies": { - "@talend/react-cmf": "^8.3.1", + "@talend/react-cmf": "^10.0.1", "connected-react-router": "^6.9.3", "history": "^5.3.0", "lodash": "^4.17.21", - "path-to-regexp": "^6.2.1", + "path-to-regexp": "^6.2.2", "prop-types": "^15.8.1", "react-redux": "^7.2.9", "react-router": "~6.3.0", "react-router-dom": "~6.3.0", - "redux-saga": "^1.2.3" + "redux-saga": "^1.3.0" }, "peerDependencies": { - "react": ">= 16.14.0", - "react-dom": ">= 16.14.0" + "react": "^18.3.1", + "react-dom": "^18.3.1" }, "devDependencies": { "@redux-saga/testing-utils": "^1.1.5", - "@talend/eslint-config": "^13.0.2", - "@talend/eslint-plugin": "^1.1.0", - "@talend/scripts-core": "^16.3.2", - "@talend/scripts-config-babel": "^13.2.1", - "@talend/scripts-config-react-webpack": "^16.3.3", - "react": "^18.2.0", - "react-dom": "^18.2.0", + "@talend/eslint-config": "^13.2.0", + "@talend/eslint-plugin": "^1.3.0", + "@talend/scripts-core": "^16.5.1", + "@talend/scripts-config-babel": "^13.5.0", + "@talend/scripts-config-react-webpack": "^16.8.0", + "@talend/scripts-config-typescript": "^11.3.0", + "react": "^18.3.1", + "react-dom": "^18.3.1", "redux-saga-tester": "^1.0.874" }, "publishConfig": { diff --git a/packages/cmf-router/tsconfig.json b/packages/cmf-router/tsconfig.json new file mode 100644 index 00000000000..3405e576ec1 --- /dev/null +++ b/packages/cmf-router/tsconfig.json @@ -0,0 +1,4 @@ +{ + "extends": "@talend/scripts-config-typescript/tsconfig.json", + "include": ["src/**/*"] +} diff --git a/packages/cmf/CHANGELOG.md b/packages/cmf/CHANGELOG.md index 83b361723ab..20ae1a83af9 100644 --- a/packages/cmf/CHANGELOG.md +++ b/packages/cmf/CHANGELOG.md @@ -1,5 +1,59 @@ # @talend/react-cmf +## 10.0.1 + +### Patch Changes + +- f321a0d: Remove unused tsconfig.esm.json (initially added to use TSC but we stay with babel at the end) +- Updated dependencies [f321a0d] + - @talend/utils@3.2.2 + +## 10.0.0 + +### Major Changes + +- c3750a1: chore: upgrade dependencies + + Major upgrade for all packages that have a peerDependency on react or react-dom. Those packages now ask for react@18 and react-dom@18. + +### Patch Changes + +- Updated dependencies [c3750a1] + - @talend/scripts-cmf@1.3.0 + - @talend/utils@3.2.0 + +## 9.1.0 + +### Minor Changes + +- 3bd16fc: Add support to ESM + +### Patch Changes + +- Updated dependencies [3bd16fc] + - @talend/utils@3.1.0 + +## 9.0.0 + +### Major Changes + +- e48ae5f: chore(TMC-27581): security issue in redux storage decorator filter + +## 8.4.2 + +### Patch Changes + +- d332ab1: Fix imports and typing + +## 8.4.1 + +### Patch Changes + +- 1abc22f: chore: upgrade dependencies +- Updated dependencies [1abc22f] + - @talend/scripts-cmf@1.2.4 + - @talend/utils@3.0.4 + ## 8.4.0 ### Minor Changes diff --git a/packages/cmf/__tests__/reduxstorage/reduxLocalStorage.test.js b/packages/cmf/__tests__/reduxstorage/reduxLocalStorage.test.js deleted file mode 100644 index b5d84d87c8f..00000000000 --- a/packages/cmf/__tests__/reduxstorage/reduxLocalStorage.test.js +++ /dev/null @@ -1,57 +0,0 @@ -import reduxLocalStorage from '../../src/reduxstorage/reduxLocalStorage'; - -describe('reduxLocalStorage', () => { - // eslint-disable-next-line no-console - const originalLog = console; - beforeEach(() => { - // eslint-disable-next-line no-console - global.console = { - warn: jest.fn(), - log: jest.fn(), - }; - }); - afterEach( () => { - // eslint-disable-next-line no-console - global.console = originalLog; - }); - it('should expose API', () => { - expect(typeof reduxLocalStorage.loadInitialState).toBe('function'); - expect(typeof reduxLocalStorage.saveOnReload).toBe('function'); - }); - it('should saveOnReload listen the beforeunload event', () => { - const original = window.addEventListener; - const cstate = { foo: 'bar' }; - const listener = jest.fn(); - window.addEventListener = listener; - reduxLocalStorage.saveOnReload({ - engine: { - save: state => state, - }, - store: { - getState: () => cstate, - }, - }); - window.addEventListener = original; - expect(listener).toHaveBeenCalled(); - }); - it('should loadInitialState', done => { - const content = '{"cmf":{"components":{"SidePanel":{"default":{"toggle":true}}}}}'; - window.localStorage.setItem('data-streams-redux', content); - reduxLocalStorage - .loadInitialState({ - key: 'data-streams-redux', - whitelist: [['cmf', 'components', 'SidePanel'], ['cmf', 'components', 'Container(Form)']], - }) - .then( - storage => { - expect( - storage.initialState.cmf.components.getIn(['SidePanel', 'default', 'toggle']), - ).toBe(true); - done(); - }, - error => { - throw new Error(error); - }, - ); - }); -}); diff --git a/packages/cmf/package.json b/packages/cmf/package.json index e443a043aa6..0423ebff16d 100644 --- a/packages/cmf/package.json +++ b/packages/cmf/package.json @@ -4,9 +4,21 @@ "main": "lib/index.js", "mainSrc": "src/index.js", "license": "Apache-2.0", + "module": "./lib-esm/index.js", + "exports": { + ".": { + "import": "./lib-esm/index.js", + "require": "./lib/index.js" + }, + "./lib/*": { + "import": "./lib-esm/*", + "require": "./lib/*" + } + }, "scripts": { "build:dev": "talend-scripts build --umd --dev", "build:prod": "talend-scripts build --umd --prod", + "build:lib:esm": "talend-scripts build --esm", "pre-release": "yarn build:dev && yarn build:prod", "build:lib": "talend-scripts build", "start": "echo nothing to start", @@ -32,8 +44,8 @@ "url": "https://github.com/Talend/ui.git" }, "dependencies": { - "@talend/scripts-cmf": "^1.2.3", - "@talend/utils": "^3.0.0", + "@talend/scripts-cmf": "^1.3.0", + "@talend/utils": "^3.2.2", "commander": "^6.2.1", "hoist-non-react-statics": "^3.3.2", "immutable": "^3.8.2", @@ -47,36 +59,33 @@ "redux": "^4.2.1", "redux-batched-actions": "^0.5.0", "redux-batched-subscribe": "^0.1.6", - "redux-saga": "^1.2.3", - "redux-storage": "^4.1.2", - "redux-storage-decorator-filter": "^1.1.8", - "redux-storage-decorator-immutablejs": "^1.0.4", - "redux-storage-engine-localstorage": "^1.1.4", + "redux-saga": "^1.3.0", "redux-thunk": "^2.4.2" }, "devDependencies": { "@redux-saga/testing-utils": "^1.1.5", - "@talend/eslint-config": "^13.0.2", - "@talend/eslint-plugin": "^1.1.0", - "@talend/scripts-core": "^16.3.2", - "@talend/scripts-config-babel": "^13.3.0", - "@talend/scripts-config-jest": "^14.0.1", - "@talend/scripts-config-react-webpack": "^16.4.2", - "@testing-library/react": "^14.1.2", + "@talend/eslint-config": "^13.2.0", + "@talend/eslint-plugin": "^1.3.0", + "@talend/scripts-config-typescript": "^11.3.0", + "@talend/scripts-core": "^16.5.1", + "@talend/scripts-config-babel": "^13.5.0", + "@talend/scripts-config-jest": "^14.1.0", + "@talend/scripts-config-react-webpack": "^16.8.0", + "@testing-library/react": "^14.3.1", "jest-in-case": "^1.0.2", - "jsdoc": "^4.0.2", + "jsdoc": "^4.0.3", "node-fetch": "^2.7.0", - "react": "^18.2.0", - "react-dom": "^18.2.0", + "react": "^18.3.1", + "react-dom": "^18.3.1", "redux-mock-store": "^1.5.4", "redux-saga-tester": "^1.0.874" }, "peerDependencies": { - "react": ">= 16.14.0", - "react-dom": ">= 16.14.0" + "react": "^18.3.1", + "react-dom": "^18.3.1" }, "publishConfig": { "access": "public" }, - "version": "8.4.0" + "version": "10.0.1" } diff --git a/packages/cmf/src/bootstrap.js b/packages/cmf/src/bootstrap.js index 4b32a171b8c..d652a584bb7 100644 --- a/packages/cmf/src/bootstrap.js +++ b/packages/cmf/src/bootstrap.js @@ -1,23 +1,24 @@ import ReactDOM from 'react-dom/client'; -import createSagaMiddleware from 'redux-saga'; + +import { compose } from 'redux'; import { batchedSubscribe } from 'redux-batched-subscribe'; +import createSagaMiddleware from 'redux-saga'; import { spawn } from 'redux-saga/effects'; -import compose from 'redux'; -import App from './App'; import actionCreator from './actionCreator'; import actions from './actions'; +import App from './App'; import { assertTypeOf } from './assert'; +import cmfModule from './cmfModule'; import component from './component'; +import { handleSagaComponent } from './components/Saga'; import expression from './expression'; +import interceptors from './httpInterceptors'; import onError from './onError'; -import storeAPI from './store'; +import { registerInternals } from './register'; import registry from './registry'; import sagas from './sagas'; -import { registerInternals } from './register'; -import cmfModule from './cmfModule'; -import interceptors from './httpInterceptors'; -import { handleSagaComponent } from './components/Saga'; +import storeAPI from './store'; export const bactchedSubscribe = batchedSubscribe(notify => { requestAnimationFrame(notify); diff --git a/packages/cmf/src/bootstrap.md b/packages/cmf/src/bootstrap.md index 9e75ad476c8..293597fa8dd 100644 --- a/packages/cmf/src/bootstrap.md +++ b/packages/cmf/src/bootstrap.md @@ -6,6 +6,7 @@ Quick start: ```javascript import cmf from '@talend/react-cmf'; + import components from './components'; import sagas from './sagas'; @@ -51,8 +52,8 @@ For that CMF expose an API to let you merge your settings: ```javascript import cmf from '@talend/react-cmf'; - import containersModule from '@talend/react-containers'; + import components from './components'; import saga from './saga'; import sagas from './sagas'; @@ -65,10 +66,6 @@ cmf.boostrap({ }); ``` -## How to setup store using localStorage ? - -We provide a [simple API for that](./localStorage.md). - ## onError The error handling is well described in it's own [documentation page](./onError.md). @@ -85,8 +82,8 @@ If you are using ngreact and you want to leverage cmf you must set the `render` ```javascript import cmf from '@talend/react-cmf'; - import containersModule from '@talend/react-containers'; + import components from './components'; import saga from './saga'; import sagas from './sagas'; diff --git a/packages/cmf/src/index.js b/packages/cmf/src/index.js index b7021ea3939..147cd642ffa 100644 --- a/packages/cmf/src/index.js +++ b/packages/cmf/src/index.js @@ -1,40 +1,36 @@ /** * @module react-cmf */ - -import actions from './actions'; +import * as mock from './mock'; +// DEPRECATED APIs +import action from './action'; import actionCreator from './actionCreator'; - +import actions from './actions'; +import App from './App'; import bootstrap from './bootstrap'; import cmfConnect from './cmfConnect'; import cmfModule from './cmfModule'; import component from './component'; -import ConnectedDispatcher from './Dispatcher'; import ErrorBoundary from './components/ErrorBoundary/ErrorBoundary.component'; -import { Saga, CmfRegisteredSaga } from './components/Saga'; +import { CmfRegisteredSaga, Saga } from './components/Saga'; +import componentState from './componentState'; +import constants from './constant'; +import ConnectedDispatcher from './Dispatcher'; import expression from './expression'; import expressions from './expressions'; import Inject from './Inject.component'; -import matchPath from './matchPath'; -import sagas from './sagas'; -import selectors from './selectors'; -import settings from './settings'; import localStorage from './localStorage'; +import matchPath from './matchPath'; +import middlewares from './middlewares'; import onError from './onError'; -import reduxStorage from './reduxstorage'; -import * as mock from './mock'; -import { useCMFContext } from './useContext'; - -// DEPRECATED APIs -import action from './action'; -import App from './App'; import reducers from './reducers'; import registry from './registry'; import RegistryProvider from './RegistryProvider'; +import sagas from './sagas'; +import selectors from './selectors'; +import settings from './settings'; import store from './store'; -import middlewares from './middlewares'; -import componentState from './componentState'; -import constants from './constant'; +import { useCMFContext } from './useContext'; const Dispatcher = ConnectedDispatcher; const getErrorMiddleware = middlewares.error; @@ -54,7 +50,6 @@ export { ErrorBoundary, Inject, mock, - reduxStorage, sagas, selectors, // DEPRECATED diff --git a/packages/cmf/src/localStorage.md b/packages/cmf/src/localStorage.md deleted file mode 100644 index 2bb4da7bc52..00000000000 --- a/packages/cmf/src/localStorage.md +++ /dev/null @@ -1,22 +0,0 @@ -# setup localStorage with CMF - -You can use this API to setup your redux state using localStorage. - -```javascript -import cmf from '@talend/react-cmf'; - -const localStorageKey = 'myApp-v1'; -const preloadedState = cmf.localStorage.getState(localStorageKey); -const storeCallback = cmf.localStorage.getStoreCallback(localStorageKey, [ - ['cmf', 'components', 'Container(List)', 'foo'], - ['cmf', 'components', 'Container(SidePanel)'], -]); - -cmf.bootstrap({ - preloadedState, - storeCallback, -}); -``` - -From now the redux-storage api provided in CMF is DEPRECATED. -It will be removed in the next major release. diff --git a/packages/cmf/src/reduxstorage/index.js b/packages/cmf/src/reduxstorage/index.js deleted file mode 100644 index 3cd934df835..00000000000 --- a/packages/cmf/src/reduxstorage/index.js +++ /dev/null @@ -1,9 +0,0 @@ -/** - * This is a CMF plugin that let you configure your store - */ - -import * as reduxLocalStorage from './reduxLocalStorage'; - -export default { - localStorage: reduxLocalStorage, -}; diff --git a/packages/cmf/src/reduxstorage/redux-storage-decorator-immutablejs.js b/packages/cmf/src/reduxstorage/redux-storage-decorator-immutablejs.js deleted file mode 100644 index addca173f7d..00000000000 --- a/packages/cmf/src/reduxstorage/redux-storage-decorator-immutablejs.js +++ /dev/null @@ -1,29 +0,0 @@ -// FIXME: should be contribution -import { fromJS } from 'immutable'; - -export default (engine, whitelist = []) => ({ - ...engine, - - load() { - if (process.env.NODE_ENV !== 'production') { - // eslint-disable-next-line no-console - console.warn('DEPRECATED: this API will be removed in the next major release'); - } - return engine.load().then(result => { - whitelist.forEach(keys => { - if (typeof keys === 'string') { - keys = [keys]; // eslint-disable-line no-param-reassign - } - let tmp = result; - keys.forEach((key, index) => { - if (tmp && index === keys.length - 1) { - tmp[key] = fromJS(tmp[key]); - } else if (tmp) { - tmp = tmp[key]; - } - }); - }); - return result; - }); - }, -}); diff --git a/packages/cmf/src/reduxstorage/reduxLocalStorage.js b/packages/cmf/src/reduxstorage/reduxLocalStorage.js deleted file mode 100644 index 501430258a0..00000000000 --- a/packages/cmf/src/reduxstorage/reduxLocalStorage.js +++ /dev/null @@ -1,63 +0,0 @@ -import * as storage from 'redux-storage'; -import createEngine from 'redux-storage-engine-localstorage'; -import filter from 'redux-storage-decorator-filter'; -import immutablejs from './redux-storage-decorator-immutablejs'; - -const CMF_IMMUTABLE_PATHS = [ - ['cmf', 'components'], - ['cmf', 'collections'], -]; - -const CMF_MIDDLEWARE_BLACK_LIST = ['@@INIT', '@@router/LOCATION_CHANGE']; - -function loadInitialState(options = {}) { - if (process.env.NODE_ENV !== 'production') { - // eslint-disable-next-line no-console - console.warn('DEPRECATED: this API will be removed in the next major release'); - } - const { - key, - immutables = [], - whitelist = [], - blacklist = [], - middlewareWhitelist = [], - middlewareBlacklist = [], - } = options; - let engine = createEngine(key); - engine = filter(engine, whitelist, blacklist); - - const ipaths = []; - CMF_IMMUTABLE_PATHS.forEach(p => ipaths.push(p)); - immutables.forEach(p => ipaths.push(p)); - engine = immutablejs(engine, ipaths); - - const mblack = []; - CMF_MIDDLEWARE_BLACK_LIST.forEach(m => mblack.push(m)); - middlewareBlacklist.forEach(m => mblack.push(m)); - const storageMiddleware = storage.createMiddleware(engine, mblack, middlewareWhitelist); - - return storage - .createLoader(engine)({ - dispatch: () => {}, - }) - .then(initialState => ({ - initialState, - storageMiddleware, - engine, - })); -} - -function saveOnReload({ engine, store }) { - if (process.env.NODE_ENV !== 'production') { - // eslint-disable-next-line no-console - console.warn('DEPRECATED: this API will be removed in the next major release'); - } - window.addEventListener('beforeunload', () => { - engine.save(store.getState()); // localstorage is sync - }); -} - -export default { - loadInitialState, - saveOnReload, -}; diff --git a/packages/cmf/tsconfig.json b/packages/cmf/tsconfig.json new file mode 100644 index 00000000000..3405e576ec1 --- /dev/null +++ b/packages/cmf/tsconfig.json @@ -0,0 +1,4 @@ +{ + "extends": "@talend/scripts-config-typescript/tsconfig.json", + "include": ["src/**/*"] +} diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 2d185e1a931..cf8dd408649 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -1,5 +1,156 @@ # @talend/react-components +## 17.1.2 + +### Patch Changes + +- 7ebe036: Revert "fix: Fix exports to allow deep imports" +- Updated dependencies [7ebe036] + - @talend/utils@3.2.3 + +## 17.1.1 + +### Patch Changes + +- f321a0d: Remove unused tsconfig.esm.json (initially added to use TSC but we stay with babel at the end) +- Updated dependencies [f321a0d] + - @talend/design-tokens@3.4.1 + - @talend/react-bootstrap@3.0.2 + - @talend/assets-api@1.5.1 + - @talend/icons@7.10.2 + - @talend/utils@3.2.2 + - @talend/react-a11y@4.0.1 + +## 17.1.0 + +### Minor Changes + +- ca1734c: feat(TMC-28838/tags): add beta styled tag to the Tag component + +## 17.0.1 + +### Patch Changes + +- 94aad7d: fix: Fix exports to allow deep imports +- Updated dependencies [94aad7d] + - @talend/utils@3.2.1 + +## 17.0.0 + +### Major Changes + +- c3750a1: chore: upgrade dependencies + + Major upgrade for all packages that have a peerDependency on react or react-dom. Those packages now ask for react@18 and react-dom@18. + +### Patch Changes + +- Updated dependencies [c3750a1] + - @talend/design-system@11.0.0 + - @talend/react-bootstrap@3.0.0 + - @talend/react-a11y@4.0.0 + - @talend/design-tokens@3.4.0 + - @talend/assets-api@1.5.0 + - @talend/icons@7.10.0 + - @talend/bootstrap-theme@9.2.0 + - @talend/utils@3.2.0 + +## 16.2.0 + +### Minor Changes + +- 3bd16fc: Add support to ESM + +### Patch Changes + +- ced37a2: fix(TMC-27619/cellDate): enable tz offset conversion with sourceTz +- Updated dependencies [3bd16fc] +- Updated dependencies [3bd16fc] +- Updated dependencies [d053412] +- Updated dependencies [9b66a09] + - @talend/design-tokens@3.3.0 + - @talend/react-bootstrap@2.3.0 + - @talend/assets-api@1.4.0 + - @talend/icons@7.9.0 + - @talend/utils@3.1.0 + - @talend/react-a11y@3.1.0 + - @talend/bootstrap-theme@9.1.4 + +## 16.1.4 + +### Patch Changes + +- 50801bd: Reset currentStep to 0 when tour is reopened + +## 16.1.3 + +### Patch Changes + +- 003c7a4: fix(TDC-7452/Tour): Fix tour is changing to first step when closing + +## 16.1.2 + +### Patch Changes + +- b502805: Fix translation for date range + +## 16.1.1 + +### Patch Changes + +- a10f800: Fix: remove tilde for @use in sass files +- ceb4faf: Timer Picker overlay will now close when time is valid using keyboard +- f546896: Fix: improve call of use in sass files + fix ts lint +- Updated dependencies [a10f800] +- Updated dependencies [e521344] +- Updated dependencies [f546896] + - @talend/bootstrap-theme@9.1.3 + - @talend/icons@7.7.2 + +## 16.1.0 + +### Minor Changes + +- 8bf0dd5: feat(DGT-342): Moved QualityBar and RatioBar components to the Design System and use those components on @talend/react-components + +### Patch Changes + +- 9225a2d: TMC-27480 - Fix wording on invalid date range for date time picker + +## 16.0.1 + +### Patch Changes + +- 6a69c4c: Fix Drawer z-index that could prevent headerbar to display sub-menu + +## 16.0.0 + +### Patch Changes + +- Updated dependencies [ce93823] + - @talend/design-system@10.0.0 + +## 15.3.2 + +### Patch Changes + +- 2d7861a: fix: tooltip alignement for buttons in list component + +## 15.3.1 + +### Patch Changes + +- 1abc22f: chore: upgrade dependencies +- 5cedaf1: TMC-26238 - Fix JSON object viewer style on safari with word-break +- Updated dependencies [1abc22f] + - @talend/design-tokens@3.1.1 + - @talend/react-bootstrap@2.2.2 + - @talend/assets-api@1.3.2 + - @talend/icons@7.7.1 + - @talend/bootstrap-theme@9.1.1 + - @talend/utils@3.0.4 + - @talend/react-a11y@3.0.1 + ## 15.3.0 ### Minor Changes diff --git a/packages/components/package.json b/packages/components/package.json index ff77ef7f364..66408b9d102 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -2,13 +2,24 @@ "name": "@talend/react-components", "description": "Set of react components.", "main": "lib/index.js", - "mainSrc": "src/index.js", + "module": "./lib-esm/index.js", + "exports": { + "./lib/*": { + "import": "./lib-esm/*/index.js", + "require": "./lib/*/index.js" + }, + ".": { + "import": "./lib-esm/index.js", + "require": "./lib/index.js" + } + }, "license": "Apache-2.0", "scripts": { "build:dev": "talend-scripts build --umd --dev", "build:prod": "talend-scripts build --umd --prod", "pre-release": "yarn build:dev && yarn build:prod", "build:lib": "talend-scripts build && yarn run tsc", + "build:lib:esm": "talend-scripts build --esm", "watch": "talend-scripts build --watch", "tsc": "tsc --emitDeclarationOnly --project ./tsconfig.json --outDir ./types", "test": "cross-env TZ=UTC talend-scripts test", @@ -35,24 +46,24 @@ }, "dependencies": { "@popperjs/core": "^2.11.8", - "@talend/assets-api": "^1.3.1", - "@talend/bootstrap-theme": "^9.1.0", - "@talend/design-tokens": "^3.1.0", - "@talend/icons": "^7.7.0", - "@talend/react-a11y": "^3.0.0", - "@talend/react-bootstrap": "^2.2.1", - "@talend/utils": "^3.0.2", + "@talend/assets-api": "^1.5.1", + "@talend/bootstrap-theme": "^9.2.0", + "@talend/design-tokens": "^3.4.1", + "@talend/icons": "^7.10.2", + "@talend/react-a11y": "^4.0.1", + "@talend/react-bootstrap": "^3.0.2", + "@talend/utils": "^3.2.3", "ally.js": "^1.4.1", - "classnames": "^2.3.2", - "d3": "^7.8.5", - "date-fns": "^3.0.0", + "classnames": "^2.5.1", + "d3": "^7.9.0", + "date-fns": "^3.6.0", "dom-helpers": "^3.4.0", "focus-outline-manager": "^1.0.2", "immutable": "^3.8.2", "invariant": "^2.2.4", "lodash": "^4.17.21", "memoize-one": "^6.0.0", - "rc-slider": "^10.5.0", + "rc-slider": "^10.6.2", "react-autowhatever": "10.2.0", "react-debounce-input": "^3.3.0", "react-draggable": "^4.4.6", @@ -61,57 +72,57 @@ "react-is": "^17.0.2", "react-popper": "^2.3.0", "react-transition-group": "^2.9.0", - "react-use": "^17.4.1", + "react-use": "^17.5.0", "react-virtualized": "^9.22.5", - "reactour": "^1.19.2", - "recharts": "^2.10.3", - "simplebar": "^6.2.5", + "reactour": "^1.19.4", + "recharts": "^2.12.7", + "simplebar": "^6.2.6", "simplebar-react": "^2.4.3", "styled-components": "^5.3.11", "warning": "^3.0.0" }, "devDependencies": { - "@storybook/addon-actions": "^7.6.4", - "@talend/bootstrap-theme": "^9.1.0", - "@talend/design-system": "^9.7.2", - "@talend/eslint-config": "^13.0.2", - "@talend/eslint-plugin": "^1.1.0", + "@storybook/addon-actions": "^7.6.19", + "@talend/bootstrap-theme": "^9.2.0", + "@talend/design-system": "^11.0.5", + "@talend/eslint-config": "^13.2.0", + "@talend/eslint-plugin": "^1.3.0", "@talend/locales-design-system": "^7.15.1", - "@talend/locales-tui-components": "^11.4.5", - "@talend/scripts-core": "^16.3.2", - "@talend/scripts-config-babel": "^13.3.0", - "@talend/scripts-config-react-webpack": "^16.5.0", - "@talend/scripts-config-storybook-lib": "^5.3.0", - "@talend/scripts-config-typescript": "^11.2.0", - "@testing-library/jest-dom": "^6.1.5", - "@testing-library/react": "^14.1.2", - "@testing-library/user-event": "^14.5.1", + "@talend/locales-tui-components": "^16.0.1", + "@talend/scripts-config-babel": "^13.5.0", + "@talend/scripts-config-react-webpack": "^16.8.0", + "@talend/scripts-config-storybook-lib": "^5.4.0", + "@talend/scripts-config-typescript": "^11.3.0", + "@talend/scripts-core": "^16.5.1", + "@testing-library/jest-dom": "^6.4.6", + "@testing-library/react": "^14.3.1", "@testing-library/react-hooks": "^8.0.1", + "@testing-library/user-event": "^14.5.2", "@types/classnames": "^2.3.1", "@types/d3": "^7.4.3", - "@types/jest": "^29.5.11", - "@types/lodash": "^4.14.202", - "@types/prop-types": "^15.7.11", - "@types/react": "^18.2.43", - "@types/react-dom": "^18.2.17", + "@types/jest": "^29.5.12", + "@types/lodash": "^4.17.5", + "@types/prop-types": "^15.7.12", + "@types/react": "^18.3.3", + "@types/react-dom": "^18.3.0", "cross-env": "^7.0.3", - "i18next": "^23.7.7", + "i18next": "^23.11.5", "jest-in-case": "^1.0.2", "jsdom": "^20.0.3", "prop-types": "^15.8.1", - "react": "^18.2.0", + "react": "^18.3.1", "react-a11y": "^0.3.4", - "react-dom": "^18.2.0", - "react-router-dom": "~6.3.0", + "react-dom": "^18.3.1", "react-i18next": "^13.5.0", - "react-test-renderer": "^18.2.0" + "react-router-dom": "~6.3.0", + "react-test-renderer": "^18.3.1" }, "peerDependencies": { - "@talend/design-system": "^9.0.0", - "i18next": "^23.7.7", + "@talend/design-system": "^11.0.0", + "i18next": "^23.11.5", "prop-types": "^15.5.10", - "react": ">= 16.14.0", - "react-dom": ">= 16.14.0", + "react": "^18.3.1", + "react-dom": "^18.3.1", "react-i18next": "^13.5.0" }, "resolutions": { @@ -120,5 +131,5 @@ "publishConfig": { "access": "public" }, - "version": "15.3.0" + "version": "17.1.2" } diff --git a/packages/components/src/AboutDialog/AboutDialog.module.scss b/packages/components/src/AboutDialog/AboutDialog.module.scss index a647d91f629..1c3c28db2db 100644 --- a/packages/components/src/AboutDialog/AboutDialog.module.scss +++ b/packages/components/src/AboutDialog/AboutDialog.module.scss @@ -1,4 +1,4 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; .about-dialog { :global(.modal-body) { diff --git a/packages/components/src/ActionBar/ActionBar.module.scss b/packages/components/src/ActionBar/ActionBar.module.scss index 308b9e092c5..b02e2278f1c 100644 --- a/packages/components/src/ActionBar/ActionBar.module.scss +++ b/packages/components/src/ActionBar/ActionBar.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; $tc-action-bar-margin: $padding-small $padding-large $padding-small 0 !default; diff --git a/packages/components/src/ActionIntercom/Intercom.module.scss b/packages/components/src/ActionIntercom/Intercom.module.scss index 80c9e60d7a9..da362c3cf94 100644 --- a/packages/components/src/ActionIntercom/Intercom.module.scss +++ b/packages/components/src/ActionIntercom/Intercom.module.scss @@ -1,4 +1,4 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; .tc-intercom { position: relative; diff --git a/packages/components/src/ActionList/ActionList.module.scss b/packages/components/src/ActionList/ActionList.module.scss index e8837f0f9c3..e9fc5c40801 100644 --- a/packages/components/src/ActionList/ActionList.module.scss +++ b/packages/components/src/ActionList/ActionList.module.scss @@ -1,6 +1,6 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/_tokens.scss' as tokens; +@use '@talend/design-tokens/lib/_tokens' as tokens; //// /// Action list diff --git a/packages/components/src/Actions/ActionButton/ActionButton.module.scss b/packages/components/src/Actions/ActionButton/ActionButton.module.scss index 387f7565418..6782335ffb3 100644 --- a/packages/components/src/Actions/ActionButton/ActionButton.module.scss +++ b/packages/components/src/Actions/ActionButton/ActionButton.module.scss @@ -1,4 +1,4 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; .tc-action-button-skeleton-circle { margin-left: $padding-smaller; diff --git a/packages/components/src/Actions/ActionButton/Button.stories.module.scss b/packages/components/src/Actions/ActionButton/Button.stories.module.scss index d7d990e47d9..3fd0c0f1084 100644 --- a/packages/components/src/Actions/ActionButton/Button.stories.module.scss +++ b/packages/components/src/Actions/ActionButton/Button.stories.module.scss @@ -1,4 +1,4 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; .storybook-wrapped-action { margin-top: 200px; diff --git a/packages/components/src/Actions/ActionDropdown/ActionDropdown.module.scss b/packages/components/src/Actions/ActionDropdown/ActionDropdown.module.scss index 5da439426f3..667e751462e 100644 --- a/packages/components/src/Actions/ActionDropdown/ActionDropdown.module.scss +++ b/packages/components/src/Actions/ActionDropdown/ActionDropdown.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; $tc-dropdown-loader-padding: $padding-small !default; $tc-dropdown-button-right-padding: 0.5rem; diff --git a/packages/components/src/Actions/ActionFile/ActionFile.module.scss b/packages/components/src/Actions/ActionFile/ActionFile.module.scss index 80648e99e59..dd69b9957e6 100644 --- a/packages/components/src/Actions/ActionFile/ActionFile.module.scss +++ b/packages/components/src/Actions/ActionFile/ActionFile.module.scss @@ -1,4 +1,4 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; input[type='file'] { &.action-file-input:focus + label { diff --git a/packages/components/src/Actions/ActionIconToggle/ActionIconToggle.module.scss b/packages/components/src/Actions/ActionIconToggle/ActionIconToggle.module.scss index 7748f0abc4d..7e21b53751b 100644 --- a/packages/components/src/Actions/ActionIconToggle/ActionIconToggle.module.scss +++ b/packages/components/src/Actions/ActionIconToggle/ActionIconToggle.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; $tc-icon-toggle-size: 1.5rem !default; $tc-icon-toggle-icon-size: $svg-sm-size !default; diff --git a/packages/components/src/Actions/ActionSplitDropdown/ActionSplitDropdown.module.scss b/packages/components/src/Actions/ActionSplitDropdown/ActionSplitDropdown.module.scss index 922351c1a49..abfda93cd94 100644 --- a/packages/components/src/Actions/ActionSplitDropdown/ActionSplitDropdown.module.scss +++ b/packages/components/src/Actions/ActionSplitDropdown/ActionSplitDropdown.module.scss @@ -1,4 +1,4 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; .tc-split-dropdown { li>a { diff --git a/packages/components/src/AppGuidedTour/AppGuidedTour.component.js b/packages/components/src/AppGuidedTour/AppGuidedTour.component.js index a64bbd22b51..7c56e1601c5 100644 --- a/packages/components/src/AppGuidedTour/AppGuidedTour.component.js +++ b/packages/components/src/AppGuidedTour/AppGuidedTour.component.js @@ -1,11 +1,13 @@ -import { useState, useEffect } from 'react'; -import PropTypes from 'prop-types'; -import useLocalStorage from 'react-use/lib/useLocalStorage'; +import { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; +import useLocalStorage from 'react-use/lib/useLocalStorage'; + +import PropTypes from 'prop-types'; + +import I18N_DOMAIN_COMPONENTS from '../constants'; import GuidedTour from '../GuidedTour'; -import Toggle from '../Toggle'; import Stepper from '../Stepper'; -import I18N_DOMAIN_COMPONENTS from '../constants'; +import Toggle from '../Toggle'; import DemoContentStep from './DemoContentStep.component'; const DEMO_CONTENT_STEP_ID = 1; @@ -28,6 +30,12 @@ function AppGuidedTour({ const [isAlreadyViewed, setIsAlreadyViewed] = useLocalStorage(localStorageKey, false); const [importDemoContent, setImportDemoContent] = useState(demoContentSteps && !isAlreadyViewed); const [currentStep, setCurrentStep] = useState(0); + // Reset currentStep to 0 when tour is opened + useEffect(() => { + if (isOpen) { + setCurrentStep(0); + } + }, [isOpen]); const isNavigationDisabled = importDemoContent && @@ -73,8 +81,10 @@ function AppGuidedTour({ onRequestClose={() => { onRequestClose(); setIsAlreadyViewed(true); - setCurrentStep(0); - setImportDemoContent(false); + if (importDemoContent) { + setImportDemoContent(false); + setCurrentStep(Math.max(0, currentStep - 1)); + } }} steps={[ { diff --git a/packages/components/src/AppGuidedTour/AppGuidedTour.test.js b/packages/components/src/AppGuidedTour/AppGuidedTour.test.js index 920f5d18ecb..bd23bb3c34b 100644 --- a/packages/components/src/AppGuidedTour/AppGuidedTour.test.js +++ b/packages/components/src/AppGuidedTour/AppGuidedTour.test.js @@ -95,4 +95,21 @@ describe('AppGuidedTour', () => { ); expect(screen.queryByText('Import demo content')).not.toBeInTheDocument(); }); + it('Should stay on the last page when finished', async () => { + const user = userEvent.setup(); + const steps = [ + { + content: { + header: 'Header', + body: () => 'Last page', + }, + }, + ]; + render(); + expect(screen.queryByText(/Last page/i)).not.toBeInTheDocument(); + const nextBtn = document.querySelector('button[data-tour-elem="right-arrow"]'); + await user.click(nextBtn); + await user.click(screen.getByText('Let me try')); + expect(screen.queryByText(/Last page/i)).toBeInTheDocument(); + }); }); diff --git a/packages/components/src/AppGuidedTour/DemoContentStep.module.scss b/packages/components/src/AppGuidedTour/DemoContentStep.module.scss index f559858a510..745b1c2e335 100644 --- a/packages/components/src/AppGuidedTour/DemoContentStep.module.scss +++ b/packages/components/src/AppGuidedTour/DemoContentStep.module.scss @@ -1,4 +1,4 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; .info { white-space: pre; diff --git a/packages/components/src/AppSwitcher/AppSwitcher.module.scss b/packages/components/src/AppSwitcher/AppSwitcher.module.scss index 9e86b8bd15d..8701418c6f9 100644 --- a/packages/components/src/AppSwitcher/AppSwitcher.module.scss +++ b/packages/components/src/AppSwitcher/AppSwitcher.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; .tc-app-switcher { :global(.tc-svg-icon:first-child) { diff --git a/packages/components/src/Badge/Badge.module.scss b/packages/components/src/Badge/Badge.module.scss index a358c4056c2..883dffefcab 100644 --- a/packages/components/src/Badge/Badge.module.scss +++ b/packages/components/src/Badge/Badge.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; $tc-badge-large-label-font-size: 0.875rem !default; $tc-badge-large-label-font-weight: normal !default; diff --git a/packages/components/src/Breadcrumbs/Breadcrumbs.module.scss b/packages/components/src/Breadcrumbs/Breadcrumbs.module.scss index ce89774837d..32b5c63a1e5 100644 --- a/packages/components/src/Breadcrumbs/Breadcrumbs.module.scss +++ b/packages/components/src/Breadcrumbs/Breadcrumbs.module.scss @@ -1,4 +1,4 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; //// /// Breadcrumb diff --git a/packages/components/src/CircularProgress/CircularProgress.module.scss b/packages/components/src/CircularProgress/CircularProgress.module.scss index b508b3ea57e..b681843c9f8 100644 --- a/packages/components/src/CircularProgress/CircularProgress.module.scss +++ b/packages/components/src/CircularProgress/CircularProgress.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; // CircularProgress styles $tc-circular-progress-light-fill: tokens.$coral-color-neutral-text-inverted !default; diff --git a/packages/components/src/CollapsiblePanel/CollapsiblePanel.module.scss b/packages/components/src/CollapsiblePanel/CollapsiblePanel.module.scss index fac14d1990b..f4e08c2c4f4 100644 --- a/packages/components/src/CollapsiblePanel/CollapsiblePanel.module.scss +++ b/packages/components/src/CollapsiblePanel/CollapsiblePanel.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; $tc-collapsible-panel-padding-smaller: $padding-smaller !default; $tc-collapsible-panel-padding-normal: $padding-normal !default; diff --git a/packages/components/src/DataViewer/Badges/LengthBadge/LengthBadge.module.scss b/packages/components/src/DataViewer/Badges/LengthBadge/LengthBadge.module.scss index db8c830f330..0e483c08d1e 100644 --- a/packages/components/src/DataViewer/Badges/LengthBadge/LengthBadge.module.scss +++ b/packages/components/src/DataViewer/Badges/LengthBadge/LengthBadge.module.scss @@ -1,4 +1,4 @@ -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .tc-length-badge { background-color: tokens.$coral-color-neutral-background-medium; diff --git a/packages/components/src/DataViewer/Core/Tree/Tree.module.scss b/packages/components/src/DataViewer/Core/Tree/Tree.module.scss index 9fe43b9e9b1..3827f782d16 100644 --- a/packages/components/src/DataViewer/Core/Tree/Tree.module.scss +++ b/packages/components/src/DataViewer/Core/Tree/Tree.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; :global(.tc-model .tc-tree) { overflow: auto; diff --git a/packages/components/src/DataViewer/Headers/TreeHeader/TreeHeader.module.scss b/packages/components/src/DataViewer/Headers/TreeHeader/TreeHeader.module.scss index d56f17d7096..ebf33cb81af 100644 --- a/packages/components/src/DataViewer/Headers/TreeHeader/TreeHeader.module.scss +++ b/packages/components/src/DataViewer/Headers/TreeHeader/TreeHeader.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; $default-height: 2.5rem !default; diff --git a/packages/components/src/DataViewer/Icons/TreeBranchIcon/TreeBranchIcon.module.scss b/packages/components/src/DataViewer/Icons/TreeBranchIcon/TreeBranchIcon.module.scss index 6ad38e2de61..65ff9d14fe6 100644 --- a/packages/components/src/DataViewer/Icons/TreeBranchIcon/TreeBranchIcon.module.scss +++ b/packages/components/src/DataViewer/Icons/TreeBranchIcon/TreeBranchIcon.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; .tc-tree-branch-icon { display: flex; diff --git a/packages/components/src/DataViewer/ModelViewer/ModelViewer.module.scss b/packages/components/src/DataViewer/ModelViewer/ModelViewer.module.scss index 92954c28c56..630ab68beba 100644 --- a/packages/components/src/DataViewer/ModelViewer/ModelViewer.module.scss +++ b/packages/components/src/DataViewer/ModelViewer/ModelViewer.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; @import '~@talend/bootstrap-theme/src/theme/animation'; $model-node-height: 1.875rem !default; diff --git a/packages/components/src/DataViewer/RecordsViewer/RecordsViewer.module.scss b/packages/components/src/DataViewer/RecordsViewer/RecordsViewer.module.scss index 2880ac95ac3..5f08021d447 100644 --- a/packages/components/src/DataViewer/RecordsViewer/RecordsViewer.module.scss +++ b/packages/components/src/DataViewer/RecordsViewer/RecordsViewer.module.scss @@ -1,6 +1,6 @@ /* stylelint-disable declaration-no-important */ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; $hightlight-height: 1.375rem !default; $records-node-height: $hightlight-height !default; diff --git a/packages/components/src/DataViewer/Text/SimpleTextKeyValue/DefaultValueRenderer.module.scss b/packages/components/src/DataViewer/Text/SimpleTextKeyValue/DefaultValueRenderer.module.scss index 1ff3eb7f721..8f2ae7efde6 100644 --- a/packages/components/src/DataViewer/Text/SimpleTextKeyValue/DefaultValueRenderer.module.scss +++ b/packages/components/src/DataViewer/Text/SimpleTextKeyValue/DefaultValueRenderer.module.scss @@ -1,4 +1,4 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; .td-default-cell { height: 100%; diff --git a/packages/components/src/DataViewer/Text/SimpleTextKeyValue/SimpleTextKeyValue.module.scss b/packages/components/src/DataViewer/Text/SimpleTextKeyValue/SimpleTextKeyValue.module.scss index 93b7a128c47..5f735eb2dda 100644 --- a/packages/components/src/DataViewer/Text/SimpleTextKeyValue/SimpleTextKeyValue.module.scss +++ b/packages/components/src/DataViewer/Text/SimpleTextKeyValue/SimpleTextKeyValue.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; .tc-simple-text { display: flex; diff --git a/packages/components/src/DataViewer/Virtualized/VirtualizedTree/VirtualizedTree.module.scss b/packages/components/src/DataViewer/Virtualized/VirtualizedTree/VirtualizedTree.module.scss index 67da66aa1e6..c9052dd4693 100644 --- a/packages/components/src/DataViewer/Virtualized/VirtualizedTree/VirtualizedTree.module.scss +++ b/packages/components/src/DataViewer/Virtualized/VirtualizedTree/VirtualizedTree.module.scss @@ -1,4 +1,4 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; .tc-virtualized-tree { flex: 1 1 auto; diff --git a/packages/components/src/DataViewer/theme.module.scss b/packages/components/src/DataViewer/theme.module.scss index 78c2ae3a15f..ade64350cda 100644 --- a/packages/components/src/DataViewer/theme.module.scss +++ b/packages/components/src/DataViewer/theme.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; $tc-layout-skeleton-width: 6rem !default; $tc-layout-skeleton-height: 6rem !default; diff --git a/packages/components/src/Datalist/Datalist.module.scss b/packages/components/src/Datalist/Datalist.module.scss index 452123280f1..32fce61d2ea 100644 --- a/packages/components/src/Datalist/Datalist.module.scss +++ b/packages/components/src/Datalist/Datalist.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; $tc-datalist-items-max-height: 20rem !default; $tc-datalist-item-height: 2.5rem !default; diff --git a/packages/components/src/DateTimePickers/InputDateTimePicker/InputDateTimePicker.module.scss b/packages/components/src/DateTimePickers/InputDateTimePicker/InputDateTimePicker.module.scss index f870b65aedb..290f2b9fe75 100644 --- a/packages/components/src/DateTimePickers/InputDateTimePicker/InputDateTimePicker.module.scss +++ b/packages/components/src/DateTimePickers/InputDateTimePicker/InputDateTimePicker.module.scss @@ -1,4 +1,4 @@ -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; @import '../shared/styles/mixins'; diff --git a/packages/components/src/DateTimePickers/InputTimePicker/InputTimePicker.module.scss b/packages/components/src/DateTimePickers/InputTimePicker/InputTimePicker.module.scss index 807493a6140..959ab04bae2 100644 --- a/packages/components/src/DateTimePickers/InputTimePicker/InputTimePicker.module.scss +++ b/packages/components/src/DateTimePickers/InputTimePicker/InputTimePicker.module.scss @@ -1,4 +1,4 @@ -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; @import '../shared/styles/mixins'; $tc-timepicker-width: 5rem !default; diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/DateTime/Validation/Validation.module.scss b/packages/components/src/DateTimePickers/LegacyDateTimePickers/DateTime/Validation/Validation.module.scss index a180071ebfe..0f4ecc92d3d 100644 --- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/DateTime/Validation/Validation.module.scss +++ b/packages/components/src/DateTimePickers/LegacyDateTimePickers/DateTime/Validation/Validation.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; .validation { display: flex; diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/InputDateTimePicker/InputDateTimePicker.module.scss b/packages/components/src/DateTimePickers/LegacyDateTimePickers/InputDateTimePicker/InputDateTimePicker.module.scss index 6c80ea95cbb..ed28311ccfc 100644 --- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/InputDateTimePicker/InputDateTimePicker.module.scss +++ b/packages/components/src/DateTimePickers/LegacyDateTimePickers/InputDateTimePicker/InputDateTimePicker.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; $tc-datetimepicker-width: 19.375rem !default; $tc-datetimepicker-box-shadow: 0 0.0625rem 0.1875rem 0 rgba(0, 0, 0, 0.2) !default; diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DatePicker/DatePicker.module.scss b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DatePicker/DatePicker.module.scss index bb442501623..6c44619f69c 100644 --- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DatePicker/DatePicker.module.scss +++ b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DatePicker/DatePicker.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; @import '../../shared/styles/mixins'; @import '../../shared/styles/variables'; diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DateTimePicker/DateTimePicker.module.scss b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DateTimePicker/DateTimePicker.module.scss index b7e00b3eee2..9c41872a390 100644 --- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DateTimePicker/DateTimePicker.module.scss +++ b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/DateTimePicker/DateTimePicker.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; @import '../../shared/styles/mixins'; @import '../../shared/styles/variables'; diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/MonthPicker/MonthPicker.module.scss b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/MonthPicker/MonthPicker.module.scss index 3cd0dcd6a56..d99d8e4fdb9 100644 --- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/MonthPicker/MonthPicker.module.scss +++ b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/MonthPicker/MonthPicker.module.scss @@ -1,4 +1,4 @@ -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; @import '../../shared/styles/mixins'; @import '../../shared/styles/variables'; diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/TimePicker/TimePicker.module.scss b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/TimePicker/TimePicker.module.scss index b603ee7c2be..88a69166e76 100644 --- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/TimePicker/TimePicker.module.scss +++ b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/TimePicker/TimePicker.module.scss @@ -1,7 +1,7 @@ /* stylelint-disable color-hex-case */ /* stylelint-disable selector-no-qualifying-type */ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; @import '../../shared/styles/mixins'; diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/shared/styles/mixins.scss b/packages/components/src/DateTimePickers/LegacyDateTimePickers/shared/styles/mixins.scss index 838e50aae57..852909af45d 100644 --- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/shared/styles/mixins.scss +++ b/packages/components/src/DateTimePickers/LegacyDateTimePickers/shared/styles/mixins.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; @mixin nav-action { padding: 0; diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/shared/styles/variables.scss b/packages/components/src/DateTimePickers/LegacyDateTimePickers/shared/styles/variables.scss index 573e96695d0..14ab7cce76c 100644 --- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/shared/styles/variables.scss +++ b/packages/components/src/DateTimePickers/LegacyDateTimePickers/shared/styles/variables.scss @@ -1,3 +1,3 @@ -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; $border-default: 0.0625rem solid tokens.$coral-color-neutral-border !default; diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/DateTimeView/DateTimeView.module.scss b/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/DateTimeView/DateTimeView.module.scss index 1ece7b92d07..8fd30947c8c 100644 --- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/DateTimeView/DateTimeView.module.scss +++ b/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/DateTimeView/DateTimeView.module.scss @@ -1,4 +1,4 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; @import '../../shared/styles/variables'; diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/HeaderTitle/HeaderTitle.module.scss b/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/HeaderTitle/HeaderTitle.module.scss index 1c34e04b237..1c3e7cf19a5 100644 --- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/HeaderTitle/HeaderTitle.module.scss +++ b/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/HeaderTitle/HeaderTitle.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; @import '../../shared/styles/mixins'; .common { diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/ViewLayout/ViewLayout.module.scss b/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/ViewLayout/ViewLayout.module.scss index a3fce3798b8..0f226804f6a 100644 --- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/ViewLayout/ViewLayout.module.scss +++ b/packages/components/src/DateTimePickers/LegacyDateTimePickers/views/ViewLayout/ViewLayout.module.scss @@ -1,4 +1,4 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; .container { height: 100%; diff --git a/packages/components/src/DateTimePickers/hooks/useInputPickerHandlers.js b/packages/components/src/DateTimePickers/hooks/useInputPickerHandlers.js index 543b1005870..cbaa75f1e02 100644 --- a/packages/components/src/DateTimePickers/hooks/useInputPickerHandlers.js +++ b/packages/components/src/DateTimePickers/hooks/useInputPickerHandlers.js @@ -33,6 +33,15 @@ export default function useInputPickerHandlers({ setPicked(true); closePicker(); } + + if (['INPUT'].includes(payload.origin)) { + if (!payload.errorMessage) { + inputRef.focus(); + closePicker(); + } else { + openPicker(); + } + } } function onClick() { diff --git a/packages/components/src/DateTimePickers/pickers/CalendarPicker/CalendarPicker.module.scss b/packages/components/src/DateTimePickers/pickers/CalendarPicker/CalendarPicker.module.scss index 2be1c376115..1219f6e3b53 100644 --- a/packages/components/src/DateTimePickers/pickers/CalendarPicker/CalendarPicker.module.scss +++ b/packages/components/src/DateTimePickers/pickers/CalendarPicker/CalendarPicker.module.scss @@ -1,4 +1,4 @@ -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .container { color: tokens.$coral-color-neutral-text-weak; diff --git a/packages/components/src/DateTimePickers/pickers/DatePicker/DatePicker.module.scss b/packages/components/src/DateTimePickers/pickers/DatePicker/DatePicker.module.scss index bab448e491c..addb1933103 100644 --- a/packages/components/src/DateTimePickers/pickers/DatePicker/DatePicker.module.scss +++ b/packages/components/src/DateTimePickers/pickers/DatePicker/DatePicker.module.scss @@ -1,4 +1,4 @@ -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; @import '../../shared/styles/mixins'; diff --git a/packages/components/src/DateTimePickers/pickers/MonthPicker/MonthPicker.module.scss b/packages/components/src/DateTimePickers/pickers/MonthPicker/MonthPicker.module.scss index 0e3120a2055..a656d53c6bc 100644 --- a/packages/components/src/DateTimePickers/pickers/MonthPicker/MonthPicker.module.scss +++ b/packages/components/src/DateTimePickers/pickers/MonthPicker/MonthPicker.module.scss @@ -1,4 +1,4 @@ -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; @import '../../shared/styles/mixins'; @import '../../shared/styles/variables'; diff --git a/packages/components/src/DateTimePickers/pickers/TimePicker/TimePicker.module.scss b/packages/components/src/DateTimePickers/pickers/TimePicker/TimePicker.module.scss index 0007fd51f4c..3e894d4d5e5 100644 --- a/packages/components/src/DateTimePickers/pickers/TimePicker/TimePicker.module.scss +++ b/packages/components/src/DateTimePickers/pickers/TimePicker/TimePicker.module.scss @@ -1,4 +1,4 @@ -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .container { padding: tokens.$coral-spacing-xxs 0; diff --git a/packages/components/src/DateTimePickers/shared/error-messages.js b/packages/components/src/DateTimePickers/shared/error-messages.js index a122ffdad53..36a97580da6 100644 --- a/packages/components/src/DateTimePickers/shared/error-messages.js +++ b/packages/components/src/DateTimePickers/shared/error-messages.js @@ -1,8 +1,7 @@ import getDefaultT from '../../translate'; -const t = getDefaultT(); - export default function getErrorMessage(key) { + const t = getDefaultT(); switch (key) { case 'INVALID_HOUR_EMPTY': return t('INVALID_HOUR_EMPTY', { defaultValue: 'Hour is required' }); @@ -42,7 +41,7 @@ export default function getErrorMessage(key) { return t('DATETIME_INVALID_FORMAT', { defaultValue: 'Datetime is invalid' }); case 'INVALID_RANGE_START_AFTER_END': return t('INVALID_RANGE_START_AFTER_END', { - defaultValue: 'Start date should comes before end date', + defaultValue: 'Start date should come before end date', }); case 'INVALID_SELECTED_DATE': return t('INVALID_SELECTED_DATE', { diff --git a/packages/components/src/DateTimePickers/shared/styles/mixins.scss b/packages/components/src/DateTimePickers/shared/styles/mixins.scss index aebe4b5b074..91a8cb45493 100644 --- a/packages/components/src/DateTimePickers/shared/styles/mixins.scss +++ b/packages/components/src/DateTimePickers/shared/styles/mixins.scss @@ -1,4 +1,4 @@ -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; @import './variables'; diff --git a/packages/components/src/DateTimePickers/shared/styles/variables.scss b/packages/components/src/DateTimePickers/shared/styles/variables.scss index 573e96695d0..14ab7cce76c 100644 --- a/packages/components/src/DateTimePickers/shared/styles/variables.scss +++ b/packages/components/src/DateTimePickers/shared/styles/variables.scss @@ -1,3 +1,3 @@ -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; $border-default: 0.0625rem solid tokens.$coral-color-neutral-border !default; diff --git a/packages/components/src/DateTimePickers/views/HeaderTitle/HeaderTitle.module.scss b/packages/components/src/DateTimePickers/views/HeaderTitle/HeaderTitle.module.scss index d812287ae1c..0fa1598ff0c 100644 --- a/packages/components/src/DateTimePickers/views/HeaderTitle/HeaderTitle.module.scss +++ b/packages/components/src/DateTimePickers/views/HeaderTitle/HeaderTitle.module.scss @@ -1,4 +1,4 @@ -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .common { display: flex; diff --git a/packages/components/src/DateTimePickers/views/ViewLayout/ViewLayout.module.scss b/packages/components/src/DateTimePickers/views/ViewLayout/ViewLayout.module.scss index 923d3d1138f..0b21a729a3d 100644 --- a/packages/components/src/DateTimePickers/views/ViewLayout/ViewLayout.module.scss +++ b/packages/components/src/DateTimePickers/views/ViewLayout/ViewLayout.module.scss @@ -1,4 +1,4 @@ -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .container { height: 100%; diff --git a/packages/components/src/Dialog/Dialog.scss b/packages/components/src/Dialog/Dialog.scss index 60b3576b074..acba5c0bdd7 100644 --- a/packages/components/src/Dialog/Dialog.scss +++ b/packages/components/src/Dialog/Dialog.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; :global { .modal-flex .modal-body { diff --git a/packages/components/src/Drawer/Drawer.module.scss b/packages/components/src/Drawer/Drawer.module.scss index 297cba56330..ec026fe8478 100644 --- a/packages/components/src/Drawer/Drawer.module.scss +++ b/packages/components/src/Drawer/Drawer.module.scss @@ -1,4 +1,4 @@ -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; $tc-drawer-bgcolor: tokens.$coral-color-neutral-background !default; $tc-drawer-padding: tokens.$coral-spacing-m !default; @@ -8,7 +8,6 @@ $tc-drawer-header-background: tokens.$coral-color-neutral-background !default; $tc-drawer-header-border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak !default; $tc-drawer-tabs-background: tokens.$coral-color-accent-background-weak !default; $tc-action-bar-background-color: tokens.$coral-color-neutral-background-medium !default; -$tc-drawer-z-index: tokens.$coral-elevation-layer-standard-front !default; .tc-drawer { pointer-events: all; @@ -19,7 +18,6 @@ $tc-drawer-z-index: tokens.$coral-elevation-layer-standard-front !default; right: 0; bottom: 0; width: tokens.$coral-sizing-maximal; - z-index: $tc-drawer-z-index; } @media (min-width: 992px) and (max-width: 1199px) { diff --git a/packages/components/src/EditableText/EditableText.module.scss b/packages/components/src/EditableText/EditableText.module.scss index f282587c180..e74f1c7fe22 100644 --- a/packages/components/src/EditableText/EditableText.module.scss +++ b/packages/components/src/EditableText/EditableText.module.scss @@ -1,4 +1,4 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; @import '~@talend/bootstrap-theme/src/theme/animation'; diff --git a/packages/components/src/EditableText/InlineForm.module.scss b/packages/components/src/EditableText/InlineForm.module.scss index cf65263f13f..76b14fdab8d 100644 --- a/packages/components/src/EditableText/InlineForm.module.scss +++ b/packages/components/src/EditableText/InlineForm.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; @import '~@talend/bootstrap-theme/src/theme/animation'; $tc-icon-editable-text-size: 0.5rem !default; diff --git a/packages/components/src/EditableText/PlainTextTitle.module.scss b/packages/components/src/EditableText/PlainTextTitle.module.scss index a8d00572c3e..70a978a6503 100644 --- a/packages/components/src/EditableText/PlainTextTitle.module.scss +++ b/packages/components/src/EditableText/PlainTextTitle.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; @mixin ellipsis { white-space: nowrap; diff --git a/packages/components/src/Emphasis/Emphasis.module.scss b/packages/components/src/Emphasis/Emphasis.module.scss index 9a8852cdc0e..5a98bf46944 100644 --- a/packages/components/src/Emphasis/Emphasis.module.scss +++ b/packages/components/src/Emphasis/Emphasis.module.scss @@ -1,4 +1,4 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; .highlight { font-weight: $font-weight-semi-bold; diff --git a/packages/components/src/Enumeration/Enumeration.module.scss b/packages/components/src/Enumeration/Enumeration.module.scss index 0f12ee25844..6f8acf4bbb7 100644 --- a/packages/components/src/Enumeration/Enumeration.module.scss +++ b/packages/components/src/Enumeration/Enumeration.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; $tc-enumeration-height: 50vh !default; $tc-enumeration-font-size: 0.875rem !default; diff --git a/packages/components/src/Enumeration/Enumeration.stories.module.scss b/packages/components/src/Enumeration/Enumeration.stories.module.scss index 830bcee1638..aaab49f9758 100644 --- a/packages/components/src/Enumeration/Enumeration.stories.module.scss +++ b/packages/components/src/Enumeration/Enumeration.stories.module.scss @@ -1,4 +1,4 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; .enum-with-class { :global(.tc-enumeration-items) { diff --git a/packages/components/src/Enumeration/Header/Header.module.scss b/packages/components/src/Enumeration/Header/Header.module.scss index 85c56273e9a..4e2726dc98a 100644 --- a/packages/components/src/Enumeration/Header/Header.module.scss +++ b/packages/components/src/Enumeration/Header/Header.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; $tc-enumeration-smaller-padding: $padding-smaller !default; $tc-enumeration-small-padding: $padding-small !default; diff --git a/packages/components/src/Enumeration/Items/EmptyListPlaceholder.module.scss b/packages/components/src/Enumeration/Items/EmptyListPlaceholder.module.scss index de133360a2c..526dcedcec4 100644 --- a/packages/components/src/Enumeration/Items/EmptyListPlaceholder.module.scss +++ b/packages/components/src/Enumeration/Items/EmptyListPlaceholder.module.scss @@ -1,4 +1,4 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; .tc-enumeration-hint { color: $silver; diff --git a/packages/components/src/Enumeration/Items/Item/Item.module.scss b/packages/components/src/Enumeration/Items/Item/Item.module.scss index 9b13876c4ff..514c937c4ee 100644 --- a/packages/components/src/Enumeration/Items/Item/Item.module.scss +++ b/packages/components/src/Enumeration/Items/Item/Item.module.scss @@ -1,6 +1,6 @@ /* stylelint-disable color-hex-case */ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; $tc-enumeration-normal-padding: $padding-normal !default; $tc-enumeration-smaller-padding: $padding-smaller !default; diff --git a/packages/components/src/Enumeration/Items/Items.module.scss b/packages/components/src/Enumeration/Items/Items.module.scss index 899d33ca72d..7443d2a6f99 100644 --- a/packages/components/src/Enumeration/Items/Items.module.scss +++ b/packages/components/src/Enumeration/Items/Items.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; $tc-enumeration-height: 40vh !default; diff --git a/packages/components/src/FilterBar/FilterBar.module.scss b/packages/components/src/FilterBar/FilterBar.module.scss index 658fb032470..a2a26f04f41 100644 --- a/packages/components/src/FilterBar/FilterBar.module.scss +++ b/packages/components/src/FilterBar/FilterBar.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; // Filter styles $tc-filter-bar-width: 250px !default; diff --git a/packages/components/src/FormatValue/FormatValue.module.scss b/packages/components/src/FormatValue/FormatValue.module.scss index 83d8c565bf1..a04ba0f2f10 100644 --- a/packages/components/src/FormatValue/FormatValue.module.scss +++ b/packages/components/src/FormatValue/FormatValue.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; $svg-tab-width: 1.625rem !default; $svg-other-characters: 0.1875rem !default; diff --git a/packages/components/src/GridLayout/Grid.module.scss b/packages/components/src/GridLayout/Grid.module.scss index fc6975001ae..8f8aaa2eb10 100644 --- a/packages/components/src/GridLayout/Grid.module.scss +++ b/packages/components/src/GridLayout/Grid.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; .layout { :global(.react-grid-item) { diff --git a/packages/components/src/GridLayout/Tile/Footer/TileFooter.module.scss b/packages/components/src/GridLayout/Tile/Footer/TileFooter.module.scss index 414d1bc13e4..d8cc89c5640 100644 --- a/packages/components/src/GridLayout/Tile/Footer/TileFooter.module.scss +++ b/packages/components/src/GridLayout/Tile/Footer/TileFooter.module.scss @@ -1,4 +1,4 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; .tc-tile-footer { display: flex; diff --git a/packages/components/src/GridLayout/Tile/Header/TileHeader.module.scss b/packages/components/src/GridLayout/Tile/Header/TileHeader.module.scss index e758daba0e6..f359e9a29d4 100644 --- a/packages/components/src/GridLayout/Tile/Header/TileHeader.module.scss +++ b/packages/components/src/GridLayout/Tile/Header/TileHeader.module.scss @@ -1,4 +1,4 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; .tc-tile-header { display: flex; diff --git a/packages/components/src/GridLayout/Tile/Tile.module.scss b/packages/components/src/GridLayout/Tile/Tile.module.scss index 048eb5b7655..d23f8d1e01b 100644 --- a/packages/components/src/GridLayout/Tile/Tile.module.scss +++ b/packages/components/src/GridLayout/Tile/Tile.module.scss @@ -1,4 +1,4 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; .tc-tile-container { display: flex; diff --git a/packages/components/src/GuidedTour/GuidedTour.module.scss b/packages/components/src/GuidedTour/GuidedTour.module.scss index 62aee9b998b..e50b689cf6b 100644 --- a/packages/components/src/GuidedTour/GuidedTour.module.scss +++ b/packages/components/src/GuidedTour/GuidedTour.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; $tc-guidedtour-accent-color: tokens.$coral-color-accent-text !default; $tc-guidedtour-tooltip-padding: $padding-large !default; diff --git a/packages/components/src/HeaderBar/HeaderBar.module.scss b/packages/components/src/HeaderBar/HeaderBar.module.scss index 1e6967053ed..0a73ae9c267 100644 --- a/packages/components/src/HeaderBar/HeaderBar.module.scss +++ b/packages/components/src/HeaderBar/HeaderBar.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; $tc-headerbar-logo-width: tokens.$coral-sizing-s !default; $tc-headerbar-logo-full-width: 5.3125rem !default; diff --git a/packages/components/src/HttpError/HttpError.module.scss b/packages/components/src/HttpError/HttpError.module.scss index e0de639081f..efa899d1179 100644 --- a/packages/components/src/HttpError/HttpError.module.scss +++ b/packages/components/src/HttpError/HttpError.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; .http-error { position: relative; diff --git a/packages/components/src/JSONSchemaRenderer/JSONSchemaRenderer.module.scss b/packages/components/src/JSONSchemaRenderer/JSONSchemaRenderer.module.scss index 617959b0e43..14dc33d480c 100644 --- a/packages/components/src/JSONSchemaRenderer/JSONSchemaRenderer.module.scss +++ b/packages/components/src/JSONSchemaRenderer/JSONSchemaRenderer.module.scss @@ -1,6 +1,6 @@ /* stylelint-disable selector-no-qualifying-type */ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; .json-schema-renderer { margin-top: $padding-large; diff --git a/packages/components/src/Layout/Layout.module.scss b/packages/components/src/Layout/Layout.module.scss index af6d1cffebd..84a5ea717a1 100644 --- a/packages/components/src/Layout/Layout.module.scss +++ b/packages/components/src/Layout/Layout.module.scss @@ -1,4 +1,4 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; //// /// Layout diff --git a/packages/components/src/Layout/OneColumn/OneColumn.module.scss b/packages/components/src/Layout/OneColumn/OneColumn.module.scss index 563860abd1c..d18afe19d6f 100644 --- a/packages/components/src/Layout/OneColumn/OneColumn.module.scss +++ b/packages/components/src/Layout/OneColumn/OneColumn.module.scss @@ -1,4 +1,4 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; // OneColumn styles diff --git a/packages/components/src/Layout/SkipLinks/SkipLinks.module.scss b/packages/components/src/Layout/SkipLinks/SkipLinks.module.scss index 1b1ca897eeb..25508a85078 100644 --- a/packages/components/src/Layout/SkipLinks/SkipLinks.module.scss +++ b/packages/components/src/Layout/SkipLinks/SkipLinks.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; .tc-skip-links { position: absolute; diff --git a/packages/components/src/Layout/TwoColumns/TwoColumns.module.scss b/packages/components/src/Layout/TwoColumns/TwoColumns.module.scss index b7835acbca1..7e128179d07 100644 --- a/packages/components/src/Layout/TwoColumns/TwoColumns.module.scss +++ b/packages/components/src/Layout/TwoColumns/TwoColumns.module.scss @@ -1,4 +1,4 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; //// /// Layout diff --git a/packages/components/src/List/List.module.scss b/packages/components/src/List/List.module.scss index 4b0cb9f0596..67430b13827 100644 --- a/packages/components/src/List/List.module.scss +++ b/packages/components/src/List/List.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; // List styles diff --git a/packages/components/src/List/ListComposition/DisplayMode/DisplayModeToggle.scss b/packages/components/src/List/ListComposition/DisplayMode/DisplayModeToggle.scss index 0489f319bc3..a57615c147c 100644 --- a/packages/components/src/List/ListComposition/DisplayMode/DisplayModeToggle.scss +++ b/packages/components/src/List/ListComposition/DisplayMode/DisplayModeToggle.scss @@ -1,4 +1,4 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; $tc-display-button-icon-height: 1.5rem; diff --git a/packages/components/src/List/ListComposition/List.module.scss b/packages/components/src/List/ListComposition/List.module.scss index 7fa9f69aa77..b4258c7d68a 100644 --- a/packages/components/src/List/ListComposition/List.module.scss +++ b/packages/components/src/List/ListComposition/List.module.scss @@ -1,4 +1,4 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; .list { display: flex; diff --git a/packages/components/src/List/ListComposition/SortBy/SortBy.module.scss b/packages/components/src/List/ListComposition/SortBy/SortBy.module.scss index 1095445ca0b..2ad72da2f88 100644 --- a/packages/components/src/List/ListComposition/SortBy/SortBy.module.scss +++ b/packages/components/src/List/ListComposition/SortBy/SortBy.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; // SelectSortBy styles $tc-order-chooser-icon-size: 0.375rem !default; diff --git a/packages/components/src/List/ListComposition/Toolbar/ListToolbar.module.scss b/packages/components/src/List/ListComposition/Toolbar/ListToolbar.module.scss index d2951070acc..0587e3f4ddc 100644 --- a/packages/components/src/List/ListComposition/Toolbar/ListToolbar.module.scss +++ b/packages/components/src/List/ListComposition/Toolbar/ListToolbar.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; $tc-toolbar-height: 4.375rem; diff --git a/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooser.module.scss b/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooser.module.scss index 85a76b77b27..72f56f7dfa6 100644 --- a/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooser.module.scss +++ b/packages/components/src/List/Toolbar/ColumnChooserButton/ColumnChooser/ColumnChooser.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; $tc-popover-border-width: 0.0625rem !default; $tc-height: 2.5rem; diff --git a/packages/components/src/List/Toolbar/DisplayModeToggle/DisplayModeToggle.component.js b/packages/components/src/List/Toolbar/DisplayModeToggle/DisplayModeToggle.component.js index 2d3108c2c7f..c57b33b7f1a 100644 --- a/packages/components/src/List/Toolbar/DisplayModeToggle/DisplayModeToggle.component.js +++ b/packages/components/src/List/Toolbar/DisplayModeToggle/DisplayModeToggle.component.js @@ -1,7 +1,10 @@ /* eslint-disable react/display-name */ import { memo } from 'react'; + import PropTypes from 'prop-types'; + import { ButtonIconToggle, StackHorizontal } from '@talend/design-system'; + import getDefaultT from '../../../translate'; import { DISPLAY_MODE } from '../../ListComposition/constants'; @@ -24,6 +27,7 @@ export const DisplayModeActionIcon = memo( li { - padding-top: $padding-smaller; - padding-bottom: $padding-smaller; + padding-top: tokens.$coral-spacing-xxs; + padding-bottom: tokens.$coral-spacing-xxs; border-bottom: 1px solid tokens.$coral-color-neutral-border; } } diff --git a/packages/components/src/ObjectViewer/Table/Table.module.scss b/packages/components/src/ObjectViewer/Table/Table.module.scss index 9c9ab2a83e6..f3ec84bc806 100644 --- a/packages/components/src/ObjectViewer/Table/Table.module.scss +++ b/packages/components/src/ObjectViewer/Table/Table.module.scss @@ -1,41 +1,28 @@ /* stylelint-disable scss/selector-no-redundant-nesting-selector */ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/design-tokens/lib/tokens' as tokens; .table { - font-size: 12px; - - td { - line-height: 25px; - } - .nativevalue { - font-family: $font-family-monospace; - font-size: $font-size-small; + font: tokens.$coral-data-m; color: tokens.$coral-color-neutral-text; padding: 0; } - &:global(.table-hover) > tbody > tr:hover { - font-weight: initial; - } - &:global(.table) > thead > tr { background-color: tokens.$coral-color-accent-background-strong; color: tokens.$coral-color-accent-text-weak; - font-family: 'Source Sans Pro'; & > th { - font-weight: $font-weight-bold; + font: tokens.$coral-heading-s; } & > td { - padding: $padding-smaller; + padding: tokens.$coral-spacing-xxs; } } &:global(.table) > tbody > tr > td { - padding: $padding-smaller; + padding: tokens.$coral-spacing-xxs; :global(.btn) { text-transform: none; @@ -43,7 +30,6 @@ } :global(.btn-link) { - font-family: 'Inconsolata'; font-size: 12px; color: tokens.$coral-color-neutral-text-weak; padding: 0; diff --git a/packages/components/src/OverlayTrigger/OverlayTrigger.module.scss b/packages/components/src/OverlayTrigger/OverlayTrigger.module.scss index 589814f50f8..45b30916510 100644 --- a/packages/components/src/OverlayTrigger/OverlayTrigger.module.scss +++ b/packages/components/src/OverlayTrigger/OverlayTrigger.module.scss @@ -1,4 +1,4 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; .tc-action-button-positionned { position: relative; diff --git a/packages/components/src/PieChart/PieChart.module.scss b/packages/components/src/PieChart/PieChart.module.scss index 31f738c4474..58c25c8476b 100644 --- a/packages/components/src/PieChart/PieChart.module.scss +++ b/packages/components/src/PieChart/PieChart.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; @import '~@talend/bootstrap-theme/src/theme/animation'; $tc-pie-chart-font-size: $font-size-large !default; diff --git a/packages/components/src/Progress/Progress.module.scss b/packages/components/src/Progress/Progress.module.scss index 2984152b2c8..d4e72d94a94 100644 --- a/packages/components/src/Progress/Progress.module.scss +++ b/packages/components/src/Progress/Progress.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; $infinite-indicator-ratio: 3; $infinite-indicator-width: calc(100% / $infinite-indicator-ratio); diff --git a/packages/components/src/QualityBar/QualityBar.component.tsx b/packages/components/src/QualityBar/QualityBar.component.tsx index f165136252d..28839a44db8 100644 --- a/packages/components/src/QualityBar/QualityBar.component.tsx +++ b/packages/components/src/QualityBar/QualityBar.component.tsx @@ -1,100 +1,72 @@ -import type { MouseEvent } from 'react'; +import { useTranslation } from 'react-i18next'; -import { EnrichedQualityType, QualityBarPercentages, QualityCommonProps } from './QualityBar.types'; -import { QualityBarRatioBars } from './QualityBarRatioBars.component'; -import { SplitQualityBar } from './SplitQualityBar.component'; +import { QualityBar as QualityBarDS, type QualityCommonProps } from '@talend/design-system'; + +import I18N_DOMAIN_COMPONENTS from '../constants'; export type QualityBarProps = QualityCommonProps & { - disabled?: boolean; - placeholder?: number; digits?: number; split?: boolean; - onClick?: (e: MouseEvent, data: { type: EnrichedQualityType }) => void; - getDataFeature?: (type: string) => string; }; -/** - * This function round up the percentages to make it to 100% - * based on https://stackoverflow.com/questions/13483430/how-to-make-rounded-percentages-add-up-to-100#answer-13483486 - * @param {number} invalidRaw number of invalid raw - * @param {number} emptyRaw number of empty raw - * @param {number} validRaw number of valid raw - * @param {number} naRaw number of not applicable raw - * @param {number} digits number of digits we want to keep - */ -function getQualityPercentagesRounded( - digits: number, - invalid = 0, - empty = 0, - valid = 0, - na = 0, - placeholder = 0, -): Required { - const output: Required = { - empty: 0, - invalid: 0, - na: 0, - placeholder: 0, - valid: 0, - }; - - let sumValues = 0; - let sumRounded = 0; - const digitMultiplier = Math.pow(10, digits); - const multiplier = 100 * digitMultiplier; - - const total = invalid + empty + valid + na + placeholder; - - sumValues = (invalid * multiplier) / total; - output.invalid = Math.round(sumValues - sumRounded) / digitMultiplier; - sumRounded = Math.round(sumValues); - - sumValues += (empty * multiplier) / total; - output.empty = Math.round(sumValues - sumRounded) / digitMultiplier; - sumRounded = Math.round(sumValues); - - sumValues += (valid * multiplier) / total; - output.valid = Math.round(sumValues - sumRounded) / digitMultiplier; - sumRounded = Math.round(sumValues); - - sumValues += (na * multiplier) / total; - output.na = Math.round(sumValues - sumRounded) / digitMultiplier; - - sumValues += (placeholder * multiplier) / total; - output.placeholder = Math.round(sumValues - sumRounded) / digitMultiplier; - - return output; -} - -export function QualityBar({ +export const QualityBar = ({ valid, invalid, empty, na, placeholder, digits = 1, - split = false, ...rest -}: QualityBarProps) { - const percentages = getQualityPercentagesRounded(digits, invalid, empty, valid, na, placeholder); - return split ? ( - - ) : ( - { + const { t } = useTranslation(I18N_DOMAIN_COMPONENTS); + + const percentages = QualityBarDS.getQualityPercentagesRounded( + digits, + invalid, + empty, + valid, + na, + placeholder, + ); + + return ( + ); -} +}; diff --git a/packages/components/src/QualityBar/QualityBar.stories.tsx b/packages/components/src/QualityBar/QualityBar.stories.tsx index 10b48c5dde4..cbbd8240282 100644 --- a/packages/components/src/QualityBar/QualityBar.stories.tsx +++ b/packages/components/src/QualityBar/QualityBar.stories.tsx @@ -1,4 +1,5 @@ import { action } from '@storybook/addon-actions'; + import { QualityBar } from './QualityBar.component'; export default { diff --git a/packages/components/src/QualityBar/QualityBar.types.ts b/packages/components/src/QualityBar/QualityBar.types.ts deleted file mode 100644 index 4136204b7c2..00000000000 --- a/packages/components/src/QualityBar/QualityBar.types.ts +++ /dev/null @@ -1,19 +0,0 @@ -export enum QualityType { - VALID = 'valid', - INVALID = 'invalid', - EMPTY = 'empty', - NA = 'na', -} - -export type EnrichedQualityType = QualityType | 'placeholder'; - -export type QualityCommonProps = { - valid?: number; - invalid?: number; - empty?: number; - na?: number; -}; - -export type QualityBarPercentages = Required & { - placeholder: number; -}; diff --git a/packages/components/src/QualityBar/QualityRatioBar.component.tsx b/packages/components/src/QualityBar/QualityRatioBar.component.tsx deleted file mode 100644 index fe3b5aa5b74..00000000000 --- a/packages/components/src/QualityBar/QualityRatioBar.component.tsx +++ /dev/null @@ -1,135 +0,0 @@ -import type { MouseEvent } from 'react'; -import { useTranslation } from 'react-i18next'; - -import I18N_DOMAIN_COMPONENTS from '../constants'; -import { RatioBarLine } from '../RatioBar'; -import { getTheme } from '../theme'; -import { EnrichedQualityType, QualityType } from './QualityBar.types'; - -import qualityBarTheme from './QualityRatioBar.module.scss'; - -const theme = getTheme(qualityBarTheme); - -/** - * formatNumber - format a number with a space for the thousand separator - * - * @param {number} value number to format - * @return {string} formated number - * @example - * formatNumber(1200); // return 1 200 - */ -function formatNumber(value?: number) { - if (!value) { - return ''; - } - const parts = value.toString().split('.'); - parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ' '); - return parts.join('.'); -} - -type SpecificQualityBarProps = { - percentage: number; - value: number; - getDataFeature?: (type: EnrichedQualityType) => string; - onClick?: (e: MouseEvent, data: { type: EnrichedQualityType }) => void; -}; - -type QualityRatioBarProps = SpecificQualityBarProps & { - type: EnrichedQualityType; - tooltipLabel?: string; -}; - -function QualityRatioBar({ onClick, type, getDataFeature, ...props }: QualityRatioBarProps) { - const specificProps = { - className: theme('quality-ratio-bar', `quality-ratio-bar--${type}`), - onClick: onClick ? (e: MouseEvent) => onClick(e, { type }) : null, - dataFeature: getDataFeature ? getDataFeature(type) : null, - dataTestId: `quality-bar-${type}`, - }; - - return ; -} - -export function QualityInvalidLine({ percentage, value, ...rest }: SpecificQualityBarProps) { - const { t } = useTranslation(I18N_DOMAIN_COMPONENTS); - - return ( - - ); -} - -export function QualityValidLine({ percentage, value, ...rest }: SpecificQualityBarProps) { - const { t } = useTranslation(I18N_DOMAIN_COMPONENTS); - - return ( - - ); -} - -export function QualityEmptyLine({ percentage, value, ...rest }: SpecificQualityBarProps) { - const { t } = useTranslation(I18N_DOMAIN_COMPONENTS); - - return ( - - ); -} - -export function QualityNotApplicableLine({ percentage, value, ...rest }: SpecificQualityBarProps) { - const { t } = useTranslation(I18N_DOMAIN_COMPONENTS); - - return ( - - ); -} - -export function QualityPlaceholderLine(props: Omit) { - return ; -} diff --git a/packages/components/src/QualityBar/index.ts b/packages/components/src/QualityBar/index.ts index 115aa8fe5d8..8d67359151d 100644 --- a/packages/components/src/QualityBar/index.ts +++ b/packages/components/src/QualityBar/index.ts @@ -1,7 +1,5 @@ -import { QualityBar } from './QualityBar.component'; -import { QualityType } from './QualityBar.types'; +import { QualityType } from '@talend/design-system'; -// @ts-ignore -QualityBar.QualityType = QualityType; +import { QualityBar } from './QualityBar.component'; export { QualityBar, QualityType }; diff --git a/packages/components/src/RadarChart/RadarChart.component.js b/packages/components/src/RadarChart/RadarChart.component.js index 9b800d8b335..b5b2ccec11e 100644 --- a/packages/components/src/RadarChart/RadarChart.component.js +++ b/packages/components/src/RadarChart/RadarChart.component.js @@ -1,16 +1,19 @@ +import PropTypes from 'prop-types'; import { - RadarChart as RechartsRadarChart, + PolarAngleAxis, PolarGrid, PolarRadiusAxis, - Dot as RechartsDot, Radar, - PolarAngleAxis, + Dot as RechartsDot, + RadarChart as RechartsRadarChart, } from 'recharts'; + import tokens from '@talend/design-tokens'; -import PropTypes from 'prop-types'; -import radarChartCssModule from './RadarChart.module.scss'; + import { getTheme } from '../theme'; +import radarChartCssModule from './RadarChart.module.scss'; + const theme = getTheme(radarChartCssModule); /** diff --git a/packages/components/src/RadarChart/RadarChart.module.scss b/packages/components/src/RadarChart/RadarChart.module.scss index 12db652ce3a..ab215fb55de 100644 --- a/packages/components/src/RadarChart/RadarChart.module.scss +++ b/packages/components/src/RadarChart/RadarChart.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; .tc-radar-chart { :global { diff --git a/packages/components/src/RadarChart/__snapshots__/RadarChart.test.js.snap b/packages/components/src/RadarChart/__snapshots__/RadarChart.test.js.snap index 4e2eff377b8..f77bab07160 100644 --- a/packages/components/src/RadarChart/__snapshots__/RadarChart.test.js.snap +++ b/packages/components/src/RadarChart/__snapshots__/RadarChart.test.js.snap @@ -3,7 +3,6 @@ exports[`RadarChart should render a RadarChart 1`] = `
total) { - return { percentage: 100, amount }; - } - - return { percentage: (amount / total) * 100, amount }; -} - -function getEmptyValues(amount, total) { - if (!amount || amount < 0) { - return { percentage: 100, amount: total }; - } - if (amount > total) { - return { percentage: 0, amount: 0 }; - } - - return { percentage: (1 - amount / total) * 100, amount: total - amount }; -} - -function getLabel(amount, errors, total) { - if (!amount && amount !== 0) { - return ( -
- - N/A - -
- ); - } - return ( -
- {amount + errors}/{total} -
- ); -} - -export function RatioBar({ amount, total, errors = 0, hideLabel = false }) { - const filled = getFilledValues(amount, total); - const error = getFilledValues(errors, total); - const empty = getEmptyValues(amount + errors, total); - - return ( - - - - - {!hideLabel && getLabel(amount, errors, total)} - - ); -} - -RatioBar.propTypes = { - amount: PropTypes.number, - errors: PropTypes.number, - total: PropTypes.number.isRequired, - hideLabel: PropTypes.bool, -}; diff --git a/packages/components/src/RatioBar/RatioBar.component.test.js b/packages/components/src/RatioBar/RatioBar.component.test.js deleted file mode 100644 index fbf3a42b20e..00000000000 --- a/packages/components/src/RatioBar/RatioBar.component.test.js +++ /dev/null @@ -1,112 +0,0 @@ -import { render } from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; - -import { RatioBar } from './RatioBar.component'; - -// as this is SVG we need to rely on custom selector -function getCounter() { - return document.querySelector('.tc-ratio-bar-counter'); -} -function getRatioBar() { - return document.querySelector('.tc-ratio-bar'); -} -function getRatioBarLine() { - return document.querySelector('.tc-ratio-bar-line'); -} -function getEmptyLine() { - return document.querySelector('.tc-ratio-bar-line-empty'); -} -function getErrorLine() { - return document.querySelector('.tc-ratio-bar-line-error'); -} -describe('RatioBar', () => { - describe('RatioBar component', () => { - it('should render an empty bar', () => { - // given - const props = { - amount: 0, - total: 12, - }; - // when - const { container } = render(); - // then - expect(container.firstChild).toMatchSnapshot(); - expect(getCounter()).toHaveTextContent('0/12'); - expect(getRatioBar()).toBeVisible(); - expect(getEmptyLine()).toBeVisible(); - expect(getEmptyLine()).toHaveStyle('flex-basis: 100%'); - }); - - it('should render a not applicable chart', () => { - // given - const props = { - amount: null, - total: 12, - }; - // when - render(); - // then - expect(getCounter()).toHaveTextContent('N/A'); - }); - - it('should render an full sized chart', async () => { - const user = userEvent.setup(); - - // given - const props = { - amount: 12, - total: 12, - }; - // when - render(); - // then - await user.tab(); - expect(getCounter()).toHaveTextContent('12/12'); - expect(getRatioBarLine()).toHaveStyle('flex-basis: 100%'); - }); - - it('should render a classic ratio bar', () => { - // given - const props = { - amount: 5, - total: 12, - }; - // when - render(); - // then - expect(getRatioBarLine()).toHaveStyle('flex-basis: 41.66666666666667%'); - expect(getEmptyLine()).toHaveStyle('flex-basis: 58.33333333333333%'); - expect(getCounter()).toHaveTextContent('5/12'); - }); - }); - - it('should render a classic ratio bar with errors', () => { - // given - const props = { - amount: 5, - total: 12, - errors: 2, - }; - // when - render(); - // then - expect(getRatioBarLine()).toHaveStyle('flex-basis: 41.66666666666667%'); - expect(getEmptyLine()).toHaveStyle('flex-basis: 41.666666666666664%'); - expect(getErrorLine()).toHaveStyle('flex-basis: 16.666666666666664%'); - expect(getCounter()).toHaveTextContent('7/12'); - }); - - it('should render a classic ratio bar without label', () => { - // given - const props = { - amount: 5, - total: 12, - }; - // when - render(); - // then - expect(getRatioBarLine()).toHaveStyle('flex-basis: 41.66666666666667%'); - expect(getEmptyLine()).toHaveStyle('flex-basis: 58.33333333333333%'); - expect(getCounter()).not.toBeInTheDocument(); - }); -}); diff --git a/packages/components/src/RatioBar/RatioBar.component.tsx b/packages/components/src/RatioBar/RatioBar.component.tsx new file mode 100644 index 00000000000..edf21018c89 --- /dev/null +++ b/packages/components/src/RatioBar/RatioBar.component.tsx @@ -0,0 +1,34 @@ +import { ReactNode } from 'react'; +import { Trans } from 'react-i18next'; + +import { RatioBar as RatioBarDS } from '@talend/design-system'; + +type RatioBarProps = { + amount?: number; + errors?: number; + hideLabel?: boolean; + notApplicableLabel?: ReactNode; + total: number; +}; + +export const RatioBar = ({ + amount, + total, + errors = 0, + hideLabel = false, + notApplicableLabel, +}: RatioBarProps) => ( + + N/A + + ) + } + total={total} + /> +); diff --git a/packages/components/src/RatioBar/RatioBar.module.scss b/packages/components/src/RatioBar/RatioBar.module.scss deleted file mode 100644 index 0d541494c75..00000000000 --- a/packages/components/src/RatioBar/RatioBar.module.scss +++ /dev/null @@ -1,59 +0,0 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; - -@use '~@talend/design-tokens/lib/tokens'; - -$custom-ratio-bar-height: 0.5rem; -$custom-ratio-bar-line-height: 0.25rem; -$custom-ratio-bar-line-hover-height: 0.5rem; - -.tc-ratio-bar-lines { - width: 100%; - height: 100%; - border-radius: 1px; -} - -.tc-ratio-bar { - padding: $padding-small 0; - display: flex; - height: $custom-ratio-bar-height; - width: 100%; - align-items: center; - - &-counter { - padding-left: $padding-smaller; - } - - .tc-ratio-bar-line { - height: $custom-ratio-bar-line-height; - margin: 0 2px 0 0; - transition: tokens.$coral-transition-instant; - min-width: $custom-ratio-bar-line-height; - &:hover { - height: $custom-ratio-bar-line-hover-height; - } - &-grow { - flex-grow: 1; - } - &:first-child { - margin-left: 0; - } - &:last-child { - margin-right: 0; - } - } - - .tc-ratio-bar-line-empty { - @extend .tc-ratio-bar-lines; - background-color: tokens.$coral-color-charts-neutral-weak; - } - - .tc-ratio-bar-line-filled { - @extend .tc-ratio-bar-lines; - background-color: tokens.$coral-color-charts-default; - } - - .tc-ratio-bar-line-error { - @extend .tc-ratio-bar-lines; - background-color: tokens.$coral-color-charts-danger; - } -} diff --git a/packages/components/src/RatioBar/RatioBar.stories.js b/packages/components/src/RatioBar/RatioBar.stories.tsx similarity index 93% rename from packages/components/src/RatioBar/RatioBar.stories.js rename to packages/components/src/RatioBar/RatioBar.stories.tsx index 03d82f60828..7c9465cf22e 100644 --- a/packages/components/src/RatioBar/RatioBar.stories.js +++ b/packages/components/src/RatioBar/RatioBar.stories.tsx @@ -5,7 +5,7 @@ export default { }; export const _RatioBar = () => ( -
+
Ratio Bar
Not applicable amount
diff --git a/packages/components/src/RatioBar/RatioBarComposition.component.js b/packages/components/src/RatioBar/RatioBarComposition.component.js deleted file mode 100644 index 9c4168f086a..00000000000 --- a/packages/components/src/RatioBar/RatioBarComposition.component.js +++ /dev/null @@ -1,92 +0,0 @@ -import PropTypes from 'prop-types'; - -import { Tooltip } from '@talend/design-system'; - -import { getTheme } from '../theme'; - -import ratioBarTheme from './RatioBar.module.scss'; - -const theme = getTheme(ratioBarTheme); -const minPercentage = 5; - -export function RatioBarLine({ - percentage, - tooltipLabel, - className, - value, - dataFeature, - onClick, - dataTestId, -}) { - const canGrow = percentage >= minPercentage; - - if (!value || value < 0) return null; - - function onKeyDown(event) { - switch (event.key) { - case 'Enter': - onClick(event); - break; - case ' ': - case 'Spacebar': - event.preventDefault(); // prevent scroll with space - event.stopPropagation(); - onClick(event); - break; - default: - break; - } - } - - const content = ( - // eslint-disable-next-line jsx-a11y/no-static-element-interactions -
- {tooltipLabel && {tooltipLabel}} -
- ); - - if (!tooltipLabel) { - return content; - } - - return ( - - {content} - - ); -} -RatioBarLine.propTypes = { - percentage: PropTypes.number.isRequired, - value: PropTypes.number.isRequired, - tooltipLabel: PropTypes.string, - className: PropTypes.string.isRequired, - dataTestId: PropTypes.string, - dataFeature: PropTypes.string, - onClick: PropTypes.func, -}; - -export function RatioBarComposition({ children }) { - return
{children}
; -} -RatioBarComposition.propTypes = { - children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]), -}; diff --git a/packages/components/src/RatioBar/RatioBarLines.component.js b/packages/components/src/RatioBar/RatioBarLines.component.js deleted file mode 100644 index 98a10b00625..00000000000 --- a/packages/components/src/RatioBar/RatioBarLines.component.js +++ /dev/null @@ -1,44 +0,0 @@ -import PropTypes from 'prop-types'; -import { getTheme } from '../theme'; -import { RatioBarLine } from './RatioBarComposition.component'; -import ratioBarTheme from './RatioBar.module.scss'; - -const theme = getTheme(ratioBarTheme); - -const ratioBarLinePropTypes = { - value: PropTypes.number.isRequired, - percentage: PropTypes.number.isRequired, -}; - -export function FilledLine({ value, percentage }) { - return ( - - ); -} -FilledLine.propTypes = ratioBarLinePropTypes; - -export function EmptyLine({ value, percentage }) { - return ( - - ); -} -EmptyLine.propTypes = ratioBarLinePropTypes; - -export function ErrorLine({ value, percentage }) { - return ( - - ); -} -ErrorLine.propTypes = ratioBarLinePropTypes; diff --git a/packages/components/src/RatioBar/__snapshots__/RatioBar.component.test.js.snap b/packages/components/src/RatioBar/__snapshots__/RatioBar.component.test.js.snap deleted file mode 100644 index e241b4afe24..00000000000 --- a/packages/components/src/RatioBar/__snapshots__/RatioBar.component.test.js.snap +++ /dev/null @@ -1,22 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`RatioBar RatioBar component should render an empty bar 1`] = ` -
-
-
- - 0 - - / - 12 -
-
-`; diff --git a/packages/components/src/RatioBar/index.js b/packages/components/src/RatioBar/index.js deleted file mode 100644 index d74d271bb1d..00000000000 --- a/packages/components/src/RatioBar/index.js +++ /dev/null @@ -1,9 +0,0 @@ -import { RatioBar } from './RatioBar.component'; -import { RatioBarComposition, RatioBarLine } from './RatioBarComposition.component'; - -RatioBar.Composition = RatioBarComposition; -RatioBar.Line = RatioBarLine; - -export { RatioBarComposition, RatioBarLine }; - -export default RatioBar; diff --git a/packages/components/src/RatioBar/index.ts b/packages/components/src/RatioBar/index.ts new file mode 100644 index 00000000000..cb22bebb3c2 --- /dev/null +++ b/packages/components/src/RatioBar/index.ts @@ -0,0 +1,7 @@ +import { RatioBarComposition, RatioBarLine } from '@talend/design-system'; + +import { RatioBar } from './RatioBar.component'; + +export { RatioBarComposition, RatioBarLine }; + +export default RatioBar; diff --git a/packages/components/src/ResourceList/Resource/Resource.module.scss b/packages/components/src/ResourceList/Resource/Resource.module.scss index f450013ca6a..f3586e7b36f 100644 --- a/packages/components/src/ResourceList/Resource/Resource.module.scss +++ b/packages/components/src/ResourceList/Resource/Resource.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; .resource-item { padding-left: $padding-normal; diff --git a/packages/components/src/ResourceList/ResourceList.module.scss b/packages/components/src/ResourceList/ResourceList.module.scss index 8c304465a1f..b66353b6c48 100644 --- a/packages/components/src/ResourceList/ResourceList.module.scss +++ b/packages/components/src/ResourceList/ResourceList.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; $tc-resource-list-margin-top: 1.25rem !default; $tc-resource-list-height: 15.625rem !default; diff --git a/packages/components/src/ResourceList/Toolbar/NameFilter/NameFilter.module.scss b/packages/components/src/ResourceList/Toolbar/NameFilter/NameFilter.module.scss index 950b1b51526..b625bf7048c 100644 --- a/packages/components/src/ResourceList/Toolbar/NameFilter/NameFilter.module.scss +++ b/packages/components/src/ResourceList/Toolbar/NameFilter/NameFilter.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; .tc-resource-picker-name-filter { flex: 1; diff --git a/packages/components/src/ResourceList/Toolbar/SortOptions/OrderChooser/OrderChooser.module.scss b/packages/components/src/ResourceList/Toolbar/SortOptions/OrderChooser/OrderChooser.module.scss index c35fc122290..03229572145 100644 --- a/packages/components/src/ResourceList/Toolbar/SortOptions/OrderChooser/OrderChooser.module.scss +++ b/packages/components/src/ResourceList/Toolbar/SortOptions/OrderChooser/OrderChooser.module.scss @@ -1,4 +1,4 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; $tc-resource-picker-order-chooser-icon-size: 0.375rem !default; diff --git a/packages/components/src/ResourceList/Toolbar/SortOptions/SortOptions.module.scss b/packages/components/src/ResourceList/Toolbar/SortOptions/SortOptions.module.scss index f5725049926..40f01f8620f 100644 --- a/packages/components/src/ResourceList/Toolbar/SortOptions/SortOptions.module.scss +++ b/packages/components/src/ResourceList/Toolbar/SortOptions/SortOptions.module.scss @@ -1,4 +1,4 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; .tc-resource-picker-sort-options { display: flex; diff --git a/packages/components/src/ResourceList/Toolbar/StateFilter/StateFilter.module.scss b/packages/components/src/ResourceList/Toolbar/StateFilter/StateFilter.module.scss index ac6208d2ca7..ceb93792303 100644 --- a/packages/components/src/ResourceList/Toolbar/StateFilter/StateFilter.module.scss +++ b/packages/components/src/ResourceList/Toolbar/StateFilter/StateFilter.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; $tc-resource-picker-toolbar-favorite-color: tokens.$coral-color-warning-text !default; $tc-resource-picker-toolbar-certified-color: tokens.$coral-color-accent-text !default; diff --git a/packages/components/src/ResourceList/Toolbar/Toolbar.module.scss b/packages/components/src/ResourceList/Toolbar/Toolbar.module.scss index 116e291fc03..658d090eb30 100644 --- a/packages/components/src/ResourceList/Toolbar/Toolbar.module.scss +++ b/packages/components/src/ResourceList/Toolbar/Toolbar.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; .tc-resource-list-toolbar { display: flex; diff --git a/packages/components/src/ResourcePicker/ResourcePicker.module.scss b/packages/components/src/ResourcePicker/ResourcePicker.module.scss index 08bde0ab1df..b4f6dae0b09 100644 --- a/packages/components/src/ResourcePicker/ResourcePicker.module.scss +++ b/packages/components/src/ResourcePicker/ResourcePicker.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; $tc-resource-picker-toolbar-height: 2.1875rem !default; $tc-resource-picker-height: 15.625rem !default; diff --git a/packages/components/src/Rich/Error/RichError.module.scss b/packages/components/src/Rich/Error/RichError.module.scss index cef79f3481a..1963298fbbf 100644 --- a/packages/components/src/Rich/Error/RichError.module.scss +++ b/packages/components/src/Rich/Error/RichError.module.scss @@ -1,4 +1,4 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; $tc-rich-error-icon-size: 2.25rem !default; diff --git a/packages/components/src/Rich/HeaderTitle/HeaderTitle.module.scss b/packages/components/src/Rich/HeaderTitle/HeaderTitle.module.scss index a74b91814b3..6ac5b578273 100644 --- a/packages/components/src/Rich/HeaderTitle/HeaderTitle.module.scss +++ b/packages/components/src/Rich/HeaderTitle/HeaderTitle.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; $tc-header-title-font-size: 1rem !default; $tc-header-title-font-weight: 700 !default; diff --git a/packages/components/src/Rich/Layout/RichLayout.module.scss b/packages/components/src/Rich/Layout/RichLayout.module.scss index 5eb446c7a42..6ab8c8c564b 100644 --- a/packages/components/src/Rich/Layout/RichLayout.module.scss +++ b/packages/components/src/Rich/Layout/RichLayout.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; $tc-popover-border-width: 0.0625rem !default; $tc-popover-border-color: tokens.$coral-color-neutral-border-weak !default; diff --git a/packages/components/src/SidePanel/SidePanel.module.scss b/packages/components/src/SidePanel/SidePanel.module.scss index 749663d4f77..24834ba3d33 100644 --- a/packages/components/src/SidePanel/SidePanel.module.scss +++ b/packages/components/src/SidePanel/SidePanel.module.scss @@ -1,7 +1,7 @@ /* stylelint-disable color-hex-case */ /* stylelint-disable declaration-no-important */ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; //// /// Side panel diff --git a/packages/components/src/Skeleton/Skeleton.module.scss b/packages/components/src/Skeleton/Skeleton.module.scss index c1d8ea901c4..09a5f365739 100644 --- a/packages/components/src/Skeleton/Skeleton.module.scss +++ b/packages/components/src/Skeleton/Skeleton.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; @import '~@talend/bootstrap-theme/src/theme/animation'; $tc-skeleton-border-radius: 4px !default; diff --git a/packages/components/src/Slider/Slider.component.tsx b/packages/components/src/Slider/Slider.component.tsx index ff51bd86a0d..a36bb2c756e 100644 --- a/packages/components/src/Slider/Slider.component.tsx +++ b/packages/components/src/Slider/Slider.component.tsx @@ -1,11 +1,16 @@ import { forwardRef, JSXElementConstructor, ReactElement, Ref } from 'react'; + import classnames from 'classnames'; +import range from 'lodash/range'; import RcSlider, { SliderRef } from 'rc-slider'; +import 'rc-slider/assets/index.css'; import { HandleProps } from 'rc-slider/lib/Handles/Handle'; -import range from 'lodash/range'; -import 'rc-slider/assets/index.css'; // eslint-disable-line no-unused-vars + +// eslint-disable-line no-unused-vars import { ButtonIcon } from '@talend/design-system'; + import Icon from '../Icon'; + import theme from './Slider.module.scss'; /** @@ -173,7 +178,7 @@ function getCaption( */ function getHandle(captionsFormat: ((value?: number) => string) | undefined) { function renderHandler( - origin: ReactElement>, + origin: React.ReactElement>, props: any, ) { return ( diff --git a/packages/components/src/Slider/Slider.module.scss b/packages/components/src/Slider/Slider.module.scss index 9f15ea4d612..35826168db1 100644 --- a/packages/components/src/Slider/Slider.module.scss +++ b/packages/components/src/Slider/Slider.module.scss @@ -1,6 +1,6 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/_tokens.scss' as tokens; +@use '@talend/design-tokens/lib/_tokens' as tokens; $tc-slider-thumb-shadow: 0 1px 2px 0 rgba(117, 132, 149, 0.5); //$slate-gray; $tc-slider-thumb-shadow-focused: 0 3px 4px 0.5px rgba(0, 0, 0, 0.25); diff --git a/packages/components/src/Status/Status.module.scss b/packages/components/src/Status/Status.module.scss index 923bd97383a..affe6bf059b 100644 --- a/packages/components/src/Status/Status.module.scss +++ b/packages/components/src/Status/Status.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; $tc-status-icon-size: $svg-md-size !default; $tc-status-action-min-size: 23px !default; diff --git a/packages/components/src/Stepper/Stepper.component.module.scss b/packages/components/src/Stepper/Stepper.component.module.scss index 2809e1276e6..63c7a4db4d8 100644 --- a/packages/components/src/Stepper/Stepper.component.module.scss +++ b/packages/components/src/Stepper/Stepper.component.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; $stepper-icon-size: $svg-md-size !default; diff --git a/packages/components/src/SubHeaderBar/SubHeaderBar.module.scss b/packages/components/src/SubHeaderBar/SubHeaderBar.module.scss index 90d7a424232..28a47523027 100644 --- a/packages/components/src/SubHeaderBar/SubHeaderBar.module.scss +++ b/packages/components/src/SubHeaderBar/SubHeaderBar.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; @mixin input-icon($margin-left) { margin-top: 0.625rem; diff --git a/packages/components/src/SubHeaderBar/TitleSubHeader/TitleSubHeader.module.scss b/packages/components/src/SubHeaderBar/TitleSubHeader/TitleSubHeader.module.scss index f00a1d691a0..324ccf1ffc8 100644 --- a/packages/components/src/SubHeaderBar/TitleSubHeader/TitleSubHeader.module.scss +++ b/packages/components/src/SubHeaderBar/TitleSubHeader/TitleSubHeader.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; @import '~@talend/bootstrap-theme/src/theme/animation'; diff --git a/packages/components/src/TabBar/TabBar.module.scss b/packages/components/src/TabBar/TabBar.module.scss index 1a4438b04ff..9365bd069e1 100644 --- a/packages/components/src/TabBar/TabBar.module.scss +++ b/packages/components/src/TabBar/TabBar.module.scss @@ -1,4 +1,4 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; .tc-tab-bar-menu { display: flex; diff --git a/packages/components/src/TabBar/Tabs.stories.js b/packages/components/src/TabBar/Tabs.stories.js index a12ddc7b699..98a4cc2eb45 100644 --- a/packages/components/src/TabBar/Tabs.stories.js +++ b/packages/components/src/TabBar/Tabs.stories.js @@ -87,6 +87,15 @@ const tabProps = { 'data-feature': 'action.9', disabled: true, }, + { + key: '10', + label: 'Tab10', + badge: { + label: 'BETA', + bsStyle: 'beta', + }, + 'data-feature': 'action.10', + }, ], onSelect: action('onSelect'), selectedKey: '2', diff --git a/packages/components/src/Tag/Tag.component.js b/packages/components/src/Tag/Tag.component.js index 33f62fb20a5..65b38709456 100644 --- a/packages/components/src/Tag/Tag.component.js +++ b/packages/components/src/Tag/Tag.component.js @@ -1,10 +1,12 @@ import PropTypes from 'prop-types'; + import { Tag as CoralTag, + TagBeta as CoralTagBeta, + TagDestructive as CoralTagDestructive, TagInformation as CoralTagInformation, TagSuccess as CoralTagSuccess, TagWarning as CoralTagWarning, - TagDestructive as CoralTagDestructive, } from '@talend/design-system'; /** @@ -25,6 +27,9 @@ const Tag = ({ bsStyle, ...rest }) => { case 'danger': StyledTag = CoralTagDestructive; break; + case 'beta': + StyledTag = CoralTagBeta; + break; default: break; } diff --git a/packages/components/src/Toggle/LabelToggle/LabelToggle.module.scss b/packages/components/src/Toggle/LabelToggle/LabelToggle.module.scss index 11329da8f54..f481dc6307d 100644 --- a/packages/components/src/Toggle/LabelToggle/LabelToggle.module.scss +++ b/packages/components/src/Toggle/LabelToggle/LabelToggle.module.scss @@ -1,6 +1,6 @@ /* stylelint-disable selector-no-qualifying-type */ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; @mixin radio-toolbar-input($color, $opacity) { transition: 0.2s ease-out; diff --git a/packages/components/src/TooltipTrigger/TooltipTrigger.module.scss b/packages/components/src/TooltipTrigger/TooltipTrigger.module.scss index a591a2ae6fc..7a40adfc57f 100644 --- a/packages/components/src/TooltipTrigger/TooltipTrigger.module.scss +++ b/packages/components/src/TooltipTrigger/TooltipTrigger.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; $tc-tooltip-max-width: 18.75rem !default; $tc-tooltip-font-size: 0.75rem !default; diff --git a/packages/components/src/TreeView/TreeView.module.scss b/packages/components/src/TreeView/TreeView.module.scss index f6997a74d17..a8a5e94a0d7 100644 --- a/packages/components/src/TreeView/TreeView.module.scss +++ b/packages/components/src/TreeView/TreeView.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; // TreeView styles diff --git a/packages/components/src/TreeView/TreeViewItem/TreeViewItem.module.scss b/packages/components/src/TreeView/TreeViewItem/TreeViewItem.module.scss index aed17415d55..e6d05ce9f59 100644 --- a/packages/components/src/TreeView/TreeViewItem/TreeViewItem.module.scss +++ b/packages/components/src/TreeView/TreeViewItem/TreeViewItem.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; // TreeView styles $item-height: 2.5rem; diff --git a/packages/components/src/Typeahead/Typeahead.module.scss b/packages/components/src/Typeahead/Typeahead.module.scss index 555072928ef..54d21024b79 100644 --- a/packages/components/src/Typeahead/Typeahead.module.scss +++ b/packages/components/src/Typeahead/Typeahead.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; @import '~@talend/bootstrap-theme/src/theme/animation'; $tc-typeahead-input-color: tokens.$coral-color-neutral-text !default; diff --git a/packages/components/src/VirtualizedList/CellActions/RowLargeCellActions.module.scss b/packages/components/src/VirtualizedList/CellActions/RowLargeCellActions.module.scss index b1871b1caaa..82184fddfdb 100644 --- a/packages/components/src/VirtualizedList/CellActions/RowLargeCellActions.module.scss +++ b/packages/components/src/VirtualizedList/CellActions/RowLargeCellActions.module.scss @@ -1,4 +1,4 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; // Large display specificities .row { diff --git a/packages/components/src/VirtualizedList/CellActions/RowTableCellActions.module.scss b/packages/components/src/VirtualizedList/CellActions/RowTableCellActions.module.scss index 2f5904d9429..83daebe5068 100644 --- a/packages/components/src/VirtualizedList/CellActions/RowTableCellActions.module.scss +++ b/packages/components/src/VirtualizedList/CellActions/RowTableCellActions.module.scss @@ -1,4 +1,4 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; // manage actions display on row hover .row { diff --git a/packages/components/src/VirtualizedList/CellBoolean/CellBoolean.module.scss b/packages/components/src/VirtualizedList/CellBoolean/CellBoolean.module.scss index d0940fbdb0c..4783c6ddfda 100644 --- a/packages/components/src/VirtualizedList/CellBoolean/CellBoolean.module.scss +++ b/packages/components/src/VirtualizedList/CellBoolean/CellBoolean.module.scss @@ -1,4 +1,4 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; .cell-boolean-container { display: flex; diff --git a/packages/components/src/VirtualizedList/CellCheckbox/CellCheckbox.module.scss b/packages/components/src/VirtualizedList/CellCheckbox/CellCheckbox.module.scss index 52b95cd0a20..b0c21bfdd00 100644 --- a/packages/components/src/VirtualizedList/CellCheckbox/CellCheckbox.module.scss +++ b/packages/components/src/VirtualizedList/CellCheckbox/CellCheckbox.module.scss @@ -1,4 +1,4 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; .tc-list-checkbox { :global(.checkbox) { diff --git a/packages/components/src/VirtualizedList/CellDatetime/CellDatetime.component.js b/packages/components/src/VirtualizedList/CellDatetime/CellDatetime.component.js index 5c1e44353ba..3c171893519 100644 --- a/packages/components/src/VirtualizedList/CellDatetime/CellDatetime.component.js +++ b/packages/components/src/VirtualizedList/CellDatetime/CellDatetime.component.js @@ -35,6 +35,7 @@ export function computeValue(cellData, columnData, t) { } else if (columnData.mode === 'format') { if (columnData.timeZone) { return dateUtils.formatToTimeZone(dateFNS, columnData.pattern || DATE_TIME_FORMAT, { + ...(columnData.sourceTimeZone && { sourceTimeZone: columnData.sourceTimeZone }), timeZone: columnData.timeZone, locale: getLocale(t), }); diff --git a/packages/components/src/VirtualizedList/CellDatetime/CellDatetime.module.scss b/packages/components/src/VirtualizedList/CellDatetime/CellDatetime.module.scss index 3baee74676d..7fa925905b0 100644 --- a/packages/components/src/VirtualizedList/CellDatetime/CellDatetime.module.scss +++ b/packages/components/src/VirtualizedList/CellDatetime/CellDatetime.module.scss @@ -1,4 +1,4 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; .cell-icon-container { display: flex; diff --git a/packages/components/src/VirtualizedList/CellDatetime/CellDatetime.test.js b/packages/components/src/VirtualizedList/CellDatetime/CellDatetime.test.js index eac23203e22..5459b71e0cc 100644 --- a/packages/components/src/VirtualizedList/CellDatetime/CellDatetime.test.js +++ b/packages/components/src/VirtualizedList/CellDatetime/CellDatetime.test.js @@ -167,18 +167,22 @@ describe('CellDatetime', () => { mode: 'format', pattern: 'YYYY-MM-DD HH:mm:ss', timeZone: 'Pacific/Niue', + sourceTimeZone: 'Europe/Paris', }; const t = jest.fn(); const cellData = 1474495200000; - computeValue(cellData, columnData, t); + const expectedStrDate = '2016-09-22 09:00:00'; + const computedStrOffset = computeValue(cellData, columnData, t); // then + expect(computedStrOffset).toEqual(expectedStrDate); expect(dateUtils.formatToTimeZone).toHaveBeenCalledWith( new Date(cellData), columnData.pattern, { timeZone: columnData.timeZone, + sourceTimeZone: columnData.sourceTimeZone, locale: getLocale(t), }, ); diff --git a/packages/components/src/VirtualizedList/CellIconText/CellIconText.module.scss b/packages/components/src/VirtualizedList/CellIconText/CellIconText.module.scss index 1d18f6558da..2158b8d1170 100644 --- a/packages/components/src/VirtualizedList/CellIconText/CellIconText.module.scss +++ b/packages/components/src/VirtualizedList/CellIconText/CellIconText.module.scss @@ -1,4 +1,4 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; .tc-icon-text { display: flex; diff --git a/packages/components/src/VirtualizedList/CellLink/CellLink.module.scss b/packages/components/src/VirtualizedList/CellLink/CellLink.module.scss index 83c3b1c9f48..e02b375614c 100644 --- a/packages/components/src/VirtualizedList/CellLink/CellLink.module.scss +++ b/packages/components/src/VirtualizedList/CellLink/CellLink.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; .cell-link-container { > a { diff --git a/packages/components/src/VirtualizedList/CellQualityBar/CellQualityBar.test.js b/packages/components/src/VirtualizedList/CellQualityBar/CellQualityBar.test.js index 71c4610d6ea..7683b4d6461 100644 --- a/packages/components/src/VirtualizedList/CellQualityBar/CellQualityBar.test.js +++ b/packages/components/src/VirtualizedList/CellQualityBar/CellQualityBar.test.js @@ -3,6 +3,8 @@ import noop from 'lodash/noop'; import { CellQualityBar } from './CellQualityBar.component'; +jest.unmock('@talend/design-system'); + const props = { invalid: 1, empty: 2, diff --git a/packages/components/src/VirtualizedList/CellQualityBar/__snapshots__/CellQualityBar.test.js.snap b/packages/components/src/VirtualizedList/CellQualityBar/__snapshots__/CellQualityBar.test.js.snap index 8d6ccd8392a..893f6f6e947 100644 --- a/packages/components/src/VirtualizedList/CellQualityBar/__snapshots__/CellQualityBar.test.js.snap +++ b/packages/components/src/VirtualizedList/CellQualityBar/__snapshots__/CellQualityBar.test.js.snap @@ -4,88 +4,213 @@ exports[`CellQualityBar should render a valid quality bar 1`] = `
- -
- - 1 invalid value (10%) - -
- - +
+
-
- - 2 empty value (20%) - -
- - +
+
-
- - 4 not applicable value (40%) - -
- - +
+
-
- - 3 valid value (30%) - -
- + 3 valid value (30%) + +
+
+
+
+ +
+
+ +
+
+ +
+
+
diff --git a/packages/components/src/VirtualizedList/CellTextIcon/CellWithIcon.module.scss b/packages/components/src/VirtualizedList/CellTextIcon/CellWithIcon.module.scss index 084c1c25092..9b12b61b393 100644 --- a/packages/components/src/VirtualizedList/CellTextIcon/CellWithIcon.module.scss +++ b/packages/components/src/VirtualizedList/CellTextIcon/CellWithIcon.module.scss @@ -1,4 +1,4 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; .cell-icon-container { display: flex; diff --git a/packages/components/src/VirtualizedList/CellTitle/CellTitle.module.scss b/packages/components/src/VirtualizedList/CellTitle/CellTitle.module.scss index 2eebe92d2cd..e50d3dc43d7 100644 --- a/packages/components/src/VirtualizedList/CellTitle/CellTitle.module.scss +++ b/packages/components/src/VirtualizedList/CellTitle/CellTitle.module.scss @@ -1,6 +1,6 @@ /* stylelint-disable declaration-no-important */ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; $tc-list-title-icon-size: $svg-rg-size !default; diff --git a/packages/components/src/VirtualizedList/CellTitle/CellTitleActions.module.scss b/packages/components/src/VirtualizedList/CellTitle/CellTitleActions.module.scss index 12d192e41d2..f156d43cd1c 100644 --- a/packages/components/src/VirtualizedList/CellTitle/CellTitleActions.module.scss +++ b/packages/components/src/VirtualizedList/CellTitle/CellTitleActions.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; $tc-list-title-actions-ellipsis: '\22ee'; $tc-list-title-dropdown-menu-triangle: '\25b2'; diff --git a/packages/components/src/VirtualizedList/HeaderCheckbox/HeaderCheckbox.module.scss b/packages/components/src/VirtualizedList/HeaderCheckbox/HeaderCheckbox.module.scss index 42400695b54..e0bc5701b62 100644 --- a/packages/components/src/VirtualizedList/HeaderCheckbox/HeaderCheckbox.module.scss +++ b/packages/components/src/VirtualizedList/HeaderCheckbox/HeaderCheckbox.module.scss @@ -1,4 +1,4 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; .tc-list-checkbox { :global(.checkbox) { diff --git a/packages/components/src/VirtualizedList/HeaderIcon/HeaderIcon.module.scss b/packages/components/src/VirtualizedList/HeaderIcon/HeaderIcon.module.scss index eba5fe74501..aee6599b6d0 100644 --- a/packages/components/src/VirtualizedList/HeaderIcon/HeaderIcon.module.scss +++ b/packages/components/src/VirtualizedList/HeaderIcon/HeaderIcon.module.scss @@ -1,4 +1,4 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; $tc-list-header-icon-margin-top: 3px !default; diff --git a/packages/components/src/VirtualizedList/HeaderResizable/HeaderResizable.module.scss b/packages/components/src/VirtualizedList/HeaderResizable/HeaderResizable.module.scss index b6bc45cd3ec..b0f0e9a56bf 100644 --- a/packages/components/src/VirtualizedList/HeaderResizable/HeaderResizable.module.scss +++ b/packages/components/src/VirtualizedList/HeaderResizable/HeaderResizable.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; $drag-element-width: $padding-smaller; diff --git a/packages/components/src/VirtualizedList/ListGrid/ListGrid.module.scss b/packages/components/src/VirtualizedList/ListGrid/ListGrid.module.scss index c5d19b25742..06dc4203331 100644 --- a/packages/components/src/VirtualizedList/ListGrid/ListGrid.module.scss +++ b/packages/components/src/VirtualizedList/ListGrid/ListGrid.module.scss @@ -1,4 +1,4 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; .tc-list-list { padding: $padding-normal; diff --git a/packages/components/src/VirtualizedList/ListTable/ListTable.module.scss b/packages/components/src/VirtualizedList/ListTable/ListTable.module.scss index 253e0644c02..052d2d8a0a7 100644 --- a/packages/components/src/VirtualizedList/ListTable/ListTable.module.scss +++ b/packages/components/src/VirtualizedList/ListTable/ListTable.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; $tc-list-table-cell-padding: $padding-small !default; diff --git a/packages/components/src/VirtualizedList/NoRows/NoRows.module.scss b/packages/components/src/VirtualizedList/NoRows/NoRows.module.scss index 544c42b1780..2fc5b56aeae 100644 --- a/packages/components/src/VirtualizedList/NoRows/NoRows.module.scss +++ b/packages/components/src/VirtualizedList/NoRows/NoRows.module.scss @@ -1,4 +1,4 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; .tc-virtualizedlist-no-result, :global(.tc-virtualizedlist-no-result) { diff --git a/packages/components/src/VirtualizedList/RowCollapsiblePanel/RowCollapsiblePanel.module.scss b/packages/components/src/VirtualizedList/RowCollapsiblePanel/RowCollapsiblePanel.module.scss index a582017372c..16b526d330c 100644 --- a/packages/components/src/VirtualizedList/RowCollapsiblePanel/RowCollapsiblePanel.module.scss +++ b/packages/components/src/VirtualizedList/RowCollapsiblePanel/RowCollapsiblePanel.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; :global(.tc-collapsible-row) { :global(.panel[class*='collapsible-panel']) { diff --git a/packages/components/src/VirtualizedList/RowLarge/RowLarge.module.scss b/packages/components/src/VirtualizedList/RowLarge/RowLarge.module.scss index 389181cb338..65f91bd2dfc 100644 --- a/packages/components/src/VirtualizedList/RowLarge/RowLarge.module.scss +++ b/packages/components/src/VirtualizedList/RowLarge/RowLarge.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; .tc-list-large { padding: $padding-small; diff --git a/packages/components/src/VirtualizedList/RowSelection/RowSelection.module.scss b/packages/components/src/VirtualizedList/RowSelection/RowSelection.module.scss index 5aaec997f5d..ed6c62c5497 100644 --- a/packages/components/src/VirtualizedList/RowSelection/RowSelection.module.scss +++ b/packages/components/src/VirtualizedList/RowSelection/RowSelection.module.scss @@ -1,5 +1,5 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; -@use '~@talend/design-tokens/lib/tokens'; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/design-tokens/lib/tokens' as tokens; :global(.tc-list-table) { .row-selection.selected { diff --git a/packages/components/src/VirtualizedList/VirtualizedList.module.scss b/packages/components/src/VirtualizedList/VirtualizedList.module.scss index 4ac728b06a6..3fbd1171b60 100644 --- a/packages/components/src/VirtualizedList/VirtualizedList.module.scss +++ b/packages/components/src/VirtualizedList/VirtualizedList.module.scss @@ -1,4 +1,4 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; :global(.tc-virtualizedlist-default-cell) { min-width: 0; diff --git a/packages/components/src/WithDrawer/withDrawer.module.scss b/packages/components/src/WithDrawer/withDrawer.module.scss index a7c0394c712..8a1cb2f2879 100644 --- a/packages/components/src/WithDrawer/withDrawer.module.scss +++ b/packages/components/src/WithDrawer/withDrawer.module.scss @@ -1,4 +1,4 @@ -@use '~@talend/bootstrap-theme/src/theme/guidelines' as *; +@use '@talend/bootstrap-theme/src/theme/guidelines' as *; .tc-with-drawer { height: 100%; diff --git a/packages/containers/CHANGELOG.md b/packages/containers/CHANGELOG.md index bd42e5be09d..7f2937bfb80 100644 --- a/packages/containers/CHANGELOG.md +++ b/packages/containers/CHANGELOG.md @@ -1,5 +1,112 @@ # @talend/react-containers +## 11.0.4 + +### Patch Changes + +- 7ebe036: Revert "fix: Fix exports to allow deep imports" +- Updated dependencies [7ebe036] + - @talend/design-system@11.0.5 + - @talend/react-components@17.1.2 + - @talend/utils@3.2.3 + +## 11.0.3 + +### Patch Changes + +- f321a0d: Remove unused tsconfig.esm.json (initially added to use TSC but we stay with babel at the end) +- Updated dependencies [f321a0d] + - @talend/design-system@11.0.4 + - @talend/react-components@17.1.1 + - @talend/react-forms@15.0.1 + - @talend/utils@3.2.2 + - @talend/react-cmf@10.0.1 + +## 11.0.2 + +### Patch Changes + +- 94aad7d: fix: Fix exports to allow deep imports +- Updated dependencies [94aad7d] + - @talend/design-system@11.0.3 + - @talend/react-components@17.0.1 + - @talend/utils@3.2.1 + +## 11.0.1 + +### Patch Changes + +- c520cd8: fix(containers): Fix tsconfig to have right d.ts files + +## 11.0.0 + +### Major Changes + +- c3750a1: chore: upgrade dependencies + + Major upgrade for all packages that have a peerDependency on react or react-dom. Those packages now ask for react@18 and react-dom@18. + +### Patch Changes + +- Updated dependencies [c3750a1] + - @talend/design-system@11.0.0 + - @talend/react-components@17.0.0 + - @talend/react-forms@15.0.0 + - @talend/react-cmf@10.0.0 + - @talend/utils@3.2.0 + +## 10.8.0 + +### Minor Changes + +- 3bd16fc: Add support to ESM + +### Patch Changes + +- Updated dependencies [ced37a2] +- Updated dependencies [3bd16fc] + - @talend/react-components@16.2.0 + - @talend/design-system@10.6.0 + - @talend/react-forms@14.1.0 + - @talend/utils@3.1.0 + - @talend/react-cmf@9.1.0 + +## 10.7.4 + +### Patch Changes + +- Updated dependencies [e48ae5f] + - @talend/react-cmf@9.0.0 + +## 10.7.3 + +### Patch Changes + +- Updated dependencies [0629df7] + - @talend/react-forms@14.0.0 + +## 10.7.2 + +### Patch Changes + +- Updated dependencies [ce93823] + - @talend/design-system@10.0.0 + - @talend/react-components@16.0.0 + - @talend/react-forms@13.2.3 + +## 10.7.1 + +### Patch Changes + +- 1abc22f: chore: upgrade dependencies +- Updated dependencies [1abc22f] +- Updated dependencies [5cedaf1] + - @talend/design-system@9.8.1 + - @talend/react-components@15.3.1 + - @talend/react-forms@13.2.2 + - @talend/utils@3.0.4 + - @talend/react-cmf@8.4.1 + ## 10.7.0 ### Minor Changes diff --git a/packages/containers/package.json b/packages/containers/package.json index 0cb5c9ed3fd..aa7a8e6d35a 100644 --- a/packages/containers/package.json +++ b/packages/containers/package.json @@ -2,13 +2,25 @@ "name": "@talend/react-containers", "description": "Provide connected components aka containers for @talend/react-cmf based on @talend/react-components.", "main": "lib/index.js", - "mainSrc": "src/index.js", + "types": "lib/index.d.ts", + "module": "./lib-esm/index.js", + "exports": { + "./lib/*": { + "import": "./lib-esm/*/index.js", + "require": "./lib/*/index.js" + }, + ".": { + "import": "./lib-esm/index.js", + "require": "./lib/index.js" + } + }, "license": "Apache-2.0", "scripts": { "build:dev": "talend-scripts build --umd --dev", "build:prod": "talend-scripts build --umd --prod", "pre-release": "yarn build:dev && yarn build:prod", "build:lib": "talend-scripts build", + "build:lib:esm": "talend-scripts build --esm", "start": "talend-scripts start-storybook -p 6007", "test": "talend-scripts test", "test:watch": "talend-scripts test --watch", @@ -33,55 +45,55 @@ "url": "https://github.com/Talend/ui.git" }, "dependencies": { - "@talend/design-system": "^9.2.0", - "@talend/react-cmf": "^8.4.0", - "@talend/react-components": "^15.1.0", - "@talend/react-forms": "^13.1.0", - "@talend/utils": "^3.0.0", - "classnames": "^2.3.2", + "@talend/design-system": "^11.0.5", + "@talend/react-cmf": "^10.0.1", + "@talend/react-components": "^17.1.2", + "@talend/react-forms": "^15.0.1", + "@talend/utils": "^3.2.3", + "classnames": "^2.5.1", "immutable": "^3.8.2", "invariant": "^2.2.4", "lodash": "^4.17.21", "memoize-one": "^6.0.0", "react-immutable-proptypes": "^2.2.0", - "redux-saga": "^1.2.3", + "redux-saga": "^1.3.0", "reselect": "^2.5.4" }, "devDependencies": { - "@storybook/addon-actions": "^7.6.4", - "@talend/icons": "^7.7.0", - "@talend/locales-tui-components": "^11.4.5", + "@storybook/addon-actions": "^7.6.19", + "@talend/icons": "^7.10.2", + "@talend/locales-tui-components": "^16.0.1", "@talend/locales-tui-containers": "^9.1.3", "@talend/locales-tui-forms": "^10.2.4", "@talend/locales-design-system": "^7.15.1", - "@talend/react-storybook-cmf": "^8.2.1", - "@talend/eslint-config": "^13.0.2", - "@talend/eslint-plugin": "^1.1.0", - "@talend/scripts-core": "^16.3.2", - "@talend/scripts-config-babel": "^13.3.0", - "@talend/scripts-config-storybook-lib": "^5.3.0", - "@talend/scripts-config-react-webpack": "^16.4.2", - "@testing-library/react": "^14.1.2", - "@testing-library/user-event": "^14.5.1", - "i18next": "^23.7.7", + "@talend/react-storybook-cmf": "^10.0.0", + "@talend/eslint-config": "^13.2.0", + "@talend/eslint-plugin": "^1.3.0", + "@talend/scripts-core": "^16.5.1", + "@talend/scripts-config-babel": "^13.5.0", + "@talend/scripts-config-storybook-lib": "^5.4.0", + "@talend/scripts-config-react-webpack": "^16.8.0", + "@testing-library/react": "^14.3.1", + "@testing-library/user-event": "^14.5.2", + "i18next": "^23.11.5", "jest-in-case": "^1.0.2", - "msw": "^1.3.2", + "msw": "^1.3.3", "prop-types": "^15.8.1", - "react": "^18.2.0", - "react-dom": "^18.2.0", + "react": "^18.3.1", + "react-dom": "^18.3.1", "react-i18next": "^13.5.0", - "react-test-renderer": "^18.2.0", + "react-test-renderer": "^18.3.1", "redux-saga-tester": "^1.0.874" }, "peerDependencies": { - "i18next": "^23.7.7", + "i18next": "^23.11.5", "prop-types": "^15.5.10", - "react": ">= 16.14.0", - "react-dom": ">= 16.14.0", + "react": "^18.3.1", + "react-dom": "^18.3.1", "react-i18next": "^13.5.0" }, "publishConfig": { "access": "public" }, - "version": "10.7.0" + "version": "11.0.4" } diff --git a/packages/containers/src/ComponentForm/__snapshots__/ComponentForm.test.js.snap b/packages/containers/src/ComponentForm/__snapshots__/ComponentForm.test.js.snap index e32d83f84f0..a3359d034c4 100644 --- a/packages/containers/src/ComponentForm/__snapshots__/ComponentForm.test.js.snap +++ b/packages/containers/src/ComponentForm/__snapshots__/ComponentForm.test.js.snap @@ -2,138 +2,139 @@ exports[`ComponentForm #render should render a UIForm 1`] = `
-
-
+ Metadata + +
- - Metadata -
- -
+
+ +
-
+
-
-
-
+ - +

+ + My error message -

- - my text input hint - -

-
+

`; diff --git a/packages/forms/src/UIForm/fields/TextArea/displayMode/TextMode.component.js b/packages/forms/src/UIForm/fields/TextArea/displayMode/TextMode.component.js index cbf0172c569..27f66d3cc3d 100644 --- a/packages/forms/src/UIForm/fields/TextArea/displayMode/TextMode.component.js +++ b/packages/forms/src/UIForm/fields/TextArea/displayMode/TextMode.component.js @@ -1,4 +1,5 @@ import PropTypes from 'prop-types'; + import { TextMode as FieldTemplate } from '../../FieldTemplate'; export default function TextMode({ id, schema, value }) { diff --git a/packages/forms/src/UIForm/fields/TextArea/displayMode/TextMode.component.test.js b/packages/forms/src/UIForm/fields/TextArea/displayMode/TextMode.component.test.js index 2bc62041317..240f84cb168 100644 --- a/packages/forms/src/UIForm/fields/TextArea/displayMode/TextMode.component.test.js +++ b/packages/forms/src/UIForm/fields/TextArea/displayMode/TextMode.component.test.js @@ -26,9 +26,7 @@ describe('TextArea field text display mode', () => { render(