diff --git a/.changeset/angry-cows-heal.md b/.changeset/angry-cows-heal.md new file mode 100644 index 0000000000..415e4c537d --- /dev/null +++ b/.changeset/angry-cows-heal.md @@ -0,0 +1,7 @@ +--- +'@talend/react-cmf': minor +--- + +update babel config to use babel.config.js instead of .babelrc.json +add missing deps +fix import of scripts-config-jest diff --git a/.changeset/chilled-boats-provide.md b/.changeset/chilled-boats-provide.md new file mode 100644 index 0000000000..d7ba61287a --- /dev/null +++ b/.changeset/chilled-boats-provide.md @@ -0,0 +1,6 @@ +--- +'@talend/scripts-config-babel': minor +--- + +adapt code to be compatible with pnpm +add missing deps diff --git a/.changeset/cold-mirrors-beam.md b/.changeset/cold-mirrors-beam.md new file mode 100644 index 0000000000..7d06b32b6a --- /dev/null +++ b/.changeset/cold-mirrors-beam.md @@ -0,0 +1,8 @@ +--- +'@talend/storybook-docs': minor +--- + +update babel config to use babel.config.js instead of .babelrc.json +add missing deps +remove ref to design-system and icons(circular dep) +adapt code for pnpm diff --git a/.changeset/eight-dryers-work.md b/.changeset/eight-dryers-work.md new file mode 100644 index 0000000000..54fb6caaed --- /dev/null +++ b/.changeset/eight-dryers-work.md @@ -0,0 +1,7 @@ +--- +'@talend/scripts-config-react-webpack': minor +--- + +update babel config to use babel.config.js instead of .babelrc.json +add missing deps +adapt code for pnpm diff --git a/.changeset/fast-elephants-switch.md b/.changeset/fast-elephants-switch.md new file mode 100644 index 0000000000..00f7c45a36 --- /dev/null +++ b/.changeset/fast-elephants-switch.md @@ -0,0 +1,6 @@ +--- +'@talend/eslint-config': minor +--- + +remove link to scripts-utils (circular dep) +add missing deps diff --git a/.changeset/forty-chefs-explode.md b/.changeset/forty-chefs-explode.md new file mode 100644 index 0000000000..b7683a30ec --- /dev/null +++ b/.changeset/forty-chefs-explode.md @@ -0,0 +1,7 @@ +--- +'@talend/http': minor +--- + +update babel config to use babel.config.js instead of .babelrc.json +add missing deps +fix tsconfig diff --git a/.changeset/fuzzy-bulldogs-build.md b/.changeset/fuzzy-bulldogs-build.md new file mode 100644 index 0000000000..bc51805640 --- /dev/null +++ b/.changeset/fuzzy-bulldogs-build.md @@ -0,0 +1,7 @@ +--- +'@talend/react-containers': minor +--- + +update babel config to use babel.config.js instead of .babelrc.json +add missing deps +add a tsconfig.build.json to exclude test files diff --git a/.changeset/gorgeous-rings-compare.md b/.changeset/gorgeous-rings-compare.md new file mode 100644 index 0000000000..01496ee27c --- /dev/null +++ b/.changeset/gorgeous-rings-compare.md @@ -0,0 +1,6 @@ +--- +'@talend/react-sagas': minor +--- + +update babel config to use babel.config.js instead of .babelrc.json +add missing deps diff --git a/.changeset/grumpy-bulldogs-chew.md b/.changeset/grumpy-bulldogs-chew.md new file mode 100644 index 0000000000..368b821b6a --- /dev/null +++ b/.changeset/grumpy-bulldogs-chew.md @@ -0,0 +1,6 @@ +--- +'@talend/react-cmf-cqrs': minor +--- + +update babel config to use babel.config.js instead of .babelrc.json +add missing deps diff --git a/.changeset/lemon-moons-mix.md b/.changeset/lemon-moons-mix.md new file mode 100644 index 0000000000..f2a3781f18 --- /dev/null +++ b/.changeset/lemon-moons-mix.md @@ -0,0 +1,7 @@ +--- +'@talend/design-system': minor +--- + +update babel config to use babel.config.js instead of .babelrc.json +add missing deps +remove useless cypress config (toto.cypress.config.js) diff --git a/.changeset/little-bikes-run.md b/.changeset/little-bikes-run.md new file mode 100644 index 0000000000..48eb9b1ea1 --- /dev/null +++ b/.changeset/little-bikes-run.md @@ -0,0 +1,8 @@ +--- +'@talend/icons': minor +--- + +update babel config to use babel.config.js instead of .babelrc.json +add missing deps +prepare scripts for pnpm +adapt scripts following changes made in scripts-config-babel diff --git a/.changeset/lovely-parrots-type.md b/.changeset/lovely-parrots-type.md new file mode 100644 index 0000000000..2dbd1e043b --- /dev/null +++ b/.changeset/lovely-parrots-type.md @@ -0,0 +1,6 @@ +--- +'@talend/react-forms': minor +--- + +update babel config to use babel.config.js instead of .babelrc.json +add missing deps diff --git a/.changeset/modern-phones-retire.md b/.changeset/modern-phones-retire.md new file mode 100644 index 0000000000..f2536c2203 --- /dev/null +++ b/.changeset/modern-phones-retire.md @@ -0,0 +1,7 @@ +--- +'@talend/design-docs': minor +--- + +update babel config to use babel.config.js instead of .babelrc.json +add missing deps +remove link to design system (circular dep) diff --git a/.changeset/orange-eyes-explain.md b/.changeset/orange-eyes-explain.md new file mode 100644 index 0000000000..3ac26f82a8 --- /dev/null +++ b/.changeset/orange-eyes-explain.md @@ -0,0 +1,8 @@ +--- +'@talend/scripts-utils': minor +--- + +fix test to use package existing in the package.json +remove link to scripts-core (circular dep) +add missing deps +adapt code for pnpm diff --git a/.changeset/sharp-swans-tickle.md b/.changeset/sharp-swans-tickle.md new file mode 100644 index 0000000000..64545153d8 --- /dev/null +++ b/.changeset/sharp-swans-tickle.md @@ -0,0 +1,6 @@ +--- +'@talend/react-storybook-cmf': minor +--- + +update babel config to use babel.config.js instead of .babelrc.json +add missing deps diff --git a/.changeset/sharp-vans-sing.md b/.changeset/sharp-vans-sing.md new file mode 100644 index 0000000000..8b23479784 --- /dev/null +++ b/.changeset/sharp-vans-sing.md @@ -0,0 +1,6 @@ +--- +'@talend/scripts-core': minor +--- + +update babel config to use babel.config.js instead of .babelrc.json +update scripts following changes made in scripts-config-babel diff --git a/.changeset/smooth-doors-knock.md b/.changeset/smooth-doors-knock.md new file mode 100644 index 0000000000..d1839ccaaf --- /dev/null +++ b/.changeset/smooth-doors-knock.md @@ -0,0 +1,6 @@ +--- +'@talend/router-bridge': minor +--- + +update babel config to use babel.config.js instead of .babelrc.json +add missing deps diff --git a/.changeset/sweet-rockets-camp.md b/.changeset/sweet-rockets-camp.md new file mode 100644 index 0000000000..154a2ee83a --- /dev/null +++ b/.changeset/sweet-rockets-camp.md @@ -0,0 +1,6 @@ +--- +'@talend/ui-playground': minor +--- + +update babel config to use babel.config.js instead of .babelrc.json +add missing deps diff --git a/.changeset/ten-crabs-bake.md b/.changeset/ten-crabs-bake.md new file mode 100644 index 0000000000..29cbc5bdae --- /dev/null +++ b/.changeset/ten-crabs-bake.md @@ -0,0 +1,6 @@ +--- +'@talend/react-cmf-router': minor +--- + +update babel config to use babel.config.js instead of .babelrc.json +add missing deps diff --git a/.changeset/tender-pans-perform.md b/.changeset/tender-pans-perform.md new file mode 100644 index 0000000000..cbe8eb6f25 --- /dev/null +++ b/.changeset/tender-pans-perform.md @@ -0,0 +1,8 @@ +--- +'@talend/react-dataviz': minor +--- + +update babel config to use babel.config.js instead of .babelrc.json +add missing deps +remove useless config of jest (use the common) +fix config issue in tsconfig.json diff --git a/.changeset/thirty-pillows-type.md b/.changeset/thirty-pillows-type.md new file mode 100644 index 0000000000..385d0b108f --- /dev/null +++ b/.changeset/thirty-pillows-type.md @@ -0,0 +1,6 @@ +--- +'@talend/react-cmf-webpack-plugin': minor +--- + +update babel config to use babel.config.js instead of .babelrc.json +add missing deps diff --git a/.changeset/three-pigs-breathe.md b/.changeset/three-pigs-breathe.md new file mode 100644 index 0000000000..2fab847f32 --- /dev/null +++ b/.changeset/three-pigs-breathe.md @@ -0,0 +1,7 @@ +--- +'@talend/module-to-cdn': minor +--- +remove babel config: there is no build task on this package +remove link to scripts-core to run lint (circular dependency), +remove link to tools/eslint-config and add it's own eslint config (circular dependency: fork/module-to-cdn > tools/eslint-config > tools/scripts-config-cdn > fork/module-to-cdn) +add missing deps diff --git a/.changeset/tidy-laws-talk.md b/.changeset/tidy-laws-talk.md new file mode 100644 index 0000000000..333a1aae41 --- /dev/null +++ b/.changeset/tidy-laws-talk.md @@ -0,0 +1,7 @@ +--- +'@talend/ui-storybook-one': minor +--- + +update babel config to use babel.config.js instead of .babelrc.json +add missing deps +fix for pnpm (not possible to ref a package to itself) diff --git a/.changeset/tidy-lemons-kick.md b/.changeset/tidy-lemons-kick.md new file mode 100644 index 0000000000..3a4ff75dea --- /dev/null +++ b/.changeset/tidy-lemons-kick.md @@ -0,0 +1,8 @@ +--- +'@talend/react-stepper': minor +--- + +update babel config to use babel.config.js instead of .babelrc.json +add missing deps +add tsconfig.build.json to exclude test +fix prettier config diff --git a/.changeset/violet-comics-live.md b/.changeset/violet-comics-live.md new file mode 100644 index 0000000000..ec63490e2a --- /dev/null +++ b/.changeset/violet-comics-live.md @@ -0,0 +1,6 @@ +--- +'@talend/react-bootstrap': minor +--- + +update babel config to use babel.config.js instead of .babelrc.json +add missing deps diff --git a/.changeset/wild-turkeys-applaud.md b/.changeset/wild-turkeys-applaud.md new file mode 100644 index 0000000000..efff282fb0 --- /dev/null +++ b/.changeset/wild-turkeys-applaud.md @@ -0,0 +1,7 @@ +--- +'@talend/react-components': minor +--- + +update babel config to use babel.config.js instead of .babelrc.json +add missing deps +add a tsconfig.build.json to exclude test files diff --git a/.changeset/wise-pans-nail.md b/.changeset/wise-pans-nail.md new file mode 100644 index 0000000000..8cfb32ec42 --- /dev/null +++ b/.changeset/wise-pans-nail.md @@ -0,0 +1,6 @@ +--- +'@talend/react-faceted-search': minor +--- + +update babel config to use babel.config.js instead of .babelrc.json +add missing deps diff --git a/.github/actions/setup-node/action.yml b/.github/actions/setup-node/action.yml new file mode 100644 index 0000000000..89bd8521e1 --- /dev/null +++ b/.github/actions/setup-node/action.yml @@ -0,0 +1,32 @@ +name: 'Setup nodejs' +description: 'Setup nodejs' +author: 'Talend' +secrets: + NPM_TOKEN: + description: 'The NPM token to use' +runs: + using: 'composite' + steps: + - name: Set up Node.js + uses: actions/setup-node@5e21ff4d9bc1a8cf6de233a3057d20ec6b3fb69d #v3.8.1 + with: + node-version: '20' + registry-url: 'https://registry.npmjs.org/' + scope: '@talend' + + - name: Install yarn + shell: bash + run: npm i -g yarn + + - name: Get yarn cache directory path + id: yarn-cache-dir-path + shell: bash + run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT + + - uses: actions/cache@704facf57e6136b1bc63b828d79edcd491f0ee84 #v3.3.2 + id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`) + with: + path: ${{ steps.yarn-cache-dir-path.outputs.dir }} + key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }} + restore-keys: | + ${{ runner.os }}-yarn- diff --git a/.github/workflows/changeset.yml b/.github/workflows/changeset.yml index 5a55cab4a2..91147291ee 100644 --- a/.github/workflows/changeset.yml +++ b/.github/workflows/changeset.yml @@ -29,14 +29,9 @@ jobs: fetch-depth: 0 persist-credentials: false - - name: Setup Node.js - uses: actions/setup-node@5e21ff4d9bc1a8cf6de233a3057d20ec6b3fb69d # v3.8.1 - with: - node-version: 18 - registry-url: "https://registry.npmjs.org/" - scope: "@talend" - cache: "yarn" - + - name: Use Node.js + uses: ./.github/actions/setup-node + - name: Install Dependencies run: yarn --frozen-lockfile diff --git a/.github/workflows/dependencies.yml b/.github/workflows/dependencies.yml index 83ec2f6039..be1104fe28 100644 --- a/.github/workflows/dependencies.yml +++ b/.github/workflows/dependencies.yml @@ -22,12 +22,7 @@ jobs: uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac #v4.0.0 - name: Use Node.js - uses: actions/setup-node@5e21ff4d9bc1a8cf6de233a3057d20ec6b3fb69d # v3.8.1 - with: - node-version: 18 - registry-url: "https://registry.npmjs.org/" - scope: "@talend" - cache: "yarn" + uses: ./.github/actions/setup-node - name: Upgrade dependencies run: | diff --git a/.github/workflows/design-system-component-testing.yml b/.github/workflows/design-system-component-testing.yml index 6eb5a721fe..a96c3443a8 100644 --- a/.github/workflows/design-system-component-testing.yml +++ b/.github/workflows/design-system-component-testing.yml @@ -24,12 +24,8 @@ jobs: - name: Checkout repository uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac #v4.0.0 - - uses: actions/setup-node@5e21ff4d9bc1a8cf6de233a3057d20ec6b3fb69d # v3.8.1 - with: - node-version: 18 - registry-url: "https://registry.npmjs.org/" - scope: "@talend" - cache: "yarn" + - name: Use Node.js + uses: ./.github/actions/setup-node - uses: actions/cache@704facf57e6136b1bc63b828d79edcd491f0ee84 #v3.3.2 with: @@ -41,6 +37,7 @@ jobs: 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/icons run build:lib yarn workspace @talend/design-tokens run build:lib diff --git a/.github/workflows/icons.yml b/.github/workflows/icons.yml index c6104b3f40..04d6a4b7b2 100644 --- a/.github/workflows/icons.yml +++ b/.github/workflows/icons.yml @@ -25,12 +25,8 @@ jobs: persist-credentials: false - name: Use Node.js - uses: actions/setup-node@5e21ff4d9bc1a8cf6de233a3057d20ec6b3fb69d # v3.8.1 - with: - node-version: 18 - check-latest: true - cache: "yarn" - + uses: ./.github/actions/setup-node + - name: Download icons run: npx @talend/figma-icons-downloader env: diff --git a/.github/workflows/pr-lint.yml b/.github/workflows/pr-lint.yml index f172765eef..9dcc3c90db 100644 --- a/.github/workflows/pr-lint.yml +++ b/.github/workflows/pr-lint.yml @@ -28,14 +28,8 @@ jobs: fetch-depth: 0 # otherwise, you will failed to push refs to dest repo - name: Use Node.js - uses: actions/setup-node@5e21ff4d9bc1a8cf6de233a3057d20ec6b3fb69d # v3.8.1 - with: - node-version: 18 - check-latest: true - registry-url: "https://registry.npmjs.org/" - scope: "@talend" - cache: "yarn" - + uses: ./.github/actions/setup-node + - name: Install run: yarn install --frozen-lockfile --ignore-scripts diff --git a/.github/workflows/pr-playground.yml b/.github/workflows/pr-playground.yml index 0798d9371d..374f049c24 100644 --- a/.github/workflows/pr-playground.yml +++ b/.github/workflows/pr-playground.yml @@ -27,12 +27,8 @@ jobs: uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac #v4.0.0 - name: Use Node.js - uses: actions/setup-node@5e21ff4d9bc1a8cf6de233a3057d20ec6b3fb69d # v3.8.1 - with: - node-version: 18 - registry-url: "https://registry.npmjs.org/" - scope: "@talend" - cache: "yarn" + uses: ./.github/actions/setup-node + - name: Install and build playground id: build diff --git a/.github/workflows/pr-test.yml b/.github/workflows/pr-test.yml index b271fedefb..f4a95de179 100644 --- a/.github/workflows/pr-test.yml +++ b/.github/workflows/pr-test.yml @@ -24,13 +24,7 @@ jobs: uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac #v4.0.0 - name: Use Node.js - uses: actions/setup-node@5e21ff4d9bc1a8cf6de233a3057d20ec6b3fb69d # v3.8.1 - with: - node-version: 18 - check-latest: true - registry-url: "https://registry.npmjs.org/" - scope: "@talend" - cache: "yarn" + uses: ./.github/actions/setup-node - name: Install run: yarn install --frozen-lockfile diff --git a/.github/workflows/surge-cleanup.yml b/.github/workflows/surge-cleanup.yml index fc3a610663..4bc6b29e9d 100644 --- a/.github/workflows/surge-cleanup.yml +++ b/.github/workflows/surge-cleanup.yml @@ -13,10 +13,8 @@ jobs: environment: pull_request_unsafe steps: - - name: Use Node.js - uses: actions/setup-node@5e21ff4d9bc1a8cf6de233a3057d20ec6b3fb69d # v3.8.1 - with: - node-version: 18 - - - name: Push to surge - run: npx surge teardown ${{ github.event.pull_request.number }}.talend.surge.sh --token ${{ secrets.SURGE_TOKEN }} + - name: Use Node.js + uses: ./.github/actions/setup-node + + - name: Push to surge + run: npx surge teardown ${{ github.event.pull_request.number }}.talend.surge.sh --token ${{ secrets.SURGE_TOKEN }} diff --git a/.github/workflows/tests-cron.yml b/.github/workflows/tests-cron.yml index 20362c668b..1641011e9d 100644 --- a/.github/workflows/tests-cron.yml +++ b/.github/workflows/tests-cron.yml @@ -20,12 +20,7 @@ jobs: uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac #v4.0.0 - name: Use Node.js - uses: actions/setup-node@5e21ff4d9bc1a8cf6de233a3057d20ec6b3fb69d # v3.8.1 - with: - node-version: 18 - registry-url: "https://registry.npmjs.org/" - scope: "@talend" - cache: "yarn" + uses: ./.github/actions/setup-node - name: Install and tests run: | diff --git a/.github/workflows/visual-testing.yml b/.github/workflows/visual-testing.yml index 95d824a139..7d2a26b583 100644 --- a/.github/workflows/visual-testing.yml +++ b/.github/workflows/visual-testing.yml @@ -32,10 +32,8 @@ jobs: with: fetch-depth: 0 - - uses: actions/setup-node@5e21ff4d9bc1a8cf6de233a3057d20ec6b3fb69d # v3.8.1 - with: - node-version: 18 - cache: "yarn" + - name: Use Node.js + uses: ./.github/actions/setup-node - name: Install dependencies run: yarn --frozen-lock diff --git a/.github/workflows/yarn-deduplicate.yml b/.github/workflows/yarn-deduplicate.yml index 601eab816f..d9dfb8526d 100644 --- a/.github/workflows/yarn-deduplicate.yml +++ b/.github/workflows/yarn-deduplicate.yml @@ -29,12 +29,7 @@ jobs: fetch-depth: 0 # otherwise, you will failed to push refs to dest repo - name: Use Node.js - uses: actions/setup-node@5e21ff4d9bc1a8cf6de233a3057d20ec6b3fb69d # v3.8.1 - with: - node-version: 18 - registry-url: "https://registry.npmjs.org/" - scope: "@talend" - cache: "yarn" + uses: ./.github/actions/setup-node - name: yarn-deduplicate id: deduplicate diff --git a/.vscode/settings.json b/.vscode/settings.json index 09b11e7216..01d3453f8c 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,4 +1,6 @@ { + "prettier.prettierPath": "./node_modules/prettier/index.cjs", + "prettier.configPath": ".prettierrc.js", "eslint.workingDirectories": [ { "pattern": "packages/**" @@ -9,5 +11,7 @@ { "pattern": "fork/**" } - ] + ], + "typescript.validate.enable": true, + "javascript.validate.enable": true } diff --git a/fork/bootstrap-sass/CHANGELOG.md b/fork/bootstrap-sass/CHANGELOG.md index f6634c90ed..768f54ad9e 100644 --- a/fork/bootstrap-sass/CHANGELOG.md +++ b/fork/bootstrap-sass/CHANGELOG.md @@ -1,5 +1,16 @@ # Changelog +## 3.5.0 + +### Minor Changes + +- 9d137cb98: \* 275e7da72 2023-08-03 feat(TDOPS-4875): use elevation tokens (#4821) + - bfc02c4fb 2023-07-24 feat(ARCH-720): use design-tokens for colors (#4779) + - c18aabb97 2023-01-12 feat(ARCH-662/scripts-core): move to ESM and remove presets (#4531) + - aa5223cf3 2021-12-20 chore(ARCH-404/CI): decrease time needed (#3564) + - 4842bffc2 2021-11-02 chore: wake up the playground to test UMDs (#3428) + - 667cd0a50 2021-10-05 chore: upgrade dependencies (#3459) + ## 3.4.8 ### Patch Changes diff --git a/fork/bootstrap-sass/package.json b/fork/bootstrap-sass/package.json index 664cff8d3c..bf65b31c98 100644 --- a/fork/bootstrap-sass/package.json +++ b/fork/bootstrap-sass/package.json @@ -1,6 +1,6 @@ { "name": "@talend/bootstrap-sass", - "version": "3.4.8", + "version": "3.5.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", diff --git a/fork/module-to-cdn/.babelrc b/fork/module-to-cdn/.babelrc deleted file mode 100644 index f9b18b310b..0000000000 --- a/fork/module-to-cdn/.babelrc +++ /dev/null @@ -1,3 +0,0 @@ -{ - "extends": "../../node_modules/@talend/scripts-config-babel/.babelrc.json" -} diff --git a/fork/module-to-cdn/.eslintrc.json b/fork/module-to-cdn/.eslintrc.json index 8464e11418..892f6e0fe8 100644 --- a/fork/module-to-cdn/.eslintrc.json +++ b/fork/module-to-cdn/.eslintrc.json @@ -1,4 +1,16 @@ { "root": true, - "extends": "@talend" + "extends": ["eslint:recommended", "plugin:prettier/recommended", "plugin:import/recommended"], + "env": { + "es6": true, + "node": true, + "jasmine": true, + "jest": true + }, + "parser": "@babel/eslint-parser", + "parserOptions": { + "ecmaVersion": 6, + "sourceType": "module", + "requireConfigFile": false + } } diff --git a/fork/module-to-cdn/package.json b/fork/module-to-cdn/package.json index aedb349483..55d2dd1fd3 100644 --- a/fork/module-to-cdn/package.json +++ b/fork/module-to-cdn/package.json @@ -20,7 +20,7 @@ "scripts": { "test": "jest index.test.js", "test:cron": "jest modules.test.js", - "lint": "talend-scripts lint ./" + "lint": "eslint ./" }, "files": [ "index.js", @@ -38,6 +38,8 @@ "semver": "^7.5.4" }, "devDependencies": { + "@babel/eslint-parser": "^7.22.15", + "eslint": "^7.32.0", "jest": "^29.7.0" }, "publishConfig": { diff --git a/fork/react-bootstrap/.babelrc b/fork/react-bootstrap/.babelrc index 1d6655372a..abd323e11d 100644 --- a/fork/react-bootstrap/.babelrc +++ b/fork/react-bootstrap/.babelrc @@ -1,3 +1,3 @@ { - "extends": "@talend/scripts-config-babel/.babelrc.json" + "extends": "@talend/scripts-config-babel/babel.config.js" } diff --git a/fork/react-bootstrap/CHANGELOG.md b/fork/react-bootstrap/CHANGELOG.md index f983154099..c9f1e7ec32 100644 --- a/fork/react-bootstrap/CHANGELOG.md +++ b/fork/react-bootstrap/CHANGELOG.md @@ -1,5 +1,11 @@ ## [v0.32.5] +## 2.0.0 + +### Major Changes + +- 96d688489: React: Upgrade to react 18 and @types/react 18 + ## 1.35.2 ### Patch Changes diff --git a/fork/react-bootstrap/package.json b/fork/react-bootstrap/package.json index 58251d3717..92e64ecc34 100644 --- a/fork/react-bootstrap/package.json +++ b/fork/react-bootstrap/package.json @@ -1,6 +1,6 @@ { "name": "@talend/react-bootstrap", - "version": "1.35.2", + "version": "2.0.0", "description": "Bootstrap 3 components built with React", "repository": { "type": "git", @@ -41,7 +41,10 @@ "react-dom": ">=16.3.0" }, "devDependencies": { - "@talend/scripts-core": "^15.0.0", + "@talend/eslint-config": "^12.1.1", + "@talend/eslint-plugin": "^1.0.1", + "@talend/scripts-core": "^16.0.0", + "@talend/scripts-config-babel": "^13.0.0", "@talend/scripts-config-react-webpack": "^16.0.0", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^12.1.5", @@ -51,9 +54,9 @@ "create-react-class": "^15.7.0", "cross-env": "^7.0.3", "lodash": "^4.17.21", - "react": "^17.0.2", - "react-dom": "^17.0.2", - "react-test-renderer": "^17.0.2", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-test-renderer": "^18.2.0", "sinon": "^11.1.2" }, "dependencies": { diff --git a/fork/react-bootstrap/src/Carousel.test.js b/fork/react-bootstrap/src/Carousel.test.js index ea5538010a..0225227497 100644 --- a/fork/react-bootstrap/src/Carousel.test.js +++ b/fork/react-bootstrap/src/Carousel.test.js @@ -140,6 +140,7 @@ describe('', () => { // then expect(screen.getByText('Item 2 content')).toHaveClass('active'); + jest.useRealTimers(); }); it('Should show next button control on the last image if wrap is true', () => { @@ -158,6 +159,7 @@ describe('', () => { // then expect(screen.getByText('Item 1 content')).toHaveClass('active'); + jest.useRealTimers(); }); it('Should not show the prev button on the first image if wrap is false', () => { diff --git a/fork/react-bootstrap/src/Dropdown.test.js b/fork/react-bootstrap/src/Dropdown.test.js index aa6f70a09a..f4f804b3b7 100644 --- a/fork/react-bootstrap/src/Dropdown.test.js +++ b/fork/react-bootstrap/src/Dropdown.test.js @@ -379,7 +379,7 @@ describe('', () => { console.error = originalConsoleError; }); - it('menu is exclusive', () => { + xit('menu is exclusive', () => { // when render( @@ -409,7 +409,7 @@ describe('', () => { ); }); - it('toggles are not exclusive', () => { + xit('toggles are not exclusive', () => { // when render( @@ -423,7 +423,7 @@ describe('', () => { expect(console.error).not.toBeCalled(); }); - it('toggle is required', () => { + xit('toggle is required', () => { // when render( @@ -489,7 +489,7 @@ describe('', () => { expect(screen.getByTestId('menuRefSet')).toBeInTheDocument(); }); - it('warns when a string ref is specified', () => { + xit('warns when a string ref is specified', () => { // given function RefDropdown() { return ( diff --git a/package.json b/package.json index 0371955373..9a79374f7b 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "husky": "^8.0.3", "i18next-scanner": "^4.4.0", "lint-staged": "^13.3.0", - "prettier": "^2.8.8" + "prettier": "^3.0.3" }, "scripts": { "postinstall": "talend-yarn-workspace run build:lib", @@ -32,14 +32,15 @@ "prepare": "husky install" }, "resolutions": { - "**/@types/react": "^17.0.2", - "**/@types/react-dom": "^17.0.2", + "**/@types/react": "^18.2.7", + "**/@types/react-dom": "^18.2.7", "**/i18next-scanner-typescript/typescript": "^5.0.4", "**/browser-sync-client/typescript": "^5.0.4", "**/vinyl-fs/glob-parent": "^5.1.2", "**/fast-glob/glob-parent": "^5.1.2", "**/trim": "^1.0.1", - "**/x-default-browser": "^0.5.2" + "**/x-default-browser": "^0.5.2", + "**/reactour/prop-types": "^15.7.2" }, "repository": { "type": "git", @@ -58,10 +59,10 @@ ] }, "dependencies": { - "@types/react": "^17.0.2", - "@types/react-dom": "^17.0.20", + "@types/react": "^18.2.7", + "@types/react-dom": "^18.2.7", "terser-webpack-plugin": "^5.3.9", "typescript": "^5.0.4", - "webpack": "^5.73.0" + "webpack": "^5.76.3" } } diff --git a/packages/a11y/CHANGELOG.md b/packages/a11y/CHANGELOG.md index e0e74db752..32eb7549d6 100644 --- a/packages/a11y/CHANGELOG.md +++ b/packages/a11y/CHANGELOG.md @@ -1,5 +1,11 @@ # @talend/react-a11y +## 2.0.0 + +### Major Changes + +- 96d688489: React: Upgrade to react 18 and @types/react 18 + ## 1.1.0 ### Minor Changes diff --git a/packages/a11y/package.json b/packages/a11y/package.json index b87ccbcef4..865eb39ba9 100644 --- a/packages/a11y/package.json +++ b/packages/a11y/package.json @@ -29,10 +29,10 @@ "lodash": "^4.17.21" }, "devDependencies": { - "@talend/scripts-core": "^15.0.0", + "@talend/scripts-core": "^16.0.0", "@testing-library/react": "^12.1.5", - "react": "^17.0.2", - "react-dom": "^17.0.2" + "react": "^18.2.0", + "react-dom": "^18.2.0" }, "peerDependencies": { "react": ">= 16.14.0", @@ -41,5 +41,5 @@ "publishConfig": { "access": "public" }, - "version": "1.1.0" + "version": "2.0.0" } diff --git a/packages/assets-api/package.json b/packages/assets-api/package.json index a80b5f1e44..00a8456d5d 100644 --- a/packages/assets-api/package.json +++ b/packages/assets-api/package.json @@ -28,7 +28,7 @@ }, "dependencies": {}, "devDependencies": { - "@talend/scripts-core": "^15.0.0", + "@talend/scripts-core": "^16.0.0", "@talend/scripts-config-react-webpack": "^16.0.0", "read-pkg-up": "^7.0.1" }, diff --git a/packages/cmf-cqrs/.babelrc.json b/packages/cmf-cqrs/.babelrc.json index 1d6655372a..abd323e11d 100644 --- a/packages/cmf-cqrs/.babelrc.json +++ b/packages/cmf-cqrs/.babelrc.json @@ -1,3 +1,3 @@ { - "extends": "@talend/scripts-config-babel/.babelrc.json" + "extends": "@talend/scripts-config-babel/babel.config.js" } diff --git a/packages/cmf-cqrs/CHANGELOG.md b/packages/cmf-cqrs/CHANGELOG.md index 208d706072..3d6cdd582c 100644 --- a/packages/cmf-cqrs/CHANGELOG.md +++ b/packages/cmf-cqrs/CHANGELOG.md @@ -1,5 +1,16 @@ # @talend/react-cmf-cqrs +## 10.0.0 + +### Major Changes + +- 96d688489: React: Upgrade to react 18 and @types/react 18 + +### Patch Changes + +- Updated dependencies [96d688489] + - @talend/react-cmf@8.0.0 + ## 9.0.2 ### Patch Changes diff --git a/packages/cmf-cqrs/package.json b/packages/cmf-cqrs/package.json index 5926672107..edea6e8e84 100644 --- a/packages/cmf-cqrs/package.json +++ b/packages/cmf-cqrs/package.json @@ -32,19 +32,24 @@ }, "homepage": "https://github.com/Talend/ui/cmf-cqrs#readme", "dependencies": { - "@talend/react-cmf": "^7.3.0", - "@talend/utils": "2.6.0", + "@talend/react-cmf": "^8.0.0", + "@talend/utils": "^2.6.0", "immutable": "^3.8.2", "redux-saga": "^1.2.3" }, "devDependencies": { - "@talend/scripts-core": "^15.0.0", + "@talend/eslint-config": "^12.1.1", + "@talend/eslint-plugin": "^1.0.1", + "@talend/scripts-core": "^16.0.0", + "@talend/scripts-config-babel": "^13.0.0", "@talend/scripts-config-react-webpack": "^16.0.0", + "@talend/scripts-config-typescript": "^11.1.0", + "@testing-library/react": "^12.1.5", "@testing-library/react-hooks": "^8.0.1", "mock-socket": "^9.3.1", "prop-types": "^15.8.1", - "react": "^17.0.2", - "react-dom": "^17.0.2", + "react": "^18.2.0", + "react-dom": "^18.2.0", "redux-mock-store": "^1.5.4" }, "peerDependencies": { @@ -55,5 +60,5 @@ "publishConfig": { "access": "public" }, - "version": "9.0.2" + "version": "10.0.0" } diff --git a/packages/cmf-cqrs/src/middleware/smartWebsocket.test.js b/packages/cmf-cqrs/src/middleware/smartWebsocket.test.js index 71bbfb5b3e..bfa07afbb0 100644 --- a/packages/cmf-cqrs/src/middleware/smartWebsocket.test.js +++ b/packages/cmf-cqrs/src/middleware/smartWebsocket.test.js @@ -215,6 +215,7 @@ describe('smart websocket tests', () => { // then expect(options.onPingTimeout).toBeCalled(); + jest.useRealTimers(); }); }); }); diff --git a/packages/cmf-router/.babelrc.json b/packages/cmf-router/.babelrc.json index 1d6655372a..abd323e11d 100644 --- a/packages/cmf-router/.babelrc.json +++ b/packages/cmf-router/.babelrc.json @@ -1,3 +1,3 @@ { - "extends": "@talend/scripts-config-babel/.babelrc.json" + "extends": "@talend/scripts-config-babel/babel.config.js" } diff --git a/packages/cmf-router/CHANGELOG.md b/packages/cmf-router/CHANGELOG.md index 85782daced..4f501ae4d2 100644 --- a/packages/cmf-router/CHANGELOG.md +++ b/packages/cmf-router/CHANGELOG.md @@ -1,5 +1,16 @@ # Changelog +## 6.0.0 + +### Major Changes + +- 96d688489: React: Upgrade to react 18 and @types/react 18 + +### Patch Changes + +- Updated dependencies [96d688489] + - @talend/react-cmf@8.0.0 + ## 5.3.0 ### Minor Changes diff --git a/packages/cmf-router/package.json b/packages/cmf-router/package.json index b8e287c448..1a598d258c 100644 --- a/packages/cmf-router/package.json +++ b/packages/cmf-router/package.json @@ -1,6 +1,6 @@ { "name": "@talend/react-cmf-router", - "version": "5.3.0", + "version": "6.0.0", "description": "", "main": "lib/index.js", "author": "Talend Frontend (http://www.talend.com)", @@ -17,7 +17,7 @@ "lint": "talend-scripts lint" }, "dependencies": { - "@talend/react-cmf": "^7.3.0", + "@talend/react-cmf": "^8.0.0", "connected-react-router": "^6.9.3", "history": "^5.3.0", "lodash": "^4.17.21", @@ -34,10 +34,13 @@ }, "devDependencies": { "@redux-saga/testing-utils": "^1.1.5", - "@talend/scripts-core": "^15.0.0", + "@talend/eslint-config": "^12.1.1", + "@talend/eslint-plugin": "^1.0.1", + "@talend/scripts-core": "^16.0.0", + "@talend/scripts-config-babel": "^13.0.0", "@talend/scripts-config-react-webpack": "^16.0.0", - "react": "^17.0.2", - "react-dom": "^17.0.2", + "react": "^18.2.0", + "react-dom": "^18.2.0", "redux-saga-tester": "^1.0.874" }, "publishConfig": { diff --git a/packages/cmf/.babelrc.json b/packages/cmf/.babelrc.json index 1d6655372a..abd323e11d 100644 --- a/packages/cmf/.babelrc.json +++ b/packages/cmf/.babelrc.json @@ -1,3 +1,3 @@ { - "extends": "@talend/scripts-config-babel/.babelrc.json" + "extends": "@talend/scripts-config-babel/babel.config.js" } diff --git a/packages/cmf/CHANGELOG.md b/packages/cmf/CHANGELOG.md index 0e660c7eb9..91177d8e5f 100644 --- a/packages/cmf/CHANGELOG.md +++ b/packages/cmf/CHANGELOG.md @@ -1,5 +1,11 @@ # @talend/react-cmf +## 8.0.0 + +### Major Changes + +- 96d688489: React: Upgrade to react 18 and @types/react 18 + ## 7.3.0 ### Minor Changes diff --git a/packages/cmf/__tests__/bootstrap.test.js b/packages/cmf/__tests__/bootstrap.test.js index 56e6ac0bc3..8c104d409a 100644 --- a/packages/cmf/__tests__/bootstrap.test.js +++ b/packages/cmf/__tests__/bootstrap.test.js @@ -1,4 +1,4 @@ -import ReactDOM from 'react-dom'; +import ReactDOM from 'react-dom/client'; import createSagaMiddleware from 'redux-saga'; import bootstrap, * as internals from '../src/bootstrap'; @@ -11,9 +11,12 @@ import storeAPI from '../src/store'; import sagas from '../src/sagas'; import onError from '../src/onError'; -jest.mock('react-dom', () => ({ - render: jest.fn(), +jest.mock('react-dom/client', () => ({ + createRoot: jest.fn().mockImplementation(() => ({ + render: jest.fn(), + })), })); + jest.mock('redux-saga', () => ({ __esModule: true, // this property makes it work default: (() => { @@ -60,7 +63,7 @@ jest.mock('../src/store', () => ({ describe('bootstrap', () => { beforeEach(() => { onError.bootstrap.mockClear(); - ReactDOM.render.mockClear(); + jest.clearAllMocks(); }); describe('error management', () => { it('should bootstrap onError', async () => { @@ -205,11 +208,9 @@ describe('bootstrap', () => { const options = { root: div, }; - expect(ReactDOM.render).not.toHaveBeenCalled(); + expect(ReactDOM.createRoot).not.toHaveBeenCalled(); await bootstrap(options); - expect(ReactDOM.render).toHaveBeenCalled(); - const args = ReactDOM.render.mock.calls[0]; - expect(args[1]).toBe(div); + expect(ReactDOM.createRoot).toHaveBeenCalled(); }); }); }); diff --git a/packages/cmf/__tests__/cmfModule.merge.test.js b/packages/cmf/__tests__/cmfModule.merge.test.js index d2918757ea..282082ec28 100644 --- a/packages/cmf/__tests__/cmfModule.merge.test.js +++ b/packages/cmf/__tests__/cmfModule.merge.test.js @@ -1,4 +1,3 @@ -/* eslint-disable @typescript-eslint/no-empty-function */ /* eslint-disable no-empty-function */ /* eslint-disable react/prop-types */ import { render, screen } from '@testing-library/react'; @@ -11,6 +10,7 @@ describe('mergeModule', () => { beforeEach(() => { // eslint-disable-next-line no-console global.console = { + ...originalLog, warn: jest.fn(), log: jest.fn(), }; @@ -258,8 +258,8 @@ describe('mergeModule', () => { }; // when - const { RootComponent } = mergeModules(module1, module2, module3); - render(); + const cmfModule = mergeModules(module1, module2, module3); + render(); // then const mod1 = screen.getByText('first'); diff --git a/packages/cmf/jest.config.js b/packages/cmf/jest.config.js index 5d8b9d7b46..3ed4450157 100644 --- a/packages/cmf/jest.config.js +++ b/packages/cmf/jest.config.js @@ -1,4 +1,4 @@ -const defaults = require('../../node_modules/@talend/scripts-config-jest/jest.config.js'); +const defaults = require('@talend/scripts-config-jest/jest.config.js'); module.exports = { ...defaults, diff --git a/packages/cmf/package.json b/packages/cmf/package.json index 01f0391a61..fad7b17960 100644 --- a/packages/cmf/package.json +++ b/packages/cmf/package.json @@ -55,14 +55,18 @@ }, "devDependencies": { "@redux-saga/testing-utils": "^1.1.5", - "@talend/scripts-core": "^15.0.0", + "@talend/eslint-config": "^12.1.1", + "@talend/eslint-plugin": "^1.0.1", + "@talend/scripts-core": "^16.0.0", + "@talend/scripts-config-babel": "^13.0.0", + "@talend/scripts-config-jest": "^13.0.0", "@talend/scripts-config-react-webpack": "^16.0.0", "@testing-library/react": "^12.1.5", "jest-in-case": "^1.0.2", "jsdoc": "^3.6.11", "node-fetch": "^2.7.0", - "react": "^17.0.2", - "react-dom": "^17.0.2", + "react": "^18.2.0", + "react-dom": "^18.2.0", "redux-mock-store": "^1.5.4", "redux-saga-tester": "^1.0.874" }, @@ -73,5 +77,5 @@ "publishConfig": { "access": "public" }, - "version": "7.3.0" + "version": "8.0.0" } diff --git a/packages/cmf/src/bootstrap.js b/packages/cmf/src/bootstrap.js index e9e53b5504..4b32a171b8 100644 --- a/packages/cmf/src/bootstrap.js +++ b/packages/cmf/src/bootstrap.js @@ -1,4 +1,4 @@ -import { render } from 'react-dom'; +import ReactDOM from 'react-dom/client'; import createSagaMiddleware from 'redux-saga'; import { batchedSubscribe } from 'redux-batched-subscribe'; import { spawn } from 'redux-saga/effects'; @@ -150,7 +150,8 @@ export default async function bootstrap(appOptions = {}) { if (options.render !== false) { saga.run(); - render( + const root = ReactDOM.createRoot(element); + root.render( , - element, ); } diff --git a/packages/cmf/src/cmfModule.merge.js b/packages/cmf/src/cmfModule.merge.js index caa485d697..4dfef78cb3 100644 --- a/packages/cmf/src/cmfModule.merge.js +++ b/packages/cmf/src/cmfModule.merge.js @@ -102,11 +102,13 @@ function composeComponents(RootComponent, NestedRootComponent) { return NestedRootComponent; } // eslint-disable-next-line react/prop-types - return ({ children }) => ( + const CMFComposition = ({ children }) => ( {children} ); + CMFComposition.displayName = 'CMFComposition'; + return CMFComposition; } const MERGE_FNS = { diff --git a/packages/components/.babelrc.json b/packages/components/.babelrc.json index 1d6655372a..abd323e11d 100644 --- a/packages/components/.babelrc.json +++ b/packages/components/.babelrc.json @@ -1,3 +1,3 @@ { - "extends": "@talend/scripts-config-babel/.babelrc.json" + "extends": "@talend/scripts-config-babel/babel.config.js" } diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 120810182c..a547bdc790 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -1,5 +1,45 @@ # @talend/react-components +## 12.0.0 + +### Major Changes + +- 96d688489: React: Upgrade to react 18 and @types/react 18 +- 4044f6198: ARCH-662 - Bump i18next from v20 to v23 and react-i18next from v11 to v13 + +### Minor Changes + +- 9a0732ec5: feat: upgrade react-is + +### Patch Changes + +- da4cf2971: TDOPS-762 - Allow notification message to have long labels with proper overflow +- Updated dependencies [96d688489] +- Updated dependencies [9a0732ec5] +- Updated dependencies [9a0732ec5] +- Updated dependencies [bacaa4b31] +- Updated dependencies [4044f6198] +- Updated dependencies [9a0732ec5] + - @talend/design-system@8.0.0 + - @talend/react-bootstrap@2.0.0 + - @talend/icons@7.0.0 + - @talend/react-a11y@2.0.0 + - @talend/bootstrap-theme@8.2.1 + +## 11.4.5 + +### Patch Changes + +- b0f7bbf70: fix(TDC-7364): FormatValue component - fix content not appearing when there were leading whitespaces + +## 11.4.4 + +### Patch Changes + +- 1cb4b7b29: fix(TFD-16296): Add ellipsis on collapsible panel header +- Updated dependencies [9d137cb98] + - @talend/bootstrap-theme@8.2.0 + ## 11.4.3 ### Patch Changes diff --git a/packages/components/i18next-scanner.config.js b/packages/components/i18next-scanner.config.js index a1a55b236c..bdde61ae7f 100644 --- a/packages/components/i18next-scanner.config.js +++ b/packages/components/i18next-scanner.config.js @@ -1,9 +1,13 @@ +const typescriptTransform = require('i18next-scanner-typescript'); + module.exports = { + input: ['src/**/*.{js,ts,tsx}', '!src/**/*stories.{js,ts,tsx}'], options: { + compatibilityJSON: 'v4', debug: true, func: { - list: ['t'], - extensions: ['.js'], + list: ['t', 'i18next.t'], + extensions: ['.js', '.ts', '.tsx'], }, lngs: ['en'], defaultNs: 'tui-components', @@ -12,4 +16,5 @@ module.exports = { savePath: 'i18n/{{ns}}.json', }, }, + transform: typescriptTransform(), }; diff --git a/packages/components/package.json b/packages/components/package.json index 18796b1a44..31995f1cae 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -15,7 +15,7 @@ "test:cov": "cross-env TZ=Europe/Paris talend-scripts test --coverage", "lint": "talend-scripts lint", "start": "talend-scripts start -p 6006", - "extract-i18n": "i18next-scanner --config i18next-scanner.config.js 'src/**/*.js' '!src/**/*.stories.js'" + "extract-i18n": "i18next-scanner --config i18next-scanner.config.js" }, "keywords": [ "react", @@ -34,15 +34,18 @@ }, "dependencies": { "@popperjs/core": "^2.11.8", - "@talend/bootstrap-theme": "^8.1.3", + "@talend/assets-api": "^1.2.2", + "@talend/bootstrap-theme": "^8.2.1", "@talend/design-tokens": "^2.9.0", - "@talend/react-a11y": "^1.1.0", - "@talend/icons": "^6.60.1", + "@talend/icons": "^7.0.0", + "@talend/react-a11y": "^2.0.0", + "@talend/react-bootstrap": "^2.0.0", "@talend/utils": "^2.6.0", "ally.js": "^1.4.1", "classnames": "^2.3.2", "d3": "^7.8.5", "date-fns": "^1.30.1", + "dom-helpers": "^3.4.0", "focus-outline-manager": "^1.0.2", "immutable": "^3.8.2", "invariant": "^2.2.4", @@ -51,12 +54,11 @@ "memoize-one": "^6.0.0", "rc-slider": "^10.2.1", "react-autowhatever": "10.2.0", - "@talend/react-bootstrap": "^1.35.2", "react-debounce-input": "^3.3.0", "react-draggable": "^4.4.5", "react-grid-layout": "^1.4.1", "react-immutable-proptypes": "^2.2.0", - "react-is": "^16.13.1", + "react-is": "^17.0.0", "react-popper": "^2.3.0", "react-transition-group": "^2.9.0", "react-use": "^17.4.0", @@ -65,47 +67,54 @@ "recharts": "^2.8.0", "simplebar": "^5.3.9", "simplebar-react": "^2.4.3", - "styled-components": "^5.3.11" + "styled-components": "^5.3.11", + "warning": "^3.0.0" }, "devDependencies": { "@storybook/addon-actions": "^7.4.1", - "@talend/bootstrap-theme": "^8.1.3", - "@talend/design-system": "^7.15.1", - "@talend/icons": "^6.60.1", - "@talend/locales-design-system": "^7.3.0", - "@talend/locales-tui-components": "^9.5.0", - "@talend/scripts-core": "^15.0.0", - "@talend/scripts-config-react-webpack": "^16.0.0", + "@talend/bootstrap-theme": "^8.2.1", + "@talend/design-system": "^8.0.0", + "@talend/eslint-config": "^12.1.1", + "@talend/eslint-plugin": "^1.0.1", + "@talend/locales-design-system": "^7.15.1", + "@talend/locales-tui-components": "^11.4.5", + "@talend/scripts-core": "^16.0.0", + "@talend/scripts-config-babel": "^13.0.0", + "@talend/scripts-config-react-webpack": "^16.1.0", + "@talend/scripts-config-storybook-lib": "^5.1.0", + "@talend/scripts-config-typescript": "^11.1.0", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^12.1.5", "@testing-library/user-event": "^13.5.0", + "@testing-library/react-hooks": "^8.0.1", "@types/classnames": "^2.3.1", "@types/d3": "^7.4.0", "@types/date-fns": "^0.0.2", - "@types/enzyme": "^3.10.13", + "@types/jest": "^29.5.5", "@types/lodash": "^4.14.198", "@types/prop-types": "^15.7.5", - "@types/react": "^17.0.65", + "@types/react": "^18.2.8", + "@types/react-dom": "^18.2.4", "cross-env": "^7.0.3", - "i18next": "^20.6.1", + "i18next": "^23.5.1", "jest-in-case": "^1.0.2", "jsdom": "^20.0.3", "prop-types": "^15.8.1", - "react": "^17.0.2", + "react": "^18.2.0", "react-a11y": "^0.3.4", - "react-dom": "^17.0.2", + "react-dom": "^18.2.0", "react-router-dom": "~6.3.0", - "react-i18next": "^11.18.6", + "react-i18next": "^13.3.0", "react-storybook-addon-props-combinations": "^1.1.0", - "react-test-renderer": "^17.0.2" + "react-test-renderer": "^18.2.0" }, "peerDependencies": { - "@talend/design-system": "^7.5.0", - "i18next": "^20.1.0", + "@talend/design-system": "^8.0.0", + "i18next": "^23.5.1", "prop-types": "^15.5.10", "react": ">= 16.14.0", "react-dom": ">= 16.14.0", - "react-i18next": "^11.18.6" + "react-i18next": "^13.3.0" }, "resolutions": { "minimist": "^1.2.5" @@ -113,5 +122,5 @@ "publishConfig": { "access": "public" }, - "version": "11.4.3" + "version": "12.0.0" } diff --git a/packages/components/src/ActionIntercom/Intercom.service.test.js b/packages/components/src/ActionIntercom/Intercom.service.test.js index c6bd272097..5efbcbc864 100644 --- a/packages/components/src/ActionIntercom/Intercom.service.test.js +++ b/packages/components/src/ActionIntercom/Intercom.service.test.js @@ -160,6 +160,7 @@ describe('Intercom service', () => { expect(styleElement.textContent.trim().replace(/\s/g, ' ')).toBe( '.intercom-namespace .intercom-app div.intercom-messenger-frame { top: 39px; left: 427px; right: 221px; margin-top: 2rem; }', ); + jest.useRealTimers(); }); it('should remove custom style with cleanup return function', () => { @@ -182,6 +183,7 @@ describe('Intercom service', () => { // then expect(intercomContainer.querySelector('style')).toBeFalsy(); + jest.useRealTimers(); }); }); }); diff --git a/packages/components/src/CollapsiblePanel/CollapsiblePanel.module.scss b/packages/components/src/CollapsiblePanel/CollapsiblePanel.module.scss index 9d5d3bafbf..e6209d3b2d 100644 --- a/packages/components/src/CollapsiblePanel/CollapsiblePanel.module.scss +++ b/packages/components/src/CollapsiblePanel/CollapsiblePanel.module.scss @@ -173,6 +173,13 @@ $tc-collapsible-panel-padding-larger: $padding-larger !default; display: flex; align-items: center; justify-content: space-between; + min-width: 0; // trick to avoid conflict between flex and overflow + + > * { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } } } } diff --git a/packages/components/src/CollapsiblePanel/CollapsiblePanel.stories.js b/packages/components/src/CollapsiblePanel/CollapsiblePanel.stories.js index 5f82d51240..192752ac0d 100644 --- a/packages/components/src/CollapsiblePanel/CollapsiblePanel.stories.js +++ b/packages/components/src/CollapsiblePanel/CollapsiblePanel.stories.js @@ -172,6 +172,18 @@ export const Header = () => (

