diff --git a/.changeset/ninety-baboons-join.md b/.changeset/ninety-baboons-join.md deleted file mode 100644 index 4b3a51f5739..00000000000 --- a/.changeset/ninety-baboons-join.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@talend/upgrade-deps': major ---- -Make upgrade-deps compatible with pnpm -[Breaking Change]remove security option (has it's not used) diff --git a/.github/workflows/changeset.yml b/.github/workflows/changeset.yml index 384865fe44e..5708a6312eb 100644 --- a/.github/workflows/changeset.yml +++ b/.github/workflows/changeset.yml @@ -23,7 +23,7 @@ jobs: runs-on: ubuntu-latest steps: - name: Checkout Repo - uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac #v4.0.0 + uses: actions/checkout@8ade135a41bc03ea155e62e844d188df1ea18608 #v4.1.0 with: # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits fetch-depth: 0 diff --git a/.github/workflows/dependencies.yml b/.github/workflows/dependencies.yml index 0b6e54b73bb..64f5aeffcc0 100644 --- a/.github/workflows/dependencies.yml +++ b/.github/workflows/dependencies.yml @@ -19,7 +19,7 @@ jobs: steps: - name: Checkout - uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac #v4.0.0 + uses: actions/checkout@8ade135a41bc03ea155e62e844d188df1ea18608 #v4.1.0 - name: Use Node.js uses: ./.github/actions/setup-node diff --git a/.github/workflows/design-system-component-testing.yml b/.github/workflows/design-system-component-testing.yml index 7061b7b18c2..1139d31531c 100644 --- a/.github/workflows/design-system-component-testing.yml +++ b/.github/workflows/design-system-component-testing.yml @@ -22,7 +22,7 @@ jobs: browser: ["chrome", "firefox"] steps: - name: Checkout repository - uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac #v4.0.0 + uses: actions/checkout@8ade135a41bc03ea155e62e844d188df1ea18608 #v4.1.0 - name: Use Node.js uses: ./.github/actions/setup-node @@ -42,7 +42,7 @@ jobs: pnpm --filter @talend/design-tokens run build:lib - name: Cypress Component Testing - uses: cypress-io/github-action@59810ebfa5a5ac6fcfdcfdf036d1cd4d083a88f2 #v6.5.0 + uses: cypress-io/github-action@ebe8b24c4428922d0f793a5c4c96853a633180e3 #v6.6.0 with: install: false browser: ${{ matrix.browser }} diff --git a/.github/workflows/icons.yml b/.github/workflows/icons.yml index 04d6a4b7b2d..e76739fdfbf 100644 --- a/.github/workflows/icons.yml +++ b/.github/workflows/icons.yml @@ -19,7 +19,7 @@ jobs: working-directory: ./packages/icons steps: - name: Checkout sources - uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac #v4.0.0 + uses: actions/checkout@8ade135a41bc03ea155e62e844d188df1ea18608 #v4.1.0 with: # Required when using a PAT for opening the PR persist-credentials: false diff --git a/.github/workflows/pr-demo.yml b/.github/workflows/pr-demo.yml index 2b31647703b..5d08de2243d 100644 --- a/.github/workflows/pr-demo.yml +++ b/.github/workflows/pr-demo.yml @@ -25,7 +25,7 @@ jobs: steps: - name: Checkout sources - uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac #v4.0.0 + uses: actions/checkout@8ade135a41bc03ea155e62e844d188df1ea18608 #v4.1.0 - name: Use Node.js uses: ./.github/actions/setup-node diff --git a/.github/workflows/pr-lint.yml b/.github/workflows/pr-lint.yml index 8710bdf3737..c18a81180ff 100644 --- a/.github/workflows/pr-lint.yml +++ b/.github/workflows/pr-lint.yml @@ -22,7 +22,7 @@ jobs: steps: - name: Checkout sources - uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac #v4.0.0 + uses: actions/checkout@8ade135a41bc03ea155e62e844d188df1ea18608 #v4.1.0 with: persist-credentials: false # otherwise, the token used is the GITHUB_TOKEN, instead of your personal token fetch-depth: 0 # otherwise, you will failed to push refs to dest repo diff --git a/.github/workflows/pr-playground.yml b/.github/workflows/pr-playground.yml index 21d4d975526..e83703d6b29 100644 --- a/.github/workflows/pr-playground.yml +++ b/.github/workflows/pr-playground.yml @@ -24,7 +24,7 @@ jobs: steps: - name: Checkout sources - uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac #v4.0.0 + uses: actions/checkout@8ade135a41bc03ea155e62e844d188df1ea18608 #v4.1.0 - name: Use Node.js uses: ./.github/actions/setup-node @@ -69,7 +69,7 @@ jobs: steps: - name: Checkout sources - uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac #v4.0.0 + uses: actions/checkout@8ade135a41bc03ea155e62e844d188df1ea18608 #v4.1.0 - name: Use Node.js uses: ./.github/actions/setup-node diff --git a/.github/workflows/pr-test.yml b/.github/workflows/pr-test.yml index 7a5e44cd55a..2a2b1fe6b91 100644 --- a/.github/workflows/pr-test.yml +++ b/.github/workflows/pr-test.yml @@ -21,7 +21,7 @@ jobs: steps: - name: Checkout sources - uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac #v4.0.0 + uses: actions/checkout@8ade135a41bc03ea155e62e844d188df1ea18608 #v4.1.0 - name: Use Node.js uses: ./.github/actions/setup-node @@ -33,7 +33,7 @@ jobs: run: pnpm run test --coverage --coverageReporters json-summary - name: Jest Coverage Comment - uses: MishaKav/jest-coverage-comment@41b5ca01d1250de84537448d248b8d18152cb277 #1.0.23 + uses: MishaKav/jest-coverage-comment@f2e8b560403c4fd8234a2b268af3c28ca91e5cc7 #1.0.24 with: multiple-files: | assets-api, ./packages/assets-api/coverage/coverage-summary.json diff --git a/.github/workflows/security-scan.yml b/.github/workflows/security-scan.yml index 67cb34df4dd..ff096eebcb9 100644 --- a/.github/workflows/security-scan.yml +++ b/.github/workflows/security-scan.yml @@ -13,7 +13,7 @@ jobs: environment: main runs-on: ubuntu-latest steps: - - uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac #v4.0.0 + - uses: actions/checkout@8ade135a41bc03ea155e62e844d188df1ea18608 #v4.1.0 - name: Scan uses: ./.github/actions/sourceclear env: diff --git a/.github/workflows/semgrep.yml b/.github/workflows/semgrep.yml index d39b9aba049..3db50260f25 100644 --- a/.github/workflows/semgrep.yml +++ b/.github/workflows/semgrep.yml @@ -26,7 +26,7 @@ jobs: if: (github.actor != 'dependabot[bot]') steps: - - uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac #v4.0.0 + - uses: actions/checkout@8ade135a41bc03ea155e62e844d188df1ea18608 #v4.1.0 # Run the "semgrep ci" command on the command line of the docker image. - run: semgrep ci env: diff --git a/.github/workflows/tests-cron.yml b/.github/workflows/tests-cron.yml index cfd51122f8b..0941816a3db 100644 --- a/.github/workflows/tests-cron.yml +++ b/.github/workflows/tests-cron.yml @@ -17,7 +17,7 @@ jobs: steps: - name: Checkout - uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac #v4.0.0 + uses: actions/checkout@8ade135a41bc03ea155e62e844d188df1ea18608 #v4.1.0 - name: Use Node.js uses: ./.github/actions/setup-node diff --git a/.github/workflows/visual-testing.yml b/.github/workflows/visual-testing.yml index 7f832ef95a6..88f5f037075 100644 --- a/.github/workflows/visual-testing.yml +++ b/.github/workflows/visual-testing.yml @@ -28,7 +28,7 @@ jobs: environment: pull_request_unsafe if: ( github.ref == 'refs/heads/master' || contains(github.event.pull_request.labels.*.name, 'need visual approval') ) steps: - - uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac #v4.0.0 + - uses: actions/checkout@8ade135a41bc03ea155e62e844d188df1ea18608 #v4.1.0 with: fetch-depth: 0 diff --git a/.github/workflows/yarn-deduplicate.yml b/.github/workflows/yarn-deduplicate.yml index 590f16bcfe5..4c07d4ea56f 100644 --- a/.github/workflows/yarn-deduplicate.yml +++ b/.github/workflows/yarn-deduplicate.yml @@ -23,7 +23,7 @@ jobs: steps: - name: Checkout sources - uses: actions/checkout@3df4ab11eba7bda6032a0b82a6bb43b11571feac #v4.0.0 + uses: actions/checkout@8ade135a41bc03ea155e62e844d188df1ea18608 #v4.1.0 with: persist-credentials: false # otherwise, the token used is the GITHUB_TOKEN, instead of your personal token fetch-depth: 0 # otherwise, you will failed to push refs to dest repo diff --git a/fork/module-to-cdn/README.md b/fork/module-to-cdn/README.md index 617044f8732..32d5e511d17 100644 --- a/fork/module-to-cdn/README.md +++ b/fork/module-to-cdn/README.md @@ -1,30 +1,14 @@ # @talend/module-to-cdn -[![Build Status](https://travis-ci.org/toutpt/module-to-cdn.svg?branch=jmfrancois/chore/fork)](https://travis-ci.org/toutpt/module-to-cdn) -[![NPM][npm-icon] ][npm-url] -[![dependencies][dependencies-image] ][dependencies-url] -[![devdependencies][devdependencies-image] ][devdependencies-url] - -[npm-icon]: https://img.shields.io/npm/v/@talend/module-to-cdn.svg -[npm-url]: https://npmjs.org/package/@talend/module-to-cdn -[travis-ci-image]: https://travis-ci.org/toutpt/module-to-cdn.svg?branch=jmfrancois/chore/fork -[travis-ci-url]: https://travis-ci.org/toutpt/module-to-cdn -[dependencies-image]: https://david-dm.org/toutpt/module-to-cdn/status.svg -[dependencies-url]: https://david-dm.org/toutpt/module-to-cdn -[devdependencies-image]: https://david-dm.org/toutpt/module-to-cdn/dev-status.svg -[devdependencies-url]: https://david-dm.org/toutpt/module-to-cdn?type=dev - - > Get cdn config from npm module name ## Fork This module is fork of module-to-cdn from [Thomas Sileghem](http://mastilver.com). -Because unpkg is great for free usage [but not for production usage](https://kentcdodds.com/blog/unpkg-an-open-source-cdn-for-npm) we decided to made some changes to go forward. - -After the following [big PR]() on the repository and an email to the author we have got no news from the author as all other PRs. So we decided to fork. +Because unpkg is great for free usage [but not for production usage](https://kentcdodds.com/blog/unpkg-an-open-source-cdn-for-npm) we decided to made some changes to going forward. +After big PR on the repository and an email to the author we have got no news as all other PRs. So we decided to fork. ## Install @@ -32,7 +16,6 @@ After the following [big PR]() on the repository and an email to the author we $ npm install --save @talend/module-to-cdn ``` - ## Usage ```js @@ -50,6 +33,7 @@ moduleToCdn('react', '15.3.0'); */ ``` +Note if the package comes with css you will have them under `styleUrl` and `stylePath` properties ## API @@ -79,12 +63,12 @@ Default: `development` ### Result -* `name`: name of the module -* `var`: name of the global variable exposing the module -* `url`: url where the module is available -* `version`: the version asked for -* `path`: relative path of the umd file in the distributed package -* `local`: absolute path on the current system to the file +- `name`: name of the module +- `var`: name of the global variable exposing the module +- `url`: url where the module is available +- `version`: the version asked for +- `path`: relative path of the umd file in the distributed package +- `local`: absolute path on the current system to the file ## Configuration of the resolver @@ -118,9 +102,9 @@ moduleToCdn.add({ '@talend/my-private-module': { var: 'TalendMyPrivateModule', versions: { - '>= 0.0.0' : { - 'development': '/dist/build.js', - 'production': '/dist/build.min.js', + '>= 0.0.0': { + development: '/dist/build.js', + production: '/dist/build.min.js' } } } @@ -141,17 +125,45 @@ LIMIT=";ag-grid;ag-grid-community;ag-grid-enterprise;" ava -v ## Excluded modules +- hoist-non-react-statics: the umd build contains JS errors (process.env.NODE and require) on every versions. + +## style-versions -* hoist-non-react-statics: the umd build contains JS errors (process.env.NODE and require) on every versions. +For the sake of simplicity, range must match between js and styles. +Here is the line in the code that read it: + +```javascript +const styleConfig = moduleConf['style-versions'] && moduleConf['style-versions'][range]; +``` + +So take it as a constraint, for example: + +```json + "@talend/design-tokens": { + "var": "TalendDesignTokens", + "versions": { + "> 2.6.0": { + "development": "/dist/TalendDesignTokens.js", + "production": "/dist/TalendDesignTokens.min.js" + } + }, + "style-versions": { + "> 2.6.0": { + "development": "/dist/TalendDesignTokens.css", + "production": "/dist/TalendDesignTokens.min.css" + } + } + } +``` ## Contribute To add your modules you have to -* checkout this package on github -* install and run the tests (it will load the cache for the tests) -* add your module in the module.json file -* ensure everytime the provided umd path exists and is valid. +- checkout this package on github +- install and run the tests (it will load the cache for the tests) +- add your module in the module.json file +- ensure everytime the provided umd path exists and is valid. Example of not valid umd: https://unpkg.com/browse/react-popper@1.3.7/dist/index.umd.js createContext,deepEqual dependencies are always null. diff --git a/fork/module-to-cdn/jsonschema.json b/fork/module-to-cdn/jsonschema.json new file mode 100644 index 00000000000..9fe15150035 --- /dev/null +++ b/fork/module-to-cdn/jsonschema.json @@ -0,0 +1,34 @@ +{ + "$schema": "https://json-schema.org/draft/2020-12/schema", + "$id": "https://github.com/Talend/ui/modules.schema.json", + "title": "cdn modules schema", + "description": "Help you edit the file in vscode", + "type": "object", + "patternProperties": { + ".*": { + "type": "object", + + "properties": { + "var": { + "type": "string" + }, + "versions": { + "type": "object", + "patternProperties": { + ".*": { + "type": "object", + "properties": { + "development": { + "type": "string" + }, + "production": { + "type": "string" + } + } + } + } + } + } + } + } +} diff --git a/packages/dataviz/cypress.config.ts b/packages/dataviz/cypress.config.js similarity index 77% rename from packages/dataviz/cypress.config.ts rename to packages/dataviz/cypress.config.js index 4ea4a9840cb..66e194d133d 100644 --- a/packages/dataviz/cypress.config.ts +++ b/packages/dataviz/cypress.config.js @@ -1,11 +1,11 @@ /* eslint-disable import/no-extraneous-dependencies */ -import { defineConfig } from 'cypress'; -import path from 'path'; +const { defineConfig } = require('cypress'); +const path = require('path'); -import { +const { getWebpackRules, getWebpackPlugins, -} from '@talend/scripts-config-react-webpack/config/webpack.config.common'; +} = require('@talend/scripts-config-react-webpack/config/webpack.config.common'); const webpack = require('webpack'); const srcDirectories = [ @@ -34,7 +34,7 @@ const webpackConfig = { }, }, module: { - rules: getWebpackRules(srcDirectories, true, true), + rules: getWebpackRules([path.resolve(process.cwd(), './src/')], true, true), }, plugins: getWebpackPlugins().concat([ new webpack.ProvidePlugin({ @@ -43,7 +43,7 @@ const webpackConfig = { ]), }; -export default defineConfig({ +module.exports = defineConfig({ viewportWidth: 400, viewportHeight: 400, video: false, diff --git a/packages/dataviz/cypress.d.ts b/packages/dataviz/cypress.d.ts deleted file mode 100644 index c6bd409bf2a..00000000000 --- a/packages/dataviz/cypress.d.ts +++ /dev/null @@ -1,9 +0,0 @@ -declare global { - namespace Cypress { - interface Chainable { - mount: typeof mount; - } - } -} - -declare module '@talend/scripts-config-react-webpack/config/webpack.config.common'; diff --git a/packages/dataviz/cypress/support/commands.ts b/packages/dataviz/cypress/support/commands.ts index 21e9cbfdc88..df3bce713e8 100644 --- a/packages/dataviz/cypress/support/commands.ts +++ b/packages/dataviz/cypress/support/commands.ts @@ -1,19 +1,9 @@ /* eslint-disable import/no-extraneous-dependencies */ /// - +import '@testing-library/cypress/add-commands'; import { mount } from 'cypress/react'; -declare global { - // eslint-disable-next-line @typescript-eslint/no-namespace - namespace Cypress { - interface Chainable { - mount: typeof mount; - } - } -} Cypress.Commands.add('mount', (component, options) => { const wrapper = component; return mount(wrapper, options); }); - -import '@testing-library/cypress/add-commands'; diff --git a/packages/dataviz/package.json b/packages/dataviz/package.json index 7b9a3c9da6b..45523635968 100644 --- a/packages/dataviz/package.json +++ b/packages/dataviz/package.json @@ -74,7 +74,7 @@ "@types/react": "^18.2.38", "@types/topojson-client": "^3.1.4", "@types/topojson-specification": "^1.0.5", - "cypress": "^12.17.4", + "cypress": "^13.6.0", "cross-env": "^7.0.3", "i18next": "^23.7.6", "react": "^18.2.0", diff --git a/packages/dataviz/src/components/BarChart/HorizontalBarChart/HorizontalBarChart.cy.tsx b/packages/dataviz/src/components/BarChart/HorizontalBarChart/HorizontalBarChart.cy.tsx index 91aaaacc74c..4c6fe09f4e7 100644 --- a/packages/dataviz/src/components/BarChart/HorizontalBarChart/HorizontalBarChart.cy.tsx +++ b/packages/dataviz/src/components/BarChart/HorizontalBarChart/HorizontalBarChart.cy.tsx @@ -1,8 +1,8 @@ /* eslint-disable testing-library/await-async-queries */ -/* eslint-disable testing-library/prefer-screen-queries */ -import HorizontalBarChart from './HorizontalBarChart.component'; +/* eslint-disable testing-library/prefer-screen-queries */ import { ChartStyle } from '../../../types'; +import HorizontalBarChart from './HorizontalBarChart.component'; context('', () => { it('Should trigger onBarClick', () => { @@ -51,7 +51,7 @@ context('', () => { height={300} width={400} onBarClick={onBarClick} - getTooltipContent={() =>
tooltip
} + getTooltipContent={() =>
tooltip
} />, ); @@ -60,7 +60,7 @@ context('', () => { .first() .trigger('mousemove') .trigger('click', { force: true }); - cy.get('[data-test="myTooltipContent"]').should('be.visible'); + cy.get('[data-test="tooltip"]').should('be.visible'); }); it('Should not grow to available size if not enough data provided', () => { const onBarClick = cy.stub().as('onBarClick'); diff --git a/packages/design-system/CHANGELOG.md b/packages/design-system/CHANGELOG.md index eba73ba1755..59b56ddf022 100644 --- a/packages/design-system/CHANGELOG.md +++ b/packages/design-system/CHANGELOG.md @@ -1,5 +1,25 @@ # @talend/design-system +## 8.5.0 + +### Minor Changes + +- 0e6c82e25: feat: rework some part of Message component + + - The size of a message fit the container width while before, it has a max width of `28rem` + - add a new prop `titleInfo` that allow to display an information message aside the title + - add new prop `additionalIconAction` to allow to display an additional button icon instead (there was only the dropdown action available before) + - rename prop `additionalActions` to `additionalDropdownActions` to make the API more explicit + - remove the shadow on the message to make it more consistent with the rest of the design and integrate better in the page + +- ea026ec12: Error state for tabs + +## 8.4.1 + +### Patch Changes + +- 88a17d7e7: fix: theme provider override is not working as expected + ## 8.4.0 ### Minor Changes diff --git a/packages/design-system/cypress.config.ts b/packages/design-system/cypress.config.js similarity index 78% rename from packages/design-system/cypress.config.ts rename to packages/design-system/cypress.config.js index 69702a31a33..52a35972d42 100644 --- a/packages/design-system/cypress.config.ts +++ b/packages/design-system/cypress.config.js @@ -1,10 +1,11 @@ -import { defineConfig } from 'cypress'; -import path from 'path'; +const { defineConfig } = require('cypress'); -import { +const path = require('path'); + +const { getWebpackRules, getWebpackPlugins, -} from '@talend/scripts-config-react-webpack/config/webpack.config.common'; +} = require('@talend/scripts-config-react-webpack/config/webpack.config.common'); const webpackConfig = { mode: 'development', @@ -33,7 +34,7 @@ const webpackConfig = { plugins: getWebpackPlugins(), }; -export default defineConfig({ +module.exports = defineConfig({ component: { devServer: { framework: 'react', diff --git a/packages/design-system/package.json b/packages/design-system/package.json index 68e134993ad..4d2ee479072 100644 --- a/packages/design-system/package.json +++ b/packages/design-system/package.json @@ -1,6 +1,6 @@ { "name": "@talend/design-system", - "version": "8.4.0", + "version": "8.5.0", "description": "Talend Design System", "main": "lib/index.js", "types": "lib/index.d.ts", @@ -69,7 +69,7 @@ "@talend/locales-design-system": "^7.15.1", "@talend/scripts-core": "^16.3.0", "@talend/scripts-config-babel": "^13.2.0", - "@talend/scripts-config-react-webpack": "^16.3.1", + "@talend/scripts-config-react-webpack": "^16.3.2", "@talend/scripts-config-storybook-lib": "^5.2.0", "@talend/scripts-config-typescript": "^11.2.0", "@talend/storybook-docs": "^2.2.0", @@ -85,7 +85,7 @@ "browser-sync-webpack-plugin": "^2.3.0", "concurrently": "^7.6.0", "core-js": "^3.33.3", - "cypress": "^12.17.4", + "cypress": "^13.6.0", "focus-outline-manager": "^1.0.2", "i18next": "^23.7.6", "i18next-scanner": "^4.4.0", diff --git a/packages/design-system/src/components/Message/Primitive/MessagePrimitive.tsx b/packages/design-system/src/components/Message/Primitive/MessagePrimitive.tsx index 68802033632..6e782e9e336 100644 --- a/packages/design-system/src/components/Message/Primitive/MessagePrimitive.tsx +++ b/packages/design-system/src/components/Message/Primitive/MessagePrimitive.tsx @@ -1,40 +1,56 @@ import { forwardRef, HTMLAttributes, ReactNode, Ref } from 'react'; +import type { ReactElement } from 'react'; import { useTranslation } from 'react-i18next'; +import classnames from 'classnames'; + +import tokens from '@talend/design-tokens'; // eslint-disable-next-line @talend/import-depth import { IconNameWithSize } from '@talend/icons/dist/typeUtils'; -import tokens from '@talend/design-tokens'; -import classnames from 'classnames'; -import { SizedIcon } from '../../Icon'; -import Link, { LinkProps } from '../../Link/Link'; -import { StackHorizontal, StackVertical } from '../../Stack'; -import { ButtonTertiaryPropsType } from '../../Button/variations/ButtonTertiary'; import { ButtonTertiary } from '../../Button'; -import { Dropdown, DropdownPropsType } from '../../Dropdown'; +import { ButtonTertiaryPropsType } from '../../Button/variations/ButtonTertiary'; import { ButtonIcon } from '../../ButtonIcon'; +import type { ButtonIconType } from '../../ButtonIcon/variations/ButtonIcon'; import { I18N_DOMAIN_DESIGN_SYSTEM } from '../../constants'; +import { Dropdown, DropdownPropsType } from '../../Dropdown'; +import { SizedIcon } from '../../Icon'; +import Link, { LinkProps } from '../../Link/Link'; +import { StackHorizontal, StackVertical } from '../../Stack'; import styles from './MessageStyles.module.scss'; +type SharedMessageWithActionsPropsType = { + additionalIconAction?: ButtonIconType<'XS'>; + additionalDropdownActions?: never; +}; + +type SharedMessageWithActionPropsType = { + additionalIconAction?: never; + additionalDropdownActions?: Omit; +}; + export type SharedMessageCollectionProps = Omit< HTMLAttributes, 'style' | 'children' | 'className' > & { action: ButtonTertiaryPropsType<'S'>; - additionalActions?: Omit; - description: string; + additionalIconAction?: ButtonIconType<'XS'>; + additionalDropdownActions?: Omit; + description: string | ReactElement | string[] | ReactElement[]; title: string; -}; +} & (SharedMessageWithActionPropsType | SharedMessageWithActionsPropsType); export type SharedMessageProps = Omit, 'style' | 'className'> & { action?: ButtonTertiaryPropsType<'S'>; - additionalActions?: Omit; + additionalIconAction?: ButtonIconType<'XS'>; + additionalDropdownActions?: Omit; children?: ReactNode | ReactNode[]; - description: string; + description: string | ReactElement | string[] | ReactElement[]; link?: LinkProps; title?: string; -}; + titleInfo?: string; +} & (SharedMessageWithActionPropsType | SharedMessageWithActionsPropsType); export type BaseMessageProps = Omit & SharedMessageProps & { @@ -48,11 +64,13 @@ export const MessagePrimitive = forwardRef( borderClassname, description, title, + titleInfo, link, icon, children, action, - additionalActions, + additionalIconAction, + additionalDropdownActions, ...props }: BaseMessageProps, ref: Ref, @@ -68,23 +86,25 @@ export const MessagePrimitive = forwardRef( ref={ref} > - {title && ( + {title || titleInfo ? (
- + {icon && ( )} {title} + {titleInfo ?
{titleInfo}
: null}
- )} + ) : null}

