diff --git a/.changeset/gorgeous-masks-obey.md b/.changeset/gorgeous-masks-obey.md deleted file mode 100644 index 8ad11545bc..0000000000 --- a/.changeset/gorgeous-masks-obey.md +++ /dev/null @@ -1,60 +0,0 @@ ---- -"@talend/babel-plugin-import-from-index": patch -"@talend/local-libs-webpack-plugin": patch -"@talend/babel-plugin-import-from-lib": patch -"@talend/scripts-config-react-webpack": patch -"@talend/scripts-config-storybook-lib": patch -"@talend/dynamic-cdn-webpack-plugin": patch -"@talend/scripts-config-typescript": patch -"@talend/scripts-config-stylelint": patch -"@talend/babel-plugin-assets-api": patch -"@talend/cypress-api-mock-plugin": patch -"@talend/scripts-config-prettier": patch -"@talend/babel-plugin-import-d3": patch -"@talend/scripts-yarn-workspace": patch -"@talend/eslint-config": patch -"@talend/scripts-publish-local": patch -"@talend/scripts-config-babel": patch -"@talend/scripts-config-jest": patch -"@talend/react-cmf-webpack-plugin": patch -"@talend/scripts-config-cdn": patch -"@talend/react-faceted-search": patch -"@talend/storybook-docs": patch -"@talend/scripts-build-cdn": patch -"@talend/design-system": patch -"@talend/design-tokens": patch -"@talend/react-flow-designer": patch -"@talend/router-bridge": patch -"@talend/react-storybook-cmf": patch -"@talend/ui-storybook-one": patch -"@talend/scripts-locales": patch -"@talend/react-bootstrap": patch -"@talend/design-docs": patch -"@talend/scripts-teorem": patch -"@talend/bootstrap-sass": patch -"@talend/assets-api": patch -"@talend/react-cmf-router": patch -"@talend/react-components": patch -"@talend/react-containers": patch -"@talend/ui-playground": patch -"@talend/eslint-plugin": patch -"@talend/scripts-utils": patch -"@talend/module-to-cdn": patch -"@talend/scripts-core": patch -"@talend/upgrade-deps": patch -"@talend/react-cmf-cqrs": patch -"@talend/scripts-cmf": patch -"@talend/react-dataviz": patch -"@talend/react-stepper": patch -"@talend/react-forms": patch -"@talend/icons": patch -"@talend/react-sagas": patch -"@talend/bootstrap-theme": patch -"@talend/utils": patch -"@talend/react-a11y": patch -"@talend/http": patch -"@talend/json-schema-form-core": patch -"@talend/react-cmf": patch ---- - -chore: upgrade dependencies diff --git a/.changeset/itchy-onions-refuse.md b/.changeset/itchy-onions-refuse.md new file mode 100644 index 0000000000..fa54d97ea8 --- /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 0000000000..6fc72dddbd --- /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 e22853a74c..0000000000 --- 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 7a27be95d9..0000000000 --- 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 9108988b3b..0000000000 --- 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 ebad6dc38e..4d7e719ba7 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 6df61ba587..d6eb7f2f43 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 58ddb436ea..cfff6061f8 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 1215e3af51..80861d7a52 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 d6791c165d..1e0c266ae6 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 ae053c4aa2..bb2467b0fb 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 e1e777c1a8..bc84c921a6 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 e635183a6b..a10a696044 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 442d2c0376..0000000000 --- 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 eb1a26be9a..0000000000 --- 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 85732cf3c8..fed7c509d9 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 ee33cb805a..3903854f18 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 0683f3e806..ae96c07e52 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 abc39076d1..ed9f9e5794 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 da1cc32ff3..34f6040084 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 8d895c1478..c1d96d5249 100644 --- a/dependencies-latest.txt +++ b/dependencies-latest.txt @@ -1,97 +1,134 @@ -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 -"@types/react": "^18.2.7" => "^18.2.60" -"@types/react-dom": "^18.2.7" => "^18.2.19" -"cypress": "^13.6.0" => "^13.6.6" +"@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" -"rimraf": "^3.0.2" => "^5.0.5" check versions of packages/a11y/package.json using latest +"@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.11.21" +"@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.5" +"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" => "^9.1.0" -"react-router": "~6.3.0" => "^6.22.1" -"react-router-dom": "~6.3.0" => "^6.22.1" +"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 -"commander": "^6.2.1" => "^12.0.0" -"immutable": "^3.8.2" => "^5.0.0-beta.5" +"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" => "^9.1.0" +"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 "dom-helpers": "^3.4.0" => "^5.2.1" -"immutable": "^3.8.2" => "^5.0.0-beta.5" +"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-react": "^2.4.3" => "^3.2.4" -"styled-components": "^5.3.11" => "^6.1.8" +"simplebar-react": "^2.4.3" => "^3.2.5" +"styled-components": "^5.3.11" => "^6.1.11" "warning": "^3.0.0" => "^4.0.3" -"jsdom": "^20.0.3" => "^24.0.0" +"@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.22.1" -"react-i18next": "^13.5.0" => "^14.0.5" +"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.5" -"reselect": "^2.5.4" => "^5.1.0" -"msw": "^1.3.2" => "^2.2.2" -"react-i18next": "^13.5.0" => "^14.0.5" +"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.11.21" -"react-i18next": "^13.5.0" => "^14.0.5" +"@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.22.1" +"@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.9" +"@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.10" "browser-sync": "^2.29.3" => "^3.0.2" -"react-i18next": "^13.5.0" => "^14.0.5" -"react-is": "^17.0.2" => "^18.2.0" -"react-router-dom": "~6.3.0" => "^6.22.1" +"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 -"react-i18next": "^13.5.0" => "^14.0.5" +"@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.11.21" -"immutable": "^3.8.2" => "^5.0.0-beta.5" -"react-i18next": "^13.5.0" => "^14.0.5" -"react-redux": "^7.2.9" => "^9.1.0" +"@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.0" +"reselect": "^4.1.8" => "^5.1.1" check versions of packages/forms/package.json using latest -"ace-builds": "1.10.1" => "^1.32.6" -"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" -"react-i18next": "^13.5.0" => "^14.0.5" +"@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" @@ -99,63 +136,73 @@ check versions of packages/http/package.json using latest check versions of packages/icons/package.json using latest "@svgr/webpack": "^5.5.0" => "^8.1.0" "copy-webpack-plugin": "^11.0.0" => "^12.0.2" -"css-loader": "^4.3.0" => "^6.10.0" +"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.4" -"svgo": "^1.3.2" => "^3.2.0" +"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.12" -"@types/node": "^6.14.13" => "^20.11.21" -"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.0.5" +"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.0" +"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.22.1" +"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.5" +"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.5" -"jsdom": "^20.0.3" => "^24.0.0" -"react-i18next": "^13.5.0" => "^14.0.5" -"react-redux": "^7.2.9" => "^9.1.0" +"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" => "^9.1.0" +"@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.11.21" -"css-loader": "^4.3.0" => "^6.10.0" +"@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" -"sass-loader": "^13.3.3" => "^14.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.22.1" +"@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": "^11.0.0" => "^12.0.2" -"css-minimizer-webpack-plugin": "^5.0.1" => "^6.0.0" -"css-loader": "^4.3.0" => "^6.10.0" +"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.4.0" -"rimraf": "^3.0.2" => "^5.0.5" -"sass-loader": "^13.3.3" => "^14.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 @@ -163,45 +210,55 @@ check versions of packages/utils/package.json using latest 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" => "^12.0.0" +"commander": "^6.2.1" => "^12.1.0" "cpx2": "^3.0.2" => "^7.0.1" -"execa": "^4.1.0" => "^8.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.0.0" +"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 "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 -"@typescript-eslint/parser": "^6.21.0" => "^7.1.0" -"@typescript-eslint/eslint-plugin": "^6.21.0" => "^7.1.0" +"@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" @@ -210,70 +267,87 @@ check versions of tools/scripts-config-jest/package.json using latest 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.14.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" => "^6.10.0" +"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.1" -"sass-loader": "^13.3.3" => "^14.1.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.1" => "^5.0.2" +"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.5.0" -"msw": "^1.3.2" => "^2.2.2" +"@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.2.1" -"stylelint-config-sass-guidelines": "^10.0.0" => "^11.0.0" +"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 -"stylelint": "^15.11.0" => "^16.2.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" => "^12.0.0" +"@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" @@ -281,7 +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" -"chai": "^4.4.1" => "^5.1.0" +"@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 161.55s. +"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 0000000000..a714cebbdd --- /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 ed2701f855..aa7ef491ee 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 473ac8236c..d5133004d7 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.2", - "@talend/eslint-plugin": "^1.1.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 eaf006cb4e..81a0732d09 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 0582a21952..8c3f8cedfa 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.6.0", + "semver": "^7.6.2", "webpack-sources": "^3.2.3" }, "peerDependencies": { - "webpack": "^5.90.3" + "webpack": "^5.92.0" }, "devDependencies": { - "@babel/eslint-parser": "^7.23.10", + "@babel/eslint-parser": "^7.24.7", "all-contributors-cli": "^6.26.1", "codecov": "^3.8.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.90.3", + "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 23ae125d63..dfae7778fc 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 c850ddcfc4..135d9eb5a9 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 aa05bda5f7..485213c45b 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 e69007a54d..a6881c4720 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.4", - "@talend/scripts-config-react-webpack": "^16.5.0", - "@talend/scripts-config-typescript": "^11.2.0", - "@talend/babel-plugin-import-from-index": "^1.7.0", - "@talend/babel-plugin-assets-api": "^1.3.0", + "@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.90.3" + "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 e73dbfb5b3..392e6c9e48 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 1c3ee688ac..00010d88e4 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 ee81a78d05..d5245b941a 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 90adb2c293..d489aefff8 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 0000000000..185599bbb7 --- /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 03264a1df9..0f7c9589bb 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 349b3015ba..91e7b79724 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 8bd7696363..0a9ac93852 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 a1f1f827d6..c0a00ef63b 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,10 +35,10 @@ "dependencies": { "execa": "^4.1.0", "mkdirp": "^1.0.4", - "semver": "^7.6.0" + "semver": "^7.6.2" }, "devDependencies": { - "@babel/eslint-parser": "^7.23.10", + "@babel/eslint-parser": "^7.24.7", "eslint": "^8.57.0", "jest": "^29.7.0" }, diff --git a/fork/react-bootstrap/CHANGELOG.md b/fork/react-bootstrap/CHANGELOG.md index b8aedeae1c..58e3019d5e 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 b25853f6c7..87a05e8794 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,26 +43,27 @@ "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.4", - "@talend/scripts-config-babel": "^13.3.0", - "@talend/scripts-config-react-webpack": "^16.5.0", - "@testing-library/jest-dom": "^6.4.2", - "@testing-library/react": "^14.2.1", + "@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": { diff --git a/fork/react-bootstrap/src/index.js b/fork/react-bootstrap/src/index.js index 5709ee30b0..90a7961b7d 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 0fb3a1ae02..1605c60316 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 0000000000..3405e576ec --- /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 23cb1b1e37..14d0879c20 100644 --- a/package.json +++ b/package.json @@ -1,22 +1,22 @@ { "devDependencies": { - "@changesets/cli": "^2.27.1", - "@talend/scripts-config-babel": "^13.3.0", - "@talend/scripts-config-prettier": "^12.1.2", - "@talend/scripts-core": "^16.3.4", - "@talend/scripts-yarn-workspace": "^2.0.1", + "@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.57.0", "husky": "^8.0.3", "i18next-scanner": "^4.4.0", - "lint-staged": "^15.2.2", - "prettier": "^3.2.5", - "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", diff --git a/packages/a11y/CHANGELOG.md b/packages/a11y/CHANGELOG.md index b97cdc2287..3976524179 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 56f6d835ee..f83b59f97b 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.3" + "@talend/utils": "^3.2.2" }, "devDependencies": { - "@talend/eslint-config": "^13.0.2", - "@talend/eslint-plugin": "^1.1.0", - "@talend/scripts-core": "^16.3.4", - "@talend/scripts-config-typescript": "^11.2.0", - "@testing-library/react": "^14.2.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.12", - "@types/react": "^18.2.60", - "@types/react-dom": "^18.2.19", - "date-fns": "^3.3.1", + "@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 0ff2dfb2b5..5c5d1d37b3 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 861c9cac75..1438509fb9 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,12 +35,12 @@ }, "dependencies": {}, "devDependencies": { - "@talend/babel-plugin-import-from-index": "^1.7.0", - "@talend/eslint-config": "^13.0.2", - "@talend/eslint-plugin": "^1.1.0", - "@talend/scripts-core": "^16.3.4", - "@talend/scripts-config-react-webpack": "^16.5.0", - "@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.12", "read-pkg-up": "^7.0.1" @@ -41,5 +48,5 @@ "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 223bcc55c9..9ab9f95710 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 809602986c..579af4e7c8 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.4.0", - "@talend/utils": "^3.0.3", + "@talend/react-cmf": "^10.0.0", + "@talend/utils": "^3.2.0", "immutable": "^3.8.2", "redux-saga": "^1.3.0" }, "devDependencies": { - "@talend/eslint-config": "^13.0.2", - "@talend/eslint-plugin": "^1.1.0", - "@talend/scripts-core": "^16.3.4", - "@talend/scripts-config-babel": "^13.3.0", - "@talend/scripts-config-react-webpack": "^16.5.0", - "@talend/scripts-config-typescript": "^11.2.0", - "@testing-library/react": "^14.2.1", + "@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 ba4c72aee9..148391f5f1 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 7219928656..f085dbce92 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,11 +25,11 @@ "lint": "talend-scripts lint" }, "dependencies": { - "@talend/react-cmf": "^8.4.0", + "@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", @@ -29,18 +37,19 @@ "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.4", - "@talend/scripts-config-babel": "^13.3.0", - "@talend/scripts-config-react-webpack": "^16.5.0", - "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 0000000000..3405e576ec --- /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 83b361723a..20ae1a83af 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 b5d84d87c8..0000000000 --- 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 961fa2eaa9..0423ebff16 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.3", + "@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", @@ -48,35 +60,32 @@ "redux-batched-actions": "^0.5.0", "redux-batched-subscribe": "^0.1.6", "redux-saga": "^1.3.0", - "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-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.4", - "@talend/scripts-config-babel": "^13.3.0", - "@talend/scripts-config-jest": "^14.0.1", - "@talend/scripts-config-react-webpack": "^16.5.0", - "@testing-library/react": "^14.2.1", + "@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 4b32a171b8..d652a584bb 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 9e75ad476c..293597fa8d 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 b7021ea393..147cd642ff 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 2bb4da7bc5..0000000000 --- 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 3cd934df83..0000000000 --- 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 addca173f7..0000000000 --- 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 501430258a..0000000000 --- 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 0000000000..3405e576ec --- /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 2d185e1a93..cf8dd40864 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 12f3752523..66408b9d10 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.3", + "@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.5.1", - "d3": "^7.8.5", - "date-fns": "^3.3.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", @@ -63,55 +74,55 @@ "react-transition-group": "^2.9.0", "react-use": "^17.5.0", "react-virtualized": "^9.22.5", - "reactour": "^1.19.2", - "recharts": "^2.12.1", - "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.17", - "@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.4", - "@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.4.2", - "@testing-library/react": "^14.2.1", - "@testing-library/user-event": "^14.5.2", + "@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.12", - "@types/lodash": "^4.14.202", - "@types/prop-types": "^15.7.11", - "@types/react": "^18.2.60", - "@types/react-dom": "^18.2.19", + "@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.10.0", + "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.10.0", + "@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 a647d91f62..1c3c28db2d 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 308b9e092c..b02e2278f1 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 80c9e60d7a..da362c3cf9 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 e8837f0f9c..e9fc5c4080 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 387f756541..6782335ffb 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 d7d990e47d..3fd0c0f108 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 5da439426f..667e751462 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 80648e99e5..dd69b9957e 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 7748f0abc4..7e21b53751 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 922351c1a4..abfda93cd9 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 a64bbd22b5..7c56e1601c 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 920f5d18ec..bd23bb3c34 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 f559858a51..745b1c2e33 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 9e86b8bd15..8701418c6f 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 a358c4056c..883dffefca 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 ce89774837..32b5c63a1e 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 b508b3ea57..b681843c9f 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 fac14d1990..f4e08c2c4f 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 db8c830f33..0e483c08d1 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 9fe43b9e9b..3827f782d1 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 d56f17d709..ebf33cb81a 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 6ad38e2de6..65ff9d14fe 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 92954c28c5..630ab68beb 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 2880ac95ac..5f08021d44 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 1ff3eb7f72..8f2ae7efde 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 93b7a128c4..5f735eb2dd 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 67da66aa1e..c9052dd469 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 78c2ae3a15..ade64350cd 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 452123280f..32fce61d2e 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 f870b65aed..290f2b9fe7 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 807493a614..959ab04bae 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 a180071ebf..0f4ecc92d3 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 6c80ea95cb..ed28311ccf 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 bb44250162..6c44619f69 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 b7e00b3eee..9c41872a39 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 3cd0dcd6a5..d99d8e4fdb 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 b603ee7c2b..88a69166e7 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 838e50aae5..852909af45 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 573e96695d..14ab7cce76 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 1ece7b92d0..8fd30947c8 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 1c34e04b23..1c3e7cf19a 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 a3fce3798b..0f226804f6 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 543b100587..cbaa75f1e0 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 2be1c37611..1219f6e3b5 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 bab448e491..addb193310 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 0e3120a205..a656d53c6b 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 0007fd51f4..3e894d4d5e 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 a122ffdad5..36a97580da 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 aebe4b5b07..91a8cb4549 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 573e96695d..14ab7cce76 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 d812287ae1..0fa1598ff0 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 923d3d1138..0b21a729a3 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 60b3576b07..acba5c0bdd 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 297cba5633..ec026fe847 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 f282587c18..e74f1c7fe2 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 cf65263f13..76b14fdab8 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 a8d00572c3..70a978a650 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 9a8852cdc0..5a98bf4694 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 0f12ee2584..6f8acf4bbb 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 830bcee163..aaab49f975 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 85c56273e9..4e2726dc98 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 de133360a2..526dcedcec 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 9b13876c4f..514c937c4e 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 899d33ca72..7443d2a6f9 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 658fb03247..a2a26f04f4 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 83d8c565bf..a04ba0f2f1 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 fc6975001a..8f8aaa2eb1 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 414d1bc13e..d8cc89c564 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 e758daba0e..f359e9a29d 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 048eb5b765..d23f8d1e01 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 62aee9b998..e50b689cf6 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 1e6967053e..0a73ae9c26 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 e0de639081..efa899d117 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 617959b0e4..14dc33d480 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 af6d1cffeb..84a5ea717a 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 563860abd1..d18afe19d6 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 1b1ca897ee..25508a8507 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 b7835acbca..7e128179d0 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 4b0cb9f059..67430b1382 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 0489f319bc..a57615c147 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 7fa9f69aa7..b4258c7d68 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 1095445ca0..2ad72da2f8 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 d2951070ac..0587e3f4dd 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 85a76b77b2..72f56f7dfa 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 2d3108c2c7..c57b33b7f1 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 9c9ab2a83e..f3ec84bc80 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 589814f50f..45b3091651 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 31f738c447..58c25c8476 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 2984152b2c..d4e72d94a9 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 f165136252..28839a44db 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 10b48c5dde..cbbd824028 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 4136204b7c..0000000000 --- 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 fe3b5aa5b7..0000000000 --- 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 115aa8fe5d..8d67359151 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 9b800d8b33..b5b2ccec11 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 12db652ce3..ab215fb55d 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 4e2eff377b..f77bab0716 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 fbf3a42b20..0000000000 --- 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 0000000000..edf21018c8 --- /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 0d541494c7..0000000000 --- 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 03d82f6082..7c9465cf22 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 9c4168f086..0000000000 --- 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 98a10b0062..0000000000 --- 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 e241b4afe2..0000000000 --- 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 d74d271bb1..0000000000 --- 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 0000000000..cb22bebb3c --- /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 f450013ca6..f3586e7b36 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 8c304465a1..b66353b6c4 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 950b1b5152..b625bf7048 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 c35fc12229..0322957214 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 f572504992..40f01f8620 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 ac6208d2ca..ceb9379230 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 116e291fc0..658d090eb3 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 08bde0ab1d..b4f6dae0b0 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 cef79f3481..1963298fbb 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 a74b91814b..6ac5b57827 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 5eb446c7a4..6ab8c8c564 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 749663d4f7..24834ba3d3 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 c1d8ea901c..09a5f36573 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 ff51bd86a0..a36bb2c756 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 9f15ea4d61..35826168db 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 923bd97383..affe6bf059 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 2809e1276e..63c7a4db4d 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 90d7a42423..28a4752302 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 f00a1d691a..324ccf1ffc 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 1a4438b04f..9365bd069e 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 a12ddc7b69..98a4cc2eb4 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 33f62fb20a..65b3870945 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 11329da8f5..f481dc6307 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 a591a2ae6f..7a40adfc57 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 f6997a74d1..a8a5e94a0d 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 aed17415d5..e6d05ce9f5 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 555072928e..54d21024b7 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 b1871b1caa..82184fddfd 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 2f5904d942..83daebe506 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 d0940fbdb0..4783c6ddfd 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 52b95cd0a2..b0c21bfdd0 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 5c1e44353b..3c17189351 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 3baee74676..7fa925905b 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 eac23203e2..5459b71e0c 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 1d18f6558d..2158b8d117 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 83c3b1c9f4..e02b375614 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 71c4610d6e..7683b4d646 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 8d6ccd8392..893f6f6e94 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 084c1c2509..9b12b61b39 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 2eebe92d2c..e50d3dc43d 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 12d192e41d..f156d43cd1 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 42400695b5..e0bc5701b6 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 eba5fe7450..aee6599b6d 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 b6bc45cd3e..b0f0e9a56b 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 c5d19b2574..06dc420333 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 253e0644c0..052d2d8a0a 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 544c42b178..2fc5b56aea 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 a582017372..16b526d330 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 389181cb33..65f91bd2df 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 5aaec997f5..ed6c62c549 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 4ac728b06a..3fbd1171b6 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 a7c0394c71..8a1cb2f287 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 bd42e5be09..7f2937bfb8 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 331b0a93f8..aa7a8e6d35 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,11 +45,11 @@ "url": "https://github.com/Talend/ui.git" }, "dependencies": { - "@talend/design-system": "^9.7.2", - "@talend/react-cmf": "^8.4.0", - "@talend/react-components": "^15.3.0", - "@talend/react-forms": "^13.2.1", - "@talend/utils": "^3.0.3", + "@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", @@ -48,40 +60,40 @@ "reselect": "^2.5.4" }, "devDependencies": { - "@storybook/addon-actions": "^7.6.17", - "@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.4", - "@talend/scripts-config-babel": "^13.3.0", - "@talend/scripts-config-storybook-lib": "^5.3.0", - "@talend/scripts-config-react-webpack": "^16.5.0", - "@testing-library/react": "^14.2.1", + "@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.10.0", + "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.10.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" }, "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 e32d83f84f..a3359d034c 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 cbf0172c56..27f66d3cc3 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 2bc6204131..240f84cb16 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(