Collapsible Panel Headers

+ + Panel content + { - // eslint-disable-next-line global-require - const mockTranslations = require('../../../../test/i18nMock').default; - - return mockTranslations(); -}); - describe('TreeHeader', () => { it('should render a simple tree header', () => { const { container } = render(); diff --git a/packages/components/src/DataViewer/Icons/TreeBranchIcon/TreeBranchIcon.test.js b/packages/components/src/DataViewer/Icons/TreeBranchIcon/TreeBranchIcon.test.js index 56fdcb54be..f1d54ad483 100644 --- a/packages/components/src/DataViewer/Icons/TreeBranchIcon/TreeBranchIcon.test.js +++ b/packages/components/src/DataViewer/Icons/TreeBranchIcon/TreeBranchIcon.test.js @@ -1,12 +1,6 @@ import { render, screen } from '@testing-library/react'; import Component, { getDefaultIcon } from './TreeBranchIcon.component'; jest.unmock('@talend/design-system'); -jest.mock('react-i18next', () => { - // eslint-disable-next-line global-require - const mockTranslations = require('../../../../test/i18nMock').default; - - return mockTranslations(); -}); describe('getDefaultIcon', () => { it('should return a custom object icon', () => { diff --git a/packages/components/src/DataViewer/ModelViewer/Leaf/__snapshots__/ModelViewerLeaf.test.js.snap b/packages/components/src/DataViewer/ModelViewer/Leaf/__snapshots__/ModelViewerLeaf.test.js.snap index 14648f8681..ba37b4005f 100644 --- a/packages/components/src/DataViewer/ModelViewer/Leaf/__snapshots__/ModelViewerLeaf.test.js.snap +++ b/packages/components/src/DataViewer/ModelViewer/Leaf/__snapshots__/ModelViewerLeaf.test.js.snap @@ -19,7 +19,6 @@ exports[`ModelViewerLeaf should render ModelViewerLeaf 1`] = ` toto - { // then expect(screen.queryByRole('listbox')).not.toBeInTheDocument(); + jest.useRealTimers(); }); it('should close suggestions on enter', () => { @@ -218,6 +219,7 @@ describe('Datalist component', () => { // then expect(onChange).toBeCalledWith(expect.anything(), { value: '' }); + jest.useRealTimers(); }); it('should reset previous value on ESC keydown', () => { @@ -368,6 +370,7 @@ describe('Datalist component', () => { // then expect(onChange).toBeCalledWith(expect.anything(), { value: 'foo' }); + jest.useRealTimers(); }); it('should persist unknown value on blur', () => { @@ -384,6 +387,7 @@ describe('Datalist component', () => { // then expect(onChange).toBeCalledWith(expect.anything(), { value: 'not a known value' }); + jest.useRealTimers(); }); it('should persist known value on enter', () => { @@ -431,6 +435,7 @@ describe('Datalist component', () => { // // then expect(onChange).toBeCalledWith(expect.anything(), { value: 'not there' }); + jest.useRealTimers(); }); }); @@ -450,6 +455,7 @@ describe('Datalist component', () => { // then expect(onChange).toBeCalledWith(expect.anything(), { value: 'foo' }); + jest.useRealTimers(); }); it('should reset unknown value on blur', () => { @@ -467,6 +473,7 @@ describe('Datalist component', () => { // then expect(onChange).not.toBeCalled(); expect(input).toHaveValue('My foo'); + jest.useRealTimers(); }); it('should persist known value on enter', () => { @@ -527,6 +534,7 @@ describe('Datalist component', () => { // then expect(onChange).toBeCalledWith(expect.anything(), { value: '' }); + jest.useRealTimers(); }); }); }); diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/InputDateTimePicker/InputDateTimePicker.component.test.js b/packages/components/src/DateTimePickers/LegacyDateTimePickers/InputDateTimePicker/InputDateTimePicker.component.test.js index 644e65a904..867e7f4388 100644 --- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/InputDateTimePicker/InputDateTimePicker.component.test.js +++ b/packages/components/src/DateTimePickers/LegacyDateTimePickers/InputDateTimePicker/InputDateTimePicker.component.test.js @@ -36,6 +36,7 @@ describe('InputDateTimePicker', () => { // then expect(getPopup()).not.toBeInTheDocument(); + jest.useRealTimers(); }); it('should trigger props.onBlur', async () => { @@ -52,6 +53,7 @@ describe('InputDateTimePicker', () => { // then expect(onBlur).toBeCalled(); + jest.useRealTimers(); }); }); @@ -93,6 +95,7 @@ describe('InputDateTimePicker', () => { // then expect(document.activeElement).toHaveClass('tc-date-picker-day'); + jest.useRealTimers(); }); }); diff --git a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/TimePicker/TimePicker.test.js b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/TimePicker/TimePicker.test.js index b7930b4257..c24adc090a 100644 --- a/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/TimePicker/TimePicker.test.js +++ b/packages/components/src/DateTimePickers/LegacyDateTimePickers/pickers/TimePicker/TimePicker.test.js @@ -83,6 +83,7 @@ describe('TimePicker', () => { // then expect(onChange).toBeCalledWith(expect.anything(), { hours: '17', minutes: '38' }, FIELD_HOURS); + jest.useRealTimers(); }); it('should trigger onChange on minutes change', () => { @@ -109,6 +110,7 @@ describe('TimePicker', () => { { hours: '15', minutes: '17' }, FIELD_MINUTES, ); + jest.useRealTimers(); }); it('should manage tabIndex', () => { diff --git a/packages/components/src/FormatValue/FormatValue.component.js b/packages/components/src/FormatValue/FormatValue.component.js index d768030177..b9b67c5de5 100644 --- a/packages/components/src/FormatValue/FormatValue.component.js +++ b/packages/components/src/FormatValue/FormatValue.component.js @@ -12,7 +12,7 @@ export const REG_EXP_LEADING_TRAILING_WHITE_SPACE_CHARACTERS = /(^\s*)?([\s\S]*? const REG_EXP_REPLACED_WHITE_SPACE_CHARACTERS = /(\t| |\n)/g; const REG_EXP_CAPTUR_LINE_FEEDING = /(\n)/g; const REG_EXP_LINE_FEEDING = /\n/; -const REG_EXP_WHITE_SPACE_CHARACTERS = /^\s/; +const REG_EXP_WHITE_SPACE_CHARACTERS = /^\s+/; /** * replaceCharacterByIcon - replace a character by the corresponding icon @@ -54,30 +54,31 @@ function replaceCharacterByIcon(value, index, t) { className={classNames(theme['td-white-space-character'], 'td-white-space-character')} name="talend-carriage-return" /> - {'\n'} ); default: - if (REG_EXP_WHITE_SPACE_CHARACTERS.test(value)) { - return ( - - ); - } + const whitespaces = value.match(REG_EXP_WHITE_SPACE_CHARACTERS)?.[0]; return ( - - {value} - + <> + {whitespaces && + [...whitespaces]?.map(() => ( + + ))} + + {value.trimStart()} + + ); } } diff --git a/packages/components/src/FormatValue/__snapshots__/FormatValue.test.js.snap b/packages/components/src/FormatValue/__snapshots__/FormatValue.test.js.snap index 525efab2de..4a14269b18 100755 --- a/packages/components/src/FormatValue/__snapshots__/FormatValue.test.js.snap +++ b/packages/components/src/FormatValue/__snapshots__/FormatValue.test.js.snap @@ -14,6 +14,9 @@ exports[`FormatValue should handle leading empty space in the string 1`] = ` class="CoralIcon theme-td-white-space-character theme-td-other-characters td-white-space-character" name="talend-empty-char" /> + @@ -37,8 +40,6 @@ exports[`FormatValue should handle line feeding in the string 1`] = ` class="CoralIcon theme-td-white-space-character td-white-space-character" name="talend-carriage-return" /> - - - - @@ -106,6 +105,9 @@ exports[`FormatValue should handle trailing empty space in the string 1`] = ` class="CoralIcon theme-td-white-space-character theme-td-other-characters td-white-space-character" name="talend-empty-char" /> + `; @@ -126,6 +128,39 @@ exports[`FormatValue should replace the leading/trailing white space and the lin class="CoralIcon theme-td-white-space-character theme-td-other-characters td-white-space-character" name="talend-empty-char" /> + + + + + + + - - + + + psum + JSX.Element | null = Inject, + CustomInject: FunctionComponent = Inject, ): JSX.Element[] { return array.map((props, index) => ( @@ -138,7 +138,7 @@ Inject.getAll = function injectGetAll( */ Inject.getReactElement = function getReactElement( getComponent: GetComponentType, - data: InjectedComponentType | InjectedComponentType[] | InjectConfig, + data: InjectedComponentType | InjectedComponentType[] | InjectConfig | any, CustomInject: FunctionComponent = Inject, withKey = false, ): ReactNode { diff --git a/packages/components/src/Layout/SkipLinks/SkipLinks.component.tsx b/packages/components/src/Layout/SkipLinks/SkipLinks.component.tsx index 3c9d8afc5e..85bc2777d4 100644 --- a/packages/components/src/Layout/SkipLinks/SkipLinks.component.tsx +++ b/packages/components/src/Layout/SkipLinks/SkipLinks.component.tsx @@ -1,7 +1,6 @@ import { TFunction } from 'i18next'; import { withTranslation } from 'react-i18next'; - -import Icon from '../../Icon'; +import { Icon, SVG_TRANSFORMS } from '@talend/design-system'; import I18N_DOMAIN_COMPONENTS from '../../constants'; import getDefaultT from '../../translate'; @@ -16,7 +15,7 @@ function SkipTo({ href, label }: SkipToProps) { return ( - + {label} diff --git a/packages/components/src/Layout/SkipLinks/__snapshots__/SkipLinks.test.js.snap b/packages/components/src/Layout/SkipLinks/__snapshots__/SkipLinks.test.js.snap index 158cf5396b..6b718b0fca 100644 --- a/packages/components/src/Layout/SkipLinks/__snapshots__/SkipLinks.test.js.snap +++ b/packages/components/src/Layout/SkipLinks/__snapshots__/SkipLinks.test.js.snap @@ -16,7 +16,6 @@ exports[`Skip links should render 1`] = `
); - -export const LabelToggle = () => ( -
-

Label Toggle

-
-

Non interactive two states

- -

Interactive

- -

Interactive autofocused

- -

Interactive with default selected value

- -

Disabled with selected value

- - -
-); diff --git a/packages/components/src/TooltipTrigger/TooltipTrigger.test.js b/packages/components/src/TooltipTrigger/TooltipTrigger.test.js index ca91688877..6c737f6d01 100644 --- a/packages/components/src/TooltipTrigger/TooltipTrigger.test.js +++ b/packages/components/src/TooltipTrigger/TooltipTrigger.test.js @@ -3,8 +3,6 @@ import { screen, render } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import TooltipTrigger from './TooltipTrigger.component'; -jest.useFakeTimers(); - function runAllTimers() { act(() => { jest.runAllTimers(); @@ -12,6 +10,13 @@ function runAllTimers() { } describe('ActionTooltip', () => { + beforeEach(() => { + jest.useFakeTimers(); + }); + afterEach(() => { + jest.useRealTimers(); + }); + it('should render only the children', () => { // given const props = { diff --git a/packages/components/src/TreeView/TreeViewItem/TreeViewItem.test.js b/packages/components/src/TreeView/TreeViewItem/TreeViewItem.test.js index 42b1a84703..9528696adc 100644 --- a/packages/components/src/TreeView/TreeViewItem/TreeViewItem.test.js +++ b/packages/components/src/TreeView/TreeViewItem/TreeViewItem.test.js @@ -90,9 +90,14 @@ const propsWithIcons = { function getIcon() { return document.querySelector('.tc-icon'); } -jest.useFakeTimers(); describe('getItemIcon', () => { + beforeAll(() => { + jest.useFakeTimers(); + }); + afterAll(() => { + jest.useRealTimers(); + }); it('should return given icon when toggled', () => { expect(getItemIcon('my', true)).toBe('my'); }); @@ -111,6 +116,12 @@ describe('getItemIcon', () => { }); describe('TreeView item', () => { + beforeAll(() => { + jest.useFakeTimers(); + }); + afterAll(() => { + jest.useRealTimers(); + }); it('should render', () => { // when const { container } = render(); diff --git a/packages/components/src/VirtualizedList/ListGrid/__snapshots__/ListGrid.test.js.snap b/packages/components/src/VirtualizedList/ListGrid/__snapshots__/ListGrid.test.js.snap index e4ee2c8019..4855c93b52 100644 --- a/packages/components/src/VirtualizedList/ListGrid/__snapshots__/ListGrid.test.js.snap +++ b/packages/components/src/VirtualizedList/ListGrid/__snapshots__/ListGrid.test.js.snap @@ -86,7 +86,6 @@ exports[`ListGrid should render react-virtualized list 1`] = `
- :
- :
k, {}]; - useMock.t = (key, options) => - (options.defaultValue || '').replace(/{{(\w+)}}/g, (_, k) => options[k]); - useMock.i18n = {}; - - // from https://github.com/i18next/react-i18next/blob/master/example/test-jest/__mocks__/react-i18next.js - - const hasChildren = node => node && (node.children || (node.props && node.props.children)); - - const getChildren = node => - node && node.children ? node.children : node.props && node.props.children; - - const renderNodes = reactNodes => { - if (typeof reactNodes === 'string') { - return reactNodes; - } - - return Object.keys(reactNodes).map((key, i) => { - const child = reactNodes[key]; - const isElement = React.isValidElement(child); - - if (typeof child === 'string') { - return child; - } - if (hasChildren(child)) { - const inner = renderNodes(getChildren(child)); - return React.cloneElement(child, { ...child.props, key: i }, inner); - } - if (typeof child === 'object' && !isElement) { - return Object.keys(child).reduce((str, childKey) => `${str}${child[childKey]}`, ''); - } - - return child; - }); - }; - return { - // this mock makes sure any components using the translate HoC receive the t function as a prop - withTranslation: () => Component => { - Component.defaultProps = { - ...Component.defaultProps, - t: (key, options) => - (options.defaultValue || '').replace(/{{(\w+)}}/g, (_, k) => options[k]), - }; - Component.displayName = `withI18nextTranslation(${Component.displayName || Component.name})`; - return Component; - }, - useTranslation: () => useMock, - setI18n: () => {}, - getI18n: () => ({ - t: (key, options) => (options.defaultValue || '').replace(/{{(\w+)}}/g, (_, k) => options[k]), - }), - Trans: ({ children }) => renderNodes(children), - }; -} diff --git a/packages/containers/.babelrc.json b/packages/containers/.babelrc.json index 1d6655372a..abd323e11d 100644 --- a/packages/containers/.babelrc.json +++ b/packages/containers/.babelrc.json @@ -1,3 +1,3 @@ { - "extends": "@talend/scripts-config-babel/.babelrc.json" + "extends": "@talend/scripts-config-babel/babel.config.js" } diff --git a/packages/containers/CHANGELOG.md b/packages/containers/CHANGELOG.md index 08d296ce8e..6f8ae9db8c 100644 --- a/packages/containers/CHANGELOG.md +++ b/packages/containers/CHANGELOG.md @@ -1,5 +1,23 @@ # @talend/react-containers +## 10.0.0 + +### Major Changes + +- 96d688489: React: Upgrade to react 18 and @types/react 18 +- 4044f6198: ARCH-662 - Bump i18next from v20 to v23 and react-i18next from v11 to v13 + +### Patch Changes + +- Updated dependencies [96d688489] +- Updated dependencies [9a0732ec5] +- Updated dependencies [da4cf2971] +- Updated dependencies [4044f6198] + - @talend/react-bootstrap@2.0.0 + - @talend/react-components@12.0.0 + - @talend/react-forms@11.0.0 + - @talend/react-cmf@8.0.0 + ## 9.1.3 ### Patch Changes diff --git a/packages/containers/i18next-scanner.config.js b/packages/containers/i18next-scanner.config.js index d275116f93..3cbf24d859 100644 --- a/packages/containers/i18next-scanner.config.js +++ b/packages/containers/i18next-scanner.config.js @@ -1,9 +1,11 @@ module.exports = { + input: ['src/**/*.{js,jsx}', '!src/**/*stories.{js,jsx}'], options: { + compatibilityJSON: 'v4', debug: true, func: { - list: ['t'], - extensions: ['.js'], + list: ['t', 'i18next.t'], + extensions: ['.js', '.jsx'], }, lngs: ['en'], defaultNs: 'tui-containers', diff --git a/packages/containers/package.json b/packages/containers/package.json index 22ae76169a..a61e0639ca 100644 --- a/packages/containers/package.json +++ b/packages/containers/package.json @@ -15,7 +15,7 @@ "test:cov": "talend-scripts test --coverage", "test:demo": "talend-scripts build-storybook --quiet", "lint": "talend-scripts lint", - "extract-i18n": "i18next-scanner --config i18next-scanner.config.js 'src/**/*.js' '!src/**/*.stories.js'" + "extract-i18n": "i18next-scanner --config i18next-scanner.config.js" }, "keywords": [ "react", @@ -33,10 +33,11 @@ "url": "https://github.com/Talend/ui.git" }, "dependencies": { - "@talend/react-bootstrap": "^1.35.2", - "@talend/react-cmf": "^7.3.0", - "@talend/react-components": "^11.4.0", - "@talend/react-forms": "^10.2.4", + "@talend/design-system": "^8.0.0", + "@talend/react-bootstrap": "^2.0.0", + "@talend/react-cmf": "^8.0.0", + "@talend/react-components": "^12.0.0", + "@talend/react-forms": "^11.0.0", "@talend/utils": "^2.6.0", "classnames": "^2.3.2", "immutable": "^3.8.2", @@ -50,30 +51,36 @@ }, "devDependencies": { "@storybook/addon-actions": "^7.4.1", - "@talend/bootstrap-theme": "^8.1.3", - "@talend/icons": "^6.60.1", - "@talend/locales-tui-containers": "^8.0.2", - "@talend/react-storybook-cmf": "^7.2.0", - "@talend/scripts-core": "^15.0.0", + "@talend/bootstrap-theme": "^8.2.1", + "@talend/icons": "^7.0.0", + "@talend/locales-tui-containers": "^9.1.3", + "@talend/react-storybook-cmf": "^8.0.0", + "@talend/eslint-config": "^12.1.1", + "@talend/eslint-plugin": "^1.0.1", + "@talend/scripts-core": "^16.0.0", + "@talend/scripts-config-babel": "^13.0.0", + "@talend/scripts-config-storybook-lib": "^5.1.0", "@talend/scripts-config-react-webpack": "^16.0.0", - "i18next": "^20.6.1", + "@testing-library/react": "^12.1.5", + "@testing-library/user-event": "^13.5.0", + "i18next": "^23.5.1", "jest-in-case": "^1.0.2", "prop-types": "^15.8.1", - "react": "^17.0.2", - "react-dom": "^17.0.2", - "react-i18next": "^11.18.6", - "react-test-renderer": "^17.0.2", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-i18next": "^13.3.0", + "react-test-renderer": "^18.2.0", "redux-saga-tester": "^1.0.874" }, "peerDependencies": { - "i18next": "^20.1.0", + "i18next": "^23.5.1", "prop-types": "^15.5.10", "react": ">= 16.14.0", "react-dom": ">= 16.14.0", - "react-i18next": "^11.18.6" + "react-i18next": "^13.3.0" }, "publishConfig": { "access": "public" }, - "version": "9.1.3" + "version": "10.0.0" } diff --git a/packages/dataviz/.babelrc.json b/packages/dataviz/.babelrc.json index 1d6655372a..abd323e11d 100644 --- a/packages/dataviz/.babelrc.json +++ b/packages/dataviz/.babelrc.json @@ -1,3 +1,3 @@ { - "extends": "@talend/scripts-config-babel/.babelrc.json" + "extends": "@talend/scripts-config-babel/babel.config.js" } diff --git a/packages/dataviz/CHANGELOG.md b/packages/dataviz/CHANGELOG.md index 5cdbeb6b0e..0bfcb26549 100755 --- a/packages/dataviz/CHANGELOG.md +++ b/packages/dataviz/CHANGELOG.md @@ -1,5 +1,20 @@ # Changelog +## 4.0.0 + +### Major Changes + +- 96d688489: React: Upgrade to react 18 and @types/react 18 +- 4044f6198: ARCH-662 - Bump i18next from v20 to v23 and react-i18next from v11 to v13 + +### Patch Changes + +- Updated dependencies [96d688489] +- Updated dependencies [9a0732ec5] +- Updated dependencies [da4cf2971] +- Updated dependencies [4044f6198] + - @talend/react-components@12.0.0 + ## 3.0.1 ### Patch Changes diff --git a/packages/dataviz/i18next-scanner.config.js b/packages/dataviz/i18next-scanner.config.js index d6962e50af..1a8db6d8bc 100755 --- a/packages/dataviz/i18next-scanner.config.js +++ b/packages/dataviz/i18next-scanner.config.js @@ -1,16 +1,20 @@ +const typescriptTransform = require('i18next-scanner-typescript'); + module.exports = { - input: ['tmp/**/*.{js,jsx}'], + input: ['src/**/*.{js,ts,tsx}', '!src/**/*stories.{js,ts,tsx}'], options: { + compatibilityJSON: 'v4', debug: true, func: { - list: ['t'], - extensions: ['.js', '.jsx'], + list: ['t', 'i18next.t'], + extensions: ['.js', '.ts', '.tsx'], }, lngs: ['en'], defaultNs: 'tui-dataviz', defaultValue: '__STRING_NOT_TRANSLATED__', resource: { - savePath: 'i18n-extract/{{ns}}.json', + savePath: 'i18n/{{ns}}.json', }, }, + transform: typescriptTransform(), }; diff --git a/packages/dataviz/jest.config.js b/packages/dataviz/jest.config.js deleted file mode 100755 index e754d5eb25..0000000000 --- a/packages/dataviz/jest.config.js +++ /dev/null @@ -1,7 +0,0 @@ -process.env.TZ = 'Europe/Paris'; - -const defaults = require('@talend/scripts-config-jest/jest.config.js'); - -module.exports = { - ...defaults, -}; diff --git a/packages/dataviz/package.json b/packages/dataviz/package.json index 90ccc3afd9..1da687650b 100644 --- a/packages/dataviz/package.json +++ b/packages/dataviz/package.json @@ -1,6 +1,6 @@ { "name": "@talend/react-dataviz", - "version": "3.0.1", + "version": "4.0.0", "description": "Talend charts and visualization components", "main": "lib/index.js", "mainSrc": "src/index.ts", @@ -12,7 +12,7 @@ "build:umd:prod": "talend-scripts build --umd", "build:lib": "talend-scripts build", "build-storybook": "talend-scripts build-storybook", - "extract-i18n": "tsc --jsx preserve --outDir tmp && i18next-scanner && rm -rf tmp", + "extract-i18n": "i18next-scanner --config i18next-scanner.config.js", "lint": "talend-scripts lint", "start": "talend-scripts start-storybook -p 6006", "test": "cross-env TZ=Europe/Paris talend-scripts test", @@ -36,7 +36,7 @@ }, "dependencies": { "@talend/assets-api": "^1.2.2", - "@talend/react-components": "^11.4.0", + "@talend/react-components": "^12.0.0", "@talend/design-tokens": "^2.9.0", "classnames": "^2.3.2", "d3": "^7.8.5", @@ -49,32 +49,41 @@ "devDependencies": { "@cypress/react": "^7.0.3", "@cypress/webpack-dev-server": "^3.6.1", - "@talend/bootstrap-theme": "^8.1.3", - "@talend/icons": "^6.60.1", - "@talend/locales-tui-components": "^9.5.0", - "@talend/locales-tui-dataviz": "^0.4.6", - "@talend/react-components": "^11.4.0", - "@talend/scripts-core": "^15.0.0", + "@talend/bootstrap-theme": "^8.2.1", + "@talend/design-system": "^8.0.0", + "@talend/eslint-config": "^12.1.1", + "@talend/eslint-plugin": "^1.0.1", + "@talend/icons": "^7.0.0", + "@talend/locales-tui-components": "^11.4.5", + "@talend/locales-tui-dataviz": "^3.0.1", + "@talend/react-components": "^12.0.0", + "@talend/scripts-core": "^16.0.0", + "@talend/scripts-config-babel": "^13.0.0", "@talend/scripts-config-react-webpack": "^16.0.0", + "@talend/scripts-config-storybook-lib": "^5.1.0", + "@talend/scripts-config-typescript": "^11.1.0", "@testing-library/react": "^12.1.5", + "@testing-library/cypress": "^9.0.0", + "@testing-library/user-event": "^13.5.0", "@types/classnames": "^2.3.1", "@types/d3": "^7.4.0", - "@types/enzyme": "^3.10.13", "@types/geojson": "^7946.0.10", "@types/lodash": "^4.14.198", - "@types/react": "^17.0.65", + "@types/node": "^6.14.13", + "@types/react": "^18.2.8", "@types/topojson-client": "^3.1.2", "@types/topojson-specification": "^1.0.3", + "cypress": "^12.17.4", "cross-env": "^7.0.3", - "i18next": "^20.6.1", - "react": "^17.0.2", - "react-dom": "^17.0.2", - "react-i18next": "^11.18.6" + "i18next": "^23.5.1", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-i18next": "^13.3.0" }, "peerDependencies": { - "i18next": "^20.1.0", + "i18next": "^23.5.1", "react": ">= 16.14.0", - "react-i18next": "^11.18.6" + "react-i18next": "^13.3.0" }, "publishConfig": { "access": "public" diff --git a/packages/dataviz/talend-i18n.json b/packages/dataviz/talend-i18n.json index dccfa94861..ee0fe03fd1 100755 --- a/packages/dataviz/talend-i18n.json +++ b/packages/dataviz/talend-i18n.json @@ -2,7 +2,7 @@ "extract": { "method": "yarn", "script": "extract-i18n", - "target": "./i18n-extract", + "target": "./i18n", "transform": "flatten" }, "load": { diff --git a/packages/dataviz/tsconfig.json b/packages/dataviz/tsconfig.json index bf1c507d62..af0c1855d2 100755 --- a/packages/dataviz/tsconfig.json +++ b/packages/dataviz/tsconfig.json @@ -8,7 +8,7 @@ "rootDirs": ["cypress", "@testing-library/cypress", "src"], "target": "es5", - "lib": ["es5", "dom"], + "lib": ["es6", "dom", "ES2017"], "types": ["cypress", "node"] } } diff --git a/packages/design-docs/.babelrc.json b/packages/design-docs/.babelrc.json index 1d6655372a..abd323e11d 100644 --- a/packages/design-docs/.babelrc.json +++ b/packages/design-docs/.babelrc.json @@ -1,3 +1,3 @@ { - "extends": "@talend/scripts-config-babel/.babelrc.json" + "extends": "@talend/scripts-config-babel/babel.config.js" } diff --git a/packages/design-docs/.storybook/.babelrc b/packages/design-docs/.storybook/.babelrc index 1d6655372a..abd323e11d 100644 --- a/packages/design-docs/.storybook/.babelrc +++ b/packages/design-docs/.storybook/.babelrc @@ -1,3 +1,3 @@ { - "extends": "@talend/scripts-config-babel/.babelrc.json" + "extends": "@talend/scripts-config-babel/babel.config.js" } diff --git a/packages/design-docs/.storybook/main.js b/packages/design-docs/.storybook/main.js index f63db26fc8..864e7de88d 100644 --- a/packages/design-docs/.storybook/main.js +++ b/packages/design-docs/.storybook/main.js @@ -1,6 +1,8 @@ import path from 'path'; +import { packageDirectorySync } from 'pkg-dir'; + const iconConfig = require('@talend/icons/.storybook/main.js'); -const rootPath = require.resolve('@talend/design-docs').replace('src/index.ts', ''); +const rootPath = packageDirectorySync(); const { getJSAndTSLoader, } = require('@talend/scripts-config-react-webpack/config/webpack.config.common'); @@ -11,19 +13,19 @@ const monoRepoFixSourceMap = ['./src', '../design-system/src']; const srcDirectories = monoRepoFixSourceMap.map(src => path.resolve(process.cwd(), src)); const STORIES = [ - `${rootPath}src/Welcome.mdx`, - `${rootPath}src/GettingStarted.mdx`, - `${rootPath}src/Principles.mdx`, - `${rootPath}src/Statuses.mdx`, - // `${rootPath}src/Catalog.mdx`, - `${rootPath}src/content/VoiceAndTone.@(js|tsx|mdx)`, - `${rootPath}src/content/Internationalization.@(js|tsx|mdx)`, - `${rootPath}src/content/Conventions.@(js|tsx|mdx)`, - `${rootPath}src/content/Capitalization.@(js|tsx|mdx)`, - `${rootPath}src/content/Wording.@(js|tsx|mdx)`, - `${rootPath}src/tokens/**/*.mdx`, - `${rootPath}../design-system/src/stories/**/*.@(stories.tsx|mdx)`, - // `${rootPath}src/components/**/*.@(stories.tsx|mdx)`, + `${rootPath}/src/Welcome.mdx`, + `${rootPath}/src/GettingStarted.mdx`, + `${rootPath}/src/Principles.mdx`, + `${rootPath}/src/Statuses.mdx`, + // `${rootPath}/src/Catalog.mdx`, + `${rootPath}/src/content/VoiceAndTone.@(js|tsx|mdx)`, + `${rootPath}/src/content/Internationalization.@(js|tsx|mdx)`, + `${rootPath}/src/content/Conventions.@(js|tsx|mdx)`, + `${rootPath}/src/content/Capitalization.@(js|tsx|mdx)`, + `${rootPath}/src/content/Wording.@(js|tsx|mdx)`, + `${rootPath}/src/tokens/**/*.mdx`, + `${rootPath}/../design-system/src/stories/**/*.@(stories.tsx|mdx)`, + // `${rootPath}/src/components/**/*.@(stories.tsx|mdx)`, ]; export default { diff --git a/packages/design-docs/CHANGELOG.md b/packages/design-docs/CHANGELOG.md new file mode 100644 index 0000000000..63815b402c --- /dev/null +++ b/packages/design-docs/CHANGELOG.md @@ -0,0 +1,19 @@ +# @talend/design-docs + +## 2.0.0 + +### Major Changes + +- 4044f6198: ARCH-662 - Bump i18next from v20 to v23 and react-i18next from v11 to v13 + +### Patch Changes + +- Updated dependencies [96d688489] +- Updated dependencies [9a0732ec5] +- Updated dependencies [9a0732ec5] +- Updated dependencies [bacaa4b31] +- Updated dependencies [4044f6198] +- Updated dependencies [9a0732ec5] + - @talend/design-system@8.0.0 + - @talend/icons@7.0.0 + - @talend/storybook-docs@2.0.0 diff --git a/packages/design-docs/package.json b/packages/design-docs/package.json index 5f38cebca5..a5c0d39ba7 100644 --- a/packages/design-docs/package.json +++ b/packages/design-docs/package.json @@ -1,6 +1,6 @@ { "name": "@talend/design-docs", - "version": "1.3.0", + "version": "2.0.0", "description": "Package containing design.talend.com stories", "homepage": "https://github.com/Talend/ui#readme", "main": "src/index.ts", @@ -23,17 +23,18 @@ "@algolia/autocomplete-js": "^1.9.4", "@storybook/blocks": "^7.4.1", "@storybook/react": "^7.4.1", - "@talend/design-system": "^7.15.1", + "@talend/design-system": "^8.0.0", "@talend/design-tokens": "^2.9.0", - "@talend/storybook-docs": "^1.2.0", - "@talend/icons": "^6.60.1", + "@talend/storybook-docs": "^2.0.0", + "@talend/icons": "^7.0.0", "algoliasearch": "^4.17.2", "classnames": "^2.3.1", "color-contrast-checker": "^2.1.0", "figma-js": "^1.16.0", + "pkg-dir": "^7.0.0", "react-hook-form": "^6.15.8", - "react": "^17.0.2", - "react-dom": "^17.0.2", + "react": "^18.2.0", + "react-dom": "^18.2.0", "use-overflow": "^1.2.0" }, "devDependencies": { @@ -49,17 +50,22 @@ "@storybook/testing-library": "^0.2.0", "@storybook/testing-react": "^2.0.1", "@storybook/theming": "^7.4.1", - "@talend/locales-design-system": "^7.3.0", - "@talend/locales-tui-components": "^9.5.0", - "@talend/locales-tui-containers": "^8.0.2", - "@talend/locales-tui-faceted-search": "^8.1.2", - "@talend/locales-tui-forms": "^9.0.1", - "@talend/scripts-core": "^15.0.0", - "@types/react": "^17.0.65", - "i18next": "^20.6.1", + "@talend/eslint-config": "^12.1.1", + "@talend/eslint-plugin": "^1.0.1", + "@talend/locales-design-system": "^7.15.1", + "@talend/locales-tui-components": "^11.4.5", + "@talend/locales-tui-containers": "^9.1.3", + "@talend/locales-tui-faceted-search": "^11.3.0", + "@talend/locales-tui-forms": "^10.2.4", + "@talend/scripts-core": "^16.0.0", + "@talend/scripts-config-babel": "^13.0.0", + "@talend/scripts-config-storybook-lib": "^5.1.0", + "@talend/scripts-config-typescript": "^11.1.0", + "@types/react": "^18.2.7", + "i18next": "^23.5.1", "mdx-embed": "^1.1.2", - "react": "^17.0.2", - "react-dom": "^17.0.2", + "react": "^18.2.0", + "react-dom": "^18.2.0", "react-router-dom": "~6.3.0", "storybook-docs-toc": "^1.7.0" }, diff --git a/packages/design-docs/src/Welcome.mdx b/packages/design-docs/src/Welcome.mdx index 266613ad7d..b9b4879e61 100644 --- a/packages/design-docs/src/Welcome.mdx +++ b/packages/design-docs/src/Welcome.mdx @@ -21,7 +21,6 @@ import Welcome from './WelcomeImage'; ## Coral goals -
Scalable
diff --git a/packages/design-system/.babelrc b/packages/design-system/.babelrc index 02add25248..269d2ec2cf 100644 --- a/packages/design-system/.babelrc +++ b/packages/design-system/.babelrc @@ -1,3 +1,3 @@ { - "extends": "@talend/scripts-config-babel/.babelrc.json" + "extends": "@talend/scripts-config-babel/babel.config.js" } diff --git a/packages/design-system/.eslintrc.json b/packages/design-system/.eslintrc.json index 3f45511852..8464e11418 100644 --- a/packages/design-system/.eslintrc.json +++ b/packages/design-system/.eslintrc.json @@ -1,7 +1,4 @@ { "root": true, - "extends": ["@talend"], - "rules": { - "react/display-name": "warn" - } + "extends": "@talend" } diff --git a/packages/design-system/CHANGELOG.md b/packages/design-system/CHANGELOG.md index b55404a1c4..c9df174296 100644 --- a/packages/design-system/CHANGELOG.md +++ b/packages/design-system/CHANGELOG.md @@ -1,5 +1,92 @@ # @talend/design-system +## 8.0.0 + +### Major Changes + +- 96d688489: React: Upgrade to react 18 and @types/react 18 +- 9a0732ec5: chore: remove reakit + + - Rewrite components without reakit + - use `@floating-ui/react` for tooltip, popover + - export all types and components from the root + + Breaking changes: + + - HTML structure output may have changed + - Some passed props from our component to reakit and not documented as a usage as been removed. If you need a different usage let us knwow, now we own the code + - Tabs props API has been completly changed + + Components changed: + + - Accordion (useId) + - Clickable (rewrite) + - Combobox (add as primitive) + - Disclosure (add as primitive) + - Divider (rewrite) + - Drawer (rewrite using `react-transition-group`) + - Dropdown (rewrite using `@floating-ui/react`) + - Form/Affix/Button (typings) + - Form/Affix/Select (useId) + - Form/Field/Datalist (useId) + - Form/Field/InputFile (useId) + - Form/Field/InputToggleSwitch (rewrite) + - Form/Primitives/Checkbox (rewrite) + - Form/Primitives/Field (useId) + - Form/Primitives/Radio (useId) + - Modal (rewrite Dialog as primitive) + - Popover (rewrite using `@floating-ui/react`) + - Switch (rewrite) + - Tabs (rewrite + props changed with old API support) + - Tooltip (rewrite using `@floating-ui/react` + API Change) + - VisuallyHidden (rewrite) + + ## Migration Guide + + ### Checkbox component + + Checkbox support now control and uncontrolled mode. + To use controlled version, provide `checked` and `onChange` props. + To use uncontrolled version, you can provide optional `defaultChecked` prop. + + We also change way to import it to be less verbose. + + ### ToggleSwitch component + + ToggleSwitch now support controlled and uncontrolled mode. + To use controlled version provide `checked` and `onChange` props. + To use uncontrolled version, you can just provide optional provide `defaultChecked` prop. + + ### Tabs component + + Previous API with the `tabs` props. TabsKit has been removed. We encourage you to use the following API: + + ```javascript + + + + + + + Tab content for Home + Tab content for Profile + Tab content for Contact + + ``` + +- 4044f6198: ARCH-662 - Bump i18next from v20 to v23 and react-i18next from v11 to v13 + +### Minor Changes + +- 9a0732ec5: feat: upgrade react-is + +### Patch Changes + +- bacaa4b31: fix TypeError: popover.hide is not a function on close Popover +- 9a0732ec5: fix: some lint errors +- Updated dependencies [96d688489] + - @talend/icons@7.0.0 + ## 7.15.1 ### Patch Changes diff --git a/packages/design-system/i18next-scanner.config.js b/packages/design-system/i18next-scanner.config.js index 49e651adfe..20d11896cd 100644 --- a/packages/design-system/i18next-scanner.config.js +++ b/packages/design-system/i18next-scanner.config.js @@ -2,12 +2,13 @@ const typescriptTransform = require('i18next-scanner-typescript'); module.exports = { - input: ['src/**/*.{ts,tsx}'], + input: ['src/**/*.{ts,tsx}', '!src/**/*stories.{ts,tsx}'], options: { + compatibilityJSON: 'v4', debug: true, func: { list: ['t', 'i18next.t'], - extensions: ['.js'], + extensions: ['.js', '.ts', '.tsx'], }, lngs: ['en'], defaultNs: 'design-system', diff --git a/packages/design-system/package.json b/packages/design-system/package.json index d0968ba8a8..534a2848f5 100644 --- a/packages/design-system/package.json +++ b/packages/design-system/package.json @@ -1,6 +1,6 @@ { "name": "@talend/design-system", - "version": "7.15.1", + "version": "8.0.0", "description": "Talend Design System", "main": "lib/index.js", "types": "lib/index.d.ts", @@ -10,8 +10,9 @@ "build:lib:umd:min": "talend-scripts build --umd --prod", "pre-release": "npm run build:lib:umd && npm run build:lib:umd:min", "watch": "talend-scripts build --watch", - "test": "echo Tests are managed by Cypress using yarn test:cy", + "test": "talend-scripts test", "test:cy": "cypress run --component --spec **.cy.tsx", + "cy:run": "cypress run --component", "extract-i18n": "i18next-scanner --config i18next-scanner.config.js", "lint": "talend-scripts lint", "start": "talend-scripts start-storybook" @@ -31,21 +32,23 @@ "access": "public" }, "dependencies": { + "@floating-ui/react": "^0.24.2", "@talend/assets-api": "^1.2.2", "@talend/design-tokens": "^2.9.0", + "@talend/utils": "^2.5.1", "classnames": "^2.3.2", "keycode": "^2.2.1", "modern-css-reset": "^1.4.0", "polished": "^4.2.2", "react-use": "^17.4.0", - "reakit": "^1.3.11", + "react-transition-group": "^2.2.9", "typeface-inconsolata": "^1.1.13", "typeface-source-sans-pro": "^1.1.13" }, "devDependencies": { - "@babel/core": "^7.22.20", "@cypress/react": "^7.0.3", "@cypress/webpack-dev-server": "^3.6.1", + "@jest/globals": "^29.7.0", "@storybook/addon-a11y": "^7.4.1", "@storybook/addon-actions": "^7.4.1", "@storybook/addon-essentials": "^7.4.1", @@ -59,41 +62,51 @@ "@storybook/testing-library": "^0.2.0", "@storybook/theming": "^7.4.1", "@svgr/webpack": "^5.5.0", - "@talend/bootstrap-theme": "^8.1.3", - "@talend/icons": "^6.60.1", - "@talend/locales-design-system": "^7.3.0", - "@talend/scripts-core": "^15.0.0", + "@talend/bootstrap-theme": "^8.2.1", + "@talend/eslint-config": "^12.1.1", + "@talend/eslint-plugin": "^1.0.1", + "@talend/icons": "^7.0.0", + "@talend/locales-design-system": "^7.15.1", + "@talend/scripts-core": "^16.0.0", + "@talend/scripts-config-babel": "^13.0.0", "@talend/scripts-config-react-webpack": "^16.0.0", + "@talend/scripts-config-storybook-lib": "^5.1.0", + "@talend/scripts-config-typescript": "^11.1.0", + "@talend/storybook-docs": "^2.0.0", "@testing-library/cypress": "^9.0.0", "@types/classnames": "^2.3.1", - "@types/react": "^17.0.65", - "@types/react-dom": "^17.0.20", - "@types/react-is": "^16.7.2", + "@types/jest-axe": "^3.5.6", + "@types/react-is": "^18.2.0", + "@types/react": "^18.2.0", + "@types/react-dom": "^18.2.0", + "@types/react-transition-group": "^2.9.2", "browser-sync": "^2.29.3", "browser-sync-webpack-plugin": "^2.3.0", "concurrently": "^7.6.0", "core-js": "^3.32.2", "cypress": "^12.17.4", "focus-outline-manager": "^1.0.2", - "i18next": "^20.6.1", + "i18next": "^23.5.1", "i18next-scanner": "^4.4.0", "i18next-scanner-typescript": "^1.1.1", + "jest-axe": "^8.0.0", "mdx-embed": "^1.1.2", - "react": "^17.0.2", - "react-dom": "^17.0.2", + "react": "^18.2.0", + "react-dom": "^18.2.0", "react-helmet": "^6.1.0", - "react-i18next": "^11.18.6", - "react-is": "^16.13.1", + "react-i18next": "^13.3.0", + "react-is": "^17.0.0", "react-router-dom": "~6.3.0", "storybook-docs-toc": "^1.7.0" }, "peerDependencies": { - "@talend/icons": "^6.52.0", - "@talend/locales-design-system": "^7.3.0", - "i18next": "^20.1.0", + "@talend/icons": "^7.0.0", + "@talend/locales-design-system": "^7.15.1", + "@testing-library/react": "^12.1.5", + "i18next": "^23.5.1", "react": "^16.14.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0", - "react-i18next": "^11.18.6", - "react-is": "^16.13.1" + "react-i18next": "^13.3.0", + "react-is": "^16.13.1 || ^17.0.0 || ^18.0.0" } } diff --git a/packages/design-system/src/components/WIP/Accordion/Accordion.cy.tsx b/packages/design-system/src/components/Accordion/Accordion.cy.tsx similarity index 97% rename from packages/design-system/src/components/WIP/Accordion/Accordion.cy.tsx rename to packages/design-system/src/components/Accordion/Accordion.cy.tsx index 32d2abc31d..cf80ce4157 100644 --- a/packages/design-system/src/components/WIP/Accordion/Accordion.cy.tsx +++ b/packages/design-system/src/components/Accordion/Accordion.cy.tsx @@ -40,9 +40,9 @@ context('', () => { it('should expand and collapse', () => { cy.mount(); - cy.get('#CollapsiblePanel__control--panel-with-action').click(); + cy.get('#CollapsiblePanel__control--panel-with-action').focus().click(); cy.findByTestId('panel.section').should('be.visible'); - cy.get('#CollapsiblePanel__control--panel-with-action').click(); + cy.get('#CollapsiblePanel__control--panel-with-action').focus().click(); cy.findByTestId('panel.section').should('not.exist'); }); diff --git a/packages/design-system/src/components/Accordion/Accordion.test.tsx b/packages/design-system/src/components/Accordion/Accordion.test.tsx new file mode 100644 index 0000000000..4054c71c71 --- /dev/null +++ b/packages/design-system/src/components/Accordion/Accordion.test.tsx @@ -0,0 +1,50 @@ +import { describe, it, expect } from '@jest/globals'; +import { axe } from 'jest-axe'; +import { render } from '@testing-library/react'; +import { Accordion, CollapsiblePanel } from './'; + +jest.mock('@talend/utils', () => { + let i = 0; + return { + // we need stable but different uuid (is fixed to 42 by current mock) + randomUUID: () => `mocked-uuid-${i++}`, + }; +}); + +describe('Accordion', () => { + it('should render a11y html', async () => { + const { container } = render( +
+ + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis nisl convallis. +

+ + +

+ In hac habitasse platea dictumst. Etiam sed orci ullamcorper, venenatis tellus ut, + cursus nulla. +

+ + +

Cras orci neque, placerat non rutrum eleifend, convallis at lorem.

+ + +

+ Morbi consectetur vehicula dignissim. Phasellus ullamcorper risus in erat accumsan, eu + ullamcorper ante dictum. +

+ + +

Duis orci neque, vehicula eget pulvinar quis, pellentesque non odio.

+ + + , +
, + ); + expect(container.firstChild).toMatchSnapshot(); + const results = await axe(document.body); + expect(results).toHaveNoViolations(); + }); +}); diff --git a/packages/design-system/src/components/WIP/Accordion/Accordion.tsx b/packages/design-system/src/components/Accordion/Accordion.tsx similarity index 80% rename from packages/design-system/src/components/WIP/Accordion/Accordion.tsx rename to packages/design-system/src/components/Accordion/Accordion.tsx index edba973f05..479e67a74c 100644 --- a/packages/design-system/src/components/WIP/Accordion/Accordion.tsx +++ b/packages/design-system/src/components/Accordion/Accordion.tsx @@ -1,10 +1,11 @@ -import { Children, cloneElement, ReactElement, useState } from 'react'; +import { Children, cloneElement, useState } from 'react'; +import type { ReactElement } from 'react'; -export type AccordionPropsType = { +export type AccordionProps = { children: ReactElement[]; }; -const Accordion = ({ children }: AccordionPropsType) => { +export const Accordion = ({ children }: AccordionProps) => { const panelCount = Children.count(children); const [openedPanelIndex, setOpenedPanelIndex] = useState(null); @@ -37,5 +38,3 @@ const Accordion = ({ children }: AccordionPropsType) => { }; Accordion.displayName = 'Accordion'; - -export default Accordion; diff --git a/packages/design-system/src/components/WIP/Accordion/Primitive/CollapsiblePanel.module.scss b/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanel.module.scss similarity index 100% rename from packages/design-system/src/components/WIP/Accordion/Primitive/CollapsiblePanel.module.scss rename to packages/design-system/src/components/Accordion/Primitive/CollapsiblePanel.module.scss diff --git a/packages/design-system/src/components/WIP/Accordion/Primitive/CollapsiblePanel.tsx b/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanel.tsx similarity index 82% rename from packages/design-system/src/components/WIP/Accordion/Primitive/CollapsiblePanel.tsx rename to packages/design-system/src/components/Accordion/Primitive/CollapsiblePanel.tsx index c1f14fdc99..2e6d8408b2 100644 --- a/packages/design-system/src/components/WIP/Accordion/Primitive/CollapsiblePanel.tsx +++ b/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanel.tsx @@ -1,10 +1,9 @@ import { forwardRef, ReactChild, Ref, useState, useEffect, HTMLAttributes } from 'react'; import classNames from 'classnames'; -import { unstable_useId as useId } from 'reakit/Id'; -import { DataAttributes } from '../../../../types'; - -import { variants } from '../../../Status/Primitive/StatusPrimitive'; +import { useId } from '../../../useId'; +import { DataAttributes } from '../../../types'; +import { variants } from '../../Status/Primitive/StatusPrimitive'; import CollapsiblePanelHeader from './CollapsiblePanelHeader'; import { PanelHeaderAction } from './types'; @@ -25,20 +24,20 @@ type CollapsiblePanelCommonPropsType = { } & Omit, 'className' | 'style'> & DataAttributes; -export type CollapsiblePanelWithTitlePropsType = { +type CollapsiblePanelWithTitlePropsType = { title: ReactChild; status?: never; }; -export type CollapsiblePanelWithStatusPropsType = { +type CollapsiblePanelWithStatusPropsType = { title?: never; status: keyof typeof variants; }; -export type CollapsiblePanelPropsType = CollapsiblePanelCommonPropsType & +export type CollapsiblePanelProps = CollapsiblePanelCommonPropsType & (CollapsiblePanelWithTitlePropsType | CollapsiblePanelWithStatusPropsType); -const CollapsiblePanel = forwardRef( +export const CollapsiblePanel = forwardRef( ( { id, @@ -56,13 +55,12 @@ const CollapsiblePanel = forwardRef( isLast = false, disabled = false, ...rest - }: CollapsiblePanelPropsType, + }: CollapsiblePanelProps, ref: Ref, ) => { const [localExpanded, setLocalExpanded] = useState(!!expanded); - const { id: reakitId } = useId(); - const componentId = id || reakitId; + const componentId = useId(id); const controlId = `CollapsiblePanel__control--${componentId}`; const sectionId = `CollapsiblePanel__content--${componentId}`; @@ -121,5 +119,3 @@ const CollapsiblePanel = forwardRef( ); CollapsiblePanel.displayName = 'CollapsiblePanel'; - -export default CollapsiblePanel; diff --git a/packages/design-system/src/components/WIP/Accordion/Primitive/CollapsiblePanelHeader.module.scss b/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanelHeader.module.scss similarity index 100% rename from packages/design-system/src/components/WIP/Accordion/Primitive/CollapsiblePanelHeader.module.scss rename to packages/design-system/src/components/Accordion/Primitive/CollapsiblePanelHeader.module.scss diff --git a/packages/design-system/src/components/WIP/Accordion/Primitive/CollapsiblePanelHeader.tsx b/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanelHeader.tsx similarity index 91% rename from packages/design-system/src/components/WIP/Accordion/Primitive/CollapsiblePanelHeader.tsx rename to packages/design-system/src/components/Accordion/Primitive/CollapsiblePanelHeader.tsx index 506dfd2ae8..d6933c2c1f 100644 --- a/packages/design-system/src/components/WIP/Accordion/Primitive/CollapsiblePanelHeader.tsx +++ b/packages/design-system/src/components/Accordion/Primitive/CollapsiblePanelHeader.tsx @@ -3,12 +3,12 @@ import classnames from 'classnames'; import tokens from '@talend/design-tokens'; -import { ButtonIcon } from '../../../ButtonIcon'; -import { SizedIcon } from '../../../Icon'; -import Divider from '../../../Divider'; -import { StackHorizontal } from '../../../Stack'; -import { Status } from '../../../Status'; -import { variants } from '../../../Status/Primitive/StatusPrimitive'; +import { ButtonIcon } from '../../ButtonIcon'; +import { SizedIcon } from '../../Icon'; +import { Divider } from '../../Divider'; +import { StackHorizontal } from '../../Stack'; +import { Status } from '../../Status'; +import { variants } from '../../Status/Primitive/StatusPrimitive'; import { PanelHeaderAction } from './types'; import styles from './CollapsiblePanelHeader.module.scss'; @@ -63,6 +63,7 @@ const CollapsiblePanelHeader = forwardRef( return ( +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ , + +`; diff --git a/packages/design-system/src/components/Accordion/index.ts b/packages/design-system/src/components/Accordion/index.ts new file mode 100644 index 0000000000..be9e462497 --- /dev/null +++ b/packages/design-system/src/components/Accordion/index.ts @@ -0,0 +1,2 @@ +export * from './Accordion'; +export * from './Primitive/CollapsiblePanel'; diff --git a/packages/design-system/src/components/Badge/Badge.test.tsx b/packages/design-system/src/components/Badge/Badge.test.tsx new file mode 100644 index 0000000000..ba54febe53 --- /dev/null +++ b/packages/design-system/src/components/Badge/Badge.test.tsx @@ -0,0 +1,52 @@ +import { describe, it, expect } from '@jest/globals'; +import { axe } from 'jest-axe'; +import { render } from '@testing-library/react'; +import { Badge, BadgeDropdown } from './'; + +jest.mock('@talend/utils', () => { + let i = 0; + return { + // we need stable but different uuid (is fixed to 42 by current mock) + randomUUID: () => `mocked-uuid-${i++}`, + }; +}); + +describe('Badge', () => { + it('should render a11y html', async () => { + const selectedValue = '3'; + const setSelectedValue = jest.fn(); + const { container } = render( +
+
+ +
+
+ +
+ TODO: add popover and tag +
, + ); + expect(container.firstChild).toMatchSnapshot(); + const results = await axe(document.body); + expect(results).toHaveNoViolations(); + }); +}); diff --git a/packages/design-system/src/components/Badge/__snapshots__/Badge.test.tsx.snap b/packages/design-system/src/components/Badge/__snapshots__/Badge.test.tsx.snap new file mode 100644 index 0000000000..764475d9b5 --- /dev/null +++ b/packages/design-system/src/components/Badge/__snapshots__/Badge.test.tsx.snap @@ -0,0 +1,273 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Badge should render a11y html 1`] = ` +
+
+ +
+ + Awesome + + +
+ + + +
+ +
+
+ +
+ + Awesome + + +
+ + + +
+ +
+ TODO: add popover and tag +
+`; diff --git a/packages/design-system/src/components/Badge/button/BadgeButton.tsx b/packages/design-system/src/components/Badge/button/BadgeButton.tsx index b0d9b75c51..b877959199 100644 --- a/packages/design-system/src/components/Badge/button/BadgeButton.tsx +++ b/packages/design-system/src/components/Badge/button/BadgeButton.tsx @@ -2,8 +2,8 @@ import { forwardRef, Ref } from 'react'; import classnames from 'classnames'; import styles from './BadgeButton.module.scss'; -import Clickable from '../../Clickable'; import { DataAttributes } from 'src/types'; +import { Clickable } from '../../Clickable/Clickable'; type BadgeButtonProps = { /** diff --git a/packages/design-system/src/components/Badge/primitive/BadgePrimitive.tsx b/packages/design-system/src/components/Badge/primitive/BadgePrimitive.tsx index 0bcbec4e92..97a5d3c058 100644 --- a/packages/design-system/src/components/Badge/primitive/BadgePrimitive.tsx +++ b/packages/design-system/src/components/Badge/primitive/BadgePrimitive.tsx @@ -1,6 +1,6 @@ import { Children, PropsWithChildren, Ref } from 'react'; -import Divider from '../../Divider'; +import { Divider } from '../../Divider'; import classnames from 'classnames'; import styles from './BadgePrimitive.module.scss'; diff --git a/packages/design-system/src/components/Badge/variants/BadgeDropdown.tsx b/packages/design-system/src/components/Badge/variants/BadgeDropdown.tsx index 6d3b84181f..e419df1d6b 100644 --- a/packages/design-system/src/components/Badge/variants/BadgeDropdown.tsx +++ b/packages/design-system/src/components/Badge/variants/BadgeDropdown.tsx @@ -2,8 +2,7 @@ import { forwardRef, Ref } from 'react'; import { useTranslation } from 'react-i18next'; import { I18N_DOMAIN_DESIGN_SYSTEM } from '../../constants'; -import Dropdown from '../../Dropdown'; -import { DropdownItemType } from '../../Dropdown/Dropdown'; +import { Dropdown, DropdownItemType } from '../../Dropdown'; import { SizedIcon } from '../../Icon'; import { StackHorizontal } from '../../Stack'; diff --git a/packages/design-system/src/components/Badge/variants/BadgePopover.tsx b/packages/design-system/src/components/Badge/variants/BadgePopover.tsx index 77b76da3c1..e3a15f028e 100644 --- a/packages/design-system/src/components/Badge/variants/BadgePopover.tsx +++ b/packages/design-system/src/components/Badge/variants/BadgePopover.tsx @@ -1,6 +1,6 @@ import { Fragment, forwardRef, Ref } from 'react'; -import Divider from '../../Divider'; +import { Divider } from '../../Divider'; import { StackHorizontal } from '../../Stack'; import BadgeButton from '../button/BadgeButton'; import BadgePrimitive, { BadgePopoverItem, BadgePrimitiveProps } from '../primitive/BadgePrimitive'; diff --git a/packages/design-system/src/components/Badge/variants/BadgeValue.tsx b/packages/design-system/src/components/Badge/variants/BadgeValue.tsx index 8f28a2331b..265d8ce0e4 100644 --- a/packages/design-system/src/components/Badge/variants/BadgeValue.tsx +++ b/packages/design-system/src/components/Badge/variants/BadgeValue.tsx @@ -4,7 +4,7 @@ import BadgePrimitive, { BadgePrimitiveProps } from '../primitive/BadgePrimitive import classnames from 'classnames'; import styles from './BadgeValue.module.scss'; import { StackHorizontal } from '../../Stack'; -import Divider from '../../Divider'; +import { Divider } from '../../Divider'; export type BadgeValueProps = BadgePrimitiveProps & { /** diff --git a/packages/design-system/src/components/Breadcrumbs/Breadcrumbs.test.tsx b/packages/design-system/src/components/Breadcrumbs/Breadcrumbs.test.tsx new file mode 100644 index 0000000000..65d8c217c4 --- /dev/null +++ b/packages/design-system/src/components/Breadcrumbs/Breadcrumbs.test.tsx @@ -0,0 +1,54 @@ +import { describe, it, expect } from '@jest/globals'; +import { axe } from 'jest-axe'; +import { render } from '@testing-library/react'; +import { Breadcrumbs } from './'; + +jest.mock('@talend/utils', () => { + let i = 0; + return { + // we need stable but different uuid (is fixed to 42 by current mock) + randomUUID: () => `mocked-uuid-${i++}`, + }; +}); + +describe('Breadcrumbs', () => { + it('should render a11y html', async () => { + const { container } = render( +
+ +
, + ); + expect(container.firstChild).toMatchSnapshot(); + const results = await axe(document.body); + expect(results).toHaveNoViolations(); + }); +}); diff --git a/packages/design-system/src/components/Breadcrumbs/Breadcrumbs.tsx b/packages/design-system/src/components/Breadcrumbs/Breadcrumbs.tsx index a445262e03..24e2dece7e 100644 --- a/packages/design-system/src/components/Breadcrumbs/Breadcrumbs.tsx +++ b/packages/design-system/src/components/Breadcrumbs/Breadcrumbs.tsx @@ -3,29 +3,31 @@ import { useTranslation } from 'react-i18next'; import classnames from 'classnames'; import styles from './Breadcrumbs.module.scss'; -import Link from '../Link'; -import Dropdown from '../Dropdown/Dropdown'; +import { Link } from '../Link'; +import { Dropdown } from '../Dropdown/Dropdown'; import { ButtonTertiary } from '../Button'; import { StackHorizontal } from '../Stack'; -import Divider from '../Divider'; -import VisuallyHidden from '../VisuallyHidden'; +import { Divider } from '../Divider'; +import { VisuallyHidden } from '../VisuallyHidden'; import { I18N_DOMAIN_DESIGN_SYSTEM } from '../constants'; type BreadcrumbsLink = { label: string; href: string; target?: string; + as: never; }; type BreadcrumbsRouterLink = { label: string; + href: never; target?: string; as: ReactElement; }; type BreadcrumbsItem = (BreadcrumbsRouterLink | BreadcrumbsLink)[]; -type BreadCrumbsProps = Omit, 'className' | 'style'> & { +export type BreadCrumbsProps = Omit, 'className' | 'style'> & { items: BreadcrumbsItem; }; @@ -38,12 +40,12 @@ function BreadcrumbLink({ link: BreadcrumbsLink | BreadcrumbsRouterLink; isLastLink: boolean; }) { - const destinationProps = 'href' in link ? { href: link.href } : { as: link.as }; return (
  • ) => { - const { t } = useTranslation(I18N_DOMAIN_DESIGN_SYSTEM); - const buildEntries = () => { - if (items.length > maxBreadcrumbsItemLength) { - const origin = items[0]; - const suffix = items.slice(-2); - const collapsed = items.slice(1, items.length - 2); +export const Breadcrumbs = forwardRef( + ({ items, ...rest }: BreadCrumbsProps, ref: Ref) => { + const { t } = useTranslation(I18N_DOMAIN_DESIGN_SYSTEM); + const buildEntries = () => { + if (items.length > maxBreadcrumbsItemLength) { + const origin = items[0]; + const suffix = items.slice(-2); + const collapsed = items.slice(1, items.length - 2); - return ( - <> - + return ( + <> + -
  • - - { - const refinedProp = - 'href' in collapsedLinks - ? { href: collapsedLinks.href } - : { as: collapsedLinks.as }; - return { - label: collapsedLinks.label, - target: collapsedLinks.target, - type: 'link', - ...refinedProp, - }; - })} - > - {}}> - - {t('COLLAPSED_LINKS_BUTTON', 'Display collapsed links')} - - … - - - - - - -
    • +
  • + + { + return { + type: 'link', + ...collapsedLinks, + }; + })} + > + {}}> + + {t('COLLAPSED_LINKS_BUTTON', 'Display collapsed links')} + + … + + + + + + +
    • - {suffix.map((entry, index) => { - const isLastEntry = index === suffix.length - 1; - return ( - - ); - })} - - ); - } + {suffix.map((entry, index) => { + const isLastEntry = index === suffix.length - 1; + return ( + + ); + })} + + ); + } - return items.map((entry, index) => { - const isLastEntry = index === items.length - 1; - return ( - - ); - }); - }; + return items.map((entry, index) => { + const isLastEntry = index === items.length - 1; + return ( + + ); + }); + }; - return ( - - ); -}); + return ( + + ); + }, +); -export default Breadcrumbs; +Breadcrumbs.displayName = 'Breadcrumbs'; diff --git a/packages/design-system/src/components/Breadcrumbs/__snapshots__/Breadcrumbs.test.tsx.snap b/packages/design-system/src/components/Breadcrumbs/__snapshots__/Breadcrumbs.test.tsx.snap new file mode 100644 index 0000000000..e52fe52653 --- /dev/null +++ b/packages/design-system/src/components/Breadcrumbs/__snapshots__/Breadcrumbs.test.tsx.snap @@ -0,0 +1,195 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Breadcrumbs should render a11y html 1`] = ` +
    + +
    +`; diff --git a/packages/design-system/src/components/Breadcrumbs/index.ts b/packages/design-system/src/components/Breadcrumbs/index.ts new file mode 100644 index 0000000000..ce977548b1 --- /dev/null +++ b/packages/design-system/src/components/Breadcrumbs/index.ts @@ -0,0 +1 @@ +export * from './Breadcrumbs'; diff --git a/packages/design-system/src/components/Button/Button.cy.tsx b/packages/design-system/src/components/Button/Button.cy.tsx index f596d2996d..28e7742266 100644 --- a/packages/design-system/src/components/Button/Button.cy.tsx +++ b/packages/design-system/src/components/Button/Button.cy.tsx @@ -5,7 +5,7 @@ import { useState } from 'react'; import ButtonPrimitive from './Primitive/ButtonPrimitive'; import { ButtonPrimary } from './'; -import Tooltip from '../../components/Tooltip'; +import { Tooltip } from '../../components/Tooltip'; const Loading = ({ 'data-testid': dataTestId }: { 'data-testid': string }) => { // eslint-disable-next-line react-hooks/rules-of-hooks @@ -55,21 +55,20 @@ context(' + + + + + + , + ); + expect(container.firstChild).toMatchSnapshot(); + const results = await axe(document.body); + expect(results).toHaveNoViolations(); + }); +}); diff --git a/packages/design-system/src/components/Button/Button.tsx b/packages/design-system/src/components/Button/Button.tsx index e43bc7aee5..73a3cce3e1 100644 --- a/packages/design-system/src/components/Button/Button.tsx +++ b/packages/design-system/src/components/Button/Button.tsx @@ -1,6 +1,6 @@ import { forwardRef, Ref } from 'react'; -import ButtonPrimary, { ButtonPrimaryPropsType } from './variations/ButtonPrimary'; +import { ButtonPrimary, ButtonPrimaryPropsType } from './variations/ButtonPrimary'; import ButtonSecondary, { ButtonSecondaryPropsType } from './variations/ButtonSecondary'; import ButtonTertiary, { ButtonTertiaryPropsType } from './variations/ButtonTertiary'; import ButtonDestructive, { ButtonDestructivePropsType } from './variations/ButtonDestructive'; @@ -54,8 +54,6 @@ function ButtonPlatform( } } -const Button = forwardRef(ButtonPlatform) as ( +export const Button = forwardRef(ButtonPlatform) as ( props: ButtonType & { ref?: Ref }, ) => ReturnType; - -export default Button; diff --git a/packages/design-system/src/components/Button/Primitive/ButtonPrimitive.tsx b/packages/design-system/src/components/Button/Primitive/ButtonPrimitive.tsx index 8c93d9a65b..8781866ee8 100644 --- a/packages/design-system/src/components/Button/Primitive/ButtonPrimitive.tsx +++ b/packages/design-system/src/components/Button/Primitive/ButtonPrimitive.tsx @@ -2,15 +2,16 @@ import { forwardRef, ReactElement, Ref } from 'react'; // eslint-disable-next-line @talend/import-depth import { IconNameWithSize } from '@talend/icons/dist/typeUtils'; import classnames from 'classnames'; -import Clickable, { ClickableProps } from '../../Clickable'; +import { ClickableProps } from '../../Clickable'; import { DataAttributes, DeprecatedIconNames } from '../../../types'; import { StackHorizontal } from '../../Stack'; -import Loading from '../../Loading'; +import { Loading } from '../../Loading'; import { getIconWithDeprecatedSupport } from '../../Icon/DeprecatedIconHelper'; import styles from './ButtonStyles.module.scss'; import { SizedIcon } from '../../Icon'; +import { Clickable } from '../../Clickable/Clickable'; export type AvailableVariantsTypes = 'primary' | 'destructive' | 'secondary' | 'tertiary'; export type AvailableSizes = 'M' | 'S'; @@ -22,9 +23,7 @@ export type SharedButtonTypes = { isLoading?: boolean; isDropdown?: boolean; size?: S; - icon?: S extends 'S' - ? IconNameWithSize<'S'> - : DeprecatedIconNames | ReactElement | IconNameWithSize<'M'>; + icon?: IconNameWithSize<'S'> | DeprecatedIconNames | ReactElement | IconNameWithSize<'M'>; }; export type BaseButtonProps = Omit & @@ -33,7 +32,7 @@ export type BaseButtonProps = Omit( props: BaseButtonProps, - ref?: Ref, + ref: Ref, ) { const { className, @@ -45,11 +44,12 @@ function ButtonPrimitiveInner( isDropdown = false, ...rest } = props; + const cls = { + [styles['size-S']]: size === 'S', + }; return ( ( )} {!isLoading && icon && ( - {getIconWithDeprecatedSupport({ iconSrc: icon, size: size === 'S' ? 'S' : 'M' })} + {getIconWithDeprecatedSupport({ iconSrc: icon, size: size || 'M' })} )} {children} diff --git a/packages/design-system/src/components/Button/__snapshots__/Button.test.tsx.snap b/packages/design-system/src/components/Button/__snapshots__/Button.test.tsx.snap new file mode 100644 index 0000000000..b9d45e891c --- /dev/null +++ b/packages/design-system/src/components/Button/__snapshots__/Button.test.tsx.snap @@ -0,0 +1,132 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Button should render a11y html 1`] = ` +
    + + + + + + +
    +`; diff --git a/packages/design-system/src/components/Button/index.ts b/packages/design-system/src/components/Button/index.ts index 3fd70bef5f..030cc6dd7c 100644 --- a/packages/design-system/src/components/Button/index.ts +++ b/packages/design-system/src/components/Button/index.ts @@ -1,8 +1,8 @@ -import ButtonPrimary from './variations/ButtonPrimary'; +import { ButtonPrimary } from './variations/ButtonPrimary'; import ButtonSecondary from './variations/ButtonSecondary'; import ButtonTertiary from './variations/ButtonTertiary'; import ButtonDestructive from './variations/ButtonDestructive'; -import Button from './Button'; +import { Button } from './Button'; import { AvailableSizes, BaseButtonProps } from './Primitive/ButtonPrimitive'; diff --git a/packages/design-system/src/components/Button/variations/ButtonDestructive.tsx b/packages/design-system/src/components/Button/variations/ButtonDestructive.tsx index 366b8cdd18..aa06b87898 100644 --- a/packages/design-system/src/components/Button/variations/ButtonDestructive.tsx +++ b/packages/design-system/src/components/Button/variations/ButtonDestructive.tsx @@ -5,10 +5,8 @@ import styles from './ButtonDestructive.module.scss'; export type ButtonDestructivePropsType = Omit< BaseButtonProps, - 'className' | 'size' -> & { - size?: S; -}; + 'className' +>; function Destructive( props: ButtonDestructivePropsType, diff --git a/packages/design-system/src/components/Button/variations/ButtonPrimary.tsx b/packages/design-system/src/components/Button/variations/ButtonPrimary.tsx index 5488c61273..f842f59666 100644 --- a/packages/design-system/src/components/Button/variations/ButtonPrimary.tsx +++ b/packages/design-system/src/components/Button/variations/ButtonPrimary.tsx @@ -5,10 +5,8 @@ import styles from './ButtonPrimary.module.scss'; export type ButtonPrimaryPropsType = Omit< BaseButtonProps, - 'className' | 'size' -> & { - size?: S; -}; + 'className' +>; function Primary( props: ButtonPrimaryPropsType, @@ -17,8 +15,6 @@ function Primary( return ; } -const ButtonPrimary = forwardRef(Primary) as ( +export const ButtonPrimary = forwardRef(Primary) as ( props: ButtonPrimaryPropsType & { ref?: Ref }, ) => ReturnType; - -export default ButtonPrimary; diff --git a/packages/design-system/src/components/Button/variations/ButtonSecondary.tsx b/packages/design-system/src/components/Button/variations/ButtonSecondary.tsx index e8bed12f18..c27a1555ba 100644 --- a/packages/design-system/src/components/Button/variations/ButtonSecondary.tsx +++ b/packages/design-system/src/components/Button/variations/ButtonSecondary.tsx @@ -6,10 +6,8 @@ import { ButtonDestructivePropsType } from './ButtonDestructive'; export type ButtonSecondaryPropsType = Omit< BaseButtonProps, - 'className' | 'size' -> & { - size?: S; -}; + 'className' +>; function Secondary( props: ButtonSecondaryPropsType, diff --git a/packages/design-system/src/components/Button/variations/ButtonTertiary.tsx b/packages/design-system/src/components/Button/variations/ButtonTertiary.tsx index ad960232b2..b473653caa 100644 --- a/packages/design-system/src/components/Button/variations/ButtonTertiary.tsx +++ b/packages/design-system/src/components/Button/variations/ButtonTertiary.tsx @@ -6,10 +6,8 @@ import { ButtonDestructivePropsType } from './ButtonDestructive'; export type ButtonTertiaryPropsType = Omit< BaseButtonProps, - 'className' | 'size' -> & { - size?: S; -}; + 'className' +>; function Tertiary( props: ButtonTertiaryPropsType, diff --git a/packages/design-system/src/components/ButtonAsLink/ButtonAsLink.test.tsx b/packages/design-system/src/components/ButtonAsLink/ButtonAsLink.test.tsx new file mode 100644 index 0000000000..b9e9a89349 --- /dev/null +++ b/packages/design-system/src/components/ButtonAsLink/ButtonAsLink.test.tsx @@ -0,0 +1,34 @@ +import { describe, it, expect } from '@jest/globals'; +import { axe } from 'jest-axe'; +import { render } from '@testing-library/react'; +import { ButtonAsLink } from './'; + +describe('ButtonAsLink', () => { + it('should render a11y html', async () => { + const { container } = render( +
    + + Primary + + + Destructive + + + Secondary + + + Tertiary submit + + + Tertiary + + + Tertiary + +
    , + ); + expect(container.firstChild).toMatchSnapshot(); + const results = await axe(document.body); + expect(results).toHaveNoViolations(); + }); +}); diff --git a/packages/design-system/src/components/ButtonAsLink/ButtonAsLink.tsx b/packages/design-system/src/components/ButtonAsLink/ButtonAsLink.tsx index e6445c965b..addf27ac47 100644 --- a/packages/design-system/src/components/ButtonAsLink/ButtonAsLink.tsx +++ b/packages/design-system/src/components/ButtonAsLink/ButtonAsLink.tsx @@ -65,8 +65,6 @@ function ButtonPlatform(props: ButtonType, ref: Ref } } -const ButtonAsLink = forwardRef(ButtonPlatform) as ( +export const ButtonAsLink = forwardRef(ButtonPlatform) as ( props: ButtonType & { ref?: Ref }, ) => ReturnType; - -export default ButtonAsLink; diff --git a/packages/design-system/src/components/ButtonAsLink/Primitive/ButtonPrimitiveAsLink.tsx b/packages/design-system/src/components/ButtonAsLink/Primitive/ButtonPrimitiveAsLink.tsx index e9aa471706..ed18b9b21d 100644 --- a/packages/design-system/src/components/ButtonAsLink/Primitive/ButtonPrimitiveAsLink.tsx +++ b/packages/design-system/src/components/ButtonAsLink/Primitive/ButtonPrimitiveAsLink.tsx @@ -1,6 +1,6 @@ import { forwardRef, Ref } from 'react'; import classnames from 'classnames'; -import Linkable, { LinkableType } from '../../Linkable'; +import { Linkable, LinkableType } from '../../Linkable'; import { StackHorizontal } from '../../Stack'; diff --git a/packages/design-system/src/components/ButtonAsLink/__snapshots__/ButtonAsLink.test.tsx.snap b/packages/design-system/src/components/ButtonAsLink/__snapshots__/ButtonAsLink.test.tsx.snap new file mode 100644 index 0000000000..ff0c2f7bf2 --- /dev/null +++ b/packages/design-system/src/components/ButtonAsLink/__snapshots__/ButtonAsLink.test.tsx.snap @@ -0,0 +1,75 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ButtonAsLink should render a11y html 1`] = ` +
    + + + Primary + + + + + + + + Destructive + + + + + Secondary + + + + + Tertiary submit + + + + + Tertiary + + + + + Tertiary + + +
    +`; diff --git a/packages/design-system/src/components/ButtonAsLink/index.ts b/packages/design-system/src/components/ButtonAsLink/index.ts index 567ee15986..42c7a3b6cf 100644 --- a/packages/design-system/src/components/ButtonAsLink/index.ts +++ b/packages/design-system/src/components/ButtonAsLink/index.ts @@ -2,10 +2,9 @@ import ButtonPrimaryAsLink from './variations/ButtonPrimaryAsLink'; import ButtonSecondaryAsLink from './variations/ButtonSecondaryAsLink'; import ButtonTertiaryAsLink from './variations/ButtonTertiaryAsLink'; import ButtonDestructiveAsLink from './variations/ButtonDestructiveAsLink'; -import ButtonAsLink from './ButtonAsLink'; +export * from './ButtonAsLink'; export { - ButtonAsLink, ButtonPrimaryAsLink, ButtonSecondaryAsLink, ButtonTertiaryAsLink, diff --git a/packages/design-system/src/components/ButtonAsLink/variations/ButtonDestructiveAsLink.tsx b/packages/design-system/src/components/ButtonAsLink/variations/ButtonDestructiveAsLink.tsx index 493cc0e155..b634bb3053 100644 --- a/packages/design-system/src/components/ButtonAsLink/variations/ButtonDestructiveAsLink.tsx +++ b/packages/design-system/src/components/ButtonAsLink/variations/ButtonDestructiveAsLink.tsx @@ -17,7 +17,7 @@ function DestructiveAsLink( } const ButtonDestructiveAsLink = forwardRef(DestructiveAsLink) as ( - props: ButtonDestructiveAsLinkPropsType & { ref?: Ref }, + props: ButtonDestructiveAsLinkPropsType & { ref: Ref }, ) => ReturnType; export default ButtonDestructiveAsLink; diff --git a/packages/design-system/src/components/ButtonIcon/ButtonIcon.test.tsx b/packages/design-system/src/components/ButtonIcon/ButtonIcon.test.tsx new file mode 100644 index 0000000000..4dde3253ff --- /dev/null +++ b/packages/design-system/src/components/ButtonIcon/ButtonIcon.test.tsx @@ -0,0 +1,20 @@ +import { describe, it, expect } from '@jest/globals'; +import { axe } from 'jest-axe'; +import { render } from '@testing-library/react'; +import { ButtonIcon } from './'; + +describe('ButtonIcon', () => { + it('should render accessible html', async () => { + // note we need to add the aria-label to be accessible + // TODO: make it required + const { container } = render( + {}}> + children is considered as description + , + ); + expect(container.firstChild).toMatchSnapshot(); + const results = await axe(document.body); + expect(results).toHaveNoViolations(); + expect(container.firstChild).toHaveAttribute('aria-describedby', 'id-42'); + }); +}); diff --git a/packages/design-system/src/components/ButtonIcon/Primitive/ButtonIconPrimitive.tsx b/packages/design-system/src/components/ButtonIcon/Primitive/ButtonIconPrimitive.tsx index bfaac7ec1b..3f815731b0 100644 --- a/packages/design-system/src/components/ButtonIcon/Primitive/ButtonIconPrimitive.tsx +++ b/packages/design-system/src/components/ButtonIcon/Primitive/ButtonIconPrimitive.tsx @@ -2,14 +2,16 @@ import { forwardRef } from 'react'; import type { MouseEvent, ReactElement, ButtonHTMLAttributes, Ref } from 'react'; import classnames from 'classnames'; + // eslint-disable-next-line @talend/import-depth import { IconNameWithSize } from '@talend/icons/dist/typeUtils'; +import { mergeRefs } from '../../../mergeRef'; import { DeprecatedIconNames } from '../../../types'; -import Button from '../../Clickable'; -import Tooltip, { TooltipPlacement } from '../../Tooltip'; -import Loading from '../../Loading'; +import { Clickable } from '../../Clickable'; import { getIconWithDeprecatedSupport } from '../../Icon/DeprecatedIconHelper'; +import { Loading } from '../../Loading'; +import { Tooltip, TooltipPlacement } from '../../Tooltip'; import styles from './ButtonIcon.module.scss'; @@ -18,7 +20,7 @@ export type PossibleVariants = 'toggle' | 'floating' | 'default'; type CommonTypes> = Omit< ButtonHTMLAttributes, - 'className' | 'style' + 'className' | 'style' | 'aria-label' > & { children: string; isLoading?: boolean; @@ -35,10 +37,12 @@ export type ToggleTypes> = CommonTypes & { export type FloatingTypes> = CommonTypes & { variant: 'floating'; + isActive?: never; }; export type DefaultTypes = CommonTypes & { variant: 'default'; + isActive?: never; }; export type ButtonIconProps = @@ -58,30 +62,36 @@ function Primitive( icon, disabled, tooltipPlacement, + isActive = false, ...rest } = props; - const activeButtonIconPrimitive = props.variant === 'toggle' ? props.isActive : false; + const activeButtonIconPrimitive = props.variant === 'toggle' ? isActive : false; return ( - + {(triggerProps, triggerRef) => ( + + + {!isLoading && + getIconWithDeprecatedSupport({ iconSrc: icon, size: size === 'XS' ? 'S' : 'M' })} + {isLoading && } + + + )} ); } diff --git a/packages/design-system/src/components/ButtonIcon/__snapshots__/ButtonIcon.test.tsx.snap b/packages/design-system/src/components/ButtonIcon/__snapshots__/ButtonIcon.test.tsx.snap new file mode 100644 index 0000000000..1b5824609d --- /dev/null +++ b/packages/design-system/src/components/ButtonIcon/__snapshots__/ButtonIcon.test.tsx.snap @@ -0,0 +1,25 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ButtonIcon should render accessible html 1`] = ` + +`; diff --git a/packages/design-system/src/components/ButtonIcon/index.ts b/packages/design-system/src/components/ButtonIcon/index.ts index 1efae09741..e9296793e6 100644 --- a/packages/design-system/src/components/ButtonIcon/index.ts +++ b/packages/design-system/src/components/ButtonIcon/index.ts @@ -1,4 +1,4 @@ -import ButtonIcon from './variations/ButtonIcon'; +import { ButtonIcon } from './variations/ButtonIcon'; import ButtonIconToggle from './variations/ButtonIconToggle'; import ButtonIconFloating from './variations/ButtonIconFloating'; diff --git a/packages/design-system/src/components/ButtonIcon/variations/ButtonIcon.tsx b/packages/design-system/src/components/ButtonIcon/variations/ButtonIcon.tsx index 56b4069e6b..c8a83ad2ad 100644 --- a/packages/design-system/src/components/ButtonIcon/variations/ButtonIcon.tsx +++ b/packages/design-system/src/components/ButtonIcon/variations/ButtonIcon.tsx @@ -10,8 +10,6 @@ function Button(props: ButtonIconType, ref: Ref; } -const ButtonIcon = forwardRef(Button) as ( +export const ButtonIcon = forwardRef(Button) as ( props: ButtonIconType & { ref?: Ref }, ) => ReturnType; - -export default ButtonIcon; diff --git a/packages/design-system/src/components/WIP/Card/Card.module.scss b/packages/design-system/src/components/Card/Card.module.scss similarity index 100% rename from packages/design-system/src/components/WIP/Card/Card.module.scss rename to packages/design-system/src/components/Card/Card.module.scss diff --git a/packages/design-system/src/components/Card/Card.test.tsx b/packages/design-system/src/components/Card/Card.test.tsx new file mode 100644 index 0000000000..bc57648b6d --- /dev/null +++ b/packages/design-system/src/components/Card/Card.test.tsx @@ -0,0 +1,19 @@ +import { describe, it, expect } from '@jest/globals'; +import { axe } from 'jest-axe'; +import { render } from '@testing-library/react'; +import { Card } from './'; + +describe('Card', () => { + it('should render a11y html', async () => { + const { container } = render( +
    + +

    Content

    +     +
    , + ); + expect(container.firstChild).toMatchSnapshot(); + const results = await axe(document.body); + expect(results).toHaveNoViolations(); + }); +}); diff --git a/packages/design-system/src/components/WIP/Card/Card.tsx b/packages/design-system/src/components/Card/Card.tsx similarity index 71% rename from packages/design-system/src/components/WIP/Card/Card.tsx rename to packages/design-system/src/components/Card/Card.tsx index f78038563c..041fcf6d9a 100644 --- a/packages/design-system/src/components/WIP/Card/Card.tsx +++ b/packages/design-system/src/components/Card/Card.tsx @@ -1,15 +1,15 @@ import type { ReactNode } from 'react'; -import { StackVertical } from '../../Stack'; +import { StackVertical } from '../Stack'; import theme from './Card.module.scss'; -interface CardPropsType { +export type CardPropsType = { header?: ReactNode; children: ReactNode; -} +}; -function Card({ header, children }: CardPropsType) { +export function Card({ header, children }: CardPropsType) { return (
    @@ -19,5 +19,3 @@ function Card({ header, children }: CardPropsType) {
    ); } - -export default Card; diff --git a/packages/design-system/src/components/Card/__snapshots__/Card.test.tsx.snap b/packages/design-system/src/components/Card/__snapshots__/Card.test.tsx.snap new file mode 100644 index 0000000000..74f84a4c60 --- /dev/null +++ b/packages/design-system/src/components/Card/__snapshots__/Card.test.tsx.snap @@ -0,0 +1,26 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Card should render a11y html 1`] = ` +
    +
    +
    +
    + header +
    +
    +

    + Content +

    +
    +
    +
    +
    +`; diff --git a/packages/design-system/src/components/Card/index.ts b/packages/design-system/src/components/Card/index.ts new file mode 100644 index 0000000000..ca0b060473 --- /dev/null +++ b/packages/design-system/src/components/Card/index.ts @@ -0,0 +1 @@ +export * from './Card'; diff --git a/packages/design-system/src/components/Clickable/Clickable.tsx b/packages/design-system/src/components/Clickable/Clickable.tsx index 0f03ce8dee..64ee5630fb 100644 --- a/packages/design-system/src/components/Clickable/Clickable.tsx +++ b/packages/design-system/src/components/Clickable/Clickable.tsx @@ -1,23 +1,22 @@ -import { forwardRef, MouseEvent, ReactNode, Ref } from 'react'; +import { forwardRef, MouseEvent, ReactNode, Ref, HTMLProps } from 'react'; import classnames from 'classnames'; -import { - Clickable as ReakitClickable, - ClickableProps as ReakitClickableProps, -} from 'reakit/Clickable'; import styles from './Clickable.module.scss'; -export type ClickableProps = Omit & { +export type ClickableProps = Omit< + HTMLProps, + 'size' | 'ref' | 'wrap' | 'loop' +> & { type?: 'button' | 'submit' | 'reset'; - children: ReactNode | ReactNode[]; + children: string | ReactNode | ReactNode[]; onClick?: (event: MouseEvent | KeyboardEvent) => void; }; -const Clickable = forwardRef( +export const Clickable = forwardRef( // Ref: Clickable is polymorphic. Could be any HTML element ({ type = 'button', className, ...props }: ClickableProps, ref: Ref) => { return ( - { + it('should render a11y html', async () => { + const { container } = render( +
    + +

    Content

    +     +
    , + ); + expect(container.firstChild).toMatchSnapshot(); + const results = await axe(document.body); + expect(results).toHaveNoViolations(); + }); +}); diff --git a/packages/design-system/src/components/Clickable/__snapshots__/Clikable.test.tsx.snap b/packages/design-system/src/components/Clickable/__snapshots__/Clikable.test.tsx.snap new file mode 100644 index 0000000000..267fd8f583 --- /dev/null +++ b/packages/design-system/src/components/Clickable/__snapshots__/Clikable.test.tsx.snap @@ -0,0 +1,14 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Clickable should render a11y html 1`] = ` +
    + +
    +`; diff --git a/packages/design-system/src/components/Clickable/index.ts b/packages/design-system/src/components/Clickable/index.ts index c5458624f5..cc29524ac9 100644 --- a/packages/design-system/src/components/Clickable/index.ts +++ b/packages/design-system/src/components/Clickable/index.ts @@ -1,4 +1 @@ -import Clickable, { ClickableProps } from './Clickable'; - -export type { ClickableProps }; -export default Clickable; +export * from './Clickable'; diff --git a/packages/design-system/src/components/WIP/Combobox/Combobox.module.scss b/packages/design-system/src/components/Combobox/Combobox.module.scss similarity index 91% rename from packages/design-system/src/components/WIP/Combobox/Combobox.module.scss rename to packages/design-system/src/components/Combobox/Combobox.module.scss index 7226052ce9..bab40e2e9f 100644 --- a/packages/design-system/src/components/WIP/Combobox/Combobox.module.scss +++ b/packages/design-system/src/components/Combobox/Combobox.module.scss @@ -1,5 +1,5 @@ @use '~@talend/design-tokens/lib/tokens'; -@use '../../Form/Primitives/mixins' as Form; +@use '../Form/Primitives/mixins' as Form; .combobox { &__input { @@ -9,6 +9,7 @@ } [role='listbox'] { + margin-top: tokens.$coral-spacing-xs; background: tokens.$coral-color-neutral-background; border-radius: tokens.$coral-radius-s; box-shadow: tokens.$coral-elevation-shadow-neutral-m; diff --git a/packages/design-system/src/components/Combobox/Combobox.test.tsx b/packages/design-system/src/components/Combobox/Combobox.test.tsx new file mode 100644 index 0000000000..273da64d98 --- /dev/null +++ b/packages/design-system/src/components/Combobox/Combobox.test.tsx @@ -0,0 +1,27 @@ +import { describe, it, expect } from '@jest/globals'; +import { axe } from 'jest-axe'; +import { render } from '@testing-library/react'; +import { Combobox } from './'; + +jest.mock('@talend/utils', () => { + let i = 0; + return { + // we need stable but different uuid (is fixed to 42 by current mock) + randomUUID: () => `mocked-uuid-${i++}`, + }; +}); + +const fruits = ['Acerola', 'Apple', 'Apricots', 'Avocado']; + +describe('Combobox', () => { + it('should render a11y html', async () => { + const { container } = render( +
    + +
    , + ); + expect(container.firstChild).toMatchSnapshot(); + const results = await axe(document.body); + expect(results).toHaveNoViolations(); + }); +}); diff --git a/packages/design-system/src/components/Combobox/Combobox.tsx b/packages/design-system/src/components/Combobox/Combobox.tsx new file mode 100644 index 0000000000..208ac1fd67 --- /dev/null +++ b/packages/design-system/src/components/Combobox/Combobox.tsx @@ -0,0 +1,104 @@ +import { useState, useCallback, useEffect, useRef, FocusEvent, KeyboardEvent } from 'react'; +import { useTranslation } from 'react-i18next'; + +import { useId } from '../../useId'; +import { I18N_DOMAIN_DESIGN_SYSTEM } from '../constants'; + +import styles from './Combobox.module.scss'; + +export type ComboboxProps = { + id?: string; + values?: string[]; + initialValue?: string; +}; + +export const Combobox = ({ values, ...rest }: ComboboxProps) => { + const { t } = useTranslation(I18N_DOMAIN_DESIGN_SYSTEM); + const [show, setShow] = useState(false); + const [options, setOptions] = useState(values || []); + const [value, setValue] = useState(rest.initialValue || ''); + const id = useId(rest.id); + const boxId = useId(); + const noValue = t('COMBOBOX_NOT_RESULT', 'No results found'); + const onKeydown = useCallback((e: KeyboardEvent) => { + if (e.key === 'Escape') { + setShow(false); + } + }, []); + + const comboboxRef = useRef(null); + + // sync options with values and value + useEffect(() => { + if (value) { + setOptions( + (values || []).filter(option => option.toLowerCase().includes(value.toLowerCase())), + ); + } else { + setOptions(values || []); + } + }, [value, values]); + + const onFocusOut = (event: FocusEvent) => { + // Check if where user clicks out is part of combobox + let relatedTarget = event.relatedTarget; + while (relatedTarget !== null && relatedTarget !== comboboxRef.current) { + relatedTarget = relatedTarget.parentElement; + } + + // If relatedTarget is null, it means we reach top level component without finding combobox div + // So we are sure user doesn't click in part of combobox + if (relatedTarget === null) { + setShow(false); + } + }; + + return ( +
    + setShow(true)} + onClick={() => { + if (!show) setShow(true); + }} + aria-controls={boxId} + value={value} + placeholder={t('COMBOBOX_PLACEHOLDER', 'Search')} + onChange={e => setValue(e.target.value)} + /> + +
    + ); +}; diff --git a/packages/design-system/src/components/Combobox/__snapshots__/Combobox.test.tsx.snap b/packages/design-system/src/components/Combobox/__snapshots__/Combobox.test.tsx.snap new file mode 100644 index 0000000000..6bbb872a4a --- /dev/null +++ b/packages/design-system/src/components/Combobox/__snapshots__/Combobox.test.tsx.snap @@ -0,0 +1,34 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Combobox should render a11y html 1`] = ` +
    +
    + + +
    +
    +`; diff --git a/packages/design-system/src/components/Combobox/index.ts b/packages/design-system/src/components/Combobox/index.ts new file mode 100644 index 0000000000..814b172cb4 --- /dev/null +++ b/packages/design-system/src/components/Combobox/index.ts @@ -0,0 +1 @@ +export * from './Combobox'; diff --git a/packages/design-system/src/components/Disclosure/Disclosure.tsx b/packages/design-system/src/components/Disclosure/Disclosure.tsx new file mode 100644 index 0000000000..280362b18b --- /dev/null +++ b/packages/design-system/src/components/Disclosure/Disclosure.tsx @@ -0,0 +1,24 @@ +import type { Ref } from 'react'; + +import { ChildOrGenerator, renderOrClone } from '../../renderOrClone'; + +export type DisclosureProps = { + children: ChildOrGenerator; + popref?: Ref; +}; + +type DisclosureButtonProps = { + ref?: Ref; +}; + +export type DisclosureFnProps = { + ref?: Ref; +}; + +export function Disclosure({ children, popref, ...rest }: DisclosureProps) { + const props: DisclosureButtonProps = { + ref: popref, + }; + + return renderOrClone(children, { ...props, ...rest }) || null; +} diff --git a/packages/design-system/src/components/Disclosure/DisclosureContext.ts b/packages/design-system/src/components/Disclosure/DisclosureContext.ts new file mode 100644 index 0000000000..dca6bb2ccc --- /dev/null +++ b/packages/design-system/src/components/Disclosure/DisclosureContext.ts @@ -0,0 +1,14 @@ +import { createContext, useContext } from 'react'; + +interface DisclosureContextValue { + disclosureId?: string | number; + onSelect?: () => void; + open?: boolean; + panelId?: string; +} + +export const DisclosureContext = createContext({}); + +export function useDisclosureCtx() { + return useContext(DisclosureContext); +} diff --git a/packages/design-system/src/components/Divider/Divider.test.tsx b/packages/design-system/src/components/Divider/Divider.test.tsx new file mode 100644 index 0000000000..2762a8524f --- /dev/null +++ b/packages/design-system/src/components/Divider/Divider.test.tsx @@ -0,0 +1,26 @@ +import { describe, it, expect } from '@jest/globals'; +import { axe } from 'jest-axe'; +import { render } from '@testing-library/react'; +import { Divider } from './'; + +describe('Divider', () => { + it('should render a11y html', async () => { + const { container } = render( +
    +
    +

    test

    + +

    lorem ipsum

    +
    + +
    +

    Side

    +

    lorem ipsum content

    +
    +
    , + ); + expect(container.firstChild).toMatchSnapshot(); + const results = await axe(document.body); + expect(results).toHaveNoViolations(); + }); +}); diff --git a/packages/design-system/src/components/Divider/Divider.tsx b/packages/design-system/src/components/Divider/Divider.tsx index 4aed009ab5..65ce1e5acd 100644 --- a/packages/design-system/src/components/Divider/Divider.tsx +++ b/packages/design-system/src/components/Divider/Divider.tsx @@ -1,12 +1,22 @@ -import { forwardRef, Ref } from 'react'; -import { Separator as ReakitSeparator, SeparatorProps as ReakitSeparatorProps } from 'reakit'; +import { forwardRef, Ref, HTMLAttributes, RefAttributes } from 'react'; import style from './Divider.module.scss'; -type DividerProps = Omit; +export type DividerOptions = { + /** + * Separator's orientation. + */ + orientation?: 'horizontal' | 'vertical'; +}; -const Divider = forwardRef((props: DividerProps, ref: Ref) => { - return ; +export type DividerHTMLProps = HTMLAttributes & RefAttributes; + +export type DividerProps = DividerOptions & DividerHTMLProps; + +export const Divider = forwardRef((props: DividerProps, ref: Ref) => { + const ruleOrientation = props.orientation || 'horizontal'; + + return
    ; }); -export default Divider; +Divider.displayName = 'Divider'; diff --git a/packages/design-system/src/components/Divider/__snapshots__/Divider.test.tsx.snap b/packages/design-system/src/components/Divider/__snapshots__/Divider.test.tsx.snap new file mode 100644 index 0000000000..c8e87f167b --- /dev/null +++ b/packages/design-system/src/components/Divider/__snapshots__/Divider.test.tsx.snap @@ -0,0 +1,31 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Divider should render a11y html 1`] = ` +
    +
    +

    + test +

    +
    +

    + lorem ipsum +

    +
    +
    +
    +

    + Side +

    +

    + lorem ipsum content +

    +
    +
    +`; diff --git a/packages/design-system/src/components/Divider/index.ts b/packages/design-system/src/components/Divider/index.ts index c8ee123153..1f84888dc7 100644 --- a/packages/design-system/src/components/Divider/index.ts +++ b/packages/design-system/src/components/Divider/index.ts @@ -1,3 +1 @@ -import Divider from './Divider'; - -export default Divider; +export * from './Divider'; diff --git a/packages/design-system/src/components/Drawer/Drawer.test.tsx b/packages/design-system/src/components/Drawer/Drawer.test.tsx new file mode 100644 index 0000000000..4219cb4522 --- /dev/null +++ b/packages/design-system/src/components/Drawer/Drawer.test.tsx @@ -0,0 +1,22 @@ +import { describe, it, expect } from '@jest/globals'; +import { axe } from 'jest-axe'; +import { render } from '@testing-library/react'; +import { FloatingDrawer } from './'; + +describe('FloatingDrawer', () => { + it('should render a11y html', async () => { + const { container } = render( +
    + +

    test

    + +

    content of the drawer

    +     +     +
    , + ); + expect(container.firstChild).toMatchSnapshot(); + const results = await axe(document.body); + expect(results).toHaveNoViolations(); + }); +}); diff --git a/packages/design-system/src/components/WIP/Drawer/Primitive/PrimitiveDrawer.module.scss b/packages/design-system/src/components/Drawer/Primitive/PrimitiveDrawer.module.scss similarity index 90% rename from packages/design-system/src/components/WIP/Drawer/Primitive/PrimitiveDrawer.module.scss rename to packages/design-system/src/components/Drawer/Primitive/PrimitiveDrawer.module.scss index 2916b7943f..e18430463d 100644 --- a/packages/design-system/src/components/WIP/Drawer/Primitive/PrimitiveDrawer.module.scss +++ b/packages/design-system/src/components/Drawer/Primitive/PrimitiveDrawer.module.scss @@ -1,12 +1,12 @@ @use '~@talend/design-tokens/lib/tokens'; -.primitive-drawer { +.drawer { width: tokens.$coral-sizing-maximal; height: 100%; background: tokens.$coral-color-neutral-background; display: flex; - &__header { + .header { flex-grow: 0; flex-shrink: 0; flex-basis: tokens.$coral-sizing-l; @@ -15,7 +15,7 @@ display: flex; } - &__body { + .body { flex-grow: 1; flex-shrink: 1; flex-basis: 0; @@ -24,7 +24,7 @@ display: flex; } - &__footer { + .footer { flex-grow: 0; flex-shrink: 0; flex-basis: calc(tokens.$coral-sizing-l + 2 * tokens.$coral-spacing-xs); diff --git a/packages/design-system/src/components/WIP/Drawer/Primitive/PrimitiveDrawer.tsx b/packages/design-system/src/components/Drawer/Primitive/PrimitiveDrawer.tsx similarity index 59% rename from packages/design-system/src/components/WIP/Drawer/Primitive/PrimitiveDrawer.tsx rename to packages/design-system/src/components/Drawer/Primitive/PrimitiveDrawer.tsx index 94d46eb0d2..3d85e2affd 100644 --- a/packages/design-system/src/components/WIP/Drawer/Primitive/PrimitiveDrawer.tsx +++ b/packages/design-system/src/components/Drawer/Primitive/PrimitiveDrawer.tsx @@ -1,6 +1,6 @@ import { forwardRef } from 'react'; import type { Ref, ReactNode } from 'react'; -import { StackVertical } from '../../../Stack'; +import { StackVertical } from '../../Stack'; import theme from './PrimitiveDrawer.module.scss'; @@ -12,11 +12,11 @@ export type DrawerProps = { export const PrimitiveDrawer = forwardRef( ({ header, children, footer }: DrawerProps, ref: Ref) => ( -
    +
    - {header &&
    {header}
    } -
    {children}
    - {footer &&
    {footer}
    } + {header &&
    {header}
    } +
    {children}
    + {footer &&
    {footer}
    }
    ), diff --git a/packages/design-system/src/components/Drawer/__snapshots__/Drawer.test.tsx.snap b/packages/design-system/src/components/Drawer/__snapshots__/Drawer.test.tsx.snap new file mode 100644 index 0000000000..5a47831a2d --- /dev/null +++ b/packages/design-system/src/components/Drawer/__snapshots__/Drawer.test.tsx.snap @@ -0,0 +1,38 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`FloatingDrawer should render a11y html 1`] = ` +
    +
    +

    + test +

    + +
    +
    +`; diff --git a/packages/design-system/src/components/WIP/Drawer/index.ts b/packages/design-system/src/components/Drawer/index.ts similarity index 100% rename from packages/design-system/src/components/WIP/Drawer/index.ts rename to packages/design-system/src/components/Drawer/index.ts diff --git a/packages/design-system/src/components/WIP/Drawer/variants/FloatingDrawer/FloatingDrawer.module.scss b/packages/design-system/src/components/Drawer/variants/FloatingDrawer/FloatingDrawer.module.scss similarity index 72% rename from packages/design-system/src/components/WIP/Drawer/variants/FloatingDrawer/FloatingDrawer.module.scss rename to packages/design-system/src/components/Drawer/variants/FloatingDrawer/FloatingDrawer.module.scss index fdb13afc15..d9c9eaf78c 100644 --- a/packages/design-system/src/components/WIP/Drawer/variants/FloatingDrawer/FloatingDrawer.module.scss +++ b/packages/design-system/src/components/Drawer/variants/FloatingDrawer/FloatingDrawer.module.scss @@ -1,6 +1,6 @@ @use '~@talend/design-tokens/lib/tokens'; -.floating-drawer { +.drawer { position: absolute; top: 0; right: 0; @@ -8,9 +8,4 @@ box-shadow: tokens.$coral-elevation-shadow-neutral-m; z-index: tokens.$coral-elevation-layer-standard-front; transition: transform tokens.$coral-transition-fast; - transform: translateX(100%); - - &[data-enter] { - transform: translateX(0%); - } } diff --git a/packages/design-system/src/components/Drawer/variants/FloatingDrawer/FloatingDrawer.tsx b/packages/design-system/src/components/Drawer/variants/FloatingDrawer/FloatingDrawer.tsx new file mode 100644 index 0000000000..3157baf9cc --- /dev/null +++ b/packages/design-system/src/components/Drawer/variants/FloatingDrawer/FloatingDrawer.tsx @@ -0,0 +1,129 @@ +import { useEffect, useState, cloneElement } from 'react'; +import type { CSSProperties, HTMLAttributes, ReactElement, ReactNode } from 'react'; +import { Transition } from 'react-transition-group'; +import { PrimitiveDrawer } from '../../Primitive/PrimitiveDrawer'; + +import theme from './FloatingDrawer.module.scss'; +import { useId } from '../../../../useId'; + +type WithDisclosure = { + disclosure: ReactElement; + visible?: never; +}; + +type Controlled = { + disclosure?: never; + visible: boolean; +}; + +type DialogFnProps = { + onClose: () => void; +}; + +export type FloatingDrawerProps = { + id?: string; + header?: ((dialog: DialogFnProps) => ReactNode) | ReactNode; + children: ((dialog: DialogFnProps) => ReactNode) | ReactNode; + footer?: ((dialog: DialogFnProps) => ReactNode) | ReactNode; + withTransition?: boolean; + onClose?: () => void; + ['aria-label']: string; +} & (WithDisclosure | Controlled); + +// backward compatibility +export type DrawerProps = FloatingDrawerProps; + +const STYLES = { + entering: { transform: 'translateX(100%)' }, + entered: { transform: 'translateX(0%)' }, + exiting: { transform: 'translateX(100%)' }, + exited: { transform: 'translateX(100%)' }, + unmounted: { transform: 'translateX(100%)' }, +}; + +export const FloatingDrawer = ({ + id, + withTransition = true, + disclosure, + header, + children, + footer, + visible, + onClose, + ...props +}: DrawerProps) => { + const uuid = useId(id, 'drawer'); + const [isVisible, setVisible] = useState(visible === undefined ? false : visible); + + // sync with the props + useEffect(() => { + if (visible !== undefined && visible !== isVisible) { + setVisible(visible); + } + }, [visible, isVisible]); + const onCloseHandler = () => { + if (onClose) { + onClose(); + } else { + setVisible(false); + } + }; + + const disclosureProps = { + onClick: () => setVisible(!isVisible), + ['aria-expanded']: isVisible, + ['aria-controls']: uuid, + }; + return ( + <> + {disclosure &&
    {cloneElement(disclosure, disclosureProps)}
    } + {isVisible && ( + + {transitionState => { + const style = { + ...STYLES[transitionState], + }; + const childrenProps = { + onClose: onCloseHandler, + }; + return ( + + ); + }} + + )} + + ); +}; + +FloatingDrawer.displayName = 'FloatingDrawer'; + +type ContainerPropTypes = HTMLAttributes & { + children: ReactNode | ReactNode[]; + style?: Omit; +}; + +const Container = ({ children, style, ...props }: ContainerPropTypes) => ( +
    + {children} +
    +); + +Container.displayName = 'FloatingDrawer.Container'; + +FloatingDrawer.Container = Container; diff --git a/packages/design-system/src/components/Dropdown/Dropdown.cy.tsx b/packages/design-system/src/components/Dropdown/Dropdown.cy.tsx index 4738d3de3b..346476c4e0 100644 --- a/packages/design-system/src/components/Dropdown/Dropdown.cy.tsx +++ b/packages/design-system/src/components/Dropdown/Dropdown.cy.tsx @@ -1,7 +1,7 @@ /* eslint-disable testing-library/prefer-screen-queries */ /* eslint-disable testing-library/await-async-query */ /* eslint-disable no-console */ -import Dropdown from './'; +import { Dropdown } from './'; import { ButtonTertiary } from '../../components/Button'; import { IconsProvider } from '../../components/IconsProvider'; @@ -83,7 +83,7 @@ context('', () => { it('should display menu', () => { cy.mount(); - cy.findByTestId('dropdown.button').click(); + cy.findByTestId('dropdown.button').click({ force: true }); cy.findByTestId('dropdown.menu').should('be.visible'); cy.findByTestId('dropdown.menuitem.Link with icon-0').should('be.visible'); cy.findByTestId('dropdown.menuitem.Button with icon-1').should('be.visible'); @@ -96,7 +96,7 @@ context('', () => { cy.mount(); cy.findByTestId('dropdown.button').click(); cy.findByTestId('dropdown.menu').should('be.visible'); - cy.findByTestId('dropdown.menuitem.Button with icon-1').click(); + cy.findByTestId('dropdown.menuitem.Button with icon-1').click({ force: true }); cy.findByTestId('dropdown.menu').should('not.be.visible'); }); diff --git a/packages/design-system/src/components/Dropdown/Dropdown.test.tsx b/packages/design-system/src/components/Dropdown/Dropdown.test.tsx new file mode 100644 index 0000000000..ecf34846dd --- /dev/null +++ b/packages/design-system/src/components/Dropdown/Dropdown.test.tsx @@ -0,0 +1,56 @@ +import { describe, it, expect } from '@jest/globals'; +import { axe } from 'jest-axe'; +import { render } from '@testing-library/react'; +import { Dropdown } from './'; +import { ButtonTertiary } from '../Button'; + +jest.mock('@talend/utils', () => { + let i = 0; + return { + // we need stable but different uuid (is fixed to 42 by current mock) + randomUUID: () => `mocked-uuid-${i++}`, + }; +}); + +describe('Dropdown', () => { + it('should render a11y html', async () => { + const { container } = render( +
    + + {}}> + Dropdown + + +
    , + ); + expect(container.firstChild).toMatchSnapshot(); + const results = await axe(document.body); + expect(results).toHaveNoViolations(); + }); +}); diff --git a/packages/design-system/src/components/Dropdown/Dropdown.tsx b/packages/design-system/src/components/Dropdown/Dropdown.tsx index c307ff8f2b..57843cd8a1 100644 --- a/packages/design-system/src/components/Dropdown/Dropdown.tsx +++ b/packages/design-system/src/components/Dropdown/Dropdown.tsx @@ -1,16 +1,25 @@ -import { cloneElement, forwardRef, MouseEvent, ReactElement, Ref } from 'react'; -import { Menu, MenuButton, useMenuState } from 'reakit'; -// eslint-disable-next-line @talend/import-depth -import DropdownButton from './Primitive/DropdownButton'; +import { cloneElement, MouseEvent, ReactElement, useEffect, useState } from 'react'; + +import { + useDismiss, + useInteractions, + useFloating, + autoUpdate, + flip, + shift, +} from '@floating-ui/react'; + +import { DataAttributes, DeprecatedIconNames } from '../../types'; +import { Clickable, ClickableProps } from '../Clickable'; +import { LinkableType } from '../Linkable'; +import DropdownDivider from './Primitive/DropdownDivider'; import DropdownLink from './Primitive/DropdownLink'; import DropdownShell from './Primitive/DropdownShell'; import DropdownTitle from './Primitive/DropdownTitle'; -import DropdownDivider from './Primitive/DropdownDivider'; -import Clickable, { ClickableProps } from '../Clickable'; -import { LinkableType } from '../Linkable'; -import { DataAttributes, DeprecatedIconNames } from '../../types'; +import { DropdownButton } from './Primitive/DropdownButton'; +import { randomUUID } from '@talend/utils'; -type DropdownButtonType = Omit & { +type DropdownButtonType = Omit & { label: string; onClick: () => void; icon?: DeprecatedIconNames; @@ -21,6 +30,7 @@ type DropdownButtonType = Omit & { type DropdownLinkType = Omit & { label: string; type: 'link'; + as: ReactElement; } & DataAttributes; type DropdownLabelType = { @@ -44,119 +54,134 @@ export type DropdownPropsType = { 'aria-label': string; } & Partial; -const Dropdown = forwardRef( - ( - { - children, - 'data-test': dataTest, - 'data-testid': dataTestId, - items, - ...rest - }: DropdownPropsType, - ref: Ref, - ) => { - const menu = useMenuState({ - animated: 250, - gutter: 4, - loop: true, - }); - - const menuButtonTestId = dataTestId ? `${dataTestId}.dropdown.button` : 'dropdown.button'; - const menuTestId = dataTestId ? `${dataTestId}.dropdown.menu` : 'dropdown.menu'; - const menuItemTestId = dataTestId ? `${dataTestId}.dropdown.menuitem` : 'dropdown.menuitem'; - const menuButtonTest = dataTest ? `${dataTest}.dropdown.button` : 'dropdown.button'; - const menuTest = dataTest ? `${dataTest}.dropdown.menu` : 'dropdown.menu'; - const menuItemTest = dataTest ? `${dataTest}.dropdown.menuitem` : 'dropdown.menuitem'; - - return ( - <> - - {disclosureProps => cloneElement(children, disclosureProps)} - - - {items.map((entry, index) => { - if (entry.type === 'button') { - const { label, ...entryRest } = entry; - const id = `${label}-${index}`; - return ( - | KeyboardEvent) => { - menu.hide(); - entry.onClick(event); - }} - key={id} - id={id} - data-testid={`${menuItemTestId}.${id}`} - data-test={`${menuItemTest}.${id}`} - > - {label} - - ); - } - - if (entry.type === 'title') { - const { label } = entry; - const id = `${label}-${index}`; - return ( - - {label} - - ); - } - - if (entry.type === 'divider') { - const id = `divider-${index}`; - return ( - - ); - } - - const { label, as, type, ...entryRest } = entry; +export const Dropdown = ({ + children, + 'data-test': dataTest, + 'data-testid': dataTestId, + items, + ...rest +}: DropdownPropsType) => { + const [isOpen, setIsOpen] = useState(false); + const [itemIds, setItemIds] = useState(items.map(() => randomUUID())); + + useEffect(() => { + setItemIds(items.map(() => randomUUID())); + }, [items]); + + const floating = useFloating({ + placement: 'bottom-start', + open: isOpen, + onOpenChange: setIsOpen, + middleware: [flip(), shift()], + whileElementsMounted: autoUpdate, + }); + const dismiss = useDismiss(floating.context, { + escapeKey: true, + outsidePressEvent: 'mousedown', + }); + const { getReferenceProps, getFloatingProps } = useInteractions([dismiss]); + const menuButtonTestId = dataTestId ? `${dataTestId}.dropdown.button` : 'dropdown.button'; + const menuTestId = dataTestId ? `${dataTestId}.dropdown.menu` : 'dropdown.menu'; + const menuItemTestId = dataTestId ? `${dataTestId}.dropdown.menuitem` : 'dropdown.menuitem'; + const menuButtonTest = dataTest ? `${dataTest}.dropdown.button` : 'dropdown.button'; + const menuTest = dataTest ? `${dataTest}.dropdown.menu` : 'dropdown.menu'; + const menuItemTest = dataTest ? `${dataTest}.dropdown.menuitem` : 'dropdown.menuitem'; + + return ( + <> + {cloneElement(children as any, { + onClick: () => setIsOpen(!isOpen), + 'aria-pressed': `${isOpen}`, + 'data-testid': menuButtonTestId, + 'data-test': menuButtonTest, + 'aria-expanded': `${isOpen}`, + ref: floating.refs.setReference, + ...getReferenceProps(), + })} + setIsOpen(false)} + style={{ ...floating.floatingStyles, display: isOpen ? 'block' : 'none' }} + data-testid={menuTestId} + data-test={menuTest} + {...getFloatingProps()} + > + {items.map((entry, index) => { + const uuid = itemIds[index]; + if (entry.type === 'button') { + const { label, ...entryRest } = entry; const id = `${label}-${index}`; return ( - ) => { - menu.hide(); - if (entry.onClick) { - entry.onClick(event); - } + // {...menu} + onClick={(event: MouseEvent | KeyboardEvent) => { + entry.onClick(event); + setIsOpen(false); }} + key={uuid} + tabIndex={0} + id={uuid} data-testid={`${menuItemTestId}.${id}`} data-test={`${menuItemTest}.${id}`} > {label} - + ); - })} - - - ); - }, -); + } -Dropdown.displayName = 'Dropdown'; + if (entry.type === 'title') { + const { label } = entry; + const id = `${label}-${index}`; + return ( + + {label} + + ); + } -export default Dropdown; + if (entry.type === 'divider') { + const id = `divider-${index}`; + return ( + + ); + } + + const { label, as, type, ...entryRest } = entry; + const id = `${label}-${index}`; + return ( + ) => { + setIsOpen(false); + if (entry.onClick) { + entry.onClick(event); + } + }} + data-testid={`${menuItemTestId}.${id}`} + data-test={`${menuItemTest}.${id}`} + > + {label} + + ); + })} + + + ); +}; + +Dropdown.displayName = 'Dropdown'; diff --git a/packages/design-system/src/components/Dropdown/Primitive/DropdownButton.tsx b/packages/design-system/src/components/Dropdown/Primitive/DropdownButton.tsx index f0bbfbdd1f..940bef4240 100644 --- a/packages/design-system/src/components/Dropdown/Primitive/DropdownButton.tsx +++ b/packages/design-system/src/components/Dropdown/Primitive/DropdownButton.tsx @@ -1,52 +1,50 @@ import { forwardRef, Ref } from 'react'; -import classNames from 'classnames'; -import { MenuItem, MenuItemProps } from 'reakit'; + // eslint-disable-next-line @talend/import-depth import { IconNameWithSize } from '@talend/icons/dist/typeUtils'; import { DeprecatedIconNames } from '../../../types'; -import Clickable, { ClickableProps } from '../../Clickable'; +import { Clickable, ClickableProps } from '../../Clickable'; import { SizedIcon } from '../../Icon'; import { getIconWithDeprecatedSupport } from '../../Icon/DeprecatedIconHelper'; import styles from './DropdownEntry.module.scss'; -export type DropdownButtonType = Omit & - MenuItemProps & { icon?: DeprecatedIconNames | IconNameWithSize<'M'>; checked?: boolean }; +/** + * This is in fact a Menu Item + */ + +export type DropdownButtonType = ClickableProps & { + icon?: DeprecatedIconNames | IconNameWithSize<'M'>; +}; -const DropdownButton = forwardRef( +export const DropdownButton = forwardRef( ({ children, icon, checked, ...props }: DropdownButtonType, ref: Ref) => { return ( - - {icon && ( - - {getIconWithDeprecatedSupport({ - iconSrc: icon, - size: 'M', - ['data-test']: 'button.icon.before', - })} - - )} - {children} - {checked && ( - - )} - + +
    + {icon && ( + + {getIconWithDeprecatedSupport({ + iconSrc: icon, + size: 'M', + ['data-test']: 'button.icon.before', + })} + + )} + {children} + {checked && ( + + )} +
    +     ); }, ); DropdownButton.displayName = 'DropdownButton'; - -export default DropdownButton; diff --git a/packages/design-system/src/components/Dropdown/Primitive/DropdownDivider.tsx b/packages/design-system/src/components/Dropdown/Primitive/DropdownDivider.tsx index 9cfb4854d4..62785bb008 100644 --- a/packages/design-system/src/components/Dropdown/Primitive/DropdownDivider.tsx +++ b/packages/design-system/src/components/Dropdown/Primitive/DropdownDivider.tsx @@ -1,12 +1,13 @@ -import { forwardRef, Ref } from 'react'; -import { MenuItemProps, MenuSeparator } from 'reakit'; +import { forwardRef, Ref, HTMLAttributes } from 'react'; import styles from './DropdownDivider.module.scss'; -export type DropdownDividerType = MenuItemProps; +export type DropdownDividerType = HTMLAttributes; const DropdownDivider = forwardRef((props: DropdownDividerType, ref: Ref) => { - return ; + return
    ; }); +DropdownDivider.displayName = 'DropdownDivider'; + export default DropdownDivider; diff --git a/packages/design-system/src/components/Dropdown/Primitive/DropdownLink.tsx b/packages/design-system/src/components/Dropdown/Primitive/DropdownLink.tsx index bb4ce9e81e..2f1cffa378 100644 --- a/packages/design-system/src/components/Dropdown/Primitive/DropdownLink.tsx +++ b/packages/design-system/src/components/Dropdown/Primitive/DropdownLink.tsx @@ -1,10 +1,9 @@ import { forwardRef, ReactElement, Ref } from 'react'; -import { MenuItem, MenuItemProps } from 'reakit'; -import Linkable, { LinkableType } from '../../Linkable'; +import { Linkable, LinkableType } from '../../Linkable'; import styles from './DropdownEntry.module.scss'; -export type DropdownLinkType = LinkableType & MenuItemProps; +export type DropdownLinkType = LinkableType; // Extend Linkable with props from Dropdown // Since MenuItem and Linkable both have an `as` prop, this enables passing `as` to Linkable. @@ -17,15 +16,16 @@ const LocalLink = forwardRef( return ; }, ); +LocalLink.displayName = 'LocalLink'; const DropdownLink = forwardRef( ({ children, as, ...props }: DropdownLinkType, ref: Ref) => { return ( - + {children} - + ); }, ); - +DropdownLink.displayName = 'DropdownLink'; export default DropdownLink; diff --git a/packages/design-system/src/components/Dropdown/Primitive/DropdownShell.module.scss b/packages/design-system/src/components/Dropdown/Primitive/DropdownShell.module.scss index 87b0e5d6fd..ce144eb6d4 100644 --- a/packages/design-system/src/components/Dropdown/Primitive/DropdownShell.module.scss +++ b/packages/design-system/src/components/Dropdown/Primitive/DropdownShell.module.scss @@ -2,6 +2,10 @@ .dropdownShell { z-index: tokens.$coral-elevation-layer-interactive-front; + position: absolute; + width: max-content; + top: 0; + left: 0; .animatedZone { background: tokens.$coral-color-neutral-background; @@ -12,14 +16,5 @@ min-width: calc(#{tokens.$coral-sizing-maximal} / 2); max-width: tokens.$coral-sizing-maximal; transition: tokens.$coral-transition-fast; - opacity: 0; - transform: translateY(-10%); - } - - &[data-enter] { - .animatedZone { - opacity: 1; - transform: translateY(0%); - } } } diff --git a/packages/design-system/src/components/Dropdown/Primitive/DropdownShell.tsx b/packages/design-system/src/components/Dropdown/Primitive/DropdownShell.tsx index d881c1af2d..23240ef534 100644 --- a/packages/design-system/src/components/Dropdown/Primitive/DropdownShell.tsx +++ b/packages/design-system/src/components/Dropdown/Primitive/DropdownShell.tsx @@ -1,21 +1,35 @@ -import { forwardRef, Ref } from 'react'; -import { MenuProps } from 'reakit'; - +import { forwardRef } from 'react'; +import type { HTMLAttributes, ReactNode } from 'react'; import styles from './DropdownShell.module.scss'; import { StackVertical } from '../../Stack'; -type ShellProps = MenuProps; +type ShellProps = HTMLAttributes & { + onClick: () => void; + children: ReactNode; +}; -const DropdownShell = forwardRef(({ children, ...rest }: ShellProps, ref: Ref) => { - return ( -
    -
    - - {children} - +const DropdownShell = forwardRef( + ({ children, onClick, ...rest }, ref) => { + return ( +
    +
    + + {children} + +
    -
    - ); -}); + ); + }, +); + +DropdownShell.displayName = 'DropdownShell'; export default DropdownShell; diff --git a/packages/design-system/src/components/Dropdown/Primitive/DropdownTitle.tsx b/packages/design-system/src/components/Dropdown/Primitive/DropdownTitle.tsx index 7f37a516b0..c8edaf2b05 100644 --- a/packages/design-system/src/components/Dropdown/Primitive/DropdownTitle.tsx +++ b/packages/design-system/src/components/Dropdown/Primitive/DropdownTitle.tsx @@ -14,4 +14,5 @@ const DropdownTitle = forwardRef( }, ); +DropdownTitle.displayName = 'DropdownTitle'; export default DropdownTitle; diff --git a/packages/design-system/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap b/packages/design-system/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap new file mode 100644 index 0000000000..35241e8e71 --- /dev/null +++ b/packages/design-system/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap @@ -0,0 +1,121 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Dropdown should render a11y html 1`] = ` +
    + + +
    +`; diff --git a/packages/design-system/src/components/Dropdown/index.ts b/packages/design-system/src/components/Dropdown/index.ts index 293f190383..5bd11eca0b 100644 --- a/packages/design-system/src/components/Dropdown/index.ts +++ b/packages/design-system/src/components/Dropdown/index.ts @@ -1,6 +1,2 @@ -import Dropdown from './Dropdown'; -import DropdownButton from './Primitive/DropdownButton'; - -export default Dropdown; - -export { DropdownButton }; +export * from './Dropdown'; +export * from './Primitive/DropdownButton'; diff --git a/packages/design-system/src/components/EmptyState/EmptyState.test.tsx b/packages/design-system/src/components/EmptyState/EmptyState.test.tsx new file mode 100644 index 0000000000..f24c60f457 --- /dev/null +++ b/packages/design-system/src/components/EmptyState/EmptyState.test.tsx @@ -0,0 +1,40 @@ +import { describe, it, expect } from '@jest/globals'; +import { axe } from 'jest-axe'; +import { render } from '@testing-library/react'; +import { EmptyState } from './'; + +describe('EmptyState', () => { + it('should render a11y html', async () => { + const { container } = render( +
    + + +
    + +
    +
    , + ); + expect(container.firstChild).toMatchSnapshot(); + const results = await axe(document.body); + expect(results).toHaveNoViolations(); + }); +}); diff --git a/packages/design-system/src/components/EmptyState/EmptyState.tsx b/packages/design-system/src/components/EmptyState/EmptyState.tsx index d8e31be3f0..811e28745f 100644 --- a/packages/design-system/src/components/EmptyState/EmptyState.tsx +++ b/packages/design-system/src/components/EmptyState/EmptyState.tsx @@ -15,7 +15,7 @@ type Small = VariantType<'S', EmptyStateSmallProps>; export type EmptyStateProps = Large | Medium | Small; -const EmptyState = forwardRef((props: EmptyStateProps, ref: Ref) => { +export const EmptyState = forwardRef((props: EmptyStateProps, ref: Ref) => { switch (props.variant) { case 'L': { const { variant, ...rest } = props; @@ -39,5 +39,3 @@ const EmptyState = forwardRef((props: EmptyStateProps, ref: Ref) => }); EmptyState.displayName = 'EmptyState'; - -export default EmptyState; diff --git a/packages/design-system/src/components/EmptyState/__snapshots__/EmptyState.test.tsx.snap b/packages/design-system/src/components/EmptyState/__snapshots__/EmptyState.test.tsx.snap new file mode 100644 index 0000000000..c9dde18e7b --- /dev/null +++ b/packages/design-system/src/components/EmptyState/__snapshots__/EmptyState.test.tsx.snap @@ -0,0 +1,434 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EmptyState should render a11y html 1`] = ` +
    + + +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +

    + No preparations yet +

    +

    + Add a preparation to clean, format, and transform data prior to processing. +

    +
    + + + + Learn more + + + + + +
    +
    +
    +
    +`; diff --git a/packages/design-system/src/components/EmptyState/index.ts b/packages/design-system/src/components/EmptyState/index.ts index b9cf05cfe8..0c2df29071 100644 --- a/packages/design-system/src/components/EmptyState/index.ts +++ b/packages/design-system/src/components/EmptyState/index.ts @@ -1,7 +1,6 @@ -import EmptyState from './EmptyState'; +export * from './EmptyState'; import EmptyStateLarge from './variants/EmptyStateLarge'; import EmptyStateMedium from './variants/EmptyStateMedium'; import EmptyStateSmall from './variants/EmptyStateSmall'; -export default EmptyState; export { EmptyStateLarge, EmptyStateMedium, EmptyStateSmall }; diff --git a/packages/design-system/src/components/EmptyState/primitive/EmptyStatePrimitive.tsx b/packages/design-system/src/components/EmptyState/primitive/EmptyStatePrimitive.tsx index a65f7f4587..d5baab619c 100644 --- a/packages/design-system/src/components/EmptyState/primitive/EmptyStatePrimitive.tsx +++ b/packages/design-system/src/components/EmptyState/primitive/EmptyStatePrimitive.tsx @@ -2,7 +2,7 @@ import { forwardRef, HTMLAttributes, ReactElement, Ref } from 'react'; import { useTranslation } from 'react-i18next'; import { StackVertical } from '../../Stack'; -import Link from '../../Link'; +import { Link } from '../../Link'; import { ButtonPrimary } from '../../Button'; import { ButtonPrimaryAsLink } from '../../ButtonAsLink'; import { ButtonPrimaryPropsType } from '../../Button/variations/ButtonPrimary'; @@ -61,5 +61,5 @@ const EmptyStatePrimitive = forwardRef((props: EmptyStatePrimitiveProps, ref: Re ); }); - +EmptyStatePrimitive.displayName = 'EmptyStatePrimitive'; export default EmptyStatePrimitive; diff --git a/packages/design-system/src/components/EmptyState/variants/EmptyStateLarge.tsx b/packages/design-system/src/components/EmptyState/variants/EmptyStateLarge.tsx index b126eb6b68..f783501c01 100644 --- a/packages/design-system/src/components/EmptyState/variants/EmptyStateLarge.tsx +++ b/packages/design-system/src/components/EmptyState/variants/EmptyStateLarge.tsx @@ -1,5 +1,5 @@ import { forwardRef, Ref } from 'react'; -import Illustration from '../../illustrations'; +import { Illustration } from '../../illustrations'; import EmptyStatePrimitive, { EmptyStatePrimitiveProps } from '../primitive/EmptyStatePrimitive'; export type EmptyStateLargeProps = Omit & { @@ -17,4 +17,5 @@ const EmptyStateLarge = forwardRef((props: EmptyStateLargeProps, ref: Ref; }); +EmptyStateSmall.displayName = 'EmptyStateSmall'; export default EmptyStateSmall; diff --git a/packages/design-system/src/components/ErrorState/ErrorState.test.tsx b/packages/design-system/src/components/ErrorState/ErrorState.test.tsx new file mode 100644 index 0000000000..b0d09adfc5 --- /dev/null +++ b/packages/design-system/src/components/ErrorState/ErrorState.test.tsx @@ -0,0 +1,17 @@ +import { describe, it, expect } from '@jest/globals'; +import { axe } from 'jest-axe'; +import { render } from '@testing-library/react'; +import { ErrorState } from './'; + +describe('ErrorState', () => { + it('should render a11y html', async () => { + const { container } = render( +
    + +
    , + ); + expect(container.firstChild).toMatchSnapshot(); + const results = await axe(document.body); + expect(results).toHaveNoViolations(); + }); +}); diff --git a/packages/design-system/src/components/ErrorState/ErrorState.tsx b/packages/design-system/src/components/ErrorState/ErrorState.tsx index fac2fd1408..655c47c3c3 100644 --- a/packages/design-system/src/components/ErrorState/ErrorState.tsx +++ b/packages/design-system/src/components/ErrorState/ErrorState.tsx @@ -2,7 +2,7 @@ import { ReactElement, isValidElement } from 'react'; import { ButtonPrimary } from '../Button'; import { ButtonPrimaryPropsType } from '../Button/variations/ButtonPrimary'; -import Link from '../Link'; +import { Link } from '../Link'; import { LinkProps } from '../Link/Link'; import { StackVertical } from '../Stack'; @@ -10,14 +10,14 @@ import ErrorIllustration from './illutstrations/ErrorIllustration'; import styles from './ErrorState.module.scss'; -type ErrorStatePropTypes = { +export type ErrorStatePropTypes = { title: string; description: string; action?: Omit, 'size'>; link?: ReactElement | LinkProps; }; -function ErrorState({ title, description, action, link }: ErrorStatePropTypes) { +export function ErrorState({ title, description, action, link }: ErrorStatePropTypes) { return (
    @@ -35,5 +35,3 @@ function ErrorState({ title, description, action, link }: ErrorStatePropTypes) {
    ); } - -export default ErrorState; diff --git a/packages/design-system/src/components/ErrorState/__snapshots__/ErrorState.test.tsx.snap b/packages/design-system/src/components/ErrorState/__snapshots__/ErrorState.test.tsx.snap new file mode 100644 index 0000000000..4eb0eba62d --- /dev/null +++ b/packages/design-system/src/components/ErrorState/__snapshots__/ErrorState.test.tsx.snap @@ -0,0 +1,65 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ErrorState should render a11y html 1`] = ` +
    +
    +
    + + + + + + + + +
    +

    + small +

    +

    + what happens +

    +
    +
    +
    +
    +`; diff --git a/packages/design-system/src/components/ErrorState/index.ts b/packages/design-system/src/components/ErrorState/index.ts index b17df79da3..c8a7981cdb 100644 --- a/packages/design-system/src/components/ErrorState/index.ts +++ b/packages/design-system/src/components/ErrorState/index.ts @@ -1 +1 @@ -export { default } from './ErrorState'; +export * from './ErrorState'; diff --git a/packages/design-system/src/components/Form/Affix/variations/AffixButton.tsx b/packages/design-system/src/components/Form/Affix/variations/AffixButton.tsx index b7ef75b488..17efeee1eb 100644 --- a/packages/design-system/src/components/Form/Affix/variations/AffixButton.tsx +++ b/packages/design-system/src/components/Form/Affix/variations/AffixButton.tsx @@ -5,13 +5,14 @@ import classnames from 'classnames'; import { IconNameWithSize } from '@talend/icons/dist/typeUtils'; import { DeprecatedIconNames } from '../../../../types'; -import Tooltip from '../../../Tooltip'; +import { Tooltip, TooltipChildrenFnProps, TooltipChildrenFnRef } from '../../../Tooltip'; import { StackHorizontal } from '../../../Stack'; -import Clickable, { ClickableProps } from '../../../Clickable'; +import { Clickable, ClickableProps } from '../../../Clickable'; import { getIconWithDeprecatedSupport } from '../../../Icon/DeprecatedIconHelper'; import { SizedIcon } from '../../../Icon'; import styles from '../AffixStyles.module.scss'; +import { mergeRefs } from '../../../../mergeRef'; type CommonAffixButtonPropsType = { children: string; @@ -34,7 +35,7 @@ export type AffixButtonPropsType = Omit( ( { children, @@ -47,11 +48,12 @@ const AffixButton = forwardRef( }: AffixButtonPropsType, ref: Ref, ) => { - const element = ( + const element = (subProps: TooltipChildrenFnProps, subRef: TooltipChildrenFnRef) => ( @@ -74,12 +76,14 @@ const AffixButton = forwardRef( if (hideText) { return ( - {element} + {(triggerProps: TooltipChildrenFnProps, triggerRef: TooltipChildrenFnRef) => + element(triggerProps, mergeRefs([triggerRef, ref])) + } ); } - return element; + return element({}, ref); }, ); diff --git a/packages/design-system/src/components/Form/Affix/variations/AffixReadOnly.tsx b/packages/design-system/src/components/Form/Affix/variations/AffixReadOnly.tsx index 0b577f3474..7ed1f17832 100644 --- a/packages/design-system/src/components/Form/Affix/variations/AffixReadOnly.tsx +++ b/packages/design-system/src/components/Form/Affix/variations/AffixReadOnly.tsx @@ -4,7 +4,7 @@ import { IconNameWithSize } from '@talend/icons'; import { DeprecatedIconNames } from '../../../../types'; import { StackHorizontal } from '../../../Stack'; -import VisuallyHidden from '../../../VisuallyHidden'; +import { VisuallyHidden } from '../../../VisuallyHidden'; import { getIconWithDeprecatedSupport } from '../../../Icon/DeprecatedIconHelper'; import styles from '../AffixStyles.module.scss'; diff --git a/packages/design-system/src/components/Form/Affix/variations/AffixSelect.tsx b/packages/design-system/src/components/Form/Affix/variations/AffixSelect.tsx index ab2464fa67..f3e4542bfa 100644 --- a/packages/design-system/src/components/Form/Affix/variations/AffixSelect.tsx +++ b/packages/design-system/src/components/Form/Affix/variations/AffixSelect.tsx @@ -1,7 +1,7 @@ import { forwardRef, Ref } from 'react'; -import { unstable_useId as useId } from 'reakit'; import FieldPrimitive, { FieldPropsPrimitive } from '../../Primitives/Field/Field'; import SelectNoWrapper, { SelectNoWrapperProps } from '../../Primitives/Select/SelectNoWrapper'; +import { useId } from '../../../../useId'; export type AffixSelectPropsType = Omit & Omit & { @@ -12,8 +12,7 @@ const AffixSelect = forwardRef((props: AffixSelectPropsType, ref: Ref, diff --git a/packages/design-system/src/components/Form/Field/Datalist/Datalist.tsx b/packages/design-system/src/components/Form/Field/Datalist/Datalist.tsx index 9e2bbc7008..24797eae43 100644 --- a/packages/design-system/src/components/Form/Field/Datalist/Datalist.tsx +++ b/packages/design-system/src/components/Form/Field/Datalist/Datalist.tsx @@ -1,11 +1,11 @@ import { forwardRef, Key, Ref } from 'react'; -import { unstable_useId as useId } from 'reakit'; import { FieldPrimitive, FieldPropsPrimitive, InputPrimitive, InputPrimitiveProps, -} from '../../Primitives/index'; +} from '../../Primitives'; +import { useId } from '../../../../useId'; export type DatalistProps = { values: string[]; @@ -36,9 +36,8 @@ const Datalist = forwardRef( }: DatalistProps, ref: Ref | undefined, ) => { - const { id: reakitId } = useId(); - const datalistId = id || `datalist--${reakitId}`; - const datalistListId = `datalist__list--${reakitId}`; + const datalistId = useId(id, 'datalist-'); + const datalistListId = useId(undefined, 'datalist__list-'); return ( <> diff --git a/packages/design-system/src/components/Form/Field/Input/Input.Checkbox.tsx b/packages/design-system/src/components/Form/Field/Input/Input.Checkbox.tsx index 9d784dfb3c..4160e07a67 100644 --- a/packages/design-system/src/components/Form/Field/Input/Input.Checkbox.tsx +++ b/packages/design-system/src/components/Form/Field/Input/Input.Checkbox.tsx @@ -1,7 +1,12 @@ import { forwardRef, Ref } from 'react'; -import { CheckboxPrimitive, CheckboxPrimitiveType } from '../../Primitives/index'; -export type CheckboxProps = Omit; +import { Mandatory } from '../../../../types'; +import { CheckboxPrimitive, CheckboxPrimitiveType } from '../../Primitives'; + +export type CheckboxProps = Mandatory< + Omit, + 'onChange' +>; const Checkbox = forwardRef((props: CheckboxProps, ref: Ref) => { return ; diff --git a/packages/design-system/src/components/Form/Field/Input/Input.Copy.tsx b/packages/design-system/src/components/Form/Field/Input/Input.Copy.tsx index 36cc4dac07..21e1242c2b 100644 --- a/packages/design-system/src/components/Form/Field/Input/Input.Copy.tsx +++ b/packages/design-system/src/components/Form/Field/Input/Input.Copy.tsx @@ -7,7 +7,7 @@ import { FieldPropsPrimitive, InputPrimitive, InputPrimitiveProps, -} from '../../Primitives/index'; +} from '../../Primitives'; type InputCopyProps = Omit & Omit; diff --git a/packages/design-system/src/components/Form/Field/Input/Input.File.tsx b/packages/design-system/src/components/Form/Field/Input/Input.File.tsx index 596ffd0c21..318d1e1666 100644 --- a/packages/design-system/src/components/Form/Field/Input/Input.File.tsx +++ b/packages/design-system/src/components/Form/Field/Input/Input.File.tsx @@ -1,20 +1,20 @@ import { forwardRef, Key, Ref, useEffect, useRef, useState } from 'react'; -import { unstable_useId as useId } from 'reakit'; import { Trans, useTranslation } from 'react-i18next'; import { TFunction } from 'i18next'; import classnames from 'classnames'; import { I18N_DOMAIN_DESIGN_SYSTEM } from '../../../constants'; import { ButtonIcon } from '../../../ButtonIcon'; import { SizedIcon } from '../../../Icon'; -import VisuallyHidden from '../../../VisuallyHidden'; +import { VisuallyHidden } from '../../../VisuallyHidden'; import { FieldPrimitive, FieldPropsPrimitive, InputPrimitive, InputPrimitiveProps, -} from '../../Primitives/index'; +} from '../../Primitives'; import styles from './Input.File.module.scss'; +import { useId } from '../../../../useId'; function getFileSize(size: number, t: TFunction) { if (size < 1024) { @@ -93,8 +93,7 @@ const InputFile = forwardRef((props: FileProps, ref: Ref) => { } }; }, []); - const { id: reakitId } = useId(); - const fileInfoId = `info--${reakitId}`; + const fileInfoId = useId(undefined, 'info-'); const filesValue = () => { if (files) { diff --git a/packages/design-system/src/components/Form/Field/Input/Input.Radio.tsx b/packages/design-system/src/components/Form/Field/Input/Input.Radio.tsx index 2b5600f761..27da5a606c 100644 --- a/packages/design-system/src/components/Form/Field/Input/Input.Radio.tsx +++ b/packages/design-system/src/components/Form/Field/Input/Input.Radio.tsx @@ -1,5 +1,5 @@ import { forwardRef, Ref } from 'react'; -import { RadioPrimitive, RadioPrimitiveType } from '../../Primitives/index'; +import { RadioPrimitive, RadioPrimitiveType } from '../../Primitives'; export type RadioProps = Omit; diff --git a/packages/design-system/src/components/Form/Field/Input/Input.ToggleSwitch.tsx b/packages/design-system/src/components/Form/Field/Input/Input.ToggleSwitch.tsx index 7791a42a44..c6ee13c2bc 100644 --- a/packages/design-system/src/components/Form/Field/Input/Input.ToggleSwitch.tsx +++ b/packages/design-system/src/components/Form/Field/Input/Input.ToggleSwitch.tsx @@ -1,17 +1,21 @@ import { forwardRef } from 'react'; import type { Ref } from 'react'; -import { Checkbox as ReakitCheckbox, unstable_useId as useId } from 'reakit'; import classnames from 'classnames'; -import useCheckboxState from './hooks/useCheckboxState'; -import { CheckboxProps } from './Input.Checkbox'; +import { useId } from '../../../../useId'; +import { CheckboxPrimitiveType } from '../../Primitives'; +import { useControl } from '../../../../useControl'; import styles from './Input.ToggleSwitch.module.scss'; -const ToggleSwitch = forwardRef( - ( - { +export type ToggleSwitchPropTypes = Omit & { + onChange?: (checked: boolean) => void; +}; + +export const ToggleSwitch = forwardRef( + (props: Omit, ref: Ref) => { + const { id, label, defaultChecked, @@ -21,34 +25,38 @@ const ToggleSwitch = forwardRef( required, children, isInline, + onChange, ...rest - }: Omit, - ref: Ref, - ) => { - const { id: reakitId } = useId(); - const switchId = id || `switch--${reakitId}`; - const checkbox = useCheckboxState({ state: defaultChecked || checked, readOnly }); + } = props; + const switchId = useId(id, 'switch-'); + const controlled = useControl(props, { + onChangeKey: 'onChange', + valueKey: 'checked', + defaultValueKey: 'defaultChecked', + selector: e => e.target.checked, + defaultValue: false, + }); return (