{description}

{link && } {children} {action && } - {additionalActions && ( - + {additionalIconAction && } + {additionalDropdownActions && ( + {}}> {t('ADDITIONAL_ACTIONS', 'Additional actions')} diff --git a/packages/design-system/src/components/Message/Primitive/MessageStyles.module.scss b/packages/design-system/src/components/Message/Primitive/MessageStyles.module.scss index b8cc9808f56..69f4694ae20 100644 --- a/packages/design-system/src/components/Message/Primitive/MessageStyles.module.scss +++ b/packages/design-system/src/components/Message/Primitive/MessageStyles.module.scss @@ -3,10 +3,9 @@ .message { display: flex; border-radius: tokens.$coral-radius-s; - box-shadow: tokens.$coral-elevation-shadow-neutral-m; + border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak; background-color: tokens.$coral-color-neutral-background; height: 100%; - width: 28rem; border-top-left-radius: tokens.$coral-radius-s; border-bottom-left-radius: tokens.$coral-radius-s; @@ -14,6 +13,14 @@ &__title { font: tokens.$coral-heading-m; + width: 100%; + + &__info { + font: tokens.$coral-paragraph-s; + color: tokens.$coral-color-neutral-text-weak; + white-space: nowrap; + margin-left: auto; + } } &__description { diff --git a/packages/design-system/src/components/Message/__snapshots__/Message.test.tsx.snap b/packages/design-system/src/components/Message/__snapshots__/Message.test.tsx.snap index 37779e46381..9628b326ead 100644 --- a/packages/design-system/src/components/Message/__snapshots__/Message.test.tsx.snap +++ b/packages/design-system/src/components/Message/__snapshots__/Message.test.tsx.snap @@ -14,7 +14,7 @@ exports[`Message should render a11y html 1`] = ` class="theme-message__title" >
All good
@@ -80,7 +80,7 @@ exports[`Message should render a11y html 1`] = ` class="theme-message__title" >
Something went wrong
@@ -146,7 +146,7 @@ exports[`Message should render a11y html 1`] = ` class="theme-message__title" >
Type incompatibilities
@@ -212,7 +212,7 @@ exports[`Message should render a11y html 1`] = ` class="theme-message__title" >
Auto mapping
diff --git a/packages/design-system/src/components/Tabs/Primitive/TabStyles.module.scss b/packages/design-system/src/components/Tabs/Primitive/TabStyles.module.scss index d0224816457..76737107486 100644 --- a/packages/design-system/src/components/Tabs/Primitive/TabStyles.module.scss +++ b/packages/design-system/src/components/Tabs/Primitive/TabStyles.module.scss @@ -102,4 +102,24 @@ margin-right: tokens.$coral-spacing-s; } } + + &_error { + color: tokens.$coral-color-danger-text; + + &[aria-selected='true'] { + color: tokens.$coral-color-danger-text; + } + } + + &_error::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + border-top: tokens.$coral-border-m-solid tokens.$coral-color-danger-text; + opacity: 0; + transition: tokens.$coral-transition-fast; + transform: translateY(100%); + } } diff --git a/packages/design-system/src/components/Tabs/Primitive/Tabs.tsx b/packages/design-system/src/components/Tabs/Primitive/Tabs.tsx index 2efcab63ffe..afb41f25541 100644 --- a/packages/design-system/src/components/Tabs/Primitive/Tabs.tsx +++ b/packages/design-system/src/components/Tabs/Primitive/Tabs.tsx @@ -1,12 +1,16 @@ import { useContext } from 'react'; + +import classNames from 'classnames'; + +import { IconNameWithSize } from '@talend/icons'; + import { SizedIcon } from '../../Icon'; -import { TagDefault } from '../../Tag'; import { StackHorizontal } from '../../Stack'; -import { TabsInternalContext } from './TabsProvider'; +import { TagDefault } from '../../Tag'; import { Tooltip } from '../../Tooltip'; +import { TabsInternalContext } from './TabsProvider'; + import style from './TabStyles.module.scss'; -import { IconNameWithSize } from '@talend/icons'; -import classNames from 'classnames'; export type TabsPropTypes = { children: React.ReactNode[]; @@ -28,6 +32,7 @@ export type TabPropTypes = { icon?: IconNameWithSize<'S'>; tag?: string | number; tooltip?: string; + error?: boolean; }; export function Tab(props: TabPropTypes) { @@ -36,7 +41,10 @@ export function Tab(props: TabPropTypes) { - + + - + + Jimmy, Somsanith + +
-
- -

- - This is description - -

-
-

- Widget not found - string -

+ + +

- Widget not found - string + + This is description +

+

+ Widget not found + string +

+

+ Widget not found + string +

diff --git a/packages/forms/src/UIForm/fieldsets/Tabs/Tabs.component.js b/packages/forms/src/UIForm/fieldsets/Tabs/Tabs.component.js index 86c65244bdd..c0529297e73 100644 --- a/packages/forms/src/UIForm/fieldsets/Tabs/Tabs.component.js +++ b/packages/forms/src/UIForm/fieldsets/Tabs/Tabs.component.js @@ -1,29 +1,23 @@ import PropTypes from 'prop-types'; -import { useState } from 'react'; -import TabBar from '@talend/react-components/lib/TabBar'; -import classNames from 'classnames'; -import { useTranslation } from 'react-i18next'; -import Widget from '../../Widget'; -import { isValid } from '../../utils/validation'; -import theme from './Tabs.module.scss'; -import { I18N_DOMAIN_FORMS } from '../../../constants'; +import { Tabs } from '@talend/design-system'; -function Tabs(props) { - const [selectedKey, setSelectedKey] = useState(0); - const { t } = useTranslation(I18N_DOMAIN_FORMS); +import { isValid } from '../../utils/validation'; +import Widget from '../../Widget'; +function TabsAdapter(props) { const { schema, ...restProps } = props; + const tabs = schema.items.map((item, index) => { const tabIsValid = isValid(item, restProps.errors); return { key: index, - label: item.title, - className: classNames({ [theme['has-error']]: !tabIsValid }), - 'aria-label': tabIsValid - ? undefined - : `${item.title} (${t('TF_TABS_HAS_ERRORS', { defaultValue: 'has errors' })})`, - children: ( + tabTitle: { + title: item.title, + id: `${restProps.id}-tabs-${index}`, + error: !tabIsValid, + }, + tabContent: ( setSelectedKey(item.key)} - selectedKey={selectedKey} - /> - ); + return ; } if (process.env.NODE_ENV !== 'production') { - Tabs.propTypes = { + TabsAdapter.propTypes = { errors: PropTypes.object, schema: PropTypes.shape({ items: PropTypes.arrayOf( @@ -57,4 +43,4 @@ if (process.env.NODE_ENV !== 'production') { }; } -export default Tabs; +export default TabsAdapter; diff --git a/packages/forms/src/UIForm/fieldsets/Tabs/__snapshots__/Tabs.component.test.js.snap b/packages/forms/src/UIForm/fieldsets/Tabs/__snapshots__/Tabs.component.test.js.snap index 816fb2e547e..f05c1ee2664 100644 --- a/packages/forms/src/UIForm/fieldsets/Tabs/__snapshots__/Tabs.component.test.js.snap +++ b/packages/forms/src/UIForm/fieldsets/Tabs/__snapshots__/Tabs.component.test.js.snap @@ -1,77 +1,54 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Tabs widget should render tabs 1`] = ` -
-
    - -
  • + + -
    • -
-
-
+
+ +
- + `; diff --git a/packages/forms/src/UIForm/utils/array.js b/packages/forms/src/UIForm/utils/array.js index cd0a78e6e03..bc8c3eb4f63 100644 --- a/packages/forms/src/UIForm/utils/array.js +++ b/packages/forms/src/UIForm/utils/array.js @@ -131,5 +131,6 @@ export function getArrayElementSchema(arraySchema, elementIndex) { items: getArrayElementItems(arraySchema, elementIndex), widget: arraySchema.itemWidget || 'fieldset', title: arraySchema.itemTitle, + managed: arraySchema.itemManaged, }; } diff --git a/packages/forms/stories/SchemaFieldsets.stories.tsx b/packages/forms/stories/SchemaFieldsets.stories.tsx index 0eb5518003f..be676465685 100644 --- a/packages/forms/stories/SchemaFieldsets.stories.tsx +++ b/packages/forms/stories/SchemaFieldsets.stories.tsx @@ -1,7 +1,8 @@ import type { Meta } from '@storybook/react'; + import { UIForm } from '../src'; -import { fieldsets } from './json'; import { argTypes } from './argTypes'; +import { fieldsets } from './json'; export default { title: 'Forms/Schema/Fieldsets', @@ -54,6 +55,16 @@ export const CoreCollapsibleFieldset = { data: fieldsets.coreCollapsibleFieldset, }, }; +export const CoreArraysCollapsibleFieldset = { + parameters: { + formStoryDisplayMode: { + doc: 'ArraysCollapsibleFieldset/README.md', + }, + }, + args: { + data: fieldsets.coreArraysCollapsibleFieldset, + }, +}; export const CoreColumns = { parameters: { formStoryDisplayMode: { diff --git a/packages/forms/stories/SchemaState.stories.tsx b/packages/forms/stories/SchemaState.stories.tsx index d8fe62fec2a..88cbac9217c 100644 --- a/packages/forms/stories/SchemaState.stories.tsx +++ b/packages/forms/stories/SchemaState.stories.tsx @@ -1,18 +1,18 @@ import { useState } from 'react'; -import type { Meta, StoryObj } from '@storybook/react'; + import { action } from '@storybook/addon-actions'; -import { UIForm } from '../src/UIForm'; +import type { Meta, StoryObj } from '@storybook/react'; -import { updatingSchema } from './UIFormStoriesSchemas/updating.schema'; -import { displayModeSchema } from './UIFormStoriesSchemas/displayMode.schema'; -import { errorsSchema } from './UIFormStoriesSchemas/errors.schema'; -import { hoverSubmitSchema } from './UIFormStoriesSchemas/hoverSubmit.schema'; +import { UIForm } from '../src/UIForm'; +import { argTypes } from './argTypes'; +import { CustomArrayTemplate } from './CustomArrayTemplate.component'; import { customActionsSchema } from './UIFormStoriesSchemas/customActions.schema'; import { customTemplateSchema } from './UIFormStoriesSchemas/customTemplate.schema'; import { customWidgetSchema } from './UIFormStoriesSchemas/customWidget.schema'; - -import { CustomArrayTemplate } from './CustomArrayTemplate.component'; -import { argTypes } from './argTypes'; +import { displayModeSchema } from './UIFormStoriesSchemas/displayMode.schema'; +import { errorsSchema } from './UIFormStoriesSchemas/errors.schema'; +import { hoverSubmitSchema } from './UIFormStoriesSchemas/hoverSubmit.schema'; +import { updatingSchema } from './UIFormStoriesSchemas/updating.schema'; function Template({ introduction, ...props }: any) { return ( @@ -85,7 +85,9 @@ const errorsProps = errorsSchema.uiSchema.reduce( ...acc, [current.key.split('.').join(',')]: 'There is an error', }), - {}, + { + tabConfiguration: 'There is an error', + }, ); export const Errors: Story = { diff --git a/packages/forms/stories/UIFormStoriesSchemas/errors.schema.js b/packages/forms/stories/UIFormStoriesSchemas/errors.schema.js index ef86ec63d6f..4f0454aa8f9 100644 --- a/packages/forms/stories/UIFormStoriesSchemas/errors.schema.js +++ b/packages/forms/stories/UIFormStoriesSchemas/errors.schema.js @@ -2,7 +2,25 @@ export const errorsSchema = { jsonSchema: { type: 'object', title: 'Comment', + required: ['fieldname'], properties: { + tabConfiguration: { + type: 'object', + properties: { + fieldname: { + type: 'string', + }, + }, + }, + fieldname: { + type: 'string', + }, + description: { + type: 'string', + }, + tabs: { + type: 'tabs', + }, arrayOfObjects: { type: 'array', items: { @@ -84,6 +102,35 @@ export const errorsSchema = { }, }, uiSchema: [ + { + key: 'tabs', + title: '2 Tabs', + widget: 'tabs', + items: [ + { + key: 'tabConfiguration', + title: 'Configuration', + widget: 'fieldset', + items: [ + { + key: 'fieldname', + title: 'Field Name', + }, + ], + }, + { + key: 'tabInfo', + title: 'Info', + widget: 'fieldset', + items: [ + { + key: 'description', + title: 'Description', + }, + ], + }, + ], + }, { key: 'arrayOfObjects', title: 'Array of objects', diff --git a/packages/forms/stories/json/fieldsets/core-arrays-collapsible.json b/packages/forms/stories/json/fieldsets/core-arrays-collapsible.json new file mode 100644 index 00000000000..143aaa96341 --- /dev/null +++ b/packages/forms/stories/json/fieldsets/core-arrays-collapsible.json @@ -0,0 +1,89 @@ +{ + "jsonSchema": { + "type": "object", + "title": "Comment", + "required": ["comments"], + "properties": { + "groupBy": { + "type": "array", + "minItems": 1, + "maxItems": 5, + "items": { + "type": "object", + "properties": { + "fieldName": { + "type": "string", + "enum": ["First Field", "Second Field", "Third Field"] + } + } + } + }, + "operations": { + "type": "array", + "minItems": 1, + "maxItems": 5, + "items": { + "type": "object", + "properties": { + "fieldName": { + "type": "string", + "enum": ["First Field", "Second Field", "Third Field"] + }, + "operation": { + "type": "string", + "enum": ["First Operation", "Second Operation", "Third Operation"] + } + } + } + } + } + }, + "uiSchema": [ + { + "key": "operations", + "title": "Operations", + "itemWidget": "collapsibleFieldset", + "itemManaged": false, + "items": [ + { + "key": "operations[].fieldName", + "title": "Field" + }, + { + "key": "operations[].operation", + "title": "Operation" + } + ] + }, + { + "key": "groupBy", + "title": "Group by", + "items": [ + { + "key": "groupBy[].fieldName", + "title": "Field" + } + ] + } + ], + "properties": { + "groupBy": [ + { + "fieldName": "First Field" + }, + { + "fieldName": "Second Field" + } + ], + "operations": [ + { + "fieldName": "First Field", + "operation": "First Operation" + }, + { + "fieldName": "Second Field", + "operation": "First Operation" + } + ] + } +} diff --git a/packages/forms/stories/json/fieldsets/index.ts b/packages/forms/stories/json/fieldsets/index.ts index fec5e66d191..74927719732 100644 --- a/packages/forms/stories/json/fieldsets/index.ts +++ b/packages/forms/stories/json/fieldsets/index.ts @@ -2,6 +2,7 @@ export { default as coreArraysComplex } from './core-arrays-complex.json'; export { default as coreArraysWithCustomOptions } from './core-arrays-with-custom-options.json'; export { default as coreArrays } from './core-arrays.json'; export { default as coreCollapsibleFieldset } from './core-collapsibleFieldset.json'; +export { default as coreArraysCollapsibleFieldset } from './core-arrays-collapsible.json'; export { default as coreColumns } from './core-columns.json'; export { default as coreFieldset } from './core-fieldset.json'; export { default as coreTabs } from './core-tabs.json'; diff --git a/tools/babel-plugin-assets-api/README.md b/tools/babel-plugin-assets-api/README.md index 37d3eb90445..5bd1d83297f 100644 --- a/tools/babel-plugin-assets-api/README.md +++ b/tools/babel-plugin-assets-api/README.md @@ -23,3 +23,5 @@ assetsAPI.getURL('/', 'react', '16.14.0'); assetsAPI.getJSON('/foo.json', 'react', '16.14.0'); assetsAPI.getUMD('react', '16.14.0', 'React', '/umd/react.production.min.js'); ``` + +As you can see it uses production path in the getUMD. diff --git a/tools/eslint-plugin/README.md b/tools/eslint-plugin/README.md index d57b8ec30e5..550a33ec0a3 100644 --- a/tools/eslint-plugin/README.md +++ b/tools/eslint-plugin/README.md @@ -4,8 +4,7 @@ This package contains internal rules used at Talend. ## Installation -You have nothing to do if you use Talend/ui-scripts. - +You have nothing to do if you use Talend/ui-scripts. If not this can be used as any other eslint plugin ## Usage @@ -13,29 +12,21 @@ Add `talend` to the plugins section of your `.eslintrc` configuration file. You ```json { - "plugins": [ - "@talend" - ] + "plugins": ["@talend"] } ``` - Then configure the rules you want to use under the rules section. ```json { - "rules": { - "@talend/import-depth": 2 - } + "rules": { + "@talend/import-depth": 2 + } } ``` ## Supported Rules -* [talend/import-depth](./docs/rules/talend-import-depth.md) -* [talend/import-d3](./docs/rules/talend-import-d3.md) - - - - - +- [talend/import-depth](./docs/rules/talend-import-depth.md) +- [talend/import-d3](./docs/rules/talend-import-d3.md) diff --git a/tools/scripts-cmf/README.md b/tools/scripts-cmf/README.md index 81f133ccf68..c133710d85a 100644 --- a/tools/scripts-cmf/README.md +++ b/tools/scripts-cmf/README.md @@ -2,15 +2,15 @@ ## Usage -launch the command below to build your webapp. you can add it into `prepublish` npm script. - ``` -yarn cmf-settings +npx @talend/scripts-cmf ``` -Note: If you add `node_modules/.bin` into your env _PATH_ you can directly type `cmf-settings`. +You can also launch the command below to build your webapp. you can add it into `prepublish` npm script. -## cmf-settings +``` +yarn cmf-settings +``` This script merge a set of settings `sources` into a `destination` file. Each sources is a path to eiter a folder or a file. diff --git a/tools/scripts-config-babel/README.md b/tools/scripts-config-babel/README.md index 4ba4d886455..2e829428c59 100644 --- a/tools/scripts-config-babel/README.md +++ b/tools/scripts-config-babel/README.md @@ -1,4 +1,6 @@ -# Babel config customisation +This package contains the main babel configuration used everywhere else in Talend. + +## Babel config customisation You can use your own babelrc but it is not recommanded. To do so, you will need to extend the preset babelrc. diff --git a/tools/scripts-config-react-webpack/CHANGELOG.md b/tools/scripts-config-react-webpack/CHANGELOG.md index 5524a90bac2..71db7ec5b50 100644 --- a/tools/scripts-config-react-webpack/CHANGELOG.md +++ b/tools/scripts-config-react-webpack/CHANGELOG.md @@ -1,5 +1,11 @@ # @talend/scripts-config-react-webpack +## 16.3.2 + +### Patch Changes + +- db246251d: fix: prevent display log of lot of warnings related to sass loader + ## 16.3.1 ### Patch Changes diff --git a/tools/scripts-config-react-webpack/config/webpack.config.common.js b/tools/scripts-config-react-webpack/config/webpack.config.common.js index 81c606202bd..f8a1cfd74f5 100644 --- a/tools/scripts-config-react-webpack/config/webpack.config.common.js +++ b/tools/scripts-config-react-webpack/config/webpack.config.common.js @@ -72,7 +72,13 @@ function getSassLoaders(enableModules, sassData, isEnvDevelopmentServe) { { loader: require.resolve('resolve-url-loader'), options: { sourceMap } }, { loader: require.resolve('sass-loader'), - options: { sourceMap, additionalData: sassData }, + options: { + sourceMap, + additionalData: sassData, + sassOptions: { + quietDeps: true, + }, + }, }, ); } diff --git a/tools/scripts-config-react-webpack/package.json b/tools/scripts-config-react-webpack/package.json index ba5ac230f4b..916d8e49856 100644 --- a/tools/scripts-config-react-webpack/package.json +++ b/tools/scripts-config-react-webpack/package.json @@ -1,7 +1,7 @@ { "name": "@talend/scripts-config-react-webpack", "description": "Webpack configuration for @talend/scripts-core", - "version": "16.3.1", + "version": "16.3.2", "license": "Apache-2.0", "main": "index.js", "author": "Talend Frontend ", diff --git a/tools/upgrade-deps/CHANGELOG.md b/tools/upgrade-deps/CHANGELOG.md index 187a53f51c3..a5c0ef01dde 100644 --- a/tools/upgrade-deps/CHANGELOG.md +++ b/tools/upgrade-deps/CHANGELOG.md @@ -1,5 +1,12 @@ # @talend/upgrade-deps +## 3.0.0 + +### Major Changes + +- e8c64eb49: Make upgrade-deps compatible with pnpm + [Breaking Change]remove security option (has it's not used) + ## 2.1.0 ### Minor Changes diff --git a/tools/upgrade-deps/package.json b/tools/upgrade-deps/package.json index c26ea4f0031..5dfab75e2d3 100644 --- a/tools/upgrade-deps/package.json +++ b/tools/upgrade-deps/package.json @@ -1,6 +1,6 @@ { "name": "@talend/upgrade-deps", - "version": "2.1.0", + "version": "3.0.0", "description": "CLI to help management of dependencies", "type": "module", "bin